@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/shell/topbar-action-menu.d.ts

@@ -1,7 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { MenuItemTone } from '../components/menu-item.js';
+import { UserAvatarBadge } from '../components/user-avatar.js';
 import 'lucide-react';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/chip.js';
 
 /**
  * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
@@ -67,9 +71,16 @@ interface TopBarMenuHeader {
  * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a
  * free-content `footer` (the legal links).
  */
-declare function TopBarActionMenu({ icon, trigger, triggerClassName, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
+declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
     /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
     icon?: ReactNode;
+    /**
+     * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the
+     * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name
+     * ("Send feedback 2 unread"), so the dot is not something only the eye is told about.
+     * Ignored with `trigger`: give the face its own badge there.
+     */
+    iconBadge?: UserAvatarBadge | null;
     /**
      * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn
      * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,

package/dist/shell/topbar-action-menu.js

@@ -5,6 +5,7 @@ import { Link } from "react-router";
 import { cn } from "../lib/cn.js";
 import { HoverMenu } from "../components/hover-menu.js";
 import { MenuItem } from "../components/menu-item.js";
+import { StatusDot } from "../components/status-dot.js";
 import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls.js";
 const SECTION_CONTROLS = "a[href]:not([role]),button:not([role])";
 const TABBABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]";
@@ -32,6 +33,7 @@ function keepTabInsidePanel(e) {
 }
 function TopBarActionMenu({
   icon,
+  iconBadge,
   trigger,
   triggerClassName,
   ariaLabel,
@@ -53,7 +55,20 @@ function TopBarActionMenu({
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
         " ",
         trigger({ open })
-      ] }) : /* @__PURE__ */ jsx(
+      ] }) : iconBadge ? (
+        // Named by its content, like the custom-trigger branch, so the badge label is
+        // part of the name; an `aria-label` would have hidden it.
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: toggle, className: cn(TOPBAR_TRIGGER_CLASS, "relative", triggerClassName), children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
+          " ",
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative inline-flex", children: [
+            icon,
+            /* @__PURE__ */ jsx(StatusDot, { ring: true, tone: iconBadge.tone ?? "danger", className: "absolute -end-0.5 -top-0.5" })
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: iconBadge.label })
+        ] })
+      ) : /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",

package/dist/shell/topbar-action-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string };\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /** Anything below — a role chip. A link or button here stays out of the arrow keys\n   *  and in the Tab order, like the footer's. */\n  extra?: ReactNode;\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n */\nexport function TopBarActionMenu({\n  icon,\n  trigger,\n  triggerClassName,\n  ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `ariaLabel` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `ariaLabel` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /** Names the trigger and the menu. */\n  ariaLabel: string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle }) =>\n        trigger ? (\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>\n            {/* The space keeps the name from running into the face's text (\"Account\n                menu3 unread\"); as a flex item it takes no room. */}\n            {\" \"}\n            {trigger({ open })}\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={cn(TOPBAR_TRIGGER_CLASS, triggerClassName)}\n          >\n            {icon}\n          </button>\n        )\n      }\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]\";\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-[var(--border)] px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-[var(--text-muted)]\">{header.subtitle}</div>\n                )}\n                {header.extra != null && <div className=\"mt-1\">{header.extra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n                {heading}\n              </li>\n            )}\n            {entries.map((entry) => {\n              if (entry.kind === \"divider\") {\n                return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n              }\n              return (\n                <li key={entry.key}>\n                  {entry.kind === \"link\" ? (\n                    <MenuItem\n                      href={entry.to}\n                      renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                      onClick={close}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      current={entry.current}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  ) : (\n                    <MenuItem\n                      onClick={() => {\n                        entry.onSelect();\n                        close();\n                      }}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      checked={entry.checked}\n                      checkable={entry.checkable}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  )}\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-[var(--border)] px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { StatusDot } from \"../components/status-dot\";\nimport type { UserAvatarBadge } from \"../components/user-avatar\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string };\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /** Anything below — a role chip. A link or button here stays out of the arrow keys\n   *  and in the Tab order, like the footer's. */\n  extra?: ReactNode;\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n */\nexport function TopBarActionMenu({\n  icon,\n  iconBadge,\n  trigger,\n  triggerClassName,\n  ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the\n   * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name\n   * (\"Send feedback 2 unread\"), so the dot is not something only the eye is told about.\n   * Ignored with `trigger`: give the face its own badge there.\n   */\n  iconBadge?: UserAvatarBadge | null;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `ariaLabel` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `ariaLabel` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /** Names the trigger and the menu. */\n  ariaLabel: string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle }) =>\n        trigger ? (\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>\n            {/* The space keeps the name from running into the face's text (\"Account\n                menu3 unread\"); as a flex item it takes no room. */}\n            {\" \"}\n            {trigger({ open })}\n          </button>\n        ) : iconBadge ? (\n          // Named by its content, like the custom-trigger branch, so the badge label is\n          // part of the name; an `aria-label` would have hidden it.\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>{\" \"}\n            <span aria-hidden className=\"relative inline-flex\">\n              {icon}\n              <StatusDot ring tone={iconBadge.tone ?? \"danger\"} className=\"absolute -end-0.5 -top-0.5\" />\n            </span>{\" \"}\n            <span className=\"sr-only\">{iconBadge.label}</span>\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={cn(TOPBAR_TRIGGER_CLASS, triggerClassName)}\n          >\n            {icon}\n          </button>\n        )\n      }\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]\";\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-[var(--border)] px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-[var(--text-muted)]\">{header.subtitle}</div>\n                )}\n                {header.extra != null && <div className=\"mt-1\">{header.extra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n                {heading}\n              </li>\n            )}\n            {entries.map((entry) => {\n              if (entry.kind === \"divider\") {\n                return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n              }\n              return (\n                <li key={entry.key}>\n                  {entry.kind === \"link\" ? (\n                    <MenuItem\n                      href={entry.to}\n                      renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                      onClick={close}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      current={entry.current}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  ) : (\n                    <MenuItem\n                      onClick={() => {\n                        entry.onSelect();\n                        close();\n                      }}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      checked={entry.checked}\n                      checkable={entry.checkable}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  )}\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-[var(--border)] px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell.d.ts

@@ -1,9 +1,11 @@
 export { LanguageMenu, LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle } from './shell/topbar-controls.js';
 export { TopBar, TopBarProps } from './shell/top-bar.js';
-export { AppShell, AppShellNavItem, AppShellProps, AppShellSubItem } from './shell/app-shell.js';
+export { AppShell, AppShellNavItem, AppShellProps, AppShellSidebarFooterItem, AppShellSubItem } from './shell/app-shell.js';
 export { OptionSwitcherMenu, OptionSwitcherOption } from './shell/option-switcher-menu.js';
 export { RoleSwitcher, RoleSwitcherProps } from './shell/role-switcher.js';
 export { TopBarActionMenu, TopBarMenuEntry, TopBarMenuHeader } from './shell/topbar-action-menu.js';
+export { TopBarBrand, TopBarBrandProps } from './shell/top-bar-brand.js';
+export { AuthLayout, AuthLayoutProps } from './shell/auth-layout.js';
 import 'react';
 import './theme/palette-presets.js';
 import './theme/chart-palette.js';
@@ -11,4 +13,57 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
+import './kit-labels-v3biUF1L.js';
+import './components/data-table-labels.js';
+import './components/mini-calendar.js';
+import './components/calendar-heatmap.js';
+import './components/popover.js';
+import './components/chip.js';
+import './components/field-sync.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
+import './wizard/types.js';
+import './tour/tour.js';
+import './search/command-palette.js';
+import './search/global-search.js';
+import './search/search-index.js';
+import './components/month-picker.js';
+import './components/page-contents.js';
+import './components/series-chart-labels.js';
+import './components/pie-chart-labels.js';
+import './components/sparkline.js';
+import './components/stat-tile.js';
+import './components/signature-pad.js';
+import './components/password-strength.js';
+import './components/danger-confirm.js';
+import './components/swatch-picker.js';
+import './components/tile-radio.js';
+import './components/icon-picker.js';
+import './components/dialog-frame.js';
+import './components/modal.js';
+import './hooks/use-search-param-state.js';
+import './components/measured-grid.js';
+import './feedback/feedback-attachment.js';
+import './feedback/feedback-dialog.js';
+import './feedback/feedback-thread.js';
+import './feedback/feedback-inbox.js';
+import './components/account-settings-labels.js';
+import './components/confirm-dialog.js';
+import './components/floating-panel.js';
+import './components/bulk-action-bar.js';
+import './components/list.js';
+import './components/breadcrumbs.js';
+import './components/toast.js';
+import './components/description-list.js';
+import './components/line-items.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/error-boundary.js';
+import './components/authed-image.js';
+import './hooks/use-authed-src.js';
+import './components/image-grid.js';
+import './components/lightbox.js';
 import './components/menu-item.js';
+import './components/user-avatar.js';
+import './components/status-dot.js';

package/dist/shell.js

@@ -5,4 +5,6 @@ export * from "./shell/app-shell.js";
 export * from "./shell/option-switcher-menu.js";
 export * from "./shell/role-switcher.js";
 export * from "./shell/topbar-action-menu.js";
+export * from "./shell/top-bar-brand.js";
+export * from "./shell/auth-layout.js";
 //# sourceMappingURL=shell.js.map

package/dist/shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/wizard/stepper-nav.d.ts

@@ -1,10 +1,57 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { ButtonVariant } from '../components/ui.js';
+import { f as ButtonVariant } from '../kit-labels-v3biUF1L.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
+import '../components/data-table-labels.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-sync.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/danger-confirm.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import '../components/account-settings-labels.js';
+import '../components/confirm-dialog.js';
+import '../components/floating-panel.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../hooks/use-authed-src.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the

package/dist/wizard/wizard-context.d.ts

@@ -21,5 +21,28 @@ declare function useWizardContext(): WizardContextValue;
  * `@eifi1/ui-kit/rhf`, whose returned `validate` a custom nav can call itself.
  */
 declare function useOptionalWizardContext(): WizardContextValue | null;
+/**
+ * Registers a plain validator for the mounted step — the counterpart to
+ * `useRhfWizardStep` (in `@eifi1/ui-kit/rhf`) for a step that gates on its own state
+ * (a hand-managed list of lines, a sum that has to balance) rather than a form.
+ *
+ * ```tsx
+ * useWizardStepValidate(() => ({ ok: lines.length >= 2, errors: { lines: t("…") } }));
+ * ```
+ *
+ * Next (and Finish) run it with the step's other validators; a `false` or a result
+ * with `ok: false` keeps the wizard where it is. `validate` is read through a ref, so
+ * an inline closure over the latest state registers exactly once. Throws outside a
+ * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is
+ * a bug to hear about.
+ */
+declare function useWizardStepValidate(validate: () => ValidateResult | Promise<ValidateResult>): void;
+/**
+ * Disables the wizard's Next and Skip while `blocked` holds (tenant shares that do not
+ * add up to 100 %). Unlike {@link useWizardStepValidate}, which answers a click, this
+ * greys the button out before one. The gate is lifted again when the step unmounts, so
+ * the next step starts unblocked.
+ */
+declare function useWizardNextGate(blocked: boolean): void;
 
-export { WizardContextProvider, type WizardContextValue, useOptionalWizardContext, useWizardContext };
+export { WizardContextProvider, type WizardContextValue, useOptionalWizardContext, useWizardContext, useWizardNextGate, useWizardStepValidate };

package/dist/wizard/wizard-context.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 const WizardContext = createContext(null);
 const WizardContextProvider = WizardContext.Provider;
 function useWizardContext() {
@@ -12,9 +12,26 @@ function useWizardContext() {
 function useOptionalWizardContext() {
   return useContext(WizardContext);
 }
+function useWizardStepValidate(validate) {
+  const { registerStepValidate } = useWizardContext();
+  const ref = useRef(validate);
+  useEffect(() => {
+    ref.current = validate;
+  });
+  useEffect(() => registerStepValidate(() => ref.current()), [registerStepValidate]);
+}
+function useWizardNextGate(blocked) {
+  const { setNextBlocked } = useWizardContext();
+  useEffect(() => {
+    setNextBlocked(blocked);
+    return () => setNextBlocked(false);
+  }, [blocked, setNextBlocked]);
+}
 export {
   WizardContextProvider,
   useOptionalWizardContext,
-  useWizardContext
+  useWizardContext,
+  useWizardNextGate,
+  useWizardStepValidate
 };
 //# sourceMappingURL=wizard-context.js.map

package/dist/wizard/wizard-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidateResult } from \"./types\";\n\nexport interface WizardContextValue {\n  /**\n   * Register a validator for the currently-mounted step. Returns an unregister\n   * fn (call it in a useEffect cleanup). `goNext` runs every registered\n   * validator for the active step (plus the step config's own `validate`),\n   * AND-combining the results — this replaces the per-page `useRef` +\n   * `validate: () => ref.current?.()` bridge each RHF step used to wire.\n   */\n  registerStepValidate: (\n    fn: () => ValidateResult | Promise<ValidateResult>,\n  ) => () => void;\n  /** Lets the mounted step disable Next/Skip (e.g. invalid tenant shares). */\n  setNextBlocked: (blocked: boolean) => void;\n}\n\nconst WizardContext = createContext<WizardContextValue | null>(null);\n\nexport const WizardContextProvider = WizardContext.Provider;\n\nexport function useWizardContext(): WizardContextValue {\n  const ctx = useContext(WizardContext);\n  if (!ctx) {\n    throw new Error(\"useWizardContext must be used within a <StepperNav>\");\n  }\n  return ctx;\n}\n\n/**\n * The wizard context, or `null` outside a `<StepperNav>`. For a hook that registers\n * with the wizard when there is one and works without it — `useRhfWizardStep` in\n * `@eifi1/ui-kit/rhf`, whose returned `validate` a custom nav can call itself.\n */\nexport function useOptionalWizardContext(): WizardContextValue | null {\n  return useContext(WizardContext);\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAAkB;AAkB1C,MAAM,gBAAgB,cAAyC,IAAI;AAE5D,MAAM,wBAAwB,cAAc;AAE5C,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;AAOO,SAAS,2BAAsD;AACpE,SAAO,WAAW,aAAa;AACjC;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-context.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useRef } from \"react\";\nimport type { ValidateResult } from \"./types\";\n\nexport interface WizardContextValue {\n  /**\n   * Register a validator for the currently-mounted step. Returns an unregister\n   * fn (call it in a useEffect cleanup). `goNext` runs every registered\n   * validator for the active step (plus the step config's own `validate`),\n   * AND-combining the results — this replaces the per-page `useRef` +\n   * `validate: () => ref.current?.()` bridge each RHF step used to wire.\n   */\n  registerStepValidate: (\n    fn: () => ValidateResult | Promise<ValidateResult>,\n  ) => () => void;\n  /** Lets the mounted step disable Next/Skip (e.g. invalid tenant shares). */\n  setNextBlocked: (blocked: boolean) => void;\n}\n\nconst WizardContext = createContext<WizardContextValue | null>(null);\n\nexport const WizardContextProvider = WizardContext.Provider;\n\nexport function useWizardContext(): WizardContextValue {\n  const ctx = useContext(WizardContext);\n  if (!ctx) {\n    throw new Error(\"useWizardContext must be used within a <StepperNav>\");\n  }\n  return ctx;\n}\n\n/**\n * The wizard context, or `null` outside a `<StepperNav>`. For a hook that registers\n * with the wizard when there is one and works without it — `useRhfWizardStep` in\n * `@eifi1/ui-kit/rhf`, whose returned `validate` a custom nav can call itself.\n */\nexport function useOptionalWizardContext(): WizardContextValue | null {\n  return useContext(WizardContext);\n}\n\n/**\n * Registers a plain validator for the mounted step — the counterpart to\n * `useRhfWizardStep` (in `@eifi1/ui-kit/rhf`) for a step that gates on its own state\n * (a hand-managed list of lines, a sum that has to balance) rather than a form.\n *\n * ```tsx\n * useWizardStepValidate(() => ({ ok: lines.length >= 2, errors: { lines: t(\"…\") } }));\n * ```\n *\n * Next (and Finish) run it with the step's other validators; a `false` or a result\n * with `ok: false` keeps the wizard where it is. `validate` is read through a ref, so\n * an inline closure over the latest state registers exactly once. Throws outside a\n * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is\n * a bug to hear about.\n */\nexport function useWizardStepValidate(\n  validate: () => ValidateResult | Promise<ValidateResult>,\n): void {\n  const { registerStepValidate } = useWizardContext();\n  const ref = useRef(validate);\n  useEffect(() => {\n    ref.current = validate;\n  });\n  useEffect(() => registerStepValidate(() => ref.current()), [registerStepValidate]);\n}\n\n/**\n * Disables the wizard's Next and Skip while `blocked` holds (tenant shares that do not\n * add up to 100 %). Unlike {@link useWizardStepValidate}, which answers a click, this\n * greys the button out before one. The gate is lifted again when the step unmounts, so\n * the next step starts unblocked.\n */\nexport function useWizardNextGate(blocked: boolean): void {\n  const { setNextBlocked } = useWizardContext();\n  useEffect(() => {\n    setNextBlocked(blocked);\n    return () => setNextBlocked(false);\n  }, [blocked, setNextBlocked]);\n}\n"],"mappings":";AAAA,SAAS,eAAe,YAAY,WAAW,cAAc;AAkB7D,MAAM,gBAAgB,cAAyC,IAAI;AAE5D,MAAM,wBAAwB,cAAc;AAE5C,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;AAOO,SAAS,2BAAsD;AACpE,SAAO,WAAW,aAAa;AACjC;AAiBO,SAAS,sBACd,UACM;AACN,QAAM,EAAE,qBAAqB,IAAI,iBAAiB;AAClD,QAAM,MAAM,OAAO,QAAQ;AAC3B,YAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAChB,CAAC;AACD,YAAU,MAAM,qBAAqB,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,oBAAoB,CAAC;AACnF;AAQO,SAAS,kBAAkB,SAAwB;AACxD,QAAM,EAAE,eAAe,IAAI,iBAAiB;AAC5C,YAAU,MAAM;AACd,mBAAe,OAAO;AACtB,WAAO,MAAM,eAAe,KAAK;AAAA,EACnC,GAAG,CAAC,SAAS,cAAc,CAAC;AAC9B;","names":[]}

package/dist/wizard/wizard-step.d.ts

@@ -1,11 +1,26 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/** The vertical rhythm one wizard step's content sits on. A component rather
- *  than a class string so every step in every app spaces its fields the same. */
-declare function WizardStep({ children, className, }: {
+interface WizardStepProps {
     children: ReactNode;
     className?: string;
-}): react.JSX.Element;
+    /**
+     * The step's heading ("Choose a unit"), drawn in the one style every step shares.
+     * kastlan's steps each hand-wrote `<h3 className="text-lg font-semibold">` (about
+     * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written
+     * heading is one that drifts — a size here, a colour there. Omitted: no heading.
+     */
+    title?: ReactNode;
+    /** The line under the title: what the step asks for, or why. Rendered only with a
+     *  `title` or on its own when there is none. */
+    description?: ReactNode;
+    /** The heading's level. Default 3: the page has its `h1` and the wizard's own
+     *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */
+    headingLevel?: 2 | 3 | 4;
+}
+/** The vertical rhythm one wizard step's content sits on. A component rather
+ *  than a class string so every step in every app spaces its fields the same —
+ *  and, with `title` / `description`, heads them the same. */
+declare function WizardStep({ children, className, title, description, headingLevel, }: WizardStepProps): react.JSX.Element;
 
-export { WizardStep };
+export { WizardStep, type WizardStepProps };

package/dist/wizard/wizard-step.js

@@ -1,11 +1,24 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+const HEADING = { 2: "h2", 3: "h3", 4: "h4" };
 function WizardStep({
   children,
-  className
+  className,
+  title,
+  description,
+  headingLevel = 3
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
+  const hasTitle = title !== void 0 && title !== null && title !== false && title !== "";
+  const hasDescription = description !== void 0 && description !== null && description !== false && description !== "";
+  const Heading = HEADING[headingLevel];
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    (hasTitle || hasDescription) && /* @__PURE__ */ jsxs("div", { "data-slot": "wizard-step-header", className: "space-y-1", children: [
+      hasTitle && /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-[var(--text-primary)]", children: title }),
+      hasDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: description })
+    ] }),
+    children
+  ] });
 }
 export {
   WizardStep

package/dist/wizard/wizard-step.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same. */\nexport function WizardStep({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return <div className={cn(\"space-y-6\", className)}>{children}</div>;\n}\n"],"mappings":";AAYS;AAXT,SAAS,UAAU;AAIZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface WizardStepProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * The step's heading (\"Choose a unit\"), drawn in the one style every step shares.\n   * kastlan's steps each hand-wrote `<h3 className=\"text-lg font-semibold\">` (about\n   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written\n   * heading is one that drifts — a size here, a colour there. Omitted: no heading.\n   */\n  title?: ReactNode;\n  /** The line under the title: what the step asks for, or why. Rendered only with a\n   *  `title` or on its own when there is none. */\n  description?: ReactNode;\n  /** The heading's level. Default 3: the page has its `h1` and the wizard's own\n   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */\n  headingLevel?: 2 | 3 | 4;\n}\n\nconst HEADING = { 2: \"h2\", 3: \"h3\", 4: \"h4\" } as const;\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same —\n *  and, with `title` / `description`, heads them the same. */\nexport function WizardStep({\n  children,\n  className,\n  title,\n  description,\n  headingLevel = 3,\n}: WizardStepProps) {\n  const hasTitle = title !== undefined && title !== null && title !== false && title !== \"\";\n  const hasDescription =\n    description !== undefined && description !== null && description !== false && description !== \"\";\n  const Heading = HEADING[headingLevel];\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {(hasTitle || hasDescription) && (\n        <div data-slot=\"wizard-step-header\" className=\"space-y-1\">\n          {hasTitle && (\n            <Heading className=\"text-lg font-semibold text-[var(--text-primary)]\">{title}</Heading>\n          )}\n          {hasDescription && <p className=\"text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAwCQ,SAEI,KAFJ;AAvCR,SAAS,UAAU;AAoBnB,MAAM,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AAKrC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAoB;AAClB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AACvF,QAAM,iBACJ,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB,SAAS,gBAAgB;AAChG,QAAM,UAAU,QAAQ,YAAY;AACpC,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACrC;AAAA,iBAAY,mBACZ,qBAAC,SAAI,aAAU,sBAAqB,WAAU,aAC3C;AAAA,kBACC,oBAAC,WAAQ,WAAU,oDAAoD,iBAAM;AAAA,MAE9E,kBAAkB,oBAAC,OAAE,WAAU,oCAAoC,uBAAY;AAAA,OAClF;AAAA,IAED;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard.d.ts

@@ -1,12 +1,59 @@
 export { DEFAULT_WIZARD_LABELS, FieldErrors, StepStatus, SummaryItem, SummarySection, UseWizardOptions, UseWizardReturn, ValidateResult, WizardLabels, WizardStepConfig, WizardUrlSync, resolveWizardLabels } from './wizard/types.js';
 export { useWizard } from './wizard/use-wizard.js';
-export { WizardContextProvider, WizardContextValue, useOptionalWizardContext, useWizardContext } from './wizard/wizard-context.js';
+export { WizardContextProvider, WizardContextValue, useOptionalWizardContext, useWizardContext, useWizardNextGate, useWizardStepValidate } from './wizard/wizard-context.js';
 export { RequiredFieldSpec, requiredFieldsValidator } from './wizard/validation.js';
-export { WizardStep } from './wizard/wizard-step.js';
+export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './components/ui.js';
+import './kit-labels-v3biUF1L.js';
+import './components/data-table-labels.js';
+import './components/mini-calendar.js';
+import './components/calendar-heatmap.js';
+import './components/popover.js';
+import './components/chip.js';
+import 'lucide-react';
+import './components/field-sync.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
+import './tour/tour.js';
+import './search/command-palette.js';
+import './search/global-search.js';
+import './search/search-index.js';
+import './components/month-picker.js';
+import './components/page-contents.js';
+import './components/series-chart-labels.js';
+import './components/pie-chart-labels.js';
+import './components/sparkline.js';
+import './components/stat-tile.js';
+import './components/signature-pad.js';
+import './components/password-strength.js';
+import './components/danger-confirm.js';
+import './components/swatch-picker.js';
+import './components/tile-radio.js';
+import './components/icon-picker.js';
+import './components/dialog-frame.js';
+import './components/modal.js';
+import './hooks/use-search-param-state.js';
+import './components/measured-grid.js';
+import './feedback/feedback-attachment.js';
+import './feedback/feedback-dialog.js';
+import './feedback/feedback-thread.js';
+import './feedback/feedback-inbox.js';
+import './components/account-settings-labels.js';
+import './components/confirm-dialog.js';
+import './components/floating-panel.js';
+import './components/bulk-action-bar.js';
+import './components/list.js';
+import './components/breadcrumbs.js';
+import './components/toast.js';
+import './components/description-list.js';
+import './components/line-items.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/error-boundary.js';
+import './components/authed-image.js';
+import './hooks/use-authed-src.js';
+import './components/image-grid.js';
+import './components/lightbox.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/chart.ts

@@ -20,3 +20,7 @@ export * from "./components/chart-zoom";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";
+
+// The part-to-whole chart (donut / pie) — moved here from kastlan's dashboard and reports.
+export * from "./components/pie-chart";
+export * from "./components/pie-chart-labels";