@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/shell/top-bar-brand.d.ts

@@ -0,0 +1,81 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ay as KitLinkProps, ax as KitLinkComponent } from '../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 '../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';
+
+interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
+    /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */
+    logo: ReactNode;
+    /** The product name beside the logo, and the link's accessible name. */
+    name: ReactNode;
+    /** Where the brand links to. Default `/`. */
+    to?: string;
+    /** Hide the name below `sm` (default) or `md`; `false` always shows it. It is
+     *  visually hidden, not removed, so the link keeps its name on a phone. */
+    collapseBelow?: "sm" | "md" | false;
+    /** The app's router link for this one link. Default: the provider's
+     *  `linkComponent`, else react-router's `Link`. */
+    renderLink?: KitLinkComponent;
+}
+/**
+ * The top bar's home link: logo + product name, collapsing to the logo on a phone.
+ * Pass it as {@link TopBar}'s `brand`.
+ *
+ * kastlan's (top-bar.tsx:66) hid nothing and truncated the name instead — on a phone
+ * with five actions that left "Ka…" beside the logo — and needed an `aria-label`
+ * because the name could be cut. Here the name is `sr-only` below the breakpoint, so
+ * the logo is the whole visible link there and the name is still what it is called.
+ */
+declare function TopBarBrand({ logo, name, to, collapseBelow, renderLink, className, ...rest }: TopBarBrandProps): react.JSX.Element;
+
+export { TopBarBrand, type TopBarBrandProps };

package/dist/shell/top-bar-brand.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link as RouterLink } from "react-router";
+import { cn } from "../lib/cn.js";
+import { useKitLink } from "../i18n/kit-labels.js";
+import { pickLinkRenderer } from "../components/text-link.js";
+const routerLink = ({ href, ...p }) => /* @__PURE__ */ jsx(RouterLink, { to: href, ...p });
+const plainLink = ({ children, ...p }) => /* @__PURE__ */ jsx("a", { ...p, children });
+const COLLAPSE = {
+  sm: "sr-only sm:not-sr-only sm:truncate",
+  md: "sr-only md:not-sr-only md:truncate"
+};
+function TopBarBrand({
+  logo,
+  name,
+  to = "/",
+  collapseBelow = "sm",
+  renderLink,
+  className,
+  ...rest
+}) {
+  const kitLink = useKitLink();
+  return /* @__PURE__ */ jsxs(
+    RenderedLink,
+    {
+      render: pickLinkRenderer(renderLink, kitLink ?? routerLink, to) ?? plainLink,
+      ...rest,
+      href: to,
+      className: cn(
+        // `relative` contains the sr-only name.
+        "relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-[var(--text-primary)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center [&_svg]:h-6 [&_svg]:w-auto", children: logo }),
+        /* @__PURE__ */ jsx("span", { className: collapseBelow ? COLLAPSE[collapseBelow] : "truncate", children: name })
+      ]
+    }
+  );
+}
+function RenderedLink({ render, ...props }) {
+  return render(props);
+}
+export {
+  TopBarBrand
+};
+//# sourceMappingURL=top-bar-brand.js.map

package/dist/shell/top-bar-brand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/top-bar-brand.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link as RouterLink } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"../components/text-link\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\nconst routerLink: KitLinkComponent = ({ href, ...p }) => <RouterLink to={href} {...p} />;\nconst plainLink: KitLinkComponent = ({ children, ...p }) => <a {...p}>{children}</a>;\n\n/** Below which width only the logo shows. The name stays in the link's accessible\n *  name at every width. */\nconst COLLAPSE = {\n  sm: \"sr-only sm:not-sr-only sm:truncate\",\n  md: \"sr-only md:not-sr-only md:truncate\",\n} as const;\n\nexport interface TopBarBrandProps extends Omit<KitLinkProps, \"href\" | \"children\"> {\n  /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */\n  logo: ReactNode;\n  /** The product name beside the logo, and the link's accessible name. */\n  name: ReactNode;\n  /** Where the brand links to. Default `/`. */\n  to?: string;\n  /** Hide the name below `sm` (default) or `md`; `false` always shows it. It is\n   *  visually hidden, not removed, so the link keeps its name on a phone. */\n  collapseBelow?: \"sm\" | \"md\" | false;\n  /** The app's router link for this one link. Default: the provider's\n   *  `linkComponent`, else react-router's `Link`. */\n  renderLink?: KitLinkComponent;\n}\n\n/**\n * The top bar's home link: logo + product name, collapsing to the logo on a phone.\n * Pass it as {@link TopBar}'s `brand`.\n *\n * kastlan's (top-bar.tsx:66) hid nothing and truncated the name instead — on a phone\n * with five actions that left \"Ka…\" beside the logo — and needed an `aria-label`\n * because the name could be cut. Here the name is `sr-only` below the breakpoint, so\n * the logo is the whole visible link there and the name is still what it is called.\n */\nexport function TopBarBrand({\n  logo,\n  name,\n  to = \"/\",\n  collapseBelow = \"sm\",\n  renderLink,\n  className,\n  ...rest\n}: TopBarBrandProps) {\n  const kitLink = useKitLink();\n  return (\n    <RenderedLink\n      // The kit's one link rule (`pickLinkRenderer`): an external `to` or an in-page\n      // `#anchor` is a plain `<a>`, never the router's link.\n      render={pickLinkRenderer(renderLink, kitLink ?? routerLink, to) ?? plainLink}\n      {...rest}\n      href={to}\n      className={cn(\n        // `relative` contains the sr-only name.\n        \"relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-[var(--text-primary)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n        className,\n      )}\n    >\n      <span aria-hidden className=\"flex shrink-0 items-center [&_svg]:h-6 [&_svg]:w-auto\">\n        {logo}\n      </span>\n      <span className={collapseBelow ? COLLAPSE[collapseBelow] : \"truncate\"}>{name}</span>\n    </RenderedLink>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAOyD,cA6CrD,YA7CqD;AANzD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGjC,MAAM,aAA+B,CAAC,EAAE,MAAM,GAAG,EAAE,MAAM,oBAAC,cAAW,IAAI,MAAO,GAAG,GAAG;AACtF,MAAM,YAA8B,CAAC,EAAE,UAAU,GAAG,EAAE,MAAM,oBAAC,OAAG,GAAG,GAAI,UAAS;AAIhF,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AACN;AA0BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MAGC,QAAQ,iBAAiB,YAAY,WAAW,YAAY,EAAE,KAAK;AAAA,MAClE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,eAAW,MAAC,WAAU,yDACzB,gBACH;AAAA,QACA,oBAAC,UAAK,WAAW,gBAAgB,SAAS,aAAa,IAAI,YAAa,gBAAK;AAAA;AAAA;AAAA,EAC/E;AAEJ;AAGA,SAAS,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACvF,SAAO,OAAO,KAAK;AACrB;","names":[]}

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

@@ -1,11 +1,21 @@
 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
  * `link` navigates via react-router, and a `divider` draws a rule. Non-divider
  * rows close the menu automatically when chosen. `kind` may be omitted for
  * actions, keeping the common case terse.
+ *
+ * The rows are {@link MenuItem}s, so they take its options: `tone: "danger"` for the
+ * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the
+ * page already open, `disabled`.
  */
 type TopBarMenuEntry = {
     kind?: "action";
@@ -14,6 +24,12 @@ type TopBarMenuEntry = {
     label: ReactNode;
     trailing?: ReactNode;
     onSelect: () => void;
+    tone?: MenuItemTone;
+    /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with
+     *  `checkable: "checkbox"`) and says whether it is chosen. */
+    checked?: boolean;
+    checkable?: "radio" | "checkbox";
+    disabled?: boolean;
 } | {
     kind: "link";
     key: string;
@@ -21,10 +37,28 @@ type TopBarMenuEntry = {
     label: ReactNode;
     trailing?: ReactNode;
     to: string;
+    tone?: MenuItemTone;
+    /** The link to the page already open: `aria-current="page"` and a check mark. */
+    current?: boolean;
+    disabled?: boolean;
 } | {
     kind: "divider";
     key: string;
 };
+/**
+ * The non-interactive identity block at the top of an account menu — kastlan's name +
+ * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the
+ * arrow keys pass over it.
+ */
+interface TopBarMenuHeader {
+    /** The first line — the user's name. */
+    title: ReactNode;
+    /** The muted second line — an email, a role. */
+    subtitle?: ReactNode;
+    /** Anything below — a role chip. A link or button here stays out of the arrow keys
+     *  and in the Tab order, like the footer's. */
+    extra?: ReactNode;
+}
 /**
  * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,
  * with an optional uppercase heading and divider rules. Generic glue over the
@@ -32,13 +66,60 @@ type TopBarMenuEntry = {
  * so those call sites describe their rows as data instead of rebuilding the
  * trigger + list markup. For a checkmarked value-switcher use
  * {@link OptionSwitcherMenu} instead.
+ *
+ * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a
+ * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a
+ * free-content `footer` (the legal links).
  */
-declare function TopBarActionMenu({ icon, ariaLabel, heading, entries, panelClassName, }: {
-    icon: ReactNode;
+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`,
+     * the toggle, the keyboard. `open` is there for a chevron that turns.
+     *
+     * The button is named by `ariaLabel` followed by any readable text in the face — a
+     * `UserAvatar` `badge` label reaches a screen reader that way ("Account menu 3
+     * unread"), where an `aria-label` on the button would have hidden it. A
+     * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the
+     * name if `ariaLabel` carries it ("Marcel Eifert, account menu").
+     */
+    trigger?: (state: {
+        open: boolean;
+    }) => ReactNode;
+    /** Extra classes for the trigger button — `rounded-full` round an avatar. */
+    triggerClassName?: string;
+    /** Names the trigger and the menu. */
     ariaLabel: string;
     heading?: string;
+    /** A non-interactive identity block above the rows. */
+    header?: TopBarMenuHeader;
     entries: TopBarMenuEntry[];
+    /**
+     * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own
+     * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;
+     * `close` shuts the menu.
+     */
+    children?: (close: () => void) => ReactNode;
+    /**
+     * Free content below the rows, behind a rule — the legal links. Its links and
+     * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a
+     * function to get `close` for the links' `onClick`.
+     */
+    footer?: ReactNode | ((close: () => void) => ReactNode);
+    /** Wraps the footer in a `<nav>` with this name ("Legal"). Without it, a plain block. */
+    footerLabel?: string;
+    /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */
+    align?: "start" | "end" | "left" | "right";
     panelClassName?: string;
 }): react.JSX.Element;
 
-export { TopBarActionMenu, type TopBarMenuEntry };
+export { TopBarActionMenu, type TopBarMenuEntry, type TopBarMenuHeader };

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

@@ -1,46 +1,134 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
 import { Link } from "react-router";
 import { cn } from "../lib/cn.js";
 import { HoverMenu } from "../components/hover-menu.js";
-import { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from "./topbar-controls.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]";
+function MenuSection({ className, children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    for (const c of el.querySelectorAll(SECTION_CONTROLS)) {
+      c.setAttribute("role", c.tagName === "A" ? "link" : "button");
+    }
+    for (const l of el.querySelectorAll("ul:not([role]),ol:not([role])")) l.setAttribute("role", "list");
+    for (const l of el.querySelectorAll("li:not([role])")) l.setAttribute("role", "listitem");
+  });
+  return /* @__PURE__ */ jsx("li", { ref, role: "none", className, children });
+}
+function keepTabInsidePanel(e) {
+  if (e.key !== "Tab") return;
+  const from = e.target;
+  const stops = Array.from(e.currentTarget.querySelectorAll(TABBABLE)).filter(
+    (el) => el.getAttribute("tabindex") !== "-1"
+  );
+  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();
+}
 function TopBarActionMenu({
   icon,
+  iconBadge,
+  trigger,
+  triggerClassName,
   ariaLabel,
   heading,
+  header,
   entries,
+  children,
+  footer,
+  footerLabel,
+  align,
   panelClassName
 }) {
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
       ariaLabel,
-      trigger: ({ toggle }) => /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, "aria-label": ariaLabel, className: TOPBAR_TRIGGER_CLASS, children: icon }),
-      children: (close) => /* @__PURE__ */ jsxs("ul", { className: cn("py-1", panelClassName), children: [
-        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
-        entries.map((entry) => {
-          if (entry.kind === "divider") {
-            return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-[var(--border)]" }, entry.key);
-          }
-          const content = /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center gap-2", children: [
-            entry.icon,
-            entry.label,
-            entry.trailing && /* @__PURE__ */ jsx("span", { className: "ms-auto ps-2", children: entry.trailing })
-          ] });
-          return /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(Link, { to: entry.to, onClick: close, className: TOPBAR_MENU_ITEM_CLASS, children: content }) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                entry.onSelect();
-                close();
-              },
-              className: TOPBAR_MENU_ITEM_CLASS,
-              children: content
-            }
-          ) }, entry.key);
-        })
-      ] })
+      align,
+      trigger: ({ open, toggle }) => trigger ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: toggle, className: cn(TOPBAR_TRIGGER_CLASS, "relative", triggerClassName), children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
+        " ",
+        trigger({ open })
+      ] }) : 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",
+          onClick: toggle,
+          "aria-label": ariaLabel,
+          className: cn(TOPBAR_TRIGGER_CLASS, triggerClassName),
+          children: icon
+        }
+      ),
+      children: (close) => {
+        const footerBody = typeof footer === "function" ? footer(close) : footer;
+        const footerClass = "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)]";
+        return (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
+          /* @__PURE__ */ jsxs("ul", { className: cn("py-1", panelClassName), onKeyDown: keepTabInsidePanel, children: [
+            header && /* @__PURE__ */ jsxs(MenuSection, { className: "mb-1 border-b border-[var(--border)] px-3 py-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: header.title }),
+              header.subtitle != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: header.subtitle }),
+              header.extra != null && /* @__PURE__ */ jsx("div", { className: "mt-1", children: header.extra })
+            ] }),
+            heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
+            entries.map((entry) => {
+              if (entry.kind === "divider") {
+                return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-[var(--border)]" }, entry.key);
+              }
+              return /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  href: entry.to,
+                  renderLink: ({ href, ...p }) => /* @__PURE__ */ jsx(Link, { to: href, ...p }),
+                  onClick: close,
+                  leading: entry.icon,
+                  trailing: entry.trailing,
+                  tone: entry.tone,
+                  current: entry.current,
+                  disabled: entry.disabled,
+                  children: entry.label
+                }
+              ) : /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onClick: () => {
+                    entry.onSelect();
+                    close();
+                  },
+                  leading: entry.icon,
+                  trailing: entry.trailing,
+                  tone: entry.tone,
+                  checked: entry.checked,
+                  checkable: entry.checkable,
+                  disabled: entry.disabled,
+                  children: entry.label
+                }
+              ) }, entry.key);
+            }),
+            children?.(close),
+            footerBody != null && footerBody !== false && /* @__PURE__ */ jsx(MenuSection, { className: "mt-1 border-t border-[var(--border)] px-3 py-2", children: footerLabel ? /* @__PURE__ */ jsx("nav", { "aria-label": footerLabel, className: footerClass, children: footerBody }) : /* @__PURE__ */ jsx("div", { className: footerClass, children: footerBody }) })
+          ] })
+        );
+      }
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, 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 */\nexport type TopBarMenuEntry =\n  | { kind?: \"action\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; onSelect: () => void }\n  | { kind: \"link\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; to: string }\n  | { kind: \"divider\"; key: string };\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 */\nexport function TopBarActionMenu({\n  icon,\n  ariaLabel,\n  heading,\n  entries,\n  panelClassName,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  heading?: string;\n  entries: TopBarMenuEntry[];\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n          {icon}\n        </button>\n      )}\n    >\n      {(close) => (\n        <ul className={cn(\"py-1\", panelClassName)}>\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            const content = (\n              <span className=\"flex w-full items-center gap-2\">\n                {entry.icon}\n                {entry.label}\n                {entry.trailing && <span className=\"ms-auto ps-2\">{entry.trailing}</span>}\n              </span>\n            );\n            return (\n              <li key={entry.key}>\n                {entry.kind === \"link\" ? (\n                  <Link to={entry.to} onClick={close} className={TOPBAR_MENU_ITEM_CLASS}>\n                    {content}\n                  </Link>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      entry.onSelect();\n                      close();\n                    }}\n                    className={TOPBAR_MENU_ITEM_CLASS}\n                  >\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA0CQ,cAiBM,YAjBN;AAzCR,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAqBtD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GACrC;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,UAAU;AACtB,cAAI,MAAM,SAAS,WAAW;AAC5B,mBAAO,oBAAC,QAAmB,WAAU,0CAArB,MAAM,GAAsD;AAAA,UAC9E;AACA,gBAAM,UACJ,qBAAC,UAAK,WAAU,kCACb;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM,YAAY,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,UAAS;AAAA,aACpE;AAEF,iBACE,oBAAC,QACE,gBAAM,SAAS,SACd,oBAAC,QAAK,IAAI,MAAM,IAAI,SAAS,OAAO,WAAW,wBAC5C,mBACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,sBAAM,SAAS;AACf,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,KAfK,MAAM,GAiBf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","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":";AA4FI,cAuGM,YAvGN;AA5FJ,SAAS,iBAAiB,cAAc;AAExC,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAE1B,SAAS,4BAA4B;AA0DrC,MAAM,mBAAmB;AACzB,MAAM,WAAW;AAYjB,SAAS,YAAY,EAAE,WAAW,SAAS,GAA+C;AACxF,QAAM,MAAM,OAAsB,IAAI;AACtC,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,eAAW,KAAK,GAAG,iBAA8B,gBAAgB,GAAG;AAClE,QAAE,aAAa,QAAQ,EAAE,YAAY,MAAM,SAAS,QAAQ;AAAA,IAC9D;AACA,eAAW,KAAK,GAAG,iBAA8B,+BAA+B,EAAG,GAAE,aAAa,QAAQ,MAAM;AAChH,eAAW,KAAK,GAAG,iBAA8B,gBAAgB,EAAG,GAAE,aAAa,QAAQ,UAAU;AAAA,EACvG,CAAC;AACD,SACE,oBAAC,QAAG,KAAU,MAAK,QAAO,WACvB,UACH;AAEJ;AASA,SAAS,mBAAmB,GAAyC;AACnE,MAAI,EAAE,QAAQ,MAAO;AACrB,QAAM,OAAO,EAAE;AACf,QAAM,QAAQ,MAAM,KAAK,EAAE,cAAc,iBAA8B,QAAQ,CAAC,EAAE;AAAA,IAChF,CAAC,OAAO,GAAG,aAAa,UAAU,MAAM;AAAA,EAC1C;AACA,QAAM,MAAM,EAAE,WAAW,KAAK,8BAA8B,KAAK;AACjE,MAAI,MAAM,KAAK,CAAC,OAAO,OAAO,QAAQ,KAAK,wBAAwB,EAAE,IAAI,GAAG,EAAG,GAAE,gBAAgB;AACnG;AAcO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GA+CG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,CAAC,EAAE,MAAM,OAAO,MACvB,UACE,qBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,WAAW,GAAG,sBAAsB,YAAY,gBAAgB,GACrG;AAAA,4BAAC,UAAK,WAAU,WAAW,qBAAU;AAAA,QAGpC;AAAA,QACA,QAAQ,EAAE,KAAK,CAAC;AAAA,SACnB,IACE;AAAA;AAAA;AAAA,QAGF,qBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,WAAW,GAAG,sBAAsB,YAAY,gBAAgB,GACrG;AAAA,8BAAC,UAAK,WAAU,WAAW,qBAAU;AAAA,UAAQ;AAAA,UAC7C,qBAAC,UAAK,eAAW,MAAC,WAAU,wBACzB;AAAA;AAAA,YACD,oBAAC,aAAU,MAAI,MAAC,MAAM,UAAU,QAAQ,UAAU,WAAU,8BAA6B;AAAA,aAC3F;AAAA,UAAQ;AAAA,UACR,oBAAC,UAAK,WAAU,WAAW,oBAAU,OAAM;AAAA,WAC7C;AAAA,UAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAY;AAAA,UACZ,WAAW,GAAG,sBAAsB,gBAAgB;AAAA,UAEnD;AAAA;AAAA,MACH;AAAA,MAIH,WAAC,UAAU;AACV,cAAM,aAAa,OAAO,WAAW,aAAa,OAAO,KAAK,IAAI;AAClE,cAAM,cACJ;AACF;AAAA;AAAA,UAEE,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GAAG,WAAW,oBACnD;AAAA,sBACC,qBAAC,eAAY,WAAU,kDACrB;AAAA,kCAAC,SAAI,WAAU,2DAA2D,iBAAO,OAAM;AAAA,cACtF,OAAO,YAAY,QAClB,oBAAC,SAAI,WAAU,6CAA6C,iBAAO,UAAS;AAAA,cAE7E,OAAO,SAAS,QAAQ,oBAAC,SAAI,WAAU,QAAQ,iBAAO,OAAM;AAAA,eAC/D;AAAA,YAED,WACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,YAED,QAAQ,IAAI,CAAC,UAAU;AACtB,kBAAI,MAAM,SAAS,WAAW;AAC5B,uBAAO,oBAAC,QAAmB,WAAU,0CAArB,MAAM,GAAsD;AAAA,cAC9E;AACA,qBACE,oBAAC,QACE,gBAAM,SAAS,SACd;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,MAAM;AAAA,kBACZ,YAAY,CAAC,EAAE,MAAM,GAAG,EAAE,MAAM,oBAAC,QAAK,IAAI,MAAO,GAAG,GAAG;AAAA,kBACvD,SAAS;AAAA,kBACT,SAAS,MAAM;AAAA,kBACf,UAAU,MAAM;AAAA,kBAChB,MAAM,MAAM;AAAA,kBACZ,SAAS,MAAM;AAAA,kBACf,UAAU,MAAM;AAAA,kBAEf,gBAAM;AAAA;AAAA,cACT,IAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM;AACb,0BAAM,SAAS;AACf,0BAAM;AAAA,kBACR;AAAA,kBACA,SAAS,MAAM;AAAA,kBACf,UAAU,MAAM;AAAA,kBAChB,MAAM,MAAM;AAAA,kBACZ,SAAS,MAAM;AAAA,kBACf,WAAW,MAAM;AAAA,kBACjB,UAAU,MAAM;AAAA,kBAEf,gBAAM;AAAA;AAAA,cACT,KA5BK,MAAM,GA8Bf;AAAA,YAEJ,CAAC;AAAA,YACA,WAAW,KAAK;AAAA,YAChB,cAAc,QAAQ,eAAe,SACpC,oBAAC,eAAY,WAAU,kDACpB,wBACC,oBAAC,SAAI,cAAY,aAAa,WAAW,aACtC,sBACH,IAEA,oBAAC,SAAI,WAAW,aAAc,sBAAW,GAE7C;AAAA,aAEJ;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","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 } from './shell/topbar-action-menu.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,3 +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,9 +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