@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/rbac/SessionsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionsList.js","sources":["../../../src/components/rbac/SessionsList.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ColumnDef } from \"@tanstack/react-table\";\nimport { AlertDialog } from \"../Dialog\";\nimport { Badge } from \"../Badge\";\nimport { CellStack, DataTable, TableEmptyState } from \"../Table\";\nimport { Icon } from \"../Icon\";\nimport { IconButton } from \"../IconButton\";\nimport { copyText } from \"../../lib/clipboard\";\nimport { DateTimeText } from \"../DateTimeText\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { UiStrings } from \"../../lib/i18n\";\nimport { EndedLine, IdleLine, type EndedState, type IdleState } from \"./EndedLine\";\n\n/* ----------------------------------------------------------------------------\n   SESSIONS LIST\n\n   ACCOUNT SECURITY'S OWN `DataTable` — same relationship `MembersPanel` has\n   with the table primitive (see that file's own header: \"there are no\n   team-specific table components\"). One row per signed-in session, a\n   \"Current\" badge on whichever row is this one, and a revoke action on every\n   OTHER row — the row that IS the current session has nothing to revoke\n   itself out from under.\n\n   PRESENTATIONAL ONLY, no exception for the confirm step: `onRevoke` is the\n   one side effect, fired only after the `AlertDialog` confirms. This library\n   never guesses that a destructive account action was fine to skip a\n   confirmation for.\n   ---------------------------------------------------------------------------- */\n\nexport interface Session {\n  id: number;\n  /** A human label for the session — \"Chrome on macOS\", \"iPhone app\", whatever\n   *  the consumer's own backend derives from the user agent. */\n  name: string;\n  /** ISO instant. */\n  createdAt: string;\n  /** ISO instant. */\n  lastUsedAt: string;\n  /** ISO instant, or `null`/omitted for a session with no expiry. */\n  expiresAt?: string | null;\n  userAgent?: string;\n  ip?: string;\n  /** True for exactly one row — the session this UI is currently running in. */\n  current: boolean;\n  /** DX-5246: set on a session that has ended (signed out, revoked or expired): the consumer's own words for how it ended (`label`) and the ISO instant it did (`at`). An ended row shows them under its name and offers no revoke. */\n  ended?: EndedState;\n  /** DX-5246: set on a session that still works but nobody is using (idle): the consumer's own words (`label`) and the ISO instant it was last in use (`at`). An idle row shows them under its name and keeps its revoke. */\n  idle?: IdleState;\n  /** DX-5247: the id of the browser the session was made in, a debugging label. Shown (first 9 characters) with a copy control in the Browser column; the whole id is what is copied. Omit for a session that has none: the cell reads \"—\". */\n  browserId?: string;\n  /** DX-5247: true on every row whose `browserId` is the browser this UI is running in: it gets a \"This browser\" badge and a tinted row. */\n  thisBrowser?: boolean;\n}\n\nexport interface SessionsListProps {\n  sessions: Session[];\n  onRevoke: (id: number) => Promise<void>;\n  /** The id of a session currently mid-revoke. Disables just that row. */\n  busyId?: number | null;\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nfunction RevokeCell({\n  session,\n  busy,\n  onRevoke,\n}: {\n  session: Session;\n  busy: boolean;\n  onRevoke: (id: number) => Promise<void>;\n}) {\n  const strings = useUiStrings().sessionsList;\n  const [confirmOpen, setConfirmOpen] = useState(false);\n\n  if (session.current) {\n    return <span className=\"text-2xs text-tertiary\">{strings.thisSession}</span>;\n  }\n  // DX-5246: nothing left to revoke on a session that has already ended.\n  if (session.ended !== undefined) return null;\n\n  return (\n    <AlertDialog\n      open={confirmOpen}\n      onOpenChange={setConfirmOpen}\n      trigger={\n        <IconButton\n          icon={<Icon name=\"log-out\" size=\"sm\" />}\n          label={strings.revoke(session.name)}\n          tone=\"danger\"\n          size=\"sm\"\n          disabledReason={busy ? strings.revoking : undefined}\n        />\n      }\n      title={strings.revokeTitle(session.name)}\n      description={strings.revokeDescription}\n      confirmLabel={strings.revokeConfirm}\n      destructive\n      loading={busy}\n      onConfirm={() => {\n        void onRevoke(session.id);\n        setConfirmOpen(false);\n      }}\n    />\n  );\n}\n\n/** How many leading characters of a browser id are shown; the whole id is what a copy puts on the clipboard. */\nconst BROWSER_ID_SHOWN = 9;\nconst COPIED_RESET_MS = 2000;\n\nfunction BrowserCell({ session }: { session: Session }) {\n  const strings = useUiStrings().sessionsList;\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current !== null) clearTimeout(timer.current);\n    },\n    [],\n  );\n  if (session.browserId === undefined) return <span className=\"text-tertiary\">—</span>;\n  const browserId = session.browserId;\n  const copy = async () => {\n    try {\n      await copyText(browserId);\n      setCopied(true);\n    } catch {\n      setCopied(false);\n    }\n    if (timer.current !== null) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);\n  };\n  return (\n    <div className=\"flex items-center gap-1.5\">\n      <code className=\"font-mono text-sm text-primary\" data-testid=\"session-browser-id\">\n        {browserId.slice(0, BROWSER_ID_SHOWN)}\n      </code>\n      <IconButton\n        icon={<Icon name={copied ? \"check\" : \"copy\"} size=\"sm\" />}\n        label={strings.copyBrowserId(browserId.slice(0, BROWSER_ID_SHOWN))}\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={() => void copy()}\n      />\n      {session.thisBrowser && (\n        <Badge tone=\"accent\" size=\"sm\" dot>\n          {strings.thisBrowser}\n        </Badge>\n      )}\n    </div>\n  );\n}\n\nfunction buildColumns(\n  strings: UiStrings[\"sessionsList\"],\n  busyId: number | null | undefined,\n  onRevoke: (id: number) => Promise<void>,\n): ColumnDef<Session, unknown>[] {\n  return [\n    {\n      id: \"session\",\n      header: strings.columnSession,\n      accessorFn: (s) => s.name,\n      cell: ({ row }) => {\n        const session = row.original;\n        const secondary = [session.userAgent, session.ip].filter(Boolean).join(\" · \");\n        return (\n          <div className=\"flex items-center gap-2.5\">\n            <span className=\"grid size-8 shrink-0 place-items-center rounded-full bg-surface-inset text-tertiary\">\n              <Icon name=\"monitor\" size=\"sm\" />\n            </span>\n            <div className=\"flex min-w-0 flex-col gap-1\">\n              <CellStack primary={session.name} secondary={secondary || undefined} />\n              {session.ended && <EndedLine ended={session.ended} />}\n              {session.idle && <IdleLine idle={session.idle} />}\n            </div>\n            {session.current && (\n              <Badge tone=\"accent\" size=\"sm\" dot>\n                {strings.current}\n              </Badge>\n            )}\n          </div>\n        );\n      },\n    },\n    {\n      id: \"browser\",\n      header: strings.columnBrowser,\n      accessorFn: (s) => s.browserId ?? \"\",\n      cell: ({ row }) => <BrowserCell session={row.original} />,\n    },\n    {\n      id: \"lastUsed\",\n      header: strings.columnLastUsed,\n      accessorFn: (s) => s.lastUsedAt,\n      cell: ({ row }) => <span className=\"text-secondary\"><RelativeTime at={row.original.lastUsedAt} /></span>,\n    },\n    {\n      id: \"created\",\n      header: strings.columnCreated,\n      accessorFn: (s) => s.createdAt,\n      cell: ({ row }) => <span className=\"text-secondary\"><RelativeTime at={row.original.createdAt} /></span>,\n    },\n    {\n      id: \"expires\",\n      header: strings.columnExpires,\n      accessorFn: (s) => s.expiresAt ?? \"\",\n      cell: ({ row }) => (\n        <span className=\"text-secondary\">\n          {row.original.expiresAt ? <DateTimeText at={row.original.expiresAt} /> : strings.never}\n        </span>\n      ),\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      cell: ({ row }) => (\n        <div className=\"flex justify-end\">\n          <RevokeCell session={row.original} busy={busyId === row.original.id} onRevoke={onRevoke} />\n        </div>\n      ),\n    },\n  ];\n}\n\nexport function SessionsList({ sessions, onRevoke, busyId, emptyState, className }: SessionsListProps) {\n  const strings = useUiStrings().sessionsList;\n  if (sessions.length === 0) {\n    return (\n      emptyState ?? (\n        <TableEmptyState\n          icon={<Icon name=\"monitor\" size=\"lg\" className=\"text-tertiary\" />}\n          title={strings.emptyTitle}\n        />\n      )\n    );\n  }\n\n  const columns = buildColumns(strings, busyId, onRevoke);\n  return <DataTable columns={columns} data={sessions} getRowId={(s) => String(s.id)} getRowClassName={(s) => (s.thisBrowser ? \"bg-accent-subtle\" : undefined)} className={className} />;\n}\n"],"names":["RevokeCell","session","busy","onRevoke","strings","useUiStrings","confirmOpen","setConfirmOpen","useState","jsx","AlertDialog","IconButton","Icon","BROWSER_ID_SHOWN","COPIED_RESET_MS","BrowserCell","copied","setCopied","timer","useRef","useEffect","browserId","copy","copyText","jsxs","Badge","buildColumns","busyId","s","row","secondary","CellStack","EndedLine","IdleLine","RelativeTime","DateTimeText","SessionsList","sessions","emptyState","className","TableEmptyState","columns","DataTable"],"mappings":"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"}

package/dist/components/rbac/TeamSettingsForm.js

@@ -0,0 +1,69 @@
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { useState as D } from "react";
+import { Callout as m } from "../Callout.js";
+import { Field as I } from "../Field.js";
+import { ImageUploadField as T } from "../ImageUploadField.js";
+import { Input as j } from "../Input.js";
+import { useSaveFlow as q, StagedFormActions as w } from "./stagedForm.js";
+import { useStagedImage as A } from "./useStagedImage.js";
+import { useUiStrings as B } from "../../lib/i18n/provider.js";
+function Q({
+  team: i,
+  onSave: v,
+  onUploadLogo: h,
+  readOnly: n = !1,
+  saveLabel: c,
+  discardLabel: S,
+  className: F
+}) {
+  const l = B(), t = l.teamSettingsForm, [a, g] = D(i.name), e = A(i.logoUrl, h), { saving: r, saved: x, error: u, edit: s, save: U } = q(t.failedMessage), p = a.trim() !== i.name || e.dirty, N = a !== i.name || e.dirty, f = !n && p && a.trim().length > 0 && !r && !e.uploading;
+  function b() {
+    f && U(() => v(e.dirty ? { name: a.trim(), logoUrl: e.value } : { name: a.trim() }));
+  }
+  function y() {
+    s(() => {
+      g(i.name), e.discard();
+    });
+  }
+  return /* @__PURE__ */ o("div", { className: F, children: /* @__PURE__ */ C("div", { className: "flex flex-col gap-5", children: [
+    x && !p && /* @__PURE__ */ o(m, { tone: "success", title: t.saved }),
+    u && /* @__PURE__ */ o(m, { tone: "danger", title: t.failedTitle, children: u }),
+    n && /* @__PURE__ */ o(m, { tone: "neutral", title: t.readOnlyTitle, children: t.readOnlyBody }),
+    /* @__PURE__ */ o(
+      T,
+      {
+        label: t.logo,
+        value: e.value,
+        shape: "square",
+        disabled: n || r,
+        onUpload: e.upload,
+        onChange: (d) => s(() => e.stage(d)),
+        description: e.dirty ? l.stagedForm.imageNote("logo", c ?? l.stagedForm.save, e.value === null) : void 0
+      }
+    ),
+    /* @__PURE__ */ o(I, { label: t.teamName, children: /* @__PURE__ */ o(
+      j,
+      {
+        value: a,
+        onChange: (d) => s(() => g(d.target.value)),
+        disabled: n || r
+      }
+    ) }),
+    !n && /* @__PURE__ */ o(
+      w,
+      {
+        onSave: b,
+        onDiscard: y,
+        canSave: f,
+        canDiscard: N && !e.uploading,
+        saving: r,
+        saveLabel: c,
+        discardLabel: S
+      }
+    )
+  ] }) });
+}
+export {
+  Q as TeamSettingsForm
+};
+//# sourceMappingURL=TeamSettingsForm.js.map

package/dist/components/rbac/TeamSettingsForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamSettingsForm.js","sources":["../../../src/components/rbac/TeamSettingsForm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Callout } from \"../Callout\";\nimport { Field } from \"../Field\";\nimport { ImageUploadField } from \"../ImageUploadField\";\nimport { Input } from \"../Input\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { StagedFormActions, useSaveFlow } from \"./stagedForm\";\nimport { useStagedImage } from \"./useStagedImage\";\n\n/* ============================================================================\n   TEAM SETTINGS FORM\n\n   Rename the team and set its logo as ONE form with ONE Save — mirrors\n   `ProfileForm`'s shape (module header there explains the \"seeded once, then\n   local\" convention this file reuses verbatim).\n\n   DX-4131 — THE LOGO IS STAGED, NOT SAVED ON UPLOAD. `onUploadLogo` only has\n   to put the file somewhere and resolve with its URL; nothing about the team\n   record may change then. The picked (or removed) logo is held as form state,\n   previewed at once with a \"Not saved yet\" note, and handed to `onSave` — with\n   the name — when Save is clicked. Discard drops the name edit AND the staged\n   logo without a request. (It used to persist the moment the upload resolved,\n   with Save gated on the name alone: an upload with no Save, and a logo\n   change the Save button could not even see.)\n\n   `onSave` RECEIVES `logoUrl` ONLY WHEN THE LOGO CHANGED. The key is absent\n   for a rename-only Save (keep the stored logo), `null` for a staged removal,\n   a URL for a staged upload — the same three states a `PATCH` body carries\n   (omitted keeps, `null` clears, string sets). Sending `logoUrl: undefined`\n   would JSON-serialise the same, but the key is left out so a consumer that\n   spreads the input into a request body cannot clear a logo by accident.\n\n   `readOnly` IS THE WHOLE OF THE PERMISSION GATE THIS COMPONENT NEEDS — it\n   never reads `useRBAC()` or a permission key itself (G-5 split test: a\n   presentational component takes data/callbacks, never danxbot's permission\n   names). The consuming page decides `readOnly` from whether the viewer\n   holds `team.update`, per PLN-13's permission catalog.\n   ========================================================================= */\n\nexport interface TeamSettingsFormTeam {\n  name: string;\n  logoUrl?: string | null;\n}\n\nexport interface TeamSettingsFormSaveInput {\n  name: string;\n  /** Present only when the logo changed: a URL sets it, `null` removes it. */\n  logoUrl?: string | null;\n}\n\nexport interface TeamSettingsFormProps {\n  team: TeamSettingsFormTeam;\n  onSave: (input: TeamSettingsFormSaveInput) => Promise<void>;\n  /** Uploads the file to storage and resolves with its URL. Must NOT change the\n   *  team record — the logo is only persisted by `onSave`. */\n  onUploadLogo: (file: File) => Promise<string>;\n  /** The viewer lacks `team.update` — every control renders disabled. */\n  readOnly?: boolean;\n  saveLabel?: string;\n  discardLabel?: string;\n  className?: string;\n}\n\nexport function TeamSettingsForm({\n  team,\n  onSave,\n  onUploadLogo,\n  readOnly = false,\n  saveLabel,\n  discardLabel,\n  className,\n}: TeamSettingsFormProps) {\n  const allStrings = useUiStrings();\n  const strings = allStrings.teamSettingsForm;\n  const [name, setName] = useState(team.name);\n  const logo = useStagedImage(team.logoUrl, onUploadLogo);\n  const { saving, saved, error, edit, save } = useSaveFlow(strings.failedMessage);\n\n  // `changed` is what Save would send (the trimmed name); `touched` is any difference at all, so\n  // a stray trailing space can still be discarded though there is nothing to save.\n  const changed = name.trim() !== team.name || logo.dirty;\n  const touched = name !== team.name || logo.dirty;\n  const canSave = !readOnly && changed && name.trim().length > 0 && !saving && !logo.uploading;\n\n  function handleSave() {\n    if (!canSave) return;\n    void save(() => onSave(logo.dirty ? { name: name.trim(), logoUrl: logo.value } : { name: name.trim() }));\n  }\n\n  function handleDiscard() {\n    edit(() => {\n      setName(team.name);\n      logo.discard();\n    });\n  }\n\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-5\">\n        {saved && !changed && <Callout tone=\"success\" title={strings.saved} />}\n        {error && <Callout tone=\"danger\" title={strings.failedTitle}>{error}</Callout>}\n        {readOnly && (\n          <Callout tone=\"neutral\" title={strings.readOnlyTitle}>\n            {strings.readOnlyBody}\n          </Callout>\n        )}\n\n        <ImageUploadField\n          label={strings.logo}\n          value={logo.value}\n          shape=\"square\"\n          disabled={readOnly || saving}\n          onUpload={logo.upload}\n          onChange={(url) => edit(() => logo.stage(url))}\n          description={logo.dirty ? allStrings.stagedForm.imageNote(\"logo\", saveLabel ?? allStrings.stagedForm.save, logo.value === null) : undefined}\n        />\n\n        <Field label={strings.teamName}>\n          <Input\n            value={name}\n            onChange={(event) => edit(() => setName(event.target.value))}\n            disabled={readOnly || saving}\n          />\n        </Field>\n\n        {!readOnly && (\n          <StagedFormActions\n            onSave={handleSave}\n            onDiscard={handleDiscard}\n            canSave={canSave}\n            canDiscard={touched && !logo.uploading}\n            saving={saving}\n            saveLabel={saveLabel}\n            discardLabel={discardLabel}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["TeamSettingsForm","team","onSave","onUploadLogo","readOnly","saveLabel","discardLabel","className","allStrings","useUiStrings","strings","name","setName","useState","logo","useStagedImage","saving","saved","error","edit","save","useSaveFlow","changed","touched","canSave","handleSave","handleDiscard","jsxs","jsx","Callout","ImageUploadField","url","Field","Input","event","StagedFormActions"],"mappings":";;;;;;;;;AA+DO,SAASA,EAAiB;AAAA,EAC/B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAMC,IAAaC,EAAA,GACbC,IAAUF,EAAW,kBACrB,CAACG,GAAMC,CAAO,IAAIC,EAASZ,EAAK,IAAI,GACpCa,IAAOC,EAAed,EAAK,SAASE,CAAY,GAChD,EAAE,QAAAa,GAAQ,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,MAASC,EAAYX,EAAQ,aAAa,GAIxEY,IAAUX,EAAK,KAAA,MAAWV,EAAK,QAAQa,EAAK,OAC5CS,IAAUZ,MAASV,EAAK,QAAQa,EAAK,OACrCU,IAAU,CAACpB,KAAYkB,KAAWX,EAAK,OAAO,SAAS,KAAK,CAACK,KAAU,CAACF,EAAK;AAEnF,WAASW,IAAa;AACpB,IAAKD,KACAJ,EAAK,MAAMlB,EAAOY,EAAK,QAAQ,EAAE,MAAMH,EAAK,KAAA,GAAQ,SAASG,EAAK,UAAU,EAAE,MAAMH,EAAK,KAAA,EAAK,CAAG,CAAC;AAAA,EACzG;AAEA,WAASe,IAAgB;AACvB,IAAAP,EAAK,MAAM;AACT,MAAAP,EAAQX,EAAK,IAAI,GACjBa,EAAK,QAAA;AAAA,IACP,CAAC;AAAA,EACH;AAEA,2BACG,OAAA,EAAI,WAAAP,GACH,UAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,IAAAV,KAAS,CAACK,KAAW,gBAAAM,EAACC,GAAA,EAAQ,MAAK,WAAU,OAAOnB,EAAQ,OAAO;AAAA,IACnEQ,uBAAUW,GAAA,EAAQ,MAAK,UAAS,OAAOnB,EAAQ,aAAc,UAAAQ,EAAA,CAAM;AAAA,IACnEd,uBACEyB,GAAA,EAAQ,MAAK,WAAU,OAAOnB,EAAQ,eACpC,UAAAA,EAAQ,aAAA,CACX;AAAA,IAGF,gBAAAkB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAOpB,EAAQ;AAAA,QACf,OAAOI,EAAK;AAAA,QACZ,OAAM;AAAA,QACN,UAAUV,KAAYY;AAAA,QACtB,UAAUF,EAAK;AAAA,QACf,UAAU,CAACiB,MAAQZ,EAAK,MAAML,EAAK,MAAMiB,CAAG,CAAC;AAAA,QAC7C,aAAajB,EAAK,QAAQN,EAAW,WAAW,UAAU,QAAQH,KAAaG,EAAW,WAAW,MAAMM,EAAK,UAAU,IAAI,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpI,gBAAAc,EAACI,GAAA,EAAM,OAAOtB,EAAQ,UACpB,UAAA,gBAAAkB;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,OAAOtB;AAAA,QACP,UAAU,CAACuB,MAAUf,EAAK,MAAMP,EAAQsB,EAAM,OAAO,KAAK,CAAC;AAAA,QAC3D,UAAU9B,KAAYY;AAAA,MAAA;AAAA,IAAA,GAE1B;AAAA,IAEC,CAACZ,KACA,gBAAAwB;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,QAAQV;AAAA,QACR,WAAWC;AAAA,QACX,SAAAF;AAAA,QACA,YAAYD,KAAW,CAACT,EAAK;AAAA,QAC7B,QAAAE;AAAA,QACA,WAAAX;AAAA,QACA,cAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CAEJ,EAAA,CACF;AAEJ;"}

package/dist/components/rbac/TeamSwitcher.js

@@ -0,0 +1,66 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { Avatar as m } from "../Avatar.js";
+import { Icon as d } from "../Icon.js";
+import { Popover as u, PopoverClose as x } from "../Popover.js";
+import { cn as n } from "../../lib/cn.js";
+import { useRBAC as f } from "./RBACProvider.js";
+import { useUiStrings as h } from "../../lib/i18n/provider.js";
+const v = [
+  "dx-tap flex w-full items-center gap-2.5 rounded-md px-2.5 py-2",
+  "text-left text-sm text-secondary outline-none",
+  "transition-[var(--tx-colors)] duration-(--dur-instant)",
+  "hover:bg-surface-hover hover:text-primary",
+  "focus-visible:bg-surface-hover focus-visible:text-primary"
+], b = "text-2xs font-semibold tracking-widest text-tertiary uppercase";
+function z({ onSwitchTeam: i, className: o }) {
+  const a = h().teamSwitcher, { currentTeam: r, teams: c } = f();
+  if (!r) return null;
+  const p = c.length > 1 && !!i, l = /* @__PURE__ */ s("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+    /* @__PURE__ */ e(m, { name: r.name, src: r.logoUrl, size: "sm", shape: "rounded" }),
+    /* @__PURE__ */ e("span", { className: "truncate text-sm font-semibold text-primary", children: r.name })
+  ] });
+  return p ? /* @__PURE__ */ e(
+    u,
+    {
+      align: "start",
+      width: "calc(18rem*var(--ui-scale))",
+      className: o,
+      trigger: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          "aria-label": a.switchFrom(r.name),
+          className: n(
+            "dx-tap flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5",
+            "outline-none transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+            "hover:bg-surface-active focus-visible:shadow-[0_0_0_3px_var(--focus-halo)]"
+          ),
+          children: [
+            l,
+            /* @__PURE__ */ e(d, { name: "chevrons-up-down", size: "sm", className: "shrink-0 text-tertiary" })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ s("div", { className: "flex w-full min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ e("span", { className: n(b, "px-1.5 pt-1 pb-1.5"), children: a.switchTeam }),
+        c.map((t) => /* @__PURE__ */ e(x, { children: /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: n(v, t.id === r.id && "text-primary"),
+            onClick: () => i(t.id),
+            children: [
+              /* @__PURE__ */ e(m, { name: t.name, src: t.logoUrl, size: "xs", shape: "rounded" }),
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: t.name }),
+              t.id === r.id && /* @__PURE__ */ e(d, { name: "check", size: "xs", className: "shrink-0 text-success" })
+            ]
+          }
+        ) }, t.id))
+      ] })
+    }
+  ) : /* @__PURE__ */ e("div", { className: n("flex items-center px-1 py-1.5", o), "aria-label": a.currentTeam, children: l });
+}
+export {
+  z as TeamSwitcher
+};
+//# sourceMappingURL=TeamSwitcher.js.map

package/dist/components/rbac/TeamSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamSwitcher.js","sources":["../../../src/components/rbac/TeamSwitcher.tsx"],"sourcesContent":["import { Avatar } from \"../Avatar\";\nimport { Icon } from \"../Icon\";\nimport { Popover, PopoverClose } from \"../Popover\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { useRBAC } from \"./RBACProvider\";\n\n/* ============================================================================\n   TEAM SWITCHER\n\n   The current team's brand (logo + name), and — for anyone belonging to more\n   than one team — a menu to jump between them. This is deliberately its own\n   component rather than a section bolted onto `AccountMenu`: it belongs in\n   the header brand slot, not the account popover, so a person can see and\n   change which team they're in without opening their account menu at all.\n   `AccountMenu`'s own \"Switch team\" section (same data, same `onSwitchTeam`\n   callback) remains for the account-menu path; the two are independent\n   entry points to the identical action, not a duplicate implementation —\n   this component owns no team-switching logic of its own, only the trigger\n   + list UI, exactly like `AccountMenu` does for its rows.\n\n   NO ROUTER, NO FETCH. `onSwitchTeam` is the only side effect this component\n   ever produces; the consumer owns what happens to the network and the URL\n   after that (mirrors the `AccountMenu` / `Popover.tsx` contract note).\n   ========================================================================= */\n\nconst ITEM = [\n  \"dx-tap flex w-full items-center gap-2.5 rounded-md px-2.5 py-2\",\n  \"text-left text-sm text-secondary outline-none\",\n  \"transition-[var(--tx-colors)] duration-(--dur-instant)\",\n  \"hover:bg-surface-hover hover:text-primary\",\n  \"focus-visible:bg-surface-hover focus-visible:text-primary\",\n];\n\nconst SECTION_LABEL = \"text-2xs font-semibold tracking-widest text-tertiary uppercase\";\n\nexport interface TeamSwitcherProps {\n  onSwitchTeam?: (teamId: string) => void;\n  className?: string;\n}\n\nexport function TeamSwitcher({ onSwitchTeam, className }: TeamSwitcherProps) {\n  const strings = useUiStrings().teamSwitcher;\n  const { currentTeam, teams } = useRBAC();\n\n  /* No current team resolved (a membership/team mismatch upstream) — there is\n     nothing sensible to render as a trigger, so the switcher renders nothing\n     rather than a blank or placeholder brand. A consumer relying on this\n     always having a value has a data bug to fix upstream, not a fallback to\n     paper over here. */\n  if (!currentTeam) return null;\n\n  const canSwitch = teams.length > 1 && !!onSwitchTeam;\n\n  const brand = (\n    <span className=\"flex min-w-0 items-center gap-2.5\">\n      <Avatar name={currentTeam.name} src={currentTeam.logoUrl} size=\"sm\" shape=\"rounded\" />\n      <span className=\"truncate text-sm font-semibold text-primary\">{currentTeam.name}</span>\n    </span>\n  );\n\n  /* Nothing to switch TO (a single-team consumer, or no callback supplied) —\n     render the brand as plain, non-interactive content. A trigger with\n     nowhere to go is worse than no trigger at all, same rule `AccountMenu`\n     applies to its own optional rows. */\n  if (!canSwitch) {\n    return (\n      <div className={cn(\"flex items-center px-1 py-1.5\", className)} aria-label={strings.currentTeam}>\n        {brand}\n      </div>\n    );\n  }\n\n  return (\n    <Popover\n      align=\"start\"\n      width=\"calc(18rem*var(--ui-scale))\"\n      className={className}\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={strings.switchFrom(currentTeam.name)}\n          className={cn(\n            \"dx-tap flex w-full items-center justify-between gap-2 rounded-md px-1 py-1.5\",\n            \"outline-none transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n            \"hover:bg-surface-active focus-visible:shadow-[0_0_0_3px_var(--focus-halo)]\",\n          )}\n        >\n          {brand}\n          <Icon name=\"chevrons-up-down\" size=\"sm\" className=\"shrink-0 text-tertiary\" />\n        </button>\n      }\n    >\n      <div className=\"flex w-full min-w-0 flex-col gap-0.5\">\n        <span className={cn(SECTION_LABEL, \"px-1.5 pt-1 pb-1.5\")}>{strings.switchTeam}</span>\n        {teams.map((team) => (\n          <PopoverClose key={team.id}>\n            <button\n              type=\"button\"\n              className={cn(ITEM, team.id === currentTeam.id && \"text-primary\")}\n              onClick={() => onSwitchTeam(team.id)}\n            >\n              <Avatar name={team.name} src={team.logoUrl} size=\"xs\" shape=\"rounded\" />\n              <span className=\"min-w-0 flex-1 truncate\">{team.name}</span>\n              {team.id === currentTeam.id && (\n                <Icon name=\"check\" size=\"xs\" className=\"shrink-0 text-success\" />\n              )}\n            </button>\n          </PopoverClose>\n        ))}\n      </div>\n    </Popover>\n  );\n}\n"],"names":["ITEM","SECTION_LABEL","TeamSwitcher","onSwitchTeam","className","strings","useUiStrings","currentTeam","teams","useRBAC","canSwitch","brand","jsxs","jsx","Avatar","Popover","cn","Icon","team","PopoverClose"],"mappings":";;;;;;;AA0BA,MAAMA,IAAO;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAgB;AAOf,SAASC,EAAa,EAAE,cAAAC,GAAc,WAAAC,KAAgC;AAC3E,QAAMC,IAAUC,IAAe,cACzB,EAAE,aAAAC,GAAa,OAAAC,EAAA,IAAUC,EAAA;AAO/B,MAAI,CAACF,EAAa,QAAO;AAEzB,QAAMG,IAAYF,EAAM,SAAS,KAAK,CAAC,CAACL,GAElCQ,IACJ,gBAAAC,EAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,MAAMP,EAAY,MAAM,KAAKA,EAAY,SAAS,MAAK,MAAK,OAAM,UAAA,CAAU;AAAA,IACpF,gBAAAM,EAAC,QAAA,EAAK,WAAU,+CAA+C,YAAY,KAAA,CAAK;AAAA,EAAA,GAClF;AAOF,SAAKH,IASH,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,WAAAX;AAAA,MACA,SACE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAYP,EAAQ,WAAWE,EAAY,IAAI;AAAA,UAC/C,WAAWS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAAL;AAAA,8BACAM,GAAA,EAAK,MAAK,oBAAmB,MAAK,MAAK,WAAU,yBAAA,CAAyB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAI/E,UAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAK,WAAWG,EAAGf,GAAe,oBAAoB,GAAI,YAAQ,YAAW;AAAA,QAC7EO,EAAM,IAAI,CAACU,wBACTC,GAAA,EACC,UAAA,gBAAAP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWI,EAAGhB,GAAMkB,EAAK,OAAOX,EAAY,MAAM,cAAc;AAAA,YAChE,SAAS,MAAMJ,EAAae,EAAK,EAAE;AAAA,YAEnC,UAAA;AAAA,cAAA,gBAAAL,EAACC,GAAA,EAAO,MAAMI,EAAK,MAAM,KAAKA,EAAK,SAAS,MAAK,MAAK,OAAM,UAAA,CAAU;AAAA,cACtE,gBAAAL,EAAC,QAAA,EAAK,WAAU,2BAA2B,YAAK,MAAK;AAAA,cACpDK,EAAK,OAAOX,EAAY,MACvB,gBAAAM,EAACI,GAAA,EAAK,MAAK,SAAQ,MAAK,MAAK,WAAU,wBAAA,CAAwB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EAEnE,GAXiBC,EAAK,EAYxB,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,IA3CA,gBAAAL,EAAC,OAAA,EAAI,WAAWG,EAAG,iCAAiCZ,CAAS,GAAG,cAAYC,EAAQ,aACjF,UAAAM,EAAA,CACH;AA4CN;"}

package/dist/components/rbac/approvalPanelParts.js

@@ -0,0 +1,130 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { Badge as v } from "../Badge.js";
+import { Button as u } from "../Button.js";
+import { Callout as p } from "../Callout.js";
+import { Field as x } from "../Field.js";
+import { Icon as C } from "../Icon.js";
+import { Input as N } from "../Input.js";
+import { useUiStrings as i } from "../../lib/i18n/provider.js";
+const y = {
+  pending: "warning",
+  approved: "success",
+  denied: "danger",
+  expired: "muted",
+  claimed: "info"
+};
+function z({ title: e, state: n, revokedLabel: t }) {
+  const o = i().approval;
+  return /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+    /* @__PURE__ */ r("h2", { className: "text-xs font-semibold tracking-widest text-tertiary uppercase", children: e }),
+    /* @__PURE__ */ r(v, { tone: t === void 0 ? y[n] : "danger", dot: !0, children: t ?? o.state[n] })
+  ] });
+}
+function I({ code: e }) {
+  const n = i().approval;
+  return /* @__PURE__ */ r(p, { tone: "info", title: n.confirmCodeTitle, icon: /* @__PURE__ */ r(C, { name: "shield-check", size: "sm" }), children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ r("span", { className: "font-mono text-3xl font-semibold tracking-[0.25em] break-all text-primary", "data-testid": "confirm-code", children: e }),
+    /* @__PURE__ */ r("span", { children: n.confirmCodeCompare })
+  ] }) });
+}
+function c(e) {
+  return e.replace(/\s+/g, "").toUpperCase();
+}
+function E(e, n) {
+  return c(e) === c(n);
+}
+const T = 4;
+function O({ expected: e, value: n, onValueChange: t }) {
+  const o = i().approval, a = c(e).length, l = c(n).length >= a && !E(n, e);
+  return /* @__PURE__ */ r(
+    x,
+    {
+      label: o.confirmCodeLabel,
+      description: o.confirmCodeEntryHint,
+      error: l ? o.confirmCodeMismatch : void 0,
+      children: /* @__PURE__ */ r(
+        N,
+        {
+          value: n,
+          onChange: (s) => t(s.target.value),
+          maxLength: a + T,
+          autoComplete: "off",
+          autoCapitalize: "characters",
+          spellCheck: !1,
+          className: "font-mono tracking-[0.25em] uppercase",
+          "data-testid": "confirm-code-input"
+        }
+      )
+    }
+  );
+}
+const w = {
+  approved: "success",
+  claimed: "info",
+  denied: "neutral",
+  expired: "warning"
+};
+function g({ state: e, children: n }) {
+  const t = i().approval;
+  return /* @__PURE__ */ r(p, { tone: w[e], title: t.terminalTitle[e], children: n });
+}
+function H() {
+  const e = i().approval, [n, t] = f(null), [o, a] = f(null);
+  async function l(s, h) {
+    t(s), a(null);
+    try {
+      await h();
+    } catch (m) {
+      a({
+        action: s,
+        message: m instanceof Error ? m.message : e.failedMessage[s]
+      });
+    } finally {
+      t(null);
+    }
+  }
+  return { busy: n, error: o, run: l };
+}
+function R({ error: e }) {
+  const n = i().approval;
+  return e === null ? null : /* @__PURE__ */ r(p, { tone: "danger", live: !0, title: n.failedTitle[e.action], children: e.message });
+}
+function U({
+  busy: e,
+  run: n,
+  onApprove: t,
+  onDeny: o,
+  approveDisabled: a
+}) {
+  const l = i().approval;
+  return /* @__PURE__ */ d("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+    /* @__PURE__ */ r(u, { variant: "outline", onClick: () => {
+      n("deny", o);
+    }, disabled: e !== null, loading: e === "deny", children: l.deny }),
+    /* @__PURE__ */ r(u, { onClick: () => {
+      n("approve", t);
+    }, disabled: a || e !== null, loading: e === "approve", children: l.approve })
+  ] });
+}
+function D({ note: e, fallback: n }) {
+  const t = i().approval;
+  return e === void 0 ? /* @__PURE__ */ r(g, { state: "expired", children: n }) : /* @__PURE__ */ r(g, { state: "expired", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ r("span", { className: "font-medium text-primary", children: e.reason }),
+    /* @__PURE__ */ r("span", { children: e.nextStep }),
+    /* @__PURE__ */ r("span", { children: t.expiredNothingGranted })
+  ] }) });
+}
+export {
+  U as ApprovalButtons,
+  R as ApprovalError,
+  z as ApprovalHeader,
+  I as ConfirmCodeCallout,
+  O as ConfirmCodeEntry,
+  D as ExpiredNotice,
+  g as TerminalCallout,
+  E as confirmCodeMatches,
+  c as normalizeConfirmCode,
+  H as useApprovalActions
+};
+//# sourceMappingURL=approvalPanelParts.js.map

package/dist/components/rbac/approvalPanelParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"approvalPanelParts.js","sources":["../../../src/components/rbac/approvalPanelParts.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Callout, type CalloutProps } from \"../Callout\";\nimport { Field } from \"../Field\";\nimport { Icon } from \"../Icon\";\nimport { Input } from \"../Input\";\nimport { useUiStrings } from \"../../lib/i18n\";\n\n/* ----------------------------------------------------------------------------\n   APPROVAL PANEL PARTS (DX-4433)\n\n   THE PIECES EVERY \"A PERSON APPROVES SOMETHING ASKING TO ACT AS THEM\" CARD\n   SHARES. `AccessRequestPanel` (approve a key and pick its role) and\n   `PermissionRequestPanel` (approve extra permissions on a key that already\n   exists) are the same screen with a different decision in the middle: the same\n   header and state badge, the same compare-only confirm code, the same\n   terminal callouts, the same busy / error handling around Approve and Deny.\n   They live here so the two cards cannot drift apart. Not exported from the\n   package: a consumer reaches them through the two panels.\n   ---------------------------------------------------------------------------- */\n\nexport type AccessRequestState = \"pending\" | \"approved\" | \"denied\" | \"expired\" | \"claimed\";\n\n/** Why a request expired and what its requester does next, in the consumer's words; the Expired readout leads with them. */\nexport interface ExpiredNote {\n  /** Why the request is over, e.g. \"The agent's session ended.\". */\n  reason: string;\n  /** What the requester must do to get access, e.g. \"The agent must reconnect and ask again.\". */\n  nextStep: string;\n}\n\nconst STATE_TONE: Record<AccessRequestState, NonNullable<BadgeProps[\"tone\"]>> = {\n  pending: \"warning\",\n  approved: \"success\",\n  denied: \"danger\",\n  expired: \"muted\",\n  claimed: \"info\",\n};\n\nexport function ApprovalHeader({ title, state, revokedLabel }: { title: string; state: AccessRequestState; revokedLabel?: string }) {\n  const strings = useUiStrings().approval;\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-2\">\n      <h2 className=\"text-xs font-semibold tracking-widest text-tertiary uppercase\">{title}</h2>\n      {/* DX-4856: a revoked key outranks the request's own state, which stays `claimed` for good. */}\n      <Badge tone={revokedLabel === undefined ? STATE_TONE[state] : \"danger\"} dot>\n        {revokedLabel ?? strings.state[state]}\n      </Badge>\n    </div>\n  );\n}\n\n/** The code is for comparing, never copying: plain large text, no copy control (see `AccessRequestPanel`). */\nexport function ConfirmCodeCallout({ code }: { code: string }) {\n  const strings = useUiStrings().approval;\n  return (\n    <Callout tone=\"info\" title={strings.confirmCodeTitle} icon={<Icon name=\"shield-check\" size=\"sm\" />}>\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-mono text-3xl font-semibold tracking-[0.25em] break-all text-primary\" data-testid=\"confirm-code\">\n          {code}\n        </span>\n        <span>{strings.confirmCodeCompare}</span>\n      </div>\n    </Callout>\n  );\n}\n\n/** A typed confirm code is compared in upper case with every space removed; dashes are part of the code. */\nexport function normalizeConfirmCode(value: string): string {\n  return value.replace(/\\s+/g, \"\").toUpperCase();\n}\n\n/** True when what was typed is the expected code, in either case and ignoring spaces. */\nexport function confirmCodeMatches(typed: string, expected: string): boolean {\n  return normalizeConfirmCode(typed) === normalizeConfirmCode(expected);\n}\n\n// A paste may carry spaces around the code, so the field takes a few characters more than the code has.\nconst CODE_ENTRY_SLACK = 4;\n\n/**\n * The entry step for a confirm code (DX-4467): the approver types the code the requester shows instead of reading it\n * off this screen, so the code is never rendered here and cannot be copied from the page.\n */\nexport function ConfirmCodeEntry({ expected, value, onValueChange }: { expected: string; value: string; onValueChange: (next: string) => void }) {\n  const strings = useUiStrings().approval;\n  const expectedLength = normalizeConfirmCode(expected).length;\n  const wrong = normalizeConfirmCode(value).length >= expectedLength && !confirmCodeMatches(value, expected);\n  return (\n    <Field\n      label={strings.confirmCodeLabel}\n      description={strings.confirmCodeEntryHint}\n      error={wrong ? strings.confirmCodeMismatch : undefined}\n    >\n      <Input\n        value={value}\n        onChange={(event) => onValueChange(event.target.value)}\n        maxLength={expectedLength + CODE_ENTRY_SLACK}\n        autoComplete=\"off\"\n        autoCapitalize=\"characters\"\n        spellCheck={false}\n        className=\"font-mono tracking-[0.25em] uppercase\"\n        data-testid=\"confirm-code-input\"\n      />\n    </Field>\n  );\n}\n\nconst TERMINAL_TONE: Record<Exclude<AccessRequestState, \"pending\">, NonNullable<CalloutProps[\"tone\"]>> = {\n  approved: \"success\",\n  claimed: \"info\",\n  denied: \"neutral\",\n  expired: \"warning\",\n};\n\n/** The readout for a settled request: the tone and title are shared, the sentence says what it meant for this requester. */\nexport function TerminalCallout({ state, children }: { state: Exclude<AccessRequestState, \"pending\">; children: ReactNode }) {\n  const strings = useUiStrings().approval;\n  return (\n    <Callout tone={TERMINAL_TONE[state]} title={strings.terminalTitle[state]}>\n      {children}\n    </Callout>\n  );\n}\n\ntype ApprovalAction = \"approve\" | \"deny\";\n\n/**\n * Busy / error state around the two decisions. A rejected promise shows its message and re-enables the buttons; a\n * resolved one leaves the panel as it was, because `state` is the consumer's server's answer, never assumed here.\n */\nexport function useApprovalActions() {\n  const strings = useUiStrings().approval;\n  const [busy, setBusy] = useState<ApprovalAction | null>(null);\n  const [error, setError] = useState<{ action: ApprovalAction; message: string } | null>(null);\n\n  async function run(action: ApprovalAction, call: () => Promise<void>) {\n    setBusy(action);\n    setError(null);\n    try {\n      await call();\n    } catch (cause) {\n      setError({\n        action,\n        message: cause instanceof Error ? cause.message : strings.failedMessage[action],\n      });\n    } finally {\n      setBusy(null);\n    }\n  }\n\n  return { busy, error, run };\n}\n\nexport function ApprovalError({ error }: { error: { action: ApprovalAction; message: string } | null }) {\n  const strings = useUiStrings().approval;\n  if (error === null) return null;\n  return (\n    <Callout tone=\"danger\" live title={strings.failedTitle[error.action]}>\n      {error.message}\n    </Callout>\n  );\n}\n\nexport function ApprovalButtons({\n  busy,\n  run,\n  onApprove,\n  onDeny,\n  approveDisabled,\n}: {\n  busy: ApprovalAction | null;\n  run: (action: ApprovalAction, call: () => Promise<void>) => Promise<void>;\n  onApprove: () => Promise<void>;\n  onDeny: () => Promise<void>;\n  /** True when there is nothing valid to approve. Deny is never disabled by this. */\n  approveDisabled: boolean;\n}) {\n  const strings = useUiStrings().approval;\n  return (\n    <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n      <Button variant=\"outline\" onClick={() => void run(\"deny\", onDeny)} disabled={busy !== null} loading={busy === \"deny\"}>\n        {strings.deny}\n      </Button>\n      <Button onClick={() => void run(\"approve\", onApprove)} disabled={approveDisabled || busy !== null} loading={busy === \"approve\"}>\n        {strings.approve}\n      </Button>\n    </div>\n  );\n}\n\n/** The Expired readout: with a note it names the cause and the requester's next step, without one it only says nothing was granted. */\nexport function ExpiredNotice({ note, fallback }: { note: ExpiredNote | undefined; fallback: string }) {\n  const strings = useUiStrings().approval;\n  if (note === undefined) return <TerminalCallout state=\"expired\">{fallback}</TerminalCallout>;\n  return (\n    <TerminalCallout state=\"expired\">\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-medium text-primary\">{note.reason}</span>\n        <span>{note.nextStep}</span>\n        <span>{strings.expiredNothingGranted}</span>\n      </div>\n    </TerminalCallout>\n  );\n}\n"],"names":["STATE_TONE","ApprovalHeader","title","state","revokedLabel","strings","useUiStrings","jsxs","jsx","Badge","ConfirmCodeCallout","code","Callout","Icon","normalizeConfirmCode","value","confirmCodeMatches","typed","expected","CODE_ENTRY_SLACK","ConfirmCodeEntry","onValueChange","expectedLength","wrong","Field","Input","event","TERMINAL_TONE","TerminalCallout","children","useApprovalActions","busy","setBusy","useState","error","setError","run","action","call","cause","ApprovalError","ApprovalButtons","onApprove","onDeny","approveDisabled","Button","ExpiredNotice","note","fallback"],"mappings":"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"}

package/dist/components/rbac/permissionSections.js

@@ -0,0 +1,8 @@
+import { groupInOrder as e } from "../../lib/group-in-order.js";
+function n(r, o) {
+  return e(r, (t) => t.category, o);
+}
+export {
+  n as groupByCategory
+};
+//# sourceMappingURL=permissionSections.js.map

package/dist/components/rbac/permissionSections.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"permissionSections.js","sources":["../../../src/components/rbac/permissionSections.ts"],"sourcesContent":["import { groupInOrder } from \"../../lib/group-in-order\";\nimport type { Permission } from \"./types\";\n\n/* DX-4433: shared by `RolePermissionMatrix` (rows under a category header) and `PermissionRequestPanel` (checkboxes under a\n   category legend), so the grouping rule has exactly one implementation. Not exported from the package. */\n\nexport interface PermissionSection {\n  /** `undefined` when nothing in this matrix carries a `category` — see below. */\n  label: string | undefined;\n  items: Permission[];\n}\n\n/** Buckets permissions by `category` (the grouping rule is `groupInOrder`'s, shared with `ToggleMatrix`). */\nexport function groupByCategory(permissions: Permission[], otherLabel: string): PermissionSection[] {\n  return groupInOrder(permissions, (permission) => permission.category, otherLabel);\n}\n"],"names":["groupByCategory","permissions","otherLabel","groupInOrder","permission"],"mappings":";AAaO,SAASA,EAAgBC,GAA2BC,GAAyC;AAClG,SAAOC,EAAaF,GAAa,CAACG,MAAeA,EAAW,UAAUF,CAAU;AAClF;"}

package/dist/components/rbac/stagedForm.js

@@ -0,0 +1,42 @@
+import { jsxs as g, jsx as u } from "react/jsx-runtime";
+import { useState as c, useCallback as f } from "react";
+import { Button as m } from "../Button.js";
+import { useUiStrings as p } from "../../lib/i18n/provider.js";
+function k(t) {
+  const [a, r] = c(!1), [o, e] = c(!1), [i, s] = c(null), n = f((l) => {
+    l(), e(!1), s(null);
+  }, []), v = f(
+    async (l) => {
+      r(!0), s(null);
+      try {
+        await l(), e(!0);
+      } catch (d) {
+        s(d instanceof Error ? d.message : t);
+      } finally {
+        r(!1);
+      }
+    },
+    [t]
+  );
+  return { saving: a, saved: o, error: i, edit: n, save: v };
+}
+function w({
+  onSave: t,
+  onDiscard: a,
+  canSave: r,
+  canDiscard: o,
+  saving: e,
+  saveLabel: i,
+  discardLabel: s
+}) {
+  const n = p().stagedForm;
+  return /* @__PURE__ */ g("div", { className: "flex flex-wrap gap-2", children: [
+    /* @__PURE__ */ u(m, { onClick: t, disabled: !r, loading: e, children: i ?? n.save }),
+    /* @__PURE__ */ u(m, { variant: "outline", onClick: a, disabled: !o || e, children: s ?? n.discard })
+  ] });
+}
+export {
+  w as StagedFormActions,
+  k as useSaveFlow
+};
+//# sourceMappingURL=stagedForm.js.map

package/dist/components/rbac/stagedForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stagedForm.js","sources":["../../../src/components/rbac/stagedForm.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Button } from \"../Button\";\nimport { useUiStrings } from \"../../lib/i18n\";\n\n/* ============================================================================\n   STAGED FORM (DX-4131)\n\n   What `TeamSettingsForm` and `ProfileForm` share besides the staged image\n   (`useStagedImage`): the save lifecycle and the Save/Discard row. Internal and\n   unexported — one copy, so the two forms cannot drift on when a \"saved\"\n   confirmation shows, what an edit clears, or when Discard is allowed.\n\n   THE EDIT RULE. Every edit, and Discard, goes through `edit`, which retires the\n   last outcome: a stale \"saved\" or error would describe a form that no longer\n   exists (a Discard that left \"saved\" set would flash it back the moment the\n   draft became clean again).\n   ========================================================================= */\n\nexport interface SaveFlow {\n  saving: boolean;\n  /** The last Save resolved and nothing has been edited since. */\n  saved: boolean;\n  error: string | null;\n  /** Run a draft change (an edit, or a Discard) and retire the last outcome. */\n  edit: (change: () => void) => void;\n  /** Run the consumer's `onSave`; a rejection's message (or `failureMessage`) becomes `error`. */\n  save: (run: () => Promise<void>) => Promise<void>;\n}\n\nexport function useSaveFlow(failureMessage: string): SaveFlow {\n  const [saving, setSaving] = useState(false);\n  const [saved, setSaved] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const edit = useCallback((change: () => void) => {\n    change();\n    setSaved(false);\n    setError(null);\n  }, []);\n\n  const save = useCallback(\n    async (run: () => Promise<void>) => {\n      setSaving(true);\n      setError(null);\n      try {\n        await run();\n        setSaved(true);\n      } catch (cause) {\n        setError(cause instanceof Error ? cause.message : failureMessage);\n      } finally {\n        setSaving(false);\n      }\n    },\n    [failureMessage],\n  );\n\n  return { saving, saved, error, edit, save };\n}\n\nexport interface StagedFormActionsProps {\n  onSave: () => void;\n  onDiscard: () => void;\n  /** The draft is valid, changed, and nothing is in flight. */\n  canSave: boolean;\n  /** The draft differs from what is saved in ANY way, including whitespace Save would trim away. */\n  canDiscard: boolean;\n  saving: boolean;\n  /** The Save button's text; omit for the built-in one. */\n  saveLabel?: string;\n  /** The Discard button's text; omit for the built-in one. */\n  discardLabel?: string;\n}\n\nexport function StagedFormActions({\n  onSave,\n  onDiscard,\n  canSave,\n  canDiscard,\n  saving,\n  saveLabel,\n  discardLabel,\n}: StagedFormActionsProps) {\n  const strings = useUiStrings().stagedForm;\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button onClick={onSave} disabled={!canSave} loading={saving}>\n        {saveLabel ?? strings.save}\n      </Button>\n      <Button variant=\"outline\" onClick={onDiscard} disabled={!canDiscard || saving}>\n        {discardLabel ?? strings.discard}\n      </Button>\n    </div>\n  );\n}\n"],"names":["useSaveFlow","failureMessage","saving","setSaving","useState","saved","setSaved","error","setError","edit","useCallback","change","save","run","cause","StagedFormActions","onSave","onDiscard","canSave","canDiscard","saveLabel","discardLabel","strings","useUiStrings","jsxs","jsx","Button"],"mappings":";;;;AA6BO,SAASA,EAAYC,GAAkC;AAC5D,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAOC,CAAQ,IAAIF,EAAS,EAAK,GAClC,CAACG,GAAOC,CAAQ,IAAIJ,EAAwB,IAAI,GAEhDK,IAAOC,EAAY,CAACC,MAAuB;AAC/C,IAAAA,EAAA,GACAL,EAAS,EAAK,GACdE,EAAS,IAAI;AAAA,EACf,GAAG,CAAA,CAAE,GAECI,IAAOF;AAAA,IACX,OAAOG,MAA6B;AAClC,MAAAV,EAAU,EAAI,GACdK,EAAS,IAAI;AACb,UAAI;AACF,cAAMK,EAAA,GACNP,EAAS,EAAI;AAAA,MACf,SAASQ,GAAO;AACd,QAAAN,EAASM,aAAiB,QAAQA,EAAM,UAAUb,CAAc;AAAA,MAClE,UAAA;AACE,QAAAE,EAAU,EAAK;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAACF,CAAc;AAAA,EAAA;AAGjB,SAAO,EAAE,QAAAC,GAAQ,OAAAG,GAAO,OAAAE,GAAO,MAAAE,GAAM,MAAAG,EAAA;AACvC;AAgBO,SAASG,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAjB;AAAA,EACA,WAAAkB;AAAA,EACA,cAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC,IAAe;AAC/B,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,SAASV,GAAQ,UAAU,CAACE,GAAS,SAAShB,GACnD,UAAAkB,KAAaE,EAAQ,KAAA,CACxB;AAAA,IACA,gBAAAG,EAACC,GAAA,EAAO,SAAQ,WAAU,SAAST,GAAW,UAAU,CAACE,KAAcjB,GACpE,UAAAmB,KAAgBC,EAAQ,QAAA,CAC3B;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/rbac/useStagedImage.js

@@ -0,0 +1,21 @@
+import { useState as o, useCallback as s } from "react";
+function y(c, n) {
+  const l = c ?? null, [t, a] = o(null), [d, u] = o(!1);
+  t && t.url === l && a(null);
+  const r = t ? t.url : l, i = s((e) => a({ url: e }), []), g = s(() => a(null), []), f = s(
+    async (e) => {
+      u(!0);
+      try {
+        return await n(e);
+      } finally {
+        u(!1);
+      }
+    },
+    [n]
+  );
+  return { value: r, dirty: r !== l, uploading: d, stage: i, discard: g, upload: f };
+}
+export {
+  y as useStagedImage
+};
+//# sourceMappingURL=useStagedImage.js.map

package/dist/components/rbac/useStagedImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStagedImage.js","sources":["../../../src/components/rbac/useStagedImage.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\n/* ============================================================================\n   USE STAGED IMAGE (DX-4131)\n\n   The one piece of state `TeamSettingsForm`'s logo and `ProfileForm`'s avatar\n   share: an image that is PICKED and PREVIEWED immediately but only PERSISTED\n   when the consumer's Save runs. Internal to the rbac forms — deliberately not\n   exported from the package, so the public surface stays the two forms and the\n   `logoUrl`/`avatarUrl` contract they document.\n\n   THE CONTRACT THIS HOOK ENCODES, which both forms turn into their `onSave`\n   input. `dirty` is true exactly while the staged value differs from the saved\n   one; the form then puts the key in its `onSave` input (a string sets the\n   image, `null` removes it), and while `dirty` is false it leaves the key OUT\n   ENTIRELY — an omitted key means \"keep what is stored\", so a rename-only Save\n   can never wipe an image. That is the same three-state rule a `PATCH` body\n   follows (omitted keeps, `null` clears, string sets).\n\n   STAGED OVER SAVED, NOT A COPY OF IT. Only an explicit stage/remove writes\n   `staged`; until then the value IS the `saved` prop, so a background refetch\n   of the saved image shows through instead of being masked by a stale copy.\n   The staged value is dropped the moment it equals the saved one — which is\n   exactly what a successful Save does when the parent passes the new URL back —\n   so a LATER change to the saved image shows through too, instead of the form\n   holding the old staged URL and sending it back on the next Save. (So the\n   `saved` prop is expected to change only once a Save has succeeded; a parent\n   that updates it optimistically and rolls back on failure loses the staged\n   image with the rollback.)\n\n   `upload` wraps the consumer's `onUpload` only to expose `uploading`, so a\n   form can hold Save back while a pick is in flight — otherwise a click during\n   the upload would save without the image that is about to arrive. The URL it\n   resolves with is RETURNED (for `ImageUploadField` to hand to `onChange`),\n   never staged here: staging happens in the one `stage` call the field's\n   `onChange` makes.\n   ========================================================================= */\n\nexport interface StagedImage {\n  /** What to show: the staged URL (or `null` for a staged removal), else the saved one. */\n  value: string | null;\n  /** The staged value differs from the saved one — the form must send it on Save. */\n  dirty: boolean;\n  /** A pick is mid-upload. */\n  uploading: boolean;\n  /** Stage a URL, or `null` to stage a removal. */\n  stage: (url: string | null) => void;\n  /** Drop the staged value and go back to the saved one. */\n  discard: () => void;\n  /** Pass to `ImageUploadField.onUpload`. */\n  upload: (file: File) => Promise<string>;\n}\n\nexport function useStagedImage(\n  saved: string | null | undefined,\n  onUpload: (file: File) => Promise<string>,\n): StagedImage {\n  const savedUrl = saved ?? null;\n  // `{ url }` rather than `string | null | undefined`: a staged `null` (remove) must be\n  // distinguishable from \"nothing staged\".\n  const [staged, setStaged] = useState<{ url: string | null } | null>(null);\n  const [uploading, setUploading] = useState(false);\n\n  // Adjusting state during render (the React-sanctioned way to derive from props): the\n  // staged value has been saved (or was staged back to the saved one), so stop holding it.\n  if (staged && staged.url === savedUrl) setStaged(null);\n\n  const value = staged ? staged.url : savedUrl;\n\n  const stage = useCallback((url: string | null) => setStaged({ url }), []);\n  const discard = useCallback(() => setStaged(null), []);\n\n  const upload = useCallback(\n    async (file: File) => {\n      setUploading(true);\n      try {\n        return await onUpload(file);\n      } finally {\n        setUploading(false);\n      }\n    },\n    [onUpload],\n  );\n\n  return { value, dirty: value !== savedUrl, uploading, stage, discard, upload };\n}\n\n"],"names":["useStagedImage","saved","onUpload","savedUrl","staged","setStaged","useState","uploading","setUploading","value","stage","useCallback","url","discard","upload","file"],"mappings":";AAqDO,SAASA,EACdC,GACAC,GACa;AACb,QAAMC,IAAWF,KAAS,MAGpB,CAACG,GAAQC,CAAS,IAAIC,EAAwC,IAAI,GAClE,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK;AAIhD,EAAIF,KAAUA,EAAO,QAAQD,OAAoB,IAAI;AAErD,QAAMM,IAAQL,IAASA,EAAO,MAAMD,GAE9BO,IAAQC,EAAY,CAACC,MAAuBP,EAAU,EAAE,KAAAO,EAAA,CAAK,GAAG,EAAE,GAClEC,IAAUF,EAAY,MAAMN,EAAU,IAAI,GAAG,CAAA,CAAE,GAE/CS,IAASH;AAAA,IACb,OAAOI,MAAe;AACpB,MAAAP,EAAa,EAAI;AACjB,UAAI;AACF,eAAO,MAAMN,EAASa,CAAI;AAAA,MAC5B,UAAA;AACE,QAAAP,EAAa,EAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAACN,CAAQ;AAAA,EAAA;AAGX,SAAO,EAAE,OAAAO,GAAO,OAAOA,MAAUN,GAAU,WAAAI,GAAW,OAAAG,GAAO,SAAAG,GAAS,QAAAC,EAAA;AACxE;"}

package/dist/components/roadmap/PhaseManager.js

@@ -0,0 +1,48 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Badge as u } from "../Badge.js";
+import { OrderedEntityManager as b } from "../OrderedEntityManager.js";
+import { useUiStrings as h } from "../../lib/i18n/provider.js";
+import { useNumberFormat as M } from "../../lib/i18n/number-format.js";
+function F({
+  phases: s,
+  roadmapItems: d,
+  onCreate: m,
+  onRename: c,
+  onReorder: l,
+  onDelete: p,
+  className: g
+}) {
+  const e = h().phaseManager, r = M(), o = /* @__PURE__ */ new Map();
+  for (const t of d)
+    o.set(t.phaseId, (o.get(t.phaseId) ?? 0) + 1);
+  function f(t) {
+    const n = o.get(t.id) ?? 0, a = n > 0;
+    return {
+      badge: a && /* @__PURE__ */ i(u, { size: "sm", tone: "warning", className: "shrink-0", children: e.inUse(n, r(n)) }),
+      disabledReason: a ? e.deleteBlocked(n, r(n), t.name) : void 0
+    };
+  }
+  return /* @__PURE__ */ i(
+    b,
+    {
+      items: s,
+      title: e.title,
+      description: e.description,
+      emptyMessage: e.empty,
+      addFieldLabel: e.addFieldLabel,
+      addPlaceholder: e.addPlaceholder,
+      containerId: "phases",
+      containerLabel: e.containerLabel,
+      onCreate: m,
+      onRename: c,
+      onReorder: l,
+      onDelete: p,
+      rowStatus: f,
+      className: g
+    }
+  );
+}
+export {
+  F as PhaseManager
+};
+//# sourceMappingURL=PhaseManager.js.map

package/dist/components/roadmap/PhaseManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhaseManager.js","sources":["../../../src/components/roadmap/PhaseManager.tsx"],"sourcesContent":["import { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { Badge } from \"../Badge\";\nimport { OrderedEntityManager, type OrderedEntityRowStatus } from \"../OrderedEntityManager\";\nimport type { Phase, RoadmapItem } from \"./types\";\n\n/* ============================================================================\n   PHASE MANAGER — dev-only CRUD surface for the `Phase` list.\n\n   Mounted only inside `UseCaseLedgerPage`, never `RoadmapPage` — Phase is an\n   internal planning concern (which bucket an item sorts into), not something\n   a prospect looking at the public roadmap needs to reorder.\n\n   CALLBACKS, NOT STORE AWARENESS — the exact pattern `AccountMenu` already\n   uses (see that file's own banner). This component reads `phases` and\n   `roadmapItems` as plain props and fires `onCreate` / `onRename` /\n   `onReorder` / `onDelete`; it has no idea a `createSimStore` exists on the\n   other side of those calls, so a consuming app can wire the same four\n   callbacks straight to a real API with zero changes here.\n\n   THE STATE MACHINE AND ROW CHROME LIVE IN `OrderedEntityManager` (DX-3254) —\n   this file's only job is `rowStatus`, below, which is the delete guard.\n\n   THE DELETE GUARD IS THE POINT OF THIS FILE. A `RoadmapItem.phaseId` is\n   required — there is no \"no phase\" state (`types.ts`) — so deleting a Phase\n   still referenced by an item would either orphan that item's `phaseId` or\n   force a silent cascade delete, and neither is a decision this component is\n   allowed to make quietly. Blocking is paired with a Badge that STATES the\n   count, always rendered next to the disabled action — never a disabled\n   button standing alone with no visible reason.\n\n   THE BADGE WAS NOT ENOUGH, and it is worth recording why, because the first\n   version of this file believed it was. A Badge reading \"In use by 11 items\"\n   sits BESIDE the control; it is a fact about the row, and a reader has to\n   infer that it is also the reason the button beside it will not respond.\n   Meanwhile the button itself was natively `disabled`, which under this\n   library's `disabled:pointer-events-none` removes it from hit-testing\n   entirely — so the one gesture anybody makes when a control ignores them\n   (point at it and wait) produced nothing at all. The guard was doing exactly\n   its job and still read as a broken button.\n\n   The refusal now lives ON the control, via `IconButton`'s `disabledReason` —\n   which is the only way to turn one off, so it cannot be dropped. The Badge\n   stays: it is the at-a-glance form, readable without pointing at anything.\n   ========================================================================= */\n\nexport interface PhaseManagerProps {\n  phases: Phase[];\n  /** Read-only — used only to compute the delete guard below. */\n  roadmapItems: RoadmapItem[];\n  /** `order` is pre-computed by this component (next after the current max)\n      so the caller only has to assign an id and persist. */\n  onCreate: (phase: { name: string; order: number }) => void;\n  onRename: (id: string, name: string) => void;\n  /** The full phase list, reordered and renumbered (`order` === new index) —\n      the caller persists each row's new `order`, e.g. one `update` per id. */\n  onReorder: (phases: Phase[]) => void;\n  onDelete: (id: string) => void;\n  className?: string;\n}\n\nexport function PhaseManager({\n  phases,\n  roadmapItems,\n  onCreate,\n  onRename,\n  onReorder,\n  onDelete,\n  className,\n}: PhaseManagerProps) {\n  const strings = useUiStrings().phaseManager;\n  const fmt = useNumberFormat();\n  /* Counted once per render rather than re-scanning `roadmapItems` per row —\n     the same reasoning `groupByGoalRef` documents in the sibling board/ledger\n     files, applied to a smaller map. */\n  const inUseCount = new Map<string, number>();\n  for (const item of roadmapItems) {\n    inUseCount.set(item.phaseId, (inUseCount.get(item.phaseId) ?? 0) + 1);\n  }\n\n  function rowStatus(phase: Phase): OrderedEntityRowStatus {\n    const inUse = inUseCount.get(phase.id) ?? 0;\n    const blocked = inUse > 0;\n    return {\n      badge: blocked && (\n        <Badge size=\"sm\" tone=\"warning\" className=\"shrink-0\">\n          {strings.inUse(inUse, fmt(inUse))}\n        </Badge>\n      ),\n      disabledReason: blocked\n        ? strings.deleteBlocked(inUse, fmt(inUse), phase.name)\n        : undefined,\n    };\n  }\n\n  return (\n    <OrderedEntityManager\n      items={phases}\n      title={strings.title}\n      description={strings.description}\n      emptyMessage={strings.empty}\n      addFieldLabel={strings.addFieldLabel}\n      addPlaceholder={strings.addPlaceholder}\n      containerId=\"phases\"\n      containerLabel={strings.containerLabel}\n      onCreate={onCreate}\n      onRename={onRename}\n      onReorder={onReorder}\n      onDelete={onDelete}\n      rowStatus={rowStatus}\n      className={className}\n    />\n  );\n}\n"],"names":["PhaseManager","phases","roadmapItems","onCreate","onRename","onReorder","onDelete","className","strings","useUiStrings","fmt","useNumberFormat","inUseCount","item","rowStatus","phase","inUse","blocked","jsx","Badge","OrderedEntityManager"],"mappings":";;;;;AA4DO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAAUC,IAAe,cACzBC,IAAMC,EAAA,GAINC,wBAAiB,IAAA;AACvB,aAAWC,KAAQX;AACjB,IAAAU,EAAW,IAAIC,EAAK,UAAUD,EAAW,IAAIC,EAAK,OAAO,KAAK,KAAK,CAAC;AAGtE,WAASC,EAAUC,GAAsC;AACvD,UAAMC,IAAQJ,EAAW,IAAIG,EAAM,EAAE,KAAK,GACpCE,IAAUD,IAAQ;AACxB,WAAO;AAAA,MACL,OAAOC,KACL,gBAAAC,EAACC,GAAA,EAAM,MAAK,MAAK,MAAK,WAAU,WAAU,YACvC,YAAQ,MAAMH,GAAON,EAAIM,CAAK,CAAC,GAClC;AAAA,MAEF,gBAAgBC,IACZT,EAAQ,cAAcQ,GAAON,EAAIM,CAAK,GAAGD,EAAM,IAAI,IACnD;AAAA,IAAA;AAAA,EAER;AAEA,SACE,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAOnB;AAAA,MACP,OAAOO,EAAQ;AAAA,MACf,aAAaA,EAAQ;AAAA,MACrB,cAAcA,EAAQ;AAAA,MACtB,eAAeA,EAAQ;AAAA,MACvB,gBAAgBA,EAAQ;AAAA,MACxB,aAAY;AAAA,MACZ,gBAAgBA,EAAQ;AAAA,MACxB,UAAAL;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAQ;AAAA,MACA,WAAAP;AAAA,IAAA;AAAA,EAAA;AAGN;"}