@ecoma-io/loom 0.2.0 → 0.4.0

package/dist/packages/layouts/dashboard/src/Dashboard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region packages/layouts/dashboard/src/Dashboard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var Dashboard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Dashboard",
+	props: {
+		minTileWidth: { default: "16rem" },
+		gap: { default: "md" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("min-h-dvh flex flex-col")) }, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true), createElementVNode("div", {
+				style: { flexWrap: "wrap" },
+				class: normalizeClass(unref(cn)("flex flex-1", _ctx.$slots.sidebar ? "flex-row" : void 0))
+			}, [_ctx.$slots.sidebar ? (openBlock(), createElementBlock("aside", {
+				key: 0,
+				style: {
+					flexBasis: "16rem",
+					flexGrow: 0,
+					flexShrink: 1
+				},
+				class: normalizeClass(unref(cn)("bg-sunken w-full"))
+			}, [renderSlot(_ctx.$slots, "sidebar")], 2)) : createCommentVNode("", true), createElementVNode("div", {
+				style: {
+					flexBasis: 0,
+					flexGrow: 999,
+					flexShrink: 1,
+					minWidth: "50%"
+				},
+				class: normalizeClass(unref(cn)("flex min-w-0 flex-col"))
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(cn)("flex-1 px-4 sm:px-6 3xl:px-8", _ctx.$slots.aside ? "flex flex-row 2xl:flex-row max-2xl:flex-col" : void 0)),
+				style: normalizeStyle(_ctx.$slots.aside ? { flexWrap: "wrap" } : void 0)
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(cn)("grid", gapClass[__props.gap], _ctx.$slots.aside ? "flex-grow-[999] flex-shrink-1" : void 0)),
+				style: normalizeStyle({
+					gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${__props.minTileWidth}), 1fr))`,
+					..._ctx.$slots.aside ? {
+						flexBasis: 0,
+						minWidth: "60%"
+					} : {}
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 6), _ctx.$slots.aside ? (openBlock(), createElementBlock("aside", {
+				key: 0,
+				style: {
+					flexBasis: "14rem",
+					flexGrow: 0,
+					flexShrink: 1
+				},
+				class: normalizeClass(unref(cn)("hidden w-full 2xl:block"))
+			}, [renderSlot(_ctx.$slots, "aside")], 2)) : createCommentVNode("", true)], 6)], 2)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { Dashboard_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=Dashboard.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/dashboard/src/Dashboard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/layouts/dashboard/src/Dashboard.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Dashboard — a dashboard shell: optional sidebar + auto-reflowing tile grid\n * for panels, with an optional aside for supplementary metrics on ultrawide\n * viewports.\n *\n * The layout composes three composition patterns into a single responsive\n * shell. The innermost is the auto-fit grid from DashboardGrid/Grid: the tile\n * column count derives from the container's own width, so the same grid\n * reflows inside a sidebar-narrowed workspace and full-bleed on an ultra-wide\n * monitor, with zero Tailwind breakpoints authored here or at the call site.\n *\n * The sidebar and aside use the Every Layout \"Sidebar\" flex-wrap technique:\n * each panel gets a fixed flex-basis and the grid area gets `flex-grow: 999`,\n * so when the container cannot fit the content's minimum, both panels wrap to\n * full-width and the sidebar or aside stacks above the grid instead of sitting\n * beside it. No media query, no JavaScript — the layout derives its own\n * breakpoints from the container's width.\n *\n * The `#aside` slot is gated behind a `2xl` breakpoint because supplementary\n * metrics are a luxury that only wide desktops can afford: the aside is hidden\n * below that width and the grid takes the full width, preventing a cramped\n * two-panel layout where neither panel has room to breathe.\n *\n * The header slot is full-width, above the sidebar+grid row, so a top\n * navigation bar or title row never competes for horizontal space with the\n * sidebar.\n */\nexport type DashboardMinTileWidth = string;\n\nconst gapClass: Record<string, 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 tile may get before the grid drops to fewer columns. */\n    minTileWidth?: DashboardMinTileWidth;\n    /** Grid gap step. Tightens one notch below sm. */\n    gap?: \"sm\" | \"md\" | \"lg\";\n  }>(),\n  { minTileWidth: \"16rem\", gap: \"md\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width and above the sidebar+grid row, so a\n      navigation bar or title row never competes for horizontal space.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      The sidebar+grid row uses flex-wrap. The sidebar gets a fixed\n      flex-basis (~16rem) and the grid area gets `flex-grow: 999`, so\n      when the container is too narrow both panels wrap to full-width —\n      the sidebar stacks above the grid. No media query; the layout\n      derives its own breakpoint from the container's width.\n    -->\n    <div\n      :style=\"{ flexWrap: 'wrap' }\"\n      :class=\"cn('flex flex-1', $slots.sidebar ? 'flex-row' : undefined)\"\n    >\n      <!--\n        The sidebar panel. Fixed-basis, no growth — it recedes into the\n        sunken elevation layer when present, matching the AppShell pattern.\n      -->\n      <aside\n        v-if=\"$slots.sidebar\"\n        :style=\"{\n          flexBasis: '16rem',\n          flexGrow: 0,\n          flexShrink: 1,\n        }\"\n        :class=\"cn('bg-sunken w-full')\"\n      >\n        <slot name=\"sidebar\" />\n      </aside>\n\n      <!--\n        The main area: the auto-fit tile grid + an optional aside for\n        supplementary metrics on ultrawide viewports.\n\n        `flex-grow: 999` ensures this area takes all remaining space\n        when the container is wide enough. Its `min-width: 50%` triggers\n        wrapping below tablet-like widths, making the sidebar stack above.\n\n        Gutters widen at wider breakpoints so ultrawide viewports add\n        whitespace rails rather than stretching lines.\n      -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n        :class=\"cn('flex min-w-0 flex-col')\"\n      >\n        <div\n          :class=\"\n            cn(\n              'flex-1 px-4 sm:px-6 3xl:px-8',\n              $slots.aside ? 'flex flex-row 2xl:flex-row max-2xl:flex-col' : undefined,\n            )\n          \"\n          :style=\"$slots.aside ? { flexWrap: 'wrap' } : undefined\"\n        >\n          <!--\n            The tile grid. `auto-fit` + `minmax` recomputes the column\n            count from the container's own width — it reflows inside a\n            sidebar-narrowed workspace and full-bleed on an ultra-wide\n            monitor, with zero Tailwind breakpoints authored here. The\n            `minmax` lower bound is wrapped in `min(100%, …)` so a tile\n            never forces horizontal overflow on a container narrower than\n            `minTileWidth` itself.\n          -->\n          <div\n            :class=\"\n              cn('grid', gapClass[gap], $slots.aside ? 'flex-grow-[999] flex-shrink-1' : undefined)\n            \"\n            :style=\"{\n              gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${minTileWidth}), 1fr))`,\n              ...($slots.aside ? { flexBasis: 0, minWidth: '60%' } : {}),\n            }\"\n          >\n            <slot />\n          </div>\n\n          <!--\n            The aside slot: supplementary metrics/info panels visible only\n            on wide desktops (from `2xl` breakpoint). Uses the same\n            flex-wrap Sidebar pattern: the aside gets a fixed basis and\n            the grid area grows to fill the remaining space. Below `2xl`,\n            the aside is hidden entirely — metrics are a luxury that only\n            wide desktops can afford.\n          -->\n          <aside\n            v-if=\"$slots.aside\"\n            :style=\"{\n              flexBasis: '14rem',\n              flexGrow: 0,\n              flexShrink: 1,\n            }\"\n            :class=\"cn('hidden w-full 2xl:block')\"\n          >\n            <slot name=\"aside\" />\n          </aside>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;AA8BA,IAAM,WAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;GAoBE,OAAA,UAAA,GAAA,mBA4GM,OAAA,EA5GA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA,CAKCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA,YAAA,CADP,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAUxB,mBA2FM,OAAA;IA1FH,OAAO,EAAA,UAAA,OAAA;IACP,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,eAAgBA,KAAAA,OAAO,UAAO,aAAgB,KAAA,CAAS,CAAA;GAOzDA,GAAAA,CAAAA,KAAAA,OAAO,WADf,UAAA,GAAA,mBAUQ,SAAA;;IARL,OAAO;;;;IAIP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kBAAA,CAAA;GAEV,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAczB,mBA2DM,OAAA;IA1DH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,uBAAA,CAAA;GAEV,GAAA,CAAA,mBAiDM,OAAA;IAhDH,OAAK,eAAe,MAAA,EAAA,CAAE,CAAA,gCAA8DA,KAAAA,OAAO,QAAK,gDAAmD,KAAA,CAAA,CAAA;IAMnJ,OAAK,eAAEA,KAAAA,OAAO,QAAK,EAAA,UAAA,OAAA,IAA0B,KAAA,CAAS;GAWvD,GAAA,CAAA,mBAUM,OAAA;IATH,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,QAAS,SAAS,QAAA,MAAMA,KAAAA,OAAO,QAAK,kCAAqC,KAAA,CAAS,CAAA;IAG1G,OAAK,eAAA;KAA4E,qBAAA,qCAAA,QAAA,aAAY;KAA8BA,GAAAA,KAAAA,OAAO,QAAK;MAAA,WAAA;MAAA,UAAA;KAAA,IAAA,CAAA;;GAKxI,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAYFA,KAAAA,OAAO,SADf,UAAA,GAAA,mBAUQ,SAAA;;IARL,OAAO;;;;IAIP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA;GAEV,GAAA,CAAA,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/layouts/dashboard/src/index.d.ts

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

package/dist/packages/layouts/dashboard/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/dashboard/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/packages/layouts/dashboard/src/index.js

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

package/dist/packages/layouts/form-layout/src/FormLayout.js

@@ -0,0 +1,7 @@
+import FormLayout_vue_vue_type_script_setup_true_lang_default, { maxWidthClass } from "./FormLayout.vue_vue_type_script_setup_true_lang.js";
+//#region packages/layouts/form-layout/src/FormLayout.vue
+var FormLayout_default = FormLayout_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FormLayout_default as default, maxWidthClass };
+
+//# sourceMappingURL=FormLayout.js.map

package/dist/packages/layouts/form-layout/src/FormLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.js","names":[],"sources":["../../../../../packages/layouts/form-layout/src/FormLayout.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormLayout — a centered form page with constrained width for readability.\n *\n * Forms are narrower than general content: a line length comfortable for reading\n * prose is already wider than the labels and inputs a form needs. FormLayout\n * enforces that cap so the host never ships a form that stretches across an\n * ultrawide monitor. The `maxWidth` prop maps to named steps rather than a pixel\n * value, so the host names intent and the layout owns the geometry.\n *\n * The `#actions` slot flows with the content rather than being sticky, because a\n * submit button that stays pinned while the user scrolls is a button that gets\n * clicked before the form is filled. The gap between content and actions is a\n * fixed `mt-8` — a visual separator is the layout's responsibility, and a wider\n * gap than Stack's `lg` step is warranted to make the boundary unmistakable.\n *\n * The header slot is full-width, above the centered content, so a page title or\n * breadcrumb never competes for horizontal space with the constrained form.\n * Gutters widen at wider breakpoints so ultrawide viewports add whitespace rails\n * rather than stretching the form.\n */\nexport type FormLayoutMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst maxWidthClass: Record<FormLayoutMaxWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\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    /** Max-width for the form column. Forms should be narrower than general content. */\n    maxWidth?: FormLayoutMaxWidth;\n  }>(),\n  { maxWidth: \"md\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width, above the centered form content, so a page\n      title or breadcrumb never competes for horizontal space.\n    -->\n    <header v-if=\"$slots.header\" :class=\"cn('px-4 sm:px-6 3xl:px-8')\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      The content area fills available vertical space and centres the form\n      horizontally. `max-w-md` (default) keeps labels and inputs at a\n      comfortable width — wider than that and the eye has to travel too far\n      between label and input. Gutters widen at wider breakpoints so\n      ultrawide viewports add whitespace rails rather than stretching lines.\n    -->\n    <div :class=\"cn('mx-auto w-full flex-1 px-4 sm:px-6 3xl:px-8', maxWidthClass[maxWidth])\">\n      <slot />\n\n      <!--\n        The actions slot is separated from the form content by a wider gap\n        than Stack's lg step, so the boundary between \"fill in\" and \"submit\"\n        is unmistakable. It flows with the content rather than being sticky,\n        because a submit button pinned to the viewport is a button clicked\n        before the form is filled.\n      -->\n      <div v-if=\"$slots.actions\" :class=\"cn('mt-8')\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/layouts/form-layout/src/FormLayout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/form-layout/src/FormLayout.vue"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAK5C,CAAC;AAEX,OAAO,EAAE,aAAa,EAAE,CAAC;wBACJ,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,oFAAoF;eACzE,kBAAkB;;IAD7B,oFAAoF;eACzE,kBAAkB;;cAAlB,kBAAkB;;aAmDpB,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/layouts/form-layout/src/FormLayout.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,29 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/layouts/form-layout/src/FormLayout.vue?vue&type=script&setup=true&lang.ts
+var maxWidthClass = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl"
+};
+var FormLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "FormLayout",
+	props: { maxWidth: { default: "md" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("min-h-dvh flex flex-col")) }, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
+				key: 0,
+				class: normalizeClass(unref(cn)("px-4 sm:px-6 3xl:px-8"))
+			}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(cn)("mx-auto w-full flex-1 px-4 sm:px-6 3xl:px-8", maxWidthClass[__props.maxWidth])) }, [renderSlot(_ctx.$slots, "default"), _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(cn)("mt-8"))
+			}, [renderSlot(_ctx.$slots, "actions")], 2)) : createCommentVNode("", true)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { FormLayout_vue_vue_type_script_setup_true_lang_default as default, maxWidthClass };
+
+//# sourceMappingURL=FormLayout.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/form-layout/src/FormLayout.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/layouts/form-layout/src/FormLayout.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * FormLayout — a centered form page with constrained width for readability.\n *\n * Forms are narrower than general content: a line length comfortable for reading\n * prose is already wider than the labels and inputs a form needs. FormLayout\n * enforces that cap so the host never ships a form that stretches across an\n * ultrawide monitor. The `maxWidth` prop maps to named steps rather than a pixel\n * value, so the host names intent and the layout owns the geometry.\n *\n * The `#actions` slot flows with the content rather than being sticky, because a\n * submit button that stays pinned while the user scrolls is a button that gets\n * clicked before the form is filled. The gap between content and actions is a\n * fixed `mt-8` — a visual separator is the layout's responsibility, and a wider\n * gap than Stack's `lg` step is warranted to make the boundary unmistakable.\n *\n * The header slot is full-width, above the centered content, so a page title or\n * breadcrumb never competes for horizontal space with the constrained form.\n * Gutters widen at wider breakpoints so ultrawide viewports add whitespace rails\n * rather than stretching the form.\n */\nexport type FormLayoutMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst maxWidthClass: Record<FormLayoutMaxWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\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    /** Max-width for the form column. Forms should be narrower than general content. */\n    maxWidth?: FormLayoutMaxWidth;\n  }>(),\n  { maxWidth: \"md\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width, above the centered form content, so a page\n      title or breadcrumb never competes for horizontal space.\n    -->\n    <header v-if=\"$slots.header\" :class=\"cn('px-4 sm:px-6 3xl:px-8')\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      The content area fills available vertical space and centres the form\n      horizontally. `max-w-md` (default) keeps labels and inputs at a\n      comfortable width — wider than that and the eye has to travel too far\n      between label and input. Gutters widen at wider breakpoints so\n      ultrawide viewports add whitespace rails rather than stretching lines.\n    -->\n    <div :class=\"cn('mx-auto w-full flex-1 px-4 sm:px-6 3xl:px-8', maxWidthClass[maxWidth])\">\n      <slot />\n\n      <!--\n        The actions slot is separated from the form content by a wider gap\n        than Stack's lg step, so the boundary between \"fill in\" and \"submit\"\n        is unmistakable. It flows with the content rather than being sticky,\n        because a submit button pinned to the viewport is a button clicked\n        before the form is filled.\n      -->\n      <div v-if=\"$slots.actions\" :class=\"cn('mt-8')\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;AAuBA,IAAM,gBAAoD;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;GAkBE,OAAA,UAAA,GAAA,mBA8BM,OAAA,EA9BA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA,CAKCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA;;IAFqB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,uBAAA,CAAA;GACrC,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAUxB,mBAaM,OAAA,EAbA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,+CAAgD,cAAc,QAAA,SAAQ,CAAA,EAAA,GAAA,CACnF,WAAQ,KAAA,QAAA,SAAA,GASGA,KAAAA,OAAO,WAAlB,UAAA,GAAA,mBAEM,OAAA;;IAFsB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,MAAA,CAAA;GACnC,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/layouts/form-layout/src/index.d.ts

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

package/dist/packages/layouts/form-layout/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/form-layout/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/packages/layouts/form-layout/src/index.js

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

package/dist/packages/layouts/master-detail/src/MasterDetail.js

@@ -0,0 +1,7 @@
+import MasterDetail_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./MasterDetail.vue_vue_type_script_setup_true_lang.js";
+//#region packages/layouts/master-detail/src/MasterDetail.vue
+var MasterDetail_default = MasterDetail_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { MasterDetail_default as default, gapClass };
+
+//# sourceMappingURL=MasterDetail.js.map

package/dist/packages/layouts/master-detail/src/MasterDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetail.js","names":[],"sources":["../../../../../packages/layouts/master-detail/src/MasterDetail.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MasterDetail — a master list panel and a detail panel side by side.\n *\n * The master/detail pattern is the layout that list-driven applications reach\n * for: a selectable list on one side, its content on the other. Mail clients,\n * file browsers, and settings pages all share this structure.\n *\n * The intrinsic collapse from the Split composition primitive is reused directly\n * — `flex-wrap` plus a `min-width: 50%` guard on the detail panel — so the\n * layout derives its own breakpoint from the container's width rather than a\n * viewport media query. Below the collapse width the panels stack vertically;\n * the master list sits above the detail area.\n *\n * The master panel does not shrink (`flex-shrink: 0`), unlike the AppShell\n * sidebar, because a master list whose column widths change under compression\n * is harder to scan than one that holds its shape and lets the detail panel\n * absorb the squeeze. The detail panel scrolls independently so long lists of\n * content never push the master list off-screen.\n */\nexport type MasterDetailMinMasterWidth = string;\n\nexport type MasterDetailGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<MasterDetailGap, \"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    /** Minimum width for the master panel (e.g. \"14rem\"). The detail area takes the rest. */\n    minMasterWidth?: MasterDetailMinMasterWidth;\n    /** Gap between master and detail panels. Tightens one notch below sm. */\n    gap?: MasterDetailGap;\n  }>(),\n  { minMasterWidth: \"14rem\", gap: \"none\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap: wrap` is the intrinsic collapse mechanism. When the detail\n    panel cannot honour its `min-width: 50%`, both panels wrap to full-width —\n    the master list sits above the detail area. No media query; the layout\n    derives its own breakpoint from the container's width.\n  -->\n  <div\n    :class=\"cn('flex h-full', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <!--\n      The master panel holds a fixed basis and does not grow or shrink. It sits\n      on the sunken elevation so the detail area reads as the work surface\n      lifted above navigation chrome.\n    -->\n    <div\n      :style=\"{\n        flexBasis: minMasterWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n      }\"\n      :class=\"cn('bg-sunken w-full')\"\n    >\n      <slot name=\"master\" />\n    </div>\n\n    <!--\n      The detail panel takes all remaining space (`flex-grow: 999`) when the\n      container is wide enough. Its `min-width: 50%` triggers wrapping below\n      tablet-like widths. It scrolls independently so long content never pushes\n      the master list off-screen. Gutters widen at wider breakpoints so\n      ultrawide viewports add whitespace rails rather than stretching lines.\n    -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n      :class=\"cn('bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/layouts/master-detail/src/MasterDetail.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetail.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/master-detail/src/MasterDetail.vue"],"names":[],"mappings":"AAoGA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1D,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,MAAM,CAIrD,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,yFAAyF;qBACxE,0BAA0B;IAC3C,yEAAyE;UACnE,eAAe;;IAHrB,yFAAyF;qBACxE,0BAA0B;IAC3C,yEAAyE;UACnE,eAAe;;SAAf,eAAe;oBAFJ,0BAA0B;;aAwDlC,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/layouts/master-detail/src/MasterDetail.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,43 @@
+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/layouts/master-detail/src/MasterDetail.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 MasterDetail_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "MasterDetail",
+	props: {
+		minMasterWidth: { default: "14rem" },
+		gap: { default: "none" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("flex h-full", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
+				style: { flexWrap: "wrap" }
+			}, [createElementVNode("div", {
+				style: normalizeStyle({
+					flexBasis: __props.minMasterWidth,
+					flexGrow: 0,
+					flexShrink: 0
+				}),
+				class: normalizeClass(unref(cn)("bg-sunken w-full"))
+			}, [renderSlot(_ctx.$slots, "master")], 6), createElementVNode("div", {
+				style: {
+					flexBasis: 0,
+					flexGrow: 999,
+					flexShrink: 1,
+					minWidth: "50%"
+				},
+				class: normalizeClass(unref(cn)("bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { MasterDetail_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=MasterDetail.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/master-detail/src/MasterDetail.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetail.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../packages/layouts/master-detail/src/MasterDetail.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * MasterDetail — a master list panel and a detail panel side by side.\n *\n * The master/detail pattern is the layout that list-driven applications reach\n * for: a selectable list on one side, its content on the other. Mail clients,\n * file browsers, and settings pages all share this structure.\n *\n * The intrinsic collapse from the Split composition primitive is reused directly\n * — `flex-wrap` plus a `min-width: 50%` guard on the detail panel — so the\n * layout derives its own breakpoint from the container's width rather than a\n * viewport media query. Below the collapse width the panels stack vertically;\n * the master list sits above the detail area.\n *\n * The master panel does not shrink (`flex-shrink: 0`), unlike the AppShell\n * sidebar, because a master list whose column widths change under compression\n * is harder to scan than one that holds its shape and lets the detail panel\n * absorb the squeeze. The detail panel scrolls independently so long lists of\n * content never push the master list off-screen.\n */\nexport type MasterDetailMinMasterWidth = string;\n\nexport type MasterDetailGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<MasterDetailGap, \"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    /** Minimum width for the master panel (e.g. \"14rem\"). The detail area takes the rest. */\n    minMasterWidth?: MasterDetailMinMasterWidth;\n    /** Gap between master and detail panels. Tightens one notch below sm. */\n    gap?: MasterDetailGap;\n  }>(),\n  { minMasterWidth: \"14rem\", gap: \"none\" },\n);\n</script>\n\n<template>\n  <!--\n    `flex-wrap: wrap` is the intrinsic collapse mechanism. When the detail\n    panel cannot honour its `min-width: 50%`, both panels wrap to full-width —\n    the master list sits above the detail area. No media query; the layout\n    derives its own breakpoint from the container's width.\n  -->\n  <div\n    :class=\"cn('flex h-full', gap !== 'none' ? gapClass[gap] : undefined)\"\n    :style=\"{ flexWrap: 'wrap' }\"\n  >\n    <!--\n      The master panel holds a fixed basis and does not grow or shrink. It sits\n      on the sunken elevation so the detail area reads as the work surface\n      lifted above navigation chrome.\n    -->\n    <div\n      :style=\"{\n        flexBasis: minMasterWidth,\n        flexGrow: 0,\n        flexShrink: 0,\n      }\"\n      :class=\"cn('bg-sunken w-full')\"\n    >\n      <slot name=\"master\" />\n    </div>\n\n    <!--\n      The detail panel takes all remaining space (`flex-grow: 999`) when the\n      container is wide enough. Its `min-width: 50%` triggers wrapping below\n      tablet-like widths. It scrolls independently so long content never pushes\n      the master list off-screen. Gutters widen at wider breakpoints so\n      ultrawide viewports add whitespace rails rather than stretching lines.\n    -->\n    <div\n      :style=\"{\n        flexBasis: 0,\n        flexGrow: 999,\n        flexShrink: 1,\n        minWidth: '50%',\n      }\"\n      :class=\"cn('bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;AAwBA,IAAM,WAA6D;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;GA0BE,OAAA,UAAA,GAAA,mBAsCM,OAAA;IArCH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,eAAgB,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAS,CAAA;IACnE,OAAO,EAAA,UAAA,OAAA;GAOR,GAAA,CAAA,mBASM,OAAA;IARH,OAAK,eAAA;KAAuB,WAAA,QAAA;;;;IAK5B,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kBAAA,CAAA;GAEV,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,GAUxB,mBAUM,OAAA;IATH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,qDAAA,CAAA;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/layouts/master-detail/src/index.d.ts

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

package/dist/packages/layouts/master-detail/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/master-detail/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,0BAA0B,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/packages/layouts/master-detail/src/index.js

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

package/dist/packages/layouts/reading/src/Reading.js

@@ -0,0 +1,7 @@
+import Reading_vue_vue_type_script_setup_true_lang_default from "./Reading.vue_vue_type_script_setup_true_lang.js";
+//#region packages/layouts/reading/src/Reading.vue
+var Reading_default = Reading_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Reading_default as default };
+
+//# sourceMappingURL=Reading.js.map

package/dist/packages/layouts/reading/src/Reading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reading.js","names":[],"sources":["../../../../../packages/layouts/reading/src/Reading.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Whether the layout carries horizontal gutters that widen at wider breakpoints. */\nexport type ReadingGutter = boolean;\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Whether to add horizontal gutters that widen at wider breakpoints. */\n    gutter?: ReadingGutter;\n  }>(),\n  { gutter: true },\n);\n</script>\n\n<template>\n  <!--\n    Reading — a long-form reading layout that caps the content area at a\n    comfortable line length (~65ch). The header and footer span full-width\n    (site chrome, navigation, copyright), while only the reading content is\n    constrained to `max-w-prose` — the width that research identifies as the\n    fastest for sustained reading. Extra viewport on ultrawide monitors goes\n    to intentional whitespace, never to stretching lines.\n\n    The content wrapper is always prose-width with no prop: this layout exists\n    to enforce that cap. A reading layout that can go full-width is not a\n    reading layout. The `gutter` prop controls horizontal padding, not width.\n  -->\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <header v-if=\"$slots.header\" :class=\"cn(gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined)\">\n      <slot name=\"header\" />\n    </header>\n\n    <div\n      :class=\"\n        cn(\n          'mx-auto w-full max-w-prose flex-1',\n          gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined,\n          'py-8 sm:py-12',\n        )\n      \"\n    >\n      <slot />\n    </div>\n\n    <footer v-if=\"$slots.footer\" :class=\"cn(gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined)\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/layouts/reading/src/Reading.vue.d.ts

@@ -0,0 +1,25 @@
+/** Whether the layout carries horizontal gutters that widen at wider breakpoints. */
+export type ReadingGutter = boolean;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: ReadingGutter;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: ReadingGutter;
+}> & Readonly<{}>, {
+    gutter: ReadingGutter;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Reading.vue.d.ts.map

package/dist/packages/layouts/reading/src/Reading.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reading.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/reading/src/Reading.vue"],"names":[],"mappings":"AA0DA,qFAAqF;AACrF,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;wBACf,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,yEAAyE;aAChE,aAAa;;IADtB,yEAAyE;aAChE,aAAa;;YAAb,aAAa;;aAwDb,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC/B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUvC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/layouts/reading/src/Reading.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/layouts/reading/src/Reading.vue?vue&type=script&setup=true&lang.ts
+var Reading_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Reading",
+	props: { gutter: {
+		type: Boolean,
+		default: true
+	} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("min-h-dvh flex flex-col")) }, [
+				_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
+					key: 0,
+					class: normalizeClass(unref(cn)(__props.gutter ? "px-4 sm:px-6 3xl:px-8" : void 0))
+				}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(cn)("mx-auto w-full max-w-prose flex-1", __props.gutter ? "px-4 sm:px-6 3xl:px-8" : void 0, "py-8 sm:py-12")) }, [renderSlot(_ctx.$slots, "default")], 2),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
+					key: 1,
+					class: normalizeClass(unref(cn)(__props.gutter ? "px-4 sm:px-6 3xl:px-8" : void 0))
+				}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { Reading_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Reading.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/reading/src/Reading.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reading.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/layouts/reading/src/Reading.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Whether the layout carries horizontal gutters that widen at wider breakpoints. */\nexport type ReadingGutter = boolean;\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Whether to add horizontal gutters that widen at wider breakpoints. */\n    gutter?: ReadingGutter;\n  }>(),\n  { gutter: true },\n);\n</script>\n\n<template>\n  <!--\n    Reading — a long-form reading layout that caps the content area at a\n    comfortable line length (~65ch). The header and footer span full-width\n    (site chrome, navigation, copyright), while only the reading content is\n    constrained to `max-w-prose` — the width that research identifies as the\n    fastest for sustained reading. Extra viewport on ultrawide monitors goes\n    to intentional whitespace, never to stretching lines.\n\n    The content wrapper is always prose-width with no prop: this layout exists\n    to enforce that cap. A reading layout that can go full-width is not a\n    reading layout. The `gutter` prop controls horizontal padding, not width.\n  -->\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <header v-if=\"$slots.header\" :class=\"cn(gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined)\">\n      <slot name=\"header\" />\n    </header>\n\n    <div\n      :class=\"\n        cn(\n          'mx-auto w-full max-w-prose flex-1',\n          gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined,\n          'py-8 sm:py-12',\n        )\n      \"\n    >\n      <slot />\n    </div>\n\n    <footer v-if=\"$slots.footer\" :class=\"cn(gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined)\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;GA8BE,OAAA,UAAA,GAAA,mBAoBM,OAAA,EApBA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA;IACCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA;;KAFqB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAA,SAAM,0BAA6B,KAAA,CAAS,CAAA;IAClF,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAGxB,mBAUM,OAAA,EATH,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,qCAA2D,QAAA,SAAM,0BAA6B,KAAA,GAAA,eAAA,CAAA,EAAA,GAAA,CAQjH,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGIA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA;;KAFqB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAA,SAAM,0BAA6B,KAAA,CAAS,CAAA;IAClF,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/packages/layouts/reading/src/index.d.ts

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

package/dist/packages/layouts/reading/src/index.d.ts.map

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

package/dist/packages/layouts/reading/src/index.js

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

package/dist/packages/layouts/settings/src/Settings.js

@@ -0,0 +1,7 @@
+import Settings_vue_vue_type_script_setup_true_lang_default from "./Settings.vue_vue_type_script_setup_true_lang.js";
+//#region packages/layouts/settings/src/Settings.vue
+var Settings_default = Settings_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Settings_default as default };
+
+//# sourceMappingURL=Settings.js.map

package/dist/packages/layouts/settings/src/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","names":[],"sources":["../../../../../packages/layouts/settings/src/Settings.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Settings — a settings/preferences page layout: navigation sidebar + content\n * sections.\n *\n * The layout uses the same intrinsic flex-wrap collapse as the Sidebar\n * composition primitive. The nav panel gets a fixed flex-basis and the content\n * area gets `flex-grow: 999`, so when the container cannot fit the content's\n * `min-width: 50%`, both panels wrap to full-width — the nav stacks above the\n * content. No media query, no JavaScript — the layout derives its own\n * breakpoint from the container's width.\n *\n * The nav panel recedes into the sunken elevation layer so the content reads as\n * the work surface. The content area scrolls independently so long settings\n * pages stay navigable without the nav scrolling out of view.\n */\nexport type SettingsNavWidth = string;\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Width for the navigation panel (e.g. \"12rem\"). */\n    navWidth?: SettingsNavWidth;\n  }>(),\n  { navWidth: \"12rem\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width and above the nav+content row, so a title bar\n      or breadcrumb never competes for horizontal space with the nav panel.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n      panel can't fit its `min-width: 50%`, both panels wrap to full-width —\n      the nav becomes a full-width section above the content. No media query;\n      the layout derives its own breakpoint from the container's width.\n    -->\n    <div :class=\"cn('flex flex-1 flex-row')\" :style=\"{ flexWrap: 'wrap' }\">\n      <!--\n        The nav panel: fixed-basis, no growth, no shrink. It does not yield\n        width to the content area — when the container is too narrow, it wraps\n        to full-width instead of compressing. Sunken elevation marks it as\n        chrome, not work surface.\n      -->\n      <nav\n        :style=\"{\n          flexBasis: navWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n        }\"\n        :class=\"cn('bg-sunken w-full p-2')\"\n      >\n        <slot name=\"nav\" />\n      </nav>\n\n      <!--\n        The content area takes all remaining space (`flex-grow: 999`) when the\n        container is wide enough. Its `min-width: 50%` triggers wrapping below\n        tablet-like widths. It scrolls independently so long settings pages\n        stay navigable without the nav scrolling out of view. Gutters widen at\n        wider breakpoints so ultrawide viewports add whitespace rails rather\n        than stretching lines.\n      -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n        :class=\"cn('bg-background min-w-0 flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/layouts/settings/src/Settings.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/settings/src/Settings.vue"],"names":[],"mappings":"AA6FA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC;wBACjB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,qDAAqD;eAC1C,gBAAgB;;IAD3B,qDAAqD;eAC1C,gBAAgB;;cAAhB,gBAAgB;;aA8DlB,CAAC,KAAK,IAAgB,KAAK,GAAG;;UACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC1B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/layouts/settings/src/Settings.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region packages/layouts/settings/src/Settings.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var Settings_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Settings",
+	props: { navWidth: { default: "12rem" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("min-h-dvh flex flex-col")) }, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true), createElementVNode("div", {
+				class: normalizeClass(unref(cn)("flex flex-1 flex-row")),
+				style: { flexWrap: "wrap" }
+			}, [createElementVNode("nav", {
+				style: normalizeStyle({
+					flexBasis: __props.navWidth,
+					flexGrow: 0,
+					flexShrink: 0
+				}),
+				class: normalizeClass(unref(cn)("bg-sunken w-full p-2"))
+			}, [renderSlot(_ctx.$slots, "nav")], 6), createElementVNode("div", {
+				style: {
+					flexBasis: 0,
+					flexGrow: 999,
+					flexShrink: 1,
+					minWidth: "50%"
+				},
+				class: normalizeClass(unref(cn)("bg-background min-w-0 flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { Settings_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Settings.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/settings/src/Settings.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/layouts/settings/src/Settings.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Settings — a settings/preferences page layout: navigation sidebar + content\n * sections.\n *\n * The layout uses the same intrinsic flex-wrap collapse as the Sidebar\n * composition primitive. The nav panel gets a fixed flex-basis and the content\n * area gets `flex-grow: 999`, so when the container cannot fit the content's\n * `min-width: 50%`, both panels wrap to full-width — the nav stacks above the\n * content. No media query, no JavaScript — the layout derives its own\n * breakpoint from the container's width.\n *\n * The nav panel recedes into the sunken elevation layer so the content reads as\n * the work surface. The content area scrolls independently so long settings\n * pages stay navigable without the nav scrolling out of view.\n */\nexport type SettingsNavWidth = string;\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"@ecoma-io/loom-core\";\n\nwithDefaults(\n  defineProps<{\n    /** Width for the navigation panel (e.g. \"12rem\"). */\n    navWidth?: SettingsNavWidth;\n  }>(),\n  { navWidth: \"12rem\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width and above the nav+content row, so a title bar\n      or breadcrumb never competes for horizontal space with the nav panel.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n      panel can't fit its `min-width: 50%`, both panels wrap to full-width —\n      the nav becomes a full-width section above the content. No media query;\n      the layout derives its own breakpoint from the container's width.\n    -->\n    <div :class=\"cn('flex flex-1 flex-row')\" :style=\"{ flexWrap: 'wrap' }\">\n      <!--\n        The nav panel: fixed-basis, no growth, no shrink. It does not yield\n        width to the content area — when the container is too narrow, it wraps\n        to full-width instead of compressing. Sunken elevation marks it as\n        chrome, not work surface.\n      -->\n      <nav\n        :style=\"{\n          flexBasis: navWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n        }\"\n        :class=\"cn('bg-sunken w-full p-2')\"\n      >\n        <slot name=\"nav\" />\n      </nav>\n\n      <!--\n        The content area takes all remaining space (`flex-grow: 999`) when the\n        container is wide enough. Its `min-width: 50%` triggers wrapping below\n        tablet-like widths. It scrolls independently so long settings pages\n        stay navigable without the nav scrolling out of view. Gutters widen at\n        wider breakpoints so ultrawide viewports add whitespace rails rather\n        than stretching lines.\n      -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n        :class=\"cn('bg-background min-w-0 flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;GAgCE,OAAA,UAAA,GAAA,mBAqDM,OAAA,EArDA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA,CAKCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA,YAAA,CADP,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GASxB,mBAqCM,OAAA;IArCA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,sBAAA,CAAA;IAA2B,OAAO,EAAA,UAAA,OAAA;GAO/C,GAAA,CAAA,mBASM,OAAA;IARH,OAAK,eAAA;KAAyB,WAAA,QAAA;;;;IAK9B,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,sBAAA,CAAA;GAEV,GAAA,CAAA,WAAmB,KAAA,QAAA,KAAA,CAAA,GAAA,CAAA,GAWrB,mBAUM,OAAA;IATH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,oEAAA,CAAA;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/layouts/settings/src/index.d.ts

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

package/dist/packages/layouts/settings/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/settings/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/packages/layouts/settings/src/index.js

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

package/dist/packages/layouts/split-layout/src/SplitLayout.js

@@ -0,0 +1,7 @@
+import SplitLayout_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./SplitLayout.vue_vue_type_script_setup_true_lang.js";
+//#region packages/layouts/split-layout/src/SplitLayout.vue
+var SplitLayout_default = SplitLayout_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SplitLayout_default as default, gapClass };
+
+//# sourceMappingURL=SplitLayout.js.map

package/dist/packages/layouts/split-layout/src/SplitLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","names":[],"sources":["../../../../../packages/layouts/split-layout/src/SplitLayout.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * SplitLayout — full-page two-panel layout with intrinsic collapse.\n *\n * A SplitLayout extends the Split composition primitive's intrinsic collapse\n * into a full-page application shell: a side panel and a main content area,\n * with an optional full-width header above. It is the layout a two-column\n * application reaches for — a settings page with a nav rail, a documentation\n * site with a sidebar, a chat interface with a contact list.\n *\n * The intrinsic collapse from the Split composition primitive is reused\n * directly — `flex-wrap` plus a `min-width: 50%` guard on the content panel —\n * so the layout derives its own breakpoint from the container's width rather\n * than a viewport media query. Below the collapse width the panels stack\n * vertically; the side panel sits above the content when `side` is `\"left\"`,\n * below it when `side` is `\"right\"`.\n *\n * The header slot spans the full width, above the split row, so an application\n * header bar stays visible regardless of collapse state. Both panels carry\n * gutters that widen at wider breakpoints, so ultrawide viewports add\n * whitespace rails rather than stretching lines of text.\n */\nexport type SplitLayoutCollapseAt = string;\n\nexport type SplitLayoutGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitLayoutGap, \"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    /** Which side the primary panel sits on. Controls stacking order when collapsed: \"left\" stacks the side panel above, \"right\" stacks it below. */\n    side?: \"left\" | \"right\";\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: SplitLayoutCollapseAt;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between panels. Tightens one notch below sm (except \"none\"). */\n    gap?: SplitLayoutGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"none\" },\n);\n</script>\n\n<template>\n  <!--\n    The root is a full-height column so the header can span the top while the\n    split row fills the rest. `min-h-dvh` makes the layout at least one\n    viewport tall even when content is short, so the side panel background\n    fills the screen rather than stopping at the content's natural height.\n  -->\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header spans the full width, above the split row. It is not sticky\n      here — that is the host's decision, because whether an application\n      header pins depends on the content below it.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n      panel cannot honour its `min-width: 50%`, both panels wrap to full-width\n      — the side panel stacks above or below the content depending on `side`.\n      No media query; the layout derives its own breakpoint from the\n      container's width.\n    -->\n    <div\n      :class=\"\n        cn(\n          'flex flex-1',\n          side === 'right' ? 'flex-row-reverse' : 'flex-row',\n          gap !== 'none' ? gapClass[gap] : undefined,\n        )\n      \"\n      :style=\"{ flexWrap: 'wrap' }\"\n    >\n      <!--\n        The side panel holds a fixed basis and does not grow. It sits on the\n        sunken elevation so the content area reads as the work surface lifted\n        above navigation chrome. Gutters widen at wider breakpoints.\n      -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n        :class=\"cn('bg-sunken w-full px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot name=\"side\" />\n      </div>\n\n      <!--\n        The content panel takes all remaining space (`flex-grow: 999`) when the\n        container is wide enough. Its `min-width: 50%` triggers wrapping below\n        tablet-like widths. It scrolls independently so long content never\n        pushes the side panel off-screen. Gutters widen at wider breakpoints so\n        ultrawide viewports add whitespace rails rather than stretching lines.\n      -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n        :class=\"cn('bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/packages/layouts/split-layout/src/SplitLayout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/split-layout/src/SplitLayout.vue"],"names":[],"mappings":"AAmIA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEzD,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,MAAM,CAIpD,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,iJAAiJ;WAC1I,MAAM,GAAG,OAAO;IACvB,gHAAgH;iBACnG,qBAAqB;IAClC,wFAAwF;mBACzE,MAAM;IACrB,uEAAuE;UACjE,cAAc;;IAPpB,iJAAiJ;WAC1I,MAAM,GAAG,OAAO;IACvB,gHAAgH;iBACnG,qBAAqB;IAClC,wFAAwF;mBACzE,MAAM;IACrB,uEAAuE;UACjE,cAAc;;SAAd,cAAc;UANb,MAAM,GAAG,OAAO;gBAEV,qBAAqB;kBAEnB,MAAM;;aAwEZ,CAAC,KAAK,IAAgB,KAAK,GAAG;;WAChC,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC3B,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUxC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/packages/layouts/split-layout/src/SplitLayout.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import { cn } from "../../../core/src/cn.js";
+import "../../../core/src/index.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region packages/layouts/split-layout/src/SplitLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var gapClass = {
+	sm: "gap-2 sm:gap-3",
+	md: "gap-3 sm:gap-4",
+	lg: "gap-4 sm:gap-6"
+};
+var SplitLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SplitLayout",
+	props: {
+		side: { default: "left" },
+		collapseAt: { default: "48rem" },
+		minSideWidth: { default: "16rem" },
+		gap: { default: "none" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cn)("min-h-dvh flex flex-col")) }, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true), createElementVNode("div", {
+				class: normalizeClass(unref(cn)("flex flex-1", __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
+				}),
+				class: normalizeClass(unref(cn)("bg-sunken w-full px-4 sm:px-6 3xl:px-8"))
+			}, [renderSlot(_ctx.$slots, "side")], 6), createElementVNode("div", {
+				style: {
+					flexBasis: 0,
+					flexGrow: 999,
+					flexShrink: 1,
+					minWidth: "50%"
+				},
+				class: normalizeClass(unref(cn)("bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8"))
+			}, [renderSlot(_ctx.$slots, "default")], 2)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { SplitLayout_vue_vue_type_script_setup_true_lang_default as default, gapClass };
+
+//# sourceMappingURL=SplitLayout.vue_vue_type_script_setup_true_lang.js.map

package/dist/packages/layouts/split-layout/src/SplitLayout.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../../../packages/layouts/split-layout/src/SplitLayout.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * SplitLayout — full-page two-panel layout with intrinsic collapse.\n *\n * A SplitLayout extends the Split composition primitive's intrinsic collapse\n * into a full-page application shell: a side panel and a main content area,\n * with an optional full-width header above. It is the layout a two-column\n * application reaches for — a settings page with a nav rail, a documentation\n * site with a sidebar, a chat interface with a contact list.\n *\n * The intrinsic collapse from the Split composition primitive is reused\n * directly — `flex-wrap` plus a `min-width: 50%` guard on the content panel —\n * so the layout derives its own breakpoint from the container's width rather\n * than a viewport media query. Below the collapse width the panels stack\n * vertically; the side panel sits above the content when `side` is `\"left\"`,\n * below it when `side` is `\"right\"`.\n *\n * The header slot spans the full width, above the split row, so an application\n * header bar stays visible regardless of collapse state. Both panels carry\n * gutters that widen at wider breakpoints, so ultrawide viewports add\n * whitespace rails rather than stretching lines of text.\n */\nexport type SplitLayoutCollapseAt = string;\n\nexport type SplitLayoutGap = \"sm\" | \"md\" | \"lg\" | \"none\";\n\nconst gapClass: Record<Exclude<SplitLayoutGap, \"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    /** Which side the primary panel sits on. Controls stacking order when collapsed: \"left\" stacks the side panel above, \"right\" stacks it below. */\n    side?: \"left\" | \"right\";\n    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `\"48rem\"`. */\n    collapseAt?: SplitLayoutCollapseAt;\n    /** Minimum width for the side panel (e.g. \"16rem\"). The content area takes the rest. */\n    minSideWidth?: string;\n    /** Gap between panels. Tightens one notch below sm (except \"none\"). */\n    gap?: SplitLayoutGap;\n  }>(),\n  { side: \"left\", collapseAt: \"48rem\", minSideWidth: \"16rem\", gap: \"none\" },\n);\n</script>\n\n<template>\n  <!--\n    The root is a full-height column so the header can span the top while the\n    split row fills the rest. `min-h-dvh` makes the layout at least one\n    viewport tall even when content is short, so the side panel background\n    fills the screen rather than stopping at the content's natural height.\n  -->\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header spans the full width, above the split row. It is not sticky\n      here — that is the host's decision, because whether an application\n      header pins depends on the content below it.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      `flex-wrap: wrap` is the intrinsic collapse mechanism. When the content\n      panel cannot honour its `min-width: 50%`, both panels wrap to full-width\n      — the side panel stacks above or below the content depending on `side`.\n      No media query; the layout derives its own breakpoint from the\n      container's width.\n    -->\n    <div\n      :class=\"\n        cn(\n          'flex flex-1',\n          side === 'right' ? 'flex-row-reverse' : 'flex-row',\n          gap !== 'none' ? gapClass[gap] : undefined,\n        )\n      \"\n      :style=\"{ flexWrap: 'wrap' }\"\n    >\n      <!--\n        The side panel holds a fixed basis and does not grow. It sits on the\n        sunken elevation so the content area reads as the work surface lifted\n        above navigation chrome. Gutters widen at wider breakpoints.\n      -->\n      <div\n        :style=\"{\n          flexBasis: minSideWidth,\n          flexGrow: 0,\n          flexShrink: 0,\n          minWidth: minSideWidth,\n        }\"\n        :class=\"cn('bg-sunken w-full px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot name=\"side\" />\n      </div>\n\n      <!--\n        The content panel takes all remaining space (`flex-grow: 999`) when the\n        container is wide enough. Its `min-width: 50%` triggers wrapping below\n        tablet-like widths. It scrolls independently so long content never\n        pushes the side panel off-screen. Gutters widen at wider breakpoints so\n        ultrawide viewports add whitespace rails rather than stretching lines.\n      -->\n      <div\n        :style=\"{\n          flexBasis: 0,\n          flexGrow: 999,\n          flexShrink: 1,\n          minWidth: '50%',\n        }\"\n        :class=\"cn('bg-background overflow-y-auto px-4 sm:px-6 3xl:px-8')\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;AA0BA,IAAM,WAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;GA8BE,OAAA,UAAA,GAAA,mBA+DM,OAAA,EA/DA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA,CAMCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA,YAAA,CADP,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAUxB,mBA6CM,OAAA;IA5CH,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,eAAqC,QAAA,SAAI,UAAA,qBAAA,YAA0D,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAA,CAAA;IAOtJ,OAAO,EAAA,UAAA,OAAA;GAOR,GAAA,CAAA,mBAUM,OAAA;IATH,OAAK,eAAA;KAAyB,WAAA,QAAA;;;KAAkF,UAAA,QAAA;;IAMhH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,wCAAA,CAAA;GAEV,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAUtB,mBAUM,OAAA;IATH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,qDAAA,CAAA;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/packages/layouts/split-layout/src/index.d.ts

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

package/dist/packages/layouts/split-layout/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/split-layout/src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/packages/layouts/split-layout/src/index.js

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

package/dist/packages/loom/src/a11y.d.ts

@@ -0,0 +1,2 @@
+export { WCAG_TAGS } from "../../core/src/index";
+//# sourceMappingURL=a11y.d.ts.map