@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/composition/Frame/Frame.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Frame.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Frame/Frame.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Frame — fixed-ratio container.\n *\n * A container that maintains a consistent aspect ratio regardless of its\n * width, using CSS `aspect-ratio`. Useful for media embeds, image thumbnails,\n * and any content that needs a fixed ratio (video players, avatar crops,\n * card illustrations).\n *\n * A Frame is a component, not `aspect-video`, because the `ratio` prop\n * names the intent (\"16:9\", \"1:1\") rather than requiring the caller to\n * compute the `aspect-ratio` value, and the component handles the\n * `overflow: hidden` that prevents content from distorting the frame.\n */\nexport type FrameRatio = \"16:9\" | \"4:3\" | \"1:1\" | \"3:4\";\n\nconst aspectRatioValue: Record<FrameRatio, string> = {\n  \"16:9\": \"16 / 9\",\n  \"4:3\": \"4 / 3\",\n  \"1:1\": \"1 / 1\",\n  \"3:4\": \"3 / 4\",\n} as const;\n\nexport { aspectRatioValue };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** The aspect ratio to maintain. Named ratios or any valid CSS `aspect-ratio` value (e.g. \"21 / 9\"). */\n    ratio?: FrameRatio | string;\n  }>(),\n  { ratio: \"16:9\" },\n);\n\n/** Resolve a named ratio or pass through a raw CSS value. */\nfunction resolveRatio(r: FrameRatio | string): string {\n  return r in aspectRatioValue ? aspectRatioValue[r as FrameRatio] : r;\n}\n</script>\n\n<template>\n  <div :class=\"cn('relative overflow-hidden w-full')\" :style=\"{ aspectRatio: resolveRatio(ratio) }\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;AAgBA,IAAM,mBAA+C;CACnD,QAAQ;CACR,OAAO;CACP,OAAO;CACP,OAAO;AACT;;;;;;EAiBA,SAAS,aAAa,GAAgC;GACpD,OAAO,KAAK,mBAAmB,iBAAiB,KAAmB;EACrE;;GAIE,OAAA,UAAA,GAAA,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,iCAAA,CAAA;IAAsC,OAAK,eAAA,EAAA,aAAiB,aAAa,QAAA,KAAK,EAAA,CAAA;GAC3F,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/composition/Grid/Grid.js

@@ -1,7 +0,0 @@
-import Grid_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./Grid.vue_vue_type_script_setup_true_lang.js";
-//#region src/composition/Grid/Grid.vue
-var Grid_default = Grid_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { Grid_default as default, gapClass };
-
-//# sourceMappingURL=Grid.js.map

package/dist/composition/Grid/Grid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/composition/Grid/Grid.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Grid — CSS Grid with responsive column count.\n *\n * A grid that derives its column count from the container's own width\n * (`auto-fit` + `minmax`, never fixed `grid-cols-N` breakpoints), so the same\n * grid reflows inside a sidebar-narrowed workspace and full-bleed on an\n * ultra-wide monitor alike.\n *\n * A Grid is a component, not `grid grid-cols-3 gap-4`, because the responsive\n * column count is the component's job (a fixed count needs one breakpoint per\n * viewport and is already wrong the moment the grid sits in a sidebar narrower\n * than the viewport), and the gap tightens one step below `sm` like Stack and\n * DashboardGrid.\n */\nexport type GridGap = \"sm\" | \"md\" | \"lg\";\n\nconst gapClass: Record<GridGap, 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 \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Narrowest a column may get before the grid drops to fewer columns. Any valid CSS length (e.g. \"14rem\"). */\n    minColWidth?: string;\n    /** Column/row gap step — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: GridGap;\n  }>(),\n  { minColWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <div\n    class=\"grid\"\n    :class=\"cn(gapClass[gap])\"\n    :style=\"{ gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minColWidth}), 1fr))` }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Grid/Grid.vue"],"names":[],"mappings":"AAuDA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAI5B,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,8GAA8G;kBAChG,MAAM;IACpB,kFAAkF;UAC5E,OAAO;;IAHb,8GAA8G;kBAChG,MAAM;IACpB,kFAAkF;UAC5E,OAAO;;SAAP,OAAO;iBAFC,MAAM;;cAuCV,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/Grid/Grid.vue_vue_type_script_setup_true_lang.js

@@ -1,27 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
-//#region src/composition/Grid/Grid.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 Grid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Grid",
-	props: {
-		minColWidth: { default: "16rem" },
-		gap: { default: "md" }
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(["grid", unref(cn)(gapClass[__props.gap])]),
-				style: normalizeStyle({ gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${__props.minColWidth}), 1fr))` })
-			}, [renderSlot(_ctx.$slots, "default")], 6);
-		};
-	}
-});
-//#endregion
-export { Grid_vue_vue_type_script_setup_true_lang_default as default, gapClass };
-
-//# sourceMappingURL=Grid.vue_vue_type_script_setup_true_lang.js.map

package/dist/composition/Grid/Grid.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Grid/Grid.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Grid — CSS Grid with responsive column count.\n *\n * A grid that derives its column count from the container's own width\n * (`auto-fit` + `minmax`, never fixed `grid-cols-N` breakpoints), so the same\n * grid reflows inside a sidebar-narrowed workspace and full-bleed on an\n * ultra-wide monitor alike.\n *\n * A Grid is a component, not `grid grid-cols-3 gap-4`, because the responsive\n * column count is the component's job (a fixed count needs one breakpoint per\n * viewport and is already wrong the moment the grid sits in a sidebar narrower\n * than the viewport), and the gap tightens one step below `sm` like Stack and\n * DashboardGrid.\n */\nexport type GridGap = \"sm\" | \"md\" | \"lg\";\n\nconst gapClass: Record<GridGap, 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 \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Narrowest a column may get before the grid drops to fewer columns. Any valid CSS length (e.g. \"14rem\"). */\n    minColWidth?: string;\n    /** Column/row gap step — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: GridGap;\n  }>(),\n  { minColWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <div\n    class=\"grid\"\n    :class=\"cn(gapClass[gap])\"\n    :style=\"{ gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minColWidth}), 1fr))` }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;AAiBA,IAAM,WAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;GAoBE,OAAA,UAAA,GAAA,mBAMM,OAAA;IALJ,OAAK,eAAA,CAAC,QACE,MAAA,EAAA,CAAE,CAAC,SAAS,QAAA,IAAG,CAAA,CAAA;IACtB,OAAK,eAAA,EAAA,qBAAA,qCAA8D,QAAA,YAAW,UAAA,CAAA;GAE/E,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/composition/Inline/Inline.js

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

package/dist/composition/Inline/Inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Inline.js","names":[],"sources":["../../../src/composition/Inline/Inline.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Inline — horizontal flow with wrap, consistent gap.\n *\n * A flex row that wraps naturally at the container edge and tightens its gutter\n * one step below the `sm` breakpoint. The gap steps mirror Stack's and\n * DashboardGrid's: the value each step names applies from `sm` up, and drops\n * one notch below it.\n *\n * An Inline is a component, not `flex flex-row flex-wrap gap-4`, because the\n * responsive gap is the component's job, the `align` prop maps cross-axis\n * intent to a class, and the `wrap` prop controls line-wrapping behaviour.\n */\nexport type InlineGap = \"sm\" | \"md\" | \"lg\";\n\nexport type InlineAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n\nconst gapClass: Record<InlineGap, 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<InlineAlign, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n  baseline: \"items-baseline\",\n} as const;\n\nexport { gapClass, alignClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Horizontal gap step — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: InlineGap;\n    /** Cross-axis alignment of children. */\n    align?: InlineAlign;\n    /** Whether items wrap to new lines when they exceed the container width. */\n    wrap?: boolean;\n  }>(),\n  { gap: \"md\", align: \"stretch\", wrap: true },\n);\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-row', gapClass[gap], alignClass[align], wrap ? 'flex-wrap' : 'flex-nowrap')\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Inline.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Inline/Inline.vue"],"names":[],"mappings":"AAiEA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE9E,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9B,CAAC;AAEX,QAAA,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAMlC,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wBACX,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,kFAAkF;UAC5E,SAAS;IACf,wCAAwC;YAChC,WAAW;IACnB,4EAA4E;WACrE,OAAO;;IALd,kFAAkF;UAC5E,SAAS;IACf,wCAAwC;YAChC,WAAW;IACnB,4EAA4E;WACrE,OAAO;;SAJR,SAAS;UAIR,OAAO;WAFN,WAAW;;cAuCT,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/Inline/Inline.vue_vue_type_script_setup_true_lang.js

@@ -1,35 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
-//#region src/composition/Inline/Inline.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",
-	baseline: "items-baseline"
-};
-var Inline_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "Inline",
-	props: {
-		gap: { default: "md" },
-		align: { default: "stretch" },
-		wrap: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(__props) {
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("flex flex-row", gapClass[__props.gap], alignClass[__props.align], __props.wrap ? "flex-wrap" : "flex-nowrap")) }, [renderSlot(_ctx.$slots, "default")], 2);
-		};
-	}
-});
-//#endregion
-export { alignClass, Inline_vue_vue_type_script_setup_true_lang_default as default, gapClass };
-
-//# sourceMappingURL=Inline.vue_vue_type_script_setup_true_lang.js.map

package/dist/composition/Inline/Inline.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Inline.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Inline/Inline.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Inline — horizontal flow with wrap, consistent gap.\n *\n * A flex row that wraps naturally at the container edge and tightens its gutter\n * one step below the `sm` breakpoint. The gap steps mirror Stack's and\n * DashboardGrid's: the value each step names applies from `sm` up, and drops\n * one notch below it.\n *\n * An Inline is a component, not `flex flex-row flex-wrap gap-4`, because the\n * responsive gap is the component's job, the `align` prop maps cross-axis\n * intent to a class, and the `wrap` prop controls line-wrapping behaviour.\n */\nexport type InlineGap = \"sm\" | \"md\" | \"lg\";\n\nexport type InlineAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n\nconst gapClass: Record<InlineGap, 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<InlineAlign, string> = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n  baseline: \"items-baseline\",\n} as const;\n\nexport { gapClass, alignClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Horizontal gap step — mirrors Stack's scale. Tightens one notch below `sm`. */\n    gap?: InlineGap;\n    /** Cross-axis alignment of children. */\n    align?: InlineAlign;\n    /** Whether items wrap to new lines when they exceed the container width. */\n    wrap?: boolean;\n  }>(),\n  { gap: \"md\", align: \"stretch\", wrap: true },\n);\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-row', gapClass[gap], alignClass[align], wrap ? 'flex-wrap' : 'flex-nowrap')\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;AAiBA,IAAM,WAAsC;CAC1C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,aAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ;;;;;;;;;;;;;GAsBE,OAAA,UAAA,GAAA,mBAMM,OAAA,EALH,OAAK,eAAS,MAAA,EAAA,CAAE,CAAA,iBAAkB,SAAS,QAAA,MAAM,WAAW,QAAA,QAAQ,QAAA,OAAI,cAAA,aAAA,CAAA,EAAA,GAAA,CAIzE,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/composition/ScrollReel/ScrollReel.js

@@ -1,7 +0,0 @@
-import ScrollReel_vue_vue_type_script_setup_true_lang_default, { gapClass, snapClass } from "./ScrollReel.vue_vue_type_script_setup_true_lang.js";
-//#region src/composition/ScrollReel/ScrollReel.vue
-var ScrollReel_default = ScrollReel_vue_vue_type_script_setup_true_lang_default;
-//#endregion
-export { ScrollReel_default as default, gapClass, snapClass };
-
-//# sourceMappingURL=ScrollReel.js.map

package/dist/composition/ScrollReel/ScrollReel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollReel.js","names":[],"sources":["../../../src/composition/ScrollReel/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\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 } from \"../../lib/cn\";\n\nwithDefaults(\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  { snap: \"start\", gap: \"md\" },\n);\n\nconst reel = ref<HTMLDivElement | null>(null);\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  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  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior: \"smooth\" });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior: \"smooth\" });\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: \"smooth\", block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + `aria-label` 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=\"Scrollable content\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,42 +0,0 @@
-/**
- * ScrollReel — horizontal scrolling strip with scroll-snap.
- *
- * A touch-friendly, keyboard-navigable horizontal scroll container with
- * optional scroll-snap alignment. Arrow keys scroll to the next or previous
- * snap point; the `Home` and `End` keys jump to the start or end of the
- * strip.
- *
- * A ScrollReel is a component, not `overflow-x-auto snap-x snap-mandatory`,
- * because keyboard accessibility for scroll-snap requires JavaScript (arrow
- * keys must find the next snap-aligned child and scroll it into view), and
- * the gap tightens one step below `sm` like Stack and DashboardGrid.
- */
-export type ScrollReelSnap = "start" | "center" | "end" | "none";
-export type ScrollReelGap = "sm" | "md" | "lg";
-declare const snapClass: Record<ScrollReelSnap, string>;
-declare const gapClass: Record<ScrollReelGap, string>;
-export { snapClass, gapClass };
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
-    /** Scroll-snap alignment. "none" disables snap entirely. */
-    snap?: ScrollReelSnap;
-    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
-    gap?: ScrollReelGap;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    /** Scroll-snap alignment. "none" disables snap entirely. */
-    snap?: ScrollReelSnap;
-    /** Gap between items — mirrors Stack's scale. Tightens one notch below `sm`. */
-    gap?: ScrollReelGap;
-}> & Readonly<{}>, {
-    gap: ScrollReelGap;
-    snap: ScrollReelSnap;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=ScrollReel.vue.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollReel.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/ScrollReel/ScrollReel.vue"],"names":[],"mappings":"AAoHA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,QAAA,MAAM,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAMpC,CAAC;AAEX,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAIlC,CAAC;AAEX,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;wBACV,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,4DAA4D;WACrD,cAAc;IACrB,gFAAgF;UAC1E,aAAa;;IAHnB,4DAA4D;WACrD,cAAc;IACrB,gFAAgF;UAC1E,aAAa;;SAAb,aAAa;UAFZ,cAAc;;cAqFX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAYxC,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/ScrollReel/ScrollReel.vue_vue_type_script_setup_true_lang.js

@@ -1,79 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, ref, renderSlot, unref } from "vue";
-//#region src/composition/ScrollReel/ScrollReel.vue?vue&type=script&setup=true&lang.ts
-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" }
-	},
-	setup(__props) {
-		const reel = ref(null);
-		/**
-		* 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;
-			const direction = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-			if (direction === 0 && event.key !== "Home" && event.key !== "End") return;
-			event.preventDefault();
-			if (event.key === "Home") {
-				el.scrollTo({
-					left: 0,
-					behavior: "smooth"
-				});
-				return;
-			}
-			if (event.key === "End") {
-				el.scrollTo({
-					left: el.scrollWidth,
-					behavior: "smooth"
-				});
-				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: "smooth",
-						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": "Scrollable content",
-				onKeydown
-			}, [renderSlot(_ctx.$slots, "default")], 34);
-		};
-	}
-});
-//#endregion
-export { 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/ScrollReel/ScrollReel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollReel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/ScrollReel/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\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 } from \"../../lib/cn\";\n\nwithDefaults(\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  { snap: \"start\", gap: \"md\" },\n);\n\nconst reel = ref<HTMLDivElement | null>(null);\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  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  if (event.key === \"Home\") {\n    el.scrollTo({ left: 0, behavior: \"smooth\" });\n    return;\n  }\n  if (event.key === \"End\") {\n    el.scrollTo({ left: el.scrollWidth, behavior: \"smooth\" });\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: \"smooth\", block: \"nearest\", inline: \"start\" });\n      break;\n    }\n  }\n}\n</script>\n\n<template>\n  <!-- `role=\"region\"` + `tabindex=\"0\"` + `aria-label` 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=\"Scrollable content\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;AAkBA,IAAM,YAA4C;CAChD,OAAO;CACP,QAAQ;CACR,KAAK;CAEL,MAAM;AACR;AAEA,IAAM,WAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;EAmBA,MAAM,OAAO,IAA2B,IAAI;;;;;;;EAQ5C,SAAS,UAAU,OAAsB;GACvC,MAAM,KAAK,KAAK;GAChB,IAAI,CAAC,IAAI;GAET,MAAM,YAAY,MAAM,QAAQ,eAAe,IAAI,MAAM,QAAQ,cAAc,KAAK;GACpF,IAAI,cAAc,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAEpE,MAAM,eAAe;GAErB,IAAI,MAAM,QAAQ,QAAQ;IACxB,GAAG,SAAS;KAAE,MAAM;KAAG,UAAU;IAAS,CAAC;IAC3C;GACF;GACA,IAAI,MAAM,QAAQ,OAAO;IACvB,GAAG,SAAS;KAAE,MAAM,GAAG;KAAa,UAAU;IAAS,CAAC;IACxD;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,UAAU;MAAU,OAAO;MAAW,QAAQ;KAAQ,CAAC;KAC9E;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;IACL,cAAW;IACD;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/composition/Sidebar/Sidebar.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/composition/Sidebar/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 \"../../lib/cn\";\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":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Sidebar.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Sidebar/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/composition/Sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -1,36 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
-//#region src/composition/Sidebar/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/composition/Sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Sidebar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Sidebar/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 \"../../lib/cn\";\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/composition/Split/Split.js

@@ -1,7 +0,0 @@
-import Split_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./Split.vue_vue_type_script_setup_true_lang.js";
-//#region src/composition/Split/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/composition/Split/Split.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Split.js","names":[],"sources":["../../../src/composition/Split/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 \"../../lib/cn\";\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/composition/Split/Split.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Split.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Split/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/composition/Split/Split.vue_vue_type_script_setup_true_lang.js

@@ -1,40 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
-//#region src/composition/Split/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/composition/Split/Split.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Split.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Split/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 \"../../lib/cn\";\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/composition/Stack/Stack.js

@@ -1,7 +0,0 @@
-import Stack_vue_vue_type_script_setup_true_lang_default, { alignClass, gapClass } from "./Stack.vue_vue_type_script_setup_true_lang.js";
-//#region src/composition/Stack/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/composition/Stack/Stack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.js","names":[],"sources":["../../../src/composition/Stack/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 \"../../lib/cn\";\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/Stack.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.vue.d.ts","sourceRoot":"","sources":["../../../src/composition/Stack/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/composition/Stack/Stack.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +0,0 @@
-import { cn } from "../../lib/cn.js";
-import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
-//#region src/composition/Stack/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/composition/Stack/Stack.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/composition/Stack/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 \"../../lib/cn\";\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"}