@sophostechne/ui 0.18.2

package/CHANGELOG.md

@@ -0,0 +1,268 @@
+# Changelog
+
+All notable changes to `@sophostechne/ui` are documented here. Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## 0.18.2
+
+### Changed
+
+- **`filler-bg0` asset replaced** — new HACK//IT themed artwork: a hooded operator at a CRT terminal, with code rain, circuit traces, and a perspective grid floor. Same duotone risograph treatment (cream paper, federal blue ink, ordered-dither stipple, misregistered second pass) and the same 1024×1024 WebP filename, so `Poster`, `ImageDistortion`, and the lens overlays pick it up with no code change.
+
+## 0.17.0
+
+Promotes reusable components and hooks from `hackit-agent/web` into the shared design system, and consolidates all dialog/modal implementations on Radix UI primitives.
+
+### Added
+
+- **`Dialog` compound component** — general-purpose modal built on Radix Dialog primitive. Compound API: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`. Dismissible via backdrop click or ESC.
+- **`Input`** — styled text input with focus ring, disabled state, courier font.
+- **`Label`** — form label with mondwest font, uppercase tracking, peer-disabled opacity.
+- **`Separator`** — horizontal/vertical divider with `role="separator"`.
+- **`Card`** compound component — `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent` with themeable `--component-card-*` CSS custom properties.
+- **`Toast`** — portal-based success/error notification with enter/exit animations.
+- **`BottomSheet`** — mobile-first bottom sheet with drag-to-dismiss, backdrop, reduced-motion support.
+- **`useToast`** — toast state management with auto-dismiss timer.
+- **`useBelowBreakpoint`** — `matchMedia`-based responsive breakpoint query (SSR-safe).
+- **`useConfirmDelete`** — generic confirm-delete flow state machine.
+- **Forms overview story** — showcases all form controls in one view.
+- Toast keyframes (`toast-in`, `toast-out`) in `globals.css`.
+
+### Changed
+
+- **`ConfirmDialog` rebuilt on Radix AlertDialog** — same external API (`open`, `onCancel`, `onConfirm`, `title`, `description`, `destructive`, `loading`), but ESC handling, focus trapping, scroll lock, and portal rendering are now handled by Radix. Backdrop click does not dismiss (correct for destructive confirms).
+- **`Checkbox` migrated to unified `radix-ui` package** — import changed from `@radix-ui/react-checkbox` to `radix-ui`.
+- **Dependency:** `@radix-ui/react-checkbox` replaced with unified `radix-ui` package.
+- Storybook stories organized into categories (Forms, Feedback, Overlays, Data Display, Layout, Effects).
+- Kitchen-sink demo updated to use new `Dialog`.
+
+### Removed
+
+- **`Modal` component** (`modal/index.tsx`, `modal.css`) — unused by any consumer app; replaced by `Dialog`.
+- **`useModalBehavior` hook** — functionality now provided natively by Radix Dialog/AlertDialog primitives.
+- Stale `modal.css` import from `globals.css`.
+
+### Fixed
+
+- Portal text color: dialogs now use `text-foreground-base` for correct rendering outside the blend-mode stack.
+
+## 0.16.0
+
+Reworks how the brand uppercase + Mondwest styling and color hierarchy are applied, addressing legibility, contrast, and themability complaints from consumers (notably the Hackit Dashboard).
+
+### Added
+
+- **`text-display` utility** — composable brand display style (`text-transform: uppercase` + `letter-spacing: 0.05em`). Purely typographic; pairs with any font utility.
+- **Semantic text-color tokens** — `text-text-primary`, `text-text-secondary`, `text-text-tertiary`, `text-text-disabled`, `text-text-on-accent`, `text-text-display` with WCAG AA-targeted defaults in `globals.css`.
+
+### Changed
+
+- **Breaking:** `LayoutWrapper` and Storybook shell no longer apply global `uppercase` or `font-mondwest`. Apply `text-display` (and `font-mondwest` where desired) on brand chrome only.
+- DS components (`Button`, `Badge`, `Tabs`, `Segmented`, `FilterGroup`, `CopyButton`, `Stats`, `TierCard`, `TerminalDemo`, `Watchlist`) use `text-display` instead of hard-coded `uppercase`.
+- Component legibility: micro-type bumped to `text-xs`; inactive/disabled states use semantic tokens instead of stacked opacity.
+
+### Tooling
+
+- `src/` included in the published tarball.
+- Inline source maps embedded in `dist/ui/*.js`.
+- Storybook: **Display type** story and **Docs → Changelog** page.
+
+## 0.15.0
+
+### Added
+
+- Storybook autodocs enabled for all components ([#21](https://github.com/SophosTechne/design-language/pull/21)).
+
+## 0.14.2
+
+### Added
+
+- `Checkbox` component built on Radix primitive ([#20](https://github.com/SophosTechne/design-language/pull/20)).
+
+### Fixed
+
+- `defaultChecked` preserved on native input for form reset.
+- Checkbox visuals in uncontrolled mode.
+
+## 0.14.1
+
+### Changed
+
+- `@font-face` declarations moved out of `globals.css` into optional `fonts.css`.
+- Documented optional font stylesheet setup in README.
+
+### Fixed
+
+- Font variable defaults remain in `globals.css`.
+
+## 0.14.0
+
+### Added
+
+- `unbuild` / `mkdist` library build pipeline.
+- `vite-plugin-static-copy` for asset handling in the build.
+
+### Changed
+
+- Bundle size reduced (~4.9 MB → ~1.9 MB).
+- Storybook stories reorganized; stories excluded from Vite library entries.
+
+## 0.13.2
+
+### Added
+
+- GitHub Actions workflow for trusted npm publishing on merge to `main`.
+
+### Removed
+
+- Manual release script and pnpm workspace file.
+
+### Fixed
+
+- Publish workflow condition syntax.
+
+## 0.13.1
+
+### Fixed
+
+- Text readability improvements.
+
+## 0.13.0
+
+### Changed
+
+- Overlay/canvas performance: pause render loops when hidden/offscreen; cap FPS and DPR.
+
+## 0.12.0
+
+### Fixed
+
+- Eager GPU tier detection to avoid WebGL crash on first render.
+
+## 0.11.0
+
+### Added
+
+- Expanded `Header` component.
+- Icon exports.
+
+### Changed
+
+- Overlays decoupled from layout concerns.
+- Introduction story updates.
+
+## 0.10.0
+
+### Added
+
+- Unicode/braille spinners.
+
+## 0.9.0
+
+### Added
+
+- `Switch`, `Tabs`, `Segmented`, and `ListItem` components.
+
+## 0.8.0
+
+### Added
+
+- `Select` component.
+
+## 0.7.0
+
+### Changed
+
+- Package renamed `nouse` → `sophos`.
+- Badge support improvements.
+
+### Fixed
+
+- Button styling.
+
+## 0.6.0
+
+### Fixed
+
+- Button component fixes.
+
+## 0.5.0
+
+### Added
+
+- `Poster` and `TierCard` components.
+
+### Fixed
+
+- Poster and build fixes.
+
+## 0.4.0
+
+### Added
+
+- Migrated components: image distortion, hamburger icon, terminal demo, theme toggle, click-to-copy command blocks.
+
+## 0.3.0
+
+### Added
+
+- Storybook setup.
+
+### Fixed
+
+- Removed Next.js dependencies from the package.
+
+## 0.2.7
+
+### Fixed
+
+- Stats flip animation.
+
+## 0.2.6
+
+### Added
+
+- Flip animation on `Stats`.
+
+## 0.2.5
+
+### Changed
+
+- Global font size adjustments.
+
+## 0.2.4
+
+### Changed
+
+- Slightly increased global font size.
+
+### Fixed
+
+- Hover state for inverted/outlined buttons when foreground alpha is near zero.
+
+## 0.2.3
+
+### Fixed
+
+- Hover state for inverted/outlined on low foreground alpha.
+
+## 0.2.2
+
+### Fixed
+
+- Global CSS selector update.
+
+## 0.2.1
+
+### Changed
+
+- Simplified style setup for consumers.
+
+## 0.2.0
+
+### Added
+
+- Initial tagged release of the shared design system package.
+
+## 0.1.x
+
+Versions `0.1.0`–`0.1.3` were published to npm before git tags were added in this repository. See [npm version history](https://www.npmjs.com/package/@sophostechne/ui?activeTab=versions) for install pins.

package/README.md

@@ -0,0 +1,112 @@
+# sophos ui
+
+the shared design system for react ui @ sophos. components, hooks, utils, fonts, overlays, etc.
+
+## setup
+
+`npm i @sophostechne/ui` or `pnpm i @sophostechne/ui`
+
+import the global styles in your app's root css file:
+
+```css
+@import 'tailwindcss';
+@import '@sophostechne/ui/styles/globals.css';
+```
+
+`globals.css` includes the design-system tokens, utilities, component styles,
+and default `--font-*` variable values, but does not register font files.
+Import the optional font stylesheet first if your app wants CSS-managed
+`@font-face` declarations:
+
+```css
+@import 'tailwindcss';
+@import '@sophostechne/ui/styles/fonts.css';
+@import '@sophostechne/ui/styles/globals.css';
+```
+
+Next.js apps should prefer `next/font/local` with the exported
+`@sophostechne/ui/fonts/*` files and map them to the same `--font-*`
+variables. Apps can also provide their own `--font-*` variables while keeping
+the design-system utilities from `globals.css`.
+
+## usage
+
+everything exports from the top level export:
+
+```tsx
+import {
+  Button,
+  Grid
+  // whatever else!
+} from '@sophostechne/ui'
+```
+
+## local development
+
+two ways to preview components while editing:
+
+### storybook (per-component, primary)
+
+```
+pnpm storybook        # dev server on http://localhost:6006
+pnpm build-storybook  # static build → ./storybook-static
+```
+
+stories live in `stories/*.stories.tsx`. the **Overview** story re-renders
+the entire `/ds` page, so you always have a kitchen-sink view alongside the
+isolated component stories. the **Lens** toolbar above the preview cycles
+between the lens presets (`0`, `1`, `2`, `3`, `4`, `5`, `5i`, `6`).
+
+### next.js showcase (kitchen-sink, secondary)
+
+```
+pnpm dev              # next dev on http://localhost:3000 → redirects to /ds
+```
+
+`app/ds/page.tsx` is the same content the Overview story renders.
+
+## publishing
+
+```
+pnpm build     # tsc → dist/ + copies css / fonts / assets
+```
+
+releases are published automatically when PRs merge to `main`. the github
+workflow bumps the package version from the merged PR labels (`major`, `minor`,
+or `patch`), pushes the tag, publishes to npm via trusted publishing, and
+creates a [GitHub Release](https://github.com/SophosTechne/design-language/releases)
+with notes from `CHANGELOG.md`.
+
+before merging:
+
+1. leave `package.json` at the **current published** version on `main` (CI bumps
+   it after merge).
+2. label the PR so the bump matches your changelog section:
+
+| PR label | bump from `0.15.0` | changelog heading |
+| --- | --- | --- |
+| `patch` (default) | `0.15.1` | `## 0.15.1` |
+| `minor` | `0.16.0` | `## 0.16.0` |
+| `major` | `1.0.0` | `## 1.0.0` |
+
+3. add that `## X.Y.Z` section to [`CHANGELOG.md`](./CHANGELOG.md) — release
+   notes are pulled from it for npm and GitHub Releases.
+
+the same file is rendered in Storybook under **Docs → Changelog** and shipped in
+the npm tarball.
+
+the published tarball ships `dist/`, `src/`, `README.md`, and `CHANGELOG.md`
+(see `files` in `package.json`). inline source maps are embedded in `dist/` so
+consumers can debug into the TypeScript source.
+
+## deployment
+
+`vercel.json` builds both and serves them on a single Next.js deployment:
+
+- `/` and `/ds` — the Next.js showcase (same as `pnpm dev`)
+- `/storybook` — the static Storybook build (copied to `public/storybook/`
+  before `next build` so Next serves it like any other static asset)
+
+Want Storybook-only? replace `buildCommand` with `pnpm build-storybook` and
+add `"outputDirectory": "storybook-static"`. `app/ds` can stay for local
+`pnpm dev` either way — the Overview story renders the same content.

package/dist/assets.d.ts

@@ -0,0 +1,38 @@
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  blurDataURL?: string
+  blurWidth?: number
+  blurHeight?: number
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.png' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.svg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.gif' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.webp' {
+  const content: StaticImageData
+  export default content
+}

package/dist/fonts.d.ts

@@ -0,0 +1,6 @@
+/** CSS variable names for the design language fonts. Set automatically by fonts.css. */
+export declare const FONT_SANS = "--font-sans";
+export declare const FONT_MONO = "--font-mono";
+export declare const FONT_RULES_COMPRESSED = "--font-rules-compressed";
+export declare const FONT_RULES_EXPANDED = "--font-rules-expanded";
+export declare const FONT_MONDWEST = "--font-mondwest";

package/dist/fonts.js

@@ -0,0 +1,6 @@
+export const FONT_SANS = "--font-sans";
+export const FONT_MONO = "--font-mono";
+export const FONT_RULES_COMPRESSED = "--font-rules-compressed";
+export const FONT_RULES_EXPANDED = "--font-rules-expanded";
+export const FONT_MONDWEST = "--font-mondwest";
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyoqIENTUyB2YXJpYWJsZSBuYW1lcyBmb3IgdGhlIGRlc2lnbiBsYW5ndWFnZSBmb250cy4gU2V0IGF1dG9tYXRpY2FsbHkgYnkgZm9udHMuY3NzLiAqL1xuZXhwb3J0IGNvbnN0IEZPTlRfU0FOUyA9ICctLWZvbnQtc2FucydcbmV4cG9ydCBjb25zdCBGT05UX01PTk8gPSAnLS1mb250LW1vbm8nXG5leHBvcnQgY29uc3QgRk9OVF9SVUxFU19DT01QUkVTU0VEID0gJy0tZm9udC1ydWxlcy1jb21wcmVzc2VkJ1xuZXhwb3J0IGNvbnN0IEZPTlRfUlVMRVNfRVhQQU5ERUQgPSAnLS1mb250LXJ1bGVzLWV4cGFuZGVkJ1xuZXhwb3J0IGNvbnN0IEZPTlRfTU9ORFdFU1QgPSAnLS1mb250LW1vbmR3ZXN0J1xuIl0sCiAgIm1hcHBpbmdzIjogIkFBQ08sYUFBTSxZQUFZO0FBQ2xCLGFBQU0sWUFBWTtBQUNsQixhQUFNLHdCQUF3QjtBQUM5QixhQUFNLHNCQUFzQjtBQUM1QixhQUFNLGdCQUFnQjsiLAogICJuYW1lcyI6IFtdCn0K

package/dist/hooks/use-below-breakpoint.d.ts

@@ -0,0 +1,2 @@
+/** True when viewport width is strictly below `px`. */
+export declare function useBelowBreakpoint(px: number): boolean;

package/dist/hooks/use-below-breakpoint.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useState } from "react";
+export function useBelowBreakpoint(px) {
+  const query = `(max-width: ${px - 1}px)`;
+  const [matches, setMatches] = useState(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const sync = () => setMatches(mql.matches);
+    sync();
+    mql.addEventListener("change", sync);
+    return () => mql.removeEventListener("change", sync);
+  }, [query]);
+  return matches;
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuLyoqIFRydWUgd2hlbiB2aWV3cG9ydCB3aWR0aCBpcyBzdHJpY3RseSBiZWxvdyBgcHhgLiAqL1xuZXhwb3J0IGZ1bmN0aW9uIHVzZUJlbG93QnJlYWtwb2ludChweDogbnVtYmVyKSB7XG4gIGNvbnN0IHF1ZXJ5ID0gYChtYXgtd2lkdGg6ICR7cHggLSAxfXB4KWBcbiAgY29uc3QgW21hdGNoZXMsIHNldE1hdGNoZXNdID0gdXNlU3RhdGUoKCkgPT5cbiAgICB0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJyA/IHdpbmRvdy5tYXRjaE1lZGlhKHF1ZXJ5KS5tYXRjaGVzIDogZmFsc2VcbiAgKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgbXFsID0gd2luZG93Lm1hdGNoTWVkaWEocXVlcnkpXG4gICAgY29uc3Qgc3luYyA9ICgpID0+IHNldE1hdGNoZXMobXFsLm1hdGNoZXMpXG4gICAgc3luYygpXG4gICAgbXFsLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIHN5bmMpXG4gICAgcmV0dXJuICgpID0+IG1xbC5yZW1vdmVFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCBzeW5jKVxuICB9LCBbcXVlcnldKVxuXG4gIHJldHVybiBtYXRjaGVzXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBRUEsU0FBUyxXQUFXLGdCQUFnQjtBQUc3QixnQkFBUyxtQkFBbUIsSUFBWTtBQUM3QyxRQUFNLFFBQVEsZUFBZSxLQUFLLENBQUM7QUFDbkMsUUFBTSxDQUFDLFNBQVMsVUFBVSxJQUFJO0FBQUEsSUFBUyxNQUNyQyxPQUFPLFdBQVcsY0FBYyxPQUFPLFdBQVcsS0FBSyxFQUFFLFVBQVU7QUFBQSxFQUNyRTtBQUVBLFlBQVUsTUFBTTtBQUNkLFVBQU0sTUFBTSxPQUFPLFdBQVcsS0FBSztBQUNuQyxVQUFNLE9BQU8sTUFBTSxXQUFXLElBQUksT0FBTztBQUN6QyxTQUFLO0FBQ0wsUUFBSSxpQkFBaUIsVUFBVSxJQUFJO0FBQ25DLFdBQU8sTUFBTSxJQUFJLG9CQUFvQixVQUFVLElBQUk7QUFBQSxFQUNyRCxHQUFHLENBQUMsS0FBSyxDQUFDO0FBRVYsU0FBTztBQUNUOyIsCiAgIm5hbWVzIjogW10KfQo=

package/dist/hooks/use-capped-frame.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCallback } from '@react-three/fiber';
+export declare function useCappedFrame(cb: RenderCallback, max?: number): void;

package/dist/hooks/use-capped-frame.js

@@ -0,0 +1,15 @@
+"use client";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useRef } from "react";
+export function useCappedFrame(cb, max) {
+  const last = useRef(performance.now());
+  const { size } = useThree();
+  const interval = 1e3 / (max ?? (size.width < 1024 ? 60 : 120));
+  useFrame((st, delta) => {
+    if (performance.now() - last.current > interval) {
+      last.current = performance.now();
+      cb(st, delta);
+    }
+  });
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUZyYW1lLCB1c2VUaHJlZSB9IGZyb20gJ0ByZWFjdC10aHJlZS9maWJlcidcbmltcG9ydCB0eXBlIHsgUmVuZGVyQ2FsbGJhY2sgfSBmcm9tICdAcmVhY3QtdGhyZWUvZmliZXInXG5pbXBvcnQgeyB1c2VSZWYgfSBmcm9tICdyZWFjdCdcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUNhcHBlZEZyYW1lKGNiOiBSZW5kZXJDYWxsYmFjaywgbWF4PzogbnVtYmVyKSB7XG4gIGNvbnN0IGxhc3QgPSB1c2VSZWYocGVyZm9ybWFuY2Uubm93KCkpXG4gIGNvbnN0IHsgc2l6ZSB9ID0gdXNlVGhyZWUoKVxuICBjb25zdCBpbnRlcnZhbCA9IDFlMyAvIChtYXggPz8gKHNpemUud2lkdGggPCAxMDI0ID8gNjAgOiAxMjApKVxuXG4gIHVzZUZyYW1lKChzdCwgZGVsdGEpID0+IHtcbiAgICBpZiAocGVyZm9ybWFuY2Uubm93KCkgLSBsYXN0LmN1cnJlbnQgPiBpbnRlcnZhbCkge1xuICAgICAgbGFzdC5jdXJyZW50ID0gcGVyZm9ybWFuY2Uubm93KClcbiAgICAgIGNiKHN0LCBkZWx0YSlcbiAgICB9XG4gIH0pXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBRUEsU0FBUyxVQUFVLGdCQUFnQjtBQUVuQyxTQUFTLGNBQWM7QUFFaEIsZ0JBQVMsZUFBZSxJQUFvQixLQUFjO0FBQy9ELFFBQU0sT0FBTyxPQUFPLFlBQVksSUFBSSxDQUFDO0FBQ3JDLFFBQU0sRUFBRSxLQUFLLElBQUksU0FBUztBQUMxQixRQUFNLFdBQVcsT0FBTyxRQUFRLEtBQUssUUFBUSxPQUFPLEtBQUs7QUFFekQsV0FBUyxDQUFDLElBQUksVUFBVTtBQUN0QixRQUFJLFlBQVksSUFBSSxJQUFJLEtBQUssVUFBVSxVQUFVO0FBQy9DLFdBQUssVUFBVSxZQUFZLElBQUk7QUFDL0IsU0FBRyxJQUFJLEtBQUs7QUFBQSxJQUNkO0FBQUEsRUFDRixDQUFDO0FBQ0g7IiwKICAibmFtZXMiOiBbXQp9Cg==

package/dist/hooks/use-confirm-delete.d.ts

@@ -0,0 +1,10 @@
+export declare function useConfirmDelete<TId>({ onDelete }: {
+    onDelete: (id: TId) => Promise<void>;
+}): {
+    readonly cancel: () => void;
+    readonly confirm: () => Promise<void>;
+    readonly isDeleting: boolean;
+    readonly isOpen: boolean;
+    readonly pendingId: TId | null;
+    readonly requestDelete: (id: TId) => void;
+};

package/dist/hooks/use-confirm-delete.js

@@ -0,0 +1,35 @@
+"use client";
+import { useCallback, useState } from "react";
+export function useConfirmDelete({
+  onDelete
+}) {
+  const [pendingId, setPendingId] = useState(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const requestDelete = useCallback((id) => {
+    setPendingId(id);
+  }, []);
+  const cancel = useCallback(() => {
+    if (!isDeleting) setPendingId(null);
+  }, [isDeleting]);
+  const confirm = useCallback(async () => {
+    if (pendingId === null) return;
+    const id = pendingId;
+    setIsDeleting(true);
+    try {
+      await onDelete(id);
+      setPendingId(null);
+    } catch {
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [pendingId, onDelete]);
+  return {
+    cancel,
+    confirm,
+    isDeleting,
+    isOpen: pendingId !== null,
+    pendingId,
+    requestDelete
+  };
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ29uZmlybURlbGV0ZTxUSWQ+KHtcbiAgb25EZWxldGVcbn06IHtcbiAgb25EZWxldGU6IChpZDogVElkKSA9PiBQcm9taXNlPHZvaWQ+XG59KSB7XG4gIGNvbnN0IFtwZW5kaW5nSWQsIHNldFBlbmRpbmdJZF0gPSB1c2VTdGF0ZTxUSWQgfCBudWxsPihudWxsKVxuICBjb25zdCBbaXNEZWxldGluZywgc2V0SXNEZWxldGluZ10gPSB1c2VTdGF0ZShmYWxzZSlcblxuICBjb25zdCByZXF1ZXN0RGVsZXRlID0gdXNlQ2FsbGJhY2soKGlkOiBUSWQpID0+IHtcbiAgICBzZXRQZW5kaW5nSWQoaWQpXG4gIH0sIFtdKVxuXG4gIGNvbnN0IGNhbmNlbCA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBpZiAoIWlzRGVsZXRpbmcpIHNldFBlbmRpbmdJZChudWxsKVxuICB9LCBbaXNEZWxldGluZ10pXG5cbiAgY29uc3QgY29uZmlybSA9IHVzZUNhbGxiYWNrKGFzeW5jICgpID0+IHtcbiAgICBpZiAocGVuZGluZ0lkID09PSBudWxsKSByZXR1cm5cbiAgICBjb25zdCBpZCA9IHBlbmRpbmdJZFxuICAgIHNldElzRGVsZXRpbmcodHJ1ZSlcbiAgICB0cnkge1xuICAgICAgYXdhaXQgb25EZWxldGUoaWQpXG4gICAgICBzZXRQZW5kaW5nSWQobnVsbClcbiAgICB9IGNhdGNoIHtcbiAgICAgIC8vIERpYWxvZyBzdGF5cyBvcGVuOyBjYWxsZXIgY2FuIHN1cmZhY2UgZXJyb3JzIGluIG9uRGVsZXRlXG4gICAgfSBmaW5hbGx5IHtcbiAgICAgIHNldElzRGVsZXRpbmcoZmFsc2UpXG4gICAgfVxuICB9LCBbcGVuZGluZ0lkLCBvbkRlbGV0ZV0pXG5cbiAgcmV0dXJuIHtcbiAgICBjYW5jZWwsXG4gICAgY29uZmlybSxcbiAgICBpc0RlbGV0aW5nLFxuICAgIGlzT3BlbjogcGVuZGluZ0lkICE9PSBudWxsLFxuICAgIHBlbmRpbmdJZCxcbiAgICByZXF1ZXN0RGVsZXRlXG4gIH0gYXMgY29uc3Rcbn1cbiJdLAogICJtYXBwaW5ncyI6ICI7QUFFQSxTQUFTLGFBQWEsZ0JBQWdCO0FBRS9CLGdCQUFTLGlCQUFzQjtBQUFBLEVBQ3BDO0FBQ0YsR0FFRztBQUNELFFBQU0sQ0FBQyxXQUFXLFlBQVksSUFBSSxTQUFxQixJQUFJO0FBQzNELFFBQU0sQ0FBQyxZQUFZLGFBQWEsSUFBSSxTQUFTLEtBQUs7QUFFbEQsUUFBTSxnQkFBZ0IsWUFBWSxDQUFDLE9BQVk7QUFDN0MsaUJBQWEsRUFBRTtBQUFBLEVBQ2pCLEdBQUcsQ0FBQyxDQUFDO0FBRUwsUUFBTSxTQUFTLFlBQVksTUFBTTtBQUMvQixRQUFJLENBQUMsV0FBWSxjQUFhLElBQUk7QUFBQSxFQUNwQyxHQUFHLENBQUMsVUFBVSxDQUFDO0FBRWYsUUFBTSxVQUFVLFlBQVksWUFBWTtBQUN0QyxRQUFJLGNBQWMsS0FBTTtBQUN4QixVQUFNLEtBQUs7QUFDWCxrQkFBYyxJQUFJO0FBQ2xCLFFBQUk7QUFDRixZQUFNLFNBQVMsRUFBRTtBQUNqQixtQkFBYSxJQUFJO0FBQUEsSUFDbkIsUUFBUTtBQUFBLElBRVIsVUFBRTtBQUNBLG9CQUFjLEtBQUs7QUFBQSxJQUNyQjtBQUFBLEVBQ0YsR0FBRyxDQUFDLFdBQVcsUUFBUSxDQUFDO0FBRXhCLFNBQU87QUFBQSxJQUNMO0FBQUEsSUFDQTtBQUFBLElBQ0E7QUFBQSxJQUNBLFFBQVEsY0FBYztBQUFBLElBQ3RCO0FBQUEsSUFDQTtBQUFBLEVBQ0Y7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K

package/dist/hooks/use-css-var-dims.d.ts

@@ -0,0 +1 @@
+export declare function useCssVarDims(name: string, ref: React.RefObject<HTMLElement | null>): void;

package/dist/hooks/use-css-var-dims.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from "react";
+export function useCssVarDims(name, ref) {
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const update = (width2, height2) => {
+      document.documentElement.style.setProperty(
+        `--${name}-width`,
+        `${width2}px`
+      );
+      document.documentElement.style.setProperty(
+        `--${name}-height`,
+        `${height2}px`
+      );
+    };
+    const { height, width } = ref.current.getBoundingClientRect();
+    update(width, height);
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        update(entry.contentRect.width, entry.contentRect.height);
+      }
+    });
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [name, ref]);
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlQ3NzVmFyRGltcyhcbiAgbmFtZTogc3RyaW5nLFxuICByZWY6IFJlYWN0LlJlZk9iamVjdDxIVE1MRWxlbWVudCB8IG51bGw+XG4pIHtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXJlZi5jdXJyZW50KSB7XG4gICAgICByZXR1cm5cbiAgICB9XG5cbiAgICBjb25zdCB1cGRhdGUgPSAod2lkdGg6IG51bWJlciwgaGVpZ2h0OiBudW1iZXIpID0+IHtcbiAgICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5zZXRQcm9wZXJ0eShcbiAgICAgICAgYC0tJHtuYW1lfS13aWR0aGAsXG4gICAgICAgIGAke3dpZHRofXB4YFxuICAgICAgKVxuXG4gICAgICBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoXG4gICAgICAgIGAtLSR7bmFtZX0taGVpZ2h0YCxcbiAgICAgICAgYCR7aGVpZ2h0fXB4YFxuICAgICAgKVxuICAgIH1cblxuICAgIGNvbnN0IHsgaGVpZ2h0LCB3aWR0aCB9ID0gcmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KClcbiAgICB1cGRhdGUod2lkdGgsIGhlaWdodClcblxuICAgIGNvbnN0IHJvID0gbmV3IFJlc2l6ZU9ic2VydmVyKGVudHJpZXMgPT4ge1xuICAgICAgZm9yIChjb25zdCBlbnRyeSBvZiBlbnRyaWVzKSB7XG4gICAgICAgIHVwZGF0ZShlbnRyeS5jb250ZW50UmVjdC53aWR0aCwgZW50cnkuY29udGVudFJlY3QuaGVpZ2h0KVxuICAgICAgfVxuICAgIH0pXG5cbiAgICByby5vYnNlcnZlKHJlZi5jdXJyZW50KVxuXG4gICAgcmV0dXJuICgpID0+IHJvLmRpc2Nvbm5lY3QoKVxuICB9LCBbbmFtZSwgcmVmXSlcbn1cbiJdLAogICJtYXBwaW5ncyI6ICI7QUFFQSxTQUFTLGlCQUFpQjtBQUVuQixnQkFBUyxjQUNkLE1BQ0EsS0FDQTtBQUNBLFlBQVUsTUFBTTtBQUNkLFFBQUksQ0FBQyxJQUFJLFNBQVM7QUFDaEI7QUFBQSxJQUNGO0FBRUEsVUFBTSxTQUFTLENBQUNBLFFBQWVDLFlBQW1CO0FBQ2hELGVBQVMsZ0JBQWdCLE1BQU07QUFBQSxRQUM3QixLQUFLLElBQUk7QUFBQSxRQUNULEdBQUdELE1BQUs7QUFBQSxNQUNWO0FBRUEsZUFBUyxnQkFBZ0IsTUFBTTtBQUFBLFFBQzdCLEtBQUssSUFBSTtBQUFBLFFBQ1QsR0FBR0MsT0FBTTtBQUFBLE1BQ1g7QUFBQSxJQUNGO0FBRUEsVUFBTSxFQUFFLFFBQVEsTUFBTSxJQUFJLElBQUksUUFBUSxzQkFBc0I7QUFDNUQsV0FBTyxPQUFPLE1BQU07QUFFcEIsVUFBTSxLQUFLLElBQUksZUFBZSxhQUFXO0FBQ3ZDLGlCQUFXLFNBQVMsU0FBUztBQUMzQixlQUFPLE1BQU0sWUFBWSxPQUFPLE1BQU0sWUFBWSxNQUFNO0FBQUEsTUFDMUQ7QUFBQSxJQUNGLENBQUM7QUFFRCxPQUFHLFFBQVEsSUFBSSxPQUFPO0FBRXRCLFdBQU8sTUFBTSxHQUFHLFdBQVc7QUFBQSxFQUM3QixHQUFHLENBQUMsTUFBTSxHQUFHLENBQUM7QUFDaEI7IiwKICAibmFtZXMiOiBbIndpZHRoIiwgImhlaWdodCJdCn0K

package/dist/hooks/use-gpu-tier.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Tiers:
+ *  0 — no WebGL / software renderer / prefers-reduced-motion / WebGL ctx
+ *      creation failed / detection not yet run
+ *  1 — low-end GPU (integrated, mobile, or failed perf benchmark)
+ *  2 — capable GPU (discrete / high-end integrated)
+ *
+ * The atom starts **pessimistic** (`0`) and the probe is scheduled to run
+ * *after the first paint* (see `scheduleDetection` below), never synchronously
+ * at module-evaluation time.
+ *
+ * Why pessimistic + deferred:
+ *  - Every consumer gates its `<canvas>` / `THREE.WebGLRenderer` on `tier > 0`
+ *    (or `=== 2`). Starting at `0` means a consumer reading `$gpuTier` during
+ *    its first render never attempts to create a renderer before detection has
+ *    run, so the `THREE.WebGLRenderer: Error creating WebGL context` crash on
+ *    hardware where context creation fails cannot happen — the component
+ *    renders its fallback and upgrades once detection resolves to a capable
+ *    tier. (A previous version made the probe synchronous-at-module-load to
+ *    dodge this crash; the pessimistic default removes the crash without that
+ *    cost.)
+ *  - Probing WebGL is *expensive* on software renderers: creating a context
+ *    under SwiftShader / llvmpipe can block the main thread for hundreds of
+ *    milliseconds. Running it synchronously at module load stalled first paint
+ *    and produced a visible boot-time flash in apps that merely import this
+ *    hook (e.g. the Hackit dashboard backdrop). Deferring past first paint
+ *    keeps boot smooth; the tier just upgrades a frame or two later.
+ *  - For SSR the server keeps the default `0` and the client's first render
+ *    also reads `0`, so there is no hydration mismatch.
+ */
+export declare const $gpuTier: import("nanostores").PreinitializedWritableAtom<GpuTier> & object;
+export declare function useGpuTier(): GpuTier;
+type GpuTier = 0 | 1 | 2;
+export {};