@ecoma-io/loom 0.1.1 → 0.2.0

package/dist/blocks/MetricCard/MetricCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,63 @@
+import { cn } from "../../lib/cn.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region src/blocks/MetricCard/MetricCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "mb-2 text-muted-foreground [&_svg]:h-4 [&_svg]:w-4"
+};
+var _hoisted_2 = { class: "text-small text-muted-foreground" };
+var _hoisted_3 = { class: "flex items-baseline gap-1.5" };
+var _hoisted_4 = { class: "text-2xl font-semibold tracking-tight text-foreground" };
+var _hoisted_5 = {
+	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_6 = {
+	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_7 = {
+	key: 2,
+	"aria-hidden": "true"
+};
+var _hoisted_8 = { key: 3 };
+var MetricCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "MetricCard",
+	props: {
+		value: {},
+		label: {},
+		trend: {},
+		trendValue: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("rounded-lg border border-border bg-card p-4")) }, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("", true),
+				createElementVNode("p", _hoisted_2, toDisplayString(__props.label), 1),
+				createElementVNode("div", _hoisted_3, [createElementVNode("span", _hoisted_4, 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": __props.trend === "up",
+						"text-destructive": __props.trend === "down",
+						"text-muted-foreground": __props.trend === "flat"
+					}))
+				}, [__props.trend === "up" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M6 2v8M3 5l3-3 3 3" }, null, -1)])])) : __props.trend === "down" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[1] || (_cache[1] = [createElementVNode("path", { d: "M6 10V2M3 7l3 3 3-3" }, null, -1)])])) : (openBlock(), createElementBlock("span", _hoisted_7, "—")), __props.trendValue ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(__props.trendValue), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)])
+			], 2);
+		};
+	}
+});
+//#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/blocks/MetricCard/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":["../../../src/blocks/MetricCard/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 block 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-destructive` / `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 { cn } from \"../../lib/cn\";\n\ndefineProps<{\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. */\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}>();\n</script>\n\n<template>\n  <div :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    <p class=\"text-small text-muted-foreground\">{{ label }}</p>\n    <div class=\"flex items-baseline gap-1.5\">\n      <span class=\"text-2xl font-semibold tracking-tight 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': trend === 'up',\n            'text-destructive': 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  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CE,OAAA,UAAA,GAAA,mBAuDM,OAAA,EAvDA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,6CAAA,CAAA,EAAA,GAAA;IAILA,KAAAA,OAAO,QADf,UAAA,GAAA,mBAMM,OANN,YAMM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEtB,mBAA2D,KAA3D,YAA2D,gBAAZ,QAAA,KAAK,GAAA,CAAA;IACpD,mBA2CM,OA3CN,YA2CM,CA1CJ,mBAEO,QAFP,YAEO,gBADF,QAAA,KAAK,GAAA,CAAA,GAGF,QAAA,SADR,UAAA,GAAA,mBAsCO,QAAA;;KApCJ,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,2DAAA;MAA0F,gBAAA,QAAA,UAAK;MAA2C,oBAAA,QAAA,UAAK;MAAkD,yBAAA,QAAA,UAAK;;IAUnN,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,YAAA,gBAApB,QAAA,UAAU,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/blocks/SidebarNav/SidebarNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNav.js","names":[],"sources":["../../../src/blocks/SidebarNav/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 \"../../primitives/Tooltip/Tooltip.vue\";\nimport Badge from \"../../primitives/Badge/Badge.vue\";\nimport Separator from \"../../primitives/Separator/Separator.vue\";\nimport { cn } from \"../../lib/cn\";\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 human/warp force\n * alone. It never mixes in `--agent`: this is navigation chrome, not a place\n * reporting automated work.\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\"\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":""}
+{"version":3,"file":"SidebarNav.js","names":[],"sources":["../../../src/blocks/SidebarNav/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 \"../../primitives/Tooltip/Tooltip.vue\";\nimport Badge from \"../../primitives/Badge/Badge.vue\";\nimport Separator from \"../../primitives/Separator/Separator.vue\";\nimport { cn } from \"../../lib/cn\";\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\"\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/blocks/SidebarNav/SidebarNav.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNav.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/blocks/SidebarNav/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 \"../../primitives/Tooltip/Tooltip.vue\";\nimport Badge from \"../../primitives/Badge/Badge.vue\";\nimport Separator from \"../../primitives/Separator/Separator.vue\";\nimport { cn } from \"../../lib/cn\";\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 human/warp force\n * alone. It never mixes in `--agent`: this is navigation chrome, not a place\n * reporting automated work.\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\"\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,2CASA,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,mBAAA;;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,iBAAA;;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,eAAA;;SAF+B,SAAQ;SAAU,OAAM;;SAC7D,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"SidebarNav.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/blocks/SidebarNav/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 \"../../primitives/Tooltip/Tooltip.vue\";\nimport Badge from \"../../primitives/Badge/Badge.vue\";\nimport Separator from \"../../primitives/Separator/Separator.vue\";\nimport { cn } from \"../../lib/cn\";\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\"\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,2CASA,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,mBAAA;;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,iBAAA;;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,eAAA;;SAF+B,SAAQ;SAAU,OAAM;;SAC7D,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/blocks/TitleBar/TitleBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.js","names":[],"sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * TitleBar — a desktop app's custom window chrome (a block: composed from\n * primitives, domain-aware, but still presentational). Layout:\n *\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 */\nimport type { MenubarMenu } from \"../../primitives/Menubar/Menubar.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport Menubar from \"../../primitives/Menubar/Menubar.vue\";\nimport WindowControls, {\n  type WindowControlsLabels,\n} from \"../../primitives/WindowControls/WindowControls.vue\";\nimport BrandMark from \"../../icons/BrandMark\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — required: this block 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    /** 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  },\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    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    <div class=\"flex shrink-0 items-center gap-2 pl-3 pr-1.5\">\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        <BrandMark :size=\"10\" :stroke-width=\"2.5\" />\n      </span>\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 -->\n    <WindowControls\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":""}
+{"version":3,"file":"TitleBar.js","names":[],"sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * TitleBar — a desktop app's custom window chrome (a block: 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 \"../../primitives/Menubar/Menubar.vue\";\nimport type { WindowPlatform } from \"../../primitives/WindowControls/WindowControls.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport Menubar from \"../../primitives/Menubar/Menubar.vue\";\nimport WindowControls, {\n  type WindowControlsLabels,\n} from \"../../primitives/WindowControls/WindowControls.vue\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — required: this block 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":""}

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

@@ -3,23 +3,40 @@ import { type WindowControlsLabels } from "../../primitives/WindowControls/Windo
  * TitleBar — a desktop app's custom window chrome (a block: composed from
  * primitives, domain-aware, but still presentational). Layout:
  *
+ *   Windows / Linux:
  *   [ ⬡ brand ] [ File View Help ]  ····· drag / title ····· [ – ▢ ✕ ]
  *
+ *   macOS (native traffic-lights on the left):
+ *   [ 🔴🟡🟢   ⬡ brand ] [ File View Help ]  ····· drag / title ·····
+ *
  * The whole bar is a drag region (`-webkit-app-region: drag`); the interactive
  * clusters (Menubar, WindowControls) opt back out. It owns NO app logic — it
  * re-emits `select` from the menu and the window intents, so the desktop host
  * wires the window bridge around it.
+ *
+ * `platform` is the host's declaration, not a runtime sniff: a Tauri/Electron
+ * host already knows its OS, and a PWA has no native window controls. On macOS
+ * the brand cluster shifts right to leave room for the native traffic-light
+ * buttons, and WindowControls renders nothing (the OS owns those buttons).
  */
 import type { MenubarMenu } from "../../primitives/Menubar/Menubar.vue";
+import type { WindowPlatform } from "../../primitives/WindowControls/WindowControls.vue";
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The host app's brand name — required: this block has no identity of its own. */
     appName: string;
     /** Centered subtitle — usually the open project / composition. */
     title?: string;
     menus?: MenubarMenu[];
     isMaximized?: boolean;
+    /**
+     * The desktop platform the window runs on. Controls whether WindowControls
+     * renders (hidden on macOS) and how the brand cluster is spaced (shifted
+     * right on macOS to avoid the native traffic-light buttons). The host
+     * decides — Loom never sniffs the OS at runtime.
+     */
+    platform?: WindowPlatform;
     /** Passed through to WindowControls (host-side i18n); omit for its English defaults. */
     windowControlsLabels?: WindowControlsLabels;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -34,6 +51,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     title?: string;
     menus?: MenubarMenu[];
     isMaximized?: boolean;
+    /**
+     * The desktop platform the window runs on. Controls whether WindowControls
+     * renders (hidden on macOS) and how the brand cluster is spaced (shifted
+     * right on macOS to avoid the native traffic-light buttons). The host
+     * decides — Loom never sniffs the OS at runtime.
+     */
+    platform?: WindowPlatform;
     /** Passed through to WindowControls (host-side i18n); omit for its English defaults. */
     windowControlsLabels?: WindowControlsLabels;
 }> & Readonly<{
@@ -43,7 +67,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onMaximize?: () => any;
 }>, {
     title: string;
-    menus: MenubarMenu[];
+    platform: WindowPlatform;
     isMaximized: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    menus: MenubarMenu[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    brandIcon?: (props: {}) => any;
+} & {
+    brandMark?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 //# sourceMappingURL=TitleBar.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"names":[],"mappings":"AA4FA,OAAuB,EACrB,KAAK,oBAAoB,EAC1B,MAAM,oDAAoD,CAAC;AAK5D;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;wBACnD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,mFAAmF;aAC1E,MAAM;IACf,kEAAkE;YAC1D,MAAM;YACN,WAAW,EAAE;kBACP,OAAO;IACrB,wFAAwF;2BACjE,oBAAoB;;;;;;;IAP3C,mFAAmF;aAC1E,MAAM;IACf,kEAAkE;YAC1D,MAAM;YACN,WAAW,EAAE;kBACP,OAAO;IACrB,wFAAwF;2BACjE,oBAAoB;;;;;;;WAJnC,MAAM;WACN,WAAW,EAAE;iBACP,OAAO;6EAkMrB,CAAC"}
+{"version":3,"file":"TitleBar.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"names":[],"mappings":"AA2HA,OAAuB,EACrB,KAAK,oBAAoB,EAC1B,MAAM,oDAAoD,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oDAAoD,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,mFAAmF;aAC1E,MAAM;IACf,kEAAkE;YAC1D,MAAM;YACN,WAAW,EAAE;kBACP,OAAO;IACrB;;;;;OAKG;eACQ,cAAc;IACzB,wFAAwF;2BACjE,oBAAoB;;;;;;;IAd3C,mFAAmF;aAC1E,MAAM;IACf,kEAAkE;YAC1D,MAAM;YACN,WAAW,EAAE;kBACP,OAAO;IACrB;;;;;OAKG;eACQ,cAAc;IACzB,wFAAwF;2BACjE,oBAAoB;;;;;;;WAXnC,MAAM;cASH,cAAc;iBAPX,OAAO;WADb,WAAW,EAAE;;gBAgMT,CAAC,KAAK,IAAgB,KAAK,GAAG;;gBAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAW1C,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/blocks/TitleBar/TitleBar.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,20 @@
 import { optional } from "../../lib/props.js";
 import Menubar_default from "../../primitives/Menubar/Menubar.js";
 import WindowControls_default from "../../primitives/WindowControls/WindowControls.js";
-import BrandMark from "../../icons/BrandMark.js";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, toDisplayString, unref } from "vue";
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
 //#region src/blocks/TitleBar/TitleBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
+	"data-loom-titlebar": "",
 	class: "flex h-9 select-none items-center border-b border-border bg-card text-foreground",
 	style: { "-webkit-app-region": "drag" }
 };
-var _hoisted_2 = { class: "flex shrink-0 items-center gap-2 pl-3 pr-1.5" };
-var _hoisted_3 = {
+var _hoisted_2 = {
 	class: "grid h-4 w-4 place-items-center rounded-[5px] bg-primary text-primary-foreground shadow-sm",
 	"aria-hidden": "true"
 };
-var _hoisted_4 = { class: "text-xs font-semibold tracking-tight" };
-var _hoisted_5 = { class: "flex min-w-0 flex-1 items-center justify-center overflow-hidden px-4" };
-var _hoisted_6 = {
+var _hoisted_3 = { class: "text-xs font-semibold tracking-tight" };
+var _hoisted_4 = { class: "flex min-w-0 flex-1 items-center justify-center overflow-hidden px-4" };
+var _hoisted_5 = {
 	key: 0,
 	class: "truncate text-xs text-muted-foreground"
 };
@@ -29,6 +28,7 @@ var TitleBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			type: Boolean,
 			default: false
 		},
+		platform: { default: "windows" },
 		windowControlsLabels: {}
 	},
 	emits: [
@@ -41,21 +41,21 @@ var TitleBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const emit = __emit;
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [createElementVNode("span", _hoisted_3, [createVNode(unref(BrandMark), {
-					size: 10,
-					"stroke-width": 2.5
-				})]), createElementVNode("span", _hoisted_4, toDisplayString(__props.appName), 1)]),
+				createElementVNode("div", { class: normalizeClass(["flex shrink-0 items-center gap-2 pr-1.5", __props.platform === "macos" ? "pl-[4.5rem]" : "pl-3"]) }, [renderSlot(_ctx.$slots, "brandIcon", {}, () => [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "brandMark")])]), createElementVNode("span", _hoisted_3, toDisplayString(__props.appName), 1)], 2),
 				__props.menus.length ? (openBlock(), createBlock(Menubar_default, {
 					key: 0,
 					menus: __props.menus,
 					onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 				}, null, 8, ["menus"])) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_5, [__props.title ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.title), 1)) : createCommentVNode("", true)]),
-				createVNode(WindowControls_default, mergeProps({ "is-maximized": __props.isMaximized }, unref(optional)({ labels: __props.windowControlsLabels }), {
+				createElementVNode("div", _hoisted_4, [__props.title ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.title), 1)) : createCommentVNode("", true)]),
+				createVNode(WindowControls_default, mergeProps({
+					platform: __props.platform,
+					"is-maximized": __props.isMaximized
+				}, unref(optional)({ labels: __props.windowControlsLabels }), {
 					onMinimize: _cache[1] || (_cache[1] = ($event) => emit("minimize")),
 					onMaximize: _cache[2] || (_cache[2] = ($event) => emit("maximize")),
 					onClose: _cache[3] || (_cache[3] = ($event) => emit("close"))
-				}), null, 16, ["is-maximized"])
+				}), null, 16, ["platform", "is-maximized"])
 			]);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"TitleBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * TitleBar — a desktop app's custom window chrome (a block: composed from\n * primitives, domain-aware, but still presentational). Layout:\n *\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 */\nimport type { MenubarMenu } from \"../../primitives/Menubar/Menubar.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport Menubar from \"../../primitives/Menubar/Menubar.vue\";\nimport WindowControls, {\n  type WindowControlsLabels,\n} from \"../../primitives/WindowControls/WindowControls.vue\";\nimport BrandMark from \"../../icons/BrandMark\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — required: this block 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    /** 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  },\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    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    <div class=\"flex shrink-0 items-center gap-2 pl-3 pr-1.5\">\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        <BrandMark :size=\"10\" :stroke-width=\"2.5\" />\n      </span>\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 -->\n    <WindowControls\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,OAAO;;GASX,OAAA,UAAA,GAAA,mBAoCS,UApCT,YAoCS;IA3BP,mBASM,OATN,YASM,CARJ,mBAMO,QANP,YAMO,CADL,YAA4C,MAAA,SAAA,GAAA;KAAhC,MAAM;KAAK,gBAAc;IAEvC,CAAA,CAAA,CAAA,GAAA,mBAAuE,QAAvE,YAAuE,gBAAjB,QAAA,OAAO,GAAA,CAAA,CAAA,CAAA;IAIhD,QAAA,MAAM,UAArB,UAAA,GAAA,YAA+E,iBAAA;;KAAjD,OAAO,QAAA;KAAQ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;;IAG1E,mBAEM,OAFN,YAEM,CADQ,QAAA,SAAZ,UAAA,GAAA,mBAAoF,QAApF,YAAoF,gBAAf,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAI5E,YAME,wBANF,WAME,EALC,gBAAc,QAAA,YAAW,GAClB,MAAA,QAAA,CAAQ,CAAA,EAAA,QAAW,QAAA,qBAAoB,CAAA,GAAA;KAC9C,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACd,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA"}
+{"version":3,"file":"TitleBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/blocks/TitleBar/TitleBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * TitleBar — a desktop app's custom window chrome (a block: 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 \"../../primitives/Menubar/Menubar.vue\";\nimport type { WindowPlatform } from \"../../primitives/WindowControls/WindowControls.vue\";\n</script>\n\n<script setup lang=\"ts\">\nimport Menubar from \"../../primitives/Menubar/Menubar.vue\";\nimport WindowControls, {\n  type WindowControlsLabels,\n} from \"../../primitives/WindowControls/WindowControls.vue\";\nimport { optional } from \"../../lib/props\";\n\nwithDefaults(\n  defineProps<{\n    /** The host app's brand name — required: this block 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DA,MAAM,OAAO;;GASX,OAAA,UAAA,GAAA,mBAkDS,UAlDT,YAkDS;IAnCP,mBAgBM,OAAA,EAfJ,OAAK,eAAA,CAAC,2CACE,QAAA,aAAQ,UAAA,gBAAA,MAAA,CAAA,EAAA,GAAA,CAIhB,WAQO,KAAA,QAAA,aAAA,CAAA,SAAA,CAPL,mBAMO,QANP,YAMO,CADL,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA,GAG7B,mBAAuE,QAAvE,YAAuE,gBAAjB,QAAA,OAAO,GAAA,CAAA,CAAA,GAAA,CAAA;IAIhD,QAAA,MAAM,UAArB,UAAA,GAAA,YAA+E,iBAAA;;KAAjD,OAAO,QAAA;KAAQ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;;IAG1E,mBAEM,OAFN,YAEM,CADQ,QAAA,SAAZ,UAAA,GAAA,mBAAoF,QAApF,YAAoF,gBAAf,QAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAI5E,YAOE,wBAPF,WAOE;KANC,UAAU,QAAA;KACV,gBAAc,QAAA;IACP,GAAA,MAAA,QAAA,CAAQ,CAAA,EAAA,QAAW,QAAA,qBAAoB,CAAA,GAAA;KAC9C,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACd,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAA;KACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA"}

package/dist/blocks/ToastStack/ToastStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastStack.js","names":[],"sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastVariant } from \"../../primitives/Toast/Toast.vue\";\n\n/** One entry of a host-owned toast queue, rendered by `ToastStack`. */\nexport interface ToastStackItem {\n  readonly id: string | number;\n  readonly title: string;\n  readonly description?: string;\n  readonly variant?: ToastVariant;\n  /** ms before auto-dismiss (default 4000 — a stack turns over faster than a lone toast). */\n  readonly duration?: number;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastProvider, ToastViewport } from \"reka-ui\";\nimport { optional } from \"../../lib/props\";\nimport ToastItem from \"../../primitives/Toast/ToastItem.vue\";\n\n/**\n * ToastStack — renders a host-owned toast queue through ONE shared\n * provider/viewport, so simultaneous toasts stack vertically with a gap\n * instead of piling onto the same fixed corner (which is what N standalone\n * `Toast`s produce — each bundles its own viewport at the same coordinates).\n *\n * The queue stays the host's: the host passes the visible entries and\n * removes an entry when `dismiss` fires — on close, swipe, Esc, or\n * auto-dismiss alike. This block owns only the shared-viewport treatment.\n * Every rendered item is driven with `open` fixed to `true` — `ToastStack`\n * decides an entry is visible by including it in `items`, never by an\n * item's own open state, so there is no per-item boolean left unset for\n * Vue's absent-prop casting to catch.\n *\n * The viewport's geometry is written for the two ends of the range it\n * actually lands in. Width is `min(92vw, 24rem)`, so a phone gets a\n * near-full-bleed card and a desktop a bounded one. The bottom inset\n * resolves through `env(safe-area-inset-bottom)` — on a device with a home\n * indicator a flat `p-4` puts the newest toast, and its dismiss control,\n * under the system gesture bar. And the stack is height-bounded\n * (`max-h-dvh` + `overflow-hidden`) so a host that hands over more entries\n * than fit pushes the oldest off the top rather than growing a column\n * taller than the screen. `dvh`, not `vh`: mobile browser chrome collapses\n * the visual viewport and `vh` does not follow.\n */\ndefineProps<{\n  /** The host's visible toast queue, oldest first. */\n  items: readonly ToastStackItem[];\n}>();\n\ndefineEmits<{ dismiss: [id: string | number] }>();\n</script>\n\n<template>\n  <ToastProvider>\n    <ToastItem\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :open=\"true\"\n      :title=\"item.title\"\n      v-bind=\"optional({ description: item.description, variant: item.variant })\"\n      :duration=\"item.duration ?? 4000\"\n      @update:open=\"(open) => !open && $emit('dismiss', item.id)\"\n    />\n\n    <ToastViewport\n      class=\"fixed bottom-0 right-0 z-[100] flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ToastStack.js","names":[],"sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastVariant } from \"../../primitives/Toast/Toast.vue\";\n\n/** One entry of a host-owned toast queue, rendered by `ToastStack`. */\nexport interface ToastStackItem {\n  readonly id: string | number;\n  readonly title: string;\n  readonly description?: string;\n  readonly variant?: ToastVariant;\n  /** ms before auto-dismiss (default 4000 — a stack turns over faster than a lone toast). */\n  readonly duration?: number;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastProvider, ToastViewport } from \"reka-ui\";\nimport { optional } from \"../../lib/props\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\nimport ToastItem, { TOAST_LABELS, type ToastLabels } from \"../../primitives/Toast/ToastItem.vue\";\n\n/**\n * ToastStack — renders a host-owned toast queue through ONE shared\n * provider/viewport, so simultaneous toasts stack vertically with a gap\n * instead of piling onto the same fixed corner (which is what N standalone\n * `Toast`s produce — each bundles its own viewport at the same coordinates).\n *\n * The queue stays the host's: the host passes the visible entries and\n * removes an entry when `dismiss` fires — on close, swipe, Esc, or\n * auto-dismiss alike. This block owns only the shared-viewport treatment.\n * Every rendered item is driven with `open` fixed to `true` — `ToastStack`\n * decides an entry is visible by including it in `items`, never by an\n * item's own open state, so there is no per-item boolean left unset for\n * Vue's absent-prop casting to catch.\n *\n * The viewport's geometry is written for the two ends of the range it\n * actually lands in. Width is `min(92vw, 24rem)`, so a phone gets a\n * near-full-bleed card and a desktop a bounded one. The bottom inset\n * resolves through `env(safe-area-inset-bottom)` — on a device with a home\n * indicator a flat `p-4` puts the newest toast, and its dismiss control,\n * under the system gesture bar. And the stack is height-bounded\n * (`max-h-dvh` + `overflow-hidden`) so a host that hands over more entries\n * than fit pushes the oldest off the top rather than growing a column\n * taller than the screen. `dvh`, not `vh`: mobile browser chrome collapses\n * the visual viewport and `vh` does not follow.\n */\nconst props = defineProps<{\n  /** The host's visible toast queue, oldest first. */\n  items: readonly ToastStackItem[];\n  /**\n   * Names for the two things the shared region says out loud, as any subset of\n   * `ToastLabels` — the rest stay as the host's `provideLoomLabels` vocabulary\n   * left them, and then as Loom's English.\n   *\n   * It resolves the same `toast` slot each `ToastItem` does, so a host that has\n   * localised toasts anywhere has localised this too and needs nothing here.\n   */\n  labels?: LabelOverrides<ToastLabels>;\n}>();\n\ndefineEmits<{ dismiss: [id: string | number] }>();\n\n// This block owns a provider and a viewport of its own rather than borrowing\n// `Toast`'s, which is the whole point of it — and that means it owns their two\n// names as well. Left unset they are not unnamed: Reka defaults them to\n// \"Notification\" and \"Notifications ({hotkey})\", English a host has no prop to\n// reach, in the one live region a screen reader is sent to by a hotkey.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// The function form rather than Reka's `{hotkey}` template, for the reason\n// `Toast.vue` gives: the hole would be Loom deciding where the key sits in the\n// phrase, and that is a property of the language.\nconst regionLabel = computed(() => (hotkey: string) => text.value.region({ hotkey }));\n</script>\n\n<template>\n  <ToastProvider :label=\"text.announce\">\n    <ToastItem\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :open=\"true\"\n      :title=\"item.title\"\n      v-bind=\"optional({ description: item.description, variant: item.variant })\"\n      :duration=\"item.duration ?? 4000\"\n      @update:open=\"(open) => !open && $emit('dismiss', item.id)\"\n    />\n\n    <ToastViewport\n      :label=\"regionLabel\"\n      class=\"fixed bottom-0 right-0 z-toast flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,5 @@
+import { type LabelOverrides } from "../../lib/labels";
+import { type ToastLabels } from "../../primitives/Toast/ToastItem.vue";
 import type { ToastVariant } from "../../primitives/Toast/Toast.vue";
 /** One entry of a host-owned toast queue, rendered by `ToastStack`. */
 export interface ToastStackItem {
@@ -13,11 +15,29 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     /** The host's visible toast queue, oldest first. */
     items: readonly ToastStackItem[];
+    /**
+     * Names for the two things the shared region says out loud, as any subset of
+     * `ToastLabels` — the rest stay as the host's `provideLoomLabels` vocabulary
+     * left them, and then as Loom's English.
+     *
+     * It resolves the same `toast` slot each `ToastItem` does, so a host that has
+     * localised toasts anywhere has localised this too and needs nothing here.
+     */
+    labels?: LabelOverrides<ToastLabels>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     dismiss: (id: string | number) => any;
 }, string, import("vue").PublicProps, Readonly<{
     /** The host's visible toast queue, oldest first. */
     items: readonly ToastStackItem[];
+    /**
+     * Names for the two things the shared region says out loud, as any subset of
+     * `ToastLabels` — the rest stay as the host's `provideLoomLabels` vocabulary
+     * left them, and then as Loom's English.
+     *
+     * It resolves the same `toast` slot each `ToastItem` does, so a host that has
+     * localised toasts anywhere has localised this too and needs nothing here.
+     */
+    labels?: LabelOverrides<ToastLabels>;
 }> & Readonly<{
     onDismiss?: (id: string | number) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"ToastStack.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"names":[],"mappings":"AA6EA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAErE,uEAAuE;AACvE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,2FAA2F;IAC3F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA2BhB,oDAAoD;WAC7C,SAAS,cAAc,EAAE;;;;IADhC,oDAAoD;WAC7C,SAAS,cAAc,EAAE;;;kFAqG9B,CAAC"}
+{"version":3,"file":"ToastStack.vue.d.ts","sourceRoot":"","sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"names":[],"mappings":"AAmGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAkB,EAAgB,KAAK,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAGjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAErE,uEAAuE;AACvE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,2FAA2F;IAC3F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;wBACoB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IA2BhB,oDAAoD;WAC7C,SAAS,cAAc,EAAE;IAChC;;;;;;;OAOG;aACM,cAAc,CAAC,WAAW,CAAC;;;;IAVpC,oDAAoD;WAC7C,SAAS,cAAc,EAAE;IAChC;;;;;;;OAOG;aACM,cAAc,CAAC,WAAW,CAAC;;;kFAuHlC,CAAC"}

package/dist/blocks/ToastStack/ToastStack.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,23 @@
 import { optional } from "../../lib/props.js";
+import { useLabels } from "../../lib/labels.js";
+import { TOAST_LABELS } from "../../primitives/Toast/ToastItem.vue_vue_type_script_setup_true_lang.js";
 import ToastItem_default from "../../primitives/Toast/ToastItem.js";
-import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, unref, withCtx } from "vue";
 import { ToastProvider, ToastViewport } from "reka-ui";
 //#region src/blocks/ToastStack/ToastStack.vue?vue&type=script&setup=true&lang.ts
 var ToastStack_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToastStack",
-	props: { items: {} },
+	props: {
+		items: {},
+		labels: {}
+	},
 	emits: ["dismiss"],
 	setup(__props) {
+		const props = __props;
+		const text = useLabels("toast", TOAST_LABELS, () => props.labels);
+		const regionLabel = computed(() => (hotkey) => text.value.region({ hotkey }));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ToastProvider), null, {
+			return openBlock(), createBlock(unref(ToastProvider), { label: unref(text).announce }, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 					return openBlock(), createBlock(ToastItem_default, mergeProps({
 						key: item.id,
@@ -26,9 +34,12 @@ var ToastStack_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						"duration",
 						"onUpdate:open"
 					]);
-				}), 128)), createVNode(unref(ToastViewport), { class: "fixed bottom-0 right-0 z-[100] flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none" })]),
+				}), 128)), createVNode(unref(ToastViewport), {
+					label: regionLabel.value,
+					class: "fixed bottom-0 right-0 z-toast flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none"
+				}, null, 8, ["label"])]),
 				_: 1
-			});
+			}, 8, ["label"]);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ToastStack.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastVariant } from \"../../primitives/Toast/Toast.vue\";\n\n/** One entry of a host-owned toast queue, rendered by `ToastStack`. */\nexport interface ToastStackItem {\n  readonly id: string | number;\n  readonly title: string;\n  readonly description?: string;\n  readonly variant?: ToastVariant;\n  /** ms before auto-dismiss (default 4000 — a stack turns over faster than a lone toast). */\n  readonly duration?: number;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ToastProvider, ToastViewport } from \"reka-ui\";\nimport { optional } from \"../../lib/props\";\nimport ToastItem from \"../../primitives/Toast/ToastItem.vue\";\n\n/**\n * ToastStack — renders a host-owned toast queue through ONE shared\n * provider/viewport, so simultaneous toasts stack vertically with a gap\n * instead of piling onto the same fixed corner (which is what N standalone\n * `Toast`s produce — each bundles its own viewport at the same coordinates).\n *\n * The queue stays the host's: the host passes the visible entries and\n * removes an entry when `dismiss` fires — on close, swipe, Esc, or\n * auto-dismiss alike. This block owns only the shared-viewport treatment.\n * Every rendered item is driven with `open` fixed to `true` — `ToastStack`\n * decides an entry is visible by including it in `items`, never by an\n * item's own open state, so there is no per-item boolean left unset for\n * Vue's absent-prop casting to catch.\n *\n * The viewport's geometry is written for the two ends of the range it\n * actually lands in. Width is `min(92vw, 24rem)`, so a phone gets a\n * near-full-bleed card and a desktop a bounded one. The bottom inset\n * resolves through `env(safe-area-inset-bottom)` — on a device with a home\n * indicator a flat `p-4` puts the newest toast, and its dismiss control,\n * under the system gesture bar. And the stack is height-bounded\n * (`max-h-dvh` + `overflow-hidden`) so a host that hands over more entries\n * than fit pushes the oldest off the top rather than growing a column\n * taller than the screen. `dvh`, not `vh`: mobile browser chrome collapses\n * the visual viewport and `vh` does not follow.\n */\ndefineProps<{\n  /** The host's visible toast queue, oldest first. */\n  items: readonly ToastStackItem[];\n}>();\n\ndefineEmits<{ dismiss: [id: string | number] }>();\n</script>\n\n<template>\n  <ToastProvider>\n    <ToastItem\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :open=\"true\"\n      :title=\"item.title\"\n      v-bind=\"optional({ description: item.description, variant: item.variant })\"\n      :duration=\"item.duration ?? 4000\"\n      @update:open=\"(open) => !open && $emit('dismiss', item.id)\"\n    />\n\n    <ToastViewport\n      class=\"fixed bottom-0 right-0 z-[100] flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;GAqDE,OAAA,UAAA,GAAA,YAcgB,MAAA,aAAA,GAAA,MAAA;IAZZ,SAAA,cAAqB,EADvB,UAAA,IAAA,GAAA,mBAQE,UAAA,MAAA,WAPe,QAAA,QAAR,SAAI;KADb,OAAA,UAAA,GAAA,YAQE,mBARF,WAQE;MANC,KAAK,KAAK;MACV,MAAM;MACN,OAAO,KAAK;KACL,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA;MAAA,aAAgB,KAAK;MAAW,SAAW,KAAK;KAAO,CAAA,GAAA;MACtE,UAAU,KAAK,YAAQ;MACvB,kBAAc,SAAI,CAAM,QAAQA,KAAAA,MAAK,WAAY,KAAK,EAAE;;;;;;IAG3D,CAAA,GAAA,GAAA,IAAA,YAEE,MAAA,aAAA,GAAA,EADA,OAAM,+JAA8J,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ToastStack.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/blocks/ToastStack/ToastStack.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToastVariant } from \"../../primitives/Toast/Toast.vue\";\n\n/** One entry of a host-owned toast queue, rendered by `ToastStack`. */\nexport interface ToastStackItem {\n  readonly id: string | number;\n  readonly title: string;\n  readonly description?: string;\n  readonly variant?: ToastVariant;\n  /** ms before auto-dismiss (default 4000 — a stack turns over faster than a lone toast). */\n  readonly duration?: number;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { ToastProvider, ToastViewport } from \"reka-ui\";\nimport { optional } from \"../../lib/props\";\nimport { useLabels, type LabelOverrides } from \"../../lib/labels\";\nimport ToastItem, { TOAST_LABELS, type ToastLabels } from \"../../primitives/Toast/ToastItem.vue\";\n\n/**\n * ToastStack — renders a host-owned toast queue through ONE shared\n * provider/viewport, so simultaneous toasts stack vertically with a gap\n * instead of piling onto the same fixed corner (which is what N standalone\n * `Toast`s produce — each bundles its own viewport at the same coordinates).\n *\n * The queue stays the host's: the host passes the visible entries and\n * removes an entry when `dismiss` fires — on close, swipe, Esc, or\n * auto-dismiss alike. This block owns only the shared-viewport treatment.\n * Every rendered item is driven with `open` fixed to `true` — `ToastStack`\n * decides an entry is visible by including it in `items`, never by an\n * item's own open state, so there is no per-item boolean left unset for\n * Vue's absent-prop casting to catch.\n *\n * The viewport's geometry is written for the two ends of the range it\n * actually lands in. Width is `min(92vw, 24rem)`, so a phone gets a\n * near-full-bleed card and a desktop a bounded one. The bottom inset\n * resolves through `env(safe-area-inset-bottom)` — on a device with a home\n * indicator a flat `p-4` puts the newest toast, and its dismiss control,\n * under the system gesture bar. And the stack is height-bounded\n * (`max-h-dvh` + `overflow-hidden`) so a host that hands over more entries\n * than fit pushes the oldest off the top rather than growing a column\n * taller than the screen. `dvh`, not `vh`: mobile browser chrome collapses\n * the visual viewport and `vh` does not follow.\n */\nconst props = defineProps<{\n  /** The host's visible toast queue, oldest first. */\n  items: readonly ToastStackItem[];\n  /**\n   * Names for the two things the shared region says out loud, as any subset of\n   * `ToastLabels` — the rest stay as the host's `provideLoomLabels` vocabulary\n   * left them, and then as Loom's English.\n   *\n   * It resolves the same `toast` slot each `ToastItem` does, so a host that has\n   * localised toasts anywhere has localised this too and needs nothing here.\n   */\n  labels?: LabelOverrides<ToastLabels>;\n}>();\n\ndefineEmits<{ dismiss: [id: string | number] }>();\n\n// This block owns a provider and a viewport of its own rather than borrowing\n// `Toast`'s, which is the whole point of it — and that means it owns their two\n// names as well. Left unset they are not unnamed: Reka defaults them to\n// \"Notification\" and \"Notifications ({hotkey})\", English a host has no prop to\n// reach, in the one live region a screen reader is sent to by a hotkey.\nconst text = useLabels(\"toast\", TOAST_LABELS, () => props.labels);\n\n// The function form rather than Reka's `{hotkey}` template, for the reason\n// `Toast.vue` gives: the hole would be Loom deciding where the key sits in the\n// phrase, and that is a property of the language.\nconst regionLabel = computed(() => (hotkey: string) => text.value.region({ hotkey }));\n</script>\n\n<template>\n  <ToastProvider :label=\"text.announce\">\n    <ToastItem\n      v-for=\"item in items\"\n      :key=\"item.id\"\n      :open=\"true\"\n      :title=\"item.title\"\n      v-bind=\"optional({ description: item.description, variant: item.variant })\"\n      :duration=\"item.duration ?? 4000\"\n      @update:open=\"(open) => !open && $emit('dismiss', item.id)\"\n    />\n\n    <ToastViewport\n      :label=\"regionLabel\"\n      class=\"fixed bottom-0 right-0 z-toast flex max-h-dvh w-[min(92vw,24rem)] flex-col gap-2 overflow-hidden p-4 pb-[max(1rem,env(safe-area-inset-bottom))] outline-none\"\n    />\n  </ToastProvider>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EA8CA,MAAM,QAAQ;EAqBd,MAAM,OAAO,UAAU,SAAS,oBAAoB,MAAM,MAAM;EAKhE,MAAM,cAAc,gBAAgB,WAAmB,KAAK,MAAM,OAAO,EAAE,OAAO,CAAC,CAAC;;GAIlF,OAAA,UAAA,GAAA,YAegB,MAAA,aAAA,GAAA,EAfA,OAAO,MAAA,IAAA,CAAI,CAAC,SAAA,GAAA;IAExB,SAAA,cAAqB,EADvB,UAAA,IAAA,GAAA,mBAQE,UAAA,MAAA,WAPe,QAAA,QAAR,SAAI;KADb,OAAA,UAAA,GAAA,YAQE,mBARF,WAQE;MANC,KAAK,KAAK;MACV,MAAM;MACN,OAAO,KAAK;KACL,GAAA,EAAA,SAAA,KAAA,GAAA,MAAA,QAAA,CAAQ,CAAA;MAAA,aAAgB,KAAK;MAAW,SAAW,KAAK;KAAO,CAAA,GAAA;MACtE,UAAU,KAAK,YAAQ;MACvB,kBAAc,SAAI,CAAM,QAAQA,KAAAA,MAAK,WAAY,KAAK,EAAE;;;;;;IAG3D,CAAA,GAAA,GAAA,IAAA,YAGE,MAAA,aAAA,GAAA;KAFC,OAAO,YAAA;KACR,OAAM"}

package/dist/composition/Center/Center.js

@@ -0,0 +1,7 @@
+import Center_vue_vue_type_script_setup_true_lang_default, { maxWidthClass } from "./Center.vue_vue_type_script_setup_true_lang.js";
+//#region src/composition/Center/Center.vue
+var Center_default = Center_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Center_default as default, maxWidthClass };
+
+//# sourceMappingURL=Center.js.map

package/dist/composition/Center/Center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.js","names":[],"sources":["../../../src/composition/Center/Center.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Center — centered content with a max-width constraint.\n *\n * A horizontally centered block that caps its own width and widens its\n * gutters at wider breakpoints. Critical for ultra-wide viewports, where\n * content that stretches to infinity is unreadable: the extra viewport goes\n * to intentional whitespace, never to stretching lines of text or card grids.\n *\n * A Center is a component, not `mx-auto max-w-3xl px-4`, because the\n * gutters step up at breakpoints (the component's job, not every call\n * site's) and the `maxWidth` prop names readable intent rather than a\n * Tailwind size.\n */\nexport type CenterMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"prose\";\n\nconst maxWidthClass: Record<CenterMaxWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n  prose: \"max-w-prose\",\n} as const;\n\nexport { maxWidthClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Maximum content width — names intent rather than a pixel value. */\n    maxWidth?: CenterMaxWidth;\n    /** Whether to add horizontal gutters that widen at wider breakpoints. */\n    gutter?: boolean;\n  }>(),\n  { maxWidth: \"lg\", gutter: true },\n);\n</script>\n\n<template>\n  <!--\n    Gutters step up at `sm` and `3xl`: narrow viewports need less margin\n    because the viewport itself is margin, and ultra-wide viewports need more\n    so the gap between content and screen edge stays proportional.\n  -->\n  <div\n    :class=\"cn(maxWidthClass[maxWidth], 'mx-auto', gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined)\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/composition/Center/Center.vue.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Center — centered content with a max-width constraint.
+ *
+ * A horizontally centered block that caps its own width and widens its
+ * gutters at wider breakpoints. Critical for ultra-wide viewports, where
+ * content that stretches to infinity is unreadable: the extra viewport goes
+ * to intentional whitespace, never to stretching lines of text or card grids.
+ *
+ * A Center is a component, not `mx-auto max-w-3xl px-4`, because the
+ * gutters step up at breakpoints (the component's job, not every call
+ * site's) and the `maxWidth` prop names readable intent rather than a
+ * Tailwind size.
+ */
+export type CenterMaxWidth = "sm" | "md" | "lg" | "xl" | "prose";
+declare const maxWidthClass: Record<CenterMaxWidth, string>;
+export { maxWidthClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Maximum content width — names intent rather than a pixel value. */
+    maxWidth?: CenterMaxWidth;
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Maximum content width — names intent rather than a pixel value. */
+    maxWidth?: CenterMaxWidth;
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: boolean;
+}> & Readonly<{}>, {
+    maxWidth: CenterMaxWidth;
+    gutter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Center.vue.d.ts.map

package/dist/composition/Center/Center.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Center/Center.vue"],"names":[],"mappings":"AA2DA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAEjE,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAMxC,CAAC;AAEX,OAAO,EAAE,aAAa,EAAE,CAAC;wBACJ,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,sEAAsE;eAC3D,cAAc;IACzB,yEAAyE;aAChE,OAAO;;IAHhB,sEAAsE;eAC3D,cAAc;IACzB,yEAAyE;aAChE,OAAO;;cAFL,cAAc;YAEhB,OAAO;;cAkCN,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/composition/Center/Center.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/cn.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region src/composition/Center/Center.vue?vue&type=script&setup=true&lang.ts
+var maxWidthClass = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	prose: "max-w-prose"
+};
+var Center_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Center",
+	props: {
+		maxWidth: { default: "lg" },
+		gutter: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)(maxWidthClass[__props.maxWidth], "mx-auto", __props.gutter ? "px-4 sm:px-6 3xl:px-8" : void 0)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { Center_vue_vue_type_script_setup_true_lang_default as default, maxWidthClass };
+
+//# sourceMappingURL=Center.vue_vue_type_script_setup_true_lang.js.map