@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/rbac/MembersPanel.js

@@ -0,0 +1,138 @@
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { Avatar as p } from "../Avatar.js";
+import { AlertDialog as g } from "../Dialog.js";
+import { IconButton as v } from "../IconButton.js";
+import { Icon as u } from "../Icon.js";
+import { Select as h, SelectItem as x } from "../Select.js";
+import { TableEmptyState as y, DataTable as R, CellStack as b } from "../Table.js";
+import { RelativeTime as C } from "../RelativeTime.js";
+import { useUiStrings as m } from "../../lib/i18n/provider.js";
+function N({
+  member: e,
+  assignableRoles: l,
+  busy: s,
+  onChangeRole: a
+}) {
+  const t = m().membersPanel, c = l.some((o) => o.id === e.role.id) ? l : [...l, e.role], i = s || e.disabledReason !== void 0;
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ n(
+      h,
+      {
+        "aria-label": t.roleFor(e.user.name),
+        value: e.role.id,
+        onValueChange: (o) => {
+          const r = o;
+          r && r !== e.role.id && a(e.user.id, r);
+        },
+        disabled: i,
+        size: "sm",
+        children: c.map((o) => /* @__PURE__ */ n(x, { value: o.id, children: o.label }, o.id))
+      }
+    ),
+    e.disabledReason && /* @__PURE__ */ n("span", { className: "text-2xs text-tertiary", children: e.disabledReason })
+  ] });
+}
+function j({
+  member: e,
+  busy: l,
+  onRemove: s
+}) {
+  const a = m().membersPanel, t = e.disabledReason ?? (l ? a.removing : void 0);
+  return /* @__PURE__ */ n(
+    g,
+    {
+      trigger: /* @__PURE__ */ n(
+        v,
+        {
+          icon: /* @__PURE__ */ n(u, { name: "trash-2", size: "sm" }),
+          label: a.remove(e.user.name),
+          tone: "danger",
+          size: "sm",
+          disabledReason: t
+        }
+      ),
+      title: a.removeTitle(e.user.name),
+      description: e.disabledReason ?? a.removeDescription(e.user.name),
+      confirmLabel: a.removeConfirm,
+      destructive: !0,
+      loading: l,
+      onConfirm: () => s(e.user.id)
+    }
+  );
+}
+function S(e, l, s, a, t, c) {
+  return [
+    {
+      id: "member",
+      header: e.columnMember,
+      accessorFn: (i) => i.user.name,
+      cell: ({ row: i }) => {
+        const { user: o } = i.original, r = /* @__PURE__ */ n(b, { primary: o.name, secondary: o.email });
+        return /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ n(p, { src: o.avatarUrl, name: o.name, size: "sm" }),
+          c === void 0 ? r : /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            r,
+            c(i.original)
+          ] })
+        ] });
+      }
+    },
+    {
+      id: "role",
+      header: e.columnRole,
+      accessorFn: (i) => i.role.label,
+      cell: ({ row: i }) => /* @__PURE__ */ n(
+        N,
+        {
+          member: i.original,
+          assignableRoles: l,
+          busy: s === i.original.user.id,
+          onChangeRole: a
+        }
+      )
+    },
+    {
+      id: "joined",
+      header: e.columnJoined,
+      accessorFn: (i) => i.joinedAt,
+      cell: ({ row: i }) => /* @__PURE__ */ n("span", { className: "text-secondary", children: /* @__PURE__ */ n(C, { at: i.original.joinedAt }) })
+    },
+    {
+      id: "actions",
+      header: "",
+      enableSorting: !1,
+      cell: ({ row: i }) => /* @__PURE__ */ n("div", { className: "flex justify-end", children: /* @__PURE__ */ n(
+        j,
+        {
+          member: i.original,
+          busy: s === i.original.user.id,
+          onRemove: t
+        }
+      ) })
+    }
+  ];
+}
+function J({
+  members: e,
+  assignableRoles: l,
+  onChangeRole: s,
+  onRemove: a,
+  busyUserId: t,
+  renderMemberExtra: c,
+  emptyState: i,
+  className: o
+}) {
+  const r = m().membersPanel, f = S(r, l, t, s, a, c);
+  return e.length === 0 ? i ?? /* @__PURE__ */ n(
+    y,
+    {
+      icon: /* @__PURE__ */ n(u, { name: "users", size: "lg", className: "text-tertiary" }),
+      title: r.emptyTitle,
+      description: r.emptyDescription
+    }
+  ) : /* @__PURE__ */ n(R, { columns: f, data: e, className: o });
+}
+export {
+  J as MembersPanel
+};
+//# sourceMappingURL=MembersPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MembersPanel.js","sources":["../../../src/components/rbac/MembersPanel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { ColumnDef } from \"@tanstack/react-table\";\nimport { Avatar } from \"../Avatar\";\nimport { AlertDialog } from \"../Dialog\";\nimport { IconButton } from \"../IconButton\";\nimport { Icon } from \"../Icon\";\nimport { Select, SelectItem } from \"../Select\";\nimport { CellStack, DataTable, TableEmptyState } from \"../Table\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { UiStrings } from \"../../lib/i18n\";\nimport type { Role, User } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   MEMBERS PANEL\n\n   A team's member list: who's in it, their role, when they joined, and the\n   two mutations a member list ever needs — change a member's role, or remove\n   them. Composes `DataTable` (PLN-13 R-3/plan direction, 2026-09-27: \"there\n   are no team-specific table components\" — this is the library's ONE table\n   primitive, fed team-member rows, not a second one).\n\n   PRESENTATIONAL ONLY. Every mutation is a callback; the panel never fetches\n   and knows nothing about HTTP, permission keys, or what \"owner\" means to a\n   consumer's own catalog — it renders whatever `members[]` / `assignableRoles[]`\n   it is handed, same relationship every other `rbac/` component has with its\n   data (see `types.ts`'s own header).\n\n   `disabledReason` is per-row, not a panel-wide flag: a consumer computes it\n   once (e.g. \"the team's only owner\" for the sole `role.key === \"owner\"` row)\n   and the row's role Select and remove control both go inert with that text\n   as their tooltip/description, rather than the caller re-deriving the same\n   rule in two places or the panel guessing at role semantics it has no\n   business knowing.\n   -------------------------------------------------------------------------- */\n\nexport interface MembersPanelMember {\n  user: User;\n  /** The member's CURRENT role. */\n  role: Role;\n  /** ISO timestamp of when the member joined the team. */\n  joinedAt: string;\n  /** Non-null disables this row's role Select and remove control, with this\n   *  text as the reason shown alongside them (e.g. \"The team's only owner\"). */\n  disabledReason?: string;\n}\n\nexport interface MembersPanelProps {\n  members: MembersPanelMember[];\n  /** The roles a member may be changed TO — the role Select's options. A row\n   *  whose own role is not listed still shows that role (its label is kept as\n   *  that row's one extra option); it is never offered to any other row. */\n  assignableRoles: Role[];\n  onChangeRole: (userId: string, roleId: string) => void;\n  onRemove: (userId: string) => void;\n  /** The id of a row currently mid-mutation. Disables just that row rather\n   *  than the whole panel, so an operator working through several rows in a\n   *  row is never blocked on the last one's round trip. */\n  busyUserId?: string | null;\n  /** Extra content drawn inside each member's row, below the name and email,\n   *  given that row's member. Absent, the row is exactly the default one. */\n  renderMemberExtra?: (member: MembersPanelMember) => ReactNode;\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nfunction RoleCell({\n  member,\n  assignableRoles,\n  busy,\n  onChangeRole,\n}: {\n  member: MembersPanelMember;\n  assignableRoles: Role[];\n  busy: boolean;\n  onChangeRole: (userId: string, roleId: string) => void;\n}) {\n  const strings = useUiStrings().membersPanel;\n  const options = assignableRoles.some((r) => r.id === member.role.id)\n    ? assignableRoles\n    : [...assignableRoles, member.role];\n  const disabled = busy || member.disabledReason !== undefined;\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <Select\n        aria-label={strings.roleFor(member.user.name)}\n        value={member.role.id}\n        onValueChange={(value) => {\n          const roleId = value as string | null;\n          if (roleId && roleId !== member.role.id) onChangeRole(member.user.id, roleId);\n        }}\n        disabled={disabled}\n        size=\"sm\"\n      >\n        {options.map((role) => (\n          <SelectItem key={role.id} value={role.id}>\n            {role.label}\n          </SelectItem>\n        ))}\n      </Select>\n      {member.disabledReason && <span className=\"text-2xs text-tertiary\">{member.disabledReason}</span>}\n    </div>\n  );\n}\n\nfunction RemoveCell({\n  member,\n  busy,\n  onRemove,\n}: {\n  member: MembersPanelMember;\n  busy: boolean;\n  onRemove: (userId: string) => void;\n}) {\n  const strings = useUiStrings().membersPanel;\n  const disabledReason = member.disabledReason ?? (busy ? strings.removing : undefined);\n  return (\n    <AlertDialog\n      trigger={\n        <IconButton\n          icon={<Icon name=\"trash-2\" size=\"sm\" />}\n          label={strings.remove(member.user.name)}\n          tone=\"danger\"\n          size=\"sm\"\n          disabledReason={disabledReason}\n        />\n      }\n      title={strings.removeTitle(member.user.name)}\n      description={member.disabledReason ?? strings.removeDescription(member.user.name)}\n      confirmLabel={strings.removeConfirm}\n      destructive\n      loading={busy}\n      onConfirm={() => onRemove(member.user.id)}\n    />\n  );\n}\n\nfunction buildColumns(\n  strings: UiStrings[\"membersPanel\"],\n  assignableRoles: Role[],\n  busyUserId: string | null | undefined,\n  onChangeRole: (userId: string, roleId: string) => void,\n  onRemove: (userId: string) => void,\n  renderMemberExtra: ((member: MembersPanelMember) => ReactNode) | undefined,\n): ColumnDef<MembersPanelMember, unknown>[] {\n  return [\n    {\n      id: \"member\",\n      header: strings.columnMember,\n      accessorFn: (m) => m.user.name,\n      cell: ({ row }) => {\n        const { user } = row.original;\n        const stack = <CellStack primary={user.name} secondary={user.email} />;\n        return (\n          <div className=\"flex items-center gap-3\">\n            <Avatar src={user.avatarUrl} name={user.name} size=\"sm\" />\n            {renderMemberExtra === undefined ? (\n              stack\n            ) : (\n              <div className=\"flex min-w-0 flex-col gap-1\">\n                {stack}\n                {renderMemberExtra(row.original)}\n              </div>\n            )}\n          </div>\n        );\n      },\n    },\n    {\n      id: \"role\",\n      header: strings.columnRole,\n      accessorFn: (m) => m.role.label,\n      cell: ({ row }) => (\n        <RoleCell\n          member={row.original}\n          assignableRoles={assignableRoles}\n          busy={busyUserId === row.original.user.id}\n          onChangeRole={onChangeRole}\n        />\n      ),\n    },\n    {\n      id: \"joined\",\n      header: strings.columnJoined,\n      accessorFn: (m) => m.joinedAt,\n      cell: ({ row }) => <span className=\"text-secondary\"><RelativeTime at={row.original.joinedAt} /></span>,\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      cell: ({ row }) => (\n        <div className=\"flex justify-end\">\n          <RemoveCell\n            member={row.original}\n            busy={busyUserId === row.original.user.id}\n            onRemove={onRemove}\n          />\n        </div>\n      ),\n    },\n  ];\n}\n\nexport function MembersPanel({\n  members,\n  assignableRoles,\n  onChangeRole,\n  onRemove,\n  busyUserId,\n  renderMemberExtra,\n  emptyState,\n  className,\n}: MembersPanelProps) {\n  const strings = useUiStrings().membersPanel;\n  const columns = buildColumns(strings, assignableRoles, busyUserId, onChangeRole, onRemove, renderMemberExtra);\n\n  if (members.length === 0) {\n    return (\n      emptyState ?? (\n        <TableEmptyState\n          icon={<Icon name=\"users\" size=\"lg\" className=\"text-tertiary\" />}\n          title={strings.emptyTitle}\n          description={strings.emptyDescription}\n        />\n      )\n    );\n  }\n\n  return <DataTable columns={columns} data={members} className={className} />;\n}\n"],"names":["RoleCell","member","assignableRoles","busy","onChangeRole","strings","useUiStrings","options","r","disabled","jsxs","jsx","Select","value","roleId","role","SelectItem","RemoveCell","onRemove","disabledReason","AlertDialog","IconButton","Icon","buildColumns","busyUserId","renderMemberExtra","m","row","user","stack","CellStack","Avatar","RelativeTime","MembersPanel","members","emptyState","className","columns","TableEmptyState","DataTable"],"mappings":"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"}

package/dist/components/rbac/PermissionRequestPanel.js

@@ -0,0 +1,141 @@
+import { jsxs as p, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { useState as j } from "react";
+import { Callout as C } from "../Callout.js";
+import { CheckboxField as q } from "../Choice.js";
+import { DescriptionList as G } from "../DescriptionList.js";
+import { FieldSet as A } from "../Field.js";
+import { cn as H } from "../../lib/cn.js";
+import { DateTimeText as S } from "../DateTimeText.js";
+import { RelativeTime as W } from "../RelativeTime.js";
+import { useApprovalActions as O, ApprovalHeader as U, ConfirmCodeCallout as z, ApprovalError as I, ApprovalButtons as J, ExpiredNotice as M, TerminalCallout as b } from "./approvalPanelParts.js";
+import { groupByCategory as Q } from "./permissionSections.js";
+import { useUiStrings as x } from "../../lib/i18n/provider.js";
+function D(t, r) {
+  return [...new Set(t)].map((i) => r.find((o) => o.key === i) ?? { key: i, label: i });
+}
+function V(t, r, i) {
+  const { permissionRequest: o, approval: n } = t;
+  return [
+    { key: "key", term: o.key, value: r.keyName },
+    {
+      key: "requested",
+      term: n.requested,
+      value: /* @__PURE__ */ p(u, { children: [
+        /* @__PURE__ */ e(S, { at: r.requestedAt }),
+        " (",
+        /* @__PURE__ */ e(W, { at: r.requestedAt, tooltip: !1 }),
+        ")"
+      ] })
+    },
+    i && r.expiresAt ? { key: "expires", term: n.expires, value: /* @__PURE__ */ e(S, { at: r.expiresAt }) } : null
+  ].filter((c) => c !== null);
+}
+function T({ labels: t }) {
+  return /* @__PURE__ */ e("ul", { className: "mt-1 list-disc pl-5", children: t.map((r) => /* @__PURE__ */ e("li", { children: r }, r)) });
+}
+function X({
+  state: t,
+  request: r,
+  permissions: i,
+  expiredNote: o
+}) {
+  const n = x().permissionRequest, a = r.grantedKeys && r.grantedKeys.length > 0 ? D(r.grantedKeys, i).map((c) => c.label) : null;
+  switch (t) {
+    case "approved":
+      return /* @__PURE__ */ e(b, { state: t, children: a ? /* @__PURE__ */ p(u, { children: [
+        n.approvedWithList,
+        /* @__PURE__ */ e(T, { labels: a })
+      ] }) : n.approvedNoList });
+    case "claimed":
+      return /* @__PURE__ */ e(b, { state: t, children: a ? /* @__PURE__ */ p(u, { children: [
+        n.claimedWithList,
+        /* @__PURE__ */ e(T, { labels: a })
+      ] }) : n.claimedNoList });
+    case "denied":
+      return /* @__PURE__ */ e(b, { state: t, children: n.denied });
+    case "expired":
+      return /* @__PURE__ */ e(M, { note: o, fallback: n.expiredFallback });
+  }
+}
+function Y({
+  permission: t,
+  held: r,
+  checked: i,
+  disabled: o,
+  onCheckedChange: n
+}) {
+  const a = x().permissionRequest, c = t.description || !r ? /* @__PURE__ */ p(u, { children: [
+    t.description && /* @__PURE__ */ e("span", { className: "block", children: t.description }),
+    !r && /* @__PURE__ */ e("span", { className: "block text-danger-text", children: a.notHeld })
+  ] }) : void 0;
+  return /* @__PURE__ */ e(
+    q,
+    {
+      label: t.label,
+      description: c,
+      checked: i,
+      disabled: o || !r,
+      onCheckedChange: n
+    }
+  );
+}
+function ce({
+  request: t,
+  state: r,
+  permissions: i,
+  ownPermissionKeys: o,
+  onApprove: n,
+  onDeny: a,
+  expiredNote: c,
+  className: L
+}) {
+  const f = x(), s = f.permissionRequest, k = new Set(o), g = D(t.permissionKeys, i), v = g.filter((l) => k.has(l.key)), [R, K] = j(/* @__PURE__ */ new Set()), y = v.filter((l) => !R.has(l.key)).map((l) => l.key), F = new Set(y), { busy: N, error: P, run: B } = O(), w = r === "pending";
+  function E(l, h) {
+    K((d) => {
+      const m = new Set(d);
+      return h ? m.delete(l) : m.add(l), m;
+    });
+  }
+  return /* @__PURE__ */ p("div", { className: H("flex flex-col gap-5", L), children: [
+    /* @__PURE__ */ e(U, { title: s.title, state: r }),
+    /* @__PURE__ */ e(G, { entries: V(f, t, w), className: "divide-y divide-border-subtle" }),
+    /* @__PURE__ */ p("figure", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ e("figcaption", { className: "text-xs font-medium text-secondary", children: s.reasonGiven }),
+      /* @__PURE__ */ e("blockquote", { className: "border-l-2 border-accent-border bg-surface-sunken py-2 pl-3 text-sm break-words whitespace-pre-wrap text-secondary", children: t.reason })
+    ] }),
+    w ? /* @__PURE__ */ p(u, { children: [
+      /* @__PURE__ */ e(z, { code: t.confirmCode }),
+      /* @__PURE__ */ e(C, { tone: "warning", title: f.approval.approveOnlyTitle, children: s.approveBody }),
+      /* @__PURE__ */ e(I, { error: P }),
+      v.length === 0 && /* @__PURE__ */ e(C, { tone: "danger", title: s.emptyTitle, children: s.emptyDescription }),
+      g.length > 0 && /* @__PURE__ */ e(A, { legend: s.legend, description: s.legendDescription, children: Q(g, s.otherCategory).map((l) => {
+        const h = l.items.map((d) => /* @__PURE__ */ e(
+          Y,
+          {
+            permission: d,
+            held: k.has(d.key),
+            checked: F.has(d.key),
+            disabled: N !== null,
+            onCheckedChange: (m) => E(d.key, m)
+          },
+          d.key
+        ));
+        return l.label === void 0 ? /* @__PURE__ */ e("div", { className: "flex flex-col gap-3", children: h }, "all") : /* @__PURE__ */ e(A, { legend: l.label, className: "gap-2.5", children: h }, l.label);
+      }) }),
+      /* @__PURE__ */ e(
+        J,
+        {
+          busy: N,
+          run: B,
+          onApprove: () => n(y),
+          onDeny: a,
+          approveDisabled: y.length === 0
+        }
+      )
+    ] }) : /* @__PURE__ */ e(X, { state: r, request: t, permissions: i, expiredNote: c })
+  ] });
+}
+export {
+  ce as PermissionRequestPanel
+};
+//# sourceMappingURL=PermissionRequestPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionRequestPanel.js","sources":["../../../src/components/rbac/PermissionRequestPanel.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Callout } from \"../Callout\";\nimport { CheckboxField } from \"../Choice\";\nimport { DescriptionList, type DescriptionListEntry } from \"../DescriptionList\";\nimport { FieldSet } from \"../Field\";\nimport { cn } from \"../../lib/cn\";\nimport { DateTimeText } from \"../DateTimeText\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { UiStrings } from \"../../lib/i18n\";\nimport {\n  ApprovalButtons,\n  ApprovalError,\n  ApprovalHeader,\n  ConfirmCodeCallout,\n  ExpiredNotice,\n  TerminalCallout,\n  useApprovalActions,\n  type AccessRequestState,\n  type ExpiredNote,\n} from \"./approvalPanelParts\";\nimport { groupByCategory } from \"./permissionSections\";\nimport type { Permission } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   PERMISSION REQUEST PANEL (DX-4433)\n\n   THE SCREEN A PERSON SEES WHEN AN AGENT THAT ALREADY HOLDS A KEY ASKS FOR MORE.\n   The key exists and acts with a role; the agent hit something that role does\n   not allow and asked for specific permissions, with a reason. Approving adds\n   the ones the person leaves checked to that key, on top of its role. This\n   panel is the whole decision: which key is asking, why, the code to compare,\n   which of the requested permissions to grant, approve or deny. It is the\n   sibling of `AccessRequestPanel` (a request for a key and a role), and shares\n   its header, confirm code, terminal callouts and busy / error handling with it\n   (`approvalPanelParts`), so the two cards read as one screen.\n\n   PRESENTATIONAL, like its sibling. It fetches nothing and knows no endpoint.\n   `state` is whatever the consumer's server derived and is never assumed to\n   follow a click: after `onApprove` resolves the panel stays \"pending\" until\n   the consumer hands it `state=\"approved\"` (and `request.grantedKeys`).\n   A rejection from `onApprove` / `onDeny` shows its message and re-enables the\n   buttons.\n\n   THE PERSON CAN GRANT LESS, NEVER MORE. Every grantable permission starts\n   CHECKED, because the person is answering the agent's own ask, and unchecking\n   is how a subset is approved: `onApprove` receives exactly the checked keys.\n   A requested permission the approver does not hold (`ownPermissionKeys`) is\n   shown unchecked and disabled with the reason, and is never passed to\n   `onApprove`: nobody can hand out what they lack. The server refuses it\n   anyway, so the disabled row is the same rule shown before the round trip.\n   Approve is disabled while nothing is checked; Deny never is. With nothing\n   grantable the panel says so and keeps only Deny.\n\n   THE REASON IS THE AGENT'S WORDS, SO IT IS DATA. It renders as quoted plain\n   text (React escapes it; no markdown, no links). The confirm code is for\n   comparing, not copying, exactly as in `AccessRequestPanel`.\n\n   A permission key the catalog does not know renders with the raw key as its\n   label: an agent can ask for a key this consumer's catalog lacks, and the\n   person must still see what is being asked rather than a blank row.\n   ---------------------------------------------------------------------------- */\n\nexport interface PermissionRequest {\n  /** The name of the key that is asking: what the agent's key is called. */\n  keyName: string;\n  /** The agent's stated reason, plain text. */\n  reason: string;\n  /** The permission keys requested, in the order the agent listed them. */\n  permissionKeys: string[];\n  /** ISO instant. */\n  requestedAt: string;\n  /** ISO instant. Shown while the request is pending. */\n  expiresAt?: string;\n  /** The short code the agent also displays. Compared by eye, never entered. */\n  confirmCode: string;\n  /** What was actually granted (a subset of `permissionKeys`). Shown once the request is approved or claimed. */\n  grantedKeys?: string[];\n}\n\nexport interface PermissionRequestPanelProps {\n  request: PermissionRequest;\n  state: AccessRequestState;\n  /** The permission catalog: labels, categories and descriptions for the requested keys. */\n  permissions: Permission[];\n  /** What the approver holds. A requested permission outside this set is shown disabled and can never be granted. */\n  ownPermissionKeys: string[];\n  /** Receives exactly the permission keys left checked. */\n  onApprove: (permissionKeys: string[]) => Promise<void>;\n  onDeny: () => Promise<void>;\n  /**\n   * Why an expired request expired and what its requester does next. Used only in the `expired` state; without it the readout says only\n   * that nothing was granted.\n   */\n  expiredNote?: ExpiredNote;\n  className?: string;\n}\n\n/** The catalog entry for each distinct requested key, in request order; a key the catalog lacks stands for itself. */\nfunction requestedPermissions(keys: string[], catalog: Permission[]): Permission[] {\n  return [...new Set(keys)].map((key) => catalog.find((p) => p.key === key) ?? { key, label: key });\n}\n\nfunction factEntries(strings: UiStrings, request: PermissionRequest, pending: boolean): DescriptionListEntry[] {\n  const { permissionRequest, approval } = strings;\n  const entries: (DescriptionListEntry | null)[] = [\n    { key: \"key\", term: permissionRequest.key, value: request.keyName },\n    {\n      key: \"requested\",\n      term: approval.requested,\n      value: (\n        <>\n          <DateTimeText at={request.requestedAt} /> (<RelativeTime at={request.requestedAt} tooltip={false} />)\n        </>\n      ),\n    },\n    pending && request.expiresAt ? { key: \"expires\", term: approval.expires, value: <DateTimeText at={request.expiresAt} /> } : null,\n  ];\n  return entries.filter((entry): entry is DescriptionListEntry => entry !== null);\n}\n\nfunction GrantedList({ labels }: { labels: string[] }) {\n  return (\n    <ul className=\"mt-1 list-disc pl-5\">\n      {labels.map((label) => (\n        <li key={label}>{label}</li>\n      ))}\n    </ul>\n  );\n}\n\nfunction TerminalNotice({\n  state,\n  request,\n  permissions,\n  expiredNote,\n}: {\n  state: Exclude<AccessRequestState, \"pending\">;\n  request: PermissionRequest;\n  permissions: Permission[];\n  expiredNote: ExpiredNote | undefined;\n}) {\n  const strings = useUiStrings().permissionRequest;\n  const granted = request.grantedKeys && request.grantedKeys.length > 0\n    ? requestedPermissions(request.grantedKeys, permissions).map((p) => p.label)\n    : null;\n  switch (state) {\n    case \"approved\":\n      return (\n        <TerminalCallout state={state}>\n          {granted ? (\n            <>\n              {strings.approvedWithList}\n              <GrantedList labels={granted} />\n            </>\n          ) : (\n            strings.approvedNoList\n          )}\n        </TerminalCallout>\n      );\n    case \"claimed\":\n      return (\n        <TerminalCallout state={state}>\n          {granted ? (\n            <>\n              {strings.claimedWithList}\n              <GrantedList labels={granted} />\n            </>\n          ) : (\n            strings.claimedNoList\n          )}\n        </TerminalCallout>\n      );\n    case \"denied\":\n      return (\n        <TerminalCallout state={state}>\n          {strings.denied}\n        </TerminalCallout>\n      );\n    case \"expired\":\n      return <ExpiredNotice note={expiredNote} fallback={strings.expiredFallback} />;\n  }\n}\n\nfunction PermissionCheckbox({\n  permission,\n  held,\n  checked,\n  disabled,\n  onCheckedChange,\n}: {\n  permission: Permission;\n  held: boolean;\n  checked: boolean;\n  disabled: boolean;\n  onCheckedChange: (checked: boolean) => void;\n}) {\n  const strings = useUiStrings().permissionRequest;\n  const description =\n    permission.description || !held ? (\n      <>\n        {permission.description && <span className=\"block\">{permission.description}</span>}\n        {!held && <span className=\"block text-danger-text\">{strings.notHeld}</span>}\n      </>\n    ) : undefined;\n  return (\n    <CheckboxField\n      label={permission.label}\n      description={description}\n      checked={checked}\n      disabled={disabled || !held}\n      onCheckedChange={onCheckedChange}\n    />\n  );\n}\n\nexport function PermissionRequestPanel({\n  request,\n  state,\n  permissions,\n  ownPermissionKeys,\n  onApprove,\n  onDeny,\n  expiredNote,\n  className,\n}: PermissionRequestPanelProps) {\n  const allStrings = useUiStrings();\n  const strings = allStrings.permissionRequest;\n  const own = new Set(ownPermissionKeys);\n  const requested = requestedPermissions(request.permissionKeys, permissions);\n  const grantable = requested.filter((p) => own.has(p.key));\n  // What the person unchecked, not what they checked: every grantable permission starts checked, and the checked set is\n  // derived, so permissions that arrive or become grantable after mount start checked too and Approve can never submit a\n  // key the rows show as unavailable.\n  const [dropped, setDropped] = useState<ReadonlySet<string>>(new Set());\n  const checkedKeys = grantable.filter((p) => !dropped.has(p.key)).map((p) => p.key);\n  const checked = new Set(checkedKeys);\n  const { busy, error, run } = useApprovalActions();\n\n  const pending = state === \"pending\";\n\n  function toggle(key: string, on: boolean) {\n    setDropped((prev) => {\n      const next = new Set(prev);\n      if (on) next.delete(key);\n      else next.add(key);\n      return next;\n    });\n  }\n\n  return (\n    <div className={cn(\"flex flex-col gap-5\", className)}>\n      <ApprovalHeader title={strings.title} state={state} />\n\n      <DescriptionList entries={factEntries(allStrings, request, pending)} className=\"divide-y divide-border-subtle\" />\n\n      <figure className=\"flex flex-col gap-1.5\">\n        <figcaption className=\"text-xs font-medium text-secondary\">{strings.reasonGiven}</figcaption>\n        <blockquote className=\"border-l-2 border-accent-border bg-surface-sunken py-2 pl-3 text-sm break-words whitespace-pre-wrap text-secondary\">\n          {request.reason}\n        </blockquote>\n      </figure>\n\n      {pending ? (\n        <>\n          <ConfirmCodeCallout code={request.confirmCode} />\n\n          <Callout tone=\"warning\" title={allStrings.approval.approveOnlyTitle}>\n            {strings.approveBody}\n          </Callout>\n\n          <ApprovalError error={error} />\n\n          {grantable.length === 0 && (\n            <Callout tone=\"danger\" title={strings.emptyTitle}>\n              {strings.emptyDescription}\n            </Callout>\n          )}\n\n          {requested.length > 0 && (\n            <FieldSet legend={strings.legend} description={strings.legendDescription}>\n              {groupByCategory(requested, strings.otherCategory).map((section) => {\n                const rows = section.items.map((permission) => (\n                  <PermissionCheckbox\n                    key={permission.key}\n                    permission={permission}\n                    held={own.has(permission.key)}\n                    checked={checked.has(permission.key)}\n                    disabled={busy !== null}\n                    onCheckedChange={(on) => toggle(permission.key, on)}\n                  />\n                ));\n                return section.label === undefined ? (\n                  <div key=\"all\" className=\"flex flex-col gap-3\">\n                    {rows}\n                  </div>\n                ) : (\n                  <FieldSet key={section.label} legend={section.label} className=\"gap-2.5\">\n                    {rows}\n                  </FieldSet>\n                );\n              })}\n            </FieldSet>\n          )}\n\n          <ApprovalButtons\n            busy={busy}\n            run={run}\n            onApprove={() => onApprove(checkedKeys)}\n            onDeny={onDeny}\n            approveDisabled={checkedKeys.length === 0}\n          />\n        </>\n      ) : (\n        <TerminalNotice state={state} request={request} permissions={permissions} expiredNote={expiredNote} />\n      )}\n    </div>\n  );\n}\n"],"names":["requestedPermissions","keys","catalog","key","p","factEntries","strings","request","pending","permissionRequest","approval","jsxs","Fragment","jsx","DateTimeText","RelativeTime","entry","GrantedList","labels","label","TerminalNotice","state","permissions","expiredNote","useUiStrings","granted","TerminalCallout","ExpiredNotice","PermissionCheckbox","permission","held","checked","disabled","onCheckedChange","description","CheckboxField","PermissionRequestPanel","ownPermissionKeys","onApprove","onDeny","className","allStrings","own","requested","grantable","dropped","setDropped","useState","checkedKeys","busy","error","run","useApprovalActions","toggle","on","prev","next","cn","ApprovalHeader","DescriptionList","ConfirmCodeCallout","Callout","ApprovalError","FieldSet","section","rows","ApprovalButtons"],"mappings":"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"}

package/dist/components/rbac/ProfileForm.js

@@ -0,0 +1,86 @@
+import { jsx as i, jsxs as y } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Callout as C } from "../Callout.js";
+import { Field as u } from "../Field.js";
+import { ImageUploadField as T } from "../ImageUploadField.js";
+import { Input as h } from "../Input.js";
+import { useSaveFlow as k, StagedFormActions as q } from "./stagedForm.js";
+import { useStagedImage as z } from "./useStagedImage.js";
+import { useUiStrings as B } from "../../lib/i18n/provider.js";
+function X({
+  account: e,
+  onSave: N,
+  onUploadAvatar: D,
+  saveLabel: c,
+  discardLabel: I,
+  className: j
+}) {
+  const g = B(), l = g.profileForm, [n, f] = p(e.name), [d, S] = p(e.username ?? ""), [s, F] = p(e.email), a = z(e.avatarUrl, D), { saving: t, saved: w, error: U, edit: m, save: A } = k(l.failedMessage), o = e.username !== void 0, v = e.username ?? "", b = n.trim() !== e.name || o && d.trim() !== v || s.trim() !== e.email || a.dirty, E = n !== e.name || o && d !== v || s !== e.email || a.dirty, x = b && n.trim().length > 0 && s.trim().length > 0 && !t && !a.uploading;
+  function M() {
+    if (!x) return;
+    const r = {
+      name: n.trim(),
+      username: o ? d.trim() : void 0,
+      email: s.trim()
+    };
+    a.dirty && (r.avatarUrl = a.value), A(() => N(r));
+  }
+  function P() {
+    m(() => {
+      f(e.name), S(v), F(e.email), a.discard();
+    });
+  }
+  return /* @__PURE__ */ i("div", { className: j, children: /* @__PURE__ */ y("div", { className: "flex flex-col gap-5", children: [
+    w && !b && /* @__PURE__ */ i(C, { tone: "success", title: l.saved }),
+    U && /* @__PURE__ */ i(C, { tone: "danger", title: l.failedTitle, children: U }),
+    /* @__PURE__ */ i(
+      T,
+      {
+        label: l.avatar,
+        value: a.value,
+        shape: "circle",
+        disabled: t,
+        onUpload: a.upload,
+        onChange: (r) => m(() => a.stage(r)),
+        description: a.dirty ? g.stagedForm.imageNote("avatar", c ?? g.stagedForm.save, a.value === null) : void 0
+      }
+    ),
+    /* @__PURE__ */ y("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+      /* @__PURE__ */ i(u, { label: l.name, children: /* @__PURE__ */ i(h, { value: n, onChange: (r) => m(() => f(r.target.value)), disabled: t }) }),
+      o && /* @__PURE__ */ i(u, { label: l.username, children: /* @__PURE__ */ i(
+        h,
+        {
+          value: d,
+          onChange: (r) => m(() => S(r.target.value)),
+          disabled: t,
+          leading: /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "@" })
+        }
+      ) }),
+      /* @__PURE__ */ i(u, { label: l.email, children: /* @__PURE__ */ i(
+        h,
+        {
+          type: "email",
+          value: s,
+          onChange: (r) => m(() => F(r.target.value)),
+          disabled: t
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(
+      q,
+      {
+        onSave: M,
+        onDiscard: P,
+        canSave: x,
+        canDiscard: E && !a.uploading,
+        saving: t,
+        saveLabel: c,
+        discardLabel: I
+      }
+    )
+  ] }) });
+}
+export {
+  X as ProfileForm
+};
+//# sourceMappingURL=ProfileForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileForm.js","sources":["../../../src/components/rbac/ProfileForm.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   PROFILE FORM\n\n   THE ATOMIC, CONTROLLED HALF OF ACCOUNT IDENTITY — name, username, email,\n   avatar, and one `onSave`. Nothing here reads `useRBAC()`, knows about roles\n   or permissions, or has an opinion about impersonation; that is precisely\n   what makes it a separate component from `ProfilePage` rather than a mode of\n   it (see that file's own header for how the two compose). A consumer that\n   only wants an identity-editing card somewhere OTHER than a full profile\n   page — a settings drawer, an onboarding step — uses this directly.\n\n   DX-4131 — THE AVATAR IS STAGED, NOT SAVED ON UPLOAD. `onUploadAvatar` only\n   has to put the file somewhere and resolve with its URL; nothing about the\n   account may change then. The picked (or removed) avatar is held as form\n   state, previewed at once with a \"Not saved yet\" note, and handed to `onSave`\n   — with the text fields — when Save is clicked. Discard drops every edit,\n   the avatar included, without a request. (The avatar used to persist the\n   moment its upload resolved while the text fields waited for Save, so one\n   form had two save models and a new picture could not be taken back.)\n\n   `onSave` RECEIVES `avatarUrl` ONLY WHEN THE AVATAR CHANGED. The key is\n   absent for a text-only Save (keep the stored avatar), `null` for a staged\n   removal, a URL for a staged upload — the same three states a `PATCH` body\n   carries (omitted keeps, `null` clears, string sets).\n\n   SEEDED ONCE FROM `account`, THEN LOCAL — same convention `RoleEditorDialog`\n   uses for its own label/description fields (see that file's header): this\n   form's local draft does not silently overwrite itself if `account` changes\n   underneath it (e.g. a background refetch), because that would discard\n   whatever the operator is mid-typing. A consumer that needs the draft to\n   follow a genuinely new account (switching accounts, not refreshing the same\n   one) remounts this component with a `key` — the standard React answer to\n   \"start this local state over.\" (The staged avatar follows the saved one\n   until it is staged — see `useStagedImage`.)\n   ========================================================================= */\n\nexport interface ProfileFormAccount {\n  name: string;\n  /** Omit entirely for a consumer whose account model has no separate\n   *  username concept — the field simply does not render (see `types.ts`'s\n   *  own `User.username` doc for the same optional-field convention). */\n  username?: string;\n  email: string;\n  avatarUrl?: string | null;\n}\n\nexport interface ProfileFormSaveInput {\n  name: string;\n  username?: string;\n  email: string;\n  /** Present only when the avatar changed: a URL sets it, `null` removes it. */\n  avatarUrl?: string | null;\n}\n\nexport interface ProfileFormProps {\n  account: ProfileFormAccount;\n  onSave: (input: ProfileFormSaveInput) => Promise<void>;\n  /** Uploads the file to storage and resolves with its URL. Must NOT change the\n   *  account — the avatar is only persisted by `onSave`. */\n  onUploadAvatar: (file: File) => Promise<string>;\n  saveLabel?: string;\n  discardLabel?: string;\n  className?: string;\n}\n\nexport function ProfileForm({\n  account,\n  onSave,\n  onUploadAvatar,\n  saveLabel,\n  discardLabel,\n  className,\n}: ProfileFormProps) {\n  const allStrings = useUiStrings();\n  const strings = allStrings.profileForm;\n  const [name, setName] = useState(account.name);\n  const [username, setUsername] = useState(account.username ?? \"\");\n  const [email, setEmail] = useState(account.email);\n  const avatar = useStagedImage(account.avatarUrl, onUploadAvatar);\n  const { saving, saved, error, edit, save } = useSaveFlow(strings.failedMessage);\n\n  const hasUsername = account.username !== undefined;\n  const savedUsername = account.username ?? \"\";\n  // `changed` is what Save would send (trimmed values); `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 =\n    name.trim() !== account.name ||\n    (hasUsername && username.trim() !== savedUsername) ||\n    email.trim() !== account.email ||\n    avatar.dirty;\n  const touched =\n    name !== account.name || (hasUsername && username !== savedUsername) || email !== account.email || avatar.dirty;\n  const canSave = changed && name.trim().length > 0 && email.trim().length > 0 && !saving && !avatar.uploading;\n\n  function handleSave() {\n    if (!canSave) return;\n    const input: ProfileFormSaveInput = {\n      name: name.trim(),\n      username: hasUsername ? username.trim() : undefined,\n      email: email.trim(),\n    };\n    if (avatar.dirty) input.avatarUrl = avatar.value;\n    void save(() => onSave(input));\n  }\n\n  function handleDiscard() {\n    edit(() => {\n      setName(account.name);\n      setUsername(savedUsername);\n      setEmail(account.email);\n      avatar.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\n        <ImageUploadField\n          label={strings.avatar}\n          value={avatar.value}\n          shape=\"circle\"\n          disabled={saving}\n          onUpload={avatar.upload}\n          onChange={(url) => edit(() => avatar.stage(url))}\n          description={avatar.dirty ? allStrings.stagedForm.imageNote(\"avatar\", saveLabel ?? allStrings.stagedForm.save, avatar.value === null) : undefined}\n        />\n\n        <div className=\"grid gap-4 sm:grid-cols-2\">\n          <Field label={strings.name}>\n            <Input value={name} onChange={(event) => edit(() => setName(event.target.value))} disabled={saving} />\n          </Field>\n          {hasUsername && (\n            <Field label={strings.username}>\n              <Input\n                value={username}\n                onChange={(event) => edit(() => setUsername(event.target.value))}\n                disabled={saving}\n                leading={<span aria-hidden>@</span>}\n              />\n            </Field>\n          )}\n          <Field label={strings.email}>\n            <Input\n              type=\"email\"\n              value={email}\n              onChange={(event) => edit(() => setEmail(event.target.value))}\n              disabled={saving}\n            />\n          </Field>\n        </div>\n\n        <StagedFormActions\n          onSave={handleSave}\n          onDiscard={handleDiscard}\n          canSave={canSave}\n          canDiscard={touched && !avatar.uploading}\n          saving={saving}\n          saveLabel={saveLabel}\n          discardLabel={discardLabel}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["ProfileForm","account","onSave","onUploadAvatar","saveLabel","discardLabel","className","allStrings","useUiStrings","strings","name","setName","useState","username","setUsername","email","setEmail","avatar","useStagedImage","saving","saved","error","edit","save","useSaveFlow","hasUsername","savedUsername","changed","touched","canSave","handleSave","input","handleDiscard","jsxs","jsx","Callout","ImageUploadField","url","Field","Input","event","StagedFormActions"],"mappings":"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"}

package/dist/components/rbac/ProfilePage.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as a, Fragment as P } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Avatar as R } from "../Avatar.js";
+import { Field as g } from "../Field.js";
+import { Icon as I } from "../Icon.js";
+import { Input as u } from "../Input.js";
+import { useRBAC as y } from "./RBACProvider.js";
+import { ProfileForm as k } from "./ProfileForm.js";
+import { useUiStrings as b } from "../../lib/i18n/provider.js";
+import { emphasis as N } from "../../lib/i18n/emphasis.js";
+function S({
+  account: r,
+  onSave: s,
+  onUploadAvatar: i,
+  heading: m = !0,
+  className: n
+}) {
+  const t = b().profilePage, { actualUser: l, actualRole: p, effectiveRole: o, grantedPermissions: f, isImpersonating: v, currentTeam: c } = y(), d = !!(r && s && i);
+  return /* @__PURE__ */ e("div", { className: n, children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-6", children: [
+    (m || !d) && /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+      !d && /* @__PURE__ */ e(R, { name: l.name, src: l.avatarUrl, size: "xl" }),
+      m && /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ e("h1", { className: "font-display text-xl font-semibold text-primary", children: t.title }),
+        c && /* @__PURE__ */ e("p", { className: "truncate text-sm text-tertiary", children: c.name })
+      ] })
+    ] }),
+    d ? /* @__PURE__ */ e(
+      k,
+      {
+        account: r,
+        onSave: s,
+        onUploadAvatar: i
+      }
+    ) : /* @__PURE__ */ e(C, {}),
+    /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 border-t border-border-subtle pt-5", children: [
+      /* @__PURE__ */ e("h2", { className: "font-display text-md font-semibold text-primary", children: t.rolesHeading }),
+      v && p && /* @__PURE__ */ e("p", { role: "status", className: "text-xs text-tertiary", children: t.viewingAs(o?.label ?? "", p.label, N) }),
+      o ? /* @__PURE__ */ a(P, { children: [
+        /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: t.holdsRole(o.label, c?.name, N) }),
+        f.length > 0 ? /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: f.map((x) => /* @__PURE__ */ a("li", { className: "flex items-start gap-2 text-sm text-secondary", children: [
+          /* @__PURE__ */ e(I, { name: "check", size: "sm", className: "mt-0.5 shrink-0 text-success" }),
+          /* @__PURE__ */ e("span", { children: x.label })
+        ] }, x.key)) }) : /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: t.noPermissions })
+      ] }) : /* @__PURE__ */ e("p", { className: "text-sm text-tertiary", children: t.noRole })
+    ] })
+  ] }) });
+}
+function C() {
+  const r = b().profilePage, { actualUser: s } = y(), [i, m] = h(s.name), [n, t] = h(s.email);
+  return /* @__PURE__ */ a("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+    /* @__PURE__ */ e(g, { label: r.name, children: /* @__PURE__ */ e(u, { value: i, onChange: (l) => m(l.target.value) }) }),
+    /* @__PURE__ */ e(g, { label: r.email, children: /* @__PURE__ */ e(u, { type: "email", value: n, onChange: (l) => t(l.target.value) }) })
+  ] });
+}
+export {
+  S as ProfilePage
+};
+//# sourceMappingURL=ProfilePage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfilePage.js","sources":["../../../src/components/rbac/ProfilePage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Avatar } from \"../Avatar\";\nimport { Field } from \"../Field\";\nimport { Icon } from \"../Icon\";\nimport { Input } from \"../Input\";\nimport { emphasis, useUiStrings } from \"../../lib/i18n\";\nimport { useRBAC } from \"./RBACProvider\";\nimport { ProfileForm, type ProfileFormAccount, type ProfileFormSaveInput } from \"./ProfileForm\";\n\n/* ============================================================================\n   PROFILE PAGE\n\n   IDENTITY VS. ROLE, KEPT DELIBERATELY SEPARATE. The name/email/avatar block\n   always shows `actualUser` — impersonation swaps which ROLE the app treats\n   you as, never which USER you are, so \"who am I\" and \"what can I currently\n   do\" are two different questions answered from two different fields\n   (`actualUser` vs. `effectiveRole`).\n\n   \"WHAT CAN I CURRENTLY DO\" USES `effectiveRole`, ON PURPOSE. Everywhere else\n   in an app built on this library, impersonation is meant to change what the\n   UI shows — that is the entire feature. Profile is an ordinary page, not\n   Dev Tools, so it plays along with the impersonated view like any other\n   screen would; the one exemption from that rule belongs solely to\n   `canAccessDevTools` (see `RBACProvider.tsx`). A banner still names the\n   difference explicitly while impersonating, so nobody reads a stranger's\n   permissions and mistakes them for their own standing access.\n\n   DX-3411 — PROPS-DRIVEN IDENTITY, OPTIONAL AND BACKWARD-COMPATIBLE. This page\n   used to have no props at all: the name/email inputs were local `useState`,\n   editable but inert, on purpose (this library never owns a save action).\n   `account` / `onSave` / `onUploadAvatar` add that save action WITHOUT taking\n   away the old shape — omit all three (or just `onSave`/`onUploadAvatar`, the\n   two this page actually needs to make identity SAVABLE) and the page falls\n   straight back to the original read-only-but-editable `actualUser` display,\n   pixel for pixel, exactly as every existing consumer already gets. Passing\n   them swaps that block for `ProfileForm` — the new, atomic, `useRBAC()`-free\n   controlled component this card also introduces (see its own header) — while\n   the roles & permissions section below stays exactly what it always was:\n   read-only, sourced from `useRBAC()`, and unaffected by whether identity is\n   savable.\n   ========================================================================= */\n\nexport interface ProfilePageProps {\n  /** The identity fields to edit. Omit to keep the original read-only (but\n   *  still locally-editable) `actualUser` display. */\n  account?: ProfileFormAccount;\n  onSave?: (input: ProfileFormSaveInput) => Promise<void>;\n  /** Uploads the file and resolves with its URL; the avatar is persisted only by `onSave` (DX-4131). */\n  onUploadAvatar?: (file: File) => Promise<string>;\n  /** DX-4029: `false` omits the page's own title text (the `<h1>` and the\n   *  team-name line) so a host layout can own the screen's one `<h1>`. The\n   *  read-only avatar (content, not title) stays, and the default `true` is\n   *  the unchanged render. */\n  heading?: boolean;\n  className?: string;\n}\n\nexport function ProfilePage({\n  account,\n  onSave,\n  onUploadAvatar,\n  heading = true,\n  className,\n}: ProfilePageProps) {\n  const strings = useUiStrings().profilePage;\n  const { actualUser, actualRole, effectiveRole, grantedPermissions, isImpersonating, currentTeam } = useRBAC();\n\n  /* All three of `account`/`onSave`/`onUploadAvatar` are needed to make\n     identity genuinely savable — a consumer that supplies `account` without\n     the two callbacks would get a form with no way to act on it, which is\n     worse than the plain read-only display it would otherwise fall back to. */\n  const savable = Boolean(account && onSave && onUploadAvatar);\n\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-6\">\n        {(heading || !savable) && (\n          <div className=\"flex items-center gap-4\">\n            {/* The savable form renders its OWN avatar control (`ImageUploadField`,\n                inside `ProfileForm`) — showing a second, read-only avatar here\n                too would just be the same picture twice. */}\n            {!savable && <Avatar name={actualUser.name} src={actualUser.avatarUrl} size=\"xl\" />}\n            {/* DX-4029: no title block at all when the host owns the h1, so no empty\n                row or gap is left behind. */}\n            {heading && (\n              <div className=\"min-w-0\">\n                <h1 className=\"font-display text-xl font-semibold text-primary\">{strings.title}</h1>\n                {currentTeam && <p className=\"truncate text-sm text-tertiary\">{currentTeam.name}</p>}\n              </div>\n            )}\n          </div>\n        )}\n\n        {savable ? (\n          <ProfileForm\n            account={account!}\n            onSave={onSave!}\n            onUploadAvatar={onUploadAvatar!}\n          />\n        ) : (\n          <ProfilePageReadOnlyIdentity />\n        )}\n\n        <div className=\"flex flex-col gap-3 border-t border-border-subtle pt-5\">\n          <h2 className=\"font-display text-md font-semibold text-primary\">{strings.rolesHeading}</h2>\n\n          {isImpersonating && actualRole && (\n            <p role=\"status\" className=\"text-xs text-tertiary\">\n              {strings.viewingAs(effectiveRole?.label ?? \"\", actualRole.label, emphasis)}\n            </p>\n          )}\n\n          {effectiveRole ? (\n            <>\n              <p className=\"text-sm text-secondary\">\n                {strings.holdsRole(effectiveRole.label, currentTeam?.name, emphasis)}\n              </p>\n              {grantedPermissions.length > 0 ? (\n                <ul className=\"flex flex-col gap-2\">\n                  {grantedPermissions.map((permission) => (\n                    <li key={permission.key} className=\"flex items-start gap-2 text-sm text-secondary\">\n                      <Icon name=\"check\" size=\"sm\" className=\"mt-0.5 shrink-0 text-success\" />\n                      <span>{permission.label}</span>\n                    </li>\n                  ))}\n                </ul>\n              ) : (\n                <p className=\"text-sm text-tertiary\">{strings.noPermissions}</p>\n              )}\n            </>\n          ) : (\n            <p className=\"text-sm text-tertiary\">{strings.noRole}</p>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The ORIGINAL name/email block, unmoved and unchanged — `useState` seeded\n * from `actualUser`, editable but wired to nothing, exactly as this page has\n * always behaved for a consumer that supplies no save action. Split into its\n * own function only so `ProfilePage` doesn't have to hold two unrelated\n * `useState` pairs (this one, and whatever `ProfileForm` owns) live in the\n * same component at once depending on a prop.\n */\nfunction ProfilePageReadOnlyIdentity() {\n  const strings = useUiStrings().profilePage;\n  const { actualUser } = useRBAC();\n  const [name, setName] = useState(actualUser.name);\n  const [email, setEmail] = useState(actualUser.email);\n\n  return (\n    <div className=\"grid gap-4 sm:grid-cols-2\">\n      <Field label={strings.name}>\n        <Input value={name} onChange={(event) => setName(event.target.value)} />\n      </Field>\n      <Field label={strings.email}>\n        <Input type=\"email\" value={email} onChange={(event) => setEmail(event.target.value)} />\n      </Field>\n    </div>\n  );\n}\n"],"names":["ProfilePage","account","onSave","onUploadAvatar","heading","className","strings","useUiStrings","actualUser","actualRole","effectiveRole","grantedPermissions","isImpersonating","currentTeam","useRBAC","savable","jsxs","jsx","Avatar","ProfileForm","ProfilePageReadOnlyIdentity","emphasis","Fragment","permission","Icon","name","setName","useState","email","setEmail","Field","Input","event"],"mappings":"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"}

package/dist/components/rbac/RBACProvider.js

@@ -0,0 +1,82 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as y, useMemo as i, useCallback as I, useContext as k, createContext as K } from "react";
+const x = K(null);
+function j({
+  currentUser: t,
+  roles: o,
+  permissions: u,
+  teams: c,
+  memberships: d,
+  currentTeamId: f,
+  canAccessDevTools: C,
+  children: B
+}) {
+  const [e, g] = y(null), R = i(
+    () => c.find((n) => n.id === f),
+    [c, f]
+  ), l = i(() => {
+    const n = d.find(
+      (v) => v.userId === t.id && v.teamId === f
+    );
+    if (n)
+      return o.find((v) => v.id === n.roleId);
+  }, [d, o, t.id, f]), a = i(
+    () => e ? o.find((n) => n.id === e) : l,
+    [e, o, l]
+  ), s = i(
+    () => new Set(a?.permissionKeys ?? []),
+    [a]
+  ), A = I(
+    (n) => s.has(n),
+    [s]
+  ), w = i(
+    () => u.filter((n) => s.has(n.key)),
+    [u, s]
+  ), P = i(
+    () => C(t, o, d),
+    [C, t, o, d]
+  ), h = i(
+    () => ({
+      actualUser: t,
+      currentTeam: R,
+      actualRole: l,
+      viewingAsRoleId: e,
+      setViewingAsRoleId: g,
+      effectiveRole: a,
+      effectivePermissionKeys: s,
+      grantedPermissions: w,
+      hasPermission: A,
+      canAccessDevTools: P,
+      isImpersonating: e !== null,
+      roles: o,
+      permissions: u,
+      teams: c
+    }),
+    [
+      t,
+      R,
+      l,
+      e,
+      a,
+      s,
+      w,
+      A,
+      P,
+      o,
+      u,
+      c
+    ]
+  );
+  return /* @__PURE__ */ r(x.Provider, { value: h, children: B });
+}
+function D() {
+  const t = k(x);
+  if (!t)
+    throw new Error("useRBAC must be used within an <RBACProvider>.");
+  return t;
+}
+export {
+  j as RBACProvider,
+  D as useRBAC
+};
+//# sourceMappingURL=RBACProvider.js.map