\n \n \n Ctrl K\n
\n\n\n```\n\nIn React: `\n \n
\n\n```\n\nEvery other animation in the product, and the rules behind them: [`../../docs/motion.md`](../../docs/motion.md). Index of the kit: [`../README.md`](../README.md).\n",
"motion/skeleton/react/README.md": "# React copies\n\nUnmodified copies of the app files for this family (SpaceWorks 0.12.0; paths are relative to `frontend/src/`). They are reference code: they import app modules, Lingui (`t`) and Tailwind utility classes, so swap those for your own, or use the framework-free CSS one folder up, which is all the motion needs.\n\n| File | App path | Imports to provide or replace |\n|---|---|---|\n| `Skeleton.tsx` | `components/ui/Skeleton.tsx` | `../BoxSpinner` |\n| `ProgressBar.tsx` | `components/ui/ProgressBar.tsx` | none |\n| `cardJobs.tsx` | `features/cards/cardJobs.tsx` | `../../lib/format`, `@lingui/core/macro`, `../../lib/api` |\n",
"motion/theme-reveal/README.md": "# Theme reveal\n\nThe Space Works light/dark switch animation. When someone presses the theme toggle, the new theme grows from the\ntoggle as a circle and covers the page in 720 ms, so the change reads as chosen, not as a flash. Where the browser\ncannot do that it cross-fades; under reduced motion it switches instantly.\n\n\n\nOpen [`demo.html`](demo.html) in a browser for the real thing (a page, a round toggle and a Light / Dark / System\npicker). It uses the design tokens from [`../../tokens/tokens.css`](../../tokens/tokens.css).\n\n## Files\n\n| File | What it is |\n|---|---|\n| `theme-reveal.css` | The View Transition rules, the registered `--sw-reveal` property for the soft edge, and the cross-fade fallback. |\n| `theme-reveal.js` | Framework-free classic script. Exposes `SwThemeReveal.switchTheme(next, originEl)` and `SwThemeReveal.applyTheme(next)`. |\n| `demo.html` | Standalone sample page with a toggle and a segmented picker, including the no-flash pre-paint script. |\n| `react/` | The SpaceWorks app's own files: `themeTransition.ts` and `themeTransition.css` (the reveal), `theme.ts` (preference, system, storage), `themeReveal.ts` (wrapper), `ThemeToggle.tsx` and `ThemeChoice.tsx`. See the import note below. |\n| `previews/` | The animated preview (`theme-reveal.webp`, `.gif`), generated by `scripts/make-previews.mjs`. |\n\n## What it does\n\n1. `switchTheme(\"dark\", button)` finds the centre of `button`.\n2. With View Transitions, the browser snapshots the old page, `html.dark` is toggled inside the transition callback,\n and the **new** snapshot is revealed through a circle that grows from the button's centre to the farthest page\n corner, **720 ms**, `cubic-bezier(0.45, 0, 0.2, 1)`. The edge is soft (a 160 px feather) where a registered custom\n property can animate inside a mask; elsewhere it is a hard `clip-path` circle. The final frame is held\n (`fill: \"forwards\"`) so the old theme never flashes back.\n3. The preference is stored in `localStorage` under `makerspace.theme` (`light`, `dark` or `system`), the\n `` becomes `#FFF4E8` (light) or `#000000` (dark), and `html.dark` is the single source of\n truth. Storage failing (a private window) never stops the theme from changing for the session.\n\n## Timing and tokens\n\n| Part | Value |\n|---|---|\n| Reveal | 720 ms, `cubic-bezier(0.45, 0, 0.2, 1)`, grows from the toggle's centre |\n| Soft edge | 160 px feather |\n| Cross-fade fallback | 420 ms (class `sw-theme-fade` held for 460 ms) on `background-color`, `border-color`, `color`, `fill`, `stroke`, `box-shadow` |\n| Colours | `tokens/tokens.css`: `html.dark` swaps every `--color-*` triplet; nothing else in the page changes |\n| Browser chrome | `#FFF4E8` light, `#000000` dark |\n\nThe durations are deliberately longer than the 120 to 240 ms UI motion tokens: this is a page-level moment and never\nblocks input (see `docs/motion.md`).\n\n## Reduced motion and support\n\n- `prefers-reduced-motion: reduce`: the theme changes instantly, with no reveal and no fade.\n- No `document.startViewTransition` (Firefox before 144, older browsers): every colour cross-fades for 420 ms.\n- No `CSS.registerProperty` or mask support: hard-edged circle via `clip-path` instead of the soft edge.\n- If the animation API throws, the theme is still applied. The reveal is decoration, never a dependency.\n\n## Usage without a framework\n\n```html\n\n\n \n\n\n\n\n\n```\n\n`switchTheme(next, originEl, options)`: `next` is `\"light\"`, `\"dark\"` or `\"system\"`; `originEl` is the element the circle\ngrows from (omit it and the circle starts at the top right). Options: `storageKey` (default `makerspace.theme`),\n`onApply(isDark)`, called inside the transition when the theme is painted, for apps that mirror the theme somewhere\nelse (the design site sets `data-theme` there), and `apply(next)`, which replaces the default painting entirely (the\nTheming demo on the design site re-themes one container instead of ``).\n\n**Pair it with the pre-paint script.** The reveal only animates a change after the page is up. On first load the\nsynchronous `boot.js` in `` (see [`docs/theming.md`](../../docs/theming.md), section 3) must already have put\n`dark` on ``, or a returning dark-mode visitor sees a light flash before anything can animate.\n\n## Usage in React\n\nCopy `react/` into the app (the SpaceWorks app keeps them at `frontend/src/lib/` and `frontend/src/components/`):\n\n```tsx\nimport { useSyncExternalStore } from \"react\";\nimport { currentTheme, subscribeTheme } from \"./lib/theme\";\nimport { transitionTheme } from \"./lib/themeTransition\"; // imports ./themeTransition.css itself\n\nfunction ThemeToggle() {\n const theme = useSyncExternalStore(subscribeTheme, currentTheme);\n return ;\n}\n```\n\nCall `initializeTheme()` from `theme.ts` once before `createRoot(...).render`.\n\n### Import note for the `react/` copies\n\nThese are verbatim copies from the SpaceWorks app, so some imports point at app code that is not in this folder:\n\n- `theme.ts` imports `./safeStorage` (`readStorage`, `writeStorage`: `localStorage` wrapped in `try/catch`). The plain\n `try/catch` versions in `docs/theming.md` section 4 are equivalent.\n- `themeReveal.ts` is a thin wrapper kept for existing callers; new code can call `transitionTheme` directly.\n- `ThemeToggle.tsx` and `ThemeChoice.tsx` use the app's `@lingui` translations, `useDelight`/`useReducedMotion`\n (`components/delight/DelightProvider`), `icons`, `ui/IconButton` and `ui/SegmentedControl`. Replace those with your\n own button and picker; the only theme-specific call is `transitionTheme`/`revealTheme`.\n- `themeTransition.ts` also clears `data-sw-vt`, an app attribute a route transition uses. Drop that line if you\n have no route transitions.\n\n## Source of truth\n\nThe SpaceWorks app (`frontend/src/lib/themeTransition.ts`, `themeTransition.css`, `lib/theme.ts`). `theme-reveal.js`\nand `theme-reveal.css` are its framework-free mirror; change them together. `scripts/check-previews.mjs` fails when\n`theme-reveal.css`, `theme-reveal.js` or `demo.html` change without the preview being regenerated\n(`node scripts/make-previews.mjs theme-reveal`).\n",
"motion/toast/README.md": "# Toast\n\nA status toast arrives from just below its slot (12 px, fading in) and leaves by dropping 8 px while fading. It never steals focus; the message is announced through a polite live region (errors through an alert region).\n\nOpen [`demo.html`](demo.html) in a browser (it links `../../tokens/tokens.css`) and use \"Toggle dark\" to check both themes.\n\n## Files\n\n| File | What it is |\n|---|---|\n| `toast.css` | The `sw-fx-toast` rule and its two keyframes, copied unchanged from `styles/motionOverlay.css`. |\n| `demo.html` | A standalone page with the live animation in light and dark, replayable. |\n| `react/` | Copies of the real app files (see `react/README.md` for the imports to replace). |\n| `previews/` | Animated WebP and GIF previews, light and dark (regenerated by `scripts/make-previews.mjs`). |\n\n## Where the app uses it\n\n- `components/ui/ToastHost.tsx` (the one host mounted by the app shell): every save, undo, error and result message in staff, member and public flows.\n- `lib/motion/usePresence.ts` (`useExitingItems`) keeps a dismissed toast on screen, inert, while its exit plays.\n\n## Why\n\nStatus appears without taking focus or moving anything else, and its short exit confirms the dismissal. The tone (error colour) is carried by colour and text, never by shaking or bouncing.\n\n## Timing, easing and distance\n\n| Phase | Value |\n|---|---|\n| In | `--sw-dur-base` 180 ms, `--sw-ease-enter`, translateY 1.5 x `--sw-enter-y` (12 px) and opacity |\n| Out | `--sw-dur-fast` 120 ms, `--sw-ease-exit`, translateY `--sw-enter-y` (8 px) and opacity |\n\n## Trigger\n\nA toast is added to the store (`data-state=\"open\"`) or dismissed (`data-state=\"closed\"` plus `inert`, removed on animation end).\n\n## Reduced motion\n\nInside `no-preference`: the toast appears and disappears instantly; the live region still announces it.\n\n## Dark theme\n\nColour-neutral; the panel, border and error text colours are tokens.\n\n## Do and don't\n\n- Do announce through `role=\"status\"` (polite) or `role=\"alert\"` for errors.\n- Do keep the toast out of the focus order while it leaves (`inert`).\n- Do not shake, bounce or auto-focus a toast.\n- Do not add sound.\n\n## Copy-paste usage\n\n```html\n\n
Saved.
\n```\n\nTo dismiss: set `data-state=\"closed\"` and `inert`, then remove the element on `animationend`.\n\nEvery other animation in the product, and the rules behind them: [`../../docs/motion.md`](../../docs/motion.md). Index of the kit: [`../README.md`](../README.md).\n",
"motion/toast/react/README.md": "# React copies\n\nUnmodified copies of the app files for this family (SpaceWorks 0.12.0; paths are relative to `frontend/src/`). They are reference code: they import app modules, Lingui (`t`) and Tailwind utility classes, so swap those for your own, or use the framework-free CSS one folder up, which is all the motion needs.\n\n| File | App path | Imports to provide or replace |\n|---|---|---|\n| `ToastHost.tsx` | `components/ui/ToastHost.tsx` | `@lingui/core/macro`, `../../lib/motion`, `./toastStore`, `../BoxSpinner` |\n| `usePresence.ts` | `lib/motion/usePresence.ts` | `./motion` |\n| `motion.ts` | `lib/motion/motion.ts` | none |\n",
"motion/README.md": "# Space Works motion kit\n\nPart of Design System v2.0. Values are copied from the app as shipped in SpaceWorks 0.12.0.\n\nEvery animation in the product as a reusable, framework-free template: one folder per family, each with the CSS\n(copied unchanged from the app, using the tokens in [`../tokens/tokens.css`](../tokens/tokens.css)), `react/` copies\nof the real app files, a standalone `demo.html` (light and dark, honours reduced motion), animated `previews/`\n(WebP and GIF) and a README that says what it is, where the app uses it, why, the timing and easing tokens, the\ntrigger, reduced-motion and dark behaviour, do and don't, and copy-paste usage.\n\nThe full catalogue with every trigger and reduced-motion note is [`../docs/motion.md`](../docs/motion.md). The\nrules behind it: transform and opacity only, enter decelerates and exit accelerates, nothing on an interaction path\nover 240 ms, hover is colour only, reduced motion is a floor, never loop outside a loader, check both themes.\n\n## Folders\n\n| Folder | What it covers |\n|---|---|\n| [`box-open/`](box-open/README.md) | The box loader (loop), the inline spinner, the in-button mono spinner, the logo hover and focus opening, the cold-start splash opening |\n| [`theme-reveal/`](theme-reveal/README.md) | The light/dark switch: a circle growing from the toggle |\n| [`search/`](search/README.md) | The shared animated search field |\n| [`route-transition/`](route-transition/README.md) | Page change: old out, new in, only the main region |\n| [`page-enter/`](page-enter/README.md) | List stagger, sign-in facets and showcase, areas panel and proof |\n| [`scroll-reveal/`](scroll-reveal/README.md) | Landing story: pinned hero, handover steps beside a sticky record, reveal on scroll |\n| [`overlays/`](overlays/README.md) | Scrim fade, dialog pop, phone sheet, side drawers, menus and popovers |\n| [`toast/`](toast/README.md) | Status toast in and out |\n| [`sidebar/`](sidebar/README.md) | Sliding section and tab indicator |\n| [`collapse/`](collapse/README.md) | Height collapse via grid rows, disclosure chevrons |\n| [`skeleton/`](skeleton/README.md) | Still loading placeholders and the progress width |\n| [`hover-press/`](hover-press/README.md) | Colour-only hover, press sink, card, row and link hover |\n| [`feedback/`](feedback/README.md) | Verify stamp, result arrive, pass tear, logbook, return confetti |\n| [`delight/`](delight/README.md) | Logo flap spring and pop, Patch, companion walk, glyph tilt, card tilt and flip |\n| [`kiosk-display/`](kiosk-display/README.md) | Display slide fade and the kiosk and TV token override |\n\n## Every animation, where it lives\n\n| Animation | Folder | Where | Why |\n|---|---|---|---|\n| Mark opening on hover and focus | `box-open/` | Every Space Works logo placement (`AnimatedLogoMark`) | The brand signature; shows the link is live without moving layout |\n| Cold-start splash opening | `box-open/` | `index.html`, `lib/splash.ts` | First paint hands over to the header logo |\n| Cold-start splash flight and fade | `box-open/` | `lib/splash.ts` | The mark flies to the header logo (520 ms), then the splash fades (200 ms) |\n| Box loader (loop) | `box-open/` | `LogoLoader` route fallbacks and panels | One brand loading indicator |\n| Box spinner and mono | `box-open/` | `BoxSpinner` (buttons, rows, fields) | Inline and in-button busy state |\n| Theme switch reveal | `theme-reveal/` | `themeReveal.ts`, `themeTransition.ts` | The new theme grows from the toggle |\n| Animated search field | `search/` | Shared search field | See its README |\n| Route transition (View Transition) | `route-transition/` | `lib/motion/*`, `motionRoute.css` | A page change reads as one move; chrome stays still |\n| Route fallback fade (`sw-route-enter`) | `route-transition/` | Back and forward, unwrapped links | Same move without the API |\n| Scroll restoration | `route-transition/` | `ScrollManager.tsx` | Back returns to where you were |\n| Root cross-fade | `route-transition/` | `delight.css` | Non-route View Transitions fade the page (180 ms) |\n| Stagger rise | `page-enter/` | `StaggerGroup`, `layouts.css` | First load reads as assembled in order |\n| Facet entrance | `page-enter/` | `BrandFacets`, `fields.css` | Sign-in panel entrance, once |\n| Showcase rise | `page-enter/` | `fields.css` (`sw-auth-showcase`) | Sign-in cards arrive in turn |\n| Areas panel wipe | `page-enter/` | `AreasSection`, `hub.css` | A switched area is noticed |\n| Story proof rise | `page-enter/` | `StorySections`, `hub.css` | A new proof row lands |\n| Handover wizard step change | `page-enter/` | `HandoverWizard.tsx` | Shared fade and rise tokens |\n| Pinned hero sequence | `scroll-reveal/` | `HeroSection`, `useScrollSequence` | Promise to console to overview in one scene |\n| Handover steps beside sticky record | `scroll-reveal/` | `HandoverScrolly` | The evidence trail forms as steps pass |\n| Reveal on scroll | `scroll-reveal/` | `data-reveal` blocks | Sections arrive once |\n| Smooth scroll to target | `scroll-reveal/` | `HandoverScrolly`, `JoinButton`, kiosk recovery, print request | Bring the result into view |\n| Scrim fade | `overlays/` | Dialogs, drawers, docs drawer scrim | The layer arrives without a jump |\n| Dialog pop | `overlays/` | `Modal`, `FilterPopover`, `PresenceCheckInSheet` | Arrives from just in front |\n| Bottom sheet | `overlays/` | Dialogs under 640 px | Rises from the edge it docks to |\n| Drawer (right and left) | `overlays/` | `DetailDrawer`, `SidebarDrawer`, `DocsLayout` | Slides from its own edge |\n| Menu and popover | `overlays/` | `OverflowMenu`, user menu, popovers | Drops 4 px from the trigger |\n| Presence (exit keeps mounted) | `overlays/` | `usePresence.ts` | Exits can play and the layer is inert while closing |\n| Status toast | `toast/` | `ToastHost` | Status without stealing focus |\n| Sliding indicator (sidebar) | `sidebar/` | `Sidebar`, `useSlideIndicator` | One box shows the current section |\n| Tab underline slide | `sidebar/` | Staff panel tabs | Same hook on tabs |\n| Section collapse | `collapse/` | `Collapse`, `Disclosure`, sidebar \"More\" | A group opens without losing neighbours |\n| Disclosure chevrons | `collapse/` | Sidebar, collapsible and inspector sections, FAQ, docs nav | The arrow reports the state |\n| Skeleton placeholder | `skeleton/` | `Skeleton`, DataTable loading rows | Reserves the shape; box spinner inside |\n| Progress width | `skeleton/` | `cardJobs.tsx` | Progress eases to its value |\n| Press and hover colour | `hover-press/` | Buttons, tabs, nav items (`motion.css`) | The control answers; press sinks to 0.98 |\n| Hover colour on cards, rows, links, tabs | `hover-press/` | Space cards, hub, docs, directory, settings nav | Same colour-only rule |\n| Hover opacity and drag dim | `hover-press/` | Analytics bars, crew rows | Marks the hovered or dragged item |\n| Card verify stamp | `feedback/` | `CardVerifyPage` | A valid check lands with one stamp |\n| Return confetti | `feedback/` | `ReturnConfetti` | Celebrates a completed return (delight on only) |\n| Result arrive, pass tear, logbook open | `feedback/` | `delight.css` | Small human moments (delight on only) |\n| Logo flap spring and pop | `delight/` | `logoUnfold.css` | Playful flaps (delight on only) |\n| Patch: pet walk, naps, paw prints | `delight/` | `NotFoundPatch` | The 404 pet |\n| Patch moment trot | `delight/` | `PatchMoment` | Still moment that trots once |\n| Patch \"z\" | `delight/` | `patch.css` | Sleeping decoration (loops, decorative) |\n| Companion walk | `delight/` | `Companion` | Decorative walk (loops, decorative) |\n| Glyph tilt | `delight/` | `delight.css` | -3 deg under the pointer |\n| Card tilt and flip | `delight/` | `HolographicCard` | The printed card follows the pointer |\n| Display slide fade | `kiosk-display/` | `spaceDisplay/display.css` | One fade per slide; a Pi stays idle |\n| Kiosk and TV token override | `kiosk-display/` | `.sw-kiosk`, `.sw-tv` | Fades only on shared screens |\n\n## Previews and checks\n\nAnimated WebP and GIF previews (light and dark, each under 400 KB) are in every folder's `previews/`. They are\nrendered in headless Edge from the same CSS by `node scripts/make-previews.mjs motion-kit`, with every CSS\nanimation and transition paused and seeked to an exact time per frame. `node scripts/check-previews.mjs` fails when\nany family's CSS, demo page or preview is stale or missing.\n\n## Using a family\n\n1. Link `tokens/tokens.css` (it defines the motion tokens and both themes: dark is the class `dark` on ``).\n2. Link the family stylesheet and copy the markup from its `demo.html`.\n3. Check it in light and dark, and with `prefers-reduced-motion: reduce`.\n"
}