@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/primitives/window-controls/src/WindowControls.vue.d.ts

@@ -0,0 +1,81 @@
+import { type LabelOverrides } from "../../../labels/src/index";
+import type { WindowControlsLabels } from "../../../labels/src/index";
+/**
+ * WindowControls — the minimize / maximize / close cluster for a frameless
+ * (custom-chrome) window. Presentational only: it emits intents; the host wires
+ * them to the platform (the desktop shell's window bridge). Windows-style layout —
+ * on macOS the OS draws native traffic-lights, so hide this there.
+ *
+ * `platform` tells the cluster whether to render at all: on macOS the operating
+ * system owns the traffic-light buttons, so a second set drawn by Loom would be
+ * redundant and confusing. The host decides which platform it is on — Loom never
+ * sniffs the OS at runtime, because a Tauri or Electron host already knows its
+ * platform and a PWA has no native window controls to compete with.
+ *
+ * The close button is the one place `destructive` is allowed without a confirm:
+ * OS window-close is an expected, reversible-by-reopen affordance.
+ */
+/** The desktop platform that owns the window chrome. */
+export type WindowPlatform = "windows" | "macos" | "linux";
+/**
+
+/**
+ * Loom's English, co-located with the component so it tree-shakes with it, and
+ * exported so a host can build a partial vocabulary against the real thing.
+ */
+export declare const WINDOW_CONTROLS_LABELS: WindowControlsLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The desktop platform the window is running on. On macOS the OS draws its
+     * own traffic-light buttons, so this cluster renders nothing there. The host
+     * decides — Loom does not sniff the OS, because the host already knows its
+     * platform and a PWA has no native controls to avoid.
+     */
+    platform?: WindowPlatform;
+    /** Swaps the middle button between its Maximize and Restore glyph and label. */
+    isMaximized?: boolean;
+    /**
+     * Names for the three buttons, as any subset of `WindowControlsLabels` —
+     * the rest stay as the host's `provideLoomLabels` vocabulary left them, and
+     * then as Loom's English.
+     *
+     * This took a whole object before the seam existed, which meant a host that
+     * wanted one word in their own language had to restate the other three in
+     * English and keep them in step by hand.
+     */
+    labels?: LabelOverrides<WindowControlsLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    minimize: () => any;
+    maximize: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The desktop platform the window is running on. On macOS the OS draws its
+     * own traffic-light buttons, so this cluster renders nothing there. The host
+     * decides — Loom does not sniff the OS, because the host already knows its
+     * platform and a PWA has no native controls to avoid.
+     */
+    platform?: WindowPlatform;
+    /** Swaps the middle button between its Maximize and Restore glyph and label. */
+    isMaximized?: boolean;
+    /**
+     * Names for the three buttons, as any subset of `WindowControlsLabels` —
+     * the rest stay as the host's `provideLoomLabels` vocabulary left them, and
+     * then as Loom's English.
+     *
+     * This took a whole object before the seam existed, which meant a host that
+     * wanted one word in their own language had to restate the other three in
+     * English and keep them in step by hand.
+     */
+    labels?: LabelOverrides<WindowControlsLabels>;
+}> & Readonly<{
+    onClose?: () => any;
+    onMinimize?: () => any;
+    onMaximize?: () => any;
+}>, {
+    platform: WindowPlatform;
+    isMaximized: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=WindowControls.vue.d.ts.map

package/dist/packages/primitives/window-controls/src/WindowControls.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,124 @@
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, unref } from "vue";
+//#region packages/primitives/window-controls/src/WindowControls.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex h-full items-stretch",
+	style: { "-webkit-app-region": "no-drag" }
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = {
+	key: 0,
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = {
+	key: 1,
+	width: "10",
+	height: "10",
+	viewBox: "0 0 10 10",
+	"aria-hidden": "true"
+};
+var _hoisted_6 = ["aria-label"];
+/**
+
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var WINDOW_CONTROLS_LABELS = {
+	minimize: "Minimize",
+	maximize: "Maximize",
+	restore: "Restore",
+	close: "Close"
+};
+var WindowControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "WindowControls",
+	props: {
+		platform: { default: "windows" },
+		isMaximized: {
+			type: Boolean,
+			default: false
+		},
+		labels: {}
+	},
+	emits: [
+		"minimize",
+		"maximize",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const text = useLabels("windowControls", WINDOW_CONTROLS_LABELS, () => props.labels);
+		return (_ctx, _cache) => {
+			return __props.platform !== "macos" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": unref(text).minimize,
+					"data-testid": "win-minimize",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("minimize"))
+				}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true"
+				}, [createElementVNode("rect", {
+					y: "4.5",
+					width: "10",
+					height: "1",
+					fill: "currentColor"
+				})], -1)])], 8, _hoisted_2),
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": __props.isMaximized ? unref(text).restore : unref(text).maximize,
+					"data-testid": "win-maximize",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("maximize"))
+				}, [!__props.isMaximized ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[4] || (_cache[4] = [createElementVNode("rect", {
+					x: "0.5",
+					y: "0.5",
+					width: "9",
+					height: "9",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[5] || (_cache[5] = [createElementVNode("rect", {
+					x: "0.5",
+					y: "2.5",
+					width: "7",
+					height: "7",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1), createElementVNode("path", {
+					d: "M2.5 2.5 V0.5 H9.5 V7.5 H7.5",
+					fill: "none",
+					stroke: "currentColor"
+				}, null, -1)])]))], 8, _hoisted_3),
+				createElementVNode("button", {
+					type: "button",
+					class: "flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-destructive hover:text-destructive-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+					"aria-label": unref(text).close,
+					"data-testid": "win-close",
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("close"))
+				}, [..._cache[6] || (_cache[6] = [createElementVNode("svg", {
+					width: "10",
+					height: "10",
+					viewBox: "0 0 10 10",
+					"aria-hidden": "true"
+				}, [createElementVNode("path", {
+					d: "M0 0 L10 10 M10 0 L0 10",
+					stroke: "currentColor"
+				})], -1)])], 8, _hoisted_6)
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { WINDOW_CONTROLS_LABELS, WindowControls_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=WindowControls.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/primitives/window-controls/src/WindowControls.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WindowControls.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/primitives/window-controls/src/WindowControls.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { WindowControlsLabels } from \"@ecoma-io/loom-labels\";\n/**\n * WindowControls — the minimize / maximize / close cluster for a frameless\n * (custom-chrome) window. Presentational only: it emits intents; the host wires\n * them to the platform (the desktop shell's window bridge). Windows-style layout —\n * on macOS the OS draws native traffic-lights, so hide this there.\n *\n * `platform` tells the cluster whether to render at all: on macOS the operating\n * system owns the traffic-light buttons, so a second set drawn by Loom would be\n * redundant and confusing. The host decides which platform it is on — Loom never\n * sniffs the OS at runtime, because a Tauri or Electron host already knows its\n * platform and a PWA has no native window controls to compete with.\n *\n * The close button is the one place `destructive` is allowed without a confirm:\n * OS window-close is an expected, reversible-by-reopen affordance.\n */\n\n/** The desktop platform that owns the window chrome. */\nexport type WindowPlatform = \"windows\" | \"macos\" | \"linux\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const WINDOW_CONTROLS_LABELS: WindowControlsLabels = {\n  minimize: \"Minimize\",\n  maximize: \"Maximize\",\n  restore: \"Restore\",\n  close: \"Close\",\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The desktop platform the window is running on. On macOS the OS draws its\n     * own traffic-light buttons, so this cluster renders nothing there. The host\n     * decides — Loom does not sniff the OS, because the host already knows its\n     * platform and a PWA has no native controls to avoid.\n     */\n    platform?: WindowPlatform;\n    /** Swaps the middle button between its Maximize and Restore glyph and label. */\n    isMaximized?: boolean;\n    /**\n     * Names for the three buttons, as any subset of `WindowControlsLabels` —\n     * the rest stay as the host's `provideLoomLabels` vocabulary left them, and\n     * then as Loom's English.\n     *\n     * This took a whole object before the seam existed, which meant a host that\n     * wanted one word in their own language had to restate the other three in\n     * English and keep them in step by hand.\n     */\n    labels?: LabelOverrides<WindowControlsLabels>;\n  }>(),\n  { platform: \"windows\", isMaximized: false },\n);\n\nconst emit = defineEmits<{\n  (e: \"minimize\"): void;\n  (e: \"maximize\"): void;\n  (e: \"close\"): void;\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"windowControls\", WINDOW_CONTROLS_LABELS, () => props.labels);\n</script>\n\n<template>\n  <!-- On macOS the OS owns the traffic-light buttons; rendering a second set\n       would be redundant. The host can also choose \"linux\" if their desktop\n       environment handles window buttons natively. -->\n  <div\n    v-if=\"platform !== 'macos'\"\n    class=\"flex h-full items-stretch\"\n    style=\"-webkit-app-region: no-drag\"\n  >\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"text.minimize\"\n      data-testid=\"win-minimize\"\n      @click=\"emit('minimize')\"\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect y=\"4.5\" width=\"10\" height=\"1\" fill=\"currentColor\" />\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"isMaximized ? text.restore : text.maximize\"\n      data-testid=\"win-maximize\"\n      @click=\"emit('maximize')\"\n    >\n      <svg v-if=\"!isMaximized\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"9\" height=\"9\" fill=\"none\" stroke=\"currentColor\" />\n      </svg>\n      <svg v-else width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <rect x=\"0.5\" y=\"2.5\" width=\"7\" height=\"7\" fill=\"none\" stroke=\"currentColor\" />\n        <path d=\"M2.5 2.5 V0.5 H9.5 V7.5 H7.5\" fill=\"none\" stroke=\"currentColor\" />\n      </svg>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"flex w-11 items-center justify-center text-muted-foreground transition-colors duration-fast ease-out hover:bg-destructive hover:text-destructive-foreground active:brightness-90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n      :aria-label=\"text.close\"\n      data-testid=\"win-close\"\n      @click=\"emit('close')\"\n    >\n      <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n        <path d=\"M0 0 L10 10 M10 0 L0 10\" stroke=\"currentColor\" />\n      </svg>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAa,yBAA+C;CAC1D,UAAU;CACV,UAAU;CACV,SAAS;CACT,OAAO;AACT;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAyBd,MAAM,OAAO;EASb,MAAM,OAAO,UAAU,kBAAkB,8BAA8B,MAAM,MAAM;;GAQzE,OAAA,QAAA,aAAQ,WADhB,UAAA,GAAA,mBA4CM,OA5CN,YA4CM;IAvCJ,mBAUS,UAAA;KATP,MAAK;KACL,OAAM;KACL,cAAY,MAAA,IAAA,CAAI,CAAC;KAClB,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IAEZ,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAEM,OAAA;KAFD,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,eAAY;IAC1D,GAAA,CAAA,mBAA0D,QAAA;KAApD,GAAE;KAAM,OAAM;KAAK,QAAO;KAAI,MAAK;;IAI7C,mBAcS,UAAA;KAbP,MAAK;KACL,OAAM;KACL,cAAY,QAAA,cAAc,MAAA,IAAA,CAAI,CAAC,UAAU,MAAA,IAAA,CAAI,CAAC;KAC/C,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;IAEA,GAAA,CAAA,CAAA,QAAA,eAAZ,UAAA,GAAA,mBAEM,OAFN,YAEM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+E,QAAA;KAAzE,GAAE;KAAM,GAAE;KAAM,OAAM;KAAI,QAAO;KAAI,MAAK;KAAO,QAAO;IAEhE,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAAA,UAAA,GAAA,mBAGM,OAHN,YAGM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAFJ,mBAA+E,QAAA;KAAzE,GAAE;KAAM,GAAE;KAAM,OAAM;KAAI,QAAO;KAAI,MAAK;KAAO,QAAO;IAC9D,GAAA,MAAA,EAAA,GAAA,mBAA2E,QAAA;KAArE,GAAE;KAA+B,MAAK;KAAO,QAAO;;IAI9D,mBAUS,UAAA;KATP,MAAK;KACL,OAAM;KACL,cAAY,MAAA,IAAA,CAAI,CAAC;KAClB,eAAY;KACX,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;IAEZ,GAAA,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,mBAEM,OAAA;KAFD,OAAM;KAAK,QAAO;KAAK,SAAQ;KAAY,eAAY;IAC1D,GAAA,CAAA,mBAA0D,QAAA;KAApD,GAAE;KAA0B,QAAO"}

package/dist/packages/primitives/window-controls/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default, WINDOW_CONTROLS_LABELS } from "./WindowControls.vue";
+export type { WindowPlatform } from "./WindowControls.vue";
+export type { WindowControlsLabels } from "../../../labels/src/index";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/primitives/window-controls/src/index.js

@@ -0,0 +1,3 @@
+import { WINDOW_CONTROLS_LABELS } from "./WindowControls.vue_vue_type_script_setup_true_lang.js";
+import WindowControls_default from "./WindowControls.js";
+export { WINDOW_CONTROLS_LABELS, WindowControls_default as default };

package/dist/styles/global.css

@@ -111,6 +111,21 @@
  * layout. When the overlay is active, the brand cluster's left padding expands
  * to clear the native controls on the left edge (same corner as macOS), and
  * the drag region continues to work over the full bar width. */
+/* ---- AppHeader safe areas --------------------------------------------------
+ * The shell's own strip sits at the very top of the viewport, which is exactly
+ * where a phone's notch and a PWA's title-bar overlay reserve space. The base
+ * padding stays the component's; this only adds what the platform takes back,
+ * on the same attribute-hook pattern as `[data-loom-titlebar]` above. */
+[data-loom-app-header] {
+  padding-block-start: calc(0.5rem + var(--safe-area-top, 0px));
+}
+
+@media (min-width: 640px) {
+  [data-loom-app-header] {
+    padding-block-start: var(--safe-area-top, 0px);
+  }
+}
+
 @supports (window-controls-overlay: visible) {
   [data-loom-titlebar] {
     /* Narrow the drag spacer so the title text is not pushed too far right.
@@ -197,6 +212,35 @@
   }
 }
 
+/* ---- Expansion. The disclosure pair: a panel growing into and out of its
+ * own height, keyed to Reka's `--reka-collapsible-content-height` (the px
+ * value Reka measures onto every Collapsible content element). This is the
+ * height animation the Accordion docblock once deferred to this file rather
+ * than hand-rolling per component; Collapse plays it, and Accordion can
+ * adopt it whenever its own look is next revisited.
+ *
+ * Height animates layout, which is why the pair exists as keyframes on one
+ * property with `overflow-hidden` supplied by the component — nothing here
+ * fights a live measurement, and under reduced motion the collapse to
+ * 0.01ms turns both into the instant toggle those readers asked for. */
+@keyframes expand {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapse {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 /* An edge-anchored panel leaving along its own axis.
  *
  * These animate `translate`, not `transform`, and the distinction is the whole
@@ -267,6 +311,21 @@
   }
 }
 
+/* The exit answering `toast-in`, leaving along the same axis it arrived and
+ * was swiped away on. It rides the toast root — Reka's Presence holds that
+ * element for `animationend`; an animation on an inner card would never play
+ * a frame. */
+@keyframes toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(0.75rem);
+  }
+}
+
 /* Respect the reader. Motion is meaning, but it is never a barrier. */
 @media (prefers-reduced-motion: reduce) {
   *,

package/dist/styles/theme.css

@@ -87,6 +87,26 @@
   /* Focus ring is the primary colour: keyboard focus is the primary action. */
   --color-ring: hsl(211 37% 32%);
 
+  /* ---- Text-variant tokens ------------------------------------------------
+   * These are lighter steps of the functional colours, for use when the base
+   * token serves as TEXT rather than as a background fill. In light mode the
+   * base tokens already clear 4.5:1 against every surface, so the text variants
+   * are identical — they exist so that `text-primary-text` is always a valid
+   * class, and dark mode can override them without the component needing to
+   * know which theme is active.
+   *
+   * In dark mode, `--color-primary` is calibrated for button backgrounds (white
+   * on primary at 5.05:1); as text on a dark surface it lands around 4:1,
+   * below the AA floor. The same applies to the other functional tokens. The
+   * dark block overrides each text variant to a lighter step that clears 4.5:1
+   * on every dark surface (sunken through popover). */
+  --color-primary-text: hsl(211 37% 32%);
+  --color-accent-text: hsl(18 56% 39%);
+  --color-destructive-text: hsl(356 65% 41%);
+  --color-success-text: hsl(152 45% 30%);
+  --color-warning-text: hsl(38 92% 28%);
+  --color-info-text: hsl(202 65% 35%);
+
   /* ---- Functional — hues kept distinct from both action colours ------------ */
   --color-destructive: hsl(356 65% 41%);
   --color-destructive-foreground: hsl(0 0% 100%);
@@ -280,6 +300,19 @@
   --animate-slide-out-to-right: slide-out-to-right var(--duration-normal) var(--ease-in) both; /* a panel leaving past the right edge */
   --animate-slide-out-to-top: slide-out-to-top var(--duration-normal) var(--ease-in) both; /* a panel leaving past the top edge */
   --animate-slide-out-to-bottom: slide-out-to-bottom var(--duration-normal) var(--ease-in) both; /* a panel leaving past the bottom edge */
+
+  /* The exit answering `--animate-toast-in`: the card leaves along the axis it
+   * arrived on, on the accelerate curve, shorter than its entrance — the same
+   * relationship every exit here keeps with the entrance it mirrors. */
+  --animate-toast-out: toast-out var(--duration-fast) var(--ease-in) both;
+
+  /* The disclosure pair, keyed to Reka's measured content height — see
+   * `global.css` for why these are height keyframes at all. Arriving is the
+   * emphasized direction (decelerating into place over `--duration-normal`);
+   * leaving clears the eye faster on the accelerate curve, like every exit
+   * above. */
+  --animate-expand: expand var(--duration-normal) var(--ease-out) both;
+  --animate-collapse: collapse var(--duration-fast) var(--ease-in) both;
 }
 
 /* Tailwind has no `--duration-*` theme namespace — `duration-*` takes a bare
@@ -371,6 +404,20 @@
 
   --color-ring: hsl(211 33% 45%); /* matches primary; 3.50:1 on background */
 
+  /* Text-variant tokens: lighter steps of the functional colours that clear
+   * 4.5:1 as text on every dark surface (sunken 7% through popover 17%).
+   * The base tokens are calibrated for button backgrounds, where their own
+   * foreground pair provides the contrast — but `text-primary` as text on
+   * a dark surface lands around 4:1, below the AA floor. Components that
+   * use a functional colour as text should use the `-text` variant instead
+   * (e.g. `text-primary-text` rather than `text-primary`). */
+  --color-primary-text: hsl(211 45% 65%); /* 5.38:1 on sunken, 4.50:1 on popover */
+  --color-accent-text: hsl(18 55% 62%); /* 5.77:1 on accent-muted, 6.01:1 on popover */
+  --color-destructive-text: hsl(356 55% 70%); /* 7.04:1 on sunken, 4.63:1 on popover */
+  --color-success-text: hsl(152 38% 55%); /* 7.43:1 on sunken, 4.88:1 on popover */
+  --color-warning-text: hsl(38 80% 65%); /* 11.78:1 on sunken, 6.45:1 on popover */
+  --color-info-text: hsl(202 55% 62%); /* 7.42:1 on sunken, 4.64:1 on popover */
+
   /* ---- Functional — each lightened and desaturated for dark ---- */
 
   --color-destructive: hsl(356 55% 48%);

package/dist/theme.js

@@ -1,171 +1,3 @@
-import { computed, onScopeDispose, ref, watch } from "vue";
-//#region src/lib/theme.ts
-/**
-* Theme switching for Loom.
-*
-* The single source of truth is the `data-theme` attribute on `<html>`.
-* This composable reads and writes it, persists the preference to
-* `localStorage`, and resolves `"system"` mode from the OS preference.
-*
-* SSR-safe: every DOM access is guarded. On the server, `theme` returns
-* the persisted or default preference, `resolvedTheme` resolves `"system"`
-* to `"light"` (the only safe default without a DOM), and the setter and
-* toggler are no-ops.
-*
-* Flash prevention: `themeScript` is a string of inline JavaScript that
-* reads `localStorage` and sets `data-theme` before the first paint.
-* Consumers rendering SSR inject it into `<head>`:
-*
-*   <script>${themeScript}<\/script>
-*/
-var STORAGE_KEY = "loom:theme";
-var DATA_ATTR = "data-theme";
-var MEDIA_QUERY = "(prefers-color-scheme: dark)";
-/** Default preference when nothing is stored and no OS signal exists. */
-var DEFAULT_PREFERENCE = "system";
-/**
-* Reactive shared state, lazily initialised on the first `useTheme()` call
-* and torn down with the effect scope that owns it. Multiple components
-* calling `useTheme()` in the same app share the same refs and the same
-* `matchMedia` listener.
-*/
-var sharedState = null;
-/**
-* Reset the shared state. Intended for test isolation only — a real app
-* never needs this because the state lives for the app's lifetime.
-*/
-function _resetThemeState() {
-	if (sharedState?.mediaQuery && sharedState.listener) sharedState.mediaQuery.removeEventListener("change", sharedState.listener);
-	sharedState = null;
-}
-function getSharedState() {
-	if (sharedState) {
-		sharedState.scopeCount++;
-		return sharedState;
-	}
-	let stored = DEFAULT_PREFERENCE;
-	try {
-		const raw = localStorage.getItem(STORAGE_KEY);
-		if (raw === "light" || raw === "dark" || raw === "system") stored = raw;
-	} catch {}
-	applyToDOM(resolveTheme(stored, getSystemIsDark()));
-	const preference = ref(stored);
-	const systemIsDark = ref(getSystemIsDark());
-	let mediaQuery = null;
-	let listener = null;
-	try {
-		mediaQuery = window.matchMedia(MEDIA_QUERY);
-		listener = (e) => {
-			systemIsDark.value = e.matches;
-		};
-		mediaQuery.addEventListener("change", listener);
-	} catch {}
-	sharedState = {
-		preference,
-		systemIsDark,
-		mediaQuery,
-		listener,
-		scopeCount: 1
-	};
-	return sharedState;
-}
-function releaseSharedState() {
-	if (!sharedState) return;
-	sharedState.scopeCount--;
-	if (sharedState.scopeCount > 0) return;
-	if (sharedState.mediaQuery && sharedState.listener) sharedState.mediaQuery.removeEventListener("change", sharedState.listener);
-	sharedState = null;
-}
-function getSystemIsDark() {
-	try {
-		return window.matchMedia(MEDIA_QUERY).matches;
-	} catch {
-		return false;
-	}
-}
-function resolveTheme(pref, systemDark) {
-	return pref === "system" ? systemDark ? "dark" : "light" : pref;
-}
-function applyToDOM(theme) {
-	try {
-		document.documentElement.setAttribute(DATA_ATTR, theme);
-	} catch {}
-}
-function persist(preference) {
-	try {
-		localStorage.setItem(STORAGE_KEY, preference);
-	} catch {}
-}
-/**
-* Read and control the active Loom theme.
-*
-* @example
-* ```vue
-* <script setup>
-* import { useTheme } from "@ecoma-io/loom/theme"
-* const { theme, resolvedTheme, setTheme, toggleTheme } = useTheme()
-* <\/script>
-*
-* <template>
-*   <button @click="toggleTheme">
-*     {{ resolvedTheme === "dark" ? "☀️" : "🌙" }}
-*   </button>
-* </template>
-* ```
-*/
-function useTheme() {
-	const state = getSharedState();
-	onScopeDispose(releaseSharedState);
-	/** The user's preference — `"system"` defers to the OS. */
-	const theme = computed({
-		get: () => state.preference.value,
-		set: (value) => {
-			state.preference.value = value;
-		}
-	});
-	/** The actual active theme, with `"system"` resolved to `"light"` or `"dark"`. */
-	const resolvedTheme = computed(() => resolveTheme(state.preference.value, state.systemIsDark.value));
-	watch([() => state.preference.value, () => state.systemIsDark.value], () => {
-		applyToDOM(resolvedTheme.value);
-		persist(state.preference.value);
-	});
-	/** Set the theme preference explicitly. */
-	function setTheme(preference) {
-		state.preference.value = preference;
-	}
-	/** Toggle between light and dark. System preference stays system. */
-	function toggleTheme() {
-		if (state.preference.value === "system") state.preference.value = resolvedTheme.value === "dark" ? "light" : "dark";
-		else state.preference.value = state.preference.value === "dark" ? "light" : "dark";
-	}
-	return {
-		theme,
-		resolvedTheme,
-		setTheme,
-		toggleTheme
-	};
-}
-/**
-* Inline script to prevent flash-of-wrong-theme on SSR pages.
-*
-* Paste it into `<head>` before any stylesheet links:
-*
-* ```html
-* <script><%= themeScript %><\/script>
-* ```
-*
-* It reads `localStorage` and sets `data-theme` on `<html>` synchronously,
-* before the browser paints, so the first frame is already in the right
-* theme. When no preference is stored, it follows the OS preference.
-*
-* The script is deliberately tiny and has no dependencies.
-*/
-var themeScript = `(() => {
-  const t = localStorage.getItem("${STORAGE_KEY}");
-  const d = window.matchMedia("${MEDIA_QUERY}").matches;
-  document.documentElement.setAttribute("${DATA_ATTR}", (t === "dark" || (!t && d)) ? "dark" : "light");
-})()`;
-//#endregion
-export { _resetThemeState, themeScript, useTheme };
-
-//# sourceMappingURL=theme.js.map
+import { themeScript, useTheme } from "./packages/core/src/theme.js";
+import "./packages/core/src/index.js";
+export { themeScript, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecoma-io/loom",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Opinionated UI system and composition library for cross-platform web applications.",
   "keywords": [
     "design-system",
@@ -43,15 +43,15 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/packages/loom/src/index.d.ts",
       "default": "./dist/index.js"
     },
     "./a11y": {
-      "types": "./dist/a11y.d.ts",
+      "types": "./dist/packages/loom/src/a11y.d.ts",
       "default": "./dist/a11y.js"
     },
     "./theme": {
-      "types": "./dist/lib/theme.d.ts",
+      "types": "./dist/packages/loom/src/theme.d.ts",
       "default": "./dist/theme.js"
     },
     "./styles/global.css": "./dist/styles/global.css",
@@ -71,23 +71,32 @@
     "prepare": "lefthook install",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
-    "lint": "eslint . --cache --cache-strategy content --cache-location node_modules/.cache/eslint --max-warnings 0 && node tools/check-component-artifacts.ts",
-    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --cache --cache-strategy content --cache-location node_modules/.cache/eslint --max-warnings 0 && node tools/check-component-artifacts.ts && node --experimental-strip-types tools/check-architecture.ts && pnpm lattice:check && pnpm check-skills",
+    "lattice:check": "lattice check",
+    "lattice:mutations": "node --experimental-strip-types tools/check-lattice-mutations.ts",
+    "sync-skills": "node --experimental-strip-types tools/sync-skills.ts",
+    "check-skills": "node --experimental-strip-types tools/check-skills.ts",
+    "typecheck": "vue-tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/typecheck.tsbuildinfo",
     "test": "vitest run",
+    "test:full": "vitest run",
     "test:watch": "vitest",
     "e2e": "playwright test",
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "e2e:full": "PW_PROFILE=full playwright test",
+    "build": "vite build && vue-tsc -p tsconfig.build.json && node --experimental-strip-types tools/rewrite-declarations.ts",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:stage": "node tools/stage-docs.ts",
     "docs:check-route": "node tools/stage-docs.ts --check",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "moon": "MOON_CONCURRENCY=${MOON_CONCURRENCY:-4} exec moon"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
+    "@ecoma-io/lattice": "0.11.1",
     "@eslint/js": "^10.0.1",
+    "@moonrepo/cli": "^2.4.6",
     "@playwright/test": "^1.62.1",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.1.2",

package/dist/a11y.d.ts

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

package/dist/a11y.d.ts.map

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

package/dist/blocks/AppHeader/AppHeader.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"AppHeader.js","names":[],"sources":["../../../src/blocks/AppHeader/AppHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * AppHeader — the web app's TOP BAR: the shell-level strip that stays on\n * screen above every surface, distinct from two components it is easy to\n * confuse with:\n *\n * - **`PageHeader`** — a surface's own pinned title band, sitting *inside*\n *   the content area this bar sits above.\n * - **`TitleBar`** — the desktop window's native chrome (drag region, window\n *   controls). This bar is browser content, not window furniture.\n *\n * Layout is three regions, so callers never hand-tune widths: brand (left) ·\n * optional search · a trailing cluster for 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.map

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