@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/composition/scroll-reel/src/ScrollReel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { cn } from "../../../core/src/cn.js";
+import { smoothScrollBehavior } from "../../../core/src/motion.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/labels.js";
+import "../../../labels/src/index.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref } from "vue";
+//#region packages/composition/scroll-reel/src/ScrollReel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+/**
+* Loom's English, co-located with the component so it tree-shakes with it,
+* and exported so a host can build a partial vocabulary against the real
+* thing rather than a transcription of it. The type itself lives in the
+* labels registry (`ScrollReelLabels`) like every other slot's, so
+* `provideLoomLabels({ scrollReel: … })` reaches this component exactly as
+* it reaches every primitive — composition sits above labels in the layer
+* direction, and a host localising one reel should not have to learn a
+* second seam to do it.
+*/
+var SCROLL_REEL_LABELS = { region: "Scrollable content" };
+var snapClass = {
+	start: "snap-x snap-mandatory snap-start",
+	center: "snap-x snap-mandatory snap-center",
+	end: "snap-x snap-mandatory snap-end",
+	none: ""
+};
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var ScrollReel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ScrollReel",
+	props: {
+		snap: { default: "start" },
+		gap: { default: "md" },
+		labels: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const text = useLabels("scrollReel", SCROLL_REEL_LABELS, () => props.labels);
+		const reel = ref(null);
+		const scrollBehavior = smoothScrollBehavior;
+		/**
+		* Keyboard navigation for scroll-snap: arrow keys scroll to the next or
+		* previous snap-aligned child. Without this, the browser's default arrow-key
+		* behaviour scrolls by a fixed pixel amount that rarely aligns with snap
+		* points, leaving the strip between two items.
+		*/
+		function onKeydown(event) {
+			const el = reel.value;
+			if (!el) return;
+			if (event.target.closest("input, select, textarea, [contenteditable]")) return;
+			const direction = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+			if (direction === 0 && event.key !== "Home" && event.key !== "End") return;
+			event.preventDefault();
+			const behavior = scrollBehavior();
+			if (event.key === "Home") {
+				el.scrollTo({
+					left: 0,
+					behavior
+				});
+				return;
+			}
+			if (event.key === "End") {
+				el.scrollTo({
+					left: el.scrollWidth,
+					behavior
+				});
+				return;
+			}
+			const children = [...el.children];
+			const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;
+			for (const child of direction === 1 ? children : children.reverse()) {
+				const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;
+				if (direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1) {
+					child.scrollIntoView({
+						behavior,
+						block: "nearest",
+						inline: "start"
+					});
+					break;
+				}
+			}
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "reel",
+				ref: reel,
+				class: normalizeClass(["overflow-x-auto", unref(cn)("flex flex-row", snapClass[__props.snap], gapClass[__props.gap])]),
+				tabindex: "0",
+				role: "region",
+				"aria-label": unref(text).region,
+				onKeydown
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SCROLL_REEL_LABELS, ScrollReel_vue_vue_type_script_setup_true_lang_default as default, gapClass, snapClass };
+
+//# sourceMappingURL=ScrollReel.vue_vue_type_script_setup_true_lang.js.map

package/dist/composition/scroll-reel/src/ScrollReel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollReel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/composition/scroll-reel/src/ScrollReel.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * ScrollReel — horizontal scrolling strip with scroll-snap.\n *\n * A touch-friendly, keyboard-navigable horizontal scroll container with\n * optional scroll-snap alignment. Arrow keys scroll to the next or previous\n * snap point; the `Home` and `End` keys jump to the start or end of the\n * strip.\n *\n * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,\n * because keyboard accessibility for scroll-snap requires JavaScript (arrow\n * keys must find the next snap-aligned child and scroll it into view), and\n * the gap tightens one step below `sm` like Stack and DashboardGrid.\n */\nexport type ScrollReelSnap = \"start\" | \"center\" | \"end\" | \"none\";\n\nexport type ScrollReelGap = \"sm\" | \"md\" | \"lg\";\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it,\n * and exported so a host can build a partial vocabulary against the real\n * thing rather than a transcription of it. The type itself lives in the\n * labels registry (`ScrollReelLabels`) like every other slot's, so\n * `provideLoomLabels({ scrollReel: … })` reaches this component exactly as\n * it reaches every primitive — composition sits above labels in the layer\n * direction, and a host localising one reel should not have to learn a\n * second seam to do it.\n */\nexport const SCROLL_REEL_LABELS: ScrollReelLabels = {\n  region: \"Scrollable content\",\n};\n\nconst snapClass: Record<ScrollReelSnap, string> = {\n  start: \"snap-x snap-mandatory snap-start\",\n  center: \"snap-x snap-mandatory snap-center\",\n  end: \"snap-x snap-mandatory snap-end\",\n  // `none` means no snap alignment — items scroll freely.\n  none: \"\",\n} as const;\n\nconst gapClass: Record<ScrollReelGap, 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 { snapClass, gapClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { cn, smoothScrollBehavior } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides, type ScrollReelLabels } from \"@ecoma-io/loom-labels\";\n\nconst props = withDefaults(\n  defineProps<{\n    /** Scroll-snap alignment. \"none\" disables snap entirely. */\n    snap?: ScrollReelSnap;\n    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: ScrollReelGap;\n    /**\n     * Names for what the reel says out loud, as any subset of\n     * `ScrollReelLabels` — the per-instance correction over\n     * `SCROLL_REEL_LABELS`, in the same shape a primitive's `labels` prop\n     * takes.\n     */\n    labels?: LabelOverrides<ScrollReelLabels>;\n  }>(),\n  { snap: \"start\", gap: \"md\" },\n);\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves (own prop, then the host vocabulary from `provideLoomLabels`, then\n// these English defaults), and a template reading the raw prop would be\n// reading the overrides rather than the answer.\nconst text = useLabels(\"scrollReel\", SCROLL_REEL_LABELS, () => props.labels);\n\nconst reel = ref<HTMLDivElement | null>(null);\n\n// The reduced-motion softening lives in core (`smoothScrollBehavior`): an\n// explicit `\"smooth\"` in a scrollTo dictionary overrides the stylesheet's\n// kill-switch, so the question has to be answered at the call site — and\n// Carousel asks it too, which is why the answer is shared rather than owned.\nconst scrollBehavior = smoothScrollBehavior;\n\n/**\n * Keyboard navigation for scroll-snap: arrow keys scroll to the next or\n * previous snap-aligned child. Without this, the browser's default arrow-key\n * behaviour scrolls by a fixed pixel amount that rarely aligns with snap\n * points, leaving the strip between two items.\n */\nfunction onKeydown(event: KeyboardEvent) {\n  const el = reel.value;\n  if (!el) return;\n\n  // A keypress inside a nested editable (search field, combobox, contenteditable\n  // chip) bubbles up to this listener: the arrows and Home/End are the caret's\n  // keys there, not the reel's. Step aside so the text control keeps them —\n  // the same boundary Toolbar draws at its own listener.\n  if ((event.target as HTMLElement).closest(\"input, select, textarea, [contenteditable]\")) return;\n\n  const direction = event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n  if (direction === 0 && event.key !== \"Home\" && event.key !== \"End\") return;\n\n  event.preventDefault();\n\n  const behavior = scrollBehavior();\n  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior });\n    return;\n  }\n\n  // Find the next snap-aligned child in the scroll direction.\n  const children = [...el.children] as HTMLElement[];\n  const scrollEdge = direction === 1 ? el.scrollLeft + el.clientWidth : el.scrollLeft;\n\n  for (const child of direction === 1 ? children : children.reverse()) {\n    const childEdge = direction === 1 ? child.offsetLeft : child.offsetLeft + child.offsetWidth;\n    const isNext = direction === 1 ? childEdge > scrollEdge - 1 : childEdge < scrollEdge + 1;\n    if (isNext) {\n      child.scrollIntoView({ behavior, block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + an accessible name make this a named,\n    focusable landmark region. The keyboard handler is what makes the\n    scroll-snap strip navigable by arrow keys — a genuine interaction on\n    a genuinely interactive element. The rule does not account for\n    non-interactive ARIA roles with an explicit tabindex. -->\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"reel\"\n    class=\"overflow-x-auto\"\n    :class=\"cn('flex flex-row', snapClass[snap], gapClass[gap])\"\n    tabindex=\"0\"\n    role=\"region\"\n    :aria-label=\"text.region\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,IAAa,qBAAuC,EAClD,QAAQ,qBACV;AAEA,IAAM,YAA4C;CAChD,OAAO;CACP,QAAQ;CACR,KAAK;CAEL,MAAM;AACR;AAEA,IAAM,WAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;EAUA,MAAM,QAAQ;EAqBd,MAAM,OAAO,UAAU,cAAc,0BAA0B,MAAM,MAAM;EAE3E,MAAM,OAAO,IAA2B,IAAI;EAM5C,MAAM,iBAAiB;;;;;;;EAQvB,SAAS,UAAU,OAAsB;GACvC,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI;GAMT,IAAK,MAAM,OAAuB,QAAQ,4CAA4C,GAAG;GAEzF,MAAM,YAAY,MAAM,QAAQ,eAAe,IAAI,MAAM,QAAQ,cAAc,KAAK;GACpF,IAAI,cAAc,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAEpE,MAAM,eAAe;GAErB,MAAM,WAAW,eAAe;GAChC,IAAI,MAAM,QAAQ,QAAQ;IACxB,GAAG,SAAS;KAAE,MAAM;KAAG;IAAS,CAAC;IACjC;GACF;GACA,IAAI,MAAM,QAAQ,OAAO;IACvB,GAAG,SAAS;KAAE,MAAM,GAAG;KAAa;IAAS,CAAC;IAC9C;GACF;GAGA,MAAM,WAAW,CAAC,GAAG,GAAG,QAAQ;GAChC,MAAM,aAAa,cAAc,IAAI,GAAG,aAAa,GAAG,cAAc,GAAG;GAEzE,KAAK,MAAM,SAAS,cAAc,IAAI,WAAW,SAAS,QAAQ,GAAG;IACnE,MAAM,YAAY,cAAc,IAAI,MAAM,aAAa,MAAM,aAAa,MAAM;IAEhF,IADe,cAAc,IAAI,YAAY,aAAa,IAAI,YAAY,aAAa,GAC3E;KACV,MAAM,eAAe;MAAE;MAAU,OAAO;MAAW,QAAQ;KAAQ,CAAC;KACpE;IACF;GACF;EACF;;GAUE,OAAA,UAAA,GAAA,mBAUM,OAAA;IATA,SAAA;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,mBACE,MAAA,EAAA,CAAE,CAAA,iBAAkB,UAAU,QAAA,OAAO,SAAS,QAAA,IAAG,CAAA,CAAA;IACzD,UAAS;IACT,MAAK;IACJ,cAAY,MAAA,IAAA,CAAI,CAAC;IACR;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.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=\"cn('flex flex-row', gap ? 'gap-3 sm:gap-4' : undefined)\"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, sidebar first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-sidebar for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n    </template>\n    <template v-else>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,46 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { Fragment, 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 flex-row", __props.gap ? "gap-3 sm:gap-4" : void 0)),
+				style: { flexWrap: "wrap" }
+			}, [__props.side === "right" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { style: normalizeStyle({
+				flexBasis: 0,
+				flexGrow: 999,
+				flexShrink: 1,
+				minWidth: __props.contentMin
+			}) }, [renderSlot(_ctx.$slots, "default")], 4), createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.sideWidth,
+				flexGrow: 0,
+				flexShrink: 1
+			}) }, [renderSlot(_ctx.$slots, "side")], 4)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [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)], 64))], 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/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=\"cn('flex flex-row', gap ? 'gap-3 sm:gap-4' : undefined)\"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, sidebar first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-sidebar for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n    </template>\n    <template v-else>\n      <!-- Sidebar: preferred width as flex-basis, does not grow. -->\n      <div\n        :style=\"{\n          flexBasis: sideWidth,\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n      >\n        <slot name=\"side\" />\n      </div>\n      <!-- Content: fills all remaining space (flex-grow: 999), but its\n           min-width: contentMin triggers wrapping when there isn't room. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: contentMin,\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;GAiDE,OAAA,UAAA,GAAA,mBA2DM,OAAA;IA1DH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,QAAA,MAAG,mBAAsB,KAAA,CAAS,CAAA;IAC7D,OAAO,EAAA,UAAA,OAAA;GASQ,GAAA,CAAA,QAAA,SAAI,WAApB,UAAA,GAAA,mBAuBW,UAAA,EAAA,KAAA,EAAA,GAAA,CApBT,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAAkG,UAAA,QAAA;GAOxG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAGV,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;GAM/B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAGxB,UAAA,GAAA,mBAuBW,UAAA,EAAA,KAAA,EAAA,GAAA,CArBT,mBAQM,OAAA,EAPH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;GAM/B,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAItB,mBASM,OAAA,EARH,OAAK,eAAA;;;;IAAkG,UAAA,QAAA;GAOxG,CAAA,EAAA,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA"}

package/dist/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, and\n * stacks them vertically once the container is too narrow for both. The side\n * panel gets a fixed minimum width; the content area grows to fill the\n * remaining 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 wrap-and-floor technique is non-obvious and easy to get wrong,\n * and the stacking order (side above or below) is an intent the `side` prop\n * 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    /** 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\", 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. Where that happens is decided by the panels' own minimum\n    widths — there is no breakpoint prop to set it with.\n  -->\n  <div\n    :class=\"cn('flex flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, side first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-panel for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. Wrapped onto a line of its own it\n           takes that whole line: flex-basis 0 starts from nothing and\n           flex-grow 999 absorbs every free pixel on the line. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Side panel: fixed minimum width, does not grow. Wrapped onto a\n           line of its own it keeps exactly that declared width — flex-grow 0\n           with an explicit basis never widens, so the full-line stretch is\n           the content side's alone. -->\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    </template>\n    <template v-else>\n      <!-- Side panel: fixed minimum width, does not grow. Wrapped onto a\n           line of its own it keeps exactly that declared width — flex-grow 0\n           with an explicit basis never widens, so the full-line stretch is\n           the content side's alone. -->\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      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. Wrapped onto a line of its own it\n           takes that whole line: flex-basis 0 starts from nothing and\n           flex-grow 999 absorbs every free pixel on the line. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,51 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { Fragment, 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 _hoisted_2 = { 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" },
+		minSideWidth: { default: "16rem" },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("flex flex-row", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
+				style: { flexWrap: "wrap" }
+			}, [__props.side === "right" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.minSideWidth,
+				flexGrow: 0,
+				flexShrink: 0,
+				minWidth: __props.minSideWidth
+			}) }, [renderSlot(_ctx.$slots, "side")], 4)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { style: normalizeStyle({
+				flexBasis: __props.minSideWidth,
+				flexGrow: 0,
+				flexShrink: 0,
+				minWidth: __props.minSideWidth
+			}) }, [renderSlot(_ctx.$slots, "side")], 4), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 64))], 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/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, and\n * stacks them vertically once the container is too narrow for both. The side\n * panel gets a fixed minimum width; the content area grows to fill the\n * remaining 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 wrap-and-floor technique is non-obvious and easy to get wrong,\n * and the stacking order (side above or below) is an intent the `side` prop\n * 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    /** 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\", 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. Where that happens is decided by the panels' own minimum\n    widths — there is no breakpoint prop to set it with.\n  -->\n  <div\n    :class=\"cn('flex flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{\n      flexWrap: 'wrap',\n    }\"\n  >\n    <!--\n      Document order follows `side`, so the wrapped stack never contradicts\n      the side-by-side row and screen-reader order matches the visual one:\n      content first when `side=\"right\"`, side first when `side=\"left\"`.\n      flex-row (never reverse) plus this ordering is what makes the wrap\n      produce content-above-panel for `side=\"right\"`.\n    -->\n    <template v-if=\"side === 'right'\">\n      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. Wrapped onto a line of its own it\n           takes that whole line: flex-basis 0 starts from nothing and\n           flex-grow 999 absorbs every free pixel on the line. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n      <!-- Side panel: fixed minimum width, does not grow. Wrapped onto a\n           line of its own it keeps exactly that declared width — flex-grow 0\n           with an explicit basis never widens, so the full-line stretch is\n           the content side's alone. -->\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    </template>\n    <template v-else>\n      <!-- Side panel: fixed minimum width, does not grow. Wrapped onto a\n           line of its own it keeps exactly that declared width — flex-grow 0\n           with an explicit basis never widens, so the full-line stretch is\n           the content side's alone. -->\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      <!-- Content area: fills remaining space, but demands at least 50% of\n           the container before wrapping. Wrapped onto a line of its own it\n           takes that whole line: flex-basis 0 starts from nothing and\n           flex-grow 999 absorbs every free pixel on the line. -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n      >\n        <slot />\n      </div>\n    </template>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,WAAsD;CAC1D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,mBAyEM,OAAA;IAxEH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iBAAkB,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAS,CAAA;IACrE,OAAO,EAAA,UAAA,OAEP;GASe,GAAA,CAAA,QAAA,SAAI,WAApB,UAAA,GAAA,mBA6BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAxBT,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GAMV,mBASM,OAAA,EARH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;IAAkF,UAAA,QAAA;GAOjH,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAGxB,UAAA,GAAA,mBA6BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAxBT,mBASM,OAAA,EARH,OAAK,eAAA;IAAyB,WAAA,QAAA;;;IAAkF,UAAA,QAAA;GAOjH,CAAA,EAAA,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAMtB,mBASM,OATN,YASM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,CAAA"}

package/dist/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/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"}