@dowel-ui/react 0.4.0 → 0.5.0

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

@@ -0,0 +1,227 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/dns-record/dns-record.tsx
+/**
+* The host both ways a provider might want it. Accepts either form and a
+* trailing dot, so the record can be declared however the backend has it.
+*/
+function dnsHostForms(name, zone) {
+	const cleanZone = zone.replace(/\.$/, "");
+	const cleanName = name.replace(/\.$/, "");
+	if (cleanName === "@" || cleanName === "" || cleanName === cleanZone) return {
+		relative: "@",
+		full: cleanZone
+	};
+	if (cleanName.endsWith(`.${cleanZone}`)) return {
+		relative: cleanName.slice(0, -cleanZone.length - 1),
+		full: cleanName
+	};
+	return {
+		relative: cleanName,
+		full: `${cleanName}.${cleanZone}`
+	};
+}
+function DnsRecord({ className, type, name, value, zone, ttl, priority, purpose, status = "pending", found, checkedAt, locale, onCheck, children, ...props }) {
+	const id = useId();
+	const forms = zone ? dnsHostForms(name, zone) : null;
+	const host = forms ? forms.relative : name;
+	const [copy, setCopy] = useState(null);
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const copyPart = (part, text) => {
+		const settle = (state) => {
+			setCopy({
+				part,
+				state
+			});
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopy(null);
+			}, 2e3);
+		};
+		Promise.resolve().then(() => navigator.clipboard.writeText(text)).then(() => {
+			settle("copied");
+		}, () => {
+			settle("error");
+		});
+	};
+	const statusText = status === "verified" ? "Verified" : status === "checking" ? "Checking…" : status === "failed" ? found && found.length > 0 ? "Not verified. Something else was found." : "Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear." : "Not checked yet";
+	const checked = checkedAt !== void 0 ? new Intl.DateTimeFormat(locale, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(checkedAt) : null;
+	const parts = [
+		{
+			key: "type",
+			label: "Type",
+			text: type
+		},
+		{
+			key: "name",
+			label: "Name",
+			text: host,
+			note: forms ? forms.relative === "@" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				" or leave it blank instead of ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: "@"
+				}),
+				"."
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Some providers want the full name, ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: forms.full
+				}),
+				". If the field already ends in ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: zone
+				}),
+				", enter just the part shown."
+			] }) : void 0
+		},
+		{
+			key: "value",
+			label: "Value",
+			text: value,
+			note: type.toUpperCase() === "TXT" ? "Enter without quotes; your provider adds them if it needs to." : void 0
+		},
+		...priority !== void 0 ? [{
+			key: "priority",
+			label: "Priority",
+			text: String(priority)
+		}] : [],
+		...ttl !== void 0 ? [{
+			key: "ttl",
+			label: "TTL",
+			text: String(ttl)
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "dns-record",
+		"data-status": status,
+		"aria-labelledby": `${id}-heading`,
+		"aria-busy": status === "checking" || void 0,
+		className: cn("flex flex-col gap-3 rounded-lg border border-border bg-card p-4", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("h3", {
+					id: `${id}-heading`,
+					className: "text-sm font-medium",
+					children: [
+						type,
+						" record",
+						purpose ? /* @__PURE__ */ jsxs("span", {
+							className: "font-normal text-muted-foreground",
+							children: [" · ", purpose]
+						}) : null
+					]
+				}), /* @__PURE__ */ jsxs("p", {
+					"data-slot": "dns-record-status",
+					role: "status",
+					"aria-live": "polite",
+					className: cn("flex items-center gap-1.5 text-xs", status === "verified" && "text-success", status === "failed" && "text-destructive", (status === "pending" || status === "checking") && "text-muted-foreground"),
+					children: [
+						status === "checking" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
+						statusText,
+						checked && status !== "checking" ? /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [" · checked ", checked]
+						}) : null
+					]
+				})]
+			}),
+			children,
+			/* @__PURE__ */ jsx("dl", {
+				className: "m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]",
+				children: parts.map((part) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-xs font-medium text-muted-foreground sm:pt-1.5",
+						children: part.label
+					}), /* @__PURE__ */ jsxs("dd", {
+						className: "m-0 flex flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("code", {
+									"data-slot": "dns-record-part",
+									"data-part": part.key,
+									className: "min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all",
+									children: part.text
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": `Copy ${part.label.toLowerCase()}`,
+									"data-state": copy?.part === part.key ? copy.state : "idle",
+									className: cn("shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium", "hover:bg-accent hover:text-accent-foreground", focusRing),
+									onClick: () => {
+										copyPart(part.key, part.text);
+									},
+									children: copy?.part === part.key && copy.state === "copied" ? "Copied" : "Copy"
+								})]
+							}),
+							copy?.part === part.key && copy.state === "error" ? /* @__PURE__ */ jsx("p", {
+								"data-slot": "dns-record-copy-error",
+								className: "text-xs text-destructive",
+								children: "Could not copy. Select it and copy by hand."
+							}) : null,
+							part.note ? /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: part.note
+							}) : null
+						]
+					})]
+				}, part.key))
+			}),
+			status === "failed" && found && found.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "dns-record-found",
+				className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-destructive",
+					children: "Found instead:"
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "m-0 mt-1 list-none p-0",
+					children: found.map((entry) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", {
+						className: "font-mono break-all",
+						children: entry
+					}) }, entry))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: copy?.state === "copied" ? `Copied ${copy.part}` : copy?.state === "error" ? `Could not copy ${copy.part}. Select it and copy by hand.` : ""
+			}),
+			onCheck ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					loading: status === "checking",
+					onClick: onCheck,
+					children: status === "verified" ? "Check again" : "Check now"
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DnsRecord, dnsHostForms };
+
+//# sourceMappingURL=dns-record.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dns-record.js","names":[],"sources":["../../../src/components/dns-record/dns-record.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { Spinner } from \"@/components/spinner\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * \"Add this record at your DNS provider.\"\n *\n * Vercel, Resend, Cloudflare, Postmark, Google Workspace and every product\n * that verifies a domain or routes its mail draws this card by hand, and\n * they all learn the same three things the hard way.\n *\n * The parts are copied separately. A provider's form has a Name field, a\n * Type field and a Value field, so one button that copies the whole line\n * copies something nobody can paste anywhere.\n *\n * The Name field is a trap. Some providers want the host relative to the\n * zone, `_dmarc`; some want the full name, `_dmarc.acme.com`; and some take\n * the relative form and append the zone themselves, so a full name pasted\n * in becomes `_dmarc.acme.com.acme.com` and the check fails for a reason\n * nobody can see. So the host is shown both ways, with the sentence that\n * explains which to use.\n *\n * A failed check says what was found. \"Not verified\" sends people back to\n * their provider to stare at a record that is correct and has not\n * propagated yet; \"found v=spf1 -all, expected v=spf1 include:…\" sends them\n * to the typo. And nothing found at all is said as nothing found, with how\n * long that can take, because it is not the same as wrong.\n */\n\nexport type DnsRecordStatus = \"pending\" | \"checking\" | \"verified\" | \"failed\";\n\nexport interface DnsHostForms {\n  /** Relative to the zone: `_dmarc`, or `@` for the zone itself. */\n  relative: string;\n  /** Fully qualified: `_dmarc.acme.com`. */\n  full: string;\n}\n\n/**\n * The host both ways a provider might want it. Accepts either form and a\n * trailing dot, so the record can be declared however the backend has it.\n */\nexport function dnsHostForms(name: string, zone: string): DnsHostForms {\n  const cleanZone = zone.replace(/\\.$/, \"\");\n  const cleanName = name.replace(/\\.$/, \"\");\n  if (cleanName === \"@\" || cleanName === \"\" || cleanName === cleanZone) {\n    return { relative: \"@\", full: cleanZone };\n  }\n  if (cleanName.endsWith(`.${cleanZone}`)) {\n    return { relative: cleanName.slice(0, -cleanZone.length - 1), full: cleanName };\n  }\n  return { relative: cleanName, full: `${cleanName}.${cleanZone}` };\n}\n\nexport interface DnsRecordProps extends Omit<ComponentPropsWithRef<\"section\">, \"children\"> {\n  type: string;\n  /** The host, relative or fully qualified. */\n  name: string;\n  value: string;\n  /** The zone the record belongs to. Enables the host to be shown both ways. */\n  zone?: string;\n  ttl?: number | string;\n  priority?: number;\n  /** What the record is for, in the reader's language: \"Proves you own acme.com\". */\n  purpose?: string;\n  status?: DnsRecordStatus;\n  /** What the check found instead, when it failed. The useful part. */\n  found?: string[];\n  checkedAt?: Date;\n  locale?: string;\n  onCheck?: () => void;\n  children?: ReactNode;\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"error\";\n\nexport function DnsRecord({\n  className,\n  type,\n  name,\n  value,\n  zone,\n  ttl,\n  priority,\n  purpose,\n  status = \"pending\",\n  found,\n  checkedAt,\n  locale,\n  onCheck,\n  children,\n  ...props\n}: DnsRecordProps) {\n  const id = useId();\n  const forms = zone ? dnsHostForms(name, zone) : null;\n  const host = forms ? forms.relative : name;\n\n  // Which part was copied, and whether it worked, so the button that was\n  // pressed is the one that says so.\n  const [copy, setCopy] = useState<{ part: string; state: CopyState } | null>(null);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copyPart = (part: string, text: string) => {\n    const settle = (state: CopyState) => {\n      setCopy({ part, state });\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopy(null);\n      }, 2000);\n    };\n    Promise.resolve()\n      .then(() => navigator.clipboard.writeText(text))\n      .then(\n        () => {\n          settle(\"copied\");\n        },\n        () => {\n          settle(\"error\");\n        },\n      );\n  };\n\n  const statusText =\n    status === \"verified\"\n      ? \"Verified\"\n      : status === \"checking\"\n        ? \"Checking…\"\n        : status === \"failed\"\n          ? found && found.length > 0\n            ? \"Not verified. Something else was found.\"\n            : \"Not verified. Nothing found yet — DNS changes can take up to 48 hours to appear.\"\n          : \"Not checked yet\";\n\n  const checked =\n    checkedAt !== undefined\n      ? new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\" }).format(\n          checkedAt,\n        )\n      : null;\n\n  const parts: { key: string; label: string; text: string; note?: ReactNode }[] = [\n    { key: \"type\", label: \"Type\", text: type },\n    {\n      key: \"name\",\n      label: \"Name\",\n      text: host,\n      note: forms ? (\n        forms.relative === \"@\" ? (\n          <>\n            Some providers want <code className=\"font-mono\">{forms.full}</code> or leave it\n            blank instead of <code className=\"font-mono\">@</code>.\n          </>\n        ) : (\n          <>\n            Some providers want the full name, <code className=\"font-mono\">{forms.full}</code>.\n            If the field already ends in <code className=\"font-mono\">{zone}</code>, enter just\n            the part shown.\n          </>\n        )\n      ) : undefined,\n    },\n    {\n      key: \"value\",\n      label: \"Value\",\n      text: value,\n      note:\n        type.toUpperCase() === \"TXT\"\n          ? \"Enter without quotes; your provider adds them if it needs to.\"\n          : undefined,\n    },\n    ...(priority !== undefined\n      ? [{ key: \"priority\", label: \"Priority\", text: String(priority) }]\n      : []),\n    ...(ttl !== undefined ? [{ key: \"ttl\", label: \"TTL\", text: String(ttl) }] : []),\n  ];\n\n  return (\n    <section\n      data-slot=\"dns-record\"\n      data-status={status}\n      aria-labelledby={`${id}-heading`}\n      aria-busy={status === \"checking\" || undefined}\n      className={cn(\n        \"flex flex-col gap-3 rounded-lg border border-border bg-card p-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={`${id}-heading`} className=\"text-sm font-medium\">\n          {type} record\n          {purpose ? (\n            <span className=\"font-normal text-muted-foreground\"> · {purpose}</span>\n          ) : null}\n        </h3>\n        {/* Status as a word, and announced when it changes: a check was asked\n            for, and the answer should arrive where the asker is. */}\n        <p\n          data-slot=\"dns-record-status\"\n          role=\"status\"\n          aria-live=\"polite\"\n          className={cn(\n            \"flex items-center gap-1.5 text-xs\",\n            status === \"verified\" && \"text-success\",\n            status === \"failed\" && \"text-destructive\",\n            (status === \"pending\" || status === \"checking\") && \"text-muted-foreground\",\n          )}\n        >\n          {status === \"checking\" ? <Spinner size=\"sm\" /> : null}\n          {statusText}\n          {checked && status !== \"checking\" ? (\n            <span className=\"text-muted-foreground\"> · checked {checked}</span>\n          ) : null}\n        </p>\n      </div>\n\n      {children}\n\n      <dl className=\"m-0 grid gap-x-4 gap-y-2 sm:grid-cols-[auto_1fr]\">\n        {parts.map((part) => (\n          <div key={part.key} className=\"contents\">\n            <dt className=\"text-xs font-medium text-muted-foreground sm:pt-1.5\">\n              {part.label}\n            </dt>\n            <dd className=\"m-0 flex flex-col gap-1\">\n              <div className=\"flex items-start gap-2\">\n                <code\n                  data-slot=\"dns-record-part\"\n                  data-part={part.key}\n                  className=\"min-w-0 flex-1 rounded-md bg-muted px-2 py-1 font-mono text-xs break-all\"\n                >\n                  {part.text}\n                </code>\n                <button\n                  type=\"button\"\n                  aria-label={`Copy ${part.label.toLowerCase()}`}\n                  data-state={copy?.part === part.key ? copy.state : \"idle\"}\n                  className={cn(\n                    \"shrink-0 rounded-md border border-input bg-background px-2 py-1 text-xs font-medium\",\n                    \"hover:bg-accent hover:text-accent-foreground\",\n                    focusRing,\n                  )}\n                  onClick={() => {\n                    copyPart(part.key, part.text);\n                  }}\n                >\n                  {copy?.part === part.key && copy.state === \"copied\" ? \"Copied\" : \"Copy\"}\n                </button>\n              </div>\n              {copy?.part === part.key && copy.state === \"error\" ? (\n                <p data-slot=\"dns-record-copy-error\" className=\"text-xs text-destructive\">\n                  Could not copy. Select it and copy by hand.\n                </p>\n              ) : null}\n              {part.note ? <p className=\"text-xs text-muted-foreground\">{part.note}</p> : null}\n            </dd>\n          </div>\n        ))}\n      </dl>\n\n      {status === \"failed\" && found && found.length > 0 ? (\n        <div\n          data-slot=\"dns-record-found\"\n          className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-xs\"\n        >\n          <p className=\"font-medium text-destructive\">Found instead:</p>\n          <ul className=\"m-0 mt-1 list-none p-0\">\n            {found.map((entry) => (\n              <li key={entry}>\n                <code className=\"font-mono break-all\">{entry}</code>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n\n      {/* A separate region from the verification status, so \"Copied name\"\n          never replaces or interrupts a check result that is being read.\n          Present from the start, so the first copy is heard. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copy?.state === \"copied\"\n          ? `Copied ${copy.part}`\n          : copy?.state === \"error\"\n            ? `Could not copy ${copy.part}. Select it and copy by hand.`\n            : \"\"}\n      </span>\n\n      {onCheck ? (\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" loading={status === \"checking\"} onClick={onCheck}>\n            {status === \"verified\" ? \"Check again\" : \"Check now\"}\n          </Button>\n        </div>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/components/dns-record/index.d.ts

@@ -0,0 +1,2 @@
+import { DnsHostForms, DnsRecord, DnsRecordProps, DnsRecordStatus, dnsHostForms } from "./dns-record.js";
+export { type DnsHostForms, DnsRecord, type DnsRecordProps, type DnsRecordStatus, dnsHostForms };

package/dist/components/dns-record/index.js

@@ -0,0 +1,2 @@
+import { DnsRecord, dnsHostForms } from "./dns-record.js";
+export { DnsRecord, dnsHostForms };

package/dist/components/dns-record/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/dns-record/meta.ts
+const meta = defineMeta({
+	name: "dns-record",
+	title: "DNS Record",
+	description: "Add this record at your provider: parts copied separately, checked with what was found.",
+	category: "data",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "spinner"],
+	files: ["dns-record.tsx"],
+	a11y: "The card is a region named by the record's type and purpose. Each part is a definition with its own copy button, named by the part it copies, so five Copy buttons are five different buttons. Verification status is a word in a polite live region, so the answer to a check arrives where it was asked for, and the card is aria-busy while checking. Copy results are announced in a separate region, present from the start, so a copy never replaces a check result mid-sentence; failure is announced with what to do instead. What the check found is a list, not a colour."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/dns-record/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/dns-record/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"dns-record\",\n  title: \"DNS Record\",\n  description:\n    \"Add this record at your provider: parts copied separately, checked with what was found.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"spinner\"],\n  files: [\"dns-record.tsx\"],\n  a11y:\n    \"The card is a region named by the record's type and purpose. Each part is a definition \" +\n    \"with its own copy button, named by the part it copies, so five Copy buttons are five \" +\n    \"different buttons. Verification status is a word in a polite live region, so the answer to \" +\n    \"a check arrives where it was asked for, and the card is aria-busy while checking. Copy \" +\n    \"results are announced in a separate region, present from the start, so a copy never \" +\n    \"replaces a check result mid-sentence; failure is announced with what to do instead. What \" +\n    \"the check found is a list, not a colour.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,SAAS;CAC1C,OAAO,CAAC,gBAAgB;CACxB,MACE;AAOJ,CAAC"}

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

@@ -0,0 +1,3 @@
+import { CellState, Grants, GroupState, Permission, PermissionGroup, Role, cellState, countGranted, groupPermissions, groupState, inheritedFrom } from "./permission-model.js";
+import { PermissionMatrix, PermissionMatrixProps } from "./permission-matrix.js";
+export { type CellState, type Grants, type GroupState, type Permission, type PermissionGroup, PermissionMatrix, type PermissionMatrixProps, type Role, cellState, countGranted, groupPermissions, groupState, inheritedFrom };

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

@@ -0,0 +1,3 @@
+import { cellState, countGranted, groupPermissions, groupState, inheritedFrom } from "./permission-model.js";
+import { PermissionMatrix } from "./permission-matrix.js";
+export { PermissionMatrix, cellState, countGranted, groupPermissions, groupState, inheritedFrom };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/permission-matrix/meta.ts
+const meta = defineMeta({
+	name: "permission-matrix",
+	title: "Permission Matrix",
+	description: "Roles across, permissions down, with inheritance, locked roles and one tab stop.",
+	category: "data",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["checkbox"],
+	files: ["permission-model.ts", "permission-matrix.tsx"],
+	a11y: "A grid in the WAI-ARIA sense: role=\"grid\" with one tab stop, arrow keys between cells, Home and End along a row and Ctrl with them across the whole matrix — the right call for a matrix that is operated, where it was the wrong one for a diff that is read. Every checkbox is named by both coordinates, \"Delete projects for Editor\", so a reader arriving by arrow key knows where they are without re-reading the headers. An inherited grant is a checked box that cannot be changed here, marked aria-disabled rather than disabled so it stays in the keyboard path, with the role it came from as its description. A locked role says in each cell's description that nothing can be changed. Group toggles are tri-state, and the column header counts each role's grants in text."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/permission-matrix/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"permission-matrix\",\n  title: \"Permission Matrix\",\n  description:\n    \"Roles across, permissions down, with inheritance, locked roles and one tab stop.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"checkbox\"],\n  files: [\"permission-model.ts\", \"permission-matrix.tsx\"],\n  a11y:\n    'A grid in the WAI-ARIA sense: role=\"grid\" with one tab stop, arrow keys between cells, Home ' +\n    \"and End along a row and Ctrl with them across the whole matrix — the right call for a \" +\n    \"matrix that is operated, where it was the wrong one for a diff that is read. Every checkbox \" +\n    'is named by both coordinates, \"Delete projects for Editor\", so a reader arriving by arrow ' +\n    \"key knows where they are without re-reading the headers. An inherited grant is a checked \" +\n    \"box that cannot be changed here, marked aria-disabled rather than disabled so it stays in \" +\n    \"the keyboard path, with the role it came from as its description. A locked role says in \" +\n    \"each cell's description that nothing can be changed. Group toggles are tri-state, and the \" +\n    \"column header counts each role's grants in text.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU;CACjC,OAAO,CAAC,uBAAuB,uBAAuB;CACtD,MACE;AASJ,CAAC"}

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

@@ -0,0 +1,46 @@
+import { Grants, Permission, Role } from "./permission-model.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/permission-matrix/permission-matrix.d.ts
+/**
+ * Roles across, permissions down, a checkbox at every crossing.
+ *
+ * Every admin panel has one and every admin panel builds it, because the
+ * hard part is not the checkboxes. It is that a role can inherit from
+ * another, so a box can be ticked without anyone having ticked it; that an
+ * Owner has everything and none of it can be unticked; that a section of
+ * eight permissions wants one control for all of them; and that sixty
+ * checkboxes are sixty tab stops unless something is done about it.
+ *
+ * Something is done about it. This is a grid in the WAI-ARIA sense — one tab
+ * stop, arrow keys between cells, Home and End along a row — which is the
+ * right call here and was the wrong one for the diff viewer: a diff is read,
+ * a matrix is operated. Every checkbox is named by both coordinates, "Delete
+ * projects for Editor", so a reader arriving by arrow key knows where they
+ * are without re-reading the headers.
+ *
+ * A grant that arrived by inheritance is shown as a checked box that cannot
+ * be unchecked here, with the role it came from said beside it and in the
+ * box's description. A disabled control would be the obvious rendering, and
+ * it would take the box out of the tab order and the arrow-key path, so a
+ * keyboard user would step over the one cell whose state needs explaining.
+ *
+ * Changes are reported, never applied. A group toggle reports every
+ * permission it touched in one call, so an application can save it as one
+ * change rather than eight.
+ */
+interface PermissionMatrixProps extends Omit<ComponentPropsWithRef<"table">, "onChange"> {
+  /** Names the matrix: "Permissions for Acme". */
+  label: string;
+  roles: Role[];
+  permissions: Permission[];
+  grants: Grants;
+  /**
+   * A change to make. Several ids arrive together when a group toggle was
+   * used. Omit to render the matrix as a record.
+   */
+  onChange?: (roleId: string, permissionIds: string[], granted: boolean) => void;
+}
+declare function PermissionMatrix({ className, label, roles, permissions, grants, onChange, ...props }: PermissionMatrixProps): import("react").JSX.Element;
+//#endregion
+export { PermissionMatrix, PermissionMatrixProps };
+//# sourceMappingURL=permission-matrix.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"permission-matrix.d.ts","names":[],"sources":["../../../src/components/permission-matrix/permission-matrix.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmDiB,8BAA8B,KAC7C;;EAIA;EACA,OAAO;EACP,aAAa;EACb,QAAQ;;;;;EAKR,YAAY,gBAAgB,yBAAyB;;iBAcvC,mBACd,WACA,OACA,OACA,aACA,QACA,aACG,SACF,wCAAqB,IAAA"}

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-left 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-left 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-left font-normal", row.permission.group !== void 0 && "pl-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-left 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-left 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-left font-normal\",\n                    row.permission.group !== undefined && \"pl-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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"}