@krizaka/ui 2.8.0 → 2.10.0

package/dist/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app-shell/app-shell.tsx"],"sourcesContent":["// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, className, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props} />\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"],"mappings":"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","names":["value"]}

package/dist/auth-layout.d.ts

@@ -0,0 +1,136 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const authLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            aside?: tailwind_variants.ClassValue;
+            asideBrand?: tailwind_variants.ClassValue;
+            asideBody?: tailwind_variants.ClassValue;
+            asideTitle?: tailwind_variants.ClassValue;
+            asideText?: tailwind_variants.ClassValue;
+            asideFoot?: tailwind_variants.ClassValue;
+            column?: tailwind_variants.ClassValue;
+            mobileBrand?: tailwind_variants.ClassValue;
+            head?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            legal?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    aside: string;
+    asideBrand: string;
+    asideBody: string;
+    asideTitle: string;
+    asideText: string;
+    asideFoot: string;
+    main: string;
+    column: string;
+    mobileBrand: string;
+    head: string;
+    title: string;
+    description: string;
+    footer: string;
+    legal: string;
+}>>;
+type AuthLayoutProps = Omit<React.ComponentProps<"div">, "title"> & {
+    /** The product's mark and name (`<ProductLogo id="orochia" /> Orochia`): in the brand panel, and above the form on a phone. */
+    brand: React.ReactNode;
+    /** The form's title (`Welcome back`): the `h1`. */
+    title: React.ReactNode;
+    /** One sentence under the title. */
+    description?: React.ReactNode;
+    /** The form: fields, the primary Button, the alternatives (a passkey, a magic link). */
+    children: React.ReactNode;
+    /** Under the form: the other way (`No account yet? Create one`). */
+    footer?: React.ReactNode;
+    /** The fine print at the very bottom (terms, privacy). */
+    legal?: React.ReactNode;
+    /** The brand panel's promise, large (desktop). */
+    promise?: React.ReactNode;
+    /** The brand panel's sentence or quote under the promise (a MascotQuote, a creator's words). */
+    aside?: React.ReactNode;
+    /** The brand panel's foot (`© Krizaka · Montréal`). */
+    asideFooter?: React.ReactNode;
+};
+/** An entry screen: the product's brand panel beside the form (one column on a phone). */
+declare function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }: AuthLayoutProps): React.JSX.Element;
+
+export { AuthLayout, type AuthLayoutProps, authLayout };

package/dist/auth-layout.js

@@ -0,0 +1,75 @@
+// src/auth-layout/auth-layout.tsx
+import { tv as tv2 } from "tailwind-variants";
+
+// src/section-backdrop/section-backdrop.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sectionBackdropVariants = tv({
+  slots: {
+    root: "kz-backdrop",
+    drift: "kz-backdrop-drift",
+    dome: "kz-backdrop-dome",
+    grid: "kz-backdrop-grid",
+    media: "kz-backdrop-media"
+  }
+});
+function SectionBackdrop({ as: Tag = "section", direction = "down", dome = true, grid = false, media, animated = true, className, children, ...props }) {
+  const s2 = sectionBackdropVariants();
+  return /* @__PURE__ */ jsxs(Tag, { className: s2.root({ className }), "data-direction": direction, ...props, children: [
+    animated ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.drift() }) : null,
+    dome ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.dome() }) : null,
+    grid ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.grid() }) : null,
+    media ? /* @__PURE__ */ jsx("div", { "data-backdrop-layer": true, "aria-hidden": true, className: s2.media(), children: media }) : null,
+    children
+  ] });
+}
+
+// src/auth-layout/auth-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var authLayout = tv2({
+  slots: {
+    root: "grid min-h-dvh w-full bg-surface-0 text-fg lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]",
+    aside: "relative hidden flex-col justify-between overflow-hidden border-r border-border-subtle p-10 lg:flex",
+    asideBrand: "relative flex items-center gap-2.5 font-display text-base font-bold tracking-tight",
+    asideBody: "relative flex max-w-md flex-col gap-4",
+    asideTitle: "font-display text-3xl font-extrabold leading-tight tracking-tight text-fg",
+    asideText: "text-[15px] leading-relaxed text-fg-secondary",
+    asideFoot: "relative text-xs text-fg-secondary",
+    main: "flex flex-col items-center justify-center px-4 py-10 sm:px-8",
+    column: "flex w-full max-w-sm flex-col gap-6",
+    mobileBrand: "flex items-center gap-2.5 font-display text-base font-bold tracking-tight lg:hidden",
+    head: "flex flex-col gap-1.5",
+    title: "font-display text-2xl font-extrabold tracking-tight text-fg",
+    description: "text-sm text-fg-secondary",
+    footer: "text-center text-sm text-fg-secondary",
+    legal: "text-center text-xs leading-relaxed text-fg-secondary"
+  }
+});
+var s = authLayout();
+function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsxs2(SectionBackdrop, { as: "div", grid: true, className: s.aside(), "aria-hidden": !promise && !aside ? true : void 0, children: [
+      /* @__PURE__ */ jsx2("div", { className: s.asideBrand(), children: brand }),
+      /* @__PURE__ */ jsxs2("div", { className: s.asideBody(), children: [
+        promise && /* @__PURE__ */ jsx2("p", { className: s.asideTitle(), children: promise }),
+        aside && /* @__PURE__ */ jsx2("div", { className: s.asideText(), children: aside })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: s.asideFoot(), children: asideFooter })
+    ] }),
+    /* @__PURE__ */ jsx2("main", { className: s.main(), children: /* @__PURE__ */ jsxs2("div", { className: s.column(), children: [
+      /* @__PURE__ */ jsx2("div", { className: s.mobileBrand(), children: brand }),
+      /* @__PURE__ */ jsxs2("div", { className: s.head(), children: [
+        /* @__PURE__ */ jsx2("h1", { className: s.title(), children: title }),
+        description && /* @__PURE__ */ jsx2("p", { className: s.description(), children: description })
+      ] }),
+      children,
+      footer && /* @__PURE__ */ jsx2("p", { className: s.footer(), children: footer }),
+      legal && /* @__PURE__ */ jsx2("p", { className: s.legal(), children: legal })
+    ] }) })
+  ] });
+}
+export {
+  AuthLayout,
+  authLayout
+};
+//# sourceMappingURL=auth-layout.js.map

package/dist/auth-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/auth-layout/auth-layout.tsx","../src/section-backdrop/section-backdrop.tsx"],"sourcesContent":["// Server-safe. Sign in, sign up, verify, reset — read from the products' entry screens: on a desktop the product's\n// brand panel (its gradient, a sentence, a quote or an illustration) beside a calm column with the form; on a phone\n// one column, the brand reduced to its mark above the form. Words and the product's mark arrive as props.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { SectionBackdrop } from \"../section-backdrop/section-backdrop\";\n\nexport const authLayout = tv({\n  slots: {\n    root: \"grid min-h-dvh w-full bg-surface-0 text-fg lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)]\",\n    aside: \"relative hidden flex-col justify-between overflow-hidden border-r border-border-subtle p-10 lg:flex\",\n    asideBrand: \"relative flex items-center gap-2.5 font-display text-base font-bold tracking-tight\",\n    asideBody: \"relative flex max-w-md flex-col gap-4\",\n    asideTitle: \"font-display text-3xl font-extrabold leading-tight tracking-tight text-fg\",\n    asideText: \"text-[15px] leading-relaxed text-fg-secondary\",\n    asideFoot: \"relative text-xs text-fg-secondary\",\n    main: \"flex flex-col items-center justify-center px-4 py-10 sm:px-8\",\n    column: \"flex w-full max-w-sm flex-col gap-6\",\n    mobileBrand: \"flex items-center gap-2.5 font-display text-base font-bold tracking-tight lg:hidden\",\n    head: \"flex flex-col gap-1.5\",\n    title: \"font-display text-2xl font-extrabold tracking-tight text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    footer: \"text-center text-sm text-fg-secondary\",\n    legal: \"text-center text-xs leading-relaxed text-fg-secondary\",\n  },\n});\nconst s = authLayout();\n\nexport type AuthLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The product's mark and name (`<ProductLogo id=\"orochia\" /> Orochia`): in the brand panel, and above the form on a phone. */\n  brand: React.ReactNode;\n  /** The form's title (`Welcome back`): the `h1`. */\n  title: React.ReactNode;\n  /** One sentence under the title. */\n  description?: React.ReactNode;\n  /** The form: fields, the primary Button, the alternatives (a passkey, a magic link). */\n  children: React.ReactNode;\n  /** Under the form: the other way (`No account yet? Create one`). */\n  footer?: React.ReactNode;\n  /** The fine print at the very bottom (terms, privacy). */\n  legal?: React.ReactNode;\n  /** The brand panel's promise, large (desktop). */\n  promise?: React.ReactNode;\n  /** The brand panel's sentence or quote under the promise (a MascotQuote, a creator's words). */\n  aside?: React.ReactNode;\n  /** The brand panel's foot (`© Krizaka · Montréal`). */\n  asideFooter?: React.ReactNode;\n};\n\n/** An entry screen: the product's brand panel beside the form (one column on a phone). */\nexport function AuthLayout({ brand, title, description, children, footer, legal, promise, aside, asideFooter, className, ...props }: AuthLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <SectionBackdrop as=\"div\" grid className={s.aside()} aria-hidden={!promise && !aside ? true : undefined}>\n        <div className={s.asideBrand()}>{brand}</div>\n        <div className={s.asideBody()}>\n          {promise && <p className={s.asideTitle()}>{promise}</p>}\n          {aside && <div className={s.asideText()}>{aside}</div>}\n        </div>\n        <div className={s.asideFoot()}>{asideFooter}</div>\n      </SectionBackdrop>\n      <main className={s.main()}>\n        <div className={s.column()}>\n          <div className={s.mobileBrand()}>{brand}</div>\n          <div className={s.head()}>\n            <h1 className={s.title()}>{title}</h1>\n            {description && <p className={s.description()}>{description}</p>}\n          </div>\n          {children}\n          {footer && <p className={s.footer()}>{footer}</p>}\n          {legal && <p className={s.legal()}>{legal}</p>}\n        </div>\n      </main>\n    </div>\n  );\n}\n","// Server-safe. The backdrop of a page section in the brand's visual language (packages/tokens/BRAND.md).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const sectionBackdropVariants = tv({\n  slots: {\n    root: \"kz-backdrop\",\n    drift: \"kz-backdrop-drift\",\n    dome: \"kz-backdrop-dome\",\n    grid: \"kz-backdrop-grid\",\n    media: \"kz-backdrop-media\",\n  },\n});\n\nexport interface SectionBackdropProps extends React.HTMLAttributes<HTMLElement> {\n  /** The element: `section` (default), `header`, `footer` or `div`. */\n  as?: \"section\" | \"header\" | \"footer\" | \"div\";\n  /** Where the brand tint sits: `down` (default) starts tinted and ends on the page surface; `up` ends tinted (a closing call to action). */\n  direction?: \"down\" | \"up\";\n  /** The light dome above the content (the halo of a hero). Default true. */\n  dome?: boolean;\n  /** A floor of perspective lines under the content. Default false. */\n  grid?: boolean;\n  /** A foreground illustration or image, blurred for depth of field, behind the content (decorative: hidden from assistive technology). */\n  media?: React.ReactNode;\n  /** The very slow drift of the light (40 s); always still under prefers-reduced-motion. Default true. */\n  animated?: boolean;\n}\n\n/**\n * A section of a page in the Krizaka visual language: the brand's section gradient (`--kz-brand-gradient-*`, so it\n * follows the brand theme and dark/light), a light dome, an optional perspective grid and a blurred foreground. Every\n * section ends on the page surface, so consecutive sections glide from one tint to the next. Text on it reads at AA\n * (tested in @krizaka/tokens).\n */\nexport function SectionBackdrop({ as: Tag = \"section\", direction = \"down\", dome = true, grid = false, media, animated = true, className, children, ...props }: SectionBackdropProps) {\n  const s = sectionBackdropVariants();\n  return (\n    <Tag className={s.root({ className })} data-direction={direction} {...props}>\n      {animated ? <div data-backdrop-layer aria-hidden className={s.drift()} /> : null}\n      {dome ? <div data-backdrop-layer aria-hidden className={s.dome()} /> : null}\n      {grid ? <div data-backdrop-layer aria-hidden className={s.grid()} /> : null}\n      {media ? (\n        <div data-backdrop-layer aria-hidden className={s.media()}>\n          {media}\n        </div>\n      ) : null}\n      {children}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["tv","s","jsx","jsxs","tv"]}

package/dist/blocks.css

@@ -527,3 +527,250 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   .kz-block-card:hover, .kz-block-card:hover .kz-block-icon, .kz-link-card:hover .kz-link-card-cta svg, .kz-arg-more:hover svg { transform: none !important; }
   .kz-quote-bird { animation: none !important; }
 }
+
+/* ═══ Page templates (@krizaka/ui/*-page): each one a distinct composition of the blocks ═══ */
+
+/* A split hero: the words on one side, the product live on the other (a demo, a recording, a schema). */
+.kz-tpl-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
+.kz-tpl-split[data-reverse] > :first-child { order: 2; }
+@media (max-width: 900px) { .kz-tpl-split { grid-template-columns: minmax(0, 1fr); } .kz-tpl-split[data-reverse] > :first-child { order: 0; } }
+.kz-tpl-stage {
+  position: relative; min-width: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 70%, transparent);
+}
+.kz-tpl-stage-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--kz-border-subtle); background: var(--kz-surface-2);
+  font-family: var(--kz-font-mono); font-size: 11px; color: var(--kz-text-secondary); }
+.kz-tpl-stage-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--kz-border-strong); }
+.kz-tpl-stage-bar span { margin-left: 8px; }
+.kz-tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
+
+/* A band of proofs: figures or facts across the frame, divided by hairlines. */
+.kz-tpl-band { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--kz-border-subtle); }
+.kz-tpl-band > div { padding: 20px 18px; border-left: 1px solid var(--kz-border-subtle); }
+.kz-tpl-band > div:first-child { border-left: 0; }
+.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--kz-text-primary); }
+.kz-tpl-band dd { margin: 4px 0 0; font-size: 13px; color: var(--kz-text-secondary); }
+@media (max-width: 560px) { .kz-tpl-band > div { border-left: 0; border-top: 1px solid var(--kz-border-subtle); } .kz-tpl-band > div:first-child { border-top: 0; } }
+
+/* A bento: features of different weights on a six-column grid (one column on a phone). */
+.kz-tpl-bento { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
+.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 18px;
+  background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
+.kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
+.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.012em; color: var(--kz-text-primary); }
+.kz-tpl-bento > li[data-size="lg"] h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
+.kz-tpl-bento p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-bento-visual { margin-top: auto; min-width: 0; }
+@media (max-width: 900px) { .kz-tpl-bento > li, .kz-tpl-bento > li[data-size] { grid-column: span 6; grid-row: auto; } }
+
+/* A timeline: numbered steps along a line, the visual alternating sides on a wide screen. */
+.kz-tpl-timeline { margin: 0; padding: 0; list-style: none; position: relative; display: grid; gap: clamp(28px, 5vw, 56px); }
+.kz-tpl-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
+  background: linear-gradient(var(--kz-hue, var(--kz-accent)), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 10%, transparent)); }
+.kz-tpl-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
+.kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px;
+  font-family: var(--kz-font-display); font-size: 16px; font-weight: 800; color: var(--kz-text-primary); background: var(--kz-surface-1);
+  border: 2px solid var(--kz-hue, var(--kz-accent)); box-shadow: 0 0 0 6px var(--kz-surface-0); }
+.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kz-text-secondary); }
+.kz-tpl-step-visual { min-width: 0; }
+.kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: -1; grid-column: 2; }
+.kz-tpl-step:nth-child(even) .kz-tpl-step-text { grid-column: 3; grid-row: 1; }
+@media (max-width: 900px) {
+  .kz-tpl-step, .kz-tpl-step:nth-child(even) { grid-template-columns: 44px minmax(0, 1fr); }
+  .kz-tpl-step .kz-tpl-step-visual, .kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: 0; grid-column: 2; }
+  .kz-tpl-step:nth-child(even) .kz-tpl-step-text { grid-column: 2; grid-row: auto; }
+}
+
+/* A gallery: media in columns of different heights, the featured one wide. */
+.kz-tpl-gallery { margin: 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 14px; }
+.kz-tpl-gallery > li { break-inside: avoid; margin-bottom: 14px; }
+.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-figure-media { overflow: hidden; background: var(--kz-media); }
+.kz-tpl-figure-media > :is(img, video) { display: block; width: 100%; height: auto; }
+.kz-tpl-figure figcaption { display: grid; gap: 4px; padding: 12px 14px; }
+.kz-tpl-figure strong { font-size: 14px; color: var(--kz-text-primary); }
+.kz-tpl-figure span { font-size: 13px; line-height: 1.5; color: var(--kz-text-secondary); }
+.kz-tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+
+/* The documentation hub: the search in the middle, the collections as brand panels with their quick links. */
+.kz-tpl-hub-search { display: grid; justify-items: center; gap: 12px; margin: 24px auto 0; width: min(100%, 40rem); }
+.kz-tpl-hub-search > * { width: 100%; }
+.kz-tpl-hub-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
+.kz-tpl-collections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
+.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 18px;
+  background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
+  border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
+.kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
+.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); text-decoration: none; }
+.kz-tpl-collection-head a::after { content: ""; position: absolute; inset: 0; z-index: -1; }
+.kz-tpl-collection-head a:focus-visible { outline: none; }
+.kz-tpl-collection:has(.kz-tpl-collection-head a:focus-visible) { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-collection p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-text-secondary); }
+.kz-tpl-collection ul { position: relative; z-index: 1; margin: auto 0 0; padding: 10px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
+  border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-collection ul a { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
+  text-decoration: none; color: var(--kz-text-primary); background: var(--kz-surface-2); border: 1px solid var(--kz-border-subtle); }
+.kz-tpl-collection ul a:hover { border-color: var(--kz-accent); }
+.kz-tpl-collection ul a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .kz-tpl-collection { transition: transform 0.3s var(--kz-ease, ease), box-shadow 0.3s var(--kz-ease, ease); }
+  .kz-tpl-collection:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px var(--kz-accent); }
+}
+.kz-tpl-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
+@media (max-width: 900px) { .kz-tpl-two { grid-template-columns: minmax(0, 1fr); } }
+.kz-tpl-links { margin: 0; padding: 0; list-style: none; display: grid; }
+.kz-tpl-links li { border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-links li:first-child { border-top: 0; }
+.kz-tpl-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 2px; text-decoration: none; color: var(--kz-text-primary); }
+.kz-tpl-links a:hover { color: var(--kz-accent-text); }
+.kz-tpl-links a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 6px; }
+.kz-tpl-links strong { font-size: 14.5px; font-weight: 650; }
+.kz-tpl-links small { flex-shrink: 0; font-family: var(--kz-font-mono); font-size: 11.5px; color: var(--kz-text-secondary); }
+
+/* An article: breadcrumb, title, meta, then the reading column; previous / next at the foot. */
+.kz-tpl-crumbs { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--kz-text-secondary); }
+.kz-tpl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--kz-border-strong); }
+.kz-tpl-crumbs a { color: inherit; text-decoration: none; }
+.kz-tpl-crumbs a:hover { color: var(--kz-text-primary); }
+.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--kz-text-primary); }
+.kz-tpl-article-lead { margin: 12px 0 0; max-width: 46rem; font-size: 17px; line-height: 1.65; color: var(--kz-text-secondary); }
+.kz-tpl-article-meta { margin-top: 14px; }
+.kz-tpl-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--kz-text-secondary); }
+.kz-tpl-prose :is(h2, h3) { color: var(--kz-text-primary); font-family: var(--kz-font-display); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
+.kz-tpl-pager a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  text-decoration: none; color: var(--kz-text-primary); }
+.kz-tpl-pager a:hover { border-color: var(--kz-accent); }
+.kz-tpl-pager a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-pager a[rel="next"] { grid-column: 2; text-align: right; }
+.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-text-secondary); }
+
+/* A catalogue: the filters in a sticky column (folded above the results on a phone). */
+.kz-tpl-catalogue { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 32px; align-items: start; }
+.kz-tpl-catalogue-filters { position: sticky; top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-catalogue-filters > summary { display: none; }
+.kz-tpl-catalogue-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.kz-tpl-count { margin: 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); }
+@media (max-width: 900px) {
+  .kz-tpl-catalogue { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .kz-tpl-catalogue-filters { position: static; border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+  .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
+    font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
+  .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
+  .kz-tpl-catalogue-filters > div { padding: 0 14px 14px; }
+}
+
+/* A long read: chapters with their big numbers, pull quotes in the margin, figures that break out. */
+.kz-tpl-chapters { display: grid; gap: clamp(40px, 7vw, 88px); }
+.kz-tpl-chapter { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 42rem) minmax(0, 1fr); gap: 24px 32px; }
+.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
+  color: transparent; -webkit-text-stroke: 1.5px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
+  color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-chapter-body { font-size: 17px; line-height: 1.8; color: var(--kz-text-secondary); }
+.kz-tpl-chapter-body p { margin: 0 0 1em; }
+.kz-tpl-chapter-aside { align-self: start; padding-top: 8px; }
+.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 700;
+  line-height: 1.4; color: var(--kz-text-primary); }
+.kz-tpl-chapter-figure { grid-column: 2 / -1; margin: 8px 0 0; }
+@media (max-width: 1023px) {
+  .kz-tpl-chapter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
+  .kz-tpl-chapter-figure { grid-column: auto; }
+}
+
+/* A changelog: the date sticks beside its entries; each entry a version, a title, its kinds of change. */
+.kz-tpl-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+.kz-tpl-log-entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-log-entry:first-child { border-top: 0; }
+.kz-tpl-log-when { position: sticky; top: var(--kz-anchor-offset, 96px); align-self: start; display: grid; gap: 6px; }
+.kz-tpl-log-when time { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); }
+.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-log-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+.kz-tpl-log-items li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
+.kz-tpl-log-kind[data-kind="added"] { color: var(--kz-success-text); }
+.kz-tpl-log-kind[data-kind="changed"] { color: var(--kz-accent-text); }
+.kz-tpl-log-kind[data-kind="fixed"] { color: var(--kz-warning-text); }
+.kz-tpl-log-kind[data-kind="removed"] { color: var(--kz-danger-text); }
+@media (max-width: 720px) {
+  .kz-tpl-log-entry { grid-template-columns: minmax(0, 1fr); gap: 10px; }
+  .kz-tpl-log-when { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }
+  .kz-tpl-log-items li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+}
+
+/* Contact: the ways to reach us beside the form; what happens next under it. */
+.kz-tpl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
+@media (max-width: 900px) { .kz-tpl-contact { grid-template-columns: minmax(0, 1fr); } }
+.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-next { margin: 0; padding: 0; list-style: none; counter-reset: next; display: grid; gap: 12px; }
+.kz-tpl-next li { counter-increment: next; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
+  font-family: var(--kz-font-mono); font-size: 12px; font-weight: 700; color: var(--kz-accent-text); background: var(--kz-accent-soft); }
+.kz-tpl-next strong { display: block; color: var(--kz-text-primary); }
+
+/* Status: one line per service, its state in words and a dot; an incident log under it. */
+.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--kz-border-default);
+  background: var(--kz-surface-1); }
+.kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
+.kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
+.kz-tpl-state[data-state="outage"] { border-color: color-mix(in srgb, var(--kz-danger) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-danger) 7%, var(--kz-surface-1)); }
+.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--kz-text-secondary); }
+[data-state="operational"] > .kz-tpl-dot, .kz-tpl-dot[data-state="operational"] { background: var(--kz-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kz-success) 22%, transparent); }
+[data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
+[data-state="outage"] > .kz-tpl-dot, .kz-tpl-dot[data-state="outage"] { background: var(--kz-danger); }
+[data-state="building"] > .kz-tpl-dot, .kz-tpl-dot[data-state="building"] { background: var(--kz-info); }
+.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: 16px; border: 1px solid var(--kz-border-default); overflow: hidden; }
+.kz-tpl-services li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kz-border-subtle);
+  font-size: 14.5px; color: var(--kz-text-primary); background: var(--kz-surface-1); }
+.kz-tpl-services li:first-child { border-top: 0; }
+.kz-tpl-services small { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
+
+/* An error: the code, huge and drawn in outline, the bird beside it, the ways out under it. */
+.kz-tpl-error { display: grid; justify-items: center; gap: 16px; padding-block: calc(var(--kz-hero-top, 120px) - 16px) clamp(48px, 8vw, 96px); text-align: center; }
+.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800;
+  line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--kz-text-primary); }
+.kz-tpl-error p:not(.kz-tpl-error-code) { margin: 0; max-width: 34rem; font-size: 16px; line-height: 1.65; color: var(--kz-text-secondary); }
+.kz-tpl-error-search { width: min(100%, 28rem); }
+
+/* Pricing: plans side by side, the featured one lifted; a comparison under them. */
+.kz-tpl-plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; align-items: stretch; }
+.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 20px; background: var(--kz-surface-1);
+  border: 1px solid var(--kz-border-default); }
+.kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
+  box-shadow: 0 30px 60px -36px var(--kz-accent); }
+.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--kz-text-primary); }
+.kz-tpl-price small { display: block; margin-top: 6px; font-family: var(--kz-font-text, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kz-text-secondary); }
+.kz-tpl-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--kz-text-secondary); }
+.kz-tpl-plan ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
+.kz-tpl-plan ul svg { margin-top: 3px; color: var(--kz-success-text); }
+.kz-tpl-plan > :last-child { margin-top: auto; }
+.kz-tpl-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
+.kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
+.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
+.kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
+.kz-tpl-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq { display: grid; gap: 8px; }
+.kz-tpl-faq details { border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; color: var(--kz-text-primary); }
+.kz-tpl-faq summary::-webkit-details-marker { display: none; }
+.kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 14px; }
+.kz-tpl-faq details > div { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.65; color: var(--kz-text-secondary); }
+
+@media (prefers-reduced-motion: reduce) { .kz-tpl-collection { transition: none !important; transform: none !important; } }
+.kz-tpl-promise { margin-top: 32px; }
+.kz-hero[data-align="center"] .kz-hero-extra { justify-content: center; }
+.kz-tpl-stack { display: grid; gap: 14px; min-width: 0; align-content: start; }
+.kz-tpl-h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); max-width: none; }
+.kz-tpl-flush .kz-frame { --kz-gutter: 0px; }
+.kz-tpl-catalogue-frame { padding-block: 24px clamp(48px, 7vw, 88px); }
+.kz-tpl-longform { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); }
+.kz-tpl-summary { display: block; font-size: 15px; line-height: 1.65; color: var(--kz-text-primary); }
+.kz-tpl-caption { padding: 12px 14px 4px; text-align: left; caption-side: top; }
+.kz-tpl-plan .kz-tpl-collection-head { justify-content: space-between; }
+.kz-tpl-scroll:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-prose > p, .kz-tpl-prose > ul, .kz-tpl-prose > ol { margin: 0 0 1em; }

package/dist/catalogue-page.d.ts

@@ -0,0 +1,34 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** In the hero: a search field. */
+    search?: React.ReactNode;
+    /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */
+    filters: React.ReactNode;
+    /** On a phone, the words that open the filters (`Filters`). */
+    filtersLabel: string;
+    /** What matches, in words (`24 components`). */
+    count?: React.ReactNode;
+    /** On the right of the count: the sort, a view switch. */
+    toolbar?: React.ReactNode;
+    /** The results: a CardGrid, a list, an empty state. */
+    children: React.ReactNode;
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */
+declare function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps): React.JSX.Element;
+
+export { CataloguePage, type CataloguePageProps };

package/dist/catalogue-page.js

@@ -0,0 +1,26 @@
+// src/catalogue-page/catalogue-page.tsx
+import { Page } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, backdrop: "plain", children: search }),
+    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-catalogue-frame", children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue", children: [
+      /* @__PURE__ */ jsxs("details", { className: "kz-tpl-catalogue-filters", open: true, children: [
+        /* @__PURE__ */ jsx("summary", { children: filtersLabel }),
+        /* @__PURE__ */ jsx("div", { children: filters })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        (count || toolbar) && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue-head", children: [
+          count && /* @__PURE__ */ jsx("p", { className: "kz-tpl-count", "aria-live": "polite", children: count }),
+          toolbar
+        ] }),
+        children
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  CataloguePage
+};
+//# sourceMappingURL=catalogue-page.js.map

package/dist/catalogue-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalogue-page/catalogue-page.tsx"],"sourcesContent":["// Server-safe. A catalogue or an index (blocks.css `.kz-tpl-catalogue`): the hero, then the filters in a sticky column\n// beside the results — folded into a disclosure above them on a phone — the count of what matches and the sort, and\n// the results (a CardGrid of LinkCards, a list). The filters live in the address: a link per choice, no client state.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** In the hero: a search field. */\n  search?: React.ReactNode;\n  /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */\n  filters: React.ReactNode;\n  /** On a phone, the words that open the filters (`Filters`). */\n  filtersLabel: string;\n  /** What matches, in words (`24 components`). */\n  count?: React.ReactNode;\n  /** On the right of the count: the sort, a view switch. */\n  toolbar?: React.ReactNode;\n  /** The results: a CardGrid, a list, an empty state. */\n  children: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */\nexport function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} backdrop=\"plain\">\n        {search}\n      </PageHero>\n      <Page className=\"kz-tpl-catalogue-frame\">\n        <div className=\"kz-tpl-catalogue\">\n          <details className=\"kz-tpl-catalogue-filters\" open>\n            <summary>{filtersLabel}</summary>\n            <div>{filters}</div>\n          </details>\n          <div className=\"min-w-0\">\n            {(count || toolbar) && (\n              <div className=\"kz-tpl-catalogue-head\">\n                {count && (\n                  <p className=\"kz-tpl-count\" aria-live=\"polite\">\n                    {count}\n                  </p>\n                )}\n                {toolbar}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAgCnB,cAKI,YALJ;AAHC,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,SAAS,QAAQ,UAAU,GAAG,MAAM,GAAuB;AAC3J,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,UAAS,SACxF,kBACH;AAAA,IACA,oBAAC,QAAK,WAAU,0BACd,+BAAC,SAAI,WAAU,oBACb;AAAA,2BAAC,aAAQ,WAAU,4BAA2B,MAAI,MAChD;AAAA,4BAAC,aAAS,wBAAa;AAAA,QACvB,oBAAC,SAAK,mBAAQ;AAAA,SAChB;AAAA,MACA,qBAAC,SAAI,WAAU,WACX;AAAA,kBAAS,YACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,mBACC,oBAAC,OAAE,WAAU,gBAAe,aAAU,UACnC,iBACH;AAAA,UAED;AAAA,WACH;AAAA,QAED;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}