cortena-ui 1.4.2 → 1.5.0

package/dist/components/admin-permissions/matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix.js","names":[],"sources":["../../../src/components/admin-permissions/matrix.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/components/button\";\nimport { Checkbox } from \"@/components/checkbox\";\nimport { EmptyState } from \"@/components/empty-state\";\nimport { ErrorBanner } from \"@/components/error-banner\";\nimport { LoadingSkeleton } from \"@/components/loading-skeleton\";\nimport { SectionCard } from \"@/components/section-card\";\nimport { Spinner } from \"@/components/spinner\";\nimport { useAdminPermissions } from \"./context\";\nimport { adminErrorMessage, type AdminPermissionMatrix } from \"./types\";\n\nfunction grantsEqual(a: Record<string, string[]>, b: Record<string, string[]>): boolean {\n  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);\n  for (const key of keys) {\n    const left = [...(a[key] ?? [])].sort();\n    const right = [...(b[key] ?? [])].sort();\n    if (left.length !== right.length) return false;\n    if (left.some((value, i) => value !== right[i])) return false;\n  }\n  return true;\n}\n\n/**\n * `/admin/permissions` — the extension's own roles × actions matrix, the one\n * document `may()` reads (§13.2, P-14).\n *\n * A grid of checkboxes, and nothing clever: rows are the roles the extension\n * declares, columns are the actions it declares, and a tick is a grant. The\n * screen holds a draft rather than writing per click — a permission matrix is\n * edited as a whole thought, and a half-applied one is a security hole with a\n * progress spinner over it — so the edits accumulate, Save PUTs the document\n * and Discard throws the draft away.\n *\n * The roles and the actions are both read-only here: they are the extension's\n * declared vocabulary, changed in its source, not in an admin screen.\n */\nexport function AdminMatrix() {\n  const { matrix, matrixState, saveMatrix } = useAdminPermissions();\n  const [draft, setDraft] = React.useState<Record<string, string[]> | null>(null);\n  const [saving, setSaving] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n\n  // Re-seed when a different document arrives: a reload, the optimistic copy\n  // this screen just wrote, or the rollback that put the server's back.\n  // Adjusting state during render, not an effect.\n  //\n  // The error is deliberately NOT cleared here. A failed save rolls the\n  // optimistic copy back, which lands as exactly this re-seed, in the same\n  // batch as the message — clearing it would wipe the message that explains\n  // why the grid just moved. Save and Discard clear it instead.\n  const [seeded, setSeeded] = React.useState<AdminPermissionMatrix | null>(matrix);\n  if (matrix !== seeded) {\n    setSeeded(matrix);\n    setDraft(null);\n  }\n\n  if (matrixState.error) {\n    return <ErrorBanner message={matrixState.error.message} onRetry={matrixState.reload} />;\n  }\n  if (!matrix) {\n    return <LoadingSkeleton preset=\"table\" data-slot=\"admin-matrix-loading\" />;\n  }\n\n  const grants = draft ?? matrix.grants;\n  const dirty = draft !== null && !grantsEqual(draft, matrix.grants);\n\n  const toggle = (role: string, action: string, checked: boolean) => {\n    setDraft((prev) => {\n      const base = prev ?? matrix.grants;\n      const current = base[role] ?? [];\n      const next = checked\n        ? current.includes(action)\n          ? current\n          : [...current, action]\n        : current.filter((a) => a !== action);\n      return { ...base, [role]: next };\n    });\n  };\n\n  const save = async () => {\n    if (!draft) return;\n    setSaving(true);\n    setError(null);\n    try {\n      // Only what the grid showed. A key whose grants are all off is dropped\n      // rather than written back as an empty array, so revoking an unknown\n      // role really removes it from the document.\n      const grants = Object.fromEntries(\n        Object.entries(draft).filter(([, actions]) => actions.length > 0),\n      );\n      await saveMatrix({ roles: matrix.roles, actions: matrix.actions, grants });\n      setDraft(null);\n    } catch (err) {\n      // `saveMatrix` has already put the stored document back, so the grid is\n      // showing the server's grants again rather than an edit that never\n      // landed. The envelope's own message says why (§15.6).\n      setError(adminErrorMessage(err));\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  /**\n   * Grants naming a role or an action the extension no longer declares.\n   *\n   * They exist routinely: a release renames `document.write` or retires\n   * `reviewer`, and the stored document keeps the old key. Rendering only the\n   * declared vocabulary hid them — and Save then PUT the whole `grants` object\n   * back, so every invisible grant was rewritten, unchanged, by an\n   * administrator who had just been looking at the screen and believed they\n   * had seen the whole policy. `may()` reads the document, not this grid, so\n   * a hidden `reviewer: [\"admin.manage\"]` is live permission nobody can see or\n   * revoke.\n   *\n   * The rule `role-assignment.tsx` already follows for a retired role: show\n   * it, mark it, and let it be taken away.\n   */\n  const grantedRoles = Object.keys(grants).filter((role) => (grants[role] ?? []).length > 0);\n  const unknownRoles = grantedRoles.filter((role) => !matrix.roles.includes(role)).sort();\n  const grantedActions = [...new Set(Object.values(grants).flat())];\n  const unknownActions = grantedActions.filter((a) => !matrix.actions.includes(a)).sort();\n  const roleRows = [...matrix.roles, ...unknownRoles];\n  const actionColumns = [...matrix.actions, ...unknownActions];\n  const hasUnknown = unknownRoles.length > 0 || unknownActions.length > 0;\n\n  const empty = roleRows.length === 0 || actionColumns.length === 0;\n\n  return (\n    <div data-slot=\"admin-matrix\" className=\"flex flex-col gap-3\">\n      {error ? <ErrorBanner message={error} data-slot=\"admin-matrix-error\" /> : null}\n      <SectionCard\n        title=\"Permissions\"\n        description=\"This extension's own matrix, in its own database. One policy function reads it, and every route and every MCP tool goes through that function.\"\n        actions={\n          empty ? null : (\n            <>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                disabled={!dirty || saving}\n                onClick={() => {\n                  setDraft(null);\n                  setError(null);\n                }}\n              >\n                Discard\n              </Button>\n              <Button size=\"sm\" disabled={!dirty || saving} onClick={save}>\n                {saving ? <Spinner tone=\"inverse\" /> : null}\n                Save\n              </Button>\n            </>\n          )\n        }\n        flush={!empty}\n      >\n        {empty ? (\n          <EmptyState\n            size=\"compact\"\n            title=\"Nothing declared yet\"\n            description=\"The matrix is the roles and actions this extension declares. Until it declares both, there is nothing to grant.\"\n          />\n        ) : (\n          <div className=\"overflow-x-auto\">\n            <table\n              data-slot=\"admin-matrix-grid\"\n              className=\"w-full border-collapse text-[length:var(--ds-text-caption-lg)]\"\n            >\n              <caption className=\"sr-only\">Roles and the actions each one grants</caption>\n              <thead>\n                <tr className=\"bg-[var(--ds-muted)] text-[color:var(--ds-muted-foreground)]\">\n                  <th\n                    scope=\"col\"\n                    className=\"sticky left-0 z-10 bg-[var(--ds-muted)] px-4 py-2.5 text-left font-medium\"\n                  >\n                    Role\n                  </th>\n                  {actionColumns.map((action) => (\n                    <th\n                      key={action}\n                      scope=\"col\"\n                      data-action={action}\n                      data-unknown={unknownActions.includes(action) ? \"\" : undefined}\n                      title={\n                        unknownActions.includes(action)\n                          ? \"This extension no longer declares this action\"\n                          : undefined\n                      }\n                      className=\"whitespace-nowrap px-3 py-2.5 text-center font-medium\"\n                    >\n                      {action}\n                      {unknownActions.includes(action) ? (\n                        <span className=\"ml-1 text-[color:var(--ds-warning)]\">(unknown)</span>\n                      ) : null}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody>\n                {roleRows.map((role) => (\n                  <tr\n                    key={role}\n                    data-slot=\"admin-matrix-row\"\n                    data-role={role}\n                    data-unknown={unknownRoles.includes(role) ? \"\" : undefined}\n                    className=\"border-t border-[var(--ds-border-subtle)]\"\n                  >\n                    <th\n                      scope=\"row\"\n                      className=\"sticky left-0 z-10 bg-[var(--ds-card)] px-4 py-2 text-left font-medium text-[color:var(--ds-foreground)]\"\n                    >\n                      {role}\n                      {unknownRoles.includes(role) ? (\n                        <span\n                          data-slot=\"admin-matrix-unknown\"\n                          className=\"ml-1 font-normal text-[length:var(--ds-text-caption)] text-[color:var(--ds-warning)]\"\n                        >\n                          unknown role\n                        </span>\n                      ) : null}\n                    </th>\n                    {actionColumns.map((action) => {\n                      const checked = (grants[role] ?? []).includes(action);\n                      return (\n                        <td key={action} className=\"px-3 py-2 text-center\">\n                          <Checkbox\n                            checked={checked}\n                            data-role={role}\n                            data-action={action}\n                            aria-label={`${role} may ${action}`}\n                            onCheckedChange={(next) => toggle(role, action, Boolean(next))}\n                          />\n                        </td>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n            {hasUnknown ? (\n              <p\n                data-slot=\"admin-matrix-unknown-note\"\n                className=\"px-4 py-2.5 text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\"\n              >\n                Rows and columns marked unknown are grants on a role or an action this\n                extension no longer declares. They are still live — untick them and save to\n                remove them.\n              </p>\n            ) : null}\n          </div>\n        )}\n      </SectionCard>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/admin-permissions/members.d.ts

@@ -0,0 +1,18 @@
+"use client";
+import * as React from "react";
+//#region src/components/admin-permissions/members.d.ts
+/**
+ * `/admin/members` — the join described in §13.3, on the DataTable **server**
+ * source: an org's membership is unbounded, so it is paged, searched and
+ * sorted by the extension's own endpoint.
+ *
+ * The left half of every row is cortena-auth's and read-only: the person,
+ * their status, and the groups they belong to. The right half is the
+ * extension's: the direct assignment, and the effective roles `may()` resolves
+ * from it plus every group's roles, each labelled with its source. Only the
+ * direct assignment is editable, and the groups column disappears entirely
+ * when the org has no groups.
+ */
+export declare function AdminMembers(): React.JSX.Element;
+//#endregion
+//# sourceMappingURL=members.d.ts.map

package/dist/components/admin-permissions/members.js

@@ -0,0 +1,185 @@
+"use client";
+"use client";
+import { Button } from "../button.js";
+import { Badge } from "../badge.js";
+import { Chip } from "../chip.js";
+import { ErrorBanner } from "../error-banner.js";
+import { createColumnHelper } from "../data-table/features.js";
+import { DataTable } from "../data-table/data-table.js";
+import { groupsOf, sourceGroupOf } from "./types.js";
+import { directRolesOf, effectiveRolesWithOverride, useAdminPermissions } from "./context.js";
+import { EffectiveRoles, RoleAssignmentDialog } from "./role-assignment.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/admin-permissions/members.tsx
+const helper = /* @__PURE__ */ createColumnHelper();
+function statusVariant(status) {
+	const s = status.toLowerCase();
+	if (s === "active") return "success";
+	if (s === "invited" || s === "pending") return "warning";
+	if (s === "suspended" || s === "disabled" || s === "removed") return "destructive";
+	return "default";
+}
+function formatLastActive(value) {
+	if (!value) return "Never";
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return value;
+	return date.toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	});
+}
+/**
+* `/admin/members` — the join described in §13.3, on the DataTable **server**
+* source: an org's membership is unbounded, so it is paged, searched and
+* sorted by the extension's own endpoint.
+*
+* The left half of every row is cortena-auth's and read-only: the person,
+* their status, and the groups they belong to. The right half is the
+* extension's: the direct assignment, and the effective roles `may()` resolves
+* from it plus every group's roles, each labelled with its source. Only the
+* direct assignment is editable, and the groups column disappears entirely
+* when the org has no groups.
+*/
+function AdminMembers() {
+	const { api, hasGroups, groupsUnknown, groupsState, revision, memberRoles, reconcileMembers } = useAdminPermissions();
+	const [editing, setEditing] = React.useState(null);
+	const [editingRoles, setEditingRoles] = React.useState([]);
+	const columns = React.useMemo(() => helper.columns([
+		helper.accessor("name", {
+			header: "Member",
+			cell: ({ row }) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-[color:var(--ds-foreground)]",
+					children: row.original.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+					children: row.original.email
+				})]
+			}),
+			meta: { label: "Member" }
+		}),
+		helper.accessor("status", {
+			header: "Status",
+			cell: ({ row }) => /* @__PURE__ */ jsx(Badge, {
+				variant: statusVariant(row.original.status),
+				children: row.original.status
+			}),
+			meta: { label: "Status" }
+		}),
+		...hasGroups || groupsUnknown ? [helper.display({
+			id: "groups",
+			header: "Groups",
+			cell: ({ row }) => {
+				const groups = groupsOf(row.original);
+				if (groups.length === 0) return /* @__PURE__ */ jsx("span", {
+					className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]",
+					children: "None"
+				});
+				return /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-1",
+					children: groups.map((group) => /* @__PURE__ */ jsx(Chip, {
+						size: "sm",
+						"data-group": group.id,
+						children: group.name
+					}, group.id))
+				});
+			},
+			meta: {
+				label: "Groups",
+				exportValue: (row) => groupsOf(row).map((g) => g.name).join(", ")
+			},
+			enableSorting: false
+		})] : [],
+		helper.display({
+			id: "effectiveRoles",
+			header: "Effective roles",
+			cell: ({ row }) => /* @__PURE__ */ jsx(EffectiveRoles, { roles: effectiveRolesWithOverride(row.original, memberRoles) }),
+			meta: {
+				label: "Effective roles",
+				exportValue: (row) => effectiveRolesWithOverride(row, memberRoles).map((entry) => {
+					const group = sourceGroupOf(entry.source);
+					return group ? `${entry.role} (via ${group.name})` : entry.role;
+				}).join(", ")
+			},
+			enableSorting: false
+		}),
+		helper.accessor("lastActiveAt", {
+			header: "Last active",
+			cell: ({ row }) => formatLastActive(row.original.lastActiveAt),
+			meta: { label: "Last active" }
+		}),
+		helper.display({
+			id: "actions",
+			header: () => /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Actions"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					"aria-label": `Edit roles for ${row.original.name}`,
+					onClick: () => {
+						setEditingRoles(directRolesOf(row.original, memberRoles));
+						setEditing({
+							kind: "user",
+							id: row.original.userId,
+							name: row.original.name
+						});
+					},
+					children: "Edit roles"
+				})
+			}),
+			meta: {
+				align: "end",
+				exportable: false
+			},
+			enableSorting: false,
+			enableHiding: false
+		})
+	]), [
+		hasGroups,
+		groupsUnknown,
+		memberRoles
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "admin-members",
+		className: "flex flex-col gap-3",
+		children: [
+			groupsState.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+				"data-slot": "admin-members-groups-error",
+				message: `Group membership could not be loaded, so inherited roles may be missing. ${groupsState.error.message}`,
+				onRetry: groupsState.reload
+			}) : null,
+			/* @__PURE__ */ jsx(DataTable, {
+				columns,
+				dataSource: {
+					kind: "server",
+					fetch: async (query, signal) => {
+						const result = await api.members.list(query, signal);
+						reconcileMembers(result.rows);
+						return result;
+					},
+					queryKey: ["cortena-admin-members", revision]
+				},
+				getRowId: (row) => row.userId,
+				searchPlaceholder: "Search members…",
+				emptyMessage: "No members",
+				exportFileName: "members"
+			}),
+			/* @__PURE__ */ jsx(RoleAssignmentDialog, {
+				principal: editing,
+				current: editingRoles,
+				onOpenChange: (open) => !open && setEditing(null)
+			})
+		]
+	});
+}
+//#endregion
+export { AdminMembers };
+
+//# sourceMappingURL=members.js.map

package/dist/components/admin-permissions/members.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"members.js","names":[],"sources":["../../../src/components/admin-permissions/members.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Badge } from \"@/components/badge\";\nimport { Button } from \"@/components/button\";\nimport { Chip } from \"@/components/chip\";\nimport { DataTable, createColumnHelper } from \"@/components/data-table\";\nimport { ErrorBanner } from \"@/components/error-banner\";\nimport { directRolesOf, effectiveRolesWithOverride, useAdminPermissions } from \"./context\";\nimport { EffectiveRoles, RoleAssignmentDialog } from \"./role-assignment\";\nimport { groupsOf, sourceGroupOf, type AdminMemberRow, type AdminPrincipal } from \"./types\";\n\nconst helper = /* @__PURE__ */ createColumnHelper<AdminMemberRow>();\n\nfunction statusVariant(status: string): \"default\" | \"success\" | \"warning\" | \"destructive\" {\n  const s = status.toLowerCase();\n  if (s === \"active\") return \"success\";\n  if (s === \"invited\" || s === \"pending\") return \"warning\";\n  if (s === \"suspended\" || s === \"disabled\" || s === \"removed\") return \"destructive\";\n  return \"default\";\n}\n\nfunction formatLastActive(value: string | null | undefined): string {\n  if (!value) return \"Never\";\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return date.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\n/**\n * `/admin/members` — the join described in §13.3, on the DataTable **server**\n * source: an org's membership is unbounded, so it is paged, searched and\n * sorted by the extension's own endpoint.\n *\n * The left half of every row is cortena-auth's and read-only: the person,\n * their status, and the groups they belong to. The right half is the\n * extension's: the direct assignment, and the effective roles `may()` resolves\n * from it plus every group's roles, each labelled with its source. Only the\n * direct assignment is editable, and the groups column disappears entirely\n * when the org has no groups.\n */\nexport function AdminMembers() {\n  const { api, hasGroups, groupsUnknown, groupsState, revision, memberRoles, reconcileMembers } =\n    useAdminPermissions();\n  const [editing, setEditing] = React.useState<AdminPrincipal | null>(null);\n  const [editingRoles, setEditingRoles] = React.useState<readonly string[]>([]);\n\n  const columns = React.useMemo(\n    () =>\n      helper.columns([\n        helper.accessor(\"name\", {\n          header: \"Member\",\n          cell: ({ row }) => (\n            <div className=\"flex flex-col\">\n              <span className=\"font-medium text-[color:var(--ds-foreground)]\">\n                {row.original.name}\n              </span>\n              <span className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]\">\n                {row.original.email}\n              </span>\n            </div>\n          ),\n          meta: { label: \"Member\" },\n        }),\n        helper.accessor(\"status\", {\n          header: \"Status\",\n          cell: ({ row }) => (\n            <Badge variant={statusVariant(row.original.status)}>{row.original.status}</Badge>\n          ),\n          // Deliberately not a faceted filter: a server source loads one page,\n          // so the facets would have to be a fixed list, and membership status\n          // is cortena-auth's vocabulary rather than this component's to\n          // invent. The search box already reaches it.\n          meta: { label: \"Status\" },\n        }),\n        ...(hasGroups || groupsUnknown\n          ? [\n              helper.display({\n                id: \"groups\",\n                header: \"Groups\",\n                cell: ({ row }) => {\n                  const groups = groupsOf(row.original);\n                  if (groups.length === 0) {\n                    return (\n                      <span className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]\">\n                        None\n                      </span>\n                    );\n                  }\n                  return (\n                    <div className=\"flex flex-wrap items-center gap-1\">\n                      {groups.map((group) => (\n                        <Chip key={group.id} size=\"sm\" data-group={group.id}>\n                          {group.name}\n                        </Chip>\n                      ))}\n                    </div>\n                  );\n                },\n                meta: {\n                  label: \"Groups\",\n                  exportValue: (row: AdminMemberRow) =>\n                    groupsOf(row)\n                      .map((g) => g.name)\n                      .join(\", \"),\n                },\n                enableSorting: false,\n              }),\n            ]\n          : []),\n        helper.display({\n          id: \"effectiveRoles\",\n          header: \"Effective roles\",\n          cell: ({ row }) => (\n            <EffectiveRoles roles={effectiveRolesWithOverride(row.original, memberRoles)} />\n          ),\n          meta: {\n            label: \"Effective roles\",\n            exportValue: (row: AdminMemberRow) =>\n              effectiveRolesWithOverride(row, memberRoles)\n                .map((entry) => {\n                  const group = sourceGroupOf(entry.source);\n                  return group ? `${entry.role} (via ${group.name})` : entry.role;\n                })\n                .join(\", \"),\n          },\n          enableSorting: false,\n        }),\n        helper.accessor(\"lastActiveAt\", {\n          header: \"Last active\",\n          cell: ({ row }) => formatLastActive(row.original.lastActiveAt),\n          meta: { label: \"Last active\" },\n        }),\n        helper.display({\n          id: \"actions\",\n          header: () => <span className=\"sr-only\">Actions</span>,\n          cell: ({ row }) => (\n            <div className=\"flex justify-end\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                aria-label={`Edit roles for ${row.original.name}`}\n                onClick={() => {\n                  setEditingRoles(directRolesOf(row.original, memberRoles));\n                  setEditing({\n                    kind: \"user\",\n                    id: row.original.userId,\n                    name: row.original.name,\n                  });\n                }}\n              >\n                Edit roles\n              </Button>\n            </div>\n          ),\n          meta: { align: \"end\", exportable: false },\n          enableSorting: false,\n          enableHiding: false,\n        }),\n      ]),\n    [hasGroups, groupsUnknown, memberRoles],\n  );\n\n  return (\n    <div data-slot=\"admin-members\" className=\"flex flex-col gap-3\">\n      {/* A failed `groups.list()` renders exactly like an org with no groups:\n          every inherited role silently disappears and the effective-roles\n          column reads as a fact about the member. Say so instead. */}\n      {groupsState.error ? (\n        <ErrorBanner\n          data-slot=\"admin-members-groups-error\"\n          message={`Group membership could not be loaded, so inherited roles may be missing. ${groupsState.error.message}`}\n          onRetry={groupsState.reload}\n        />\n      ) : null}\n      <DataTable\n        columns={columns}\n        dataSource={{\n          kind: \"server\",\n          fetch: async (query, signal) => {\n            const result = await api.members.list(query, signal);\n            // The server has spoken: any optimistic entry it now agrees with\n            // has done its job and is retired.\n            reconcileMembers(result.rows);\n            return result;\n          },\n          // The revision is part of the cache scope, so a successful write —\n          // to this member or to a group they belong to — invalidates the page\n          // rather than leaving a stale resolution on screen.\n          queryKey: [\"cortena-admin-members\", revision],\n        }}\n        getRowId={(row) => row.userId}\n        searchPlaceholder=\"Search members…\"\n        emptyMessage=\"No members\"\n        exportFileName=\"members\"\n      />\n      <RoleAssignmentDialog\n        principal={editing}\n        current={editingRoles}\n        onOpenChange={(open) => !open && setEditing(null)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/admin-permissions/role-assignment.d.ts

@@ -0,0 +1,35 @@
+"use client";
+import { AdminEffectiveRole, AdminPrincipal } from "./types.js";
+import * as React from "react";
+//#region src/components/admin-permissions/role-assignment.d.ts
+/**
+ * The effective-roles cell. Every role carries the assignment that granted it:
+ * nothing for a direct one, and the group's name for an inherited one. This is
+ * the whole point of §13.4 and P-43 — an administrator who cannot see why
+ * somebody has a permission removes the wrong assignment and believes the job
+ * is done.
+ */
+export declare function EffectiveRoles({ roles, className }: {
+  roles: readonly AdminEffectiveRole[];
+  className?: string;
+}): React.JSX.Element;
+/** A plain list of directly assigned roles, for the group list. */
+export declare function DirectRoles({ roles }: {
+  roles: readonly string[];
+}): React.JSX.Element;
+export interface RoleAssignmentDialogProps {
+  /** The principal being edited. A user and a group take the same dialog. */
+  principal: AdminPrincipal | null;
+  /** The principal's current direct assignment. */
+  current: readonly string[];
+  onOpenChange: (open: boolean) => void;
+}
+/**
+ * The one editor for a role assignment, for both principal kinds (DESIGN-D22).
+ * It offers the roles the extension declared and nothing else; a role already
+ * assigned that the matrix no longer declares is still listed, marked, and
+ * removable, because hiding it would leave a grant nobody can see or revoke.
+ */
+export declare function RoleAssignmentDialog({ principal, current, onOpenChange }: RoleAssignmentDialogProps): React.JSX.Element;
+//#endregion
+//# sourceMappingURL=role-assignment.d.ts.map

package/dist/components/admin-permissions/role-assignment.js

@@ -0,0 +1,174 @@
+"use client";
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button.js";
+import { Spinner } from "../spinner.js";
+import { Checkbox } from "../checkbox.js";
+import { Chip } from "../chip.js";
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog.js";
+import { ErrorBanner } from "../error-banner.js";
+import { adminErrorMessage, sourceGroupOf } from "./types.js";
+import { useAdminPermissions } from "./context.js";
+import { Users } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/admin-permissions/role-assignment.tsx
+/**
+* The effective-roles cell. Every role carries the assignment that granted it:
+* nothing for a direct one, and the group's name for an inherited one. This is
+* the whole point of §13.4 and P-43 — an administrator who cannot see why
+* somebody has a permission removes the wrong assignment and believes the job
+* is done.
+*/
+function EffectiveRoles({ roles, className }) {
+	if (roles.length === 0) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "admin-effective-roles-empty",
+		className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]",
+		children: "No roles"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "admin-effective-roles",
+		className: cn("flex flex-wrap items-center gap-1", className),
+		children: roles.map((entry, index) => {
+			const group = sourceGroupOf(entry.source);
+			return /* @__PURE__ */ jsxs(Chip, {
+				size: "sm",
+				variant: group ? "outline" : "accent",
+				"data-role": entry.role,
+				"data-source": group ? group.id : "direct",
+				title: group ? `${entry.role} — via group ${group.name}` : `${entry.role} — assigned directly`,
+				children: [entry.role, group ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1 text-[color:var(--ds-text-tertiary)]",
+					children: [
+						/* @__PURE__ */ jsx(Users, { "aria-hidden": true }),
+						"via ",
+						group.name
+					]
+				}) : null]
+			}, `${entry.role}-${group?.id ?? "direct"}-${index}`);
+		})
+	});
+}
+/** A plain list of directly assigned roles, for the group list. */
+function DirectRoles({ roles }) {
+	if (roles.length === 0) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "admin-direct-roles-empty",
+		className: "text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]",
+		children: "None"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "admin-direct-roles",
+		className: "flex flex-wrap items-center gap-1",
+		children: roles.map((role) => /* @__PURE__ */ jsx(Chip, {
+			size: "sm",
+			variant: "accent",
+			"data-role": role,
+			children: role
+		}, role))
+	});
+}
+/**
+* The one editor for a role assignment, for both principal kinds (DESIGN-D22).
+* It offers the roles the extension declared and nothing else; a role already
+* assigned that the matrix no longer declares is still listed, marked, and
+* removable, because hiding it would leave a grant nobody can see or revoke.
+*/
+function RoleAssignmentDialog({ principal, current, onOpenChange }) {
+	const { matrix, assignRoles } = useAdminPermissions();
+	const [selected, setSelected] = React.useState(current);
+	const [saving, setSaving] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	const key = principal ? `${principal.kind}:${principal.id}` : null;
+	const [seededKey, setSeededKey] = React.useState(key);
+	if (key !== seededKey) {
+		setSeededKey(key);
+		setSelected(current);
+		setError(null);
+	}
+	const declared = matrix?.roles ?? [];
+	const retired = current.filter((role) => !declared.includes(role));
+	const options = [...declared, ...retired];
+	const toggle = (role, checked) => {
+		setSelected((prev) => checked ? [...prev, role] : prev.filter((r) => r !== role));
+	};
+	const save = async () => {
+		if (!principal) return;
+		setSaving(true);
+		setError(null);
+		try {
+			await assignRoles(principal, [...selected]);
+			onOpenChange(false);
+		} catch (err) {
+			setError(adminErrorMessage(err));
+		} finally {
+			setSaving(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: principal !== null,
+		onOpenChange: (open) => !open && onOpenChange(false),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"data-slot": "admin-role-dialog",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Edit roles" }), /* @__PURE__ */ jsx(DialogDescription, { children: principal?.kind === "group" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Every member of ",
+					/* @__PURE__ */ jsx("strong", { children: principal.name ?? principal.id }),
+					" inherits the roles you select here, as soon as they join."
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					"Direct assignment for ",
+					/* @__PURE__ */ jsx("strong", { children: principal?.name ?? principal?.id }),
+					". Roles inherited from a group are changed on the group, not here."
+				] }) })] }),
+				/* @__PURE__ */ jsxs(DialogBody, {
+					className: "flex flex-col gap-2",
+					children: [error ? /* @__PURE__ */ jsx(ErrorBanner, {
+						message: error,
+						"data-slot": "admin-role-dialog-error"
+					}) : null, options.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-muted-foreground)]",
+						children: "This extension has not declared any roles yet."
+					}) : /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-col gap-0.5",
+						"data-slot": "admin-role-options",
+						children: options.map((role) => {
+							const checked = selected.includes(role);
+							return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+								className: cn("flex cursor-pointer items-center gap-2.5 rounded-[var(--ds-radius-md)] px-2 py-1.5", "text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]", "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:bg-[var(--ds-hover)]"),
+								children: [
+									/* @__PURE__ */ jsx(Checkbox, {
+										checked,
+										onCheckedChange: (next) => toggle(role, Boolean(next))
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "flex-1",
+										children: role
+									}),
+									declared.includes(role) ? null : /* @__PURE__ */ jsx(Chip, {
+										size: "sm",
+										variant: "outline",
+										title: "Not in the declared vocabulary",
+										children: "retired"
+									})
+								]
+							}) }, role);
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: () => onOpenChange(false),
+					disabled: saving,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsxs(Button, {
+					onClick: save,
+					disabled: saving || options.length === 0,
+					children: [saving ? /* @__PURE__ */ jsx(Spinner, { tone: "inverse" }) : null, "Save roles"]
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { DirectRoles, EffectiveRoles, RoleAssignmentDialog };
+
+//# sourceMappingURL=role-assignment.js.map

package/dist/components/admin-permissions/role-assignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-assignment.js","names":[],"sources":["../../../src/components/admin-permissions/role-assignment.tsx"],"sourcesContent":["\"use client\";\n\nimport { Users } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/button\";\nimport { Checkbox } from \"@/components/checkbox\";\nimport { Chip } from \"@/components/chip\";\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/dialog\";\nimport { ErrorBanner } from \"@/components/error-banner\";\nimport { Spinner } from \"@/components/spinner\";\nimport { cn } from \"@/lib/cn\";\nimport { useAdminPermissions } from \"./context\";\nimport {\n  adminErrorMessage,\n  sourceGroupOf,\n  type AdminEffectiveRole,\n  type AdminPrincipal,\n} from \"./types\";\n\n/**\n * The effective-roles cell. Every role carries the assignment that granted it:\n * nothing for a direct one, and the group's name for an inherited one. This is\n * the whole point of §13.4 and P-43 — an administrator who cannot see why\n * somebody has a permission removes the wrong assignment and believes the job\n * is done.\n */\nexport function EffectiveRoles({\n  roles,\n  className,\n}: {\n  roles: readonly AdminEffectiveRole[];\n  className?: string;\n}) {\n  if (roles.length === 0) {\n    return (\n      <span\n        data-slot=\"admin-effective-roles-empty\"\n        className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]\"\n      >\n        No roles\n      </span>\n    );\n  }\n  return (\n    <div\n      data-slot=\"admin-effective-roles\"\n      className={cn(\"flex flex-wrap items-center gap-1\", className)}\n    >\n      {roles.map((entry, index) => {\n        const group = sourceGroupOf(entry.source);\n        return (\n          <Chip\n            key={`${entry.role}-${group?.id ?? \"direct\"}-${index}`}\n            size=\"sm\"\n            variant={group ? \"outline\" : \"accent\"}\n            data-role={entry.role}\n            data-source={group ? group.id : \"direct\"}\n            title={\n              group\n                ? `${entry.role} — via group ${group.name}`\n                : `${entry.role} — assigned directly`\n            }\n          >\n            {entry.role}\n            {group ? (\n              <span className=\"inline-flex items-center gap-1 text-[color:var(--ds-text-tertiary)]\">\n                <Users aria-hidden />\n                via {group.name}\n              </span>\n            ) : null}\n          </Chip>\n        );\n      })}\n    </div>\n  );\n}\n\n/** A plain list of directly assigned roles, for the group list. */\nexport function DirectRoles({ roles }: { roles: readonly string[] }) {\n  if (roles.length === 0) {\n    return (\n      <span\n        data-slot=\"admin-direct-roles-empty\"\n        className=\"text-[length:var(--ds-text-caption)] text-[color:var(--ds-text-tertiary)]\"\n      >\n        None\n      </span>\n    );\n  }\n  return (\n    <div data-slot=\"admin-direct-roles\" className=\"flex flex-wrap items-center gap-1\">\n      {roles.map((role) => (\n        <Chip key={role} size=\"sm\" variant=\"accent\" data-role={role}>\n          {role}\n        </Chip>\n      ))}\n    </div>\n  );\n}\n\nexport interface RoleAssignmentDialogProps {\n  /** The principal being edited. A user and a group take the same dialog. */\n  principal: AdminPrincipal | null;\n  /** The principal's current direct assignment. */\n  current: readonly string[];\n  onOpenChange: (open: boolean) => void;\n}\n\n/**\n * The one editor for a role assignment, for both principal kinds (DESIGN-D22).\n * It offers the roles the extension declared and nothing else; a role already\n * assigned that the matrix no longer declares is still listed, marked, and\n * removable, because hiding it would leave a grant nobody can see or revoke.\n */\nexport function RoleAssignmentDialog({\n  principal,\n  current,\n  onOpenChange,\n}: RoleAssignmentDialogProps) {\n  const { matrix, assignRoles } = useAdminPermissions();\n  const [selected, setSelected] = React.useState<readonly string[]>(current);\n  const [saving, setSaving] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n\n  // Re-seed whenever a different principal is opened — the documented\n  // adjust-state-during-render pattern, not an effect, so the dialog never\n  // paints one principal's roles under another principal's name.\n  const key = principal ? `${principal.kind}:${principal.id}` : null;\n  const [seededKey, setSeededKey] = React.useState<string | null>(key);\n  if (key !== seededKey) {\n    setSeededKey(key);\n    setSelected(current);\n    setError(null);\n  }\n\n  const declared = matrix?.roles ?? [];\n  const retired = current.filter((role) => !declared.includes(role));\n  const options = [...declared, ...retired];\n\n  const toggle = (role: string, checked: boolean) => {\n    setSelected((prev) => (checked ? [...prev, role] : prev.filter((r) => r !== role)));\n  };\n\n  const save = async () => {\n    if (!principal) return;\n    setSaving(true);\n    setError(null);\n    try {\n      await assignRoles(principal, [...selected]);\n      onOpenChange(false);\n    } catch (err) {\n      // The envelope's own message, not a house one (§15.6). The optimistic\n      // write has already been rolled back by `assignRoles`.\n      setError(adminErrorMessage(err));\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  return (\n    <Dialog open={principal !== null} onOpenChange={(open) => !open && onOpenChange(false)}>\n      <DialogContent data-slot=\"admin-role-dialog\">\n        <DialogHeader>\n          <DialogTitle>Edit roles</DialogTitle>\n          <DialogDescription>\n            {principal?.kind === \"group\" ? (\n              <>\n                Every member of <strong>{principal.name ?? principal.id}</strong> inherits the roles\n                you select here, as soon as they join.\n              </>\n            ) : (\n              <>\n                Direct assignment for <strong>{principal?.name ?? principal?.id}</strong>. Roles\n                inherited from a group are changed on the group, not here.\n              </>\n            )}\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody className=\"flex flex-col gap-2\">\n          {error ? <ErrorBanner message={error} data-slot=\"admin-role-dialog-error\" /> : null}\n          {options.length === 0 ? (\n            <p className=\"text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-muted-foreground)]\">\n              This extension has not declared any roles yet.\n            </p>\n          ) : (\n            <ul className=\"flex flex-col gap-0.5\" data-slot=\"admin-role-options\">\n              {options.map((role) => {\n                const checked = selected.includes(role);\n                return (\n                  <li key={role}>\n                    <label\n                      className={cn(\n                        \"flex cursor-pointer items-center gap-2.5 rounded-[var(--ds-radius-md)] px-2 py-1.5\",\n                        \"text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]\",\n                        \"transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n                        \"hover:bg-[var(--ds-hover)]\",\n                      )}\n                    >\n                      {/* No `aria-label`: the wrapping <label> already names\n                          the box, and Base UI points `aria-labelledby` at it.\n                          Both would compute the name as \"author author\". */}\n                      <Checkbox\n                        checked={checked}\n                        onCheckedChange={(next) => toggle(role, Boolean(next))}\n                      />\n                      <span className=\"flex-1\">{role}</span>\n                      {declared.includes(role) ? null : (\n                        <Chip size=\"sm\" variant=\"outline\" title=\"Not in the declared vocabulary\">\n                          retired\n                        </Chip>\n                      )}\n                    </label>\n                  </li>\n                );\n              })}\n            </ul>\n          )}\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={saving}>\n            Cancel\n          </Button>\n          <Button onClick={save} disabled={saving || options.length === 0}>\n            {saving ? <Spinner tone=\"inverse\" /> : null}\n            Save roles\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/components/admin-permissions/roles.d.ts

@@ -0,0 +1,25 @@
+"use client";
+import * as React from "react";
+//#region src/components/admin-permissions/roles.d.ts
+/**
+ * `/admin/roles` — the extension's own vocabulary, and the group principals
+ * that hold it.
+ *
+ * Two halves. The first is what each declared role grants, read straight off
+ * the matrix, so an administrator deciding whether to hand somebody "editor"
+ * can see what "editor" means without leaving the screen. The second is group
+ * assignment: the other kind of principal a role attaches to (DESIGN-D22,
+ * P-42), on the same screen as the users because it is the same decision.
+ *
+ * The groups list is a **client** source, and the members list is not, for one
+ * reason: an org's groups are a short, bounded list that arrives in a single
+ * `groups.list()`, so paging it server-side would be a round-trip per keypress
+ * for nothing. Where the groups come from — a directory sync, or somebody
+ * typing them into cortena-auth — is invisible here by design.
+ *
+ * The whole section disappears when the api has no `groups`, and equally when
+ * it has some and the org has none.
+ */
+export declare function AdminRoles(): React.JSX.Element;
+//#endregion
+//# sourceMappingURL=roles.d.ts.map