@ecoma-io/loom 0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,180 @@
+<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://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" />
+  <img src="https://img.shields.io/badge/pnpm-11-f69220.svg" alt="pnpm 11" />
+  <img src="https://img.shields.io/badge/TypeScript-strict-3178c6.svg" alt="TypeScript strict" />
+  <a href="CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-7C3AED.svg" alt="Pull requests welcome" /></a>
+</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%" />
+</p>
+
+<h1 align="center">Loom</h1>
+
+<p align="center">
+  <strong>Design system &amp; components for the Ecoma ecosystem.</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 />
+  <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>
+</p>
+
+---
+
+## Every product rewrites its buttons. That is the tax Loom exists to stop paying.
+
+A design system is not a folder of components. It is a decision, made once, that
+every screen inherits — how far apart two things sit, how a dialog gives focus
+back, what "destructive" looks like at 3am on a low-contrast monitor. Hand that
+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.
+
+## What Loom gives you
+
+|                              |                                                                                                                                                                         |
+| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **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.                              |
+| **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.
+- **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.
+
+## Getting started
+
+Requirements: **Node ≥ 24** and **pnpm 11** (pinned in `package.json`, so
+Corepack fetches the right one for you).
+
+```bash
+git clone https://github.com/ecoma-io/loom.git
+cd loom
+pnpm install
+```
+
+`pnpm install` also installs the Git hooks, so formatting, linting and commit
+message checks run before anything reaches a branch.
+
+```bash
+pnpm lint        # ESLint
+pnpm typecheck   # tsc --noEmit
+pnpm test        # Vitest
+pnpm e2e         # Playwright
+pnpm format      # Prettier, in place
+```
+
+The component surface is landing in the open, one primitive at a time —
+`src/index.ts` is always the complete export list. Follow along or ask for
+something specific in [the issues](https://github.com/ecoma-io/loom/issues).
+
+## Contributing
+
+Loom holds what is **generic** — an affordance more than one product reaches for
+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
+designed to be consumed as an ordinary npm package.
+
+**Why Apache-2.0 and not MIT?**
+Apache-2.0 carries an explicit patent grant. For a component library that ends
+up embedded in commercial products, that is the difference between "probably
+fine" and "written down".
+
+**Which framework does it target?**
+Vue 3 with TypeScript, styled through Tailwind CSS. The design tokens themselves
+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.
+
+**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).
+
+## License
+
+[Apache License 2.0](LICENSE) © Ecoma.
+
+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> ·
+    <a href="https://github.com/ecoma-io">Organisation</a> ·
+    <a href="https://ecoma.io/docs/contribute/design-system">Contribute</a>
+  </sub>
+</p>

package/dist/a11y.d.ts

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

package/dist/a11y.d.ts.map

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

package/dist/a11y.js

@@ -0,0 +1,2 @@
+import { WCAG_TAGS } from "./lib/a11y-scope.js";
+export { WCAG_TAGS };

package/dist/blocks/AppHeader/AppHeader.js

@@ -0,0 +1,7 @@
+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

@@ -0,0 +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":""}

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

@@ -0,0 +1,83 @@
+/**
+ * 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

@@ -0,0 +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"}

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

@@ -0,0 +1,96 @@
+import { createCommentVNode, createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+//#region src/blocks/AppHeader/AppHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "flex shrink-0 items-center gap-2"
+};
+var _hoisted_3 = {
+	key: 1,
+	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"
+};
+var _hoisted_4 = {
+	key: 2,
+	class: "ml-auto flex shrink-0 items-center gap-1 sm:gap-2"
+};
+var AppHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "AppHeader",
+	props: { ariaLabel: {} },
+	setup(__props) {
+		/**
+		* 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.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", {
+				"aria-label": __props.ariaLabel,
+				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"
+			}, [
+				_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"),
+					renderSlot(_ctx.$slots, "notifications"),
+					renderSlot(_ctx.$slots, "userMenu")
+				])) : createCommentVNode("", true)
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { AppHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=AppHeader.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

package/dist/blocks/DashboardGrid/DashboardGrid.js

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

package/dist/blocks/DashboardGrid/DashboardGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardGrid.js","names":[],"sources":["../../../src/blocks/DashboardGrid/DashboardGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * DashboardGrid — the reflowing tile grid a dashboard's panels sit in: a CSS\n * grid that fits as many `minTileWidth`-wide tracks as the container allows,\n * so a KPI row and a couple of wider panels share one layout without the\n * host authoring a single breakpoint.\n *\n * `auto-fit` + `minmax` (never fixed `grid-cols-N` breakpoints) is the\n * deliberate choice: a fixed column count needs one breakpoint per host\n * viewport, while auto-fit recomputes the column count from the container's\n * own width — it reflows identically inside a sidebar-narrowed workspace and\n * full-bleed on an ultra-wide monitor, with zero Tailwind breakpoints\n * authored here or at the call site. The `minmax` lower bound is wrapped in\n * `min(100%, …)` so a tile never forces horizontal overflow on a container\n * narrower than `minTileWidth` itself.\n *\n * Presentational only: panels arrive through the default slot, and a panel\n * spans multiple tracks with its own `col-span-*` utility at the call\n * site — the grid does not know or count how many panels it holds.\n */\nwithDefaults(\n  defineProps<{\n    /** Narrowest a tile may get before the grid drops to fewer columns. Any valid CSS length (e.g. \"14rem\"). */\n    minTileWidth?: string;\n    /** Row/column gap step — mirrors Surface's `pad` scale at `sm` and up (sm 12px · md 16px · lg 24px); each step drops one notch below `sm`. */\n    gap?: \"sm\" | \"md\" | \"lg\";\n  }>(),\n  { minTileWidth: \"16rem\", gap: \"md\" },\n);\n\n// One notch tighter below the `sm` breakpoint. A gutter is spent viewport, and\n// on a phone the grid is already single-column — 24px of air between stacked\n// tiles buys no separation the tile borders do not already give, it just\n// pushes the second tile off screen. From `sm` up each step is its\n// documented value.\nconst gapClass = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n</script>\n\n<template>\n  <div\n    class=\"grid\"\n    :class=\"gapClass[gap]\"\n    :style=\"{ gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))` }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}