@ecoma-io/loom 0.3.0 → 0.5.0

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

@@ -1 +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"}
+{"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, each panel takes\n * its own line at its declared width — the sidebar stacks above the grid, and\n * the aside below it. No media query, no JavaScript — the layout derives its\n * own 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 each panel takes its own line —\n      the sidebar keeps its declared width on the line above the grid.\n      No media query; the layout derives its own breakpoint from the\n      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,mBA6GM,OAAA,EA7GA,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,GAWxB,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/reading/src/Reading.js.map

@@ -1 +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":""}
+{"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

@@ -1,21 +1,22 @@
-type __VLS_Props = {
+/** 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?: boolean;
-};
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
-type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_1) => any;
+    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: typeof __VLS_3) => any;
+    default?: (props: {}) => 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;
+    footer?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1 +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"}
+{"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.map

@@ -1 +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"}
+{"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

@@ -1,2 +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

@@ -1 +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"}
+{"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/settings/src/Settings.js.map

@@ -1 +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":""}
+{"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%`, the pair wraps onto separate lines — the nav keeps its\n * declared width on the line above the content. No media query, no JavaScript\n * — the layout derives its own 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%`, the pair wraps onto separate lines\n      — the nav keeps its declared `navWidth` on the line above the content,\n      and the content takes the whole next line. No media query; the layout\n      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 and never compresses — when the container\n        is too narrow for both, it wraps to its own line at this declared\n        width rather than shrinking. Sunken elevation marks it as chrome,\n        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

@@ -5,9 +5,9 @@
  * 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.
+ * `min-width: 50%`, the pair wraps onto separate lines — the nav keeps its
+ * declared width on the line 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

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

@@ -1 +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"}
+{"version":3,"file":"Settings.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/settings/src/Settings.vue"],"names":[],"mappings":"AA+FA;;;;;;;;;;;;;;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.map

@@ -1 +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"}
+{"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%`, the pair wraps onto separate lines — the nav keeps its\n * declared width on the line above the content. No media query, no JavaScript\n * — the layout derives its own 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%`, the pair wraps onto separate lines\n      — the nav keeps its declared `navWidth` on the line above the content,\n      and the content takes the whole next line. No media query; the layout\n      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 and never compresses — when the container\n        is too narrow for both, it wraps to its own line at this declared\n        width rather than shrinking. Sunken elevation marks it as chrome,\n        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,mBAuDM,OAAA,EAvDA,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,mBAsCM,OAAA;IAtCA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,sBAAA,CAAA;IAA2B,OAAO,EAAA,UAAA,OAAA;GAQ/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/split-layout/src/SplitLayout.js.map

@@ -1 +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":""}
+{"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 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    /** 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\", 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=\"cn('flex flex-1 flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n      :style=\"{ flexWrap: 'wrap' }\"\n    >\n      <!--\n        Document order follows `side`, so screen-reader order matches the\n        visual one and the wrapped stack never contradicts the row: content\n        first when `side=\"right\"` (stack: content above, panel below), side\n        first when `side=\"left\"`. flex-row (never reverse) plus this ordering\n        is what makes the wrap produce content-above-panel for `side=\"right\"`.\n      -->\n      <template v-if=\"side === 'right'\">\n        <!-- Content: takes all remaining space (flex-grow: 999); its\n             min-width: 50% triggers wrapping below tablet-like widths. Scrolls\n             independently so long content never pushes the panel off-screen. -->\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        <!-- The side panel holds a fixed basis and does not grow; the sunken\n             elevation makes the content read as the work surface above\n             navigation chrome. -->\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      </template>\n      <template v-else>\n        <!-- The side panel holds a fixed basis and does not grow; the sunken\n             elevation makes the content read as the work surface above\n             navigation chrome. -->\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        <!-- Content: takes all remaining space (flex-grow: 999); its\n             min-width: 50% triggers wrapping below tablet-like widths. Scrolls\n             independently so long content never pushes the panel off-screen. -->\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      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -19,7 +19,6 @@
  * 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 };
@@ -28,8 +27,6 @@ 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"). */
@@ -37,8 +34,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }, {}, {}, {}, {}, 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"). */
@@ -46,10 +41,13 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{}>, {
     gap: SplitLayoutGap;
     side: "left" | "right";
-    collapseAt: SplitLayoutCollapseAt;
     minSideWidth: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    side?: (props: {}) => any;
 } & {
     side?: (props: {}) => any;
 } & {

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

@@ -1 +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"}
+{"version":3,"file":"SplitLayout.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/layouts/split-layout/src/SplitLayout.vue"],"names":[],"mappings":"AAyJA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,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,wFAAwF;mBACzE,MAAM;IACrB,uEAAuE;UACjE,cAAc;;IALpB,iJAAiJ;WAC1I,MAAM,GAAG,OAAO;IACvB,wFAAwF;mBACzE,MAAM;IACrB,uEAAuE;UACjE,cAAc;;SAAd,cAAc;UAJb,MAAM,GAAG,OAAO;kBAER,MAAM;;aA4FZ,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;;WAC9B,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

@@ -1,6 +1,6 @@
 import { cn } from "../../../core/src/cn.js";
 import "../../../core/src/index.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+import { Fragment, 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 = {
@@ -12,16 +12,31 @@ var SplitLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	__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)),
+				class: normalizeClass(unref(cn)("flex flex-1 flex-row", __props.gap !== "none" ? gapClass[__props.gap] : void 0)),
 				style: { flexWrap: "wrap" }
-			}, [createElementVNode("div", {
+			}, [__props.side === "right" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [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), 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)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", {
 				style: normalizeStyle({
 					flexBasis: __props.minSideWidth,
 					flexGrow: 0,
@@ -37,7 +52,7 @@ var SplitLayout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					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);
+			}, [renderSlot(_ctx.$slots, "default")], 2)], 64))], 2)], 2);
 		};
 	}
 });

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

@@ -1 +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"}
+{"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 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    /** 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\", 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=\"cn('flex flex-1 flex-row', gap !== 'none' ? gapClass[gap] : undefined)\"\n      :style=\"{ flexWrap: 'wrap' }\"\n    >\n      <!--\n        Document order follows `side`, so screen-reader order matches the\n        visual one and the wrapped stack never contradicts the row: content\n        first when `side=\"right\"` (stack: content above, panel below), side\n        first when `side=\"left\"`. flex-row (never reverse) plus this ordering\n        is what makes the wrap produce content-above-panel for `side=\"right\"`.\n      -->\n      <template v-if=\"side === 'right'\">\n        <!-- Content: takes all remaining space (flex-grow: 999); its\n             min-width: 50% triggers wrapping below tablet-like widths. Scrolls\n             independently so long content never pushes the panel off-screen. -->\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        <!-- The side panel holds a fixed basis and does not grow; the sunken\n             elevation makes the content read as the work surface above\n             navigation chrome. -->\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      </template>\n      <template v-else>\n        <!-- The side panel holds a fixed basis and does not grow; the sunken\n             elevation makes the content read as the work surface above\n             navigation chrome. -->\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        <!-- Content: takes all remaining space (flex-grow: 999); its\n             min-width: 50% triggers wrapping below tablet-like widths. Scrolls\n             independently so long content never pushes the panel off-screen. -->\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      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;AAwBA,IAAM,WAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;GA4BE,OAAA,UAAA,GAAA,mBAyFM,OAAA,EAzFA,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,mBAuEM,OAAA;IAtEH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,wBAAyB,QAAA,QAAG,SAAc,SAAS,QAAA,OAAO,KAAA,CAAS,CAAA;IAC5E,OAAO,EAAA,UAAA,OAAA;GASQ,GAAA,CAAA,QAAA,SAAI,WAApB,UAAA,GAAA,mBA6BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAzBT,mBAUM,OAAA;IATH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,qDAAA,CAAA;GAEV,GAAA,CAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,GAKV,mBAUM,OAAA;IATH,OAAK,eAAA;KAA2B,WAAA,QAAA;;;KAAwF,UAAA,QAAA;;IAMxH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,wCAAA,CAAA;GAEV,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAGxB,UAAA,GAAA,mBA6BW,UAAA,EAAA,KAAA,EAAA,GAAA,CAzBT,mBAUM,OAAA;IATH,OAAK,eAAA;KAA2B,WAAA,QAAA;;;KAAwF,UAAA,QAAA;;IAMxH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,wCAAA,CAAA;GAEV,GAAA,CAAA,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,GAKtB,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,EAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

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

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

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

@@ -1 +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"}
+{"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,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

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

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