@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/packages/composition/sidebar/src/Sidebar.vue.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Sidebar — content + sidebar with intrinsic CSS collapse.
+ *
+ * The Every Layout "Sidebar" pattern: the sidebar gets a fixed `flex-basis`
+ * and the content gets `flex-grow: 999`, so the layout wraps and both panels
+ * go full-width the moment the content can't fit its `contentMin` percentage.
+ * No media query, no JavaScript — the layout derives its own breakpoint from
+ * the container's width.
+ *
+ * A Sidebar is a component because the `calc()` technique for intrinsic
+ * sidebar width is non-obvious and easy to get wrong, and Loom wrapping it
+ * prevents footguns. It differs from Split in that the content area is the
+ * star — it grows to fill all available space — and the sidebar has a
+ * preferred, not a minimum, width.
+ */
+export type SidebarSide = "left" | "right";
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Which side the sidebar sits on. Controls flex direction and stacking order. */
+    side?: SidebarSide;
+    /** Preferred width for the sidebar (e.g. "16rem"). The sidebar does not grow. */
+    sideWidth?: string;
+    /** Minimum percentage of the container the content demands before the layout wraps. Default: `"50%"`. */
+    contentMin?: string;
+    /** Whether to add a gap between the two panels. Default: `true`. */
+    gap?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Which side the sidebar sits on. Controls flex direction and stacking order. */
+    side?: SidebarSide;
+    /** Preferred width for the sidebar (e.g. "16rem"). The sidebar does not grow. */
+    sideWidth?: string;
+    /** Minimum percentage of the container the content demands before the layout wraps. Default: `"50%"`. */
+    contentMin?: string;
+    /** Whether to add a gap between the two panels. Default: `true`. */
+    gap?: boolean;
+}> & Readonly<{}>, {
+    gap: boolean;
+    side: SidebarSide;
+    sideWidth: string;
+    contentMin: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    side?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Sidebar.vue.d.ts.map

package/dist/packages/composition/sidebar/src/Sidebar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/sidebar/src/Sidebar.vue"],"names":[],"mappings":"AAuFA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;wBACtB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kFAAkF;WAC3E,WAAW;IAClB,iFAAiF;gBACrE,MAAM;IAClB,yGAAyG;iBAC5F,MAAM;IACnB,oEAAoE;UAC9D,OAAO;;IAPb,kFAAkF;WAC3E,WAAW;IAClB,iFAAiF;gBACrE,MAAM;IAClB,yGAAyG;iBAC5F,MAAM;IACnB,oEAAoE;UAC9D,OAAO;;SAAP,OAAO;UANN,WAAW;eAEN,MAAM;gBAEL,MAAM;;WA2DZ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,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/packages/composition/sidebar/src/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region packages/composition/sidebar/src/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Sidebar",
+	props: {
+		side: { default: "left" },
+		sideWidth: { default: "16rem" },
+		contentMin: { default: "50%" },
+		gap: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("flex", __props.side === "right" ? "flex-row-reverse" : "flex-row", __props.gap ? "gap-3 sm:gap-4" : void 0)),
+				style: { flexWrap: "wrap" }
+			}, [createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.sideWidth,
+				flexGrow: 0,
+				flexShrink: 1
+			}) }, [renderSlot(_ctx.$slots, "side")], 4), createElementVNode("div", { style: normalizeStyle({
+				flexBasis: 0,
+				flexGrow: 999,
+				flexShrink: 1,
+				minWidth: __props.contentMin
+			}) }, [renderSlot(_ctx.$slots, "default")], 4)], 2);
+		};
+	}
+});
+//#endregion
+export { Sidebar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Sidebar.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/composition/sidebar/src/Sidebar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/sidebar/src/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Sidebar — content + sidebar with intrinsic CSS collapse.\n *\n * The Every Layout \"Sidebar\" pattern: the sidebar gets a fixed `flex-basis`\n * and the content gets `flex-grow: 999`, so the layout wraps and both panels\n * go full-width the moment the content can't fit its `contentMin` percentage.\n * No media query, no JavaScript — the layout derives its own breakpoint from\n * the container's width.\n *\n * A Sidebar is a component because the `calc()` technique for intrinsic\n * sidebar width is non-obvious and easy to get wrong, and Loom wrapping it\n * prevents footguns. It differs from Split in that the content area is the\n * star — it grows to fill all available space — and the sidebar has a\n * preferred, not a minimum, width.\n */\nexport type SidebarSide = \"left\" | \"right\";\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Which side the sidebar sits on. Controls flex direction and stacking order. */\n    side?: SidebarSide;\n    /** Preferred width for the sidebar (e.g. \"16rem\"). The sidebar does not grow. */\n    sideWidth?: string;\n    /** Minimum percentage of the container the content demands before the layout wraps. Default: `\"50%\"`. */\n    contentMin?: string;\n    /** Whether to add a gap between the two panels. Default: `true`. */\n    gap?: boolean;\n  }>(),\n  { side: \"left\", sideWidth: \"16rem\", contentMin: \"50%\", gap: true },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n    can't fit its `contentMin`, it wraps to a new line and both panels take\n    full width — the sidebar becomes a full-width section above or below the\n    content, depending on `side`.\n\n    The sidebar's `flex-basis` is its preferred width. The content's\n    `flex-grow: 999` ensures it takes all remaining space when there is room,\n    but its `flex-basis: 0` and `min-width: contentMin` trigger wrapping\n    when there isn't.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap ? 'gap-3 sm:gap-4' : undefined,\n      )\n    \"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <div\n      :style=\"{\n        flexBasis: sideWidth,\n        flexGrow: 0,\n        flexShrink: 1,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: contentMin,\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;GAiDE,OAAA,UAAA,GAAA,mBA8BM,OAAA;IA7BH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,QAA0B,QAAA,SAAI,UAAA,qBAAA,YAAwD,QAAA,MAAG,mBAAsB,KAAA,CAAA,CAAA;IAO/H,OAAO,EAAA,UAAA,OAAA;GAER,GAAA,CAAA,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAuB,WAAA,QAAA;;;GAM7B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAGtB,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAA0F,UAAA,QAAA;GAOhG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/composition/sidebar/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Sidebar.vue";
+export type { SidebarSide } from "./Sidebar.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/composition/sidebar/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/sidebar/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/packages/composition/sidebar/src/index.js

@@ -0,0 +1,2 @@
+import Sidebar_default from "./Sidebar.js";
+export { Sidebar_default as default };

package/dist/packages/composition/split/src/Split.js

@@ -0,0 +1,7 @@
+import Split_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./Split.vue_vue_type_script_setup_true_lang.js";
+//#region packages/composition/split/src/Split.vue
+var Split_default = Split_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Split_default as default, gapClass };
+
+//# sourceMappingURL=Split.js.map

package/dist/packages/composition/split/src/Split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Split.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side above\n * a `collapseAt` width, and stacks them vertically below it. The side panel\n * gets a fixed minimum width; the content area grows to fill the remaining\n * space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the collapse width is a layout decision the call site should name\n * rather than compute, and the stacking order (side above or below) is an\n * intent the `side` prop expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: string;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. The `collapseAt` prop sets the breakpoint that controls\n    when `flex-wrap` is active.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap !== 'none' ? gapClass[gap] : undefined,\n      )\n    \"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n         panel takes full width (flex-basis: 100%). -->\n    <div\n      :style=\"{\n        flexBasis: minSideWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n        minWidth: minSideWidth,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <!-- Content area: fills remaining space, but demands at least 50% of\n         the container before wrapping. When collapsed it also takes full\n         width. -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/composition/split/src/Split.vue.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Split — two-panel layout with intrinsic collapse.
+ *
+ * A flex row that places a side panel and a content area side by side above
+ * a `collapseAt` width, and stacks them vertically below it. The side panel
+ * gets a fixed minimum width; the content area grows to fill the remaining
+ * space.
+ *
+ * This is the Every Layout "Sidebar" pattern, simplified for the common
+ * two-panel case. The intrinsic collapse — panels stack when the container is
+ * too narrow — avoids a breakpoint per viewport, and works identically inside
+ * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.
+ *
+ * A Split is a component, not a hand-rolled flex row with a media query,
+ * because the collapse width is a layout decision the call site should name
+ * rather than compute, and the stacking order (side above or below) is an
+ * intent the `side` prop expresses.
+ */
+export type SplitSide = "left" | "right";
+export type SplitGap = "sm" | "md" | "lg" | "none";
+declare const gapClass: Record<Exclude<SplitGap, "none">, string>;
+export { gapClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The side the panel sits on. Controls stacking order when collapsed: "left" stacks the panel above, "right" stacks it below. */
+    side?: SplitSide;
+    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
+    collapseAt?: string;
+    /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
+    minSideWidth?: string;
+    /** Gap between the two panels. Tightens one notch below `sm` (except "none"). */
+    gap?: SplitGap;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** The side the panel sits on. Controls stacking order when collapsed: "left" stacks the panel above, "right" stacks it below. */
+    side?: SplitSide;
+    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
+    collapseAt?: string;
+    /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
+    minSideWidth?: string;
+    /** Gap between the two panels. Tightens one notch below `sm` (except "none"). */
+    gap?: SplitGap;
+}> & Readonly<{}>, {
+    gap: SplitGap;
+    side: SplitSide;
+    collapseAt: string;
+    minSideWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    side?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Split.vue.d.ts.map

package/dist/packages/composition/split/src/Split.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Split.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/split/src/Split.vue"],"names":[],"mappings":"AAuGA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,MAAM,CAI9C,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kIAAkI;WAC3H,SAAS;IAChB,gHAAgH;iBACnG,MAAM;IACnB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;IAPd,kIAAkI;WAC3H,SAAS;IAChB,gHAAgH;iBACnG,MAAM;IACnB,wFAAwF;mBACzE,MAAM;IACrB,iFAAiF;UAC3E,QAAQ;;SAAR,QAAQ;UANP,SAAS;gBAEH,MAAM;kBAEJ,MAAM;;WA+Dd,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,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/packages/composition/split/src/Split.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region packages/composition/split/src/Split.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { style: {
+	flexBasis: 0,
+	flexGrow: 999,
+	flexShrink: 1,
+	minWidth: "50%"
+} };
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var Split_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Split",
+	props: {
+		side: { default: "left" },
+		collapseAt: { default: "48rem" },
+		minSideWidth: { default: "16rem" },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("flex", __props.side === "right" ? "flex-row-reverse" : "flex-row", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
+				style: { flexWrap: "wrap" }
+			}, [createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.minSideWidth,
+				flexGrow: 0,
+				flexShrink: 0,
+				minWidth: __props.minSideWidth
+			}) }, [renderSlot(_ctx.$slots, "side")], 4), createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")])], 2);
+		};
+	}
+});
+//#endregion
+export { Split_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=Split.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/composition/split/src/Split.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Split.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/split/src/Split.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Split — two-panel layout with intrinsic collapse.\n *\n * A flex row that places a side panel and a content area side by side above\n * a `collapseAt` width, and stacks them vertically below it. The side panel\n * gets a fixed minimum width; the content area grows to fill the remaining\n * space.\n *\n * This is the Every Layout \"Sidebar\" pattern, simplified for the common\n * two-panel case. The intrinsic collapse — panels stack when the container is\n * too narrow — avoids a breakpoint per viewport, and works identically inside\n * a sidebar-narrowed workspace and full-bleed on an ultra-wide monitor.\n *\n * A Split is a component, not a hand-rolled flex row with a media query,\n * because the collapse width is a layout decision the call site should name\n * rather than compute, and the stacking order (side above or below) is an\n * intent the `side` prop expresses.\n */\nexport type SplitSide = \"left\" | \"right\";\n\nexport type SplitGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitGap, \"none\">, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nexport { gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** The side the panel sits on. Controls stacking order when collapsed: \"left\" stacks the panel above, \"right\" stacks it below. */\n    side?: SplitSide;\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: string;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between the two panels. Tightens one notch below `sm` (except \"none\"). */\n    gap?: SplitGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap` is the intrinsic collapse mechanism: when the combined\n    `min-width` of both panels exceeds the container, the second panel wraps\n    to a new line. The `collapseAt` prop sets the breakpoint that controls\n    when `flex-wrap` is active.\n  -->\n  <div\n    :class=\"\n      cn(\n        'flex',\n        side === 'right' ? 'flex-row-reverse' : 'flex-row',\n        gap !== 'none' ? gapClass[gap] : undefined,\n      )\n    \"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!-- Side panel: fixed minimum width, does not grow. When collapsed the\n         panel takes full width (flex-basis: 100%). -->\n    <div\n      :style=\"{\n        flexBasis: minSideWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n        minWidth: minSideWidth,\n      }\"\n    >\n      <slot name=\"side\" />\n    </div>\n\n    <!-- Content area: fills remaining space, but demands at least 50% of\n         the container before wrapping. When collapsed it also takes full\n         width. -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,WAAsD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;GA8BE,OAAA,UAAA,GAAA,mBAsCM,OAAA;IArCH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,QAA0B,QAAA,SAAI,UAAA,qBAAA,YAAwD,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAA,CAAA;IAOvI,OAAO,EAAA,UAAA,OAEP;GAID,GAAA,CAAA,mBASM,OAAA,EARH,OAAK,eAAA;IAAuB,WAAA,QAAA;;;IAA4E,UAAA,QAAA;GAOzG,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAMtB,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/composition/split/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Split.vue";
+export type { SplitGap, SplitSide } from "./Split.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/composition/split/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/split/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/packages/composition/split/src/index.js

@@ -0,0 +1,2 @@
+import Split_default from "./Split.js";
+export { Split_default as default };

package/dist/packages/composition/stack/src/Stack.js

@@ -0,0 +1,7 @@
+import Stack_vue_vue_type_script_setup_true_lang_default, { alignClass, gapClass } from "./Stack.vue_vue_type_script_setup_true_lang.js";
+//#region packages/composition/stack/src/Stack.vue
+var Stack_default = Stack_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { alignClass, Stack_default as default, gapClass };
+
+//# sourceMappingURL=Stack.js.map

package/dist/packages/composition/stack/src/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":[],"sources":["../../../../../packages/composition/stack/src/Stack.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Stack — vertical flow with consistent, responsive gap.\n *\n * A flex column that tightens its gutter one step below the `sm` breakpoint,\n * where stacked items have no room to waste on air. The gap steps mirror\n * DashboardGrid's: the value each step names applies from `sm` up, and drops\n * one notch below it.\n *\n * A Stack is a component, not `flex flex-col gap-4`, for three reasons: the\n * responsive gap is the component's job (not every call site's), the\n * `separator` slot avoids a repeated `v-for` + `v-if` pattern, and the\n * `align` prop maps cross-axis intent to a Tailwind class without the caller\n * remembering which flex utility is which.\n */\nexport type StackGap = \"sm\" | \"md\" | \"lg\";\n\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nconst gapClass: Record<StackGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nconst alignClass: Record<StackAlign, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n} as const;\n\nexport { gapClass, alignClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Vertical gap step — mirrors DashboardGrid's scale. Tightens one notch below `sm`. */\n    gap?: StackGap;\n    /** Cross-axis alignment of children. */\n    align?: StackAlign;\n  }>(),\n  { gap: \"md\", align: \"stretch\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col', gapClass[gap], alignClass[align])\">\n    <!-- Each direct child is a stack item. The separator slot, if filled,\n         is rendered between every pair of children — a <Separator /> or a\n         thin <div class=\"border-t border-border\">, for example. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/composition/stack/src/Stack.vue.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Stack — vertical flow with consistent, responsive gap.
+ *
+ * A flex column that tightens its gutter one step below the `sm` breakpoint,
+ * where stacked items have no room to waste on air. The gap steps mirror
+ * DashboardGrid's: the value each step names applies from `sm` up, and drops
+ * one notch below it.
+ *
+ * A Stack is a component, not `flex flex-col gap-4`, for three reasons: the
+ * responsive gap is the component's job (not every call site's), the
+ * `separator` slot avoids a repeated `v-for` + `v-if` pattern, and the
+ * `align` prop maps cross-axis intent to a Tailwind class without the caller
+ * remembering which flex utility is which.
+ */
+export type StackGap = "sm" | "md" | "lg";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+declare const gapClass: Record<StackGap, string>;
+declare const alignClass: Record<StackAlign, string>;
+export { gapClass, alignClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Vertical gap step — mirrors DashboardGrid's scale. Tightens one notch below `sm`. */
+    gap?: StackGap;
+    /** Cross-axis alignment of children. */
+    align?: StackAlign;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Vertical gap step — mirrors DashboardGrid's scale. Tightens one notch below `sm`. */
+    gap?: StackGap;
+    /** Cross-axis alignment of children. */
+    align?: StackAlign;
+}> & Readonly<{}>, {
+    gap: StackGap;
+    align: StackAlign;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Stack.vue.d.ts.map

package/dist/packages/composition/stack/src/Stack.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/stack/src/Stack.vue"],"names":[],"mappings":"AA+DA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhE,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAI7B,CAAC;AAEX,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKjC,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wBACX,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,wFAAwF;UAClF,QAAQ;IACd,wCAAwC;YAChC,UAAU;;IAHlB,wFAAwF;UAClF,QAAQ;IACd,wCAAwC;YAChC,UAAU;;SAFZ,QAAQ;WAEN,UAAU;;cAmCR,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/packages/composition/stack/src/Stack.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/composition/stack/src/Stack.vue?vue&type=script&setup=true&lang.ts
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var alignClass = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch"
+};
+var Stack_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Stack",
+	props: {
+		gap: { default: "md" },
+		align: { default: "stretch" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex flex-col", gapClass[__props.gap], alignClass[__props.align])) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { alignClass, Stack_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=Stack.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/composition/stack/src/Stack.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/composition/stack/src/Stack.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Stack — vertical flow with consistent, responsive gap.\n *\n * A flex column that tightens its gutter one step below the `sm` breakpoint,\n * where stacked items have no room to waste on air. The gap steps mirror\n * DashboardGrid's: the value each step names applies from `sm` up, and drops\n * one notch below it.\n *\n * A Stack is a component, not `flex flex-col gap-4`, for three reasons: the\n * responsive gap is the component's job (not every call site's), the\n * `separator` slot avoids a repeated `v-for` + `v-if` pattern, and the\n * `align` prop maps cross-axis intent to a Tailwind class without the caller\n * remembering which flex utility is which.\n */\nexport type StackGap = \"sm\" | \"md\" | \"lg\";\n\nexport type StackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nconst gapClass: Record<StackGap, string> = {\n  sm: \"gap-2 sm:gap-3\",\n  md: \"gap-3 sm:gap-4\",\n  lg: \"gap-4 sm:gap-6\",\n} as const;\n\nconst alignClass: Record<StackAlign, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n} as const;\n\nexport { gapClass, alignClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Vertical gap step — mirrors DashboardGrid's scale. Tightens one notch below `sm`. */\n    gap?: StackGap;\n    /** Cross-axis alignment of children. */\n    align?: StackAlign;\n  }>(),\n  { gap: \"md\", align: \"stretch\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col', gapClass[gap], alignClass[align])\">\n    <!-- Each direct child is a stack item. The separator slot, if filled,\n         is rendered between every pair of children — a <Separator /> or a\n         thin <div class=\"border-t border-border\">, for example. -->\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;AAmBA,IAAM,WAAqC;CACzC,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,aAAyC;CAC7C,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX;;;;;;;;;GAoBE,OAAA,UAAA,GAAA,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,SAAS,QAAA,MAAM,WAAW,QAAA,MAAK,CAAA,EAAA,GAAA,CAI9D,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/packages/composition/stack/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Stack.vue";
+export type { StackAlign, StackGap } from "./Stack.vue";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/composition/stack/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/composition/stack/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/packages/composition/stack/src/index.js

@@ -0,0 +1,2 @@
+import Stack_default from "./Stack.js";
+export { Stack_default as default };

package/dist/packages/core/src/a11y-scope.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The WCAG scope Loom holds itself to: the assistive-technology and keyboard
+ * rules, not axe's SEO and document-structure best-practice set. A component
+ * library cannot know what document it will be rendered into, so a rule about
+ * the document is the consumer's to answer, not ours.
+ *
+ * Single source for every axe run against this package, and there is more
+ * than one, in different processes: the documentation site's live
+ * accessibility panel and the end-to-end gate that scans the built site. Both
+ * import this. The list must never be restated, or the panel a contributor
+ * reads and the gate that blocks the merge drift into disagreeing about what
+ * counts as a violation.
+ *
+ * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only
+ * needs this array — a Playwright run, a CI script — can read it without
+ * pulling in a single Vue component.
+ */
+export declare const WCAG_TAGS: readonly ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
+//# sourceMappingURL=a11y-scope.d.ts.map

package/dist/packages/core/src/a11y-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-scope.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/a11y-scope.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,SAAS,mEAAoE,CAAC"}

package/dist/packages/core/src/a11y-scope.js

@@ -0,0 +1,29 @@
+//#region packages/core/src/a11y-scope.ts
+/**
+* The WCAG scope Loom holds itself to: the assistive-technology and keyboard
+* rules, not axe's SEO and document-structure best-practice set. A component
+* library cannot know what document it will be rendered into, so a rule about
+* the document is the consumer's to answer, not ours.
+*
+* Single source for every axe run against this package, and there is more
+* than one, in different processes: the documentation site's live
+* accessibility panel and the end-to-end gate that scans the built site. Both
+* import this. The list must never be restated, or the panel a contributor
+* reads and the gate that blocks the merge drift into disagreeing about what
+* counts as a violation.
+*
+* Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only
+* needs this array — a Playwright run, a CI script — can read it without
+* pulling in a single Vue component.
+*/
+var WCAG_TAGS = [
+	"wcag2a",
+	"wcag2aa",
+	"wcag21a",
+	"wcag21aa",
+	"wcag22aa"
+];
+//#endregion
+export { WCAG_TAGS };
+
+//# sourceMappingURL=a11y-scope.js.map

package/dist/packages/core/src/a11y-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y-scope.js","names":[],"sources":["../../../../packages/core/src/a11y-scope.ts"],"sourcesContent":["/**\n * The WCAG scope Loom holds itself to: the assistive-technology and keyboard\n * rules, not axe's SEO and document-structure best-practice set. A component\n * library cannot know what document it will be rendered into, so a rule about\n * the document is the consumer's to answer, not ours.\n *\n * Single source for every axe run against this package, and there is more\n * than one, in different processes: the documentation site's live\n * accessibility panel and the end-to-end gate that scans the built site. Both\n * import this. The list must never be restated, or the panel a contributor\n * reads and the gate that blocks the merge drift into disagreeing about what\n * counts as a violation.\n *\n * Exported from the narrow `@ecoma-io/loom/a11y` entry so a tool that only\n * needs this array — a Playwright run, a CI script — can read it without\n * pulling in a single Vue component.\n */\nexport const WCAG_TAGS = [\"wcag2a\", \"wcag2aa\", \"wcag21a\", \"wcag21aa\", \"wcag22aa\"] as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAa,YAAY;CAAC;CAAU;CAAW;CAAW;CAAY;AAAU"}

package/dist/packages/core/src/attrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/attrs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,KAAK,CAAC;AAE3D;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI;IAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAC5C,CAOA"}

package/dist/packages/core/src/attrs.js

@@ -0,0 +1,28 @@
+import { computed, useAttrs } from "vue";
+//#region packages/core/src/attrs.ts
+/**
+* Split `useAttrs()` into the raw fallthrough attributes — read `.class` off
+* `attrs` for a `cn()` merge — and the same attributes minus `class` (`rest`,
+* for `v-bind` onto whichever node is not the `class` target).
+*
+* Every caller pairs this with `defineOptions({ inheritAttrs: false })`.
+* NumberField's input, Slider's thumb and Select's trigger each route `class`
+* onto one specific rendered node rather than taking Vue's default
+* single-root fallthrough, because `class` needs a Tailwind-aware merge while
+* the rest of the fallthrough — aria-*, data-testid — only needs to land
+* somewhere real.
+*/
+function useSplitAttrs() {
+	const attrs = useAttrs();
+	return {
+		attrs,
+		rest: computed(() => {
+			const { class: _class, ...others } = attrs;
+			return others;
+		})
+	};
+}
+//#endregion
+export { useSplitAttrs };
+
+//# sourceMappingURL=attrs.js.map

package/dist/packages/core/src/attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attrs.js","names":[],"sources":["../../../../packages/core/src/attrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef } from \"vue\";\n\n/**\n * Split `useAttrs()` into the raw fallthrough attributes — read `.class` off\n * `attrs` for a `cn()` merge — and the same attributes minus `class` (`rest`,\n * for `v-bind` onto whichever node is not the `class` target).\n *\n * Every caller pairs this with `defineOptions({ inheritAttrs: false })`.\n * NumberField's input, Slider's thumb and Select's trigger each route `class`\n * onto one specific rendered node rather than taking Vue's default\n * single-root fallthrough, because `class` needs a Tailwind-aware merge while\n * the rest of the fallthrough — aria-*, data-testid — only needs to land\n * somewhere real.\n */\nexport function useSplitAttrs(): {\n  attrs: Record<string, unknown>;\n  rest: ComputedRef<Record<string, unknown>>;\n} {\n  const attrs = useAttrs();\n  const rest = computed(() => {\n    const { class: _class, ...others } = attrs;\n    return others;\n  });\n  return { attrs, rest };\n}\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAgB,gBAGd;CACA,MAAM,QAAQ,SAAS;CAKvB,OAAO;EAAE;EAAO,MAJH,eAAe;GAC1B,MAAM,EAAE,OAAO,QAAQ,GAAG,WAAW;GACrC,OAAO;EACT,CACgB;CAAK;AACvB"}

package/dist/packages/core/src/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAC;AAqF7C;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/packages/core/src/cn.js

@@ -0,0 +1,61 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region packages/core/src/cn.ts
+var twMerge = extendTailwindMerge({ extend: { classGroups: {
+	"font-size": [
+		"text-display",
+		"text-heading",
+		"text-title",
+		"text-body",
+		"text-small",
+		"text-micro"
+	],
+	animate: [
+		"animate-fade",
+		"animate-fade-rise",
+		"animate-fade-out",
+		"animate-fade-fall",
+		"animate-scale-in",
+		"animate-scale-out",
+		"animate-shimmer",
+		"animate-progress-indeterminate",
+		"animate-toast-in",
+		"animate-slide-out-to-left",
+		"animate-slide-out-to-right",
+		"animate-slide-out-to-top",
+		"animate-slide-out-to-bottom"
+	],
+	duration: [
+		"duration-instant",
+		"duration-fast",
+		"duration-slow",
+		"duration-slower"
+	],
+	ease: ["ease-spring"],
+	z: [
+		"z-raised",
+		"z-sticky",
+		"z-chrome",
+		"z-overlay",
+		"z-toast"
+	],
+	opacity: [
+		"opacity-disabled",
+		"opacity-scrim",
+		"opacity-scrim-light"
+	],
+	scale: ["scale-press"]
+} } });
+/**
+* Merge conditional class names, resolving Tailwind conflicts so the last
+* utility in a group wins. Every component routes its `class` through this,
+* which is what lets a consumer override any utility from the outside without
+* reaching for `!important`.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=cn.js.map

package/dist/packages/core/src/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../../../packages/core/src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Loom's named type scale, as tailwind-merge knows it.\n *\n * `theme.css` declares the scale under Tailwind's `--text-*` namespace, which\n * makes `text-body` a font-size utility exactly like `text-sm`. tailwind-merge\n * cannot see that: it resolves conflicts from a static table of Tailwind's own\n * value names, and every unrecognised `text-<x>` falls through to the colour\n * group. So `text-micro` and `text-primary-foreground` looked like two colours,\n * the later one won, and the size was dropped on the floor.\n *\n * The failure is silent and it is not hypothetical — Indicator's count pill was\n * shipping without its 11px size, and it was found by reading a diff rather\n * than by anything failing. It also reached further than any one component:\n * `cn()` is the documented way a consumer overrides a class from outside, so\n * `<PageHeader class=\"text-small\">` had its size swallowed by the component's\n * own `text-foreground` and there was nothing to notice.\n *\n * Registering the six names restores the property they actually set. Both\n * directions then merge correctly against Tailwind's built-ins, because they\n * are one group rather than two: `text-xs text-body` keeps `text-body`, and\n * `text-body text-xs` keeps `text-xs`.\n */\nconst TYPE_SCALE = [\n  \"text-display\",\n  \"text-heading\",\n  \"text-title\",\n  \"text-body\",\n  \"text-small\",\n  \"text-micro\",\n];\n\n/**\n * The rest of the named vocabulary, registered for the same reason and found by\n * probing rather than by reading — every one of these was returning *both*\n * classes, leaving the winner to stylesheet order instead of to what the\n * component wrote.\n *\n * A registration here is the precondition for adding a name to `theme.css`, not\n * a follow-up to it. Anything Loom names under a namespace tailwind-merge\n * resolves by value table — durations, easings, animations — is invisible to it\n * until it appears below, and the defect it produces is the silent one this\n * file already exists to document.\n */\nconst ANIMATIONS = [\n  \"animate-fade\",\n  \"animate-fade-rise\",\n  \"animate-fade-out\",\n  \"animate-fade-fall\",\n  \"animate-scale-in\",\n  \"animate-scale-out\",\n  \"animate-shimmer\",\n  \"animate-progress-indeterminate\",\n  \"animate-toast-in\",\n  \"animate-slide-out-to-left\",\n  \"animate-slide-out-to-right\",\n  \"animate-slide-out-to-top\",\n  \"animate-slide-out-to-bottom\",\n];\n\n// The four `@utility` blocks at the foot of `theme.css`. They exist because\n// Tailwind's generated `duration-*` takes a millisecond count and not a token\n// name, which is the same reason tailwind-merge cannot see them either.\nconst DURATIONS = [\"duration-instant\", \"duration-fast\", \"duration-slow\", \"duration-slower\"];\n\n// `ease-out`, `ease-in` and `ease-in-out` are Tailwind's own names and already\n// resolve; only the restrained overshoot is ours.\nconst EASINGS = [\"ease-spring\"];\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": TYPE_SCALE,\n      animate: ANIMATIONS,\n      duration: DURATIONS,\n      ease: EASINGS,\n      z: [\"z-raised\", \"z-sticky\", \"z-chrome\", \"z-overlay\", \"z-toast\"],\n      opacity: [\"opacity-disabled\", \"opacity-scrim\", \"opacity-scrim-light\"],\n      scale: [\"scale-press\"],\n    },\n  },\n});\n\n/**\n * Merge conditional class names, resolving Tailwind conflicts so the last\n * utility in a group wins. Every component routes its `class` through this,\n * which is what lets a consumer override any utility from the outside without\n * reaching for `!important`.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAuEA,IAAM,UAAU,oBAAoB,EAClC,QAAQ,EACN,aAAa;CACX,aAAa;EAhDjB;EACA;EACA;EACA;EACA;EACA;CA2CiB;CACb,SAAS;EA5Bb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAgBa;CACT,UAAU;EAXG;EAAoB;EAAiB;EAAiB;CAWzD;CACV,MAAM,CARK,aAQL;CACN,GAAG;EAAC;EAAY;EAAY;EAAY;EAAa;CAAS;CAC9D,SAAS;EAAC;EAAoB;EAAiB;CAAqB;CACpE,OAAO,CAAC,aAAa;AACvB,EACF,EACF,CAAC;;;;;;;AAQD,SAAgB,GAAG,GAAG,QAA8B;CAClD,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/packages/core/src/icon-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-defaults.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/icon-defaults.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAE5C"}

package/dist/packages/core/src/icon-defaults.js

@@ -0,0 +1,32 @@
+import { setLucideProps } from "@lucide/vue";
+//#region packages/core/src/icon-defaults.ts
+/**
+* Apply the Loom icon defaults once at a host's root: size 16, stroke 1.5 —
+* hairline-first, matching the 1px border language. Every `@lucide/vue` icon
+* rendered after this call inherits them, so an individual icon declares
+* `size` or `strokeWidth` only where it deliberately diverges.
+*
+* The one standing divergence: a glyph rendered at 12px or below declares
+* `stroke-width` 2.5 exactly. Stroke lives on the 24 grid and scales with
+* size, so 1.5 at 12px renders 0.75 device pixels against 1.0 at 16px; 2.5
+* restores the optical weight.
+*
+* The numbers live here, not in each host.
+*
+* Call it from the `setup()` of the host's root component — `App.vue`, or the
+* component a documentation theme wraps its layout in. It resolves to Vue's
+* `provide()`, so it needs an active component instance: called from a plain
+* entry module it silently provides nothing, and every icon keeps Lucide's own
+* 24/2 defaults. There is no app-level alternative, because the injection key
+* Lucide provides under is not part of its public surface.
+*/
+function applyLoomIconDefaults() {
+	setLucideProps({
+		size: 16,
+		strokeWidth: 1.5
+	});
+}
+//#endregion
+export { applyLoomIconDefaults };
+
+//# sourceMappingURL=icon-defaults.js.map

package/dist/packages/core/src/icon-defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-defaults.js","names":[],"sources":["../../../../packages/core/src/icon-defaults.ts"],"sourcesContent":["import { setLucideProps } from \"@lucide/vue\";\n\n/**\n * Apply the Loom icon defaults once at a host's root: size 16, stroke 1.5 —\n * hairline-first, matching the 1px border language. Every `@lucide/vue` icon\n * rendered after this call inherits them, so an individual icon declares\n * `size` or `strokeWidth` only where it deliberately diverges.\n *\n * The one standing divergence: a glyph rendered at 12px or below declares\n * `stroke-width` 2.5 exactly. Stroke lives on the 24 grid and scales with\n * size, so 1.5 at 12px renders 0.75 device pixels against 1.0 at 16px; 2.5\n * restores the optical weight.\n *\n * The numbers live here, not in each host.\n *\n * Call it from the `setup()` of the host's root component — `App.vue`, or the\n * component a documentation theme wraps its layout in. It resolves to Vue's\n * `provide()`, so it needs an active component instance: called from a plain\n * entry module it silently provides nothing, and every icon keeps Lucide's own\n * 24/2 defaults. There is no app-level alternative, because the injection key\n * Lucide provides under is not part of its public surface.\n */\nexport function applyLoomIconDefaults(): void {\n  setLucideProps({ size: 16, strokeWidth: 1.5 });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,wBAA8B;CAC5C,eAAe;EAAE,MAAM;EAAI,aAAa;CAAI,CAAC;AAC/C"}

package/dist/packages/core/src/index.d.ts

@@ -0,0 +1,9 @@
+export { cn } from "./cn";
+export { optional } from "./props";
+export { useSplitAttrs } from "./attrs";
+export { LIST_STAGGER_CAP, LIST_STAGGER_STEP_MS, listStaggerDelay } from "./motion";
+export { WCAG_TAGS } from "./a11y-scope";
+export { useTheme, themeScript } from "./theme";
+export type { ThemePreference, ResolvedTheme } from "./theme";
+export { applyLoomIconDefaults } from "./icon-defaults";
+//# sourceMappingURL=index.d.ts.map

package/dist/packages/core/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/core/src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGpF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}