@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/layouts/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","names":[],"sources":["../../../src/layouts/AppShell/AppShell.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AppShell — the universal application shell.\n *\n * A sidebar, a header, and a content area that reflows from mobile to\n * ultrawide. This is the layout most SaaS-style applications need: a\n * navigation sidebar on the left, a top header bar, and a scrollable content\n * region that fills the remaining space.\n *\n * The sidebar collapses intrinsically — no media query, no JavaScript. The\n * flex-wrap technique from the Sidebar composition primitive makes both panels\n * go full-width the moment the content cannot honour its `min-width`, so the\n * layout derives its own breakpoint from the container's width. The sidebar\n * width prop maps to named steps (sm/md/lg) rather than a pixel value so the\n * host names intent and the shell owns the geometry.\n *\n * The header slot is sticky within the content area so it stays visible while\n * the content scrolls. On ultrawide viewports, the content's horizontal\n * gutters widen so the extra viewport becomes intentional whitespace rather\n * than stretching lines of text.\n */\nexport type AppShellSidebarWidth = \"sm\" | \"md\" | \"lg\";\n\nconst sidebarWidthRem: Record<AppShellSidebarWidth, string> = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n} as const;\n\nexport { sidebarWidthRem };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Sidebar width step: sm (12rem), md (16rem, default), lg (20rem). */\n    sidebarWidth?: AppShellSidebarWidth;\n    /** Accessible name for the sidebar navigation landmark. */\n    sidebarAriaLabel?: string;\n  }>(),\n  { sidebarWidth: \"md\", sidebarAriaLabel: \"Navigation\" },\n);\n</script>\n\n<template>\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 sidebar becomes a full-width section above the content. No media\n    query; the layout derives its own breakpoint from the container's width.\n  -->\n  <div :class=\"cn('flex h-full')\" :style=\"{ flexWrap: 'wrap' }\">\n    <!--\n      The sidebar is a fixed-basis flex child that does not grow. It recedes\n      into the sunken elevation layer so work surfaces read as lifted above\n      navigation chrome.\n    -->\n    <aside\n      :aria-label=\"sidebarAriaLabel\"\n      :style=\"{\n        flexBasis: sidebarWidthRem[sidebarWidth],\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 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. The header is sticky so it stays visible while the\n      content scrolls. Gutters widen at wider breakpoints so ultrawide\n      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 flex min-w-0 flex-col')\"\n    >\n      <header v-if=\"$slots.header\" :class=\"cn('sticky top-0 z-20')\">\n        <slot name=\"header\" />\n      </header>\n\n      <div :class=\"cn('flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8')\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/layouts/AppShell/AppShell.vue.d.ts

@@ -0,0 +1,51 @@
+/**
+ * AppShell — the universal application shell.
+ *
+ * A sidebar, a header, and a content area that reflows from mobile to
+ * ultrawide. This is the layout most SaaS-style applications need: a
+ * navigation sidebar on the left, a top header bar, and a scrollable content
+ * region that fills the remaining space.
+ *
+ * The sidebar collapses intrinsically — no media query, no JavaScript. The
+ * flex-wrap technique from the Sidebar composition primitive makes both panels
+ * go full-width the moment the content cannot honour its `min-width`, so the
+ * layout derives its own breakpoint from the container's width. The sidebar
+ * width prop maps to named steps (sm/md/lg) rather than a pixel value so the
+ * host names intent and the shell owns the geometry.
+ *
+ * The header slot is sticky within the content area so it stays visible while
+ * the content scrolls. On ultrawide viewports, the content's horizontal
+ * gutters widen so the extra viewport becomes intentional whitespace rather
+ * than stretching lines of text.
+ */
+export type AppShellSidebarWidth = "sm" | "md" | "lg";
+declare const sidebarWidthRem: Record<AppShellSidebarWidth, string>;
+export { sidebarWidthRem };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Sidebar width step: sm (12rem), md (16rem, default), lg (20rem). */
+    sidebarWidth?: AppShellSidebarWidth;
+    /** Accessible name for the sidebar navigation landmark. */
+    sidebarAriaLabel?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Sidebar width step: sm (12rem), md (16rem, default), lg (20rem). */
+    sidebarWidth?: AppShellSidebarWidth;
+    /** Accessible name for the sidebar navigation landmark. */
+    sidebarAriaLabel?: string;
+}> & Readonly<{}>, {
+    sidebarWidth: AppShellSidebarWidth;
+    sidebarAriaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    sidebar?: (props: {}) => any;
+} & {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=AppShell.vue.d.ts.map

package/dist/layouts/AppShell/AppShell.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.vue.d.ts","sourceRoot":"","sources":["../../../src/layouts/AppShell/AppShell.vue"],"names":[],"mappings":"AAuGA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,QAAA,MAAM,eAAe,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAIhD,CAAC;AAEX,OAAO,EAAE,eAAe,EAAE,CAAC;wBACN,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,uEAAuE;mBACxD,oBAAoB;IACnC,2DAA2D;uBACxC,MAAM;;IAHzB,uEAAuE;mBACxD,oBAAoB;IACnC,2DAA2D;uBACxC,MAAM;;kBAFV,oBAAoB;sBAEhB,MAAM;;cAiEf,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC/B,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/layouts/AppShell/AppShell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import { cn } from "../../lib/cn.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+//#region src/layouts/AppShell/AppShell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var sidebarWidthRem = {
+	sm: "12rem",
+	md: "16rem",
+	lg: "20rem"
+};
+var AppShell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "AppShell",
+	props: {
+		sidebarWidth: { default: "md" },
+		sidebarAriaLabel: { default: "Navigation" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(cn)("flex h-full")),
+				style: { flexWrap: "wrap" }
+			}, [createElementVNode("aside", {
+				"aria-label": __props.sidebarAriaLabel,
+				style: normalizeStyle({
+					flexBasis: sidebarWidthRem[__props.sidebarWidth],
+					flexGrow: 0,
+					flexShrink: 1
+				}),
+				class: normalizeClass(unref(cn)("bg-sunken w-full"))
+			}, [renderSlot(_ctx.$slots, "sidebar")], 14, _hoisted_1), createElementVNode("div", {
+				style: {
+					flexBasis: 0,
+					flexGrow: 999,
+					flexShrink: 1,
+					minWidth: "50%"
+				},
+				class: normalizeClass(unref(cn)("bg-background flex min-w-0 flex-col"))
+			}, [_ctx.$slots.header ? (openBlock(), createElementBlock("header", {
+				key: 0,
+				class: normalizeClass(unref(cn)("sticky top-0 z-20"))
+			}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(cn)("flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8")) }, [renderSlot(_ctx.$slots, "default")], 2)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { AppShell_vue_vue_type_script_setup_true_lang_default as default, sidebarWidthRem };
+
+//# sourceMappingURL=AppShell.vue_vue_type_script_setup_true_lang.js.map

package/dist/layouts/AppShell/AppShell.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/layouts/AppShell/AppShell.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AppShell — the universal application shell.\n *\n * A sidebar, a header, and a content area that reflows from mobile to\n * ultrawide. This is the layout most SaaS-style applications need: a\n * navigation sidebar on the left, a top header bar, and a scrollable content\n * region that fills the remaining space.\n *\n * The sidebar collapses intrinsically — no media query, no JavaScript. The\n * flex-wrap technique from the Sidebar composition primitive makes both panels\n * go full-width the moment the content cannot honour its `min-width`, so the\n * layout derives its own breakpoint from the container's width. The sidebar\n * width prop maps to named steps (sm/md/lg) rather than a pixel value so the\n * host names intent and the shell owns the geometry.\n *\n * The header slot is sticky within the content area so it stays visible while\n * the content scrolls. On ultrawide viewports, the content's horizontal\n * gutters widen so the extra viewport becomes intentional whitespace rather\n * than stretching lines of text.\n */\nexport type AppShellSidebarWidth = \"sm\" | \"md\" | \"lg\";\n\nconst sidebarWidthRem: Record<AppShellSidebarWidth, string> = {\n  sm: \"12rem\",\n  md: \"16rem\",\n  lg: \"20rem\",\n} as const;\n\nexport { sidebarWidthRem };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Sidebar width step: sm (12rem), md (16rem, default), lg (20rem). */\n    sidebarWidth?: AppShellSidebarWidth;\n    /** Accessible name for the sidebar navigation landmark. */\n    sidebarAriaLabel?: string;\n  }>(),\n  { sidebarWidth: \"md\", sidebarAriaLabel: \"Navigation\" },\n);\n</script>\n\n<template>\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 sidebar becomes a full-width section above the content. No media\n    query; the layout derives its own breakpoint from the container's width.\n  -->\n  <div :class=\"cn('flex h-full')\" :style=\"{ flexWrap: 'wrap' }\">\n    <!--\n      The sidebar is a fixed-basis flex child that does not grow. It recedes\n      into the sunken elevation layer so work surfaces read as lifted above\n      navigation chrome.\n    -->\n    <aside\n      :aria-label=\"sidebarAriaLabel\"\n      :style=\"{\n        flexBasis: sidebarWidthRem[sidebarWidth],\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 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. The header is sticky so it stays visible while the\n      content scrolls. Gutters widen at wider breakpoints so ultrawide\n      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 flex min-w-0 flex-col')\"\n    >\n      <header v-if=\"$slots.header\" :class=\"cn('sticky top-0 z-20')\">\n        <slot name=\"header\" />\n      </header>\n\n      <div :class=\"cn('flex-1 overflow-y-auto px-4 sm:px-6 3xl:px-8')\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;AAuBA,IAAM,kBAAwD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;GA0BE,OAAA,UAAA,GAAA,mBA0CM,OAAA;IA1CA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,aAAA,CAAA;IAAkB,OAAO,EAAA,UAAA,OAAA;GAMtC,GAAA,CAAA,mBAUQ,SAAA;IATL,cAAY,QAAA;IACZ,OAAK,eAAA;KAAuB,WAAA,gBAAgB,QAAA;;;;IAK5C,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,kBAAA,CAAA;GAEV,GAAA,CAAA,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,GAUzB,mBAgBM,OAAA;IAfH,OAAO;;;;;IAKP;IACA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,qCAAA,CAAA;GAEIA,GAAAA,CAAAA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA;;IAFqB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,mBAAA,CAAA;GACrC,GAAA,CAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAGxB,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,8CAAA,CAAA,EAAA,GAAA,CACb,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/layouts/Centered/Centered.js

@@ -0,0 +1,7 @@
+import Centered_vue_vue_type_script_setup_true_lang_default, { maxWidthClass } from "./Centered.vue_vue_type_script_setup_true_lang.js";
+//#region src/layouts/Centered/Centered.vue
+var Centered_default = Centered_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Centered_default as default, maxWidthClass };
+
+//# sourceMappingURL=Centered.js.map

package/dist/layouts/Centered/Centered.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Centered.js","names":[],"sources":["../../../src/layouts/Centered/Centered.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Centered — a full-page layout with a centered content column.\n *\n * The simplest application shell: a header, a centered content column with a\n * max-width constraint, and a footer. On ultra-wide monitors the extra viewport\n * goes to intentional whitespace — lines of text stay readable rather than\n * stretching to fill the screen.\n *\n * The header and footer are NOT centered or max-width constrained: they span\n * the full viewport width. Only the default content slot is wrapped in the\n * Center composition primitive's centering logic (mx-auto, max-width, gutters).\n * This design lets navigation bars and status strips go edge-to-edge while the\n * main content stays comfortably readable.\n *\n * For pages that need only centered content without the page-level shell (no\n * header/footer, no min-height), use the Center composition primitive directly.\n */\nexport type CenteredMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"prose\";\n\nconst maxWidthClass: Record<CenteredMaxWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n  prose: \"max-w-prose\",\n} as const;\n\nexport { maxWidthClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Max-width for the centered column. Names readable intent rather than pixel values. */\n    maxWidth?: CenteredMaxWidth;\n    /** Whether to add horizontal gutters that widen at wider breakpoints. */\n    gutter?: boolean;\n  }>(),\n  { maxWidth: \"lg\", gutter: true },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      Header and footer are full-width — they are NOT inside the centered\n      wrapper. Navigation bars, status strips, and similar chrome need to span\n      the viewport edge-to-edge.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      Only the content is centered with a max-width constraint. Gutters step up\n      at `sm` and `3xl`: narrow viewports need less margin because the viewport\n      itself is margin, and ultra-wide viewports need more so the gap between\n      content and screen edge stays proportional.\n    -->\n    <div\n      :class=\"\n        cn(\n          'mx-auto w-full flex-1',\n          maxWidthClass[maxWidth],\n          gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined,\n        )\n      \"\n    >\n      <slot />\n    </div>\n\n    <footer v-if=\"$slots.footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n"],"mappings":""}

package/dist/layouts/Centered/Centered.vue.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Centered — a full-page layout with a centered content column.
+ *
+ * The simplest application shell: a header, a centered content column with a
+ * max-width constraint, and a footer. On ultra-wide monitors the extra viewport
+ * goes to intentional whitespace — lines of text stay readable rather than
+ * stretching to fill the screen.
+ *
+ * The header and footer are NOT centered or max-width constrained: they span
+ * the full viewport width. Only the default content slot is wrapped in the
+ * Center composition primitive's centering logic (mx-auto, max-width, gutters).
+ * This design lets navigation bars and status strips go edge-to-edge while the
+ * main content stays comfortably readable.
+ *
+ * For pages that need only centered content without the page-level shell (no
+ * header/footer, no min-height), use the Center composition primitive directly.
+ */
+export type CenteredMaxWidth = "sm" | "md" | "lg" | "xl" | "prose";
+declare const maxWidthClass: Record<CenteredMaxWidth, string>;
+export { maxWidthClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Max-width for the centered column. Names readable intent rather than pixel values. */
+    maxWidth?: CenteredMaxWidth;
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Max-width for the centered column. Names readable intent rather than pixel values. */
+    maxWidth?: CenteredMaxWidth;
+    /** Whether to add horizontal gutters that widen at wider breakpoints. */
+    gutter?: boolean;
+}> & Readonly<{}>, {
+    maxWidth: CenteredMaxWidth;
+    gutter: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    footer?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Centered.vue.d.ts.map

package/dist/layouts/Centered/Centered.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Centered.vue.d.ts","sourceRoot":"","sources":["../../../src/layouts/Centered/Centered.vue"],"names":[],"mappings":"AAqFA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAEnE,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAM1C,CAAC;AAEX,OAAO,EAAE,aAAa,EAAE,CAAC;wBACJ,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,yFAAyF;eAC9E,gBAAgB;IAC3B,yEAAyE;aAChE,OAAO;;IAHhB,yFAAyF;eAC9E,gBAAgB;IAC3B,yEAAyE;aAChE,OAAO;;cAFL,gBAAgB;YAElB,OAAO;;aAuDP,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/layouts/Centered/Centered.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/cn.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region src/layouts/Centered/Centered.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 0 };
+var _hoisted_2 = { key: 1 };
+var maxWidthClass = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	prose: "max-w-prose"
+};
+var Centered_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Centered",
+	props: {
+		maxWidth: { default: "lg" },
+		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", _hoisted_1, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(cn)("mx-auto w-full flex-1", maxWidthClass[__props.maxWidth], __props.gutter ? "px-4 sm:px-6 3xl:px-8" : void 0)) }, [renderSlot(_ctx.$slots, "default")], 2),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_2, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { Centered_vue_vue_type_script_setup_true_lang_default as default, maxWidthClass };
+
+//# sourceMappingURL=Centered.vue_vue_type_script_setup_true_lang.js.map

package/dist/layouts/Centered/Centered.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Centered.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/layouts/Centered/Centered.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Centered — a full-page layout with a centered content column.\n *\n * The simplest application shell: a header, a centered content column with a\n * max-width constraint, and a footer. On ultra-wide monitors the extra viewport\n * goes to intentional whitespace — lines of text stay readable rather than\n * stretching to fill the screen.\n *\n * The header and footer are NOT centered or max-width constrained: they span\n * the full viewport width. Only the default content slot is wrapped in the\n * Center composition primitive's centering logic (mx-auto, max-width, gutters).\n * This design lets navigation bars and status strips go edge-to-edge while the\n * main content stays comfortably readable.\n *\n * For pages that need only centered content without the page-level shell (no\n * header/footer, no min-height), use the Center composition primitive directly.\n */\nexport type CenteredMaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"prose\";\n\nconst maxWidthClass: Record<CenteredMaxWidth, string> = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n  prose: \"max-w-prose\",\n} as const;\n\nexport { maxWidthClass };\n</script>\n\n<script setup lang=\"ts\">\nimport { cn } from \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Max-width for the centered column. Names readable intent rather than pixel values. */\n    maxWidth?: CenteredMaxWidth;\n    /** Whether to add horizontal gutters that widen at wider breakpoints. */\n    gutter?: boolean;\n  }>(),\n  { maxWidth: \"lg\", gutter: true },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      Header and footer are full-width — they are NOT inside the centered\n      wrapper. Navigation bars, status strips, and similar chrome need to span\n      the viewport edge-to-edge.\n    -->\n    <header v-if=\"$slots.header\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      Only the content is centered with a max-width constraint. Gutters step up\n      at `sm` and `3xl`: narrow viewports need less margin because the viewport\n      itself is margin, and ultra-wide viewports need more so the gap between\n      content and screen edge stays proportional.\n    -->\n    <div\n      :class=\"\n        cn(\n          'mx-auto w-full flex-1',\n          maxWidthClass[maxWidth],\n          gutter ? 'px-4 sm:px-6 3xl:px-8' : undefined,\n        )\n      \"\n    >\n      <slot />\n    </div>\n\n    <footer v-if=\"$slots.footer\">\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n"],"mappings":";;;;;AAoBA,IAAM,gBAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;;;;;;;;;;;;GAoBE,OAAA,UAAA,GAAA,mBA+BM,OAAA,EA/BA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,yBAAA,CAAA,EAAA,GAAA;IAMCA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA,YAAA,CADP,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IASxB,mBAUM,OAAA,EATH,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,yBAA+C,cAAc,QAAA,WAAqB,QAAA,SAAM,0BAA6B,KAAA,CAAA,CAAA,EAAA,GAAA,CAQxI,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;IAGIA,KAAAA,OAAO,UAArB,UAAA,GAAA,mBAES,UAAA,YAAA,CADP,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/layouts/Dashboard/Dashboard.js

@@ -0,0 +1,7 @@
+import Dashboard_vue_vue_type_script_setup_true_lang_default, { gapClass } from "./Dashboard.vue_vue_type_script_setup_true_lang.js";
+//#region src/layouts/Dashboard/Dashboard.vue
+var Dashboard_default = Dashboard_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Dashboard_default as default, gapClass };
+
+//# sourceMappingURL=Dashboard.js.map

package/dist/layouts/Dashboard/Dashboard.js.map

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

package/dist/layouts/Dashboard/Dashboard.vue.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Dashboard — a dashboard shell: optional sidebar + auto-reflowing tile grid
+ * for panels, with an optional aside for supplementary metrics on ultrawide
+ * viewports.
+ *
+ * The layout composes three composition patterns into a single responsive
+ * shell. The innermost is the auto-fit grid from DashboardGrid/Grid: the tile
+ * column count derives from the container's own width, so the same grid
+ * reflows inside a sidebar-narrowed workspace and full-bleed on an ultra-wide
+ * monitor, with zero Tailwind breakpoints authored here or at the call site.
+ *
+ * The sidebar and aside use the Every Layout "Sidebar" flex-wrap technique:
+ * each panel gets a fixed flex-basis and the grid area gets `flex-grow: 999`,
+ * so when the container cannot fit the content's minimum, both panels wrap to
+ * full-width and the sidebar or aside stacks above the grid instead of sitting
+ * beside it. No media query, no JavaScript — the layout derives its own
+ * breakpoints from the container's width.
+ *
+ * The `#aside` slot is gated behind a `2xl` breakpoint because supplementary
+ * metrics are a luxury that only wide desktops can afford: the aside is hidden
+ * below that width and the grid takes the full width, preventing a cramped
+ * two-panel layout where neither panel has room to breathe.
+ *
+ * The header slot is full-width, above the sidebar+grid row, so a top
+ * navigation bar or title row never competes for horizontal space with the
+ * sidebar.
+ */
+export type DashboardMinTileWidth = string;
+declare const gapClass: Record<string, string>;
+export { gapClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Narrowest a tile may get before the grid drops to fewer columns. */
+    minTileWidth?: DashboardMinTileWidth;
+    /** Grid gap step. Tightens one notch below sm. */
+    gap?: "sm" | "md" | "lg";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Narrowest a tile may get before the grid drops to fewer columns. */
+    minTileWidth?: DashboardMinTileWidth;
+    /** Grid gap step. Tightens one notch below sm. */
+    gap?: "sm" | "md" | "lg";
+}> & Readonly<{}>, {
+    gap: "sm" | "md" | "lg";
+    minTileWidth: DashboardMinTileWidth;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    sidebar?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    aside?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=Dashboard.vue.d.ts.map

package/dist/layouts/Dashboard/Dashboard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.vue.d.ts","sourceRoot":"","sources":["../../../src/layouts/Dashboard/Dashboard.vue"],"names":[],"mappings":"AA0KA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAI3B,CAAC;AAEX,OAAO,EAAE,QAAQ,EAAE,CAAC;wBACC,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAEd,uEAAuE;mBACxD,qBAAqB;IACpC,kDAAkD;UAC5C,IAAI,GAAG,IAAI,GAAG,IAAI;;IAHxB,uEAAuE;mBACxD,qBAAqB;IACpC,kDAAkD;UAC5C,IAAI,GAAG,IAAI,GAAG,IAAI;;SAAlB,IAAI,GAAG,IAAI,GAAG,IAAI;kBAFT,qBAAqB;;aAiG3B,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC9B,CAAC,KAAK,IAAgB,KAAK,GAAG;;YAChC,CAAC,KAAK,IAAgB,KAAK,GAAG;EAUtC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/layouts/Dashboard/Dashboard.vue_vue_type_script_setup_true_lang.js

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

package/dist/layouts/Dashboard/Dashboard.vue_vue_type_script_setup_true_lang.js.map

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

package/dist/layouts/FormLayout/FormLayout.js

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

package/dist/layouts/FormLayout/FormLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLayout.js","names":[],"sources":["../../../src/layouts/FormLayout/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 \"../../lib/cn\";\n\nwithDefaults(\n  defineProps<{\n    /** Max-width for the form column. Forms should be narrower than general content. */\n    maxWidth?: FormLayoutMaxWidth;\n  }>(),\n  { maxWidth: \"md\" },\n);\n</script>\n\n<template>\n  <div :class=\"cn('min-h-dvh flex flex-col')\">\n    <!--\n      The header is full-width, above the centered form content, so a page\n      title or breadcrumb never competes for horizontal space.\n    -->\n    <header v-if=\"$slots.header\" :class=\"cn('px-4 sm:px-6 3xl:px-8')\">\n      <slot name=\"header\" />\n    </header>\n\n    <!--\n      The content area fills available vertical space and centres the form\n      horizontally. `max-w-md` (default) keeps labels and inputs at a\n      comfortable width — wider than that and the eye has to travel too far\n      between label and input. Gutters widen at wider breakpoints so\n      ultrawide viewports add whitespace rails rather than stretching lines.\n    -->\n    <div :class=\"cn('mx-auto w-full flex-1 px-4 sm:px-6 3xl:px-8', maxWidthClass[maxWidth])\">\n      <slot />\n\n      <!--\n        The actions slot is separated from the form content by a wider gap\n        than Stack's lg step, so the boundary between \"fill in\" and \"submit\"\n        is unmistakable. It flows with the content rather than being sticky,\n        because a submit button pinned to the viewport is a button clicked\n        before the form is filled.\n      -->\n      <div v-if=\"$slots.actions\" :class=\"cn('mt-8')\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/layouts/FormLayout/FormLayout.vue.d.ts

@@ -0,0 +1,46 @@
+/**
+ * FormLayout — a centered form page with constrained width for readability.
+ *
+ * Forms are narrower than general content: a line length comfortable for reading
+ * prose is already wider than the labels and inputs a form needs. FormLayout
+ * enforces that cap so the host never ships a form that stretches across an
+ * ultrawide monitor. The `maxWidth` prop maps to named steps rather than a pixel
+ * value, so the host names intent and the layout owns the geometry.
+ *
+ * The `#actions` slot flows with the content rather than being sticky, because a
+ * submit button that stays pinned while the user scrolls is a button that gets
+ * clicked before the form is filled. The gap between content and actions is a
+ * fixed `mt-8` — a visual separator is the layout's responsibility, and a wider
+ * gap than Stack's `lg` step is warranted to make the boundary unmistakable.
+ *
+ * The header slot is full-width, above the centered content, so a page title or
+ * breadcrumb never competes for horizontal space with the constrained form.
+ * Gutters widen at wider breakpoints so ultrawide viewports add whitespace rails
+ * rather than stretching the form.
+ */
+export type FormLayoutMaxWidth = "sm" | "md" | "lg" | "xl";
+declare const maxWidthClass: Record<FormLayoutMaxWidth, string>;
+export { maxWidthClass };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Max-width for the form column. Forms should be narrower than general content. */
+    maxWidth?: FormLayoutMaxWidth;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Max-width for the form column. Forms should be narrower than general content. */
+    maxWidth?: FormLayoutMaxWidth;
+}> & Readonly<{}>, {
+    maxWidth: FormLayoutMaxWidth;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=FormLayout.vue.d.ts.map

package/dist/layouts/FormLayout/FormLayout.vue.d.ts.map

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

package/dist/layouts/FormLayout/FormLayout.vue_vue_type_script_setup_true_lang.js

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

package/dist/layouts/FormLayout/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":["../../../src/layouts/FormLayout/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 \"../../lib/cn\";\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/layouts/MasterDetail/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 src/layouts/MasterDetail/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/layouts/MasterDetail/MasterDetail.js.map

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

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