@ecoma-io/loom 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/ecoma-io/loom/actions/workflows/ci.yml"><img src="https://github.com/ecoma-io/loom/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
-  <a href="https://github.com/ecoma-io/loom/actions/workflows/analysis.yml"><img src="https://github.com/ecoma-io/loom/actions/workflows/analysis.yml/badge.svg" alt="Analysis" /></a>
+  <a href="https://github.com/ecoma-io/loom/actions/workflows/analysis.yml"><img src="https://img.shields.io/badge/analysis-semgrep-purple.svg" alt="Analysis" /></a>
   <a href="https://scorecard.dev/viewer/?uri=github.com/ecoma-io/loom"><img src="https://api.scorecard.dev/projects/github.com/ecoma-io/loom/badge" alt="OpenSSF Scorecard" /></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue.svg" alt="License: Apache 2.0" /></a>
   <img src="https://img.shields.io/badge/node-%3E%3D24-brightgreen.svg" alt="Node >= 24" />
@@ -10,21 +10,20 @@
 </p>
 
 <p align="center">
-  <img src=".github/assets/banner.png" alt="Loom — the open-source design system and Vue 3 component library of the Ecoma ecosystem" width="100%" />
+  <img src=".github/assets/banner.png" alt="Loom — an opinionated UI system and composition library for cross-platform web applications" width="100%" />
 </p>
 
 <h1 align="center">Loom</h1>
 
 <p align="center">
-  <strong>Design system &amp; components for the Ecoma ecosystem.</strong><br />
+  <strong>Opinionated UI system &amp; composition library for cross-platform web applications.</strong><br />
   An open-source, accessibility-first component library and design-token system —
-  Vue 3, TypeScript and Tailwind CSS — powering every human and AI-agent surface
-  Ecoma ships.<br />
+  Vue&nbsp;3, TypeScript and Tailwind&nbsp;CSS — from mobile to ultrawide.<br />
   <em>Build the interface once. Ship it everywhere. Never re-decide what a button is.</em>
 </p>
 
 <p align="center">
-  <a href="https://ecoma.io/docs/contribute/design-system"><strong>Website&nbsp;→</strong></a>
+  <a href="https://loom.ecoma.io"><strong>Documentation&nbsp;→</strong></a>
 </p>
 
 ---
@@ -38,43 +37,35 @@ decision to each product and it is not made once. It is made again, slightly
 differently, every sprint, by whoever is closest to the deadline.
 
 **Loom is where that decision lives.** One vocabulary of design tokens, one set
-of accessible UI primitives, one motion language — consumed by every Ecoma
-surface, owned by none of them. Open source under Apache-2.0, so you can take it
-into your own product on the same terms.
-
-## Built for Ecoma — a labor operating system for humans and AI agents
-
-Loom is the interface layer of [**Ecoma**](https://ecoma.io), the self-hostable,
-fair-code **labor operating system** where people, AI agents and rules are the
-same kind of resource: a role, and whoever fills it. Workflows are co-designed by
-humans and AI inside the engine, every output crosses a checkpoint calibrated on
-each tenant's own data, and human attention is treated as a budget to be measured
-rather than a well to be drained — from a one-person company to an enterprise.
-
-That premise is unusually demanding on a UI. Most component libraries assume a
-person is behind every action. Ecoma's screens have to show work a person did,
-work an agent proposed, and the seam between the two — confidence, provenance,
-the moment a human has to decide — without the interface picking a side.
-
-**Loom is that vocabulary, extracted and made reusable.** If you are building
-anything where automation and people share a workspace — an internal tool, an
-agent console, a human-in-the-loop review queue, a workflow or BPM product — the
-problems it solves are already yours.
-
-## The idea in one picture
-
-The name is the architecture:
-
-- **Warp — the human thread.** Everything a person reaches for directly: the
-  controls, the affordances, the feedback that says an action landed.
-- **Weft — the agent thread.** Everything the machine contributes: proposals,
-  confidence, provenance, the state of work nobody is watching.
-- **The seam.** Where the two cross is the only place the system raises its
-  voice — a checkpoint, a hand-off, a decision that needs a human. Everywhere
-  else it stays quiet on purpose.
-
-Light-first, enterprise-toned, and dark from the same tokens rather than as a
-second theme bolted on afterwards.
+of accessible UI primitives, one motion language — consumed by every surface,
+owned by none of them. Open source under Apache-2.0, so you can take it into
+your own product on the same terms.
+
+## Built for cross-platform web applications
+
+Loom is designed for applications that run everywhere the web does: browsers,
+progressive web apps, Electron, and Tauri (desktop and mobile). A component
+library for products that need desktop window chrome, responsive layouts that
+stretch from phone to ultrawide, and an opinionated visual language that is
+ready to ship — not a skeleton to assemble.
+
+That premise demands more than a component dump. It demands:
+
+- **Responsive composition**, not just responsive CSS — layout primitives that
+  adapt to viewport and container, so a sidebar collapses at the right width
+  and a master-detail panel stacks on mobile without the host writing a
+  breakpoint.
+- **Desktop awareness** — title bars, window controls, safe-area insets. A
+  Tauri or Electron window has chrome a web page does not, and the components
+  that live in it need to know that.
+- **Content never stretches to infinity** — on an ultrawide monitor, readable
+  content is bounded and the extra viewport goes to intentional whitespace,
+  side panels, or supplementary content. Never to stretching.
+- **Same design language on every viewport** — a button is the same button at
+  320px and 3440px. The layout around it changes; the button does not.
+
+Loom originated within the [Ecoma](https://ecoma.io) ecosystem and is developed
+as an independent open-source UI system.
 
 ## What Loom gives you
 
@@ -82,21 +73,23 @@ second theme bolted on afterwards.
 | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **Design tokens**            | Colour, spacing, radius, elevation, typography and motion — one source that light mode and dark mode both read from, so a rebrand is an edit rather than an audit.      |
 | **UI primitives**            | The generic controls every product needs and no product should own: buttons, inputs, selects, dialogs, menus, toasts, tooltips, skeletons, switches, progress.          |
-| **Blocks**                   | Compositions worth standardising once — empty states, confirmations, forms, review queues — assembled from primitives, never from scratch.                              |
+| **Composition primitives**   | Layout building blocks — Stack, Grid, Split, Center, Sidebar — that express spatial intent and adapt to viewport without the host writing breakpoint queries.           |
+| **Blocks**                   | Compositions worth standardising once — empty states, page headers, title bars, sidebar navigation — assembled from primitives, never from scratch.                     |
 | **Accessibility, built in**  | Keyboard paths, focus restoration, accessible names and reduced-motion behaviour ship inside the component. WCAG is the acceptance bar, not a checklist run afterwards. |
 | **Theming that survives**    | Every visual decision is a token reference, so white-labelling a tenant is configuration rather than a fork.                                                            |
 | **Typed and tree-shakeable** | Ships ES modules with TypeScript types. Consumers bundle what they import and nothing more.                                                                             |
 
 ## Who this is for
 
-- **Teams building on Ecoma** — this is the interface layer; consume it rather
-  than re-deriving it.
-- **Anyone shipping human-in-the-loop or AI-agent products** — the hard part is
-  showing machine work to a person honestly, and that is what these components
-  were shaped around.
+- **Teams building cross-platform web applications** — especially those
+  targeting desktop (Electron, Tauri) alongside browser and mobile, where
+  existing component libraries assume a web page, not an application window.
 - **Design-system maintainers** — the token model, the artifact-per-primitive
   convention and the accessibility bar are all readable in the open, Apache-2.0,
   and free to borrow.
+- **Anyone tired of re-deciding what a button is** — Loom is opinionated so
+  you don't have to be. Ship the defaults, override the tokens that don't fit,
+  and leave the rest alone.
 
 ## Getting started
 
@@ -131,16 +124,13 @@ the same way. That single rule decides most questions about what belongs here,
 and [CONTRIBUTING.md](CONTRIBUTING.md) covers the rest: the commit format, the
 tiers of tests, and what a reviewer will look for.
 
-Read the wider design-system programme on the
-[**website**](https://ecoma.io/docs/contribute/design-system).
-
 Everyone taking part is held to the [Code of Conduct](CODE_OF_CONDUCT.md).
 Security issues go through [SECURITY.md](SECURITY.md) — never a public issue.
 
 ## Frequently asked
 
 **Can I use Loom outside Ecoma?**
-Yes. It is Apache-2.0, has no runtime dependency on the Ecoma platform, and is
+Yes. It is Apache-2.0, has no runtime dependency on any Ecoma platform, and is
 designed to be consumed as an ordinary npm package.
 
 **Why Apache-2.0 and not MIT?**
@@ -154,13 +144,20 @@ are framework-neutral CSS custom properties, so they are usable anywhere.
 
 **Does it support dark mode?**
 Dark is derived from the same token set as light rather than maintained as a
-second theme, which is why the two cannot drift apart.
+second theme, which is why the two cannot drift apart. A `useTheme` composable
+switches between light, dark, and system preference.
 
 **How is accessibility verified?**
 Keyboard operation, focus restoration and accessible naming are pinned by tests
 and reviewed on every pull request — see the accessibility section of
 [CONTRIBUTING.md](CONTRIBUTING.md).
 
+**What about responsive layouts?**
+Loom provides composition primitives (Stack, Grid, Split, Center, Sidebar) that
+express layout intent and adapt to viewport width. Content is bounded at
+readable widths on ultrawide screens — extra viewport goes to whitespace, not
+stretching.
+
 ## License
 
 [Apache License 2.0](LICENSE) © Ecoma.
@@ -172,9 +169,9 @@ Use it, ship it, fork it, sell what you build with it.
 <p align="center">
   <img src=".github/assets/logo.png" alt="" width="56" /><br />
   <sub>
-    Part of the <a href="https://ecoma.io">Ecoma</a> ecosystem ·
-    <a href="https://ecoma.io">Website</a> ·
+    An <a href="https://ecoma.io">Ecoma</a> open-source project ·
+    <a href="https://loom.ecoma.io">Documentation</a> ·
     <a href="https://github.com/ecoma-io">Organisation</a> ·
-    <a href="https://ecoma.io/docs/contribute/design-system">Contribute</a>
+    <a href="CONTRIBUTING.md">Contribute</a>
   </sub>
 </p>

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

@@ -1 +1 @@
-{"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":""}
+{"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 a leading control, 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 a leading control +\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 * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\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.leading || $slots.notifications || $slots.userMenu\"\n      class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n    >\n      <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n      <slot name=\"leading\" />\n      <!-- @slot The notifications trigger, between the leading control 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

@@ -9,7 +9,7 @@
  *   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
+ * optional search · a trailing cluster for a leading control, 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.
@@ -21,7 +21,7 @@
  * 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 +
+ * responsive behavior.** A brand, a real search field, and a leading control +
  * 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
@@ -51,9 +51,8 @@
  * 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.
+ * action alike, so it never wears `--primary`/`--accent` — the bar stays
+ * uncommitted until a specific action is happening on the surface below.
  */
 type __VLS_Props = {
     /** Accessible name for the `<header>` landmark, for a page with more than one header-like region. */
@@ -65,7 +64,7 @@ type __VLS_Slots = {} & {
 } & {
     search?: (props: typeof __VLS_3) => any;
 } & {
-    orgSwitcher?: (props: typeof __VLS_5) => any;
+    leading?: (props: typeof __VLS_5) => any;
 } & {
     notifications?: (props: typeof __VLS_7) => any;
 } & {

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"AppHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/AppHeader/AppHeader.vue"],"names":[],"mappings":"AAoGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;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,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;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"}

package/dist/blocks/AppHeader/AppHeader.vue_vue_type_script_setup_true_lang.js

@@ -28,7 +28,7 @@ var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		*   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
+		* optional search · a trailing cluster for a leading control, 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.
@@ -40,7 +40,7 @@ var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		* 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 +
+		* responsive behavior.** A brand, a real search field, and a leading control +
 		* 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
@@ -70,9 +70,8 @@ var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		* 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.
+		* action alike, so it never wears `--primary`/`--accent` — the bar stays
+		* uncommitted until a specific action is happening on the surface below.
 		*/
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", {
@@ -81,8 +80,8 @@ var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, [
 				_ctx.$slots.brand ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "brand")])) : createCommentVNode("", true),
 				_ctx.$slots.search ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "search")])) : createCommentVNode("", true),
-				_ctx.$slots.orgSwitcher || _ctx.$slots.notifications || _ctx.$slots.userMenu ? (openBlock(), createElementBlock("div", _hoisted_4, [
-					renderSlot(_ctx.$slots, "orgSwitcher"),
+				_ctx.$slots.leading || _ctx.$slots.notifications || _ctx.$slots.userMenu ? (openBlock(), createElementBlock("div", _hoisted_4, [
+					renderSlot(_ctx.$slots, "leading"),
 					renderSlot(_ctx.$slots, "notifications"),
 					renderSlot(_ctx.$slots, "userMenu")
 				])) : createCommentVNode("", true)

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEE,OAAA,UAAA,GAAA,mBA+BS,UAAA;IA9BN,cAAY,QAAA;IACb,OAAM;;IAEKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOfA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAIhBA,KAAAA,OAAO,eAAeA,KAAAA,OAAO,iBAAiBA,KAAAA,OAAO,YAD7D,UAAA,GAAA,mBAUM,OAVN,YAUM;KALJ,WAA2B,KAAA,QAAA,aAAA;KAE3B,WAA6B,KAAA,QAAA,eAAA;KAE7B,WAAwB,KAAA,QAAA,UAAA"}
+{"version":3,"file":"AppHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"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 a leading control, 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 a leading control +\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 * action alike, so it never wears `--primary`/`--accent` — the bar stays\n * uncommitted until a specific action is happening on the surface below.\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.leading || $slots.notifications || $slots.userMenu\"\n      class=\"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\"\n    >\n      <!-- @slot A leading control in the trailing cluster — workspace switcher, org selector, breadcrumb, etc. -->\n      <slot name=\"leading\" />\n      <!-- @slot The notifications trigger, between the leading control 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEE,OAAA,UAAA,GAAA,mBA+BS,UAAA;IA9BN,cAAY,QAAA;IACb,OAAM;;IAEKA,KAAAA,OAAO,SAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAOfA,KAAAA,OAAO,UADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAIhBA,KAAAA,OAAO,WAAWA,KAAAA,OAAO,iBAAiBA,KAAAA,OAAO,YADzD,UAAA,GAAA,mBAUM,OAVN,YAUM;KALJ,WAAuB,KAAA,QAAA,SAAA;KAEvB,WAA6B,KAAA,QAAA,eAAA;KAE7B,WAAwB,KAAA,QAAA,UAAA"}

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

@@ -28,8 +28,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    minTileWidth: string;
     gap: "sm" | "md" | "lg";
+    minTileWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/DashboardGrid/DashboardGrid.vue"],"names":[],"mappings":"AAsDA;;;;;;;;;;;;;;;;;;GAkBG;AACH,KAAK,WAAW,GAAG;IACf,4GAA4G;IAC5G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8IAA8I;IAC9I,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B,CAAC;AA4CJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;kBAtDG,MAAM;SAEf,IAAI,GAAG,IAAI,GAAG,IAAI;6EAuD1B,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DashboardGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/DashboardGrid/DashboardGrid.vue"],"names":[],"mappings":"AAsDA;;;;;;;;;;;;;;;;;;GAkBG;AACH,KAAK,WAAW,GAAG;IACf,4GAA4G;IAC5G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8IAA8I;IAC9I,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B,CAAC;AA4CJ,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;SApDN,IAAI,GAAG,IAAI,GAAG,IAAI;kBAFT,MAAM;6EAyDvB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/blocks/DesktopAppShell/DesktopAppShell.js

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

package/dist/blocks/DesktopAppShell/DesktopAppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopAppShell.js","names":[],"sources":["../../../src/blocks/DesktopAppShell/DesktopAppShell.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * DesktopAppShell — the ready-made layout a desktop (Electron/Tauri) app\n * reaches for. It composes TitleBar, a sidebar, and a content area into a\n * single root so the host never hand-tunes the flex relationship between\n * window chrome and application body.\n *\n * The sidebar sits on the sunken plane (`bg-sunken`) and collapses below\n * tablet width, stacking above the content area instead of sitting beside it.\n * That mirrors SidebarNav's own intrinsic collapse: the nav drops to icon-only\n * at narrow widths, and the shell narrows its rail to match. Below tablet the\n * rail needs no width at all — the nav items stack vertically over the\n * content, which is the same thing a mobile user sees in any desktop app that\n * has a sidebar.\n *\n * Content sits on `bg-background` with gutters that step open at `sm` and\n * `3xl`, matching the same step scale AppHeader uses — a 16px gutter beside a\n * 1920px canvas reads as an accident.\n *\n * Every TitleBar event is re-emitted so the host wires its own window bridge;\n * the shell itself owns no IPC.\n */\nimport type { MenubarMenu } from \"../../primitives/Menubar/Menubar.vue\";\nimport type { WindowPlatform } from \"../../primitives/WindowControls/WindowControls.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport TitleBar from \"../TitleBar/TitleBar.vue\";\nimport { type WindowControlsLabels } from \"../../primitives/WindowControls/WindowControls.vue\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — passed through to TitleBar, which has no identity of its own. */\n    appName: string;\n    /** Centered subtitle — usually the open project / composition. Passed through to TitleBar. */\n    title?: string;\n    /** Top-level menus for the TitleBar's Menubar. Omit for a menu-less app. */\n    menus?: MenubarMenu[];\n    /** Whether the window is maximized — controls the TitleBar's middle window-control glyph. */\n    isMaximized?: boolean;\n    /**\n     * The desktop platform the window runs on. Passed through to TitleBar, which\n     * adjusts layout for native traffic-lights on macOS. The host decides —\n     * Loom never sniffs the OS at runtime.\n     */\n    platform?: WindowPlatform;\n    /** Names for the window-control buttons, as any subset of `WindowControlsLabels`. */\n    windowControlsLabels?: WindowControlsLabels;\n    /** Sidebar rail width. Maps to 12/16/20 rem — the three widths SidebarNav's label/labelless\n     *  modes were measured against. */\n    sidebarWidth?: \"sm\" | \"md\" | \"lg\";\n    /** Accessible name for the sidebar's `<aside>` landmark. */\n    sidebarAriaLabel?: string;\n  }>(),\n  {\n    title: \"\",\n    menus: () => [],\n    isMaximized: false,\n    platform: \"windows\",\n    sidebarWidth: \"md\",\n    sidebarAriaLabel: \"Sidebar\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"select\", command: string): void;\n  (e: \"minimize\"): void;\n  (e: \"maximize\"): void;\n  (e: \"close\"): void;\n}>();\n\nconst SIDEBAR_WIDTH = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n} as const;\n</script>\n\n<template>\n  <div class=\"flex h-dvh flex-col\">\n    <TitleBar\n      :app-name=\"appName\"\n      :title=\"title\"\n      :menus=\"menus\"\n      :is-maximized=\"isMaximized\"\n      :platform=\"platform\"\n      v-bind=\"optional({ windowControlsLabels })\"\n      @select=\"emit('select', $event)\"\n      @minimize=\"emit('minimize')\"\n      @maximize=\"emit('maximize')\"\n      @close=\"emit('close')\"\n    >\n      <template v-if=\"$slots.brandIcon\" #brandIcon>\n        <!-- @slot Brand icon — forwarded to TitleBar's own brandIcon slot. -->\n        <slot name=\"brandIcon\" />\n      </template>\n      <template v-if=\"$slots.brandMark\" #brandMark>\n        <!-- @slot Brand mark — forwarded to TitleBar's own brandMark slot. -->\n        <slot name=\"brandMark\" />\n      </template>\n    </TitleBar>\n\n    <div class=\"flex min-h-0 flex-1 flex-col md:flex-row\">\n      <aside\n        :aria-label=\"sidebarAriaLabel\"\n        class=\"shrink-1 bg-sunken md:shrink-0 md:grow-0\"\n        :style=\"{ flexBasis: SIDEBAR_WIDTH[sidebarWidth] }\"\n      >\n        <!-- @slot Sidebar navigation content — typically SidebarNav. Sits on the sunken plane. -->\n        <slot name=\"sidebar\" />\n      </aside>\n\n      <main class=\"min-w-1/2 grow-[999] overflow-y-auto bg-background px-4 sm:px-6 3xl:px-8\">\n        <!-- @slot Main content area. Sits on the background plane with stepped gutters. -->\n        <slot />\n      </main>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,102 @@
+import { type WindowControlsLabels } from "../../primitives/WindowControls/WindowControls.vue";
+/**
+ * DesktopAppShell — the ready-made layout a desktop (Electron/Tauri) app
+ * reaches for. It composes TitleBar, a sidebar, and a content area into a
+ * single root so the host never hand-tunes the flex relationship between
+ * window chrome and application body.
+ *
+ * The sidebar sits on the sunken plane (`bg-sunken`) and collapses below
+ * tablet width, stacking above the content area instead of sitting beside it.
+ * That mirrors SidebarNav's own intrinsic collapse: the nav drops to icon-only
+ * at narrow widths, and the shell narrows its rail to match. Below tablet the
+ * rail needs no width at all — the nav items stack vertically over the
+ * content, which is the same thing a mobile user sees in any desktop app that
+ * has a sidebar.
+ *
+ * Content sits on `bg-background` with gutters that step open at `sm` and
+ * `3xl`, matching the same step scale AppHeader uses — a 16px gutter beside a
+ * 1920px canvas reads as an accident.
+ *
+ * Every TitleBar event is re-emitted so the host wires its own window bridge;
+ * the shell itself owns no IPC.
+ */
+import type { MenubarMenu } from "../../primitives/Menubar/Menubar.vue";
+import type { WindowPlatform } from "../../primitives/WindowControls/WindowControls.vue";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The host app's brand name — passed through to TitleBar, which has no identity of its own. */
+    appName: string;
+    /** Centered subtitle — usually the open project / composition. Passed through to TitleBar. */
+    title?: string;
+    /** Top-level menus for the TitleBar's Menubar. Omit for a menu-less app. */
+    menus?: MenubarMenu[];
+    /** Whether the window is maximized — controls the TitleBar's middle window-control glyph. */
+    isMaximized?: boolean;
+    /**
+     * The desktop platform the window runs on. Passed through to TitleBar, which
+     * adjusts layout for native traffic-lights on macOS. The host decides —
+     * Loom never sniffs the OS at runtime.
+     */
+    platform?: WindowPlatform;
+    /** Names for the window-control buttons, as any subset of `WindowControlsLabels`. */
+    windowControlsLabels?: WindowControlsLabels;
+    /** Sidebar rail width. Maps to 12/16/20 rem — the three widths SidebarNav's label/labelless
+     *  modes were measured against. */
+    sidebarWidth?: "sm" | "md" | "lg";
+    /** Accessible name for the sidebar's `<aside>` landmark. */
+    sidebarAriaLabel?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (command: string) => any;
+    close: () => any;
+    minimize: () => any;
+    maximize: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The host app's brand name — passed through to TitleBar, which has no identity of its own. */
+    appName: string;
+    /** Centered subtitle — usually the open project / composition. Passed through to TitleBar. */
+    title?: string;
+    /** Top-level menus for the TitleBar's Menubar. Omit for a menu-less app. */
+    menus?: MenubarMenu[];
+    /** Whether the window is maximized — controls the TitleBar's middle window-control glyph. */
+    isMaximized?: boolean;
+    /**
+     * The desktop platform the window runs on. Passed through to TitleBar, which
+     * adjusts layout for native traffic-lights on macOS. The host decides —
+     * Loom never sniffs the OS at runtime.
+     */
+    platform?: WindowPlatform;
+    /** Names for the window-control buttons, as any subset of `WindowControlsLabels`. */
+    windowControlsLabels?: WindowControlsLabels;
+    /** Sidebar rail width. Maps to 12/16/20 rem — the three widths SidebarNav's label/labelless
+     *  modes were measured against. */
+    sidebarWidth?: "sm" | "md" | "lg";
+    /** Accessible name for the sidebar's `<aside>` landmark. */
+    sidebarAriaLabel?: string;
+}> & Readonly<{
+    onSelect?: (command: string) => any;
+    onClose?: () => any;
+    onMinimize?: () => any;
+    onMaximize?: () => any;
+}>, {
+    title: string;
+    platform: WindowPlatform;
+    isMaximized: boolean;
+    menus: MenubarMenu[];
+    sidebarWidth: "sm" | "md" | "lg";
+    sidebarAriaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    brandIcon?: (props: {}) => any;
+} & {
+    brandMark?: (props: {}) => any;
+} & {
+    sidebar?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=DesktopAppShell.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopAppShell.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/DesktopAppShell/DesktopAppShell.vue"],"names":[],"mappings":"AA4HA,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAI/F;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,gGAAgG;aACvF,MAAM;IACf,8FAA8F;YACtF,MAAM;IACd,4EAA4E;YACpE,WAAW,EAAE;IACrB,6FAA6F;kBAC/E,OAAO;IACrB;;;;OAIG;eACQ,cAAc;IACzB,qFAAqF;2BAC9D,oBAAoB;IAC3C;uCACmC;mBACpB,IAAI,GAAG,IAAI,GAAG,IAAI;IACjC,4DAA4D;uBACzC,MAAM;;;;;;;IApBzB,gGAAgG;aACvF,MAAM;IACf,8FAA8F;YACtF,MAAM;IACd,4EAA4E;YACpE,WAAW,EAAE;IACrB,6FAA6F;kBAC/E,OAAO;IACrB;;;;OAIG;eACQ,cAAc;IACzB,qFAAqF;2BAC9D,oBAAoB;IAC3C;uCACmC;mBACpB,IAAI,GAAG,IAAI,GAAG,IAAI;IACjC,4DAA4D;uBACzC,MAAM;;;;;;;WAjBjB,MAAM;cAUH,cAAc;iBANX,OAAO;WAFb,WAAW,EAAE;kBAaN,IAAI,GAAG,IAAI,GAAG,IAAI;sBAEd,MAAM;;gBAmLb,CAAC,KAAK,IAAiB,KAAK,GAAG;;gBAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;cACjC,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAWzC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/blocks/DesktopAppShell/DesktopAppShell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { optional } from "../../lib/props.js";
+import TitleBar_default from "../TitleBar/TitleBar.js";
+import { createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/blocks/DesktopAppShell/DesktopAppShell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex h-dvh flex-col" };
+var _hoisted_2 = { class: "flex min-h-0 flex-1 flex-col md:flex-row" };
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = { class: "min-w-1/2 grow-[999] overflow-y-auto bg-background px-4 sm:px-6 3xl:px-8" };
+var DesktopAppShell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "DesktopAppShell",
+	props: {
+		appName: {},
+		title: { default: "" },
+		menus: { default: () => [] },
+		isMaximized: {
+			type: Boolean,
+			default: false
+		},
+		platform: { default: "windows" },
+		windowControlsLabels: {},
+		sidebarWidth: { default: "md" },
+		sidebarAriaLabel: { default: "Sidebar" }
+	},
+	emits: [
+		"select",
+		"minimize",
+		"maximize",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const SIDEBAR_WIDTH = {
+			sm: "12rem",
+			md: "16rem",
+			lg: "20rem"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(TitleBar_default, mergeProps({
+				"app-name": __props.appName,
+				title: __props.title,
+				menus: __props.menus,
+				"is-maximized": __props.isMaximized,
+				platform: __props.platform
+			}, unref(optional)({ windowControlsLabels: __props.windowControlsLabels }), {
+				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
+				onMinimize: _cache[1] || (_cache[1] = ($event) => emit("minimize")),
+				onMaximize: _cache[2] || (_cache[2] = ($event) => emit("maximize")),
+				onClose: _cache[3] || (_cache[3] = ($event) => emit("close"))
+			}), createSlots({ _: 2 }, [_ctx.$slots.brandIcon ? {
+				name: "brandIcon",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "brandIcon")]),
+				key: "0"
+			} : void 0, _ctx.$slots.brandMark ? {
+				name: "brandMark",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "brandMark")]),
+				key: "1"
+			} : void 0]), 1040, [
+				"app-name",
+				"title",
+				"menus",
+				"is-maximized",
+				"platform"
+			]), createElementVNode("div", _hoisted_2, [createElementVNode("aside", {
+				"aria-label": __props.sidebarAriaLabel,
+				class: "shrink-1 bg-sunken md:shrink-0 md:grow-0",
+				style: normalizeStyle({ flexBasis: SIDEBAR_WIDTH[__props.sidebarWidth] })
+			}, [renderSlot(_ctx.$slots, "sidebar")], 12, _hoisted_3), createElementVNode("main", _hoisted_4, [renderSlot(_ctx.$slots, "default")])])]);
+		};
+	}
+});
+//#endregion
+export { DesktopAppShell_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DesktopAppShell.vue_vue_type_script_setup_true_lang.js.map

package/dist/blocks/DesktopAppShell/DesktopAppShell.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopAppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/blocks/DesktopAppShell/DesktopAppShell.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * DesktopAppShell — the ready-made layout a desktop (Electron/Tauri) app\n * reaches for. It composes TitleBar, a sidebar, and a content area into a\n * single root so the host never hand-tunes the flex relationship between\n * window chrome and application body.\n *\n * The sidebar sits on the sunken plane (`bg-sunken`) and collapses below\n * tablet width, stacking above the content area instead of sitting beside it.\n * That mirrors SidebarNav's own intrinsic collapse: the nav drops to icon-only\n * at narrow widths, and the shell narrows its rail to match. Below tablet the\n * rail needs no width at all — the nav items stack vertically over the\n * content, which is the same thing a mobile user sees in any desktop app that\n * has a sidebar.\n *\n * Content sits on `bg-background` with gutters that step open at `sm` and\n * `3xl`, matching the same step scale AppHeader uses — a 16px gutter beside a\n * 1920px canvas reads as an accident.\n *\n * Every TitleBar event is re-emitted so the host wires its own window bridge;\n * the shell itself owns no IPC.\n */\nimport type { MenubarMenu } from \"../../primitives/Menubar/Menubar.vue\";\nimport type { WindowPlatform } from \"../../primitives/WindowControls/WindowControls.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport TitleBar from \"../TitleBar/TitleBar.vue\";\nimport { type WindowControlsLabels } from \"../../primitives/WindowControls/WindowControls.vue\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — passed through to TitleBar, which has no identity of its own. */\n    appName: string;\n    /** Centered subtitle — usually the open project / composition. Passed through to TitleBar. */\n    title?: string;\n    /** Top-level menus for the TitleBar's Menubar. Omit for a menu-less app. */\n    menus?: MenubarMenu[];\n    /** Whether the window is maximized — controls the TitleBar's middle window-control glyph. */\n    isMaximized?: boolean;\n    /**\n     * The desktop platform the window runs on. Passed through to TitleBar, which\n     * adjusts layout for native traffic-lights on macOS. The host decides —\n     * Loom never sniffs the OS at runtime.\n     */\n    platform?: WindowPlatform;\n    /** Names for the window-control buttons, as any subset of `WindowControlsLabels`. */\n    windowControlsLabels?: WindowControlsLabels;\n    /** Sidebar rail width. Maps to 12/16/20 rem — the three widths SidebarNav's label/labelless\n     *  modes were measured against. */\n    sidebarWidth?: \"sm\" | \"md\" | \"lg\";\n    /** Accessible name for the sidebar's `<aside>` landmark. */\n    sidebarAriaLabel?: string;\n  }>(),\n  {\n    title: \"\",\n    menus: () => [],\n    isMaximized: false,\n    platform: \"windows\",\n    sidebarWidth: \"md\",\n    sidebarAriaLabel: \"Sidebar\",\n  },\n);\n\nconst emit = defineEmits<{\n  (e: \"select\", command: string): void;\n  (e: \"minimize\"): void;\n  (e: \"maximize\"): void;\n  (e: \"close\"): void;\n}>();\n\nconst SIDEBAR_WIDTH = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n} as const;\n</script>\n\n<template>\n  <div class=\"flex h-dvh flex-col\">\n    <TitleBar\n      :app-name=\"appName\"\n      :title=\"title\"\n      :menus=\"menus\"\n      :is-maximized=\"isMaximized\"\n      :platform=\"platform\"\n      v-bind=\"optional({ windowControlsLabels })\"\n      @select=\"emit('select', $event)\"\n      @minimize=\"emit('minimize')\"\n      @maximize=\"emit('maximize')\"\n      @close=\"emit('close')\"\n    >\n      <template v-if=\"$slots.brandIcon\" #brandIcon>\n        <!-- @slot Brand icon — forwarded to TitleBar's own brandIcon slot. -->\n        <slot name=\"brandIcon\" />\n      </template>\n      <template v-if=\"$slots.brandMark\" #brandMark>\n        <!-- @slot Brand mark — forwarded to TitleBar's own brandMark slot. -->\n        <slot name=\"brandMark\" />\n      </template>\n    </TitleBar>\n\n    <div class=\"flex min-h-0 flex-1 flex-col md:flex-row\">\n      <aside\n        :aria-label=\"sidebarAriaLabel\"\n        class=\"shrink-1 bg-sunken md:shrink-0 md:grow-0\"\n        :style=\"{ flexBasis: SIDEBAR_WIDTH[sidebarWidth] }\"\n      >\n        <!-- @slot Sidebar navigation content — typically SidebarNav. Sits on the sunken plane. -->\n        <slot name=\"sidebar\" />\n      </aside>\n\n      <main class=\"min-w-1/2 grow-[999] overflow-y-auto bg-background px-4 sm:px-6 3xl:px-8\">\n        <!-- @slot Main content area. Sits on the background plane with stepped gutters. -->\n        <slot />\n      </main>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEA,MAAM,OAAO;EAOb,MAAM,gBAAgB;GACpB,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;;GAIE,OAAA,UAAA,GAAA,mBAsCM,OAtCN,YAsCM,CArCJ,YAoBW,kBApBX,WAoBW;IAnBR,YAAU,QAAA;IACV,OAAO,QAAA;IACP,OAAO,QAAA;IACP,gBAAc,QAAA;IACd,UAAU,QAAA;GACH,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,sBAAG,QAAA,qBAAoB,CAAA,GAAA;IACtC,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;IAC7B,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IACd,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;GAEIA,CAAAA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAO,YAAA;IAAY,MAAA;IAEjC,IAAA,cAAyB,CAAzB,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;GAEXA,IAAAA,KAAAA,GAAAA,KAAAA,OAAO,YAAA;IAAY,MAAA;IAEjC,IAAA,cAAyB,CAAzB,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;;;;;GAI7B,CAAA,GAAA,mBAcM,OAdN,YAcM,CAbJ,mBAOQ,SAAA;IANL,cAAY,QAAA;IACb,OAAM;IACL,OAAK,eAAA,EAAA,WAAe,cAAc,QAAA,cAAY,CAAA;GAG/C,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,GAGzB,mBAGO,QAHP,YAGO,CADL,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/blocks/ErrorState/ErrorState.js

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

package/dist/blocks/ErrorState/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../src/blocks/ErrorState/ErrorState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * ErrorState — the shape of \"something went wrong\": icon → title → optional\n * description → optional retry action, centered in the error region. This is\n * EmptyState's mirror: where that block says \"nothing here yet\" and invites\n * the next step, this one says \"something broke\" and offers a retry.\n *\n * No staggered entrance. EmptyState is content appearing — a welcome, budgeted\n * like a panel reveal. An error is not content; it is a problem that needs\n * attention now, and a fade-rise film that delays the message reads as\n * indifference. Everything renders at once.\n *\n * The icon sits in a hairline medallion — the same shape as EmptyState's, but\n * tinted `bg-destructive/10` with a `border-destructive/30` ring — because a\n * bare glyph in a region that already signals alarm has no anchor and the\n * colour alone does the work that EmptyState's neutral medallion needed\n * `bg-subtle` for. The icon is decorative and `aria-hidden`; the title already\n * carries the meaning.\n *\n * The action slot is semantically a retry affordance but remains a generic\n * slot — the host owns the wording and behaviour, and no fallback copy ships\n * with the component.\n */\ndefineProps<{\n  /** What went wrong, stated plainly — always shown. */\n  title: string;\n  /** More context about the error. Omit rather than pad the region with filler copy. */\n  description?: string;\n}>();\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center justify-center gap-1.5 px-6 py-10 text-center sm:py-14\">\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"grid h-12 w-12 place-items-center rounded-full border border-destructive/30 bg-destructive/10 text-destructive [&_svg]:h-5 [&_svg]:w-5\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <p class=\"text-title text-foreground\">\n      {{ title }}\n    </p>\n    <p v-if=\"description\" class=\"max-w-sm text-balance text-small text-muted-foreground\">\n      {{ description }}\n    </p>\n    <div v-if=\"$slots.action\" class=\"mt-4\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}