@ecoma-io/loom 0.4.0 → 0.6.0

package/dist/packages/blocks/toast-stack/src/ToastStack.vue_vue_type_script_setup_true_lang.js

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

package/dist/packages/blocks/toast-stack/src/ToastStack.vue_vue_type_script_setup_true_lang.js.map

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

package/dist/packages/blocks/toast-stack/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/blocks/toast-stack/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/packages/composition/center/src/Center.js.map

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

package/dist/packages/composition/center/src/Center.vue_vue_type_script_setup_true_lang.js.map

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

package/dist/packages/composition/frame/src/Frame.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Frame.js","names":[],"sources":["../../../../../packages/composition/frame/src/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 \"@ecoma-io/loom-core\";\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":""}

package/dist/packages/composition/frame/src/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":["../../../../../packages/composition/frame/src/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 \"@ecoma-io/loom-core\";\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/packages/composition/grid/src/Grid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../../../packages/composition/grid/src/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 \"@ecoma-io/loom-core\";\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/packages/composition/grid/src/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":["../../../../../packages/composition/grid/src/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 \"@ecoma-io/loom-core\";\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/packages/composition/inline/src/Inline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Inline.js","names":[],"sources":["../../../../../packages/composition/inline/src/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 \"@ecoma-io/loom-core\";\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/packages/composition/inline/src/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":["../../../../../packages/composition/inline/src/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 \"@ecoma-io/loom-core\";\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/packages/composition/scroll-reel/src/ScrollReel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollReel.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  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":""}

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

@@ -1,100 +0,0 @@
-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;
-			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/packages/composition/scroll-reel/src/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":["../../../../../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  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;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,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/packages/composition/sidebar/src/Sidebar.js.map

@@ -1 +0,0 @@
-{"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=\"\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/packages/composition/sidebar/src/Sidebar.vue_vue_type_script_setup_true_lang.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { cn } from "./cn.js";
-import { optional } from "./props.js";
-import { useSplitAttrs } from "./attrs.js";
-import { listStaggerDelay, smoothScrollBehavior } from "./motion.js";
-import { WCAG_TAGS } from "./a11y-scope.js";
-import { themeScript, useTheme } from "./theme.js";
-import { applyLoomIconDefaults } from "./icon-defaults.js";
-export { WCAG_TAGS, applyLoomIconDefaults, cn, listStaggerDelay, optional, smoothScrollBehavior, themeScript, useSplitAttrs, useTheme };

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

@@ -1,27 +0,0 @@
-/** The inline `animation-delay` for the i-th revealed row. */
-function listStaggerDelay(i) {
-	return `${String(Math.min(i, 5) * 24)}ms`;
-}
-/**
-* The behaviour a scripted scroll should ask for, given the reader's motion
-* preference: `"smooth"` normally, `"auto"` under
-* `prefers-reduced-motion`.
-*
-* It has to exist because the stylesheet's kill-switch cannot reach this
-* path: an explicit `"smooth"` in a `scrollTo` dictionary *overrides* the
-* CSS `scroll-behavior` property — that is what the spec defines a
-* non-`"auto"` behaviour value to mean. Every component that scrolls by
-* script (ScrollReel, Carousel) asks this instead of deciding alone, which
-* is why it lives here and not in either of them.
-*/
-function smoothScrollBehavior() {
-	try {
-		return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
-	} catch {
-		return "smooth";
-	}
-}
-//#endregion
-export { listStaggerDelay, smoothScrollBehavior };
-
-//# sourceMappingURL=motion.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"motion.js","names":[],"sources":["../../../../packages/core/src/motion.ts"],"sourcesContent":["/**\n * The list-reveal stagger vocabulary — one source for every overlay that\n * reveals rows (DropdownMenu, Menubar, Select) and for the Motion\n * documentation page. Each revealed row is delayed one step after the\n * previous, capped so a long list does not tail off indefinitely.\n *\n * It lives here rather than in each template because it was written into\n * three of them independently once, which is how the three drifted.\n */\nexport const LIST_STAGGER_STEP_MS = 24;\nexport const LIST_STAGGER_CAP = 5;\n\n/** The inline `animation-delay` for the i-th revealed row. */\nexport function listStaggerDelay(i: number): string {\n  return `${String(Math.min(i, LIST_STAGGER_CAP) * LIST_STAGGER_STEP_MS)}ms`;\n}\n\n/**\n * The behaviour a scripted scroll should ask for, given the reader's motion\n * preference: `\"smooth\"` normally, `\"auto\"` under\n * `prefers-reduced-motion`.\n *\n * It has to exist because the stylesheet's kill-switch cannot reach this\n * path: an explicit `\"smooth\"` in a `scrollTo` dictionary *overrides* the\n * CSS `scroll-behavior` property — that is what the spec defines a\n * non-`\"auto\"` behaviour value to mean. Every component that scrolls by\n * script (ScrollReel, Carousel) asks this instead of deciding alone, which\n * is why it lives here and not in either of them.\n */\nexport function smoothScrollBehavior(): \"auto\" | \"smooth\" {\n  try {\n    return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ? \"auto\" : \"smooth\";\n  } catch {\n    // matchMedia may be unavailable; smooth is the behaviour being replaced.\n    return \"smooth\";\n  }\n}\n"],"mappings":";AAaA,SAAgB,iBAAiB,GAAmB;CAClD,OAAO,GAAG,OAAO,KAAK,IAAI,GAAA,CAAmB,IAAA,EAAwB,EAAE;AACzE;;;;;;;;;;;;;AAcA,SAAgB,uBAA0C;CACxD,IAAI;EACF,OAAO,OAAO,WAAW,kCAAkC,CAAC,CAAC,UAAU,SAAS;CAClF,QAAQ;EAEN,OAAO;CACT;AACF"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"props.js","names":[],"sources":["../../../../packages/core/src/props.ts"],"sourcesContent":["/**\n * Drops the keys whose value is `undefined`, so a `v-bind` passes only the\n * props that were actually set.\n *\n * Two rules collide to make this necessary, and neither is avoidable.\n *\n * Vue treats a prop that is absent and a prop explicitly set to `undefined` as\n * the same thing — both resolve to the child's default. TypeScript, under\n * `exactOptionalPropertyTypes`, does not: passing `undefined` to a `foo?: T` is\n * an error, because the flag exists precisely to tell \"missing\" apart from\n * \"present and undefined\". A Vue template always emits every key it binds, so\n * forwarding an optional prop straight through (`:open=\"open\"`) hands a child's\n * `open?: boolean` an explicit `undefined` and fails to compile, while behaving\n * correctly at run time.\n *\n * That distinction is not academic for the components underneath. Reka reads\n * `undefined` as \"no value supplied — manage this yourself\", and any concrete\n * value, `false` included, as \"the host owns this\". So a control whose\n * `modelValue` is coerced to `false` on its way through stops being\n * uncontrolled and becomes permanently, silently off: it still emits its update\n * event, and its rendered state never moves. That failure has no error and no\n * warning; it looks like a component that ignores clicks.\n *\n * A cast (`open as boolean`) silences the compiler and is the reason to prefer\n * this: it states that a value is there when the whole point is that one may\n * not be. Omitting the key says what is true.\n */\nexport function optional<T extends Record<string, unknown>>(\n  values: T,\n): { [K in keyof T]?: Exclude<T[K], undefined> } {\n  const set: Record<string, unknown> = {};\n  for (const key of Object.keys(values)) {\n    if (values[key] !== undefined) set[key] = values[key];\n  }\n  return set as { [K in keyof T]?: Exclude<T[K], undefined> };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,SAAgB,SACd,QAC+C;CAC/C,MAAM,MAA+B,CAAC;CACtC,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,IAAI,OAAO,SAAS,KAAA,GAAW,IAAI,OAAO,OAAO;CAEnD,OAAO;AACT"}