@ecoma-io/loom 0.5.0 → 0.6.0

package/dist/patterns/loading-state/src/LoadingState.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import Skeleton_default from "../../../primitives/skeleton/src/Skeleton.js";
+import "../../../primitives/skeleton/src/index.js";
+import Spinner_default from "../../../primitives/spinner/src/Spinner.js";
+import "../../../primitives/spinner/src/index.js";
+import { createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/patterns/loading-state/src/LoadingState.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex flex-col items-center justify-center gap-3 px-6 py-10 sm:py-14"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "text-small text-muted-foreground"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "flex flex-col gap-3 px-6 py-10 sm:py-14"
+};
+var LoadingState_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "LoadingState",
+	props: {
+		label: {},
+		mode: { default: "spinner" }
+	},
+	setup(__props) {
+		/**
+		* LoadingState — the shape of "not yet known": a Spinner for short waits or a
+		* column of skeleton lines for content-shaped waits. This replaces the "flash
+		* of EmptyState" antipattern — never show EmptyState before the real result is
+		* known, because an empty state that flickers and disappears is a short-lived
+		* lie.
+		*
+		* Two modes controlled by `mode`:
+		* - `spinner` (default): centred Spinner with an optional label. Good for
+		*   indeterminate waits where the host does not know the content shape.
+		* - `skeleton`: a column of skeleton lines that approximate the content the
+		*   host is loading. The default lines are three bars of varying width — enough
+		*   to suggest paragraph-shaped content without the host having to compose
+		*   anything. Hosts that know their own shape provide a default slot and render
+		*   whatever Skeleton arrangement matches their real layout.
+		*
+		* The Spinner carries its own accessible label (`aria-label` on the primitive)
+		* so this pattern does not add a redundant one. The skeleton lines are purely
+		* decorative (`aria-hidden` on each Skeleton) — the host's real content will
+		* replace them.
+		*/
+		return (_ctx, _cache) => {
+			return __props.mode === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Spinner_default), { size: "lg" }), __props.label ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, () => [
+				createVNode(unref(Skeleton_default), { class: "h-4 w-full" }),
+				createVNode(unref(Skeleton_default), { class: "h-4 w-3/4" }),
+				createVNode(unref(Skeleton_default), { class: "h-4 w-5/6" })
+			])]));
+		};
+	}
+});
+//#endregion
+export { LoadingState_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=LoadingState.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/loading-state/src/LoadingState.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/loading-state/src/LoadingState.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * LoadingState — the shape of \"not yet known\": a Spinner for short waits or a\n * column of skeleton lines for content-shaped waits. This replaces the \"flash\n * of EmptyState\" antipattern — never show EmptyState before the real result is\n * known, because an empty state that flickers and disappears is a short-lived\n * lie.\n *\n * Two modes controlled by `mode`:\n * - `spinner` (default): centred Spinner with an optional label. Good for\n *   indeterminate waits where the host does not know the content shape.\n * - `skeleton`: a column of skeleton lines that approximate the content the\n *   host is loading. The default lines are three bars of varying width — enough\n *   to suggest paragraph-shaped content without the host having to compose\n *   anything. Hosts that know their own shape provide a default slot and render\n *   whatever Skeleton arrangement matches their real layout.\n *\n * The Spinner carries its own accessible label (`aria-label` on the primitive)\n * so this pattern does not add a redundant one. The skeleton lines are purely\n * decorative (`aria-hidden` on each Skeleton) — the host's real content will\n * replace them.\n */\nimport Spinner from \"@ecoma-io/loom-spinner\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\n\nwithDefaults(\n  defineProps<{\n    /** Shown below the spinner in spinner mode. Omit for a spinner-only wait. */\n    label?: string;\n    /** `spinner` for short indeterminate waits; `skeleton` for content-shaped waits. */\n    mode?: \"spinner\" | \"skeleton\";\n  }>(),\n  { mode: \"spinner\" },\n);\n</script>\n\n<template>\n  <div\n    v-if=\"mode === 'spinner'\"\n    class=\"flex flex-col items-center justify-center gap-3 px-6 py-10 sm:py-14\"\n  >\n    <Spinner size=\"lg\" />\n    <p v-if=\"label\" class=\"text-small text-muted-foreground\">{{ label }}</p>\n  </div>\n  <div v-else class=\"flex flex-col gap-3 px-6 py-10 sm:py-14\">\n    <slot>\n      <!-- Default skeleton lines approximate paragraph-shaped content without\n           requiring the host to compose anything. Hosts that know their own\n           shape slot their own Skeleton arrangement instead. -->\n      <Skeleton class=\"h-4 w-full\" />\n      <Skeleton class=\"h-4 w-3/4\" />\n      <Skeleton class=\"h-4 w-5/6\" />\n    </slot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCU,OAAA,QAAA,SAAI,aADZ,UAAA,GAAA,mBAMM,OANN,YAMM,CAFJ,YAAqB,MAAA,eAAA,GAAA,EAAZ,MAAK,KAAI,CAAA,GACT,QAAA,SAAT,UAAA,GAAA,mBAAwE,KAAxE,YAAwE,gBAAZ,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,MAEnE,UAAA,GAAA,mBASM,OATN,YASM,CARJ,WAOO,KAAA,QAAA,WAAA,CAAA,SAAA;IAHL,YAA+B,MAAA,gBAAA,GAAA,EAArB,OAAM,aAAY,CAAA;IAC5B,YAA8B,MAAA,gBAAA,GAAA,EAApB,OAAM,YAAW,CAAA;IAC3B,YAA8B,MAAA,gBAAA,GAAA,EAApB,OAAM,YAAW,CAAA"}

package/dist/patterns/metric-card/src/MetricCard.js

@@ -0,0 +1,7 @@
+import MetricCard_vue_vue_type_script_setup_true_lang_default from "./MetricCard.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/metric-card/src/MetricCard.vue
+var MetricCard_default = MetricCard_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { MetricCard_default as default };
+
+//# sourceMappingURL=MetricCard.js.map

package/dist/patterns/metric-card/src/MetricCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../packages/patterns/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this pattern pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. Optional only\n   *  while `loading`. */\n  value?: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n  /** Context line under the value row — a period, a comparison base. */\n  description?: string;\n  /**\n   * Renders the label and value as Skeleton placeholders sized to the real\n   * layout, so the card keeps its height and does not reflow when data\n   * lands.\n   */\n  loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n  if (!props.loading && props.value === undefined) {\n    console.warn(\n      \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n    );\n  }\n});\n</script>\n\n<template>\n  <div :aria-busy=\"loading || undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- Loading keeps the card's height by sizing each placeholder to the\n         row it stands in for — a single generic bar would let the value\n         land with a jolt. aria-hidden pairs with the parent's own\n         aria-busy below. -->\n    <template v-if=\"loading\">\n      <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n      <div class=\"flex items-baseline gap-1.5\">\n        <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n      </div>\n    </template>\n    <template v-else>\n      <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n      <div class=\"flex items-baseline gap-1.5\">\n        <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n           tracking-tight`: the named rung is near-parity with that stack\n           (1.5rem, weight 600) by design, and composing it here meant the KPI\n           drifted silently if the scale ever moved. The two real deltas are\n           deliberate — letter-spacing slackens from tight's −0.025em to the\n           heading rung's −0.01em, and the line-height comes down to 1.2 —\n           both invisible on a single baseline row like this one. -->\n        <span class=\"text-heading text-foreground\">\n          {{ value }}\n        </span>\n        <span\n          v-if=\"trend\"\n          :class=\"\n            cn('inline-flex items-center gap-0.5 text-small font-medium', {\n              'text-success-text': trend === 'up',\n              'text-destructive-text': trend === 'down',\n              'text-muted-foreground': trend === 'flat',\n            })\n          \"\n        >\n          <!-- Up arrow: a single upward stroke with a chevron head. -->\n          <svg\n            v-if=\"trend === 'up'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 2v8M3 5l3-3 3 3\" />\n          </svg>\n          <!-- Down arrow: a single downward stroke with a chevron head. -->\n          <svg\n            v-else-if=\"trend === 'down'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 10V2M3 7l3 3 3-3\" />\n          </svg>\n          <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n          <span v-else aria-hidden=\"true\">&mdash;</span>\n          <span v-if=\"trendValue\">{{ trendValue }}</span>\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import Skeleton_default from "../../../primitives/skeleton/src/Skeleton.js";
+import "../../../primitives/skeleton/src/index.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, watchEffect } from "vue";
+//#region packages/patterns/metric-card/src/MetricCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-busy"];
+var _hoisted_2 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4"
+};
+var _hoisted_3 = { class: "flex items-baseline gap-1.5" };
+var _hoisted_4 = { class: "text-small text-muted-foreground" };
+var _hoisted_5 = { class: "flex items-baseline gap-1.5" };
+var _hoisted_6 = { class: "text-heading text-foreground" };
+var _hoisted_7 = {
+	key: 0,
+	class: "inline h-3 w-3",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = {
+	key: 1,
+	class: "inline h-3 w-3",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"aria-hidden": "true"
+};
+var _hoisted_9 = {
+	key: 2,
+	"aria-hidden": "true"
+};
+var _hoisted_10 = { key: 3 };
+var _hoisted_11 = {
+	key: 0,
+	class: "mt-1 text-small text-muted-foreground"
+};
+var MetricCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "MetricCard",
+	props: {
+		value: {},
+		label: {},
+		trend: {},
+		trendValue: {},
+		description: {},
+		loading: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		watchEffect(() => {
+			if (!props.loading && props.value === void 0) console.warn("[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"aria-busy": __props.loading || void 0,
+				class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4"))
+			}, [_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true), __props.loading ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "mb-2 h-3 w-20"
+			}), createElementVNode("div", _hoisted_3, [createVNode(unref(Skeleton_default), {
+				variant: "text",
+				class: "h-7 w-24"
+			})])], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+				createElementVNode("p", _hoisted_4, toDisplayString(__props.label), 1),
+				createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(__props.value), 1), __props.trend ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(unref(cn)("inline-flex items-center gap-0.5 text-small font-medium", {
+						"text-success-text": __props.trend === "up",
+						"text-destructive-text": __props.trend === "down",
+						"text-muted-foreground": __props.trend === "flat"
+					}))
+				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_8, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_9, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)]),
+				__props.description ? (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+			], 64))], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { MetricCard_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=MetricCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/metric-card/src/MetricCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../packages/patterns/metric-card/src/MetricCard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MetricCard — one KPI on a dashboard: a compact surface carrying a metric\n * value, its label, and an optional trend arrow. The shape is fixed (icon →\n * label → value + trend) because a hand-rolled metric row drifts from call\n * site to call site — the icon above the label here, the trend on a second\n * line there — and this pattern pins one layout so the row scans left-to-right.\n *\n * The trend is always inline with the value, never a separate line. A trend\n * on its own row reads as a second metric; sharing the value line reads as\n * context for that metric, which is what it is. The arrows are inline SVGs\n * (12px) rather than an icon-library dependency: a trend indicator is a\n * single directional glyph, and pulling in an icon package for three paths\n * is weight the host did not ask for.\n *\n * Colour encodes direction but is never the only signal: the arrow shape\n * distinguishes up from down even without hue, and \"flat\" is an em dash\n * rather than a horizontal arrow that could be mistaken for a minus sign or\n * a separator. `text-success-text` / `text-destructive-text` / `text-muted-foreground`\n * are the semantic tokens rather than fixed greens and reds, so the card\n * adapts to whatever the theme maps those to.\n */\nexport type MetricCardTrend = \"up\" | \"down\" | \"flat\";\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from \"vue\";\nimport Skeleton from \"@ecoma-io/loom-skeleton\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\nconst props = defineProps<{\n  /** The metric value — a formatted string or number the host has already\n   *  localised (e.g. \"1,234\", \"98.5%\", \"$42k\"). Raw numbers are not\n   *  formatted by the card; the host owns formatting so the same value\n   *  can be \"$42k\" in one place and \"42,000\" in another. Optional only\n   *  while `loading`. */\n  value?: string | number;\n  /** What the metric measures — always shown. */\n  label: string;\n  /** Direction of change. When absent, no trend indicator is rendered. */\n  trend?: MetricCardTrend;\n  /** The trend magnitude (e.g. \"+12.5%\", \"-3.2%\"). Shown only when `trend`\n   *  is also provided; a magnitude with no direction has no meaning. */\n  trendValue?: string;\n  /** Context line under the value row — a period, a comparison base. */\n  description?: string;\n  /**\n   * Renders the label and value as Skeleton placeholders sized to the real\n   * layout, so the card keeps its height and does not reflow when data\n   * lands.\n   */\n  loading?: boolean;\n}>();\n\n// `value` went optional for the loading state; this keeps a forgotten value\n// from landing as an empty heading once data arrives.\nwatchEffect(() => {\n  if (!props.loading && props.value === undefined) {\n    console.warn(\n      \"[MetricCard] no `value` given and `loading` is false — the card renders an empty metric.\",\n    );\n  }\n});\n</script>\n\n<template>\n  <div :aria-busy=\"loading || undefined\" :class=\"cn('rounded-lg border border-border bg-card p-4')\">\n    <!-- Decorative icon — hidden from assistive tech because the label and\n         value already carry the metric's meaning. -->\n    <div\n      v-if=\"$slots.icon\"\n      aria-hidden=\"true\"\n      class=\"mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4\"\n    >\n      <slot name=\"icon\" />\n    </div>\n    <!-- Loading keeps the card's height by sizing each placeholder to the\n         row it stands in for — a single generic bar would let the value\n         land with a jolt. aria-hidden pairs with the parent's own\n         aria-busy below. -->\n    <template v-if=\"loading\">\n      <Skeleton variant=\"text\" class=\"mb-2 h-3 w-20\" />\n      <div class=\"flex items-baseline gap-1.5\">\n        <Skeleton variant=\"text\" class=\"h-7 w-24\" />\n      </div>\n    </template>\n    <template v-else>\n      <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n      <div class=\"flex items-baseline gap-1.5\">\n        <!-- `text-heading`, not a hand-assembled `text-2xl font-semibold\n           tracking-tight`: the named rung is near-parity with that stack\n           (1.5rem, weight 600) by design, and composing it here meant the KPI\n           drifted silently if the scale ever moved. The two real deltas are\n           deliberate — letter-spacing slackens from tight's −0.025em to the\n           heading rung's −0.01em, and the line-height comes down to 1.2 —\n           both invisible on a single baseline row like this one. -->\n        <span class=\"text-heading text-foreground\">\n          {{ value }}\n        </span>\n        <span\n          v-if=\"trend\"\n          :class=\"\n            cn('inline-flex items-center gap-0.5 text-small font-medium', {\n              'text-success-text': trend === 'up',\n              'text-destructive-text': trend === 'down',\n              'text-muted-foreground': trend === 'flat',\n            })\n          \"\n        >\n          <!-- Up arrow: a single upward stroke with a chevron head. -->\n          <svg\n            v-if=\"trend === 'up'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 2v8M3 5l3-3 3 3\" />\n          </svg>\n          <!-- Down arrow: a single downward stroke with a chevron head. -->\n          <svg\n            v-else-if=\"trend === 'down'\"\n            class=\"inline h-3 w-3\"\n            viewBox=\"0 0 12 12\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 10V2M3 7l3 3 3-3\" />\n          </svg>\n          <!-- Flat: an em dash rather than a horizontal arrow — a horizontal\n             arrow at this size reads as a minus sign or a separator. -->\n          <span v-else aria-hidden=\"true\">&mdash;</span>\n          <span v-if=\"trendValue\">{{ trendValue }}</span>\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-1 text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EA0Bd,kBAAkB;GAChB,IAAI,CAAC,MAAM,WAAW,MAAM,UAAU,KAAA,GACpC,QAAQ,KACN,0FACF;EAEJ,CAAC;;GAIC,OAAA,UAAA,GAAA,mBA6EM,OAAA;IA7EA,aAAW,QAAA,WAAW,KAAA;IAAY,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA;GAIvCA,GAAAA,CAAAA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAMN,QAAA,WAAhB,UAAA,GAAA,mBAKW,UAAA,EAAA,KAAA,EAAA,GAAA,CAJT,YAAiD,MAAA,gBAAA,GAAA;IAAvC,SAAQ;IAAO,OAAM;GAC/B,CAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,YAA4C,MAAA,gBAAA,GAAA;IAAlC,SAAQ;IAAO,OAAM;GAGnC,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,MAAA,UAAA,GAAA,mBAwDW,UAAA,EAAA,KAAA,EAAA,GAAA;IAvDT,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,mBAkDM,OAlDN,YAkDM,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,2DAAA;MAAiG,qBAAA,QAAA,UAAK;MAAkD,yBAAA,QAAA,UAAK;MAAoD,yBAAA,QAAA,UAAK;;IAUrO,GAAA,CAAA,QAAA,UAAK,QADb,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAA+B,QAAA,EAAzB,GAAE,qBAAoB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,KAIjB,QAAA,UAAK,UADlB,UAAA,GAAA,mBAUM,OAVN,YAUM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CADJ,mBAAgC,QAAA,EAA1B,GAAE,sBAAqB,GAAA,MAAA,EAAA,CAAA,EAAA,CAAA,MAI/B,UAAA,GAAA,mBAA8C,QAA9C,YAAgC,GAAO,IAC3B,QAAA,cAAZ,UAAA,GAAA,mBAA+C,QAAA,aAAA,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAGhC,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,aAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/patterns/page-header/src/PageHeader.js

@@ -0,0 +1,7 @@
+import PageHeader_vue_vue_type_script_setup_true_lang_default from "./PageHeader.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/page-header/src/PageHeader.vue
+var PageHeader_default = PageHeader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PageHeader_default as default };
+
+//# sourceMappingURL=PageHeader.js.map

package/dist/patterns/page-header/src/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","names":[],"sources":["../../../../packages/patterns/page-header/src/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * PageHeader — the band that turns a scrolling document into a workspace\n * surface: it pins to the top of the scroll container, carries the\n * surface's name, its live count and one line of orientation, and owns the\n * surface's primary actions.\n *\n * Two things it deliberately does:\n *\n * - **Pinned, and separated by a hairline — never a shadow.** It sits on\n *   `bg-background`, the same plane as the work area rather than a sunken\n *   navigation plane, because this is the surface's own header, not chrome\n *   that recedes. Rows scroll *under* it, so the plane is translucent and\n *   blurred; the opaque `bg-background` is declared first and remains the\n *   fallback wherever `backdrop-filter` is unsupported.\n * - **The count is a number, so it is `tabular`** — a count that changes as\n *   items resolve must not shift the title beside it. It is deliberately\n *   NOT a Badge: a badge is a status chip, and \"how many rows are below\" is\n *   a fact, not a status. Wrap it in a Badge at the call site on the rare\n *   surface where the count itself is the alarm.\n *\n * Presentational only: the host owns wording, the actions, and the scroll\n * container this sticks inside (`position: sticky` resolves against the\n * nearest scrolling ancestor — a header that will not stick is almost\n * always an ancestor with `overflow: hidden`, not this component).\n *\n * Two width behaviors. Gutters step up (`sm`, then `3xl`) rather than\n * holding one value, so the band is not padded like a phone on a 1920px\n * canvas. And the description is capped at `max-w-prose` instead of\n * tracking the viewport — a one-line orientation stretched across an\n * ultra-wide monitor is unreadable; the width that opens up belongs to the\n * actions and the work below, not to a longer measure. The title itself is\n * uncapped: it truncates, so it can only ever occupy one line.\n */\ndefineProps<{\n  title: string;\n  /** One line of orientation under the title. Say what the surface is FOR, not what it is called again. */\n  description?: string;\n  /** Live row count shown beside the title. Omit rather than pass 0 — \"0\" beside a title reads as a broken fetch; the empty state carries that message. */\n  count?: number;\n}>();\n</script>\n\n<template>\n  <header\n    class=\"sticky top-0 z-20 flex flex-wrap items-start gap-x-6 gap-y-3 border-b border-border bg-background px-4 py-3 backdrop-blur-md supports-[backdrop-filter]:bg-background/80 sm:px-6 sm:py-4 3xl:px-8\"\n  >\n    <!-- `basis-56` is the wrap threshold, not a width: flex line-breaking reads\n         the basis, so the actions drop to their own row once the title cannot\n         hold ~14rem — instead of staying crammed alongside a title truncated to\n         a few glyphs. `min-w-0` still lets the block shrink under that on the\n         narrowest screens, and keeps the h1's truncate working. -->\n    <div class=\"min-w-0 flex-1 basis-56\">\n      <div class=\"flex items-baseline gap-2\">\n        <h1 class=\"text-heading min-w-0 truncate text-foreground\">{{ title }}</h1>\n        <span v-if=\"count !== undefined\" class=\"tabular shrink-0 text-small text-muted-foreground\">\n          {{ count }}\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-0.5 max-w-prose text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </div>\n    <!-- `ml-auto`, not the header's `justify-between`: once the actions wrap to\n         their own line the two are no longer distributed, and justify-between\n         would drop them flush LEFT under the title. -->\n    <div v-if=\"$slots.actions\" class=\"ml-auto flex shrink-0 items-center gap-2\">\n      <!-- @slot The surface's primary actions, trailing the title. Convention: at most one `variant=\"primary\"` Button, the rest `outline`/`subtle`. -->\n      <slot name=\"actions\" />\n    </div>\n  </header>\n</template>\n"],"mappings":""}

package/dist/patterns/page-header/src/PageHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,68 @@
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
+//#region packages/patterns/page-header/src/PageHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "sticky top-0 z-20 flex flex-wrap items-start gap-x-6 gap-y-3 border-b border-border bg-background px-4 py-3 backdrop-blur-md supports-[backdrop-filter]:bg-background/80 sm:px-6 sm:py-4 3xl:px-8" };
+var _hoisted_2 = { class: "min-w-0 flex-1 basis-56" };
+var _hoisted_3 = { class: "flex items-baseline gap-2" };
+var _hoisted_4 = { class: "text-heading min-w-0 truncate text-foreground" };
+var _hoisted_5 = {
+	key: 0,
+	class: "tabular shrink-0 text-small text-muted-foreground"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "mt-0.5 max-w-prose text-small text-muted-foreground"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "ml-auto flex shrink-0 items-center gap-2"
+};
+var PageHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "PageHeader",
+	props: {
+		title: {},
+		description: {},
+		count: {}
+	},
+	setup(__props) {
+		/**
+		* PageHeader — the band that turns a scrolling document into a workspace
+		* surface: it pins to the top of the scroll container, carries the
+		* surface's name, its live count and one line of orientation, and owns the
+		* surface's primary actions.
+		*
+		* Two things it deliberately does:
+		*
+		* - **Pinned, and separated by a hairline — never a shadow.** It sits on
+		*   `bg-background`, the same plane as the work area rather than a sunken
+		*   navigation plane, because this is the surface's own header, not chrome
+		*   that recedes. Rows scroll *under* it, so the plane is translucent and
+		*   blurred; the opaque `bg-background` is declared first and remains the
+		*   fallback wherever `backdrop-filter` is unsupported.
+		* - **The count is a number, so it is `tabular`** — a count that changes as
+		*   items resolve must not shift the title beside it. It is deliberately
+		*   NOT a Badge: a badge is a status chip, and "how many rows are below" is
+		*   a fact, not a status. Wrap it in a Badge at the call site on the rare
+		*   surface where the count itself is the alarm.
+		*
+		* Presentational only: the host owns wording, the actions, and the scroll
+		* container this sticks inside (`position: sticky` resolves against the
+		* nearest scrolling ancestor — a header that will not stick is almost
+		* always an ancestor with `overflow: hidden`, not this component).
+		*
+		* Two width behaviors. Gutters step up (`sm`, then `3xl`) rather than
+		* holding one value, so the band is not padded like a phone on a 1920px
+		* canvas. And the description is capped at `max-w-prose` instead of
+		* tracking the viewport — a one-line orientation stretched across an
+		* ultra-wide monitor is unreadable; the width that opens up belongs to the
+		* actions and the work below, not to a longer measure. The title itself is
+		* uncapped: it truncates, so it can only ever occupy one line.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("h1", _hoisted_4, toDisplayString(__props.title), 1), __props.count !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.count), 1)) : createCommentVNode("", true)]), __props.description ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.description), 1)) : createCommentVNode("", true)]), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+export { PageHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=PageHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/page-header/src/PageHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../packages/patterns/page-header/src/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * PageHeader — the band that turns a scrolling document into a workspace\n * surface: it pins to the top of the scroll container, carries the\n * surface's name, its live count and one line of orientation, and owns the\n * surface's primary actions.\n *\n * Two things it deliberately does:\n *\n * - **Pinned, and separated by a hairline — never a shadow.** It sits on\n *   `bg-background`, the same plane as the work area rather than a sunken\n *   navigation plane, because this is the surface's own header, not chrome\n *   that recedes. Rows scroll *under* it, so the plane is translucent and\n *   blurred; the opaque `bg-background` is declared first and remains the\n *   fallback wherever `backdrop-filter` is unsupported.\n * - **The count is a number, so it is `tabular`** — a count that changes as\n *   items resolve must not shift the title beside it. It is deliberately\n *   NOT a Badge: a badge is a status chip, and \"how many rows are below\" is\n *   a fact, not a status. Wrap it in a Badge at the call site on the rare\n *   surface where the count itself is the alarm.\n *\n * Presentational only: the host owns wording, the actions, and the scroll\n * container this sticks inside (`position: sticky` resolves against the\n * nearest scrolling ancestor — a header that will not stick is almost\n * always an ancestor with `overflow: hidden`, not this component).\n *\n * Two width behaviors. Gutters step up (`sm`, then `3xl`) rather than\n * holding one value, so the band is not padded like a phone on a 1920px\n * canvas. And the description is capped at `max-w-prose` instead of\n * tracking the viewport — a one-line orientation stretched across an\n * ultra-wide monitor is unreadable; the width that opens up belongs to the\n * actions and the work below, not to a longer measure. The title itself is\n * uncapped: it truncates, so it can only ever occupy one line.\n */\ndefineProps<{\n  title: string;\n  /** One line of orientation under the title. Say what the surface is FOR, not what it is called again. */\n  description?: string;\n  /** Live row count shown beside the title. Omit rather than pass 0 — \"0\" beside a title reads as a broken fetch; the empty state carries that message. */\n  count?: number;\n}>();\n</script>\n\n<template>\n  <header\n    class=\"sticky top-0 z-20 flex flex-wrap items-start gap-x-6 gap-y-3 border-b border-border bg-background px-4 py-3 backdrop-blur-md supports-[backdrop-filter]:bg-background/80 sm:px-6 sm:py-4 3xl:px-8\"\n  >\n    <!-- `basis-56` is the wrap threshold, not a width: flex line-breaking reads\n         the basis, so the actions drop to their own row once the title cannot\n         hold ~14rem — instead of staying crammed alongside a title truncated to\n         a few glyphs. `min-w-0` still lets the block shrink under that on the\n         narrowest screens, and keeps the h1's truncate working. -->\n    <div class=\"min-w-0 flex-1 basis-56\">\n      <div class=\"flex items-baseline gap-2\">\n        <h1 class=\"text-heading min-w-0 truncate text-foreground\">{{ title }}</h1>\n        <span v-if=\"count !== undefined\" class=\"tabular shrink-0 text-small text-muted-foreground\">\n          {{ count }}\n        </span>\n      </div>\n      <p v-if=\"description\" class=\"mt-0.5 max-w-prose text-small text-muted-foreground\">\n        {{ description }}\n      </p>\n    </div>\n    <!-- `ml-auto`, not the header's `justify-between`: once the actions wrap to\n         their own line the two are no longer distributed, and justify-between\n         would drop them flush LEFT under the title. -->\n    <div v-if=\"$slots.actions\" class=\"ml-auto flex shrink-0 items-center gap-2\">\n      <!-- @slot The surface's primary actions, trailing the title. Convention: at most one `variant=\"primary\"` Button, the rest `outline`/`subtle`. -->\n      <slot name=\"actions\" />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CE,OAAA,UAAA,GAAA,mBA0BS,UA1BT,YA0BS,CAlBP,mBAUM,OAVN,YAUM,CATJ,mBAKM,OALN,YAKM,CAJJ,mBAA0E,MAA1E,YAA0E,gBAAb,QAAA,KAAK,GAAA,CAAA,GACtD,QAAA,UAAU,KAAA,KAAtB,UAAA,GAAA,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAGH,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAMPA,KAAAA,OAAO,WAAlB,UAAA,GAAA,mBAGM,OAHN,YAGM,CADJ,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/patterns/row-actions/src/RowActions.js

@@ -0,0 +1,7 @@
+import RowActions_vue_vue_type_script_setup_true_lang_default from "./RowActions.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/row-actions/src/RowActions.vue
+var RowActions_default = RowActions_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RowActions_default as default };
+
+//# sourceMappingURL=RowActions.js.map

package/dist/patterns/row-actions/src/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","names":[],"sources":["../../../../packages/patterns/row-actions/src/RowActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * RowActions — the actions belonging to one row of a dense list, quiet at\n * rest and revealed on hover or keyboard focus.\n *\n * Why this is a component and not three utility classes copied per view: the\n * reveal carries an accessibility contract that is easy to get wrong in a way\n * nothing fails on.\n *\n * - **Revealed by `opacity`, never by `display`/`v-if`.** A row action hidden\n *   with `hidden` or unmounted until hover leaves the tab order, so a\n *   keyboard-only or screen-reader user simply cannot reach it — and no test\n *   notices, because the pointer path still works.\n * - **`group-focus-within`, not only `group-hover`.** Tabbing into the row\n *   must bring the actions up; otherwise focus lands on something invisible\n *   and the focus ring appears to come from nowhere.\n * - **The actions stay mounted and named.** Each child keeps its own\n *   `aria-label` — the reveal changes what is *seen*, never what exists.\n * - **`pointer-coarse` opts out of the reveal entirely.** A hover reveal has\n *   no trigger on a touch screen: there is no hover state to enter, and the\n *   `focus-within` fallback only fires after a tap has already landed on\n *   something invisible. So on a coarse pointer the actions are simply always\n *   visible — the reveal is a refinement for precise pointers, not a gate on\n *   reaching the actions at all.\n *\n * The reveal rides a 4px inward slide alongside the fade so it reads as the\n * actions arriving rather than a panel blinking on (motion carries cause and\n * effect); both are token-tier and `duration-fast`, and the global\n * reduced-motion rule flattens them together.\n *\n * Requires the row element to carry Tailwind's `group` class; the reveal is\n * scoped to that group so sibling rows stay quiet.\n */\n</script>\n\n<template>\n  <div\n    class=\"flex translate-x-1 items-center gap-1 opacity-0 transition duration-fast ease-out group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 pointer-coarse:translate-x-0 pointer-coarse:opacity-100\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/patterns/row-actions/src/RowActions.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import { createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+//#region packages/patterns/row-actions/src/RowActions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex translate-x-1 items-center gap-1 opacity-0 transition duration-fast ease-out group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 pointer-coarse:translate-x-0 pointer-coarse:opacity-100" };
+var RowActions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "RowActions",
+	setup(__props) {
+		/**
+		* RowActions — the actions belonging to one row of a dense list, quiet at
+		* rest and revealed on hover or keyboard focus.
+		*
+		* Why this is a component and not three utility classes copied per view: the
+		* reveal carries an accessibility contract that is easy to get wrong in a way
+		* nothing fails on.
+		*
+		* - **Revealed by `opacity`, never by `display`/`v-if`.** A row action hidden
+		*   with `hidden` or unmounted until hover leaves the tab order, so a
+		*   keyboard-only or screen-reader user simply cannot reach it — and no test
+		*   notices, because the pointer path still works.
+		* - **`group-focus-within`, not only `group-hover`.** Tabbing into the row
+		*   must bring the actions up; otherwise focus lands on something invisible
+		*   and the focus ring appears to come from nowhere.
+		* - **The actions stay mounted and named.** Each child keeps its own
+		*   `aria-label` — the reveal changes what is *seen*, never what exists.
+		* - **`pointer-coarse` opts out of the reveal entirely.** A hover reveal has
+		*   no trigger on a touch screen: there is no hover state to enter, and the
+		*   `focus-within` fallback only fires after a tap has already landed on
+		*   something invisible. So on a coarse pointer the actions are simply always
+		*   visible — the reveal is a refinement for precise pointers, not a gate on
+		*   reaching the actions at all.
+		*
+		* The reveal rides a 4px inward slide alongside the fade so it reads as the
+		* actions arriving rather than a panel blinking on (motion carries cause and
+		* effect); both are token-tier and `duration-fast`, and the global
+		* reduced-motion rule flattens them together.
+		*
+		* Requires the row element to carry Tailwind's `group` class; the reveal is
+		* scoped to that group so sibling rows stay quiet.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+export { RowActions_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RowActions.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/row-actions/src/RowActions.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/row-actions/src/RowActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * RowActions — the actions belonging to one row of a dense list, quiet at\n * rest and revealed on hover or keyboard focus.\n *\n * Why this is a component and not three utility classes copied per view: the\n * reveal carries an accessibility contract that is easy to get wrong in a way\n * nothing fails on.\n *\n * - **Revealed by `opacity`, never by `display`/`v-if`.** A row action hidden\n *   with `hidden` or unmounted until hover leaves the tab order, so a\n *   keyboard-only or screen-reader user simply cannot reach it — and no test\n *   notices, because the pointer path still works.\n * - **`group-focus-within`, not only `group-hover`.** Tabbing into the row\n *   must bring the actions up; otherwise focus lands on something invisible\n *   and the focus ring appears to come from nowhere.\n * - **The actions stay mounted and named.** Each child keeps its own\n *   `aria-label` — the reveal changes what is *seen*, never what exists.\n * - **`pointer-coarse` opts out of the reveal entirely.** A hover reveal has\n *   no trigger on a touch screen: there is no hover state to enter, and the\n *   `focus-within` fallback only fires after a tap has already landed on\n *   something invisible. So on a coarse pointer the actions are simply always\n *   visible — the reveal is a refinement for precise pointers, not a gate on\n *   reaching the actions at all.\n *\n * The reveal rides a 4px inward slide alongside the fade so it reads as the\n * actions arriving rather than a panel blinking on (motion carries cause and\n * effect); both are token-tier and `duration-fast`, and the global\n * reduced-motion rule flattens them together.\n *\n * Requires the row element to carry Tailwind's `group` class; the reveal is\n * scoped to that group so sibling rows stay quiet.\n */\n</script>\n\n<template>\n  <div\n    class=\"flex translate-x-1 items-center gap-1 opacity-0 transition duration-fast ease-out group-hover:translate-x-0 group-hover:opacity-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 pointer-coarse:translate-x-0 pointer-coarse:opacity-100\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCE,OAAA,UAAA,GAAA,mBAIM,OAJN,YAIM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/patterns/sidebar-nav/src/SidebarNav.js

@@ -0,0 +1,7 @@
+import SidebarNav_vue_vue_type_script_setup_true_lang_default from "./SidebarNav.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/sidebar-nav/src/SidebarNav.vue
+var SidebarNav_default = SidebarNav_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarNav_default as default };
+
+//# sourceMappingURL=SidebarNav.js.map

package/dist/patterns/sidebar-nav/src/SidebarNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.js","names":[],"sources":["../../../../packages/patterns/sidebar-nav/src/SidebarNav.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/** One destination in the sidebar. */\nexport interface SidebarNavItem {\n  /** A Lucide icon component (e.g. `Home` from `@lucide/vue`) — decorative; the label carries the meaning. */\n  icon?: Component;\n  label: string;\n  /** Marks this as the current page — the sole `--primary` accent drawn in the list. */\n  active?: boolean;\n  /** Renders the item as a real `<a>` instead of a `<button>`. The host owns the router/navigation. */\n  href?: string;\n  /** Short count/status shown after the label. Hidden in collapsed mode — folded into its tooltip instead. */\n  badge?: string | number;\n}\n\n/** A labeled group of items; `label` may be omitted for an unlabeled leading group. */\nexport interface SidebarNavSection {\n  label?: string;\n  items: SidebarNavItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport Tooltip from \"@ecoma-io/loom-tooltip\";\nimport Badge from \"@ecoma-io/loom-badge\";\nimport Separator from \"@ecoma-io/loom-separator\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * SidebarNav — the primary NAVIGATION chrome: a `<nav>` landmark of sections\n * and destinations, pinned to the sunken plane (the recessed layer of the\n * shell — sunken < background < card, so work surfaces read as lifted and\n * navigation recedes).\n *\n * The active item carries a flat `--primary` fill and an inset accent bar —\n * a human decides which surface they are on, so this is the primary force\n * alone. It never mixes in `--accent`: this is navigation chrome, not a place\n * reporting a second semantic category.\n *\n * Presentational only: the host owns routing (`href` renders a real anchor)\n * and which item is `active` — this component does not track a current\n * route itself.\n *\n * Collapsed mode drops to icon-only rows: each item still needs an\n * accessible name once its label text is hidden, so it moves to `aria-label`\n * (Tooltip's own contract is `aria-describedby`, never the *only* source of\n * a name) and its Tooltip doubles as the visible hint. Native `<a>`/`<button>`\n * elements are used throughout, so Enter/Space activation and tab order come\n * from the platform, not custom key handling.\n *\n * Collapsed rows are square (`h-9 w-9`) rather than full-width, so the nav\n * centers its own children in that mode. The host is what narrows the rail,\n * and it may narrow it late or not at all — without the centering, a collapsed\n * nav still sitting in an expanded-width container leaves a column of icons\n * hugging the left edge of a wide empty panel. Centering makes the mode read\n * correctly at every container width, and the host's width animation then only\n * has to tighten what already looks right.\n */\nwithDefaults(\n  defineProps<{\n    sections: SidebarNavSection[];\n    /** Icon-only rail: section headings and item labels hide; each item's name moves into a Tooltip. */\n    collapsed?: boolean;\n    /** Accessible name for the `<nav>` landmark — the host owns wording (see `AppHeader`'s same prop). */\n    ariaLabel?: string;\n  }>(),\n  { collapsed: false },\n);\n\nconst emit = defineEmits<{ select: [item: SidebarNavItem] }>();\n\nfunction tooltipContent(item: SidebarNavItem): string {\n  return item.badge !== undefined && item.badge !== null\n    ? `${item.label} · ${item.badge}`\n    : item.label;\n}\n\nfunction itemClass(item: SidebarNavItem, collapsed: boolean): string {\n  return cn(\n    \"relative flex items-center gap-2 rounded-md text-left text-sm outline-none\",\n    \"transition-colors duration-fast ease-out\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    collapsed ? \"h-9 w-9 justify-center\" : \"h-9 w-full px-2.5\",\n    item.active\n      ? \"bg-primary/10 font-medium text-primary-text\"\n      : // Hover lifts the row to the raised plane rather than tinting it with\n        // `--subtle`. `--subtle` is the neutral hover fill for surfaces sitting\n        // on `--background` (96% L), where it lands 2% darker and reads. This\n        // nav sits on `--sunken` (93% L) and `--subtle` is 94% — one percent\n        // apart, so the hover state was there in the markup and invisible on\n        // screen. Lifting to `bg-card` is the elevation rhythm's own answer\n        // (sunken < background < card): the row the pointer is on comes\n        // forward.\n        \"text-muted-foreground hover:bg-card hover:text-foreground\",\n  );\n}\n</script>\n\n<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"flex h-full w-full flex-col gap-1 overflow-y-auto overscroll-contain bg-sunken p-2\"\n    :class=\"collapsed && 'items-center'\"\n  >\n    <template v-for=\"(section, sectionIndex) in sections\" :key=\"sectionIndex\">\n      <Separator v-if=\"sectionIndex > 0\" class=\"my-1\" />\n      <p\n        v-if=\"section.label && !collapsed\"\n        class=\"select-none px-2 pb-1 pt-2 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ section.label }}\n      </p>\n      <ul class=\"flex flex-col gap-0.5\">\n        <li v-for=\"(item, itemIndex) in section.items\" :key=\"itemIndex\">\n          <Tooltip v-if=\"collapsed\" :content=\"tooltipContent(item)\" side=\"right\">\n            <template #trigger>\n              <component\n                :is=\"item.href ? 'a' : 'button'\"\n                :type=\"item.href ? undefined : 'button'\"\n                :href=\"item.href\"\n                :aria-current=\"item.active ? 'page' : undefined\"\n                :aria-label=\"item.label\"\n                :class=\"itemClass(item, true)\"\n                @click=\"emit('select', item)\"\n              >\n                <span\n                  v-if=\"item.active\"\n                  aria-hidden=\"true\"\n                  class=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\"\n                />\n                <component :is=\"item.icon\" v-if=\"item.icon\" aria-hidden=\"true\" class=\"shrink-0\" />\n              </component>\n            </template>\n          </Tooltip>\n\n          <component\n            :is=\"item.href ? 'a' : 'button'\"\n            v-else\n            :type=\"item.href ? undefined : 'button'\"\n            :href=\"item.href\"\n            :aria-current=\"item.active ? 'page' : undefined\"\n            :class=\"itemClass(item, false)\"\n            @click=\"emit('select', item)\"\n          >\n            <span\n              v-if=\"item.active\"\n              aria-hidden=\"true\"\n              class=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\"\n            />\n            <component :is=\"item.icon\" v-if=\"item.icon\" aria-hidden=\"true\" class=\"shrink-0\" />\n            <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n            <Badge v-if=\"item.badge !== undefined\" variant=\"neutral\" class=\"shrink-0\">\n              {{ item.badge }}\n            </Badge>\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/patterns/sidebar-nav/src/SidebarNav.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,129 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import Separator_default from "../../../primitives/separator/src/Separator.js";
+import "../../../primitives/separator/src/index.js";
+import Badge_default from "../../../primitives/badge/src/Badge.js";
+import "../../../primitives/badge/src/index.js";
+import Tooltip_default from "../../../primitives/tooltip/src/Tooltip.js";
+import "../../../primitives/tooltip/src/index.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
+//#region packages/patterns/sidebar-nav/src/SidebarNav.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	key: 1,
+	class: "select-none px-2 pb-1 pt-2 text-micro font-medium uppercase tracking-wide text-muted-foreground"
+};
+var _hoisted_3 = { class: "flex flex-col gap-0.5" };
+var _hoisted_4 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary"
+};
+var _hoisted_5 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary"
+};
+var _hoisted_6 = { class: "min-w-0 flex-1 truncate" };
+var SidebarNav_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SidebarNav",
+	props: {
+		sections: {},
+		collapsed: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: {}
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function tooltipContent(item) {
+			return item.badge !== void 0 && item.badge !== null ? `${item.label} · ${item.badge}` : item.label;
+		}
+		function itemClass(item, collapsed) {
+			return cn("relative flex items-center gap-2 rounded-md text-left text-sm outline-none", "transition-colors duration-fast ease-out", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", collapsed ? "h-9 w-9 justify-center" : "h-9 w-full px-2.5", item.active ? "bg-primary/10 font-medium text-primary-text" : "text-muted-foreground hover:bg-card hover:text-foreground");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", {
+				"aria-label": __props.ariaLabel,
+				class: normalizeClass(["flex h-full w-full flex-col gap-1 overflow-y-auto overscroll-contain bg-sunken p-2", __props.collapsed && "items-center"])
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.sections, (section, sectionIndex) => {
+				return openBlock(), createElementBlock(Fragment, { key: sectionIndex }, [
+					sectionIndex > 0 ? (openBlock(), createBlock(unref(Separator_default), {
+						key: 0,
+						class: "my-1"
+					})) : createCommentVNode("", true),
+					section.label && !__props.collapsed ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(section.label), 1)) : createCommentVNode("", true),
+					createElementVNode("ul", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item, itemIndex) => {
+						return openBlock(), createElementBlock("li", { key: itemIndex }, [__props.collapsed ? (openBlock(), createBlock(unref(Tooltip_default), {
+							key: 0,
+							content: tooltipContent(item),
+							side: "right"
+						}, {
+							trigger: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.href ? "a" : "button"), {
+								type: item.href ? void 0 : "button",
+								href: item.href,
+								"aria-current": item.active ? "page" : void 0,
+								"aria-label": item.label,
+								class: normalizeClass(itemClass(item, true)),
+								onClick: ($event) => emit("select", item)
+							}, {
+								default: withCtx(() => [item.active ? (openBlock(), createElementBlock("span", _hoisted_4)) : createCommentVNode("", true), item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+									key: 1,
+									"aria-hidden": "true",
+									class: "shrink-0"
+								})) : createCommentVNode("", true)]),
+								_: 2
+							}, 1032, [
+								"type",
+								"href",
+								"aria-current",
+								"aria-label",
+								"class",
+								"onClick"
+							]))]),
+							_: 2
+						}, 1032, ["content"])) : (openBlock(), createBlock(resolveDynamicComponent(item.href ? "a" : "button"), {
+							key: 1,
+							type: item.href ? void 0 : "button",
+							href: item.href,
+							"aria-current": item.active ? "page" : void 0,
+							class: normalizeClass(itemClass(item, false)),
+							onClick: ($event) => emit("select", item)
+						}, {
+							default: withCtx(() => [
+								item.active ? (openBlock(), createElementBlock("span", _hoisted_5)) : createCommentVNode("", true),
+								item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+									key: 1,
+									"aria-hidden": "true",
+									class: "shrink-0"
+								})) : createCommentVNode("", true),
+								createElementVNode("span", _hoisted_6, toDisplayString(item.label), 1),
+								item.badge !== void 0 ? (openBlock(), createBlock(unref(Badge_default), {
+									key: 2,
+									variant: "neutral",
+									class: "shrink-0"
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.badge), 1)]),
+									_: 2
+								}, 1024)) : createCommentVNode("", true)
+							]),
+							_: 2
+						}, 1032, [
+							"type",
+							"href",
+							"aria-current",
+							"class",
+							"onClick"
+						]))]);
+					}), 128))])
+				], 64);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SidebarNav_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarNav.vue_vue_type_script_setup_true_lang.js.map

package/dist/patterns/sidebar-nav/src/SidebarNav.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNav.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/patterns/sidebar-nav/src/SidebarNav.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Component } from \"vue\";\n\n/** One destination in the sidebar. */\nexport interface SidebarNavItem {\n  /** A Lucide icon component (e.g. `Home` from `@lucide/vue`) — decorative; the label carries the meaning. */\n  icon?: Component;\n  label: string;\n  /** Marks this as the current page — the sole `--primary` accent drawn in the list. */\n  active?: boolean;\n  /** Renders the item as a real `<a>` instead of a `<button>`. The host owns the router/navigation. */\n  href?: string;\n  /** Short count/status shown after the label. Hidden in collapsed mode — folded into its tooltip instead. */\n  badge?: string | number;\n}\n\n/** A labeled group of items; `label` may be omitted for an unlabeled leading group. */\nexport interface SidebarNavSection {\n  label?: string;\n  items: SidebarNavItem[];\n}\n</script>\n\n<script setup lang=\"ts\">\nimport Tooltip from \"@ecoma-io/loom-tooltip\";\nimport Badge from \"@ecoma-io/loom-badge\";\nimport Separator from \"@ecoma-io/loom-separator\";\nimport { cn } from \"@ecoma-io/loom-core\";\n\n/**\n * SidebarNav — the primary NAVIGATION chrome: a `<nav>` landmark of sections\n * and destinations, pinned to the sunken plane (the recessed layer of the\n * shell — sunken < background < card, so work surfaces read as lifted and\n * navigation recedes).\n *\n * The active item carries a flat `--primary` fill and an inset accent bar —\n * a human decides which surface they are on, so this is the primary force\n * alone. It never mixes in `--accent`: this is navigation chrome, not a place\n * reporting a second semantic category.\n *\n * Presentational only: the host owns routing (`href` renders a real anchor)\n * and which item is `active` — this component does not track a current\n * route itself.\n *\n * Collapsed mode drops to icon-only rows: each item still needs an\n * accessible name once its label text is hidden, so it moves to `aria-label`\n * (Tooltip's own contract is `aria-describedby`, never the *only* source of\n * a name) and its Tooltip doubles as the visible hint. Native `<a>`/`<button>`\n * elements are used throughout, so Enter/Space activation and tab order come\n * from the platform, not custom key handling.\n *\n * Collapsed rows are square (`h-9 w-9`) rather than full-width, so the nav\n * centers its own children in that mode. The host is what narrows the rail,\n * and it may narrow it late or not at all — without the centering, a collapsed\n * nav still sitting in an expanded-width container leaves a column of icons\n * hugging the left edge of a wide empty panel. Centering makes the mode read\n * correctly at every container width, and the host's width animation then only\n * has to tighten what already looks right.\n */\nwithDefaults(\n  defineProps<{\n    sections: SidebarNavSection[];\n    /** Icon-only rail: section headings and item labels hide; each item's name moves into a Tooltip. */\n    collapsed?: boolean;\n    /** Accessible name for the `<nav>` landmark — the host owns wording (see `AppHeader`'s same prop). */\n    ariaLabel?: string;\n  }>(),\n  { collapsed: false },\n);\n\nconst emit = defineEmits<{ select: [item: SidebarNavItem] }>();\n\nfunction tooltipContent(item: SidebarNavItem): string {\n  return item.badge !== undefined && item.badge !== null\n    ? `${item.label} · ${item.badge}`\n    : item.label;\n}\n\nfunction itemClass(item: SidebarNavItem, collapsed: boolean): string {\n  return cn(\n    \"relative flex items-center gap-2 rounded-md text-left text-sm outline-none\",\n    \"transition-colors duration-fast ease-out\",\n    \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo\",\n    collapsed ? \"h-9 w-9 justify-center\" : \"h-9 w-full px-2.5\",\n    item.active\n      ? \"bg-primary/10 font-medium text-primary-text\"\n      : // Hover lifts the row to the raised plane rather than tinting it with\n        // `--subtle`. `--subtle` is the neutral hover fill for surfaces sitting\n        // on `--background` (96% L), where it lands 2% darker and reads. This\n        // nav sits on `--sunken` (93% L) and `--subtle` is 94% — one percent\n        // apart, so the hover state was there in the markup and invisible on\n        // screen. Lifting to `bg-card` is the elevation rhythm's own answer\n        // (sunken < background < card): the row the pointer is on comes\n        // forward.\n        \"text-muted-foreground hover:bg-card hover:text-foreground\",\n  );\n}\n</script>\n\n<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"flex h-full w-full flex-col gap-1 overflow-y-auto overscroll-contain bg-sunken p-2\"\n    :class=\"collapsed && 'items-center'\"\n  >\n    <template v-for=\"(section, sectionIndex) in sections\" :key=\"sectionIndex\">\n      <Separator v-if=\"sectionIndex > 0\" class=\"my-1\" />\n      <p\n        v-if=\"section.label && !collapsed\"\n        class=\"select-none px-2 pb-1 pt-2 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n      >\n        {{ section.label }}\n      </p>\n      <ul class=\"flex flex-col gap-0.5\">\n        <li v-for=\"(item, itemIndex) in section.items\" :key=\"itemIndex\">\n          <Tooltip v-if=\"collapsed\" :content=\"tooltipContent(item)\" side=\"right\">\n            <template #trigger>\n              <component\n                :is=\"item.href ? 'a' : 'button'\"\n                :type=\"item.href ? undefined : 'button'\"\n                :href=\"item.href\"\n                :aria-current=\"item.active ? 'page' : undefined\"\n                :aria-label=\"item.label\"\n                :class=\"itemClass(item, true)\"\n                @click=\"emit('select', item)\"\n              >\n                <span\n                  v-if=\"item.active\"\n                  aria-hidden=\"true\"\n                  class=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\"\n                />\n                <component :is=\"item.icon\" v-if=\"item.icon\" aria-hidden=\"true\" class=\"shrink-0\" />\n              </component>\n            </template>\n          </Tooltip>\n\n          <component\n            :is=\"item.href ? 'a' : 'button'\"\n            v-else\n            :type=\"item.href ? undefined : 'button'\"\n            :href=\"item.href\"\n            :aria-current=\"item.active ? 'page' : undefined\"\n            :class=\"itemClass(item, false)\"\n            @click=\"emit('select', item)\"\n          >\n            <span\n              v-if=\"item.active\"\n              aria-hidden=\"true\"\n              class=\"absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary\"\n            />\n            <component :is=\"item.icon\" v-if=\"item.icon\" aria-hidden=\"true\" class=\"shrink-0\" />\n            <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n            <Badge v-if=\"item.badge !== undefined\" variant=\"neutral\" class=\"shrink-0\">\n              {{ item.badge }}\n            </Badge>\n          </component>\n        </li>\n      </ul>\n    </template>\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,OAAO;EAEb,SAAS,eAAe,MAA8B;GACpD,OAAO,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU,OAC9C,GAAG,KAAK,MAAM,KAAK,KAAK,UACxB,KAAK;EACX;EAEA,SAAS,UAAU,MAAsB,WAA4B;GACnE,OAAO,GACL,8EACA,4CACA,+GACA,YAAY,2BAA2B,qBACvC,KAAK,SACD,gDASA,2DACN;EACF;;GAIE,OAAA,UAAA,GAAA,mBA2DM,OAAA;IA1DH,cAAY,QAAA;IACb,OAAK,eAAA,CAAC,sFACE,QAAA,aAAS,cAAA,CAAA;GAEjB,GAAA,EAAA,UAAA,IAAA,GAAA,mBAqDW,UAAA,MAAA,WArDiC,QAAA,WAA1B,SAAS,iBAAY;IAAqB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,aAAY,GAAA;KACrD,eAAY,KAA7B,UAAA,GAAA,YAAkD,MAAA,iBAAA,GAAA;;MAAf,OAAM;;KAEjC,QAAQ,SAAK,CAAK,QAAA,aAD1B,UAAA,GAAA,mBAKI,KALJ,YAKI,gBADC,QAAQ,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAElB,mBA4CK,MA5CL,YA4CK,EA3CH,UAAA,IAAA,GAAA,mBA0CK,UAAA,MAAA,WA1C2B,QAAQ,QAA5B,MAAM,cAAS;MAA3B,OAAA,UAAA,GAAA,mBA0CK,MAAA,EA1C2C,KAAK,UAAS,GAAA,CAC7C,QAAA,aAAf,UAAA,GAAA,YAmBU,MAAA,eAAA,GAAA;;OAnBiB,SAAS,eAAe,IAAI;OAAG,MAAK;;OAClD,SAAO,cAgBJ,EAfZ,UAAA,GAAA,YAeY,wBAdL,KAAK,OAAI,MAAA,QAAA,GAAA;QACb,MAAM,KAAK,OAAO,KAAA,IAAS;QAC3B,MAAM,KAAK;QACX,gBAAc,KAAK,SAAM,SAAY,KAAA;QACrC,cAAY,KAAK;QACjB,OAAK,eAAE,UAAU,MAAI,IAAA,CAAA;QACrB,UAAK,WAAE,KAAI,UAAW,IAAI;;QAE3B,SAAA,cAIE,CAHM,KAAK,UADb,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,GAC+B,KAAK,QAAtC,UAAA,GAAA,YAAkF,wBAAlE,KAAK,IAAI,GAAA;;SAAmB,eAAY;SAAO,OAAM;;;;;;;;;;;;MAK3E,GAAA,MAAA,CAAA,SAAA,CAAA,MAAA,UAAA,GAAA,YAmBY,wBAlBL,KAAK,OAAI,MAAA,QAAA,GAAA;;OAEb,MAAM,KAAK,OAAO,KAAA,IAAS;OAC3B,MAAM,KAAK;OACX,gBAAc,KAAK,SAAM,SAAY,KAAA;OACrC,OAAK,eAAE,UAAU,MAAI,KAAA,CAAA;OACrB,UAAK,WAAE,KAAI,UAAW,IAAI;;OAE3B,SAAA,cAIE;QAHM,KAAK,UADb,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA;QAC+B,KAAK,QAAtC,UAAA,GAAA,YAAkF,wBAAlE,KAAK,IAAI,GAAA;;SAAmB,eAAY;SAAO,OAAM;;QACrE,mBAA6D,QAA7D,YAA6D,gBAApB,KAAK,KAAK,GAAA,CAAA;QACtC,KAAK,UAAU,KAAA,KAA5B,UAAA,GAAA,YAEQ,MAAA,aAAA,GAAA;;SAF+B,SAAQ;SAAU,OAAM;;SAC7D,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/patterns/title-bar/src/TitleBar.js

@@ -0,0 +1,7 @@
+import TitleBar_vue_vue_type_script_setup_true_lang_default from "./TitleBar.vue_vue_type_script_setup_true_lang.js";
+//#region packages/patterns/title-bar/src/TitleBar.vue
+var TitleBar_default = TitleBar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TitleBar_default as default };
+
+//# sourceMappingURL=TitleBar.js.map

package/dist/patterns/title-bar/src/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","names":[],"sources":["../../../../packages/patterns/title-bar/src/TitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * TitleBar — a desktop app's custom window chrome (a pattern: composed from\n * primitives, domain-aware, but still presentational). Layout:\n *\n *   Windows / Linux:\n *   [ ⬡ brand ] [ File View Help ]  ····· drag / title ····· [ – ▢ ✕ ]\n *\n *   macOS (native traffic-lights on the left):\n *   [ 🔴🟡🟢   ⬡ brand ] [ File View Help ]  ····· drag / title ·····\n *\n * The whole bar is a drag region (`-webkit-app-region: drag`); the interactive\n * clusters (Menubar, WindowControls) opt back out. It owns NO app logic — it\n * re-emits `select` from the menu and the window intents, so the desktop host\n * wires the window bridge around it.\n *\n * `platform` is the host's declaration, not a runtime sniff: a Tauri/Electron\n * host already knows its OS, and a PWA has no native window controls. On macOS\n * the brand cluster shifts right to leave room for the native traffic-light\n * buttons, and WindowControls renders nothing (the OS owns those buttons).\n */\nimport type { MenubarMenu } from \"@ecoma-io/loom-menubar\";\nimport type { WindowPlatform } from \"@ecoma-io/loom-window-controls\";\n</script>\n\n<script setup lang=\"ts\">\nimport Menubar from \"@ecoma-io/loom-menubar\";\nimport WindowControls, { type WindowControlsLabels } from \"@ecoma-io/loom-window-controls\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — required: this pattern has no identity of its own. */\n    appName: string;\n    /** Centered subtitle — usually the open project / composition. */\n    title?: string;\n    menus?: MenubarMenu[];\n    isMaximized?: boolean;\n    /**\n     * The desktop platform the window runs on. Controls whether WindowControls\n     * renders (hidden on macOS) and how the brand cluster is spaced (shifted\n     * right on macOS to avoid the native traffic-light buttons). The host\n     * decides — Loom never sniffs the OS at runtime.\n     */\n    platform?: WindowPlatform;\n    /** Passed through to WindowControls (host-side i18n); omit for its English defaults. */\n    windowControlsLabels?: WindowControlsLabels;\n  }>(),\n  {\n    title: \"\",\n    menus: () => [],\n    isMaximized: false,\n    platform: \"windows\",\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</script>\n\n<template>\n  <header\n    data-loom-titlebar\n    class=\"flex h-9 select-none items-center border-b border-border bg-card text-foreground\"\n    style=\"-webkit-app-region: drag\"\n  >\n    <!-- Brand. Deliberately NOT `no-drag`: nothing here is interactive, and the\n         logo corner is the spot people reach for to move a window — opting it\n         out of the drag region would take that away and give nothing back.\n         Only the clusters that actually take clicks (Menubar, WindowControls)\n         opt out.\n\n         On macOS the brand cluster shifts right to leave room for the native\n         traffic-light buttons. The 4.5rem (72px) covers the three 12px\n         buttons plus their 8px left margin and 4px inter-button gap, matching\n         what macOS draws at the default window scale. -->\n    <div\n      class=\"flex shrink-0 items-center gap-2 pr-1.5\"\n      :class=\"platform === 'macos' ? 'pl-[4.5rem]' : 'pl-3'\"\n    >\n      <!-- @slot Brand icon — the consumer provides their own mark. Rendered\n           inside a 16px coloured tile, `aria-hidden` by the container. -->\n      <slot name=\"brandIcon\">\n        <span\n          class=\"grid h-4 w-4 place-items-center rounded-[5px] bg-primary text-primary-foreground shadow-sm\"\n          aria-hidden=\"true\"\n        >\n          <!-- stroke bumped for optical balance at tiny size -->\n          <slot name=\"brandMark\" />\n        </span>\n      </slot>\n      <span class=\"text-xs font-semibold tracking-tight\">{{ appName }}</span>\n    </div>\n\n    <!-- Menu bar -->\n    <Menubar v-if=\"menus.length\" :menus=\"menus\" @select=\"emit('select', $event)\" />\n\n    <!-- Draggable spacer + centered title -->\n    <div class=\"flex min-w-0 flex-1 items-center justify-center overflow-hidden px-4\">\n      <span v-if=\"title\" class=\"truncate text-xs text-muted-foreground\">{{ title }}</span>\n    </div>\n\n    <!-- Window controls (hidden on macOS — the OS draws its own) -->\n    <WindowControls\n      :platform=\"platform\"\n      :is-maximized=\"isMaximized\"\n      v-bind=\"optional({ labels: windowControlsLabels })\"\n      @minimize=\"emit('minimize')\"\n      @maximize=\"emit('maximize')\"\n      @close=\"emit('close')\"\n    />\n  </header>\n</template>\n"],"mappings":""}