@ecoma-io/loom 0.1.1 → 0.3.0

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

@@ -0,0 +1,49 @@
+/**
+ * MasterDetail — a master list panel and a detail panel side by side.
+ *
+ * The master/detail pattern is the layout that list-driven applications reach
+ * for: a selectable list on one side, its content on the other. Mail clients,
+ * file browsers, and settings pages all share this structure.
+ *
+ * The intrinsic collapse from the Split composition primitive is reused directly
+ * — `flex-wrap` plus a `min-width: 50%` guard on the detail panel — so the
+ * layout derives its own breakpoint from the container's width rather than a
+ * viewport media query. Below the collapse width the panels stack vertically;
+ * the master list sits above the detail area.
+ *
+ * The master panel does not shrink (`flex-shrink: 0`), unlike the AppShell
+ * sidebar, because a master list whose column widths change under compression
+ * is harder to scan than one that holds its shape and lets the detail panel
+ * absorb the squeeze. The detail panel scrolls independently so long lists of
+ * content never push the master list off-screen.
+ */
+export type MasterDetailMinMasterWidth = string;
+export type MasterDetailGap = "sm" | "md" | "lg" | "none";
+declare const gapClass: Record<Exclude<MasterDetailGap, "none">, string>;
+export { gapClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Minimum width for the master panel (e.g. "14rem"). The detail area takes the rest. */
+    minMasterWidth?: MasterDetailMinMasterWidth;
+    /** Gap between master and detail panels. Tightens one notch below sm. */
+    gap?: MasterDetailGap;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Minimum width for the master panel (e.g. "14rem"). The detail area takes the rest. */
+    minMasterWidth?: MasterDetailMinMasterWidth;
+    /** Gap between master and detail panels. Tightens one notch below sm. */
+    gap?: MasterDetailGap;
+}> & Readonly<{}>, {
+    gap: MasterDetailGap;
+    minMasterWidth: MasterDetailMinMasterWidth;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    master?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=MasterDetail.vue.d.ts.map

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 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?: boolean;\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,24 @@
+type __VLS_Props = {
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    footer?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    gutter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+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":"AAoDA,KAAK,WAAW,GAAG;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAqDJ,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC9D,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK9C,QAAA,MAAM,UAAU;YA/DH,OAAO;6EAkElB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,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 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?: boolean;\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":";;;;;;;;;;;;GAyBE,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,2 @@
+export { default } 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"}

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

@@ -0,0 +1,39 @@
+/**
+ * Settings — a settings/preferences page layout: navigation sidebar + content
+ * sections.
+ *
+ * The layout uses the same intrinsic flex-wrap collapse as the Sidebar
+ * composition primitive. The nav panel gets a fixed flex-basis and the content
+ * area gets `flex-grow: 999`, so when the container cannot fit the content's
+ * `min-width: 50%`, both panels wrap to full-width — the nav stacks above the
+ * content. No media query, no JavaScript — the layout derives its own
+ * breakpoint from the container's width.
+ *
+ * The nav panel recedes into the sunken elevation layer so the content reads as
+ * the work surface. The content area scrolls independently so long settings
+ * pages stay navigable without the nav scrolling out of view.
+ */
+export type SettingsNavWidth = string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Width for the navigation panel (e.g. "12rem"). */
+    navWidth?: SettingsNavWidth;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Width for the navigation panel (e.g. "12rem"). */
+    navWidth?: SettingsNavWidth;
+}> & Readonly<{}>, {
+    navWidth: SettingsNavWidth;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    nav?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Settings.vue.d.ts.map

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

@@ -0,0 +1,63 @@
+/**
+ * SplitLayout — full-page two-panel layout with intrinsic collapse.
+ *
+ * A SplitLayout extends the Split composition primitive's intrinsic collapse
+ * into a full-page application shell: a side panel and a main content area,
+ * with an optional full-width header above. It is the layout a two-column
+ * application reaches for — a settings page with a nav rail, a documentation
+ * site with a sidebar, a chat interface with a contact list.
+ *
+ * The intrinsic collapse from the Split composition primitive is reused
+ * directly — `flex-wrap` plus a `min-width: 50%` guard on the content panel —
+ * so the layout derives its own breakpoint from the container's width rather
+ * than a viewport media query. Below the collapse width the panels stack
+ * vertically; the side panel sits above the content when `side` is `"left"`,
+ * below it when `side` is `"right"`.
+ *
+ * The header slot spans the full width, above the split row, so an application
+ * header bar stays visible regardless of collapse state. Both panels carry
+ * gutters that widen at wider breakpoints, so ultrawide viewports add
+ * whitespace rails rather than stretching lines of text.
+ */
+export type SplitLayoutCollapseAt = string;
+export type SplitLayoutGap = "sm" | "md" | "lg" | "none";
+declare const gapClass: Record<Exclude<SplitLayoutGap, "none">, string>;
+export { gapClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Which side the primary panel sits on. Controls stacking order when collapsed: "left" stacks the side panel above, "right" stacks it below. */
+    side?: "left" | "right";
+    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
+    collapseAt?: SplitLayoutCollapseAt;
+    /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
+    minSideWidth?: string;
+    /** Gap between panels. Tightens one notch below sm (except "none"). */
+    gap?: SplitLayoutGap;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Which side the primary panel sits on. Controls stacking order when collapsed: "left" stacks the side panel above, "right" stacks it below. */
+    side?: "left" | "right";
+    /** Below this CSS width the two panels stack vertically instead of sitting side by side. Default: `"48rem"`. */
+    collapseAt?: SplitLayoutCollapseAt;
+    /** Minimum width for the side panel (e.g. "16rem"). The content area takes the rest. */
+    minSideWidth?: string;
+    /** Gap between panels. Tightens one notch below sm (except "none"). */
+    gap?: SplitLayoutGap;
+}> & Readonly<{}>, {
+    gap: SplitLayoutGap;
+    side: "left" | "right";
+    collapseAt: SplitLayoutCollapseAt;
+    minSideWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    side?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=SplitLayout.vue.d.ts.map

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 "@ecoma-io/loom-core";
+//# sourceMappingURL=a11y.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../../../packages/loom/src/a11y.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC"}