Upgrade Remix to 3.0.0 (#513)

* Upgrade Remix to 3.0.0-rc.5

* Upgrade to stable Remix 3.0.0

---------

Co-authored-by: Matt Brophy <matt@brophy.org>

Author: brookslybrand

.agents/skills/remix/SKILL.md

@@ -73,8 +73,8 @@ The runtime adapter passes requests to `router.fetch(request)`. Generate URLs fr
 Remix UI uses JSX, but it is not React. A component's setup function runs once per instance and returns a render function. Local variables in setup preserve state between renders; event handlers change that state and call `handle.update()` to request another render:
 
 ```tsx
-import { on } from "remix/ui";
-import type { Handle } from "remix/ui";
+import { on } from "remix/component";
+import type { Handle } from "remix/component";
 
 function Counter(handle: Handle) {
   let count = 0;
@@ -95,6 +95,8 @@ function Counter(handle: Handle) {
 
 Read changing props from `handle.props` during render, rather than capturing their initial values in setup. Do not apply React hooks or lifecycle assumptions.
 
+The runtime and its server/test/JSX subpaths live in `remix/component`; component HMR lives in `remix/component-hmr`. Headless UI primitives and animations require the separately installed `@remix-run/ui` package (for example, `@remix-run/ui/accordion` and `@remix-run/ui/animation`). Add it to the asset server’s `allowPackages` when used in browser modules. App code owns markup and styles; the previous styled UI components are no longer available.
+
 Event handlers run only when the component is mounted or hydrated in the browser; server-rendered HTML alone is not interactive. Follow the installed interactivity guide and the app's existing browser-entry setup.
 
 ## Work Within the App

AGENTS.md

@@ -35,7 +35,7 @@ Keep the Remix 3 website implementation lean, stable, and behaviorally aligned w
 
 ## UI Behavior Defaults
 
-- Prefer CSS for visual states and animations. Use `remix/ui/animation` helpers for CSS transitions when they fit; keep JavaScript for state/timing rather than frame-by-frame styling.
+- Prefer CSS for visual states and animations. Use `@remix-run/ui/animation` helpers for CSS transitions when they fit; keep JavaScript for state/timing rather than frame-by-frame styling.
 - Treat `prefers-reduced-motion` as its own behavior path. Avoid churny intro animations, large hover expansions, and motion-heavy effects; provide a simple static hover/focus state instead of removing feedback entirely.
 - Keep accessible labels stable when visual text updates frequently. For animated counters/timers, prefer a stable label that states the event/date and hide the decorative changing digits from assistive tech.
 - Add focused tests around public behavior. Prefer component/browser tests for interactive UI when feasible; avoid testing internal helpers just because they are easy to import.

app/actions/blog/controller.tsx

@@ -1,5 +1,5 @@
 import { createController } from "remix/router";
-import { css, type Handle } from "remix/ui";
+import { css, type Handle } from "remix/component";
 
 import { Document } from "../../ui/document.tsx";
 import { Footer } from "../../ui/footer.tsx";

app/actions/blog/post-page.tsx

@@ -1,4 +1,4 @@
-import { css, unsafeHTML, type Handle } from "remix/ui";
+import { css, unsafeHTML, type Handle } from "remix/component";
 import { Document } from "../../ui/document.tsx";
 import { Footer } from "../../ui/footer.tsx";
 import { Header } from "../../ui/header.tsx";

app/actions/brand.tsx

@@ -1,4 +1,4 @@
-import { css, type Handle, type RemixNode } from "remix/ui";
+import { css, type Handle, type RemixNode } from "remix/component";
 import { Document } from "../ui/document.tsx";
 import { Footer } from "../ui/footer.tsx";
 import { Header } from "../ui/header.tsx";

app/actions/home-landing-content.tsx

@@ -1,4 +1,4 @@
-import { css, type Handle } from "remix/ui";
+import { css, type Handle } from "remix/component";
 
 import { textBoxTrim } from "../ui/public/css-mixins.ts";
 import { breakpointMedia, theme } from "../ui/public/theme.ts";

app/actions/home.tsx

@@ -1,4 +1,4 @@
-import { css, type Handle } from "remix/ui";
+import { css, type Handle } from "remix/component";
 import { RemixLandingEnhancements } from "./public/remix-landing/landing-enhancements.tsx";
 import { RUNNER_AVIF_SRC } from "./public/remix-landing/runner-media.ts";
 import { colors } from "./public/remix-landing/styles/tokens.ts";

app/actions/jam/y2025/coc.tsx

@@ -1,4 +1,4 @@
-import { css, type Handle } from "remix/ui";
+import { css, type Handle } from "remix/component";
 
 import { routes } from "../../../routes.ts";
 import { JamDocument } from "./document.tsx";

app/actions/jam/y2025/controller.tsx

@@ -1,5 +1,5 @@
 import { createController } from "remix/router";
-import { css, type Handle, type RemixNode } from "remix/ui";
+import { css, type Handle, type RemixNode } from "remix/component";
 
 import { getSchedule } from "../../../data/jam-schedule.ts";
 import { routes } from "../../../routes.ts";

app/actions/jam/y2025/document.tsx

@@ -1,4 +1,4 @@
-import { css, type Handle, type RemixNode } from "remix/ui";
+import { css, type Handle, type RemixNode } from "remix/component";
 import { Document } from "../../../ui/document.tsx";
 import { getSocialHeadTags } from "../../../utils/social-head-tags.ts";
 import { JamPageScaffold } from "./public/shared.tsx";