@dowel-ui/react 0.4.0 → 0.7.0

package/dist/components/permission-matrix/permission-matrix.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { cellState, countGranted, groupPermissions, groupState } from "./permission-model.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+//#region src/components/permission-matrix/permission-matrix.tsx
+const ARROWS = {
+	ArrowUp: [-1, 0],
+	ArrowDown: [1, 0],
+	ArrowLeft: [0, -1],
+	ArrowRight: [0, 1]
+};
+function PermissionMatrix({ className, label, roles, permissions, grants, onChange, ...props }) {
+	const uid = useId();
+	const rows = useMemo(() => groupPermissions(permissions).flatMap((group) => [...group.group !== void 0 ? [{
+		kind: "group",
+		label: group.group,
+		permissions: group.permissions
+	}] : [], ...group.permissions.map((permission) => ({
+		kind: "permission",
+		permission
+	}))]), [permissions]);
+	const [active, setActive] = useState([0, 0]);
+	const onKeyDown = (event) => {
+		const target = event.target;
+		const row = Number(target.dataset.row);
+		const col = Number(target.dataset.col);
+		if (Number.isNaN(row) || Number.isNaN(col)) return;
+		let next = null;
+		const arrow = ARROWS[event.key];
+		if (arrow) next = [row + arrow[0], col + arrow[1]];
+		else if (event.key === "Home") next = event.ctrlKey ? [0, 0] : [row, 0];
+		else if (event.key === "End") next = event.ctrlKey ? [rows.length - 1, roles.length - 1] : [row, roles.length - 1];
+		if (!next) return;
+		const [nextRow, nextCol] = next;
+		if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= roles.length) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		event.currentTarget.querySelector(`[data-row="${String(nextRow)}"][data-col="${String(nextCol)}"]`)?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("table", {
+			"data-slot": "permission-matrix",
+			role: "grid",
+			"aria-label": label,
+			"aria-readonly": onChange ? void 0 : true,
+			onKeyDown,
+			className: cn("w-full border-collapse text-sm", className),
+			...props,
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border",
+				children: [/* @__PURE__ */ jsx("th", {
+					role: "columnheader",
+					scope: "col",
+					className: "px-3 py-2 text-start text-xs font-medium",
+					children: "Permission"
+				}), roles.map((role) => {
+					const granted = countGranted(roles, grants, role, permissions);
+					return /* @__PURE__ */ jsxs("th", {
+						role: "columnheader",
+						scope: "col",
+						className: "px-3 py-2 text-center text-xs font-medium",
+						children: [role.label, /* @__PURE__ */ jsx("span", {
+							className: "block font-normal text-muted-foreground",
+							children: role.locked ? "all, locked" : /* @__PURE__ */ jsxs(Fragment, { children: [
+								String(granted),
+								"/",
+								String(permissions.length),
+								/* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: " granted"
+								})
+							] })
+						})]
+					}, role.id);
+				})]
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => row.kind === "group" ? /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border bg-muted/40",
+				children: [/* @__PURE__ */ jsxs("th", {
+					role: "rowheader",
+					scope: "row",
+					className: "px-3 py-1.5 text-start text-xs font-medium",
+					children: [row.label, /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: ", all"
+					})]
+				}), roles.map((role, colIndex) => /* @__PURE__ */ jsx(GroupCell, {
+					role,
+					roles,
+					grants,
+					group: row.label,
+					permissions: row.permissions,
+					position: [rowIndex, colIndex],
+					active: active[0] === rowIndex && active[1] === colIndex,
+					onActivate: setActive,
+					onChange
+				}, role.id))]
+			}, `group-${row.label}`) : /* @__PURE__ */ jsxs("tr", {
+				role: "row",
+				className: "border-b border-border last:border-0 hover:bg-muted/30",
+				children: [/* @__PURE__ */ jsxs("th", {
+					role: "rowheader",
+					scope: "row",
+					className: cn("px-3 py-2 text-start font-normal", row.permission.group !== void 0 && "ps-6"),
+					children: [row.permission.label, row.permission.description ? /* @__PURE__ */ jsx("span", {
+						className: "block text-xs text-muted-foreground",
+						children: row.permission.description
+					}) : null]
+				}), roles.map((role, colIndex) => /* @__PURE__ */ jsx(PermissionCell, {
+					id: `${uid}-${role.id}-${row.permission.id}`,
+					role,
+					roles,
+					grants,
+					permission: row.permission,
+					position: [rowIndex, colIndex],
+					active: active[0] === rowIndex && active[1] === colIndex,
+					onActivate: setActive,
+					onChange
+				}, role.id))]
+			}, row.permission.id)) })]
+		})
+	});
+}
+function PermissionCell({ id, role, roles, grants, permission, position, active, onActivate, onChange }) {
+	const state = cellState(roles, grants, role, permission.id);
+	const fixed = state.fixed || !onChange;
+	const noteId = `${id}-note`;
+	const note = role.locked ? `${role.label} has every permission; this cannot be changed.` : state.inheritedFrom ? `Inherited from ${state.inheritedFrom.label}.` : null;
+	return /* @__PURE__ */ jsxs("td", {
+		role: "gridcell",
+		"data-slot": "permission-cell",
+		"data-granted": state.granted || void 0,
+		"data-inherited": state.inheritedFrom ? "" : void 0,
+		className: "px-3 py-2 text-center align-middle",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			id,
+			checked: state.granted,
+			"aria-label": `${permission.label} for ${role.label}`,
+			"aria-describedby": note ? noteId : void 0,
+			"aria-disabled": fixed || void 0,
+			tabIndex: active ? 0 : -1,
+			"data-row": position[0],
+			"data-col": position[1],
+			className: cn(fixed && "opacity-55"),
+			onFocus: () => {
+				onActivate(position);
+			},
+			onCheckedChange: (next) => {
+				if (fixed) return;
+				onChange?.(role.id, [permission.id], next === true);
+			}
+		}), state.inheritedFrom ? /* @__PURE__ */ jsxs("span", {
+			id: noteId,
+			className: "mt-0.5 block text-2xs text-muted-foreground",
+			children: ["via ", state.inheritedFrom.label]
+		}) : note ? /* @__PURE__ */ jsx("span", {
+			id: noteId,
+			className: "sr-only",
+			children: note
+		}) : null]
+	});
+}
+function GroupCell({ role, roles, grants, group, permissions, position, active, onActivate, onChange }) {
+	const ids = permissions.map((permission) => permission.id);
+	const state = groupState(roles, grants, role, ids);
+	const changeable = permissions.filter((permission) => !cellState(roles, grants, role, permission.id).fixed).map((permission) => permission.id);
+	const fixed = role.locked || !onChange || changeable.length === 0;
+	return /* @__PURE__ */ jsx("td", {
+		role: "gridcell",
+		"data-slot": "permission-group-cell",
+		className: "px-3 py-1.5 text-center align-middle",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: state === "all" ? true : state === "some" ? "indeterminate" : false,
+			"aria-label": `All ${group} for ${role.label}`,
+			"aria-disabled": fixed || void 0,
+			tabIndex: active ? 0 : -1,
+			"data-row": position[0],
+			"data-col": position[1],
+			className: cn(fixed && "opacity-55"),
+			onFocus: () => {
+				onActivate(position);
+			},
+			onCheckedChange: (next) => {
+				if (fixed) return;
+				onChange?.(role.id, changeable, next === true);
+			}
+		})
+	});
+}
+//#endregion
+export { PermissionMatrix };
+
+//# sourceMappingURL=permission-matrix.js.map

package/dist/components/permission-matrix/permission-matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-matrix.js","names":[],"sources":["../../../src/components/permission-matrix/permission-matrix.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  cellState,\n  countGranted,\n  groupPermissions,\n  groupState,\n  type Grants,\n  type Permission,\n  type Role,\n} from \"./permission-model\";\n\n/**\n * Roles across, permissions down, a checkbox at every crossing.\n *\n * Every admin panel has one and every admin panel builds it, because the\n * hard part is not the checkboxes. It is that a role can inherit from\n * another, so a box can be ticked without anyone having ticked it; that an\n * Owner has everything and none of it can be unticked; that a section of\n * eight permissions wants one control for all of them; and that sixty\n * checkboxes are sixty tab stops unless something is done about it.\n *\n * Something is done about it. This is a grid in the WAI-ARIA sense — one tab\n * stop, arrow keys between cells, Home and End along a row — which is the\n * right call here and was the wrong one for the diff viewer: a diff is read,\n * a matrix is operated. Every checkbox is named by both coordinates, \"Delete\n * projects for Editor\", so a reader arriving by arrow key knows where they\n * are without re-reading the headers.\n *\n * A grant that arrived by inheritance is shown as a checked box that cannot\n * be unchecked here, with the role it came from said beside it and in the\n * box's description. A disabled control would be the obvious rendering, and\n * it would take the box out of the tab order and the arrow-key path, so a\n * keyboard user would step over the one cell whose state needs explaining.\n *\n * Changes are reported, never applied. A group toggle reports every\n * permission it touched in one call, so an application can save it as one\n * change rather than eight.\n */\n\nexport interface PermissionMatrixProps extends Omit<\n  ComponentPropsWithRef<\"table\">,\n  \"onChange\"\n> {\n  /** Names the matrix: \"Permissions for Acme\". */\n  label: string;\n  roles: Role[];\n  permissions: Permission[];\n  grants: Grants;\n  /**\n   * A change to make. Several ids arrive together when a group toggle was\n   * used. Omit to render the matrix as a record.\n   */\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\ntype MatrixRow =\n  | { kind: \"group\"; label: string; permissions: Permission[] }\n  | { kind: \"permission\"; permission: Permission };\n\nconst ARROWS: Record<string, [number, number]> = {\n  ArrowUp: [-1, 0],\n  ArrowDown: [1, 0],\n  ArrowLeft: [0, -1],\n  ArrowRight: [0, 1],\n};\n\nexport function PermissionMatrix({\n  className,\n  label,\n  roles,\n  permissions,\n  grants,\n  onChange,\n  ...props\n}: PermissionMatrixProps) {\n  const uid = useId();\n\n  const rows = useMemo<MatrixRow[]>(\n    () =>\n      groupPermissions(permissions).flatMap((group): MatrixRow[] => [\n        ...(group.group !== undefined\n          ? [{ kind: \"group\" as const, label: group.group, permissions: group.permissions }]\n          : []),\n        ...group.permissions.map((permission) => ({ kind: \"permission\" as const, permission })),\n      ]),\n    [permissions],\n  );\n\n  // One tab stop. The cell that last had focus is the one Tab returns to.\n  const [active, setActive] = useState<[number, number]>([0, 0]);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTableElement>) => {\n    const target = event.target as HTMLElement;\n    const row = Number(target.dataset.row);\n    const col = Number(target.dataset.col);\n    if (Number.isNaN(row) || Number.isNaN(col)) return;\n\n    let next: [number, number] | null = null;\n    const arrow = ARROWS[event.key];\n    if (arrow) {\n      next = [row + arrow[0], col + arrow[1]];\n    } else if (event.key === \"Home\") {\n      next = event.ctrlKey ? [0, 0] : [row, 0];\n    } else if (event.key === \"End\") {\n      next = event.ctrlKey ? [rows.length - 1, roles.length - 1] : [row, roles.length - 1];\n    }\n    if (!next) return;\n\n    const [nextRow, nextCol] = next;\n    if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= roles.length) {\n      event.preventDefault();\n      return;\n    }\n    event.preventDefault();\n    const cell = event.currentTarget.querySelector<HTMLElement>(\n      `[data-row=\"${String(nextRow)}\"][data-col=\"${String(nextCol)}\"]`,\n    );\n    cell?.focus();\n  };\n\n  return (\n    <div className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"permission-matrix\"\n        role=\"grid\"\n        aria-label={label}\n        aria-readonly={onChange ? undefined : true}\n        onKeyDown={onKeyDown}\n        className={cn(\"w-full border-collapse text-sm\", className)}\n        {...props}\n      >\n        <thead>\n          <tr role=\"row\" className=\"border-b border-border\">\n            <th\n              role=\"columnheader\"\n              scope=\"col\"\n              className=\"px-3 py-2 text-start text-xs font-medium\"\n            >\n              Permission\n            </th>\n            {roles.map((role) => {\n              const granted = countGranted(roles, grants, role, permissions);\n              return (\n                <th\n                  key={role.id}\n                  role=\"columnheader\"\n                  scope=\"col\"\n                  className=\"px-3 py-2 text-center text-xs font-medium\"\n                >\n                  {role.label}\n                  <span className=\"block font-normal text-muted-foreground\">\n                    {role.locked ? (\n                      \"all, locked\"\n                    ) : (\n                      <>\n                        {String(granted)}/{String(permissions.length)}\n                        <span className=\"sr-only\"> granted</span>\n                      </>\n                    )}\n                  </span>\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, rowIndex) =>\n            row.kind === \"group\" ? (\n              <tr\n                key={`group-${row.label}`}\n                role=\"row\"\n                className=\"border-b border-border bg-muted/40\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className=\"px-3 py-1.5 text-start text-xs font-medium\"\n                >\n                  {row.label}\n                  <span className=\"sr-only\">, all</span>\n                </th>\n                {roles.map((role, colIndex) => (\n                  <GroupCell\n                    key={role.id}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    group={row.label}\n                    permissions={row.permissions}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ) : (\n              <tr\n                key={row.permission.id}\n                role=\"row\"\n                className=\"border-b border-border last:border-0 hover:bg-muted/30\"\n              >\n                <th\n                  role=\"rowheader\"\n                  scope=\"row\"\n                  className={cn(\n                    \"px-3 py-2 text-start font-normal\",\n                    row.permission.group !== undefined && \"ps-6\",\n                  )}\n                >\n                  {row.permission.label}\n                  {row.permission.description ? (\n                    <span className=\"block text-xs text-muted-foreground\">\n                      {row.permission.description}\n                    </span>\n                  ) : null}\n                </th>\n                {roles.map((role, colIndex) => (\n                  <PermissionCell\n                    key={role.id}\n                    id={`${uid}-${role.id}-${row.permission.id}`}\n                    role={role}\n                    roles={roles}\n                    grants={grants}\n                    permission={row.permission}\n                    position={[rowIndex, colIndex]}\n                    active={active[0] === rowIndex && active[1] === colIndex}\n                    onActivate={setActive}\n                    onChange={onChange}\n                  />\n                ))}\n              </tr>\n            ),\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\ninterface CellProps {\n  role: Role;\n  roles: Role[];\n  grants: Grants;\n  position: [number, number];\n  active: boolean;\n  onActivate: (position: [number, number]) => void;\n  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;\n}\n\nfunction PermissionCell({\n  id,\n  role,\n  roles,\n  grants,\n  permission,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { id: string; permission: Permission }) {\n  const state = cellState(roles, grants, role, permission.id);\n  const fixed = state.fixed || !onChange;\n  const noteId = `${id}-note`;\n\n  const note = role.locked\n    ? `${role.label} has every permission; this cannot be changed.`\n    : state.inheritedFrom\n      ? `Inherited from ${state.inheritedFrom.label}.`\n      : null;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-cell\"\n      data-granted={state.granted || undefined}\n      data-inherited={state.inheritedFrom ? \"\" : undefined}\n      className=\"px-3 py-2 text-center align-middle\"\n    >\n      <Checkbox\n        id={id}\n        checked={state.granted}\n        aria-label={`${permission.label} for ${role.label}`}\n        aria-describedby={note ? noteId : undefined}\n        // Fixed cells stay focusable, so the arrow-key path and the tab order\n        // do not step over the one cell whose state needs explaining.\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, [permission.id], next === true);\n        }}\n      />\n      {state.inheritedFrom ? (\n        <span id={noteId} className=\"mt-0.5 block text-2xs text-muted-foreground\">\n          via {state.inheritedFrom.label}\n        </span>\n      ) : note ? (\n        <span id={noteId} className=\"sr-only\">\n          {note}\n        </span>\n      ) : null}\n    </td>\n  );\n}\n\nfunction GroupCell({\n  role,\n  roles,\n  grants,\n  group,\n  permissions,\n  position,\n  active,\n  onActivate,\n  onChange,\n}: CellProps & { group: string; permissions: Permission[] }) {\n  const ids = permissions.map((permission) => permission.id);\n  const state = groupState(roles, grants, role, ids);\n  // Only what can actually change here: inherited grants stay either way.\n  const changeable = permissions\n    .filter((permission) => !cellState(roles, grants, role, permission.id).fixed)\n    .map((permission) => permission.id);\n  const fixed = role.locked || !onChange || changeable.length === 0;\n\n  return (\n    <td\n      role=\"gridcell\"\n      data-slot=\"permission-group-cell\"\n      className=\"px-3 py-1.5 text-center align-middle\"\n    >\n      <Checkbox\n        checked={state === \"all\" ? true : state === \"some\" ? \"indeterminate\" : false}\n        aria-label={`All ${group} for ${role.label}`}\n        aria-disabled={fixed || undefined}\n        tabIndex={active ? 0 : -1}\n        data-row={position[0]}\n        data-col={position[1]}\n        className={cn(fixed && \"opacity-55\")}\n        onFocus={() => {\n          onActivate(position);\n        }}\n        onCheckedChange={(next) => {\n          if (fixed) return;\n          onChange?.(role.id, changeable, next === true);\n        }}\n      />\n    </td>\n  );\n}\n"],"mappings":"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"}

package/dist/components/permission-matrix/permission-model.d.ts

@@ -0,0 +1,53 @@
+//#region src/components/permission-matrix/permission-model.d.ts
+/**
+ * Roles, permissions and who has what — resolved, so the grid only draws.
+ *
+ * Pure, so inheritance and the group states are tested without rendering
+ * anything, and so a server can answer "may this role do this" from the same
+ * grants the matrix edits, with the same rule for inheritance.
+ */
+interface Permission {
+  id: string;
+  label: string;
+  description?: string;
+  /** Permissions with the same group share a heading and an all-or-none toggle. */
+  group?: string;
+}
+interface Role {
+  id: string;
+  label: string;
+  /** Roles whose grants this one includes. Resolved transitively. */
+  inherits?: string[];
+  /** Has every permission, and none of them can be changed. An Owner. */
+  locked?: boolean;
+}
+/** Explicit grants, by role id. Inherited ones are not listed here. */
+type Grants = Record<string, string[]>;
+interface CellState {
+  /** Whether the role can do it, by any route. */
+  granted: boolean;
+  /** The role it comes from, when it is not explicit here. */
+  inheritedFrom: Role | null;
+  /** Cannot be changed here — locked role, or inherited. */
+  fixed: boolean;
+}
+type GroupState = "all" | "some" | "none";
+/**
+ * The role a permission is inherited from, or null. Depth-first through
+ * `inherits`, cycle-safe, so two roles that inherit each other resolve rather
+ * than recurse forever — a configuration a form can produce by accident.
+ */
+declare function inheritedFrom(roles: Role[], grants: Grants, role: Role, permissionId: string, seen?: Set<string>): Role | null;
+declare function cellState(roles: Role[], grants: Grants, role: Role, permissionId: string): CellState;
+declare function groupState(roles: Role[], grants: Grants, role: Role, permissionIds: string[]): GroupState;
+declare function countGranted(roles: Role[], grants: Grants, role: Role, permissions: Permission[]): number;
+interface PermissionGroup {
+  /** Undefined for permissions declared without one. */
+  group: string | undefined;
+  permissions: Permission[];
+}
+/** Permissions by group, in the order the groups first appear. */
+declare function groupPermissions(permissions: Permission[]): PermissionGroup[];
+//#endregion
+export { CellState, Grants, GroupState, Permission, PermissionGroup, Role, cellState, countGranted, groupPermissions, groupState, inheritedFrom };
+//# sourceMappingURL=permission-model.d.ts.map

package/dist/components/permission-matrix/permission-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-model.d.ts","names":[],"sources":["../../../src/components/permission-matrix/permission-model.ts"],"mappings":";;;;;;;;UAQiB;EACf;EACA;EACA;;EAEA;;UAGe;EACf;EACA;;EAEA;;EAEA;;;KAIU,SAAS;UAEJ;;EAEf;;EAEA,eAAe;;EAEf;;KAGU;;;;;;iBAWI,cACd,OAAO,QACP,QAAQ,QACR,MAAM,MACN,sBACA,OAAM,cACL;iBAaa,UACd,OAAO,QACP,QAAQ,QACR,MAAM,MACN,uBACC;iBAQa,WACd,OAAO,QACP,QAAQ,QACR,MAAM,MACN,0BACC;iBAQa,aACd,OAAO,QACP,QAAQ,QACR,MAAM,MACN,aAAa;UAOE;;EAEf;EACA,aAAa;;;iBAIC,iBAAiB,aAAa,eAAe"}

package/dist/components/permission-matrix/permission-model.js

@@ -0,0 +1,64 @@
+//#region src/components/permission-matrix/permission-model.ts
+function roleById(roles, id) {
+	return roles.find((role) => role.id === id);
+}
+/**
+* The role a permission is inherited from, or null. Depth-first through
+* `inherits`, cycle-safe, so two roles that inherit each other resolve rather
+* than recurse forever — a configuration a form can produce by accident.
+*/
+function inheritedFrom(roles, grants, role, permissionId, seen = /* @__PURE__ */ new Set()) {
+	seen.add(role.id);
+	for (const parentId of role.inherits ?? []) {
+		if (seen.has(parentId)) continue;
+		const parent = roleById(roles, parentId);
+		if (!parent) continue;
+		if (parent.locked || (grants[parent.id] ?? []).includes(permissionId)) return parent;
+		const further = inheritedFrom(roles, grants, parent, permissionId, seen);
+		if (further) return further;
+	}
+	return null;
+}
+function cellState(roles, grants, role, permissionId) {
+	if (role.locked) return {
+		granted: true,
+		inheritedFrom: null,
+		fixed: true
+	};
+	if ((grants[role.id] ?? []).includes(permissionId)) return {
+		granted: true,
+		inheritedFrom: null,
+		fixed: false
+	};
+	const from = inheritedFrom(roles, grants, role, permissionId);
+	return {
+		granted: from !== null,
+		inheritedFrom: from,
+		fixed: from !== null
+	};
+}
+function groupState(roles, grants, role, permissionIds) {
+	const granted = permissionIds.filter((id) => cellState(roles, grants, role, id).granted).length;
+	if (granted === 0) return "none";
+	return granted === permissionIds.length ? "all" : "some";
+}
+function countGranted(roles, grants, role, permissions) {
+	return permissions.filter((permission) => cellState(roles, grants, role, permission.id).granted).length;
+}
+/** Permissions by group, in the order the groups first appear. */
+function groupPermissions(permissions) {
+	const groups = [];
+	for (const permission of permissions) {
+		const existing = groups.find((candidate) => candidate.group === permission.group);
+		if (existing) existing.permissions.push(permission);
+		else groups.push({
+			group: permission.group,
+			permissions: [permission]
+		});
+	}
+	return groups;
+}
+//#endregion
+export { cellState, countGranted, groupPermissions, groupState, inheritedFrom };
+
+//# sourceMappingURL=permission-model.js.map

package/dist/components/permission-matrix/permission-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"permission-model.js","names":[],"sources":["../../../src/components/permission-matrix/permission-model.ts"],"sourcesContent":["/**\n * Roles, permissions and who has what — resolved, so the grid only draws.\n *\n * Pure, so inheritance and the group states are tested without rendering\n * anything, and so a server can answer \"may this role do this\" from the same\n * grants the matrix edits, with the same rule for inheritance.\n */\n\nexport interface Permission {\n  id: string;\n  label: string;\n  description?: string;\n  /** Permissions with the same group share a heading and an all-or-none toggle. */\n  group?: string;\n}\n\nexport interface Role {\n  id: string;\n  label: string;\n  /** Roles whose grants this one includes. Resolved transitively. */\n  inherits?: string[];\n  /** Has every permission, and none of them can be changed. An Owner. */\n  locked?: boolean;\n}\n\n/** Explicit grants, by role id. Inherited ones are not listed here. */\nexport type Grants = Record<string, string[]>;\n\nexport interface CellState {\n  /** Whether the role can do it, by any route. */\n  granted: boolean;\n  /** The role it comes from, when it is not explicit here. */\n  inheritedFrom: Role | null;\n  /** Cannot be changed here — locked role, or inherited. */\n  fixed: boolean;\n}\n\nexport type GroupState = \"all\" | \"some\" | \"none\";\n\nfunction roleById(roles: Role[], id: string): Role | undefined {\n  return roles.find((role) => role.id === id);\n}\n\n/**\n * The role a permission is inherited from, or null. Depth-first through\n * `inherits`, cycle-safe, so two roles that inherit each other resolve rather\n * than recurse forever — a configuration a form can produce by accident.\n */\nexport function inheritedFrom(\n  roles: Role[],\n  grants: Grants,\n  role: Role,\n  permissionId: string,\n  seen: Set<string> = new Set(),\n): Role | null {\n  seen.add(role.id);\n  for (const parentId of role.inherits ?? []) {\n    if (seen.has(parentId)) continue;\n    const parent = roleById(roles, parentId);\n    if (!parent) continue;\n    if (parent.locked || (grants[parent.id] ?? []).includes(permissionId)) return parent;\n    const further = inheritedFrom(roles, grants, parent, permissionId, seen);\n    if (further) return further;\n  }\n  return null;\n}\n\nexport function cellState(\n  roles: Role[],\n  grants: Grants,\n  role: Role,\n  permissionId: string,\n): CellState {\n  if (role.locked) return { granted: true, inheritedFrom: null, fixed: true };\n  const explicit = (grants[role.id] ?? []).includes(permissionId);\n  if (explicit) return { granted: true, inheritedFrom: null, fixed: false };\n  const from = inheritedFrom(roles, grants, role, permissionId);\n  return { granted: from !== null, inheritedFrom: from, fixed: from !== null };\n}\n\nexport function groupState(\n  roles: Role[],\n  grants: Grants,\n  role: Role,\n  permissionIds: string[],\n): GroupState {\n  const granted = permissionIds.filter(\n    (id) => cellState(roles, grants, role, id).granted,\n  ).length;\n  if (granted === 0) return \"none\";\n  return granted === permissionIds.length ? \"all\" : \"some\";\n}\n\nexport function countGranted(\n  roles: Role[],\n  grants: Grants,\n  role: Role,\n  permissions: Permission[],\n): number {\n  return permissions.filter(\n    (permission) => cellState(roles, grants, role, permission.id).granted,\n  ).length;\n}\n\nexport interface PermissionGroup {\n  /** Undefined for permissions declared without one. */\n  group: string | undefined;\n  permissions: Permission[];\n}\n\n/** Permissions by group, in the order the groups first appear. */\nexport function groupPermissions(permissions: Permission[]): PermissionGroup[] {\n  const groups: PermissionGroup[] = [];\n  for (const permission of permissions) {\n    const existing = groups.find((candidate) => candidate.group === permission.group);\n    if (existing) existing.permissions.push(permission);\n    else groups.push({ group: permission.group, permissions: [permission] });\n  }\n  return groups;\n}\n"],"mappings":";AAuCA,SAAS,SAAS,OAAe,IAA8B;CAC7D,OAAO,MAAM,MAAM,SAAS,KAAK,OAAO,EAAE;AAC5C;;;;;;AAOA,SAAgB,cACd,OACA,QACA,MACA,cACA,uBAAoB,IAAI,IAAI,GACf;CACb,KAAK,IAAI,KAAK,EAAE;CAChB,KAAK,MAAM,YAAY,KAAK,YAAY,CAAC,GAAG;EAC1C,IAAI,KAAK,IAAI,QAAQ,GAAG;EACxB,MAAM,SAAS,SAAS,OAAO,QAAQ;EACvC,IAAI,CAAC,QAAQ;EACb,IAAI,OAAO,WAAW,OAAO,OAAO,OAAO,CAAC,EAAA,CAAG,SAAS,YAAY,GAAG,OAAO;EAC9E,MAAM,UAAU,cAAc,OAAO,QAAQ,QAAQ,cAAc,IAAI;EACvE,IAAI,SAAS,OAAO;CACtB;CACA,OAAO;AACT;AAEA,SAAgB,UACd,OACA,QACA,MACA,cACW;CACX,IAAI,KAAK,QAAQ,OAAO;EAAE,SAAS;EAAM,eAAe;EAAM,OAAO;CAAK;CAE1E,KADkB,OAAO,KAAK,OAAO,CAAC,EAAA,CAAG,SAAS,YACvC,GAAG,OAAO;EAAE,SAAS;EAAM,eAAe;EAAM,OAAO;CAAM;CACxE,MAAM,OAAO,cAAc,OAAO,QAAQ,MAAM,YAAY;CAC5D,OAAO;EAAE,SAAS,SAAS;EAAM,eAAe;EAAM,OAAO,SAAS;CAAK;AAC7E;AAEA,SAAgB,WACd,OACA,QACA,MACA,eACY;CACZ,MAAM,UAAU,cAAc,QAC3B,OAAO,UAAU,OAAO,QAAQ,MAAM,EAAE,CAAC,CAAC,OAC7C,CAAC,CAAC;CACF,IAAI,YAAY,GAAG,OAAO;CAC1B,OAAO,YAAY,cAAc,SAAS,QAAQ;AACpD;AAEA,SAAgB,aACd,OACA,QACA,MACA,aACQ;CACR,OAAO,YAAY,QAChB,eAAe,UAAU,OAAO,QAAQ,MAAM,WAAW,EAAE,CAAC,CAAC,OAChE,CAAC,CAAC;AACJ;;AASA,SAAgB,iBAAiB,aAA8C;CAC7E,MAAM,SAA4B,CAAC;CACnC,KAAK,MAAM,cAAc,aAAa;EACpC,MAAM,WAAW,OAAO,MAAM,cAAc,UAAU,UAAU,WAAW,KAAK;EAChF,IAAI,UAAU,SAAS,YAAY,KAAK,UAAU;OAC7C,OAAO,KAAK;GAAE,OAAO,WAAW;GAAO,aAAa,CAAC,UAAU;EAAE,CAAC;CACzE;CACA,OAAO;AACT"}

package/dist/components/record-diff/record-diff.js

@@ -121,17 +121,17 @@ function RecordDiffTable({ className, collapseUnchanged = true, ...props }) {
 					children: [
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "Field"
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "Before"
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+							className: "px-3 py-2 text-start text-xs font-medium text-muted-foreground",
 							children: "After"
 						})
 					]
@@ -142,7 +142,7 @@ function RecordDiffTable({ className, collapseUnchanged = true, ...props }) {
 					children: [
 						/* @__PURE__ */ jsxs("th", {
 							scope: "row",
-							className: "px-3 py-2 text-left align-top font-medium whitespace-nowrap",
+							className: "px-3 py-2 text-start align-top font-medium whitespace-nowrap",
 							children: [field.label, /* @__PURE__ */ jsx("span", {
 								className: "sr-only",
 								children: `, ${field.change}`

package/dist/components/record-diff/record-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-diff.js","names":[],"sources":["../../../src/components/record-diff/record-diff.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What changed about a record, field by field.\n *\n * Every diff package on npm compares lines of text. That is the wrong shape for\n * an audit entry, a settings revision or a config history, where the change is\n * \"role went from viewer to admin\" and rendering it as two lines of JSON makes\n * the reader do the comparison themselves.\n *\n * Scope is deliberately flat records. Nested objects and arrays are formatted as\n * values rather than recursed into, because a recursive differ is a different\n * and much larger component, and pretending otherwise would produce a shallow\n * one that quietly lies about deep changes. `formatValue` is the escape hatch.\n *\n * Redaction is by key pattern and applied before formatting, so a secret is\n * never handed to a formatter that might log it.\n */\n\nexport type FieldChange = \"added\" | \"removed\" | \"changed\" | \"unchanged\";\n\nexport interface RecordField {\n  key: string;\n  label: string;\n  change: FieldChange;\n  before: unknown;\n  after: unknown;\n  redacted: boolean;\n}\n\n/** Values that read as absent, so \"\" → null is not reported as a change. */\nfunction isEmpty(value: unknown): boolean {\n  return value === null || value === undefined || value === \"\";\n}\n\nfunction classify(before: unknown, after: unknown): FieldChange {\n  const hadBefore = !isEmpty(before);\n  const hasAfter = !isEmpty(after);\n\n  if (!hadBefore && hasAfter) return \"added\";\n  if (hadBefore && !hasAfter) return \"removed\";\n  // Both absent. Falling through would compare \"\" against null, which\n  // serialise differently and would report a change that did not happen.\n  if (!hadBefore && !hasAfter) return \"unchanged\";\n  // Structural comparison, so {a:1} and {a:1} are equal. Key order differences\n  // would report a false change, so keys are sorted before comparing.\n  return stableStringify(before) === stableStringify(after) ? \"unchanged\" : \"changed\";\n}\n\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== \"object\") return JSON.stringify(value) ?? \"\";\n  if (Array.isArray(value)) return `[${value.map(stableStringify).join(\",\")}]`;\n  const entries = Object.entries(value as Record<string, unknown>).sort(([a], [b]) =>\n    a.localeCompare(b),\n  );\n  return `{${entries.map(([k, v]) => `${k}:${stableStringify(v)}`).join(\",\")}}`;\n}\n\nfunction defaultFormatValue(value: unknown): string {\n  if (value === null || value === undefined) return \"—\";\n  if (value === \"\") return \"empty\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? \"yes\" : \"no\";\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (Array.isArray(value)) {\n    return value.length === 0 ? \"none\" : value.map(defaultFormatValue).join(\", \");\n  }\n  if (typeof value === \"object\") return JSON.stringify(value);\n  // Symbols and functions have no sensible representation as a field value, and\n  // String() would yield \"[object Object]\" or a function body. Say what it is.\n  return `[${typeof value}]`;\n}\n\n/** Keys whose values must never be rendered, however the record was built. */\nconst DEFAULT_REDACT = /password|secret|token|api[-_]?key|authorization|credential/i;\n\nexport interface RecordDiffProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  before: Record<string, unknown>;\n  after: Record<string, unknown>;\n  /** Overrides the humanised key. */\n  labels?: Record<string, string>;\n  /** Keys to render as redacted. Defaults to common secret-shaped names. */\n  redact?: RegExp;\n  /** Only these keys, in this order. Anything else is ignored. */\n  fields?: string[];\n  /** Hides unchanged fields behind a toggle. */\n  collapseUnchanged?: boolean;\n  formatValue?: (value: unknown, key: string) => string;\n  children?: React.ReactNode;\n}\n\ninterface RecordDiffContextValue {\n  fields: RecordField[];\n  changedCount: number;\n  formatValue: (value: unknown, key: string) => string;\n}\n\nconst RecordDiffContext = createContext<RecordDiffContextValue | null>(null);\n\nfunction useRecordDiffContext(component: string): RecordDiffContextValue {\n  const context = useContext(RecordDiffContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <RecordDiff>.`);\n  }\n  return context;\n}\n\n/** \"billingEmail\" and \"billing_email\" both read as \"Billing email\". */\nfunction humanise(key: string): string {\n  const spaced = key\n    .replace(/[_-]+/g, \" \")\n    .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n    .trim();\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();\n}\n\nexport function diffRecords(\n  before: Record<string, unknown>,\n  after: Record<string, unknown>,\n  options: { labels?: Record<string, string>; redact?: RegExp; fields?: string[] } = {},\n): RecordField[] {\n  const { labels = {}, redact = DEFAULT_REDACT, fields } = options;\n\n  // The union of both sides, so a removed key is still reported. Iterating only\n  // `after` is how removals go missing from audit logs.\n  const keys = fields ?? [...new Set([...Object.keys(before), ...Object.keys(after)])];\n\n  return keys.map((key) => ({\n    key,\n    label: labels[key] ?? humanise(key),\n    change: classify(before[key], after[key]),\n    before: before[key],\n    after: after[key],\n    redacted: redact.test(key),\n  }));\n}\n\nconst CHANGE_STYLES: Record<FieldChange, string> = {\n  added: \"text-success\",\n  removed: \"text-destructive\",\n  changed: \"text-foreground\",\n  unchanged: \"text-muted-foreground\",\n};\n\nexport function RecordDiff({\n  className,\n  before,\n  after,\n  labels,\n  redact = DEFAULT_REDACT,\n  fields: fieldKeys,\n  collapseUnchanged = true,\n  formatValue = defaultFormatValue,\n  children,\n  ...props\n}: RecordDiffProps) {\n  const fields = useMemo(\n    () => diffRecords(before, after, { labels, redact, fields: fieldKeys }),\n    [before, after, labels, redact, fieldKeys],\n  );\n\n  const changedCount = fields.filter((field) => field.change !== \"unchanged\").length;\n\n  const context = useMemo<RecordDiffContextValue>(\n    () => ({ fields, changedCount, formatValue }),\n    [fields, changedCount, formatValue],\n  );\n\n  return (\n    <RecordDiffContext.Provider value={context}>\n      <div\n        data-slot=\"record-diff\"\n        data-changed={changedCount}\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <RecordDiffSummary />\n            <RecordDiffTable collapseUnchanged={collapseUnchanged} />\n          </>\n        )}\n      </div>\n    </RecordDiffContext.Provider>\n  );\n}\n\n/** \"3 fields changed\" — the thing a reviewer scanning a log needs first. */\nexport function RecordDiffSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { changedCount, fields } = useRecordDiffContext(\"RecordDiffSummary\");\n\n  return (\n    <p\n      data-slot=\"record-diff-summary\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {changedCount === 0\n        ? \"No fields changed\"\n        : `${String(changedCount)} of ${String(fields.length)} field${fields.length === 1 ? \"\" : \"s\"} changed`}\n    </p>\n  );\n}\n\nexport interface RecordDiffTableProps extends ComponentPropsWithRef<\"table\"> {\n  collapseUnchanged?: boolean;\n}\n\nexport function RecordDiffTable({\n  className,\n  collapseUnchanged = true,\n  ...props\n}: RecordDiffTableProps) {\n  const { fields, formatValue, changedCount } = useRecordDiffContext(\"RecordDiffTable\");\n  const [showUnchanged, setShowUnchanged] = useState(!collapseUnchanged);\n\n  const unchangedCount = fields.length - changedCount;\n  const visible = showUnchanged\n    ? fields\n    : fields.filter((field) => field.change !== \"unchanged\");\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"overflow-x-auto\">\n        <table\n          data-slot=\"record-diff-table\"\n          className={cn(\"w-full border-collapse text-sm\", className)}\n          {...props}\n        >\n          <thead>\n            <tr className=\"border-b border-border\">\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                Field\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                Before\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-left text-xs font-medium text-muted-foreground\"\n              >\n                After\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {visible.map((field) => (\n              <tr\n                key={field.key}\n                data-slot=\"record-diff-row\"\n                data-change={field.change}\n                className=\"border-b border-border last:border-0\"\n              >\n                {/* scope=\"row\" so each value is announced with its field name\n                    rather than as a loose cell in a wall of table. */}\n                <th\n                  scope=\"row\"\n                  className=\"px-3 py-2 text-left align-top font-medium whitespace-nowrap\"\n                >\n                  {field.label}\n                  {/* The change kind must not be carried by row colour alone. */}\n                  <span className=\"sr-only\">{`, ${field.change}`}</span>\n                </th>\n                <td className=\"px-3 py-2 align-top text-muted-foreground\">\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"added\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    <span className=\"line-through decoration-muted-foreground/50\">\n                      {formatValue(field.before, field.key)}\n                    </span>\n                  )}\n                </td>\n                <td className={cn(\"px-3 py-2 align-top\", CHANGE_STYLES[field.change])}>\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"removed\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    formatValue(field.after, field.key)\n                  )}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {collapseUnchanged && unchangedCount > 0 ? (\n        <button\n          type=\"button\"\n          data-slot=\"record-diff-toggle\"\n          aria-expanded={showUnchanged}\n          onClick={() => {\n            setShowUnchanged((shown) => !shown);\n          }}\n          className={cn(\n            \"self-start rounded-md px-1.5 py-0.5 text-xs text-muted-foreground\",\n            \"transition-colors hover:text-foreground\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          )}\n        >\n          {showUnchanged\n            ? `Hide ${String(unchangedCount)} unchanged`\n            : `Show ${String(unchangedCount)} unchanged`}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A value that is never rendered.\n *\n * Redaction happens before formatting, so a secret is not passed to a formatter\n * that might log or transform it — the value simply does not reach the DOM.\n */\nfunction RedactedValue() {\n  return (\n    <span data-slot=\"record-diff-redacted\" className=\"text-muted-foreground italic\">\n      redacted\n    </span>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"record-diff.js","names":[],"sources":["../../../src/components/record-diff/record-diff.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * What changed about a record, field by field.\n *\n * Every diff package on npm compares lines of text. That is the wrong shape for\n * an audit entry, a settings revision or a config history, where the change is\n * \"role went from viewer to admin\" and rendering it as two lines of JSON makes\n * the reader do the comparison themselves.\n *\n * Scope is deliberately flat records. Nested objects and arrays are formatted as\n * values rather than recursed into, because a recursive differ is a different\n * and much larger component, and pretending otherwise would produce a shallow\n * one that quietly lies about deep changes. `formatValue` is the escape hatch.\n *\n * Redaction is by key pattern and applied before formatting, so a secret is\n * never handed to a formatter that might log it.\n */\n\nexport type FieldChange = \"added\" | \"removed\" | \"changed\" | \"unchanged\";\n\nexport interface RecordField {\n  key: string;\n  label: string;\n  change: FieldChange;\n  before: unknown;\n  after: unknown;\n  redacted: boolean;\n}\n\n/** Values that read as absent, so \"\" → null is not reported as a change. */\nfunction isEmpty(value: unknown): boolean {\n  return value === null || value === undefined || value === \"\";\n}\n\nfunction classify(before: unknown, after: unknown): FieldChange {\n  const hadBefore = !isEmpty(before);\n  const hasAfter = !isEmpty(after);\n\n  if (!hadBefore && hasAfter) return \"added\";\n  if (hadBefore && !hasAfter) return \"removed\";\n  // Both absent. Falling through would compare \"\" against null, which\n  // serialise differently and would report a change that did not happen.\n  if (!hadBefore && !hasAfter) return \"unchanged\";\n  // Structural comparison, so {a:1} and {a:1} are equal. Key order differences\n  // would report a false change, so keys are sorted before comparing.\n  return stableStringify(before) === stableStringify(after) ? \"unchanged\" : \"changed\";\n}\n\nfunction stableStringify(value: unknown): string {\n  if (value === null || typeof value !== \"object\") return JSON.stringify(value) ?? \"\";\n  if (Array.isArray(value)) return `[${value.map(stableStringify).join(\",\")}]`;\n  const entries = Object.entries(value as Record<string, unknown>).sort(([a], [b]) =>\n    a.localeCompare(b),\n  );\n  return `{${entries.map(([k, v]) => `${k}:${stableStringify(v)}`).join(\",\")}}`;\n}\n\nfunction defaultFormatValue(value: unknown): string {\n  if (value === null || value === undefined) return \"—\";\n  if (value === \"\") return \"empty\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? \"yes\" : \"no\";\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (Array.isArray(value)) {\n    return value.length === 0 ? \"none\" : value.map(defaultFormatValue).join(\", \");\n  }\n  if (typeof value === \"object\") return JSON.stringify(value);\n  // Symbols and functions have no sensible representation as a field value, and\n  // String() would yield \"[object Object]\" or a function body. Say what it is.\n  return `[${typeof value}]`;\n}\n\n/** Keys whose values must never be rendered, however the record was built. */\nconst DEFAULT_REDACT = /password|secret|token|api[-_]?key|authorization|credential/i;\n\nexport interface RecordDiffProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  before: Record<string, unknown>;\n  after: Record<string, unknown>;\n  /** Overrides the humanised key. */\n  labels?: Record<string, string>;\n  /** Keys to render as redacted. Defaults to common secret-shaped names. */\n  redact?: RegExp;\n  /** Only these keys, in this order. Anything else is ignored. */\n  fields?: string[];\n  /** Hides unchanged fields behind a toggle. */\n  collapseUnchanged?: boolean;\n  formatValue?: (value: unknown, key: string) => string;\n  children?: React.ReactNode;\n}\n\ninterface RecordDiffContextValue {\n  fields: RecordField[];\n  changedCount: number;\n  formatValue: (value: unknown, key: string) => string;\n}\n\nconst RecordDiffContext = createContext<RecordDiffContextValue | null>(null);\n\nfunction useRecordDiffContext(component: string): RecordDiffContextValue {\n  const context = useContext(RecordDiffContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <RecordDiff>.`);\n  }\n  return context;\n}\n\n/** \"billingEmail\" and \"billing_email\" both read as \"Billing email\". */\nfunction humanise(key: string): string {\n  const spaced = key\n    .replace(/[_-]+/g, \" \")\n    .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n    .trim();\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();\n}\n\nexport function diffRecords(\n  before: Record<string, unknown>,\n  after: Record<string, unknown>,\n  options: { labels?: Record<string, string>; redact?: RegExp; fields?: string[] } = {},\n): RecordField[] {\n  const { labels = {}, redact = DEFAULT_REDACT, fields } = options;\n\n  // The union of both sides, so a removed key is still reported. Iterating only\n  // `after` is how removals go missing from audit logs.\n  const keys = fields ?? [...new Set([...Object.keys(before), ...Object.keys(after)])];\n\n  return keys.map((key) => ({\n    key,\n    label: labels[key] ?? humanise(key),\n    change: classify(before[key], after[key]),\n    before: before[key],\n    after: after[key],\n    redacted: redact.test(key),\n  }));\n}\n\nconst CHANGE_STYLES: Record<FieldChange, string> = {\n  added: \"text-success\",\n  removed: \"text-destructive\",\n  changed: \"text-foreground\",\n  unchanged: \"text-muted-foreground\",\n};\n\nexport function RecordDiff({\n  className,\n  before,\n  after,\n  labels,\n  redact = DEFAULT_REDACT,\n  fields: fieldKeys,\n  collapseUnchanged = true,\n  formatValue = defaultFormatValue,\n  children,\n  ...props\n}: RecordDiffProps) {\n  const fields = useMemo(\n    () => diffRecords(before, after, { labels, redact, fields: fieldKeys }),\n    [before, after, labels, redact, fieldKeys],\n  );\n\n  const changedCount = fields.filter((field) => field.change !== \"unchanged\").length;\n\n  const context = useMemo<RecordDiffContextValue>(\n    () => ({ fields, changedCount, formatValue }),\n    [fields, changedCount, formatValue],\n  );\n\n  return (\n    <RecordDiffContext.Provider value={context}>\n      <div\n        data-slot=\"record-diff\"\n        data-changed={changedCount}\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <RecordDiffSummary />\n            <RecordDiffTable collapseUnchanged={collapseUnchanged} />\n          </>\n        )}\n      </div>\n    </RecordDiffContext.Provider>\n  );\n}\n\n/** \"3 fields changed\" — the thing a reviewer scanning a log needs first. */\nexport function RecordDiffSummary({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  const { changedCount, fields } = useRecordDiffContext(\"RecordDiffSummary\");\n\n  return (\n    <p\n      data-slot=\"record-diff-summary\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {changedCount === 0\n        ? \"No fields changed\"\n        : `${String(changedCount)} of ${String(fields.length)} field${fields.length === 1 ? \"\" : \"s\"} changed`}\n    </p>\n  );\n}\n\nexport interface RecordDiffTableProps extends ComponentPropsWithRef<\"table\"> {\n  collapseUnchanged?: boolean;\n}\n\nexport function RecordDiffTable({\n  className,\n  collapseUnchanged = true,\n  ...props\n}: RecordDiffTableProps) {\n  const { fields, formatValue, changedCount } = useRecordDiffContext(\"RecordDiffTable\");\n  const [showUnchanged, setShowUnchanged] = useState(!collapseUnchanged);\n\n  const unchangedCount = fields.length - changedCount;\n  const visible = showUnchanged\n    ? fields\n    : fields.filter((field) => field.change !== \"unchanged\");\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"overflow-x-auto\">\n        <table\n          data-slot=\"record-diff-table\"\n          className={cn(\"w-full border-collapse text-sm\", className)}\n          {...props}\n        >\n          <thead>\n            <tr className=\"border-b border-border\">\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                Field\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                Before\n              </th>\n              <th\n                scope=\"col\"\n                className=\"px-3 py-2 text-start text-xs font-medium text-muted-foreground\"\n              >\n                After\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {visible.map((field) => (\n              <tr\n                key={field.key}\n                data-slot=\"record-diff-row\"\n                data-change={field.change}\n                className=\"border-b border-border last:border-0\"\n              >\n                {/* scope=\"row\" so each value is announced with its field name\n                    rather than as a loose cell in a wall of table. */}\n                <th\n                  scope=\"row\"\n                  className=\"px-3 py-2 text-start align-top font-medium whitespace-nowrap\"\n                >\n                  {field.label}\n                  {/* The change kind must not be carried by row colour alone. */}\n                  <span className=\"sr-only\">{`, ${field.change}`}</span>\n                </th>\n                <td className=\"px-3 py-2 align-top text-muted-foreground\">\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"added\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    <span className=\"line-through decoration-muted-foreground/50\">\n                      {formatValue(field.before, field.key)}\n                    </span>\n                  )}\n                </td>\n                <td className={cn(\"px-3 py-2 align-top\", CHANGE_STYLES[field.change])}>\n                  {field.redacted ? (\n                    <RedactedValue />\n                  ) : field.change === \"removed\" ? (\n                    <span className=\"text-muted-foreground\">—</span>\n                  ) : (\n                    formatValue(field.after, field.key)\n                  )}\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {collapseUnchanged && unchangedCount > 0 ? (\n        <button\n          type=\"button\"\n          data-slot=\"record-diff-toggle\"\n          aria-expanded={showUnchanged}\n          onClick={() => {\n            setShowUnchanged((shown) => !shown);\n          }}\n          className={cn(\n            \"self-start rounded-md px-1.5 py-0.5 text-xs text-muted-foreground\",\n            \"transition-colors hover:text-foreground\",\n            \"outline-none focus-visible:ring-2 focus-visible:ring-ring/55\",\n          )}\n        >\n          {showUnchanged\n            ? `Hide ${String(unchangedCount)} unchanged`\n            : `Show ${String(unchangedCount)} unchanged`}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A value that is never rendered.\n *\n * Redaction happens before formatting, so a secret is not passed to a formatter\n * that might log or transform it — the value simply does not reach the DOM.\n */\nfunction RedactedValue() {\n  return (\n    <span data-slot=\"record-diff-redacted\" className=\"text-muted-foreground italic\">\n      redacted\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/components/secret-field/index.d.ts

@@ -0,0 +1,2 @@
+import { SecretField, SecretFieldProps, SecretFieldState, maskSecret } from "./secret-field.js";
+export { SecretField, type SecretFieldProps, type SecretFieldState, maskSecret };

package/dist/components/secret-field/index.js

@@ -0,0 +1,2 @@
+import { SecretField, maskSecret } from "./secret-field.js";
+export { SecretField, maskSecret };

package/dist/components/secret-field/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/secret-field/meta.ts
+const meta = defineMeta({
+	name: "secret-field",
+	title: "Secret Field",
+	description: "An API key in its three states: shown once, hidden but revealable, and gone.",
+	category: "form",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "input"],
+	files: ["secret-field.tsx"],
+	a11y: "The value sits in a read-only input rather than a disabled one, so it can be focused, selected and read, and focusing a shown value selects all of it for copying by hand. The field's state — shown once, hidden, revealed, gone — is a sentence attached as its description, never a colour or an icon. Copying is announced through a status region that exists before the first copy, and failure is announced too, with what to do instead, because the clipboard can be refused. Every button carries the field's label in its name, so a settings page with several keys has several distinct Copy buttons. Regenerating is confirmed inline in a named group that states the consequence, since it revokes the current key."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/secret-field/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/secret-field/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"secret-field\",\n  title: \"Secret Field\",\n  description: \"An API key in its three states: shown once, hidden but revealable, and gone.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"input\"],\n  files: [\"secret-field.tsx\"],\n  a11y:\n    \"The value sits in a read-only input rather than a disabled one, so it can be focused, \" +\n    \"selected and read, and focusing a shown value selects all of it for copying by hand. The \" +\n    \"field's state — shown once, hidden, revealed, gone — is a sentence attached as its \" +\n    \"description, never a colour or an icon. Copying is announced through a status region that \" +\n    \"exists before the first copy, and failure is announced too, with what to do instead, because \" +\n    \"the clipboard can be refused. Every button carries the field's label in its name, so a \" +\n    \"settings page with several keys has several distinct Copy buttons. Regenerating is confirmed \" +\n    \"inline in a named group that states the consequence, since it revokes the current key.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,OAAO;CACxC,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAQJ,CAAC"}

package/dist/components/secret-field/secret-field.d.ts

@@ -0,0 +1,58 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/secret-field/secret-field.d.ts
+/**
+ * An API key, token or signing secret, in the three states it actually has.
+ *
+ * Stripe, GitHub, OpenAI, Vercel and every developer product with a settings
+ * page draw this by hand, and the states are the same everywhere: shown once
+ * at creation and never again; hidden but revealable, for a secret the server
+ * can show again; and gone, where only a prefix and the last four remain and
+ * the only thing left to do is regenerate. No component library ships it —
+ * the nearest thing is a password input, which is a control for entering a
+ * secret you know, not for handling one you have just been given.
+ *
+ * "Shown once" is a first-class state rather than a toast, because it is the
+ * one that costs people money: the key is on screen, the tab closes, and the
+ * next hour is spent regenerating it and updating every client. So the field
+ * says it in a sentence beside the value, and the way out is a button that
+ * says what it means — "I have saved it" — rather than the value quietly
+ * vanishing on navigation.
+ *
+ * While hidden, the secret is not in the DOM. The preview is what is
+ * rendered, so a screenshot, an extension or a devtools pane sees the prefix
+ * and the last four, which is what the server itself keeps. Reveals are
+ * reported, since an audit log of who looked is the reason the hidden state
+ * exists. Copy works while hidden, because the point of the key is to be
+ * pasted, not read.
+ */
+type SecretFieldState = "shown" | "hidden" | "revealed" | "gone";
+interface SecretFieldProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  label: string;
+  /** The secret. Omit once it can no longer be shown. */
+  value?: string;
+  /** What stands in for it while hidden or gone. Derived from the value when there is one. */
+  preview?: string;
+  /** This is the only time the value can be seen. */
+  once?: boolean;
+  /** The reader has saved a shown-once value. Drop `value` in response. */
+  onAcknowledge?: () => void;
+  /** Called each time the value is shown or hidden, so reveals can be logged. */
+  onRevealChange?: (revealed: boolean) => void;
+  /** Offers to regenerate. Confirmed inline first, because it revokes the current one. */
+  onRegenerate?: () => void;
+  /** Said before regenerating. */
+  regenerateWarning?: string;
+  /** Metadata — when it was created, when it was last used. */
+  children?: ReactNode;
+}
+/**
+ * A prefix and the last four, the way a server keeps a key it has hashed.
+ * The prefix is kept through the last underscore in the first twelve
+ * characters — `sk_live_`, `ghp_`, `whsec_` — so the reader can tell which
+ * key this is without being shown any of it.
+ */
+declare function maskSecret(value: string, keepEnd?: number): string;
+declare function SecretField({ className, label, value, preview, once, onAcknowledge, onRevealChange, onRegenerate, regenerateWarning, children, ...props }: SecretFieldProps): import("react").JSX.Element;
+//#endregion
+export { SecretField, SecretFieldProps, SecretFieldState, maskSecret };
+//# sourceMappingURL=secret-field.d.ts.map

package/dist/components/secret-field/secret-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secret-field.d.ts","names":[],"sources":["../../../src/components/secret-field/secret-field.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCY;UAEK,yBAAyB,KAAK;EAC7C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,kBAAkB;;EAElB;;EAEA;;EAEA,WAAW;;;;;;;;iBASG,WAAW,eAAe;iBAS1B,cACd,WACA,OACA,OACA,SACA,MACA,eACA,gBACA,cACA,mBACA,aACG,SACF,mCAAgB,IAAA"}