@50arms/ui 0.0.0-stage → 35.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RBACProvider.js","sources":["../../../src/components/rbac/RBACProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport type { Permission, Role, Team, TeamMembership, User } from \"./types\";\n\n/* ============================================================================\n   RBAC PROVIDER\n\n   This is the ONE place in the library that turns a consumer's roles,\n   permissions, memberships and team into an answer to \"what can the current\n   view do?\" — everything downstream (`AccountMenu`, `DevToolsPopover`,\n   `RolePermissionMatrix`, the two pages) reads the derived shape below and\n   never re-derives it, so there is exactly one place a future change to the\n   derivation logic has to happen.\n\n   THE ROLE THE LIBRARY REFUSES TO PLAY: it never knows what a role IS. It\n   compares `Role.id` values, unions `Role.permissionKeys` into a `Set`, and\n   looks up a `Permission.label` to show a human a sentence — the same\n   arm's-length relationship `DataTable` has with the rows a consumer hands it.\n   A component here that special-cased a role by name would be exactly the\n   defect this file exists to prevent.\n\n   IMPERSONATION IS A ROLE SWAP, NOT A USER SWAP. `viewingAsRoleId` never\n   changes `actualUser` — the type contract has no notion of \"become a\n   different person,\" only \"see the app as a different role would.\" That is\n   why `actualUser` is a fixed field on the hook result and every other field\n   that varies with impersonation is named `effective*`.\n   ========================================================================= */\n\nexport interface RBACProviderProps {\n  currentUser: User;\n  roles: Role[];\n  permissions: Permission[];\n  teams: Team[];\n  /** All memberships for `currentUser`, across every team — not just the current one. */\n  memberships: TeamMembership[];\n  currentTeamId: string;\n  /**\n   * Decides who may open the Dev Tools \"view as\" escape hatch.\n   *\n   * Deliberately a predicate over the consumer's OWN data (`user`, `roles`,\n   * `memberships`) rather than a boolean prop or a hardcoded role check. The\n   * library has no idea what \"admin enough to use dev tools\" means for any\n   * given consumer — one app might key it off a role id, another off a team\n   * membership count, another off a flag on `User` this contract doesn't even\n   * define. Only the consumer's own data model can answer that, so the\n   * decision is handed back to them wholesale.\n   */\n  canAccessDevTools: (user: User, roles: Role[], memberships: TeamMembership[]) => boolean;\n  children: ReactNode;\n}\n\nexport interface RBACHookResult {\n  actualUser: User;\n  currentTeam: Team | undefined;\n  /** The role backing `actualUser`'s own membership in `currentTeamId` — never affected by impersonation. */\n  actualRole: Role | undefined;\n  /** `null` when not impersonating. */\n  viewingAsRoleId: string | null;\n  setViewingAsRoleId: (id: string | null) => void;\n  /** `actualRole`, unless impersonating — then the impersonated role. */\n  effectiveRole: Role | undefined;\n  effectivePermissionKeys: Set<string>;\n  /** `permissions`, filtered to the ones `effectiveRole` actually grants —\n   *  every surface that lists \"what can this role do\" (`AccountMenu`,\n   *  `ProfilePage`) reads this instead of re-deriving the same filter\n   *  (DX-3254: the two used to keep independent copies of it). */\n  grantedPermissions: Permission[];\n  hasPermission: (key: string) => boolean;\n  /**\n   * Whether the REAL logged-in user may open Dev Tools.\n   *\n   * See the block comment above `evaluateCanAccessDevTools` below for why this\n   * is computed from `actualUser`/`roles`/`memberships` and can NEVER be\n   * re-derived from `effectiveRole` / `viewingAsRoleId` — that is the entire\n   * point of this field existing on the hook at all.\n   */\n  canAccessDevTools: boolean;\n  isImpersonating: boolean;\n  roles: Role[];\n  permissions: Permission[];\n  teams: Team[];\n}\n\nconst RBACContext = createContext<RBACHookResult | null>(null);\n\nexport function RBACProvider({\n  currentUser,\n  roles,\n  permissions,\n  teams,\n  memberships,\n  currentTeamId,\n  canAccessDevTools,\n  children,\n}: RBACProviderProps) {\n  /* Impersonation is view-local UI state, not something a consumer persists —\n     it lives here, in the provider, and resets to \"not impersonating\" on\n     every fresh mount (a reload of the app is the same as clicking \"Reset to\n     actual\"). Session-persisting it would mean a support engineer who forgot\n     to reset before closing their laptop comes back tomorrow still wearing\n     someone else's permissions, which is a worse failure mode than having to\n     re-pick the role once. */\n  const [viewingAsRoleId, setViewingAsRoleId] = useState<string | null>(null);\n\n  const currentTeam = useMemo(\n    () => teams.find((team) => team.id === currentTeamId),\n    [teams, currentTeamId],\n  );\n\n  const actualRole = useMemo(() => {\n    /* Both conditions are checked even though the prop doc promises\n       `memberships` is already scoped to `currentUser` — a provider that is\n       ever handed an unfiltered list should still resolve the CORRECT\n       membership rather than silently pick up a different user's row that\n       happens to share a team id. */\n    const membership = memberships.find(\n      (candidate) => candidate.userId === currentUser.id && candidate.teamId === currentTeamId,\n    );\n    if (!membership) return undefined;\n    return roles.find((role) => role.id === membership.roleId);\n  }, [memberships, roles, currentUser.id, currentTeamId]);\n\n  const effectiveRole = useMemo(\n    () => (viewingAsRoleId ? roles.find((role) => role.id === viewingAsRoleId) : actualRole),\n    [viewingAsRoleId, roles, actualRole],\n  );\n\n  const effectivePermissionKeys = useMemo(\n    () => new Set(effectiveRole?.permissionKeys ?? []),\n    [effectiveRole],\n  );\n\n  const hasPermission = useCallback(\n    (key: string) => effectivePermissionKeys.has(key),\n    [effectivePermissionKeys],\n  );\n\n  const grantedPermissions = useMemo(\n    () => permissions.filter((permission) => effectivePermissionKeys.has(permission.key)),\n    [permissions, effectivePermissionKeys],\n  );\n\n  /* ---------------------------------------------------------------------\n     THE GUARANTEE THIS WHOLE FILE EXISTS FOR.\n\n     `canAccessDevTools` is evaluated against `currentUser` / `roles` /\n     `memberships` — the PROVIDER'S OWN PROPS — and nothing derived from\n     `viewingAsRoleId` or `effectiveRole` appears anywhere in this\n     dependency list. That omission is deliberate, not an oversight: Dev\n     Tools is the control that UNDOES impersonation, so if its own\n     visibility were computed from the impersonated view, impersonating any\n     role the predicate rejects would hide the only door back out. A support\n     engineer who wanted to see the app as a locked-down role would find\n     themselves stuck in it, and the one truth Dev Tools cannot recover from\n     losing is a way to reset itself.\n\n     Read literally: this line answers \"can the REAL PERSON currently at\n     the keyboard use Dev Tools,\" and impersonation never gets a vote.\n     ------------------------------------------------------------------ */\n  const canAccessDevToolsValue = useMemo(\n    () => canAccessDevTools(currentUser, roles, memberships),\n    [canAccessDevTools, currentUser, roles, memberships],\n  );\n\n  const value = useMemo<RBACHookResult>(\n    () => ({\n      actualUser: currentUser,\n      currentTeam,\n      actualRole,\n      viewingAsRoleId,\n      setViewingAsRoleId,\n      effectiveRole,\n      effectivePermissionKeys,\n      grantedPermissions,\n      hasPermission,\n      canAccessDevTools: canAccessDevToolsValue,\n      isImpersonating: viewingAsRoleId !== null,\n      roles,\n      permissions,\n      teams,\n    }),\n    [\n      currentUser,\n      currentTeam,\n      actualRole,\n      viewingAsRoleId,\n      effectiveRole,\n      effectivePermissionKeys,\n      grantedPermissions,\n      hasPermission,\n      canAccessDevToolsValue,\n      roles,\n      permissions,\n      teams,\n    ],\n  );\n\n  return <RBACContext.Provider value={value}>{children}</RBACContext.Provider>;\n}\n\n/**\n * Reads the RBAC context.\n *\n * Throws rather than returning `undefined` — the same shape as\n * `useDragDrop` / `useDragDropContainer` (`drag-drop/context.ts`) and every\n * other multi-part context in this library. A component that silently\n * received `undefined` here would fail wherever it FIRST tries to read a\n * field off the result, several lines and possibly several components away\n * from the actual mistake (forgetting the `<RBACProvider>` wrapper) — a\n * blank permissions list is a much harder bug to trace back than a thrown\n * error naming the missing provider.\n */\nexport function useRBAC(): RBACHookResult {\n  const value = useContext(RBACContext);\n  if (!value) {\n    throw new Error(\"useRBAC must be used within an <RBACProvider>.\");\n  }\n  return value;\n}\n"],"names":["RBACContext","createContext","RBACProvider","currentUser","roles","permissions","teams","memberships","currentTeamId","canAccessDevTools","children","viewingAsRoleId","setViewingAsRoleId","useState","currentTeam","useMemo","team","actualRole","membership","candidate","role","effectiveRole","effectivePermissionKeys","hasPermission","useCallback","key","grantedPermissions","permission","canAccessDevToolsValue","value","jsx","useRBAC","useContext"],"mappings":";;AAyFA,MAAMA,IAAcC,EAAqC,IAAI;AAEtD,SAASC,EAAa;AAAA,EAC3B,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AACF,GAAsB;AAQpB,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAwB,IAAI,GAEpEC,IAAcC;AAAA,IAClB,MAAMT,EAAM,KAAK,CAACU,MAASA,EAAK,OAAOR,CAAa;AAAA,IACpD,CAACF,GAAOE,CAAa;AAAA,EAAA,GAGjBS,IAAaF,EAAQ,MAAM;AAM/B,UAAMG,IAAaX,EAAY;AAAA,MAC7B,CAACY,MAAcA,EAAU,WAAWhB,EAAY,MAAMgB,EAAU,WAAWX;AAAA,IAAA;AAE7E,QAAKU;AACL,aAAOd,EAAM,KAAK,CAACgB,MAASA,EAAK,OAAOF,EAAW,MAAM;AAAA,EAC3D,GAAG,CAACX,GAAaH,GAAOD,EAAY,IAAIK,CAAa,CAAC,GAEhDa,IAAgBN;AAAA,IACpB,MAAOJ,IAAkBP,EAAM,KAAK,CAACgB,MAASA,EAAK,OAAOT,CAAe,IAAIM;AAAA,IAC7E,CAACN,GAAiBP,GAAOa,CAAU;AAAA,EAAA,GAG/BK,IAA0BP;AAAA,IAC9B,MAAM,IAAI,IAAIM,GAAe,kBAAkB,CAAA,CAAE;AAAA,IACjD,CAACA,CAAa;AAAA,EAAA,GAGVE,IAAgBC;AAAA,IACpB,CAACC,MAAgBH,EAAwB,IAAIG,CAAG;AAAA,IAChD,CAACH,CAAuB;AAAA,EAAA,GAGpBI,IAAqBX;AAAA,IACzB,MAAMV,EAAY,OAAO,CAACsB,MAAeL,EAAwB,IAAIK,EAAW,GAAG,CAAC;AAAA,IACpF,CAACtB,GAAaiB,CAAuB;AAAA,EAAA,GAoBjCM,IAAyBb;AAAA,IAC7B,MAAMN,EAAkBN,GAAaC,GAAOG,CAAW;AAAA,IACvD,CAACE,GAAmBN,GAAaC,GAAOG,CAAW;AAAA,EAAA,GAG/CsB,IAAQd;AAAA,IACZ,OAAO;AAAA,MACL,YAAYZ;AAAA,MACZ,aAAAW;AAAA,MACA,YAAAG;AAAA,MACA,iBAAAN;AAAA,MACA,oBAAAC;AAAA,MACA,eAAAS;AAAA,MACA,yBAAAC;AAAA,MACA,oBAAAI;AAAA,MACA,eAAAH;AAAA,MACA,mBAAmBK;AAAA,MACnB,iBAAiBjB,MAAoB;AAAA,MACrC,OAAAP;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,IAAA;AAAA,IAEF;AAAA,MACEH;AAAA,MACAW;AAAA,MACAG;AAAA,MACAN;AAAA,MACAU;AAAA,MACAC;AAAA,MACAI;AAAA,MACAH;AAAA,MACAK;AAAA,MACAxB;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACF;AAGF,SAAO,gBAAAwB,EAAC9B,EAAY,UAAZ,EAAqB,OAAA6B,GAAe,UAAAnB,EAAA,CAAS;AACvD;AAcO,SAASqB,IAA0B;AACxC,QAAMF,IAAQG,EAAWhC,CAAW;AACpC,MAAI,CAAC6B;AACH,UAAM,IAAI,MAAM,gDAAgD;AAElE,SAAOA;AACT;"}

package/dist/components/rbac/RoleEditorDialog.js

@@ -0,0 +1,90 @@
+import { jsx as t, jsxs as d, Fragment as F } from "react/jsx-runtime";
+import { useState as u, useEffect as N } from "react";
+import { Button as D } from "../Button.js";
+import { Dialog as T } from "../Dialog.js";
+import { Field as m } from "../Field.js";
+import { Input as j, Textarea as k } from "../Input.js";
+import { Select as L, SelectItem as S } from "../Select.js";
+import { useUiStrings as R } from "../../lib/i18n/provider.js";
+const c = "__none__";
+function y({
+  mode: l,
+  open: o,
+  onOpenChange: p,
+  cloneFromRoles: a,
+  initialLabel: h = "",
+  initialDescription: f = "",
+  loading: i = !1,
+  onSubmit: I,
+  className: _
+}) {
+  const e = R().roleEditorDialog, [n, b] = u(h), [v, g] = u(f), [s, x] = u(c);
+  N(() => {
+    o && (b(h), g(f), x(c));
+  }, [o]);
+  const C = n.trim().length > 0 && !i, E = () => {
+    C && I({
+      label: n.trim(),
+      description: v.trim(),
+      cloneFromRoleId: l === "create" && s !== c ? s : void 0
+    });
+  };
+  return /* @__PURE__ */ t(
+    T,
+    {
+      open: o,
+      onOpenChange: p,
+      title: l === "create" ? e.createTitle : e.editTitle,
+      description: l === "create" ? e.createDescription : e.editDescription,
+      className: _,
+      actions: /* @__PURE__ */ d(F, { children: [
+        /* @__PURE__ */ t(D, { variant: "outline", onClick: () => p(!1), disabled: i, children: e.cancel }),
+        /* @__PURE__ */ t(D, { onClick: E, disabled: !C, loading: i, children: l === "create" ? e.create : e.save })
+      ] }),
+      children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ t(m, { label: e.label, children: /* @__PURE__ */ t(
+          j,
+          {
+            value: n,
+            onChange: (r) => b(r.target.value),
+            placeholder: e.labelPlaceholder,
+            disabled: i,
+            autoFocus: !0
+          }
+        ) }),
+        /* @__PURE__ */ t(m, { label: e.description, description: e.descriptionHint, children: /* @__PURE__ */ t(
+          k,
+          {
+            value: v,
+            onChange: (r) => g(r.target.value),
+            rows: 3,
+            disabled: i
+          }
+        ) }),
+        l === "create" && a && a.length > 0 && /* @__PURE__ */ t(
+          m,
+          {
+            label: e.cloneLabel,
+            description: e.cloneDescription,
+            children: /* @__PURE__ */ d(
+              L,
+              {
+                value: s,
+                onValueChange: (r) => x(r ?? c),
+                disabled: i,
+                children: [
+                  /* @__PURE__ */ t(S, { value: c, children: e.cloneNone }),
+                  a.map((r) => /* @__PURE__ */ t(S, { value: r.id, children: r.label }, r.id))
+                ]
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  y as RoleEditorDialog
+};
+//# sourceMappingURL=RoleEditorDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoleEditorDialog.js","sources":["../../../src/components/rbac/RoleEditorDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../Button\";\nimport { Dialog } from \"../Dialog\";\nimport { Field } from \"../Field\";\nimport { Input, Textarea } from \"../Input\";\nimport { Select, SelectItem } from \"../Select\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { Role } from \"./types\";\n\n/* ============================================================================\n   ROLE EDITOR DIALOG\n\n   One dialog, two modes. CREATE names a brand-new custom role and, optionally,\n   seeds its permission set from an existing role (\"clone from\") so an operator\n   never has to rebuild a near-duplicate permission set one checkbox at a time\n   in the matrix afterward. EDIT renames/re-describes an existing role — its\n   PERMISSION set is not edited here at all; that stays the matrix's job\n   (`RolePermissionMatrix`'s `editable`/`onChange`), so this dialog never\n   duplicates that surface.\n\n   PRESENTATIONAL ONLY, same relationship every other `rbac/` component has\n   with its data (`types.ts`'s own header): `onSubmit` hands back plain field\n   values, and the consumer decides what \"create\" or \"rename\" means against\n   its own API. Local `useState` only, reset whenever `open` flips true — the\n   same \"no persistence layer\" contract `ProfilePage`'s own header describes.\n   ========================================================================= */\n\nexport interface RoleEditorDialogSubmitInput {\n  label: string;\n  description: string;\n  /** Only ever sent from CREATE mode — see this file's own header. `undefined` when no clone-from role was picked. */\n  cloneFromRoleId?: string;\n}\n\nexport interface RoleEditorDialogProps {\n  mode: \"create\" | \"edit\";\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /**\n   * CREATE mode only — the roles offered as \"clone permissions from\" (a\n   * consumer typically hands every role the matrix already shows, owner\n   * included: cloning owner's COMPUTED set is a legitimate way to seed a\n   * near-owner role). Omitted or empty simply hides the field — a consumer\n   * with nothing to clone from does not owe this dialog an empty array.\n   */\n  cloneFromRoles?: Role[];\n  /** EDIT mode — the role's current values, so the fields open pre-filled rather than blank. */\n  initialLabel?: string;\n  initialDescription?: string;\n  /** Disables the form and shows a busy submit button while a save is in flight. */\n  loading?: boolean;\n  onSubmit: (input: RoleEditorDialogSubmitInput) => void;\n  className?: string;\n}\n\n// I18N-ALLOW: sentinel select value meaning no role was chosen to clone\nconst NO_CLONE = \"__none__\";\n\nexport function RoleEditorDialog({\n  mode,\n  open,\n  onOpenChange,\n  cloneFromRoles,\n  initialLabel = \"\",\n  initialDescription = \"\",\n  loading = false,\n  onSubmit,\n  className,\n}: RoleEditorDialogProps) {\n  const strings = useUiStrings().roleEditorDialog;\n  const [label, setLabel] = useState(initialLabel);\n  const [description, setDescription] = useState(initialDescription);\n  const [cloneFromRoleId, setCloneFromRoleId] = useState<string>(NO_CLONE);\n\n  // Re-seed from the initial values every time the dialog OPENS — the same\n  // \"one struct of local state, reset on open\" shape a consumer reaching for\n  // this dialog from a menu-per-row list needs (a fresh `key` per row would\n  // work too, but resetting here means the consumer never has to think about\n  // it either way).\n  useEffect(() => {\n    if (!open) return;\n    setLabel(initialLabel);\n    setDescription(initialDescription);\n    setCloneFromRoleId(NO_CLONE);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const canSubmit = label.trim().length > 0 && !loading;\n\n  const handleSubmit = () => {\n    if (!canSubmit) return;\n    onSubmit({\n      label: label.trim(),\n      description: description.trim(),\n      cloneFromRoleId:\n        mode === \"create\" && cloneFromRoleId !== NO_CLONE ? cloneFromRoleId : undefined,\n    });\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={onOpenChange}\n      title={mode === \"create\" ? strings.createTitle : strings.editTitle}\n      description={mode === \"create\" ? strings.createDescription : strings.editDescription}\n      className={className}\n      actions={\n        <>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={loading}>\n            {strings.cancel}\n          </Button>\n          <Button onClick={handleSubmit} disabled={!canSubmit} loading={loading}>\n            {mode === \"create\" ? strings.create : strings.save}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Field label={strings.label}>\n          <Input\n            value={label}\n            onChange={(event) => setLabel(event.target.value)}\n            placeholder={strings.labelPlaceholder}\n            disabled={loading}\n            autoFocus\n          />\n        </Field>\n        <Field label={strings.description} description={strings.descriptionHint}>\n          <Textarea\n            value={description}\n            onChange={(event) => setDescription(event.target.value)}\n            rows={3}\n            disabled={loading}\n          />\n        </Field>\n        {mode === \"create\" && cloneFromRoles && cloneFromRoles.length > 0 && (\n          <Field\n            label={strings.cloneLabel}\n            description={strings.cloneDescription}\n          >\n            <Select\n              value={cloneFromRoleId}\n              onValueChange={(value) => setCloneFromRoleId((value as string | null) ?? NO_CLONE)}\n              disabled={loading}\n            >\n              <SelectItem value={NO_CLONE}>{strings.cloneNone}</SelectItem>\n              {cloneFromRoles.map((role) => (\n                <SelectItem key={role.id} value={role.id}>\n                  {role.label}\n                </SelectItem>\n              ))}\n            </Select>\n          </Field>\n        )}\n      </div>\n    </Dialog>\n  );\n}\n"],"names":["NO_CLONE","RoleEditorDialog","mode","open","onOpenChange","cloneFromRoles","initialLabel","initialDescription","loading","onSubmit","className","strings","useUiStrings","label","setLabel","useState","description","setDescription","cloneFromRoleId","setCloneFromRoleId","useEffect","canSubmit","handleSubmit","jsx","Dialog","jsxs","Fragment","Button","Field","Input","event","Textarea","Select","value","SelectItem","role"],"mappings":"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"}

package/dist/components/rbac/RoleKeyPicker.js

@@ -0,0 +1,77 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { cn as x } from "../../lib/cn.js";
+import { RadioGroup as y, RadioCard as v } from "../Choice.js";
+import { useUiStrings as K } from "../../lib/i18n/provider.js";
+function m(i, l) {
+  return i.permissionKeys.filter((e) => !l.has(e));
+}
+function R(i, l, e, n) {
+  const t = m(i, l);
+  if (t.length === 0) return null;
+  const a = t.map((r) => e.find((c) => c.key === r)?.label ?? r);
+  return n(a);
+}
+function k(i, l, e) {
+  const n = l.find((t) => t.id === i);
+  return n !== void 0 && m(n, e).length === 0;
+}
+function w(i, l) {
+  let e = null;
+  for (const n of i)
+    m(n, l).length > 0 || (e === null || n.permissionKeys.length < e.permissionKeys.length) && (e = n);
+  return e?.id ?? "";
+}
+function C({
+  roles: i,
+  permissions: l,
+  ownPermissionKeys: e,
+  value: n,
+  onValueChange: t,
+  label: a,
+  description: r,
+  disabled: c,
+  className: g
+}) {
+  const d = K().roleKeyPicker, u = h(), b = new Set(e);
+  return (
+    /* Not a `Field`: `Field` labels its single control, which would name every
+       radio card with the heading. The group is labelled by its own heading and
+       each card by its own `label`. */
+    /* @__PURE__ */ p("div", { className: x("flex flex-col gap-2", g), children: [
+      /* @__PURE__ */ p("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ o("span", { id: u, className: "text-sm font-medium text-primary", children: a ?? d.label }),
+        /* @__PURE__ */ o("span", { className: "text-2xs text-tertiary", children: r ?? d.description })
+      ] }),
+      /* @__PURE__ */ o(
+        y,
+        {
+          value: n,
+          onValueChange: (s) => t(s),
+          disabled: c,
+          "aria-labelledby": u,
+          children: i.map((s) => {
+            const f = R(s, b, l, d.unavailable);
+            return /* @__PURE__ */ o(
+              v,
+              {
+                value: s.id,
+                label: s.label,
+                description: f ?? s.description,
+                disabled: f !== null
+              },
+              s.id
+            );
+          })
+        }
+      )
+    ] })
+  );
+}
+export {
+  C as RoleKeyPicker,
+  k as isRoleSelectable,
+  w as leastPrivilegeRoleId,
+  R as roleUnavailableReason
+};
+//# sourceMappingURL=RoleKeyPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RoleKeyPicker.js","sources":["../../../src/components/rbac/RoleKeyPicker.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { RadioCard, RadioGroup } from \"../Choice\";\nimport type { Permission, Role } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ROLE KEY PICKER\n\n   THE ONE \"PICK A ROLE FOR A CREDENTIAL\" CONTROL. A credential acts as its\n   owner with a role chosen when it is issued, and the same rule applies\n   wherever one is issued: a role holding a permission the issuer lacks cannot\n   be chosen, and the picker says which permission. `ApiKeysPanel` (a person\n   makes a key) and `AccessRequestPanel` (a person approves an agent's request)\n   both render this, so the rule has exactly one implementation.\n\n   The server refuses an over-broad role anyway, so a disabled card is the same\n   rule shown before the round trip, not a second rule. The picker never knows\n   what a role or permission IS: it compares `Role.permissionKeys` against the\n   `ownPermissionKeys` the consumer hands it and names the missing ones through\n   `permissions[].label`.\n\n   IT HOLDS NO STATE. `value` / `onValueChange` are the consumer's, so a caller\n   chooses whether to start with nothing selected (`ApiKeysPanel`: a scoped\n   credential is never broad by omission) or with `leastPrivilegeRoleId`\n   (`AccessRequestPanel`: approving defaults to the narrowest role that is\n   allowed).\n   ---------------------------------------------------------------------------- */\n\nexport interface RoleKeyPickerProps {\n  roles: Role[];\n  /** The permission catalog, used to name the permissions that make a role unavailable. */\n  permissions: Permission[];\n  /** What the issuer holds. A role holding anything outside this set cannot be chosen. */\n  ownPermissionKeys: string[];\n  /** The chosen role id, or `\"\"` for none. */\n  value: string;\n  onValueChange: (roleId: string) => void;\n  /** The group's visible heading. */\n  label?: string;\n  /** One line under the heading. */\n  description?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\n/** The permissions `role` holds that the issuer doesn't. Empty when the role can be chosen. */\nfunction missingPermissionKeys(role: Role, own: ReadonlySet<string>): string[] {\n  return role.permissionKeys.filter((key) => !own.has(key));\n}\n\n/** Why `role` can't be chosen, naming the missing permissions by label. `null` when it can. */\nexport function roleUnavailableReason(\n  role: Role,\n  own: ReadonlySet<string>,\n  permissions: Permission[],\n  unavailable: (permissionLabels: string[]) => string,\n): string | null {\n  const missing = missingPermissionKeys(role, own);\n  if (missing.length === 0) return null;\n  const names = missing.map((key) => permissions.find((p) => p.key === key)?.label ?? key);\n  return unavailable(names);\n}\n\n/** Whether `roleId` names a role in `roles` that the issuer may choose. */\nexport function isRoleSelectable(roleId: string, roles: Role[], own: ReadonlySet<string>): boolean {\n  const role = roles.find((r) => r.id === roleId);\n  return role !== undefined && missingPermissionKeys(role, own).length === 0;\n}\n\n/** The id of the selectable role holding the fewest permissions (the first of any tie), or `\"\"` when none is selectable. */\nexport function leastPrivilegeRoleId(roles: Role[], own: ReadonlySet<string>): string {\n  let best: Role | null = null;\n  for (const role of roles) {\n    if (missingPermissionKeys(role, own).length > 0) continue;\n    if (best === null || role.permissionKeys.length < best.permissionKeys.length) best = role;\n  }\n  return best?.id ?? \"\";\n}\n\nexport function RoleKeyPicker({\n  roles,\n  permissions,\n  ownPermissionKeys,\n  value,\n  onValueChange,\n  label,\n  description,\n  disabled,\n  className,\n}: RoleKeyPickerProps) {\n  const strings = useUiStrings().roleKeyPicker;\n  const labelId = useId();\n  const own = new Set(ownPermissionKeys);\n\n  return (\n    /* Not a `Field`: `Field` labels its single control, which would name every\n       radio card with the heading. The group is labelled by its own heading and\n       each card by its own `label`. */\n    <div className={cn(\"flex flex-col gap-2\", className)}>\n      <div className=\"flex flex-col gap-0.5\">\n        <span id={labelId} className=\"text-sm font-medium text-primary\">\n          {label ?? strings.label}\n        </span>\n        <span className=\"text-2xs text-tertiary\">{description ?? strings.description}</span>\n      </div>\n      <RadioGroup\n        value={value}\n        onValueChange={(next) => onValueChange(next as string)}\n        disabled={disabled}\n        aria-labelledby={labelId}\n      >\n        {roles.map((role) => {\n          const reason = roleUnavailableReason(role, own, permissions, strings.unavailable);\n          return (\n            <RadioCard\n              key={role.id}\n              value={role.id}\n              label={role.label}\n              description={reason ?? role.description}\n              disabled={reason !== null}\n            />\n          );\n        })}\n      </RadioGroup>\n    </div>\n  );\n}\n"],"names":["missingPermissionKeys","role","own","key","roleUnavailableReason","permissions","unavailable","missing","names","p","isRoleSelectable","roleId","roles","r","leastPrivilegeRoleId","best","RoleKeyPicker","ownPermissionKeys","value","onValueChange","label","description","disabled","className","strings","useUiStrings","labelId","useId","cn","jsxs","jsx","RadioGroup","next","reason","RadioCard"],"mappings":";;;;;AA+CA,SAASA,EAAsBC,GAAYC,GAAoC;AAC7E,SAAOD,EAAK,eAAe,OAAO,CAACE,MAAQ,CAACD,EAAI,IAAIC,CAAG,CAAC;AAC1D;AAGO,SAASC,EACdH,GACAC,GACAG,GACAC,GACe;AACf,QAAMC,IAAUP,EAAsBC,GAAMC,CAAG;AAC/C,MAAIK,EAAQ,WAAW,EAAG,QAAO;AACjC,QAAMC,IAAQD,EAAQ,IAAI,CAACJ,MAAQE,EAAY,KAAK,CAACI,MAAMA,EAAE,QAAQN,CAAG,GAAG,SAASA,CAAG;AACvF,SAAOG,EAAYE,CAAK;AAC1B;AAGO,SAASE,EAAiBC,GAAgBC,GAAeV,GAAmC;AACjG,QAAMD,IAAOW,EAAM,KAAK,CAACC,MAAMA,EAAE,OAAOF,CAAM;AAC9C,SAAOV,MAAS,UAAaD,EAAsBC,GAAMC,CAAG,EAAE,WAAW;AAC3E;AAGO,SAASY,EAAqBF,GAAeV,GAAkC;AACpF,MAAIa,IAAoB;AACxB,aAAWd,KAAQW;AACjB,IAAIZ,EAAsBC,GAAMC,CAAG,EAAE,SAAS,MAC1Ca,MAAS,QAAQd,EAAK,eAAe,SAASc,EAAK,eAAe,YAAQA,IAAOd;AAEvF,SAAOc,GAAM,MAAM;AACrB;AAEO,SAASC,EAAc;AAAA,EAC5B,OAAAJ;AAAA,EACA,aAAAP;AAAA,EACA,mBAAAY;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAuB;AACrB,QAAMC,IAAUC,IAAe,eACzBC,IAAUC,EAAA,GACVzB,IAAM,IAAI,IAAIe,CAAiB;AAErC;AAAA;AAAA;AAAA;AAAA,sBAIG,OAAA,EAAI,WAAWW,EAAG,uBAAuBL,CAAS,GACjD,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,UAAK,IAAIJ,GAAS,WAAU,oCAC1B,UAAAN,KAASI,EAAQ,MAAA,CACpB;AAAA,0BACC,QAAA,EAAK,WAAU,0BAA0B,UAAAH,KAAeG,EAAQ,YAAA,CAAY;AAAA,MAAA,GAC/E;AAAA,MACA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAAb;AAAA,UACA,eAAe,CAACc,MAASb,EAAca,CAAc;AAAA,UACrD,UAAAV;AAAA,UACA,mBAAiBI;AAAA,UAEhB,UAAAd,EAAM,IAAI,CAACX,MAAS;AACnB,kBAAMgC,IAAS7B,EAAsBH,GAAMC,GAAKG,GAAamB,EAAQ,WAAW;AAChF,mBACE,gBAAAM;AAAA,cAACI;AAAA,cAAA;AAAA,gBAEC,OAAOjC,EAAK;AAAA,gBACZ,OAAOA,EAAK;AAAA,gBACZ,aAAagC,KAAUhC,EAAK;AAAA,gBAC5B,UAAUgC,MAAW;AAAA,cAAA;AAAA,cAJhBhC,EAAK;AAAA,YAAA;AAAA,UAOhB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA;AAEJ;"}

package/dist/components/rbac/RolePermissionMatrix.js

@@ -0,0 +1,37 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { ToggleMatrix as b } from "../ToggleMatrix.js";
+import { useUiStrings as f } from "../../lib/i18n/provider.js";
+function w({
+  roles: a,
+  permissions: r,
+  editable: c = !1,
+  onChange: n
+}) {
+  const e = f().rolePermissionMatrix, s = i(
+    () => r.map((o) => ({ id: o.key, label: o.label, description: o.description, group: o.category, lockedReason: o.lockedReason })),
+    [r]
+  ), d = i(
+    () => a.map((o) => ({ id: o.id, label: o.label, lockedReason: o.locked ? e.locked(o.label) : void 0 })),
+    [a, e]
+  ), p = i(() => new Map(a.map((o) => [o.id, new Set(o.permissionKeys)])), [a]);
+  return /* @__PURE__ */ m(
+    b,
+    {
+      caption: e.caption,
+      rowHeader: e.permission,
+      rows: s,
+      columns: d,
+      cell: (o, t) => ({ state: p.get(t)?.has(o) ? "on" : "off" }),
+      readOnly: !c,
+      onChange: n === void 0 ? void 0 : (o, t, l) => n(t, o, l),
+      rowDescription: "tooltip",
+      otherGroupLabel: e.otherCategory,
+      cellLabel: (o, t, l) => e.cell(t.label, o.label, l)
+    }
+  );
+}
+export {
+  w as RolePermissionMatrix
+};
+//# sourceMappingURL=RolePermissionMatrix.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RolePermissionMatrix.js","sources":["../../../src/components/rbac/RolePermissionMatrix.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { ToggleMatrix, type ToggleMatrixColumn, type ToggleMatrixRow } from \"../ToggleMatrix\";\nimport type { Permission, Role } from \"./types\";\n\n/* ============================================================================\n   ROLE / PERMISSION MATRIX\n\n   Permissions run down the rows, roles run across the columns, and a check\n   mark sits wherever `role.permissionKeys.includes(permission.key)` — the\n   only fact this component knows. It has no idea a \"Widgets\" category or an\n   \"Owner\" role is a real thing anywhere; group headers come from whatever\n   `permission.category` strings a consumer happens to supply, in the order\n   those strings are first encountered, and disappear entirely if nobody\n   supplied any.\n\n   DX-4963: AN ADAPTER OVER `ToggleMatrix`. The grid, its sticky header, group\n   rows, cells and read-only/editable behaviour are the generic matrix's;\n   this file maps roles onto columns, permissions onto rows and `permissionKeys`\n   membership onto cells, and words the screen-reader sentences for permissions.\n   Anything else that is a grid of on/off switches (a connection's \"What syncs\")\n   draws the same `ToggleMatrix` directly, so they cannot drift apart.\n   ========================================================================= */\n\nexport interface RolePermissionMatrixProps {\n  roles: Role[];\n  permissions: Permission[];\n  /**\n   * DX-3414 — turns each cell into a toggle. Defaults to `false` (the\n   * original read-only matrix, unchanged pixel-for-pixel and test-for-test).\n   * A `role.locked` column stays READ-ONLY even when `editable` — see\n   * `Role.locked`'s own doc comment (`types.ts`): a consumer's rules forbid\n   * touching that role at all, and the matrix has no business knowing why.\n   */\n  editable?: boolean;\n  /**\n   * Fired when an editable, unlocked cell is toggled. `granted` is the NEW\n   * value the caller should persist — the matrix holds no state of its own\n   * (PLN-13 R-3: presentational, no fetch); a consumer wires this to its own\n   * mutation and re-renders with the updated `roles` once it lands.\n   */\n  onChange?: (roleId: string, permissionKey: string, granted: boolean) => void;\n}\n\nexport function RolePermissionMatrix({\n  roles,\n  permissions,\n  editable = false,\n  onChange,\n}: RolePermissionMatrixProps) {\n  const strings = useUiStrings().rolePermissionMatrix;\n  const rows = useMemo<ToggleMatrixRow[]>(\n    () => permissions.map((permission) => ({ id: permission.key, label: permission.label, description: permission.description, group: permission.category, lockedReason: permission.lockedReason })),\n    [permissions],\n  );\n  const columns = useMemo<ToggleMatrixColumn[]>(\n    () => roles.map((role) => ({ id: role.id, label: role.label, lockedReason: role.locked ? strings.locked(role.label) : undefined })),\n    [roles, strings],\n  );\n  const keysByRole = useMemo(() => new Map(roles.map((role) => [role.id, new Set(role.permissionKeys)])), [roles]);\n\n  return (\n    <ToggleMatrix\n      caption={strings.caption}\n      rowHeader={strings.permission}\n      rows={rows}\n      columns={columns}\n      cell={(permissionKey, roleId) => ({ state: keysByRole.get(roleId)?.has(permissionKey) ? \"on\" : \"off\" })}\n      readOnly={!editable}\n      onChange={onChange === undefined ? undefined : (permissionKey, roleId, granted) => onChange(roleId, permissionKey, granted)}\n      // I18N-ALLOW: a prop value naming a layout, never user text\n      rowDescription=\"tooltip\"\n      otherGroupLabel={strings.otherCategory}\n      cellLabel={(row, column, granted) => strings.cell(column.label, row.label, granted)}\n    />\n  );\n}\n"],"names":["RolePermissionMatrix","roles","permissions","editable","onChange","strings","useUiStrings","rows","useMemo","permission","columns","role","keysByRole","jsx","ToggleMatrix","permissionKey","roleId","granted","row","column"],"mappings":";;;;AA4CO,SAASA,EAAqB;AAAA,EACnC,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC,IAAe,sBACzBC,IAAOC;AAAA,IACX,MAAMN,EAAY,IAAI,CAACO,OAAgB,EAAE,IAAIA,EAAW,KAAK,OAAOA,EAAW,OAAO,aAAaA,EAAW,aAAa,OAAOA,EAAW,UAAU,cAAcA,EAAW,aAAA,EAAe;AAAA,IAC/L,CAACP,CAAW;AAAA,EAAA,GAERQ,IAAUF;AAAA,IACd,MAAMP,EAAM,IAAI,CAACU,OAAU,EAAE,IAAIA,EAAK,IAAI,OAAOA,EAAK,OAAO,cAAcA,EAAK,SAASN,EAAQ,OAAOM,EAAK,KAAK,IAAI,OAAA,EAAY;AAAA,IAClI,CAACV,GAAOI,CAAO;AAAA,EAAA,GAEXO,IAAaJ,EAAQ,MAAM,IAAI,IAAIP,EAAM,IAAI,CAACU,MAAS,CAACA,EAAK,IAAI,IAAI,IAAIA,EAAK,cAAc,CAAC,CAAC,CAAC,GAAG,CAACV,CAAK,CAAC;AAE/G,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAST,EAAQ;AAAA,MACjB,WAAWA,EAAQ;AAAA,MACnB,MAAAE;AAAA,MACA,SAAAG;AAAA,MACA,MAAM,CAACK,GAAeC,OAAY,EAAE,OAAOJ,EAAW,IAAII,CAAM,GAAG,IAAID,CAAa,IAAI,OAAO,MAAA;AAAA,MAC/F,UAAU,CAACZ;AAAA,MACX,UAAUC,MAAa,SAAY,SAAY,CAACW,GAAeC,GAAQC,MAAYb,EAASY,GAAQD,GAAeE,CAAO;AAAA,MAE1H,gBAAe;AAAA,MACf,iBAAiBZ,EAAQ;AAAA,MACzB,WAAW,CAACa,GAAKC,GAAQF,MAAYZ,EAAQ,KAAKc,EAAO,OAAOD,EAAI,OAAOD,CAAO;AAAA,IAAA;AAAA,EAAA;AAGxF;"}

package/dist/components/rbac/RolesPermissionsPage.js

@@ -0,0 +1,142 @@
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { AlertDialog as C } from "../Dialog.js";
+import { Button as j } from "../Button.js";
+import { IconButton as h } from "../IconButton.js";
+import { Icon as c } from "../Icon.js";
+import { RolePermissionMatrix as E } from "./RolePermissionMatrix.js";
+import { RoleEditorDialog as P } from "./RoleEditorDialog.js";
+import { useUiStrings as S } from "../../lib/i18n/provider.js";
+function U({
+  roles: m,
+  permissions: y,
+  editable: r = !1,
+  onChangePermission: k,
+  onCreateRole: d,
+  onRenameRole: a,
+  onDeleteRole: o,
+  onResetRole: p,
+  busyRoleId: f,
+  heading: u = !0,
+  className: w
+}) {
+  const t = S().rolesPermissionsPage, [s, x] = N(null), [n, g] = N(null), v = () => x(null), z = (e) => {
+    s?.mode === "create" ? d?.(e) : s?.mode === "edit" && a?.(s.role.id, { label: e.label, description: e.description }), v();
+  };
+  return /* @__PURE__ */ l("div", { className: w, children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-5", children: [
+      (u || r && d) && /* @__PURE__ */ l("div", { className: `flex items-start gap-4 ${u ? "justify-between" : "justify-end"}`, children: [
+        u && /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ i("h1", { className: "font-display text-xl font-semibold text-primary", children: t.title }),
+          /* @__PURE__ */ i("p", { className: "text-sm text-tertiary", children: r ? t.subtitleEditable : t.subtitleReadOnly })
+        ] }),
+        r && d && /* @__PURE__ */ i(
+          j,
+          {
+            size: "sm",
+            leadingIcon: /* @__PURE__ */ i(c, { name: "plus", size: "sm" }),
+            onClick: () => x({ mode: "create" }),
+            children: t.newRole
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(
+        E,
+        {
+          roles: m,
+          permissions: y,
+          editable: r,
+          onChange: k
+        }
+      ),
+      r && (a || o || p) && /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ i("h2", { className: "text-xs font-semibold tracking-widest text-tertiary uppercase", children: t.manageRoles }),
+        /* @__PURE__ */ i("ul", { className: "flex flex-col gap-1.5", children: m.map((e) => {
+          const b = f === e.id;
+          return e.locked ? null : /* @__PURE__ */ l(
+            "li",
+            {
+              className: "flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface px-4 py-2.5",
+              children: [
+                /* @__PURE__ */ l("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ i("p", { className: "truncate text-sm font-medium text-primary", children: e.label }),
+                  e.description && /* @__PURE__ */ i("p", { className: "truncate text-2xs text-tertiary", children: e.description })
+                ] }),
+                /* @__PURE__ */ l("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  e.system && p && /* @__PURE__ */ i(
+                    h,
+                    {
+                      icon: /* @__PURE__ */ i(c, { name: "rotate-ccw", size: "sm" }),
+                      label: t.reset(e.label),
+                      size: "sm",
+                      disabledReason: b ? t.working : void 0,
+                      onClick: () => p(e.id)
+                    }
+                  ),
+                  a && /* @__PURE__ */ i(
+                    h,
+                    {
+                      icon: /* @__PURE__ */ i(c, { name: "pencil", size: "sm" }),
+                      label: t.edit(e.label),
+                      size: "sm",
+                      disabledReason: b ? t.working : void 0,
+                      onClick: () => x({ mode: "edit", role: e })
+                    }
+                  ),
+                  o && e.deletable !== !1 && /* @__PURE__ */ i(
+                    h,
+                    {
+                      icon: /* @__PURE__ */ i(c, { name: "trash-2", size: "sm" }),
+                      label: t.delete(e.label),
+                      tone: "danger",
+                      size: "sm",
+                      disabledReason: b ? t.working : void 0,
+                      onClick: () => g(e)
+                    }
+                  )
+                ] })
+              ]
+            },
+            e.id
+          );
+        }) })
+      ] })
+    ] }),
+    r && (d || a) && /* @__PURE__ */ i(
+      P,
+      {
+        mode: s?.mode ?? "create",
+        open: s !== null,
+        onOpenChange: (e) => {
+          e || v();
+        },
+        cloneFromRoles: s?.mode === "create" ? m : void 0,
+        initialLabel: s?.mode === "edit" ? s.role.label : void 0,
+        initialDescription: s?.mode === "edit" ? s.role.description : void 0,
+        loading: s?.mode === "edit" && f === s.role.id,
+        onSubmit: z
+      }
+    ),
+    o && /* @__PURE__ */ i(
+      C,
+      {
+        open: n !== null,
+        onOpenChange: (e) => {
+          e || g(null);
+        },
+        title: n ? t.deleteTitle(n.label) : "",
+        description: t.deleteDescription,
+        confirmLabel: t.deleteConfirm,
+        destructive: !0,
+        loading: n !== null && f === n.id,
+        onConfirm: () => {
+          n && o(n.id), g(null);
+        }
+      }
+    )
+  ] });
+}
+export {
+  U as RolesPermissionsPage
+};
+//# sourceMappingURL=RolesPermissionsPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RolesPermissionsPage.js","sources":["../../../src/components/rbac/RolesPermissionsPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { AlertDialog } from \"../Dialog\";\nimport { Button } from \"../Button\";\nimport { IconButton } from \"../IconButton\";\nimport { Icon } from \"../Icon\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { RolePermissionMatrix } from \"./RolePermissionMatrix\";\nimport { RoleEditorDialog, type RoleEditorDialogSubmitInput } from \"./RoleEditorDialog\";\nimport type { Permission, Role } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ROLES & PERMISSIONS PAGE\n\n   DX-3414 — PROPS-DRIVEN, unlike its previous `useRBAC()`-reading self: an\n   editable page needs mutation callbacks (create/rename/delete/reset a role,\n   toggle a permission) that `useRBAC()` — read/impersonation state only, see\n   that hook's own header — has no way to supply. Same relationship every\n   other `rbac/` component in this file has with its data (`types.ts`'s own\n   header): this page fetches nothing, knows no danxbot type, and owns no\n   permission key. A consumer wanting the old \"just mount it, useRBAC handles\n   the rest\" convenience reads `roles`/`permissions` off `useRBAC()` itself and\n   passes them straight through — one line moved from here to there, not lost.\n\n   `editable` GATES EVERYTHING BEYOND THE MATRIX. A `false` (or omitted)\n   viewer sees exactly the old read-only page: matrix, no \"New role\" button,\n   no per-role manage list. A consumer decides `editable` from whatever its\n   own permission model says (danxbot: `team.roles.manage`) — this component\n   has no opinion on what that check should be.\n\n   ROLE MANAGEMENT is a plain list below the matrix, not more matrix columns —\n   a rename/delete/reset action per role reads naturally as \"one row, one\n   role, its own controls\" and would crowd an already-dense grid if squeezed\n   into a header cell instead.\n   -------------------------------------------------------------------------- */\n\nexport interface RolesPermissionsPageProps {\n  roles: Role[];\n  permissions: Permission[];\n  /** Gates the \"New role\" button, the manage-roles list, and the matrix's own `editable`. Defaults to `false` — read-only, pixel-identical to the page before this card. */\n  editable?: boolean;\n  /** Fired when an editable, unlocked matrix cell is toggled. Required to make the matrix respond; omit alongside `editable={false}`. */\n  onChangePermission?: (roleId: string, permissionKey: string, granted: boolean) => void;\n  onCreateRole?: (input: RoleEditorDialogSubmitInput) => void;\n  onRenameRole?: (roleId: string, input: { label: string; description: string }) => void;\n  onDeleteRole?: (roleId: string) => void;\n  /** Restores a SYSTEM role's seeded permission set — offered only for a role with `role.system` true (never `locked`; see `Role.locked`'s own doc comment for why owner never reaches this list at all). */\n  onResetRole?: (roleId: string) => void;\n  /** The id of a role currently mid-mutation. Disables just that row's controls, not the whole page. */\n  busyRoleId?: string | null;\n  /** DX-4029: `false` omits the page's own title text (the `<h1>` and the explanatory line) so a host layout can own the screen's one `<h1>`. The \"New role\" button stays: it is the only create-role entry point. Default `true` is the unchanged render. */\n  heading?: boolean;\n  className?: string;\n}\n\ntype EditorState = { mode: \"create\" } | { mode: \"edit\"; role: Role };\n\nexport function RolesPermissionsPage({\n  roles,\n  permissions,\n  editable = false,\n  onChangePermission,\n  onCreateRole,\n  onRenameRole,\n  onDeleteRole,\n  onResetRole,\n  busyRoleId,\n  heading = true,\n  className,\n}: RolesPermissionsPageProps) {\n  const strings = useUiStrings().rolesPermissionsPage;\n  const [editor, setEditor] = useState<EditorState | null>(null);\n  const [deleteTarget, setDeleteTarget] = useState<Role | null>(null);\n\n  const closeEditor = () => setEditor(null);\n\n  const handleEditorSubmit = (input: RoleEditorDialogSubmitInput) => {\n    if (editor?.mode === \"create\") {\n      onCreateRole?.(input);\n    } else if (editor?.mode === \"edit\") {\n      onRenameRole?.(editor.role.id, { label: input.label, description: input.description });\n    }\n    closeEditor();\n  };\n\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-5\">\n        {(heading || (editable && onCreateRole)) && (\n          <div className={`flex items-start gap-4 ${heading ? \"justify-between\" : \"justify-end\"}`}>\n            {heading && (\n              <div>\n                <h1 className=\"font-display text-xl font-semibold text-primary\">{strings.title}</h1>\n                <p className=\"text-sm text-tertiary\">\n                  {editable ? strings.subtitleEditable : strings.subtitleReadOnly}\n                </p>\n              </div>\n            )}\n            {editable && onCreateRole && (\n              <Button\n                size=\"sm\"\n                leadingIcon={<Icon name=\"plus\" size=\"sm\" />}\n                onClick={() => setEditor({ mode: \"create\" })}\n              >\n                {strings.newRole}\n              </Button>\n            )}\n          </div>\n        )}\n\n        <RolePermissionMatrix\n          roles={roles}\n          permissions={permissions}\n          editable={editable}\n          onChange={onChangePermission}\n        />\n\n        {editable && (onRenameRole || onDeleteRole || onResetRole) && (\n          <div className=\"flex flex-col gap-2\">\n            <h2 className=\"text-xs font-semibold tracking-widest text-tertiary uppercase\">{strings.manageRoles}</h2>\n            <ul className=\"flex flex-col gap-1.5\">\n              {roles.map((role) => {\n                const busy = busyRoleId === role.id;\n                if (role.locked) {\n                  // Owner (or whatever a consumer marks `locked`) carries no\n                  // row here at all — there is nothing this list could offer\n                  // it (`team-roles-db.ts`'s own header: nothing about it is\n                  // stored, so nothing about it can be managed).\n                  return null;\n                }\n                return (\n                  <li\n                    key={role.id}\n                    className=\"flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface px-4 py-2.5\"\n                  >\n                    <div className=\"min-w-0\">\n                      <p className=\"truncate text-sm font-medium text-primary\">{role.label}</p>\n                      {role.description && (\n                        <p className=\"truncate text-2xs text-tertiary\">{role.description}</p>\n                      )}\n                    </div>\n                    <div className=\"flex shrink-0 items-center gap-1\">\n                      {role.system && onResetRole && (\n                        <IconButton\n                          icon={<Icon name=\"rotate-ccw\" size=\"sm\" />}\n                          label={strings.reset(role.label)}\n                          size=\"sm\"\n                          disabledReason={busy ? strings.working : undefined}\n                          onClick={() => onResetRole(role.id)}\n                        />\n                      )}\n                      {onRenameRole && (\n                        <IconButton\n                          icon={<Icon name=\"pencil\" size=\"sm\" />}\n                          label={strings.edit(role.label)}\n                          size=\"sm\"\n                          disabledReason={busy ? strings.working : undefined}\n                          onClick={() => setEditor({ mode: \"edit\", role })}\n                        />\n                      )}\n                      {onDeleteRole && role.deletable !== false && (\n                        <IconButton\n                          icon={<Icon name=\"trash-2\" size=\"sm\" />}\n                          label={strings.delete(role.label)}\n                          tone=\"danger\"\n                          size=\"sm\"\n                          disabledReason={busy ? strings.working : undefined}\n                          onClick={() => setDeleteTarget(role)}\n                        />\n                      )}\n                    </div>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n\n      {editable && (onCreateRole || onRenameRole) && (\n        <RoleEditorDialog\n          mode={editor?.mode ?? \"create\"}\n          open={editor !== null}\n          onOpenChange={(next) => {\n            if (!next) closeEditor();\n          }}\n          cloneFromRoles={editor?.mode === \"create\" ? roles : undefined}\n          initialLabel={editor?.mode === \"edit\" ? editor.role.label : undefined}\n          initialDescription={editor?.mode === \"edit\" ? editor.role.description : undefined}\n          // Only an EDIT can be \"busy\" against a known role id — a create\n          // has no id yet to match `busyRoleId` against, so it is never\n          // shown as loading by this alone (a consumer's own `onCreateRole`\n          // is free to close the dialog itself once the create settles).\n          loading={editor?.mode === \"edit\" && busyRoleId === editor.role.id}\n          onSubmit={handleEditorSubmit}\n        />\n      )}\n\n      {onDeleteRole && (\n        <AlertDialog\n          open={deleteTarget !== null}\n          onOpenChange={(next) => {\n            if (!next) setDeleteTarget(null);\n          }}\n          title={deleteTarget ? strings.deleteTitle(deleteTarget.label) : \"\"}\n          description={strings.deleteDescription}\n          confirmLabel={strings.deleteConfirm}\n          destructive\n          loading={deleteTarget !== null && busyRoleId === deleteTarget.id}\n          onConfirm={() => {\n            if (deleteTarget) onDeleteRole(deleteTarget.id);\n            setDeleteTarget(null);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["RolesPermissionsPage","roles","permissions","editable","onChangePermission","onCreateRole","onRenameRole","onDeleteRole","onResetRole","busyRoleId","heading","className","strings","useUiStrings","editor","setEditor","useState","deleteTarget","setDeleteTarget","closeEditor","handleEditorSubmit","input","jsxs","jsx","Button","Icon","RolePermissionMatrix","role","busy","IconButton","RoleEditorDialog","next","AlertDialog"],"mappings":"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"}

package/dist/components/rbac/SessionsList.js

@@ -0,0 +1,146 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useState as p, useRef as x, useEffect as v } from "react";
+import { AlertDialog as y } from "../Dialog.js";
+import { Badge as g } from "../Badge.js";
+import { TableEmptyState as b, DataTable as w, CellStack as N } from "../Table.js";
+import { Icon as a } from "../Icon.js";
+import { IconButton as h } from "../IconButton.js";
+import { copyText as C } from "../../lib/clipboard.js";
+import { DateTimeText as S } from "../DateTimeText.js";
+import { RelativeTime as u } from "../RelativeTime.js";
+import { EndedLine as T, IdleLine as I } from "./EndedLine.js";
+import { useUiStrings as m } from "../../lib/i18n/provider.js";
+function k({
+  session: t,
+  busy: s,
+  onRevoke: o
+}) {
+  const e = m().sessionsList, [i, n] = p(!1);
+  return t.current ? /* @__PURE__ */ r("span", { className: "text-2xs text-tertiary", children: e.thisSession }) : t.ended !== void 0 ? null : /* @__PURE__ */ r(
+    y,
+    {
+      open: i,
+      onOpenChange: n,
+      trigger: /* @__PURE__ */ r(
+        h,
+        {
+          icon: /* @__PURE__ */ r(a, { name: "log-out", size: "sm" }),
+          label: e.revoke(t.name),
+          tone: "danger",
+          size: "sm",
+          disabledReason: s ? e.revoking : void 0
+        }
+      ),
+      title: e.revokeTitle(t.name),
+      description: e.revokeDescription,
+      confirmLabel: e.revokeConfirm,
+      destructive: !0,
+      loading: s,
+      onConfirm: () => {
+        o(t.id), n(!1);
+      }
+    }
+  );
+}
+const f = 9, B = 2e3;
+function z({ session: t }) {
+  const s = m().sessionsList, [o, e] = p(!1), i = x(null);
+  if (v(
+    () => () => {
+      i.current !== null && clearTimeout(i.current);
+    },
+    []
+  ), t.browserId === void 0) return /* @__PURE__ */ r("span", { className: "text-tertiary", children: "—" });
+  const n = t.browserId, c = async () => {
+    try {
+      await C(n), e(!0);
+    } catch {
+      e(!1);
+    }
+    i.current !== null && clearTimeout(i.current), i.current = setTimeout(() => e(!1), B);
+  };
+  return /* @__PURE__ */ d("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ r("code", { className: "font-mono text-sm text-primary", "data-testid": "session-browser-id", children: n.slice(0, f) }),
+    /* @__PURE__ */ r(
+      h,
+      {
+        icon: /* @__PURE__ */ r(a, { name: o ? "check" : "copy", size: "sm" }),
+        label: s.copyBrowserId(n.slice(0, f)),
+        variant: "ghost",
+        size: "sm",
+        onClick: () => {
+          c();
+        }
+      }
+    ),
+    t.thisBrowser && /* @__PURE__ */ r(g, { tone: "accent", size: "sm", dot: !0, children: s.thisBrowser })
+  ] });
+}
+function A(t, s, o) {
+  return [
+    {
+      id: "session",
+      header: t.columnSession,
+      accessorFn: (e) => e.name,
+      cell: ({ row: e }) => {
+        const i = e.original, n = [i.userAgent, i.ip].filter(Boolean).join(" · ");
+        return /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ r("span", { className: "grid size-8 shrink-0 place-items-center rounded-full bg-surface-inset text-tertiary", children: /* @__PURE__ */ r(a, { name: "monitor", size: "sm" }) }),
+          /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            /* @__PURE__ */ r(N, { primary: i.name, secondary: n || void 0 }),
+            i.ended && /* @__PURE__ */ r(T, { ended: i.ended }),
+            i.idle && /* @__PURE__ */ r(I, { idle: i.idle })
+          ] }),
+          i.current && /* @__PURE__ */ r(g, { tone: "accent", size: "sm", dot: !0, children: t.current })
+        ] });
+      }
+    },
+    {
+      id: "browser",
+      header: t.columnBrowser,
+      accessorFn: (e) => e.browserId ?? "",
+      cell: ({ row: e }) => /* @__PURE__ */ r(z, { session: e.original })
+    },
+    {
+      id: "lastUsed",
+      header: t.columnLastUsed,
+      accessorFn: (e) => e.lastUsedAt,
+      cell: ({ row: e }) => /* @__PURE__ */ r("span", { className: "text-secondary", children: /* @__PURE__ */ r(u, { at: e.original.lastUsedAt }) })
+    },
+    {
+      id: "created",
+      header: t.columnCreated,
+      accessorFn: (e) => e.createdAt,
+      cell: ({ row: e }) => /* @__PURE__ */ r("span", { className: "text-secondary", children: /* @__PURE__ */ r(u, { at: e.original.createdAt }) })
+    },
+    {
+      id: "expires",
+      header: t.columnExpires,
+      accessorFn: (e) => e.expiresAt ?? "",
+      cell: ({ row: e }) => /* @__PURE__ */ r("span", { className: "text-secondary", children: e.original.expiresAt ? /* @__PURE__ */ r(S, { at: e.original.expiresAt }) : t.never })
+    },
+    {
+      id: "actions",
+      header: "",
+      enableSorting: !1,
+      cell: ({ row: e }) => /* @__PURE__ */ r("div", { className: "flex justify-end", children: /* @__PURE__ */ r(k, { session: e.original, busy: s === e.original.id, onRevoke: o }) })
+    }
+  ];
+}
+function P({ sessions: t, onRevoke: s, busyId: o, emptyState: e, className: i }) {
+  const n = m().sessionsList;
+  if (t.length === 0)
+    return e ?? /* @__PURE__ */ r(
+      b,
+      {
+        icon: /* @__PURE__ */ r(a, { name: "monitor", size: "lg", className: "text-tertiary" }),
+        title: n.emptyTitle
+      }
+    );
+  const c = A(n, o, s);
+  return /* @__PURE__ */ r(w, { columns: c, data: t, getRowId: (l) => String(l.id), getRowClassName: (l) => l.thisBrowser ? "bg-accent-subtle" : void 0, className: i });
+}
+export {
+  P as SessionsList
+};
+//# sourceMappingURL=SessionsList.js.map