@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/styles/theme.css

@@ -5,26 +5,21 @@
  * can theme lives here and nowhere else: no colour, duration, easing, radius
  * or shadow is written literally in a component.
  *
- * Positioning it encodes. Ecoma is a platform where an organization digitizes
- * its own operations and AI agents are a first-class workforce, so the form
- * language is dual-force:
+ * Positioning it encodes. Loom is a UI system for cross-platform web
+ * applications — browser, PWA, Electron, Tauri — so the form language is
+ * purposeful and opinionated:
  *
- *   - Human (warp) — the threads strung and held under tension: what people
- *     author and decide. Doubles as the default action colour, because a
- *     person drives the interface.
- *   - Agent (weft) — the thread carried across them: work an agent is running
- *     or has produced.
- *   - The seam — a warp→weft gradient — appears ONLY where the two forces
- *     meet: handoffs, co-authored assets, brand moments. Never under body
- *     text, never on anything smaller than 20px, never in an interaction
- *     state.
+ *   - Primary (`--color-primary`) — the default action colour: what a person
+ *     drives the interface with. The focus ring is the same hue for the same
+ *     reason — keyboard focus is the primary action.
+ *   - Accent (`--color-accent`) — a second semantic colour for contrast or
+ *     emphasis distinct from the primary action. Useful for signalling a
+ *     different category, mode, or origin.
  *
- * Two threads, one cloth: the forces are one piece of work, not two systems.
- *
- * Light-first. This is a daytime operations tool, so the paper-light theme is
- * the single default and there is no runtime light/dark switch. A symmetric
- * dark theme is a reserved seam that returns with the first surface that
- * needs it.
+ * Dual-theme. The light tokens are the default; the dark block below
+ * overrides every semantic token under `:root[data-theme="dark"]`. Switching
+ * replaces the entire set, so the two cannot drift apart. The `useTheme`
+ * composable and `themeScript` flash-prevention snippet manage the attribute.
  *
  * `static` rather than plain `@theme`: Tailwind emits only the variables its
  * generated utilities reference, and several tokens here are read by an
@@ -33,7 +28,7 @@
  * `var(--duration-fast)` resolve inside a component's style attribute.
  */
 @theme static {
-  /* ---- Neutrals: technical paper, cooled slightly toward the warp ------- */
+  /* ---- Neutrals: technical paper, cooled slightly toward the primary hue --- */
   --color-background: hsl(213 25% 96%);
   --color-foreground: hsl(213 29% 15%);
 
@@ -51,6 +46,17 @@
   --color-muted: hsl(213 18% 91%);
   --color-muted-foreground: hsl(213 14% 41%);
 
+  /* The lighter step of the same ladder, and it is reserved for a *graphical
+   * object*, never for text: a glyph that must keep clearing the 3:1 floor
+   * while receding behind `muted-foreground` — the disabled Rating's unfilled
+   * stars, which carry the maximum. Text is held to 4.5:1, which is what
+   * `muted-foreground` is measured to; the 3:1 floor of WCAG 1.4.11 leaves
+   * room for one more step, and taking it as a token rather than as an alpha
+   * over the darker grey is the whole point: composited at half alpha,
+   * `muted-foreground` lands at 2.05:1 on the page ground, short of even
+   * that floor. */
+  --color-muted-foreground-soft: hsl(213 12% 50%);
+
   /* Two border weights: the default hairline recedes; strong is for the few
    * blocks that must assert their edge — an active panel, a keyboard target
    * zone. */
@@ -63,23 +69,45 @@
   --color-subtle: hsl(213 20% 94%);
   --color-subtle-foreground: hsl(213 29% 18%);
 
-  /* ---- Force 1 · Human — warp: default action, structure, decisions ----- */
+  /* ---- Force 1 · Primary — default action, structure, decisions --------- */
   --color-primary: hsl(211 37% 32%);
   --color-primary-foreground: hsl(0 0% 100%);
-  --color-primary-muted: hsl(211 35% 92%); /* warp wash: selected/active fills */
+  --color-primary-muted: hsl(211 35% 92%); /* wash: selected/active fills */
 
-  /* ---- Force 2 · Agent — weft: automated work running or produced ------- */
-  --color-agent: hsl(18 56% 39%);
-  --color-agent-foreground: hsl(0 0% 100%);
-  --color-agent-muted: hsl(18 50% 93%); /* weft wash: agent-driven surfaces */
+  /* ---- Force 2 · Accent — a second semantic colour for contrast or
+   * emphasis distinct from the primary action. Useful for signalling a
+   * different category, mode, or origin. ------------------------------- */
+  --color-accent: hsl(18 56% 39%);
+  --color-accent-foreground: hsl(0 0% 100%);
+  --color-accent-muted: hsl(18 50% 93%); /* wash: accent-driven surfaces */
 
   --color-secondary: hsl(213 18% 91%);
   --color-secondary-foreground: hsl(213 29% 18%);
 
-  /* Focus ring is the Human warp: keyboard focus is a person acting. */
+  /* Focus ring is the primary colour: keyboard focus is the primary action. */
   --color-ring: hsl(211 37% 32%);
 
-  /* ---- Functional — hues kept distinct from both forces ----------------- */
+  /* ---- Text-variant tokens ------------------------------------------------
+   * These are lighter steps of the functional colours, for use when the base
+   * token serves as TEXT rather than as a background fill. In light mode the
+   * base tokens already clear 4.5:1 against every surface, so the text variants
+   * are identical — they exist so that `text-primary-text` is always a valid
+   * class, and dark mode can override them without the component needing to
+   * know which theme is active.
+   *
+   * In dark mode, `--color-primary` is calibrated for button backgrounds (white
+   * on primary at 5.05:1); as text on a dark surface it lands around 4:1,
+   * below the AA floor. The same applies to the other functional tokens. The
+   * dark block overrides each text variant to a lighter step that clears 4.5:1
+   * on every dark surface (sunken through popover). */
+  --color-primary-text: hsl(211 37% 32%);
+  --color-accent-text: hsl(18 56% 39%);
+  --color-destructive-text: hsl(356 65% 41%);
+  --color-success-text: hsl(152 45% 30%);
+  --color-warning-text: hsl(38 92% 28%);
+  --color-info-text: hsl(202 65% 35%);
+
+  /* ---- Functional — hues kept distinct from both action colours ------------ */
   --color-destructive: hsl(356 65% 41%);
   --color-destructive-foreground: hsl(0 0% 100%);
   --color-success: hsl(152 45% 30%);
@@ -89,10 +117,50 @@
   --color-info: hsl(202 65% 35%);
   --color-info-foreground: hsl(0 0% 100%);
 
-  /* ---- The seam: the two forces meeting. Interpolated in OKLCH so the
-   * midpoint never turns muddy. Reach for it through the `bg-seam` utility
-   * below, at handoff points and brand moments only. ---------------------- */
-  --seam: linear-gradient(90deg in oklch, hsl(211 37% 32%), hsl(18 56% 39%));
+  /* Each functional hue's wash, completing the pattern the action colours above
+   * already set. These are opaque rather than an alpha of the base hue, and
+   * that is the whole reason they exist: a `bg-destructive/12` fill composites
+   * against whatever is behind it, so the same badge renders as one colour on
+   * `bg-card` and another on `bg-sunken`. A status tint that shifts with its
+   * container is a status tint a reader cannot learn. Each is mixed to hold at
+   * least 4.5:1 against its own base hue, which is what sits on top of it as
+   * text or as a hairline. */
+  --color-destructive-muted: hsl(356 55% 94%); /* error wash: a failed or blocking surface */
+  --color-success-muted: hsl(152 40% 93%); /* success wash: a settled, completed surface */
+  --color-warning-muted: hsl(38 70% 92%); /* warning wash: a surface needing attention */
+  --color-info-muted: hsl(202 55% 93%); /* info wash: a neutral advisory surface */
+
+  /* ---- Scrim weight, as modifiers on `foreground`: `bg-foreground/scrim`.
+   * Two weights, because how much of the page a surface hides is a statement
+   * about what that surface is. A dialog interrupts, so the page behind it
+   * drops to context. A drawer is worked alongside its page — you tune a
+   * filter and watch the rows change — so the page stays legible and stays
+   * the subject. That rule lived in a comment inside `Drawer.vue`, which is
+   * the one place a person building a third overlay would never look. ------ */
+  --opacity-scrim: 70%; /* a surface that interrupts: the page behind is context */
+  --opacity-scrim-light: 40%; /* a surface worked alongside: the page behind is still the subject */
+
+  /* One weight for "unavailable", because two menu rows ten points apart is
+   * not a decision anyone made — `opacity-40` had appeared twice against
+   * `opacity-50` forty-five times, and nothing in any check can see a
+   * difference that small. */
+  --opacity-disabled: 50%;
+
+  /* ---- Stacking. Five rungs, named, because the ladder was real before it
+   * was written down: seventeen overlays at `z-50` and two toasts at
+   * `z-[100]`, an arbitrary value of exactly the kind this file exists to
+   * prevent. Ordering *within* a rung is the portal's job — Reka appends in
+   * open order, so the last dialog opened is the one on top without anyone
+   * numbering them. --------------------------------------------------------- */
+  --z-index-raised: 10; /* lifted above its own siblings: an Indicator's marker, a SegmentedControl thumb */
+  --z-index-sticky: 20; /* page furniture that pins while content scrolls under it */
+  --z-index-chrome: 30; /* application chrome: the header and rails that outlive the page */
+  --z-index-overlay: 50; /* anything portalled over the page — dialogs, popovers, menus, drawers */
+  --z-index-toast: 100; /* above every overlay, because a toast reports on the thing the overlay is doing */
+
+  /* The press. One value, reached through `active:scale-press`, replacing six
+   * `scale-[0.97]` and three `scale-95` that meant the same thing. */
+  --scale-press: 0.97;
 
   /* ---- Shape: small, even fillets — milled, never blobby.
    * Nesting law: inner radius = outer radius − padding, floor 2px. Pick the
@@ -125,7 +193,7 @@
   --shadow-md: 0 4px 12px -2px hsl(213 30% 12% / 0.1), 0 2px 6px -2px hsl(213 30% 12% / 0.07);
   --shadow-lg: 0 12px 32px -6px hsl(213 30% 12% / 0.14), 0 4px 10px -4px hsl(213 30% 12% / 0.08);
 
-  /* Focus halo — a warp haze AROUND the crisp ring outline, added on top of
+  /* Focus halo — a primary haze AROUND the crisp ring outline, added on top of
    * it and never replacing it, so the outline still shows under
    * forced-colors. */
   --shadow-halo: 0 0 0 4px hsl(211 37% 32% / 0.15);
@@ -173,19 +241,65 @@
   --breakpoint-4xl: 2560px; /* QHD */
   --breakpoint-5xl: 3440px; /* 21:9 ultra-wide */
 
+  /* ---- Safe areas. Mobile webviews (notch, home indicator) and PWA title-bar
+   * overlays both reserve space the layout must not paint into. The fallback is
+   * 0 so these tokens are always safe to read — a viewport without a safe area
+   * simply contributes no inset. A host that needs the raw value for
+   * `padding-top: env(safe-area-inset-top)` can use it directly, but a host
+   * that wants Loom's opinion uses the token instead and lets the theme layer
+   * decide what the inset is. ---------------------------------------------- */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+
   /* ---- The animation vocabulary. Keyframes live in global.css; these are
    * the named utilities that play them. ---------------------------------- */
   --animate-fade: fade var(--duration-normal) var(--ease-out) both;
   --animate-fade-rise: fade-rise var(--duration-normal) var(--ease-out) both;
   --animate-scale-in: scale-in var(--duration-fast) var(--ease-spring) both;
   --animate-shimmer: shimmer 1.6s linear infinite;
-  /* Agent at work — the weft's shuttle beat. */
-  --animate-conduct: conduct 1.8s var(--ease-in-out) infinite;
-  /* A live seam: the warp↔weft boundary drifts while the collaboration runs,
-   * and goes static once the work settles. */
-  --animate-seam-flow: seam-flow 3.2s linear infinite;
   --animate-progress-indeterminate: progress-indeterminate 1.3s var(--ease-in-out) infinite;
   --animate-toast-in: toast-in var(--duration-normal) var(--ease-spring) both;
+
+  /* ---- Motion that leaves. Every animation above is an entrance, so until
+   * these existed an overlay that faded in over 200ms was simply gone between
+   * two frames, and the page behind it appeared to jump rather than to be
+   * revealed. `--ease-in` was declared with the rest of the easings and used by
+   * nothing at all, which is the tell: the accelerate curve has one job and it
+   * is this one.
+   *
+   * Exits run shorter than the entrance they mirror and on `--ease-in`, because
+   * the two directions are not the same event. A surface arriving is
+   * decelerating into place and is worth watching; a surface leaving has
+   * already done its job and should clear the eye rather than hold it.
+   *
+   * These are load-bearing beyond taste. Reka's `Presence` keeps closed content
+   * mounted until an `animationend` arrives — that is why every entrance here
+   * is scoped `data-[state=open]:` — and a closed element with no animation at
+   * all unmounts on the spot. A `data-[state=closed]:` animation is what turns
+   * that all-or-nothing into an ordinary timed exit, and it stays safe under
+   * `prefers-reduced-motion`: `global.css` collapses the duration to 0.01ms,
+   * which still fires `animationend`, so the overlay still unmounts. --------- */
+  --animate-fade-out: fade-out var(--duration-fast) var(--ease-in) both; /* the exit answering `fade` */
+  --animate-fade-fall: fade-fall var(--duration-fast) var(--ease-in) both; /* the exit answering `fade-rise` */
+  --animate-scale-out: scale-out var(--duration-instant) var(--ease-in) both; /* the exit answering `scale-in` */
+
+  /* An edge-anchored panel leaving the way it came. `--duration-normal` against
+   * the `slow` entrance a drawer uses: 320ms is what stops a full-height panel
+   * arriving like a flinch, and none of that reasoning applies to a panel on
+   * its way out.
+   *
+   * There is no matching `slide-in` family, and that is a decision rather than
+   * an omission — see `Drawer.vue`, which enters on `@starting-style` because a
+   * transition composes with a live swipe gesture where a keyframe would fight
+   * it. The exit has no such conflict and cannot be a transition at all:
+   * `Presence` observes `animationend` and never `transitionend`, so a
+   * transition-based exit is unmounted before it can run. --------------------- */
+  --animate-slide-out-to-left: slide-out-to-left var(--duration-normal) var(--ease-in) both; /* a panel leaving past the left edge */
+  --animate-slide-out-to-right: slide-out-to-right var(--duration-normal) var(--ease-in) both; /* a panel leaving past the right edge */
+  --animate-slide-out-to-top: slide-out-to-top var(--duration-normal) var(--ease-in) both; /* a panel leaving past the top edge */
+  --animate-slide-out-to-bottom: slide-out-to-bottom var(--duration-normal) var(--ease-in) both; /* a panel leaving past the bottom edge */
 }
 
 /* Tailwind has no `--duration-*` theme namespace — `duration-*` takes a bare
@@ -205,8 +319,126 @@
   transition-duration: var(--duration-slower);
 }
 
-/* The seam, as a background. A gradient is not a colour, so it has no colour
- * namespace to live in; this is the only sanctioned way to paint one. */
-@utility bg-seam {
-  background-image: var(--seam);
+/* ---- Dark theme overrides ------------------------------------------------
+ * Every semantic token overridden; no "fallback to light". Switching replaces
+ * the entire set, so the two cannot drift apart and contrast is verified for
+ * each independently. `data-theme` on `<html>` is the single source of truth.
+ *
+ * Design principles:
+ *   - Same hue family, adjusted lightness — dark is the mirror, not a new palette
+ *   - Functional tokens slightly desaturated — bright saturated colours on dark
+ *     backgrounds cause eye strain and fail contrast against dark surfaces
+ *   - Elevation = lighter background, not shadow — shadows are invisible on dark
+ *   - Borders brighten — the hairline that recedes on light must be visible on dark
+ *   - `muted-foreground-soft` stays above 3:1 (graphical-object floor)
+ *   - Focus ring stays primary — halo shifts to a lighter shade for visibility
+ *
+ * Contrast is verified: all text pairings clear 4.5:1; all graphical-object
+ * pairings clear 3:1. See the contrast verification table in the repository
+ * for the full audit. ----------------------------------------------------- */
+:root[data-theme="dark"] {
+  /* ---- Neutrals: same hue family, inverted lightness ---- */
+
+  /* Elevation in dark = lighter: sunken(7%) < background(10%) < card(14%) < popover(17%).
+   * Light: sunken(93%) < background(96%) < card(100%) = popover(100%).
+   * Dark mirrors the order with the 4-7% steps that keep surfaces distinct
+   * while staying dark enough for high foreground contrast. */
+  --color-background: hsl(213 25% 10%);
+  --color-foreground: hsl(
+    213 20% 92%
+  ); /* S narrowed 29→20 for softer read; 14.68:1 on background */
+
+  --color-card: hsl(213 20% 14%);
+  --color-card-foreground: hsl(213 20% 92%);
+
+  --color-sunken: hsl(213 24% 7%);
+
+  --color-popover: hsl(213 18% 17%);
+  --color-popover-foreground: hsl(213 20% 92%);
+
+  --color-muted: hsl(213 16% 13%);
+  --color-muted-foreground: hsl(213 10% 60%); /* S 14→10%; 6.06:1 on background */
+
+  /* Graphical-object token: clears 3:1 (4.03:1 on background). In light the
+   * gap is 9pp (41→50); in dark it widens to 12pp (60→48) because the 3:1
+   * floor binds tighter on dark. */
+  --color-muted-foreground-soft: hsl(213 8% 48%);
+
+  /* Borders brighten — the hairline that recedes on light must be visible on
+   * dark. Input and border-strong carry additional indicators (background fill,
+   * label) beyond the border alone. */
+  --color-border: hsl(213 14% 22%);
+  --color-border-strong: hsl(213 10% 36%);
+  --color-input: hsl(213 12% 28%);
+
+  --color-subtle: hsl(213 20% 13%);
+  --color-subtle-foreground: hsl(213 20% 86%);
+
+  /* ---- Primary — lightened (32→45%) and desaturated (37→33%) so the colour
+   * is visible on dark without eye strain. White foreground still clears 4.5:1
+   * (5.05:1) because blue's low luminance-per-lightness keeps the base dark. - */
+  --color-primary: hsl(211 33% 45%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-primary-muted: hsl(211 28% 13%);
+
+  /* ---- Accent — lightened (39→44%) and desaturated (56→48%). -------------- */
+  --color-accent: hsl(18 48% 44%);
+  --color-accent-foreground: hsl(0 0% 100%);
+  --color-accent-muted: hsl(18 35% 13%);
+
+  --color-secondary: hsl(213 16% 14%);
+  --color-secondary-foreground: hsl(213 20% 88%);
+
+  --color-ring: hsl(211 33% 45%); /* matches primary; 3.50:1 on background */
+
+  /* Text-variant tokens: lighter steps of the functional colours that clear
+   * 4.5:1 as text on every dark surface (sunken 7% through popover 17%).
+   * The base tokens are calibrated for button backgrounds, where their own
+   * foreground pair provides the contrast — but `text-primary` as text on
+   * a dark surface lands around 4:1, below the AA floor. Components that
+   * use a functional colour as text should use the `-text` variant instead
+   * (e.g. `text-primary-text` rather than `text-primary`). */
+  --color-primary-text: hsl(211 45% 65%); /* 5.38:1 on sunken, 4.50:1 on popover */
+  --color-accent-text: hsl(18 55% 62%); /* 5.77:1 on accent-muted, 6.01:1 on popover */
+  --color-destructive-text: hsl(356 55% 70%); /* 7.04:1 on sunken, 4.63:1 on popover */
+  --color-success-text: hsl(152 38% 55%); /* 7.43:1 on sunken, 4.88:1 on popover */
+  --color-warning-text: hsl(38 80% 65%); /* 11.78:1 on sunken, 6.45:1 on popover */
+  --color-info-text: hsl(202 55% 62%); /* 7.42:1 on sunken, 4.64:1 on popover */
+
+  /* ---- Functional — each lightened and desaturated for dark ---- */
+
+  --color-destructive: hsl(356 55% 48%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --color-success: hsl(152 38% 36%);
+  --color-success-foreground: hsl(0 0% 100%);
+  /* Amber has very high luminance-per-lightness; white text fails, so the
+   * foreground is near-black. Dark text on amber is the universal pattern. */
+  --color-warning: hsl(38 80% 50%);
+  --color-warning-foreground: hsl(0 0% 5%);
+  --color-info: hsl(202 55% 40%);
+  --color-info-foreground: hsl(0 0% 100%);
+
+  /* Functional-muted surfaces. In light each wash holds 4.5:1 against its base
+   * hue (dark text on light wash). In dark the luminance range of dark surfaces
+   * is too compressed for that — a surface dark enough for 4.5:1 base-as-text
+   * would be indistinguishable from the background. Each base hue instead
+   * clears the 3:1 graphical-object floor on its muted surface (icons,
+   * indicators), and text uses the foreground token (12-14:1 on every surface). */
+  --color-destructive-muted: hsl(356 40% 13%);
+  --color-success-muted: hsl(152 28% 13%);
+  --color-warning-muted: hsl(38 45% 13%);
+  --color-info-muted: hsl(202 35% 13%);
+
+  /* ---- Elevation: shadow recedes, background lightness ascends ----
+   * Shadows are nearly invisible on dark; elevation is communicated through
+   * the background lightness gradient (sunken through popover). The shadow
+   * tokens use a near-black colour with raised opacity so they remain faintly
+   * perceptible on the lightest dark surfaces (card, popover). */
+  --shadow-sm: 0 1px 2px 0 hsl(213 30% 2% / 0.18);
+  --shadow-md: 0 4px 12px -2px hsl(213 30% 2% / 0.22), 0 2px 6px -2px hsl(213 30% 2% / 0.16);
+  --shadow-lg: 0 12px 32px -6px hsl(213 30% 2% / 0.28), 0 4px 10px -4px hsl(213 30% 2% / 0.18);
+
+  /* Focus halo — shifts to the lighter dark-primary and raises opacity for
+   * visibility on dark surfaces. */
+  --shadow-halo: 0 0 0 4px hsl(211 33% 45% / 0.35);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ecoma-io/loom",
-  "version": "0.1.1",
-  "description": "Design system & components for the Ecoma ecosystem.",
+  "version": "0.3.0",
+  "description": "Opinionated UI system and composition library for cross-platform web applications.",
   "keywords": [
     "design-system",
     "component-library",
@@ -16,7 +16,10 @@
     "wcag",
     "theming",
     "dark-mode",
-    "ecoma"
+    "cross-platform",
+    "desktop",
+    "responsive",
+    "composition"
   ],
   "homepage": "https://github.com/ecoma-io/loom#readme",
   "repository": {
@@ -47,6 +50,9 @@
       "types": "./dist/a11y.d.ts",
       "default": "./dist/a11y.js"
     },
+    "./theme": {
+      "default": "./dist/styles/theme.css"
+    },
     "./styles/global.css": "./dist/styles/global.css",
     "./styles/theme.css": "./dist/styles/theme.css",
     "./styles/fonts.css": "./dist/styles/fonts.css",
@@ -64,22 +70,27 @@
     "prepare": "lefthook install",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "lint": "eslint . --max-warnings 0 && node tools/check-component-artifacts.ts",
+    "lint": "eslint . --cache --cache-strategy content --cache-location node_modules/.cache/eslint --max-warnings 0 && node tools/check-component-artifacts.ts && node --experimental-strip-types tools/check-architecture.ts",
     "typecheck": "vue-tsc --noEmit",
     "test": "vitest run",
+    "test:full": "vitest run",
     "test:watch": "vitest",
     "e2e": "playwright test",
+    "e2e:full": "PW_PROFILE=full playwright test",
     "build": "vite build && vue-tsc -p tsconfig.build.json",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:stage": "node tools/stage-docs.ts",
-    "docs:preview": "vitepress preview docs"
+    "docs:check-route": "node tools/stage-docs.ts --check",
+    "docs:preview": "vitepress preview docs",
+    "moon": "MOON_CONCURRENCY=${MOON_CONCURRENCY:-4} exec moon"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
     "@eslint/js": "^10.0.1",
+    "@moonrepo/cli": "^2.4.6",
     "@playwright/test": "^1.62.1",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.1.2",
@@ -87,6 +98,7 @@
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/eslint-plugin": "^1.6.26",
     "@vue/test-utils": "^2.4.11",
+    "@vue/typescript-plugin": "3.3.9",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-playwright": "^2.11.0",
@@ -111,6 +123,7 @@
     "wrangler": "^4.118.0"
   },
   "dependencies": {
+    "@internationalized/date": "^3.12.3",
     "@lucide/vue": "^1.28.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/dist/a11y.d.ts

@@ -1,2 +0,0 @@
-export { WCAG_TAGS } from "./lib/a11y-scope";
-//# sourceMappingURL=a11y.d.ts.map

package/dist/a11y.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../src/a11y.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/blocks/AppHeader/AppHeader.js

@@ -1,7 +0,0 @@
-import AppHeader_vue_vue_type_script_setup_true_lang_default from "./AppHeader.vue_vue_type_script_setup_true_lang.js";
-//#region src/blocks/AppHeader/AppHeader.vue
-var AppHeader_default = AppHeader_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { AppHeader_default as default };
-
-//# sourceMappingURL=AppHeader.js.map

package/dist/blocks/AppHeader/AppHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeader.js","names":[],"sources":["../../../src/blocks/AppHeader/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n *\n * - **`PageHeader`** — a surface's own pinned title band, sitting *inside*\n *   the content area this bar sits above.\n * - **`TitleBar`** — the desktop window's native chrome (drag region, window\n *   controls). This bar is browser content, not window furniture.\n *\n * Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for org-switcher, notifications, and\n * the user menu, pushed right by `ml-auto`. Every region is a named slot —\n * this block owns the strip's geometry and elevation, never its content or\n * behavior.\n *\n * The trailing cluster is pushed right by its own `ml-auto`, not by a spacer\n * element. A spacer works, but it is a second `flex-1` beside the search\n * field, so the two end up splitting the free space instead of the field\n * taking what is actually left; `ml-auto` costs no element and no width, and\n * keeps the cluster flush right even when no search is slotted at all.\n *\n * **Below `sm` the bar is two rows, and that is the point of this block's\n * responsive behavior.** A brand, a real search field, and an org-switcher +\n * notifications + account cluster do not fit across a 390px viewport: on\n * that width the search field is left about 60px and renders as a magnifier\n * glyph pressed against the org name — a control that is technically present\n * and practically unusable. So the search takes a full-width second row\n * (`basis-full` + `order-last`), the header height goes from fixed to\n * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.\n * Wrapping rather than hiding is deliberate: the host slotted a search\n * because its users need one, and a block does not get to decide they need\n * it less on a phone.\n *\n * The `order-last` is the one thing to keep in mind if this changes: it\n * moves the search visually below the cluster while leaving it before the\n * cluster in the DOM, so on a phone the tab order reaches search first. That\n * is the better of the two mismatches — search is the more-used control —\n * but it is a mismatch, so do not extend `order-*` to the other regions.\n *\n * **Pinned, and separated by a hairline — never a shadow.** It sits on\n * `bg-card` (the raised plane), one step above the content it sits over,\n * unlike `PageHeader` which shares the content's own `bg-background` plane.\n * Because content scrolls *under* it, the surface is translucent + blurred\n * so the motion beneath stays legible as depth — the opaque `bg-card` is\n * declared first and stays the fallback wherever `backdrop-filter` is\n * unsupported, so the bar is never a see-through smear.\n *\n * Widths step rather than hold one value: gutters open up from `sm` and\n * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a\n * 1920px canvas reads as an accident.\n *\n * Deliberately neutral: this is shell chrome shared by every user and every\n * agent action alike, so it never wears `--primary`/`--agent` — the\n * dual-force law only paints a surface once a specific force is doing\n * something on it.\n */\ndefineProps<{\n  /** Accessible name for the `<header>` landmark, for a page with more than one header-like region. */\n  ariaLabel?: string;\n}>();\n</script>\n\n<template>\n  <header\n    :aria-label=\"ariaLabel\"\n    class=\"sticky top-0 z-30 flex min-h-14 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-card px-3 py-2 text-card-foreground backdrop-blur-md supports-[backdrop-filter]:bg-card/80 sm:h-14 sm:flex-nowrap sm:gap-x-3 sm:px-4 sm:py-0 lg:px-6 3xl:h-16 3xl:px-8\"\n  >\n    <div v-if=\"$slots.brand\" class=\"flex shrink-0 items-center gap-2\">\n      <!-- @slot The product mark and name, leftmost. -->\n      <slot name=\"brand\" />\n    </div>\n\n    <!-- Own full-width row below `sm` (see the doc header on `order-last`);\n         from `sm` up it rejoins the row and takes a cap so it never stretches\n         into a banner on a wide canvas. -->\n    <div\n      v-if=\"$slots.search\"\n      class=\"order-last min-w-0 basis-full sm:order-none sm:max-w-sm sm:flex-1 sm:basis-auto lg:max-w-md\"\n    >\n      <!-- @slot The app's global search field. Exactly one control — a filter belongs to `PageHeader` or the content area, not here. -->\n      <slot name=\"search\" />\n    </div>\n\n    <div\n      v-if=\"$slots.orgSwitcher || $slots.notifications || $slots.userMenu\"\n      class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n    >\n      <!-- @slot The organization switcher, leading the trailing cluster. -->\n      <slot name=\"orgSwitcher\" />\n      <!-- @slot The notifications trigger, between the org switcher and the account menu. -->\n      <slot name=\"notifications\" />\n      <!-- @slot The account menu, trailing the cluster. -->\n      <slot name=\"userMenu\" />\n    </div>\n  </header>\n</template>\n"],"mappings":""}

package/dist/blocks/AppHeader/AppHeader.vue.d.ts

@@ -1,83 +0,0 @@
-/**
- * AppHeader — the web app's TOP BAR: the shell-level strip that stays on
- * screen above every surface, distinct from two components it is easy to
- * confuse with:
- *
- * - **`PageHeader`** — a surface's own pinned title band, sitting *inside*
- *   the content area this bar sits above.
- * - **`TitleBar`** — the desktop window's native chrome (drag region, window
- *   controls). This bar is browser content, not window furniture.
- *
- * Layout is three regions, so callers never hand-tune widths: brand (left) ·
- * optional search · a trailing cluster for org-switcher, notifications, and
- * the user menu, pushed right by `ml-auto`. Every region is a named slot —
- * this block owns the strip's geometry and elevation, never its content or
- * behavior.
- *
- * The trailing cluster is pushed right by its own `ml-auto`, not by a spacer
- * element. A spacer works, but it is a second `flex-1` beside the search
- * field, so the two end up splitting the free space instead of the field
- * taking what is actually left; `ml-auto` costs no element and no width, and
- * keeps the cluster flush right even when no search is slotted at all.
- *
- * **Below `sm` the bar is two rows, and that is the point of this block's
- * responsive behavior.** A brand, a real search field, and an org-switcher +
- * notifications + account cluster do not fit across a 390px viewport: on
- * that width the search field is left about 60px and renders as a magnifier
- * glyph pressed against the org name — a control that is technically present
- * and practically unusable. So the search takes a full-width second row
- * (`basis-full` + `order-last`), the header height goes from fixed to
- * `min-h-14`, and from `sm` up it snaps back to the single `flex-nowrap` row.
- * Wrapping rather than hiding is deliberate: the host slotted a search
- * because its users need one, and a block does not get to decide they need
- * it less on a phone.
- *
- * The `order-last` is the one thing to keep in mind if this changes: it
- * moves the search visually below the cluster while leaving it before the
- * cluster in the DOM, so on a phone the tab order reaches search first. That
- * is the better of the two mismatches — search is the more-used control —
- * but it is a mismatch, so do not extend `order-*` to the other regions.
- *
- * **Pinned, and separated by a hairline — never a shadow.** It sits on
- * `bg-card` (the raised plane), one step above the content it sits over,
- * unlike `PageHeader` which shares the content's own `bg-background` plane.
- * Because content scrolls *under* it, the surface is translucent + blurred
- * so the motion beneath stays legible as depth — the opaque `bg-card` is
- * declared first and stays the fallback wherever `backdrop-filter` is
- * unsupported, so the bar is never a see-through smear.
- *
- * Widths step rather than hold one value: gutters open up from `sm` and
- * again on wide desktops (`3xl`, 1920px), where a 16px gutter beside a
- * 1920px canvas reads as an accident.
- *
- * Deliberately neutral: this is shell chrome shared by every user and every
- * agent action alike, so it never wears `--primary`/`--agent` — the
- * dual-force law only paints a surface once a specific force is doing
- * something on it.
- */
-type __VLS_Props = {
-    /** Accessible name for the `<header>` landmark, for a page with more than one header-like region. */
-    ariaLabel?: string;
-};
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
-type __VLS_Slots = {} & {
-    brand?: (props: typeof __VLS_1) => any;
-} & {
-    search?: (props: typeof __VLS_3) => any;
-} & {
-    orgSwitcher?: (props: typeof __VLS_5) => any;
-} & {
-    notifications?: (props: typeof __VLS_7) => any;
-} & {
-    userMenu?: (props: typeof __VLS_9) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=AppHeader.vue.d.ts.map

package/dist/blocks/AppHeader/AppHeader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/AppHeader/AppHeader.vue"],"names":[],"mappings":"AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,KAAK,WAAW,GAAG;IACjB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyFF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AACpG,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC1C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAChD;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}