@eifi1/ui-kit 0.41.0 → 0.42.0

package/dist/shell/account-menu-language.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+/** One offered language in the account menu's sub-list. */
+export interface AccountMenuLanguageOption {
+    code: string;
+    /** Its name, in its own language ("Deutsch", "Français"). */
+    label: ReactNode;
+    /**
+     * A flag before the name, as the app draws it — keksdose's flag-icons span
+     * (`<span aria-hidden className="fi fi-ch …" />`). A node rather than a country code, so
+     * the kit ships no flag set; decorative, so give it `aria-hidden`.
+     */
+    flag?: ReactNode;
+    /**
+     * Or the ISO 3166-1 alpha-2 country (lowercase) whose flag-icons flag to draw, as
+     * `LanguageMenu`'s `LanguageOption` takes it — so one language list feeds both
+     * (Kurvenschmiede's `LANGUAGES`). Needs the app's flag-icons CSS, as `LanguageMenu`
+     * does. `flag` wins when both are given.
+     */
+    country?: string;
+}
+export interface AccountMenuLanguageProps {
+    languages: readonly AccountMenuLanguageOption[];
+    /** The active language's code. */
+    value: string | undefined;
+    /** A pick: the app sets the device's language and, signed in, the account's
+     *  (settings §6.2). */
+    onPick: (code: string) => void;
+    /** The account menu's `close` (from `TopBarActionMenu`'s `children`): a pick shuts it. */
+    close?: () => void;
+    /** The row's name. Default: `topBar.language` ("Language"). */
+    label?: string;
+    /** Open the sub-list at first. Default `false`. */
+    defaultOpen?: boolean;
+}
+/**
+ * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),
+ * keksdose's sub-list: a `Disclosure variant="menu"` row — the globe, "Language", the
+ * active language's flag and the chevron — that opens in place onto one checked
+ * `MenuItem` per language. Inline rather than a nested popover: a popover inside a
+ * popover fights the outside click and has nowhere to go on a phone (keksdose #140).
+ *
+ * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` first after the
+ * app's context rows (§6.5). Signed out there is no account menu; `LanguageMenu` stays
+ * the bar's button (§2.3).
+ */
+export declare function AccountMenuLanguage({ languages, value, onPick, close, label, defaultOpen, }: AccountMenuLanguageProps): import("react").JSX.Element;

package/dist/shell/account-menu-language.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Globe } from "lucide-react";
+import { Disclosure } from "../components/disclosure.js";
+import { MenuItem } from "../components/menu-item.js";
+import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+function flagOf(lang) {
+  if (lang.flag !== void 0) return lang.flag;
+  if (!lang.country) return void 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-country": lang.country,
+      className: `fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`
+    }
+  );
+}
+function AccountMenuLanguage({
+  languages,
+  value,
+  onPick,
+  close,
+  label,
+  defaultOpen = false
+}) {
+  const words = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS);
+  const [open, setOpen] = useState(defaultOpen);
+  const active = languages.find((l) => l.code === value);
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      variant: "menu",
+      open,
+      onOpenChange: setOpen,
+      title: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-4" }),
+          label ?? words.language
+        ] }),
+        active && flagOf(active)
+      ] }),
+      children: /* @__PURE__ */ jsx("ul", { children: languages.map((lang) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          checked: lang.code === value,
+          onClick: () => {
+            onPick(lang.code);
+            setOpen(false);
+            close?.();
+          },
+          leading: flagOf(lang),
+          className: "ps-9",
+          children: lang.label
+        }
+      ) }, lang.code)) })
+    }
+  ) });
+}
+export {
+  AccountMenuLanguage
+};
+//# sourceMappingURL=account-menu-language.js.map

package/dist/shell/account-menu-language.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/account-menu-language.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Globe } from \"lucide-react\";\nimport { Disclosure } from \"../components/disclosure\";\nimport { MenuItem } from \"../components/menu-item\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** One offered language in the account menu's sub-list. */\nexport interface AccountMenuLanguageOption {\n  code: string;\n  /** Its name, in its own language (\"Deutsch\", \"Français\"). */\n  label: ReactNode;\n  /**\n   * A flag before the name, as the app draws it — keksdose's flag-icons span\n   * (`<span aria-hidden className=\"fi fi-ch …\" />`). A node rather than a country code, so\n   * the kit ships no flag set; decorative, so give it `aria-hidden`.\n   */\n  flag?: ReactNode;\n  /**\n   * Or the ISO 3166-1 alpha-2 country (lowercase) whose flag-icons flag to draw, as\n   * `LanguageMenu`'s `LanguageOption` takes it — so one language list feeds both\n   * (Kurvenschmiede's `LANGUAGES`). Needs the app's flag-icons CSS, as `LanguageMenu`\n   * does. `flag` wins when both are given.\n   */\n  country?: string;\n}\n\n/** The option's flag: its own node, else the flag-icons flag of its country. */\nfunction flagOf(lang: AccountMenuLanguageOption): ReactNode {\n  if (lang.flag !== undefined) return lang.flag;\n  if (!lang.country) return undefined;\n  return (\n    <span\n      aria-hidden\n      data-country={lang.country}\n      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n    />\n  );\n}\n\nexport interface AccountMenuLanguageProps {\n  languages: readonly AccountMenuLanguageOption[];\n  /** The active language's code. */\n  value: string | undefined;\n  /** A pick: the app sets the device's language and, signed in, the account's\n   *  (settings §6.2). */\n  onPick: (code: string) => void;\n  /** The account menu's `close` (from `TopBarActionMenu`'s `children`): a pick shuts it. */\n  close?: () => void;\n  /** The row's name. Default: `topBar.language` (\"Language\"). */\n  label?: string;\n  /** Open the sub-list at first. Default `false`. */\n  defaultOpen?: boolean;\n}\n\n/**\n * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),\n * keksdose's sub-list: a `Disclosure variant=\"menu\"` row — the globe, \"Language\", the\n * active language's flag and the chevron — that opens in place onto one checked\n * `MenuItem` per language. Inline rather than a nested popover: a popover inside a\n * popover fights the outside click and has nowhere to go on a phone (keksdose #140).\n *\n * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` first after the\n * app's context rows (§6.5). Signed out there is no account menu; `LanguageMenu` stays\n * the bar's button (§2.3).\n */\nexport function AccountMenuLanguage({\n  languages,\n  value,\n  onPick,\n  close,\n  label,\n  defaultOpen = false,\n}: AccountMenuLanguageProps) {\n  const words = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS);\n  const [open, setOpen] = useState(defaultOpen);\n  const active = languages.find((l) => l.code === value);\n  return (\n    <li>\n      <Disclosure\n        variant=\"menu\"\n        open={open}\n        onOpenChange={setOpen}\n        title={\n          <span className=\"flex items-center justify-between gap-3\">\n            <span className=\"flex items-center gap-2\">\n              <Globe aria-hidden className=\"size-4\" />\n              {label ?? words.language}\n            </span>\n            {active && flagOf(active)}\n          </span>\n        }\n      >\n        <ul>\n          {languages.map((lang) => (\n            <li key={lang.code}>\n              <MenuItem\n                checked={lang.code === value}\n                onClick={() => {\n                  onPick(lang.code);\n                  setOpen(false);\n                  close?.();\n                }}\n                leading={flagOf(lang)}\n                // Under the row's own text, past the globe.\n                className=\"ps-9\"\n              >\n                {lang.label}\n              </MenuItem>\n            </li>\n          ))}\n        </ul>\n      </Disclosure>\n    </li>\n  );\n}\n"],"mappings":";AAgCI,cAqDQ,YArDR;AAhCJ,SAAS,gBAAgB;AAEzB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB,oBAAoB;AAuBrD,SAAS,OAAO,MAA4C;AAC1D,MAAI,KAAK,SAAS,OAAW,QAAO,KAAK;AACzC,MAAI,CAAC,KAAK,QAAS,QAAO;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,gBAAc,KAAK;AAAA,MACnB,WAAW,SAAS,KAAK,OAAO;AAAA;AAAA,EAClC;AAEJ;AA4BO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,QAAQ,aAAa,UAAU,sBAAsB;AAC3D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,SAAS,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK;AACrD,SACE,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,MACd,OACE,qBAAC,UAAK,WAAU,2CACd;AAAA,6BAAC,UAAK,WAAU,2BACd;AAAA,8BAAC,SAAM,eAAW,MAAC,WAAU,UAAS;AAAA,UACrC,SAAS,MAAM;AAAA,WAClB;AAAA,QACC,UAAU,OAAO,MAAM;AAAA,SAC1B;AAAA,MAGF,8BAAC,QACE,oBAAU,IAAI,CAAC,SACd,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,KAAK,SAAS;AAAA,UACvB,SAAS,MAAM;AACb,mBAAO,KAAK,IAAI;AAChB,oBAAQ,KAAK;AACb,oBAAQ;AAAA,UACV;AAAA,UACA,SAAS,OAAO,IAAI;AAAA,UAEpB,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,KAbO,KAAK,IAcd,CACD,GACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/shell/admin-menu.d.ts

@@ -0,0 +1,46 @@
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { AdminAreaLabels } from "../admin/admin-area-labels.js";
+import type { TopBarMenuEntry } from "./topbar-action-menu.js";
+export interface AdminMenuEntryOptions {
+    /** The admin area. Default `/admin`. */
+    href?: string;
+    /**
+     * The waiting count (§2.4 decision 15, §6.3): only work that waits on this admin —
+     * `adminWaitingCount(attention, […])`. `0`, `null` or none shows no badge.
+     */
+    badge?: number | null;
+    /** The resolved `adminArea` words (`useAdminAreaLabels()`); default English. Builds no
+     *  hook, so the entry can be made in the list of entries. */
+    labels?: AdminAreaLabels;
+    /** The entry's `key`. Default `"administration"`. */
+    key?: string;
+    /** The page already open: `aria-current` and a check mark. */
+    current?: boolean;
+}
+/**
+ * The "Administration" {@link TopBarMenuEntry}: a link row with the `ShieldCheck` icon,
+ * the kit's word and the waiting count as its badge. Put it in the entries for an admin
+ * only — the menu closes on the way, as any link row:
+ *
+ *     entries={[…, ...(isAdmin ? [adminMenuEntry({ badge: waiting, labels })] : []), …]}
+ */
+export declare function adminMenuEntry({ href, badge, labels, key, current, }?: AdminMenuEntryOptions): TopBarMenuEntry;
+export interface AdminMenuRowProps {
+    /** The admin area. Default `/admin`. */
+    href?: string;
+    /** As {@link AdminMenuEntryOptions.badge}. */
+    badge?: number | null;
+    /** Runs on the way — `HoverMenu`'s `close`. */
+    onNavigate?: () => void;
+    current?: boolean;
+    /** Prop > `<UiKitProvider labels={{ adminArea }}>` > English. */
+    labels?: LabelOverride<AdminAreaLabels>;
+}
+/**
+ * The same row as {@link adminMenuEntry} for a menu drawn from `HoverMenu` children: the
+ * `<li>` holding the router-link {@link MenuItem} `TopBarActionMenu` draws for a link
+ * entry, so the two menus look alike.
+ *
+ *     {(close) => <ul>… {isAdmin && <AdminMenuRow badge={waiting} onNavigate={close} />} …</ul>}
+ */
+export declare function AdminMenuRow({ href, badge, onNavigate, current, labels: labelsProp }: AdminMenuRowProps): import("react").JSX.Element;

package/dist/shell/admin-menu.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router";
+import { ShieldCheck } from "lucide-react";
+import { Chip } from "../components/chip.js";
+import { MenuItem } from "../components/menu-item.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { DEFAULT_ADMIN_AREA_LABELS } from "../admin/admin-area-labels.js";
+function badgeText(badge) {
+  if (typeof badge !== "number" || !(badge > 0)) return null;
+  return badge > 99 ? "99+" : String(Math.floor(badge));
+}
+function WaitingBadge({ badge, labels }) {
+  const text = badgeText(badge);
+  if (text === null) return null;
+  return /* @__PURE__ */ jsxs(Chip, { size: "sm", variant: "solid", tone: "warning", "data-slot": "admin-badge", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: text }),
+    /* @__PURE__ */ jsxs("span", { className: "sr-only-fixed", children: [
+      ", ",
+      labels.waiting(badge)
+    ] })
+  ] });
+}
+function adminMenuEntry({
+  href = "/admin",
+  badge,
+  labels = DEFAULT_ADMIN_AREA_LABELS,
+  key = "administration",
+  current
+} = {}) {
+  return {
+    kind: "link",
+    key,
+    to: href,
+    icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "size-4", "aria-hidden": true }),
+    label: labels.title,
+    trailing: badgeText(badge) === null ? void 0 : /* @__PURE__ */ jsx(WaitingBadge, { badge, labels }),
+    current
+  };
+}
+function AdminMenuRow({ href = "/admin", badge, onNavigate, current, labels: labelsProp }) {
+  const labels = useKitLabels("adminArea", DEFAULT_ADMIN_AREA_LABELS, labelsProp);
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      href,
+      renderLink: ({ href: to, ...p }) => /* @__PURE__ */ jsx(Link, { to, ...p }),
+      onClick: onNavigate ? () => onNavigate() : void 0,
+      leading: /* @__PURE__ */ jsx(ShieldCheck, { className: "size-4", "aria-hidden": true }),
+      trailing: badgeText(badge) === null ? void 0 : /* @__PURE__ */ jsx(WaitingBadge, { badge, labels }),
+      current,
+      children: labels.title
+    }
+  ) });
+}
+export {
+  AdminMenuRow,
+  adminMenuEntry
+};
+//# sourceMappingURL=admin-menu.js.map

package/dist/shell/admin-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/admin-menu.tsx"],"sourcesContent":["import { Link } from \"react-router\";\nimport { ShieldCheck } from \"lucide-react\";\nimport { Chip } from \"../components/chip\";\nimport { MenuItem } from \"../components/menu-item\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_ADMIN_AREA_LABELS } from \"../admin/admin-area-labels\";\nimport type { AdminAreaLabels } from \"../admin/admin-area-labels\";\nimport type { TopBarMenuEntry } from \"./topbar-action-menu\";\n\n/**\n * The account menu's \"Administration\" row (0.42.0, docs/admin-harmonization.md §2.1, §6.6,\n * §7): the way into the admin area everyone finds, in every app, for an admin only. Two\n * forms of one row — {@link adminMenuEntry} for `TopBarActionMenu`'s `entries`, and\n * {@link AdminMenuRow} for a menu built from `HoverMenu` children (Kurvenschmiede's).\n */\n\n/** The badge's text: nothing for none or 0, \"99+\" past 99. */\nfunction badgeText(badge: number | null | undefined): string | null {\n  if (typeof badge !== \"number\" || !(badge > 0)) return null;\n  return badge > 99 ? \"99+\" : String(Math.floor(badge));\n}\n\n/**\n * The waiting count at the row's end: the `solid` count pill of {@link Chip}, in the\n * pending count's tone, with the number for the eye and `adminArea.waiting` for a reader\n * (\"Administration, 3 waiting\"). `null` for no count.\n */\nfunction WaitingBadge({ badge, labels }: { badge: number | null | undefined; labels: AdminAreaLabels }) {\n  const text = badgeText(badge);\n  if (text === null) return null;\n  return (\n    <Chip size=\"sm\" variant=\"solid\" tone=\"warning\" data-slot=\"admin-badge\">\n      <span aria-hidden>{text}</span>\n      {/* The comma parts it from the row's label in the name: \"Administration, 3 waiting\". */}\n      <span className=\"sr-only-fixed\">, {labels.waiting(badge as number)}</span>\n    </Chip>\n  );\n}\n\nexport interface AdminMenuEntryOptions {\n  /** The admin area. Default `/admin`. */\n  href?: string;\n  /**\n   * The waiting count (§2.4 decision 15, §6.3): only work that waits on this admin —\n   * `adminWaitingCount(attention, […])`. `0`, `null` or none shows no badge.\n   */\n  badge?: number | null;\n  /** The resolved `adminArea` words (`useAdminAreaLabels()`); default English. Builds no\n   *  hook, so the entry can be made in the list of entries. */\n  labels?: AdminAreaLabels;\n  /** The entry's `key`. Default `\"administration\"`. */\n  key?: string;\n  /** The page already open: `aria-current` and a check mark. */\n  current?: boolean;\n}\n\n/**\n * The \"Administration\" {@link TopBarMenuEntry}: a link row with the `ShieldCheck` icon,\n * the kit's word and the waiting count as its badge. Put it in the entries for an admin\n * only — the menu closes on the way, as any link row:\n *\n *     entries={[…, ...(isAdmin ? [adminMenuEntry({ badge: waiting, labels })] : []), …]}\n */\nexport function adminMenuEntry({\n  href = \"/admin\",\n  badge,\n  labels = DEFAULT_ADMIN_AREA_LABELS,\n  key = \"administration\",\n  current,\n}: AdminMenuEntryOptions = {}): TopBarMenuEntry {\n  return {\n    kind: \"link\",\n    key,\n    to: href,\n    icon: <ShieldCheck className=\"size-4\" aria-hidden />,\n    label: labels.title,\n    trailing: badgeText(badge) === null ? undefined : <WaitingBadge badge={badge} labels={labels} />,\n    current,\n  };\n}\n\nexport interface AdminMenuRowProps {\n  /** The admin area. Default `/admin`. */\n  href?: string;\n  /** As {@link AdminMenuEntryOptions.badge}. */\n  badge?: number | null;\n  /** Runs on the way — `HoverMenu`'s `close`. */\n  onNavigate?: () => void;\n  current?: boolean;\n  /** Prop > `<UiKitProvider labels={{ adminArea }}>` > English. */\n  labels?: LabelOverride<AdminAreaLabels>;\n}\n\n/**\n * The same row as {@link adminMenuEntry} for a menu drawn from `HoverMenu` children: the\n * `<li>` holding the router-link {@link MenuItem} `TopBarActionMenu` draws for a link\n * entry, so the two menus look alike.\n *\n *     {(close) => <ul>… {isAdmin && <AdminMenuRow badge={waiting} onNavigate={close} />} …</ul>}\n */\nexport function AdminMenuRow({ href = \"/admin\", badge, onNavigate, current, labels: labelsProp }: AdminMenuRowProps) {\n  const labels = useKitLabels(\"adminArea\", DEFAULT_ADMIN_AREA_LABELS, labelsProp);\n  return (\n    <li>\n      <MenuItem\n        href={href}\n        renderLink={({ href: to, ...p }) => <Link to={to} {...p} />}\n        onClick={onNavigate ? () => onNavigate() : undefined}\n        leading={<ShieldCheck className=\"size-4\" aria-hidden />}\n        trailing={badgeText(badge) === null ? undefined : <WaitingBadge badge={badge} labels={labels} />}\n        current={current}\n      >\n        {labels.title}\n      </MenuItem>\n    </li>\n  );\n}\n"],"mappings":";AAgCM,cAEA,YAFA;AAhCN,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAAwC;AACjD,SAAS,iCAAiC;AAY1C,SAAS,UAAU,OAAiD;AAClE,MAAI,OAAO,UAAU,YAAY,EAAE,QAAQ,GAAI,QAAO;AACtD,SAAO,QAAQ,KAAK,QAAQ,OAAO,KAAK,MAAM,KAAK,CAAC;AACtD;AAOA,SAAS,aAAa,EAAE,OAAO,OAAO,GAAkE;AACtG,QAAM,OAAO,UAAU,KAAK;AAC5B,MAAI,SAAS,KAAM,QAAO;AAC1B,SACE,qBAAC,QAAK,MAAK,MAAK,SAAQ,SAAQ,MAAK,WAAU,aAAU,eACvD;AAAA,wBAAC,UAAK,eAAW,MAAE,gBAAK;AAAA,IAExB,qBAAC,UAAK,WAAU,iBAAgB;AAAA;AAAA,MAAG,OAAO,QAAQ,KAAe;AAAA,OAAE;AAAA,KACrE;AAEJ;AA0BO,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,MAAM;AAAA,EACN;AACF,IAA2B,CAAC,GAAoB;AAC9C,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA,IAAI;AAAA,IACJ,MAAM,oBAAC,eAAY,WAAU,UAAS,eAAW,MAAC;AAAA,IAClD,OAAO,OAAO;AAAA,IACd,UAAU,UAAU,KAAK,MAAM,OAAO,SAAY,oBAAC,gBAAa,OAAc,QAAgB;AAAA,IAC9F;AAAA,EACF;AACF;AAqBO,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,YAAY,SAAS,QAAQ,WAAW,GAAsB;AACnH,QAAM,SAAS,aAAa,aAAa,2BAA2B,UAAU;AAC9E,SACE,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,oBAAC,QAAK,IAAS,GAAG,GAAG;AAAA,MACzD,SAAS,aAAa,MAAM,WAAW,IAAI;AAAA,MAC3C,SAAS,oBAAC,eAAY,WAAU,UAAS,eAAW,MAAC;AAAA,MACrD,UAAU,UAAU,KAAK,MAAM,OAAO,SAAY,oBAAC,gBAAa,OAAc,QAAgB;AAAA,MAC9F;AAAA,MAEC,iBAAO;AAAA;AAAA,EACV,GACF;AAEJ;","names":[]}

package/dist/shell/app-shell.d.ts

@@ -67,6 +67,16 @@ export type AppShellSidebarFooterItem = {
     hint?: string;
     /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`. */
     external?: boolean;
+    /**
+     * 0.42.0 (docs/admin-harmonization.md §6.9): a count of what waits behind the link —
+     * kastlan's "Administration" with its To-triage count. A pill at the end of the
+     * expanded link, a corner dot on the collapsed icon; `0`, `null` or none shows
+     * nothing, and above 99 it reads "99+". The count joins the link's name, in
+     * `badgeLabel`'s words when given ("Administration, 3 waiting").
+     */
+    badge?: number | null;
+    /** The badge's words for a reader — `adminArea.waiting(count)`. Default: the number. */
+    badgeLabel?: string;
 } | {
     kind: "links";
     key: string;

package/dist/shell/app-shell.js

@@ -235,6 +235,11 @@ function AppShell({
 const routerLink = ({ href, ...p }) => /* @__PURE__ */ jsx(Link, { to: href, ...p });
 const plainLink = ({ children, ...p }) => /* @__PURE__ */ jsx("a", { ...p, children });
 const FOOTER_ICON_LINK = "flex min-h-8 items-center justify-center rounded-md text-muted hover:bg-hover hover:text-secondary";
+function footerBadgeText(badge) {
+  if (typeof badge !== "number" || !(badge > 0)) return null;
+  return badge > 99 ? "99+" : String(Math.floor(badge));
+}
+const FOOTER_BADGE = "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-warning px-1 text-micro font-semibold leading-4 tabular-nums text-warning-contrast";
 function RenderedLink({ render, ...props }) {
   return render(props);
 }
@@ -253,10 +258,15 @@ function SidebarFooterItems({
       const to = item.kind === "links" ? item.to ?? item.links[0]?.to : item.to;
       if (!to) return null;
       const external = item.kind === "links" ? item.links.find((l) => l.to === to)?.external : item.external;
+      const count2 = item.kind === "links" ? null : footerBadgeText(item.badge);
+      const spoken = count2 === null || item.kind === "links" ? null : item.badgeLabel ?? count2;
       return /* @__PURE__ */ jsx(Tooltip, { label: item.label, side: "end", portal: true, className: "block", children: linkTo(to, external, {
-        "aria-label": item.label,
-        className: FOOTER_ICON_LINK,
-        children: /* @__PURE__ */ jsx(item.icon, { className: "size-4", "aria-hidden": true })
+        "aria-label": spoken === null ? item.label : `${item.label}, ${spoken}`,
+        className: cn(FOOTER_ICON_LINK, count2 !== null && "relative"),
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(item.icon, { className: "size-4", "aria-hidden": true }),
+          count2 !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-badge": "", className: cn(FOOTER_BADGE, "absolute -top-0.5 end-0.5"), children: count2 })
+        ] })
       }) }, item.key);
     }
     if (item.kind === "links") {
@@ -273,11 +283,19 @@ function SidebarFooterItems({
         item.key
       );
     }
+    const count = footerBadgeText(item.badge);
     const link = linkTo(item.to, item.external, {
       className: cn(FOOTER_ICON_LINK, "gap-1.5 text-xs font-medium"),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(item.icon, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: item.text ?? item.label })
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: item.text ?? item.label }),
+        count !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-badge": "", className: FOOTER_BADGE, children: count }),
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            ", ",
+            item.badgeLabel ?? count
+          ] })
+        ] })
       ] })
     });
     return item.hint ? /* @__PURE__ */ jsx(Tooltip, { label: item.hint, side: "top", portal: true, className: "block", children: link }, item.key) : /* @__PURE__ */ jsx("div", { children: link }, item.key);