@kanzo-tech/ui 0.0.1-alpha

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/layouts/section.d.ts

@@ -0,0 +1,166 @@
+import { ark } from '@ark-ui/react/factory';
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Section — the content scaffolding that sits INSIDE a shell region.
+ *
+ * Different axis from `shell.tsx`: the Shell regions position the window, this positions the
+ * content within them. They never compete, and a Section nests inside `ShellMain`.
+ *
+ * This is one vocabulary where there were three. `PageShell` (Header · Title · Description ·
+ * Actions · Content · Footer), `SectionHeader` (Icon · Content · Title · Description ·
+ * Actions) and `TopBarMain` (TitleGroup · Title · Subtitle · Actions) described the same row
+ * — a heading with optional icon, supporting text and end-aligned controls — under three sets
+ * of names. `scale` is what actually differed between them.
+ *
+ * NOT merged, deliberately: `CardHeader` and `DialogHeader` have this same shape but stay with
+ * their components. A header wired to a machine belongs to that machine — `DialogHeader` wires
+ * Ark's `aria-labelledby`. Precedent that the line is right: `TourHeader` *is* `DialogHeader`.
+ * Sharing across machines is fine when the wiring is shared; merging layout with wiring is not.
+ *
+ * Parts are FLAT exports. Statics are lost when a module becomes a client reference under RSC,
+ * so `Section.Header` would read back as `undefined` — a bug we hit for real with `Preferences`.
+ */
+export declare const sectionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex min-h-0 flex-1 flex-col", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex min-h-0 flex-1 flex-col", unknown, unknown, undefined>>;
+/** The container. Presentational — the scale lives on the parts that render text. */
+export type SectionRootProps = ComponentProps<typeof ark.div>;
+export declare function SectionRoot({ className, slot, ...rest }: SectionRootProps): import("react").JSX.Element;
+export declare namespace SectionRoot {
+    var displayName: string;
+}
+declare const sectionHeaderVariants: import('tailwind-variants').TVReturnType<{
+    /** `page` is the top of a screen; `section` is a block within one. The difference is
+     *  breathing room, and it is the only thing that ever really separated PageShellHeader
+     *  from SectionHeader. */
+    scale: {
+        page: string;
+        section: string;
+    };
+    /** Draw a separator under the header. */
+    bordered: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-start gap-3", {
+    /** `page` is the top of a screen; `section` is a block within one. The difference is
+     *  breathing room, and it is the only thing that ever really separated PageShellHeader
+     *  from SectionHeader. */
+    scale: {
+        page: string;
+        section: string;
+    };
+    /** Draw a separator under the header. */
+    bordered: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    /** `page` is the top of a screen; `section` is a block within one. The difference is
+     *  breathing room, and it is the only thing that ever really separated PageShellHeader
+     *  from SectionHeader. */
+    scale: {
+        page: string;
+        section: string;
+    };
+    /** Draw a separator under the header. */
+    bordered: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex items-start gap-3", unknown, unknown, undefined>>;
+export interface SectionHeaderProps extends ComponentProps<typeof ark.header>, VariantProps<typeof sectionHeaderVariants> {
+}
+/**
+ * A flex row, not a grid. `PageShellHeader` used a two-column grid so its actions could span
+ * both text rows; a flex row with a title group and `ms-auto` on the actions achieves the same
+ * alignment, handles the optional icon that the grid could not, and mirrors under RTL without
+ * a second code path.
+ */
+export declare function SectionHeader({ className, scale, bordered, slot, ...rest }: SectionHeaderProps): import("react").JSX.Element;
+export declare namespace SectionHeader {
+    var displayName: string;
+}
+/** Leading icon or badge. `mt-0.5` optically aligns it with the title's cap height. */
+export declare function SectionIcon({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace SectionIcon {
+    var displayName: string;
+}
+/** The text column: title over description. `min-w-0` is what lets the title truncate rather
+ *  than pushing the actions off the row. */
+export declare function SectionTitleGroup({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace SectionTitleGroup {
+    var displayName: string;
+}
+declare const sectionTitleVariants: import('tailwind-variants').TVReturnType<{
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, "truncate text-foreground", {
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, "truncate text-foreground", unknown, unknown, undefined>>;
+export interface SectionTitleProps extends Omit<ComponentProps<"h2">, "ref">, VariantProps<typeof sectionTitleVariants> {
+    /** Heading level, so the title slots into the surrounding document outline. Default 2.
+     *  Kept SEPARATE from `scale`: how big it looks and where it sits in the outline are
+     *  different questions, and tying them would force a visual choice to change semantics. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export declare function SectionTitle({ level, scale, className, slot, ...rest }: SectionTitleProps): import("react").JSX.Element;
+export declare namespace SectionTitle {
+    var displayName: string;
+}
+/** Supporting text under the title. Was `TopBarSubtitle` and `PageShellDescription` too. */
+export declare function SectionDescription({ className, slot, ...rest }: ComponentProps<typeof ark.p>): import("react").JSX.Element;
+export declare namespace SectionDescription {
+    var displayName: string;
+}
+/** End-aligned controls. `ms-auto` rather than the root's `justify-between`: with an optional
+ *  icon and text column ahead of it, one logical margin pushes the actions to the inline end
+ *  and still mirrors in RTL. */
+export declare function SectionActions({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace SectionActions {
+    var displayName: string;
+}
+declare const sectionBodyVariants: import('tailwind-variants').TVReturnType<{
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, "flex min-h-0 flex-1 flex-col gap-4 overflow-auto", {
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    scale: {
+        page: string;
+        section: string;
+    };
+}, undefined, "flex min-h-0 flex-1 flex-col gap-4 overflow-auto", unknown, unknown, undefined>>;
+export interface SectionBodyProps extends ComponentProps<typeof ark.section>, VariantProps<typeof sectionBodyVariants> {
+}
+/**
+ * The content region. Renders `<section>`, NEVER `<main>` — a Section nests inside a shell
+ * that already owns the page's single `<main>` landmark, and two of those are a conformance
+ * error that also makes "skip to main content" ambiguous.
+ */
+export declare function SectionBody({ className, scale, slot, ...rest }: SectionBodyProps): import("react").JSX.Element;
+export declare namespace SectionBody {
+    var displayName: string;
+}
+/** Pinned footer — form actions, a save bar. Unlike the header it carries a surface, because
+ *  it sits against the bottom of a scrolling body and needs to separate from it. */
+export declare function SectionFooter({ className, slot, ...rest }: ComponentProps<typeof ark.footer>): import("react").JSX.Element;
+export declare namespace SectionFooter {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=section.d.ts.map

package/dist/layouts/section.d.ts.map

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

package/dist/layouts/section.js

@@ -0,0 +1,153 @@
+import { jsx as a } from "react/jsx-runtime";
+import { ark as i } from "@ark-ui/react/factory";
+import { tv as r } from "tailwind-variants";
+import { cn as n } from "../lib/cn.js";
+const d = r({
+  base: "flex min-h-0 flex-1 flex-col"
+});
+function m({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(i.div, { className: n(d(), e), ...o, "data-slot": t ?? "section" });
+}
+m.displayName = "SectionRoot";
+const f = r({
+  base: "flex items-start gap-3",
+  variants: {
+    /** `page` is the top of a screen; `section` is a block within one. The difference is
+     *  breathing room, and it is the only thing that ever really separated PageShellHeader
+     *  from SectionHeader. */
+    scale: {
+      page: "px-4 pt-4 pb-2",
+      section: ""
+    },
+    /** Draw a separator under the header. */
+    bordered: { true: "border-b border-border pb-3", false: "" }
+  },
+  defaultVariants: { scale: "section", bordered: !1 }
+});
+function p({ className: e, scale: t, bordered: o, slot: s, ...c }) {
+  return /* @__PURE__ */ a(
+    i.header,
+    {
+      className: n(f({ scale: t, bordered: o }), e),
+      ...c,
+      "data-slot": s ?? "section-header"
+    }
+  );
+}
+p.displayName = "SectionHeader";
+function u({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(
+    i.div,
+    {
+      className: n("mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-5", e),
+      ...o,
+      "data-slot": t ?? "section-icon"
+    }
+  );
+}
+u.displayName = "SectionIcon";
+function b({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(
+    i.div,
+    {
+      className: n("min-w-0 flex-1", e),
+      ...o,
+      "data-slot": t ?? "section-title-group"
+    }
+  );
+}
+b.displayName = "SectionTitleGroup";
+const x = r({
+  base: "truncate text-foreground",
+  variants: {
+    scale: {
+      page: "text-lg font-bold",
+      section: "text-lg font-semibold"
+    }
+  },
+  defaultVariants: { scale: "section" }
+});
+function N({ level: e = 2, scale: t, className: o, slot: s, ...c }) {
+  const l = `h${e}`;
+  return /* @__PURE__ */ a(
+    l,
+    {
+      className: n(x({ scale: t }), o),
+      ...c,
+      slot: s ?? "section-title"
+    }
+  );
+}
+N.displayName = "SectionTitle";
+function S({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(
+    i.p,
+    {
+      className: n("mt-0.5 text-muted-foreground text-sm", e),
+      ...o,
+      "data-slot": t ?? "section-description"
+    }
+  );
+}
+S.displayName = "SectionDescription";
+function g({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(
+    i.div,
+    {
+      className: n("ms-auto flex shrink-0 items-center gap-2 self-center", e),
+      ...o,
+      "data-slot": t ?? "section-actions"
+    }
+  );
+}
+g.displayName = "SectionActions";
+const y = r({
+  base: "flex min-h-0 flex-1 flex-col gap-4 overflow-auto",
+  variants: {
+    scale: { page: "p-4", section: "" }
+  },
+  defaultVariants: { scale: "section" }
+});
+function v({
+  className: e,
+  scale: t,
+  slot: o,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    i.section,
+    {
+      className: n(y({ scale: t }), e),
+      ...s,
+      "data-slot": o ?? "section-body"
+    }
+  );
+}
+v.displayName = "SectionBody";
+function h({ className: e, slot: t, ...o }) {
+  return /* @__PURE__ */ a(
+    i.footer,
+    {
+      className: n(
+        "flex shrink-0 items-center justify-between gap-2 border-t border-border bg-card px-4 py-3",
+        e
+      ),
+      ...o,
+      "data-slot": t ?? "section-footer"
+    }
+  );
+}
+h.displayName = "SectionFooter";
+export {
+  g as SectionActions,
+  v as SectionBody,
+  S as SectionDescription,
+  h as SectionFooter,
+  p as SectionHeader,
+  u as SectionIcon,
+  m as SectionRoot,
+  N as SectionTitle,
+  b as SectionTitleGroup,
+  d as sectionVariants
+};
+//# sourceMappingURL=section.js.map

package/dist/layouts/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sources":["../../src/layouts/section.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type { ComponentProps } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Section — the content scaffolding that sits INSIDE a shell region.\n *\n * Different axis from `shell.tsx`: the Shell regions position the window, this positions the\n * content within them. They never compete, and a Section nests inside `ShellMain`.\n *\n * This is one vocabulary where there were three. `PageShell` (Header · Title · Description ·\n * Actions · Content · Footer), `SectionHeader` (Icon · Content · Title · Description ·\n * Actions) and `TopBarMain` (TitleGroup · Title · Subtitle · Actions) described the same row\n * — a heading with optional icon, supporting text and end-aligned controls — under three sets\n * of names. `scale` is what actually differed between them.\n *\n * NOT merged, deliberately: `CardHeader` and `DialogHeader` have this same shape but stay with\n * their components. A header wired to a machine belongs to that machine — `DialogHeader` wires\n * Ark's `aria-labelledby`. Precedent that the line is right: `TourHeader` *is* `DialogHeader`.\n * Sharing across machines is fine when the wiring is shared; merging layout with wiring is not.\n *\n * Parts are FLAT exports. Statics are lost when a module becomes a client reference under RSC,\n * so `Section.Header` would read back as `undefined` — a bug we hit for real with `Preferences`.\n */\n\nexport const sectionVariants = tv({\n  base: \"flex min-h-0 flex-1 flex-col\",\n});\n\n/** The container. Presentational — the scale lives on the parts that render text. */\nexport type SectionRootProps = ComponentProps<typeof ark.div>;\n\nexport function SectionRoot({ className, slot, ...rest }: SectionRootProps) {\n  return (\n    <ark.div className={cn(sectionVariants(), className)} {...rest} data-slot={slot ?? \"section\"} />\n  );\n}\nSectionRoot.displayName = \"SectionRoot\";\n\nconst sectionHeaderVariants = tv({\n  base: \"flex items-start gap-3\",\n  variants: {\n    /** `page` is the top of a screen; `section` is a block within one. The difference is\n     *  breathing room, and it is the only thing that ever really separated PageShellHeader\n     *  from SectionHeader. */\n    scale: {\n      page: \"px-4 pt-4 pb-2\",\n      section: \"\",\n    },\n    /** Draw a separator under the header. */\n    bordered: { true: \"border-b border-border pb-3\", false: \"\" },\n  },\n  defaultVariants: { scale: \"section\", bordered: false },\n});\n\nexport interface SectionHeaderProps\n  extends ComponentProps<typeof ark.header>,\n    VariantProps<typeof sectionHeaderVariants> {}\n\n/**\n * A flex row, not a grid. `PageShellHeader` used a two-column grid so its actions could span\n * both text rows; a flex row with a title group and `ms-auto` on the actions achieves the same\n * alignment, handles the optional icon that the grid could not, and mirrors under RTL without\n * a second code path.\n */\nexport function SectionHeader({ className, scale, bordered, slot, ...rest }: SectionHeaderProps) {\n  return (\n    <ark.header\n      className={cn(sectionHeaderVariants({ scale, bordered }), className)}\n      {...rest}\n      data-slot={slot ?? \"section-header\"}\n    />\n  );\n}\nSectionHeader.displayName = \"SectionHeader\";\n\n/** Leading icon or badge. `mt-0.5` optically aligns it with the title's cap height. */\nexport function SectionIcon({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-5\", className)}\n      {...rest}\n      data-slot={slot ?? \"section-icon\"}\n    />\n  );\n}\nSectionIcon.displayName = \"SectionIcon\";\n\n/** The text column: title over description. `min-w-0` is what lets the title truncate rather\n *  than pushing the actions off the row. */\nexport function SectionTitleGroup({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"min-w-0 flex-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"section-title-group\"}\n    />\n  );\n}\nSectionTitleGroup.displayName = \"SectionTitleGroup\";\n\nconst sectionTitleVariants = tv({\n  base: \"truncate text-foreground\",\n  variants: {\n    scale: {\n      page: \"text-lg font-bold\",\n      section: \"text-lg font-semibold\",\n    },\n  },\n  defaultVariants: { scale: \"section\" },\n});\n\nexport interface SectionTitleProps\n  extends Omit<ComponentProps<\"h2\">, \"ref\">,\n    VariantProps<typeof sectionTitleVariants> {\n  /** Heading level, so the title slots into the surrounding document outline. Default 2.\n   *  Kept SEPARATE from `scale`: how big it looks and where it sits in the outline are\n   *  different questions, and tying them would force a visual choice to change semantics. */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport function SectionTitle({ level = 2, scale, className, slot, ...rest }: SectionTitleProps) {\n  const Title = `h${level}` as const;\n  return (\n    <Title\n      className={cn(sectionTitleVariants({ scale }), className)}\n      {...rest}\n      slot={slot ?? \"section-title\"}\n    />\n  );\n}\nSectionTitle.displayName = \"SectionTitle\";\n\n/** Supporting text under the title. Was `TopBarSubtitle` and `PageShellDescription` too. */\nexport function SectionDescription({ className, slot, ...rest }: ComponentProps<typeof ark.p>) {\n  return (\n    <ark.p\n      className={cn(\"mt-0.5 text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"section-description\"}\n    />\n  );\n}\nSectionDescription.displayName = \"SectionDescription\";\n\n/** End-aligned controls. `ms-auto` rather than the root's `justify-between`: with an optional\n *  icon and text column ahead of it, one logical margin pushes the actions to the inline end\n *  and still mirrors in RTL. */\nexport function SectionActions({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"ms-auto flex shrink-0 items-center gap-2 self-center\", className)}\n      {...rest}\n      data-slot={slot ?? \"section-actions\"}\n    />\n  );\n}\nSectionActions.displayName = \"SectionActions\";\n\nconst sectionBodyVariants = tv({\n  base: \"flex min-h-0 flex-1 flex-col gap-4 overflow-auto\",\n  variants: {\n    scale: { page: \"p-4\", section: \"\" },\n  },\n  defaultVariants: { scale: \"section\" },\n});\n\nexport interface SectionBodyProps\n  extends ComponentProps<typeof ark.section>,\n    VariantProps<typeof sectionBodyVariants> {}\n\n/**\n * The content region. Renders `<section>`, NEVER `<main>` — a Section nests inside a shell\n * that already owns the page's single `<main>` landmark, and two of those are a conformance\n * error that also makes \"skip to main content\" ambiguous.\n */\nexport function SectionBody({\n  className,\n  scale,\n  slot,\n  ...rest\n}: SectionBodyProps) {\n  return (\n    <ark.section\n      className={cn(sectionBodyVariants({ scale }), className)}\n      {...rest}\n      data-slot={slot ?? \"section-body\"}\n    />\n  );\n}\nSectionBody.displayName = \"SectionBody\";\n\n/** Pinned footer — form actions, a save bar. Unlike the header it carries a surface, because\n *  it sits against the bottom of a scrolling body and needs to separate from it. */\nexport function SectionFooter({ className, slot, ...rest }: ComponentProps<typeof ark.footer>) {\n  return (\n    <ark.footer\n      className={cn(\n        \"flex shrink-0 items-center justify-between gap-2 border-t border-border bg-card px-4 py-3\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"section-footer\"}\n    />\n  );\n}\nSectionFooter.displayName = \"SectionFooter\";\n"],"names":["sectionVariants","tv","SectionRoot","className","slot","rest","jsx","ark","cn","sectionHeaderVariants","SectionHeader","scale","bordered","SectionIcon","SectionTitleGroup","sectionTitleVariants","SectionTitle","level","Title","SectionDescription","SectionActions","sectionBodyVariants","SectionBody","SectionFooter"],"mappings":"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"}

package/dist/layouts/shell.d.ts

@@ -0,0 +1,128 @@
+import { ark } from '@ark-ui/react/factory';
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Shell — the generic layout vocabulary.
+ *
+ * The library ships composable parts, not named arrangements. `AppShell`, `WorkspaceLayout`
+ * and friends were each a specific shape extracted from one product, which is why the layer
+ * read as "the metadata view" rather than as a design system. Those arrangements live in
+ * `docs/showcases/` now; what is shipped is the vocabulary they are built from.
+ *
+ * Parts are exported FLAT (`ShellHeader`, not `Shell.Header`). A namespace object built with
+ * `Object.assign` does not survive the RSC client boundary — `Preferences` learned that the
+ * hard way, and its compound statics had to be re-exported flat.
+ */
+/**
+ * The regions above and below the body. STRUCTURAL ONLY — placement, and the border that
+ * separates the region from its neighbour. No height, no surface, no typography, no font
+ * size: whatever you put inside is yours.
+ *
+ * This is deliberate and was arrived at the hard way. `Toolbar`, `StatusBar` and
+ * `TopBarUtility` were three copies of one strip, and the first attempt merged them into a
+ * generic `ShellBar` that kept `h-8`, `bg-card`, `text-muted-foreground` and an 11px font —
+ * the IDE aesthetic of `Toolbar`, the component that had been explicitly rejected.
+ * Generalising an implementation while preserving a rejected appearance is not generalising.
+ *
+ * So a dense IDE strip is not a component here; it is something you PUT in this region, and
+ * it lives in the workspace showcase.
+ *
+ * No role is declared. A top region is often `banner` and a bottom one `contentinfo`, but a
+ * strip is neither and a shell may have several — the call site passes the landmark.
+ */
+export declare function ShellHeader({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace ShellHeader {
+    var displayName: string;
+}
+/** The region below the body. Structural only — see {@link ShellHeader}. */
+export declare function ShellFooter({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace ShellFooter {
+    var displayName: string;
+}
+/**
+ * The outermost region: a full-height column that bars and the body stack inside.
+ *
+ * `h-dvh` rather than `h-screen`: on mobile browsers `100vh` includes the retracting URL bar,
+ * so a shell sized with it is taller than the visible viewport and its bottom bar sits off
+ * screen. `min-h-0` is what lets the body shrink and its own regions scroll instead of the
+ * page growing.
+ */
+export declare function ShellRoot({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace ShellRoot {
+    var displayName: string;
+}
+/** The horizontal band between the bars: asides and main sit here as siblings, in the order
+ *  the caller writes them — which is also what makes the layout mirror correctly in RTL. */
+export declare function ShellBody({ className, slot, ...rest }: ComponentProps<typeof ark.div>): import("react").JSX.Element;
+export declare namespace ShellBody {
+    var displayName: string;
+}
+/**
+ * The primary content region. Renders the `<main>` landmark.
+ *
+ * EXACTLY ONE per page. Two `<main>` elements are an HTML conformance error and make
+ * "skip to main content" ambiguous, so nothing nested inside may render another — nestable
+ * containers use `<section>`.
+ *
+ * That skip link is `SkipNavLink`, and this is what it lands on: wrap this element in
+ * `<SkipNavContent asChild>` rather than nesting a target inside it.
+ */
+export declare function ShellMain({ className, slot, ...rest }: ComponentProps<typeof ark.main>): import("react").JSX.Element;
+export declare namespace ShellMain {
+    var displayName: string;
+}
+declare const shellAsideVariants: import('tailwind-variants').TVReturnType<{
+    side: {
+        start: string;
+        end: string;
+    };
+    /** Docked (false) sits in the flow and carries the divider. Overlay (true) floats over
+     *  the content — a narrow-viewport drawer — so it has no divider. */
+    overlay: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex flex-col", {
+    side: {
+        start: string;
+        end: string;
+    };
+    /** Docked (false) sits in the flow and carries the divider. Overlay (true) floats over
+     *  the content — a narrow-viewport drawer — so it has no divider. */
+    overlay: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    side: {
+        start: string;
+        end: string;
+    };
+    /** Docked (false) sits in the flow and carries the divider. Overlay (true) floats over
+     *  the content — a narrow-viewport drawer — so it has no divider. */
+    overlay: {
+        true: string;
+        false: string;
+    };
+}, undefined, "flex flex-col", unknown, unknown, undefined>>;
+export interface ShellAsideProps extends ComponentProps<typeof ark.aside>, VariantProps<typeof shellAsideVariants> {
+    /** Docked width in px. Ignored when `overlay`, where the aside fills its container. */
+    width?: number;
+}
+/**
+ * A side region — navigation, a dock, an inspector. Renders `<aside>`, so it is a
+ * complementary landmark: give it an `aria-label` when a page has more than one.
+ *
+ * Logical properties throughout (`border-e` / `border-s`, `side="start" | "end"`), not
+ * physical left/right, so the whole shell mirrors under RTL without a second code path.
+ *
+ * For a RESIZABLE aside, compose Ark's Splitter around it rather than reaching for a prop —
+ * the drag behaviour, keyboard resizing and ARIA come from the machine, and this component
+ * stays presentational.
+ */
+export declare function ShellAside({ className, side, overlay, width, style, slot, ...rest }: ShellAsideProps): import("react").JSX.Element;
+export declare namespace ShellAside {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=shell.d.ts.map

package/dist/layouts/shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,+BAQvF;yBARe,WAAW;;;AAW3B,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,+BAQvF;yBARe,WAAW;;;AAW3B;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,+BAQrF;yBARe,SAAS;;;AAWzB;4FAC4F;AAC5F,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,+BAQrF;yBARe,SAAS;;;AAWzB;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,+BAQtF;yBARe,SAAS;;;AAezB,QAAA,MAAM,kBAAkB;;;;;IAIpB;yEACqE;;;;;;;;;;IADrE;yEACqE;;;;;;;;;;IADrE;yEACqE;;;;;4DAYvE,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,EACtC,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,eAAe,+BAajB;yBArBe,UAAU"}

package/dist/layouts/shell.js

@@ -0,0 +1,107 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ark as o } from "@ark-ui/react/factory";
+import { tv as f } from "tailwind-variants";
+import { cn as s } from "../lib/cn.js";
+function h({ className: a, slot: e, ...l }) {
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: s("flex shrink-0 flex-col border-b border-border", a),
+      ...l,
+      "data-slot": e ?? "shell-header"
+    }
+  );
+}
+h.displayName = "ShellHeader";
+function m({ className: a, slot: e, ...l }) {
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: s("flex shrink-0 flex-col border-t border-border", a),
+      ...l,
+      "data-slot": e ?? "shell-footer"
+    }
+  );
+}
+m.displayName = "ShellFooter";
+function c({ className: a, slot: e, ...l }) {
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: s("flex h-dvh min-h-0 flex-col overflow-hidden", a),
+      ...l,
+      "data-slot": e ?? "shell-root"
+    }
+  );
+}
+c.displayName = "ShellRoot";
+function u({ className: a, slot: e, ...l }) {
+  return /* @__PURE__ */ r(
+    o.div,
+    {
+      className: s("relative flex min-h-0 flex-1", a),
+      ...l,
+      "data-slot": e ?? "shell-body"
+    }
+  );
+}
+u.displayName = "ShellBody";
+function b({ className: a, slot: e, ...l }) {
+  return /* @__PURE__ */ r(
+    o.main,
+    {
+      className: s("flex min-w-0 flex-1 flex-col overflow-auto", a),
+      ...l,
+      "data-slot": e ?? "shell-main"
+    }
+  );
+}
+b.displayName = "ShellMain";
+const x = f({
+  base: "flex flex-col",
+  variants: {
+    side: { start: "", end: "" },
+    /** Docked (false) sits in the flow and carries the divider. Overlay (true) floats over
+     *  the content — a narrow-viewport drawer — so it has no divider. */
+    overlay: {
+      true: "absolute inset-0 z-5",
+      false: "min-w-0 shrink-0"
+    }
+  },
+  compoundVariants: [
+    // The divider belongs to the edge the aside is docked against.
+    { overlay: !1, side: "start", class: "border-e border-border" },
+    { overlay: !1, side: "end", class: "border-s border-border" }
+  ],
+  defaultVariants: { side: "start", overlay: !1 }
+});
+function v({
+  className: a,
+  side: e,
+  overlay: l,
+  width: d,
+  style: t,
+  slot: i,
+  ...n
+}) {
+  return /* @__PURE__ */ r(
+    o.aside,
+    {
+      className: s(x({ side: e, overlay: l }), a),
+      "data-side": e ?? "start",
+      style: l ? t : { width: d, ...t },
+      ...n,
+      "data-slot": i ?? "shell-aside"
+    }
+  );
+}
+v.displayName = "ShellAside";
+export {
+  v as ShellAside,
+  u as ShellBody,
+  m as ShellFooter,
+  h as ShellHeader,
+  b as ShellMain,
+  c as ShellRoot
+};
+//# sourceMappingURL=shell.js.map

package/dist/layouts/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","sources":["../../src/layouts/shell.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type { ComponentProps } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Shell — the generic layout vocabulary.\n *\n * The library ships composable parts, not named arrangements. `AppShell`, `WorkspaceLayout`\n * and friends were each a specific shape extracted from one product, which is why the layer\n * read as \"the metadata view\" rather than as a design system. Those arrangements live in\n * `docs/showcases/` now; what is shipped is the vocabulary they are built from.\n *\n * Parts are exported FLAT (`ShellHeader`, not `Shell.Header`). A namespace object built with\n * `Object.assign` does not survive the RSC client boundary — `Preferences` learned that the\n * hard way, and its compound statics had to be re-exported flat.\n */\n\n/**\n * The regions above and below the body. STRUCTURAL ONLY — placement, and the border that\n * separates the region from its neighbour. No height, no surface, no typography, no font\n * size: whatever you put inside is yours.\n *\n * This is deliberate and was arrived at the hard way. `Toolbar`, `StatusBar` and\n * `TopBarUtility` were three copies of one strip, and the first attempt merged them into a\n * generic `ShellBar` that kept `h-8`, `bg-card`, `text-muted-foreground` and an 11px font —\n * the IDE aesthetic of `Toolbar`, the component that had been explicitly rejected.\n * Generalising an implementation while preserving a rejected appearance is not generalising.\n *\n * So a dense IDE strip is not a component here; it is something you PUT in this region, and\n * it lives in the workspace showcase.\n *\n * No role is declared. A top region is often `banner` and a bottom one `contentinfo`, but a\n * strip is neither and a shell may have several — the call site passes the landmark.\n */\nexport function ShellHeader({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"flex shrink-0 flex-col border-b border-border\", className)}\n      {...rest}\n      data-slot={slot ?? \"shell-header\"}\n    />\n  );\n}\nShellHeader.displayName = \"ShellHeader\";\n\n/** The region below the body. Structural only — see {@link ShellHeader}. */\nexport function ShellFooter({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"flex shrink-0 flex-col border-t border-border\", className)}\n      {...rest}\n      data-slot={slot ?? \"shell-footer\"}\n    />\n  );\n}\nShellFooter.displayName = \"ShellFooter\";\n\n/**\n * The outermost region: a full-height column that bars and the body stack inside.\n *\n * `h-dvh` rather than `h-screen`: on mobile browsers `100vh` includes the retracting URL bar,\n * so a shell sized with it is taller than the visible viewport and its bottom bar sits off\n * screen. `min-h-0` is what lets the body shrink and its own regions scroll instead of the\n * page growing.\n */\nexport function ShellRoot({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"flex h-dvh min-h-0 flex-col overflow-hidden\", className)}\n      {...rest}\n      data-slot={slot ?? \"shell-root\"}\n    />\n  );\n}\nShellRoot.displayName = \"ShellRoot\";\n\n/** The horizontal band between the bars: asides and main sit here as siblings, in the order\n *  the caller writes them — which is also what makes the layout mirror correctly in RTL. */\nexport function ShellBody({ className, slot, ...rest }: ComponentProps<typeof ark.div>) {\n  return (\n    <ark.div\n      className={cn(\"relative flex min-h-0 flex-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"shell-body\"}\n    />\n  );\n}\nShellBody.displayName = \"ShellBody\";\n\n/**\n * The primary content region. Renders the `<main>` landmark.\n *\n * EXACTLY ONE per page. Two `<main>` elements are an HTML conformance error and make\n * \"skip to main content\" ambiguous, so nothing nested inside may render another — nestable\n * containers use `<section>`.\n *\n * That skip link is `SkipNavLink`, and this is what it lands on: wrap this element in\n * `<SkipNavContent asChild>` rather than nesting a target inside it.\n */\nexport function ShellMain({ className, slot, ...rest }: ComponentProps<typeof ark.main>) {\n  return (\n    <ark.main\n      className={cn(\"flex min-w-0 flex-1 flex-col overflow-auto\", className)}\n      {...rest}\n      data-slot={slot ?? \"shell-main\"}\n    />\n  );\n}\nShellMain.displayName = \"ShellMain\";\n\n// No `bg-card`. A region places its children and separates itself from its neighbour; the surface\n// is the caller's, like every other aesthetic in this layer. It carried one until 2026-08-01, which\n// is the same defect this file rejects `ShellBar` for ninety lines above — the rule was written\n// against a bar that kept `bg-card`, and the aside had kept it too.\nconst shellAsideVariants = tv({\n  base: \"flex flex-col\",\n  variants: {\n    side: { start: \"\", end: \"\" },\n    /** Docked (false) sits in the flow and carries the divider. Overlay (true) floats over\n     *  the content — a narrow-viewport drawer — so it has no divider. */\n    overlay: {\n      true: \"absolute inset-0 z-5\",\n      false: \"min-w-0 shrink-0\",\n    },\n  },\n  compoundVariants: [\n    // The divider belongs to the edge the aside is docked against.\n    { overlay: false, side: \"start\", class: \"border-e border-border\" },\n    { overlay: false, side: \"end\", class: \"border-s border-border\" },\n  ],\n  defaultVariants: { side: \"start\", overlay: false },\n});\n\nexport interface ShellAsideProps\n  extends ComponentProps<typeof ark.aside>,\n    VariantProps<typeof shellAsideVariants> {\n  /** Docked width in px. Ignored when `overlay`, where the aside fills its container. */\n  width?: number;\n}\n\n/**\n * A side region — navigation, a dock, an inspector. Renders `<aside>`, so it is a\n * complementary landmark: give it an `aria-label` when a page has more than one.\n *\n * Logical properties throughout (`border-e` / `border-s`, `side=\"start\" | \"end\"`), not\n * physical left/right, so the whole shell mirrors under RTL without a second code path.\n *\n * For a RESIZABLE aside, compose Ark's Splitter around it rather than reaching for a prop —\n * the drag behaviour, keyboard resizing and ARIA come from the machine, and this component\n * stays presentational.\n */\nexport function ShellAside({\n  className,\n  side,\n  overlay,\n  width,\n  style,\n  slot,\n  ...rest\n}: ShellAsideProps) {\n  return (\n    <ark.aside\n      className={cn(shellAsideVariants({ side, overlay }), className)}\n      data-side={side ?? \"start\"}\n      // `width` is a genuinely computed value the caller owns (and drives from drag state),\n      // which is the sanctioned inline-style exception. An overlay fills its container, so\n      // applying it there would fight the `inset-0`.\n      style={overlay ? style : { width, ...style }}\n      {...rest}\n      data-slot={slot ?? \"shell-aside\"}\n    />\n  );\n}\nShellAside.displayName = \"ShellAside\";\n"],"names":["ShellHeader","className","slot","rest","jsx","ark","cn","ShellFooter","ShellRoot","ShellBody","ShellMain","shellAsideVariants","tv","ShellAside","side","overlay","width","style"],"mappings":";;;;AAmCO,SAASA,EAAY,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,KAAwC;AACxF,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,iDAAiDL,CAAS;AAAA,MACvE,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAF,EAAY,cAAc;AAGnB,SAASO,EAAY,EAAE,WAAAN,GAAW,MAAAC,GAAM,GAAGC,KAAwC;AACxF,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,iDAAiDL,CAAS;AAAA,MACvE,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAK,EAAY,cAAc;AAUnB,SAASC,EAAU,EAAE,WAAAP,GAAW,MAAAC,GAAM,GAAGC,KAAwC;AACtF,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,+CAA+CL,CAAS;AAAA,MACrE,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAM,EAAU,cAAc;AAIjB,SAASC,EAAU,EAAE,WAAAR,GAAW,MAAAC,GAAM,GAAGC,KAAwC;AACtF,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,gCAAgCL,CAAS;AAAA,MACtD,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAO,EAAU,cAAc;AAYjB,SAASC,EAAU,EAAE,WAAAT,GAAW,MAAAC,GAAM,GAAGC,KAAyC;AACvF,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,8CAA8CL,CAAS;AAAA,MACpE,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAQ,EAAU,cAAc;AAMxB,MAAMC,IAAqBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM,EAAE,OAAO,IAAI,KAAK,GAAA;AAAA;AAAA;AAAA,IAGxB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,kBAAkB;AAAA;AAAA,IAEhB,EAAE,SAAS,IAAO,MAAM,SAAS,OAAO,yBAAA;AAAA,IACxC,EAAE,SAAS,IAAO,MAAM,OAAO,OAAO,yBAAA;AAAA,EAAyB;AAAA,EAEjE,iBAAiB,EAAE,MAAM,SAAS,SAAS,GAAA;AAC7C,CAAC;AAoBM,SAASC,EAAW;AAAA,EACzB,WAAAZ;AAAA,EACA,MAAAa;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAf;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,SACE,gBAAAC;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGK,EAAmB,EAAE,MAAAG,GAAM,SAAAC,EAAA,CAAS,GAAGd,CAAS;AAAA,MAC9D,aAAWa,KAAQ;AAAA,MAInB,OAAOC,IAAUE,IAAQ,EAAE,OAAAD,GAAO,GAAGC,EAAA;AAAA,MACpC,GAAGd;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AACAW,EAAW,cAAc;"}

package/dist/lib/cn.d.ts

@@ -0,0 +1,4 @@
+import { ClassValue } from 'clsx';
+/** Merge class names with clsx + tailwind-merge (dedupes conflicting utilities). */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,oFAAoF;AACpF,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/lib/cn.js

@@ -0,0 +1,9 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Merge class names with clsx + tailwind-merge (dedupes conflicting utilities). */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;AAIO,SAASA,KAAMC,GAA8B;AAClD,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}

package/dist/lib/is-active-path.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Is `href` the active route, given the current path?
+ *
+ * A prefix match, but not `startsWith`: `/settings` is active on `/settings/cloud` and is **not**
+ * active on `/settings-archive`. That boundary is the whole reason this is a function rather than
+ * an expression written at each call site — it is four lines and it was wrong in two of them.
+ *
+ * The library ships no navigation component to apply it for you: a nav is a layout tree, so it is
+ * hand-composed from `SidebarMenu*` and a router link through `asChild`. This is the one part of
+ * that arrangement that is logic rather than markup, so it is the one part that is exported.
+ */
+export declare function isActivePath(activePath: string | undefined, href: string | undefined): boolean;
+//# sourceMappingURL=is-active-path.d.ts.map

package/dist/lib/is-active-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-active-path.d.ts","sourceRoot":"","sources":["../../src/lib/is-active-path.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAM9F"}