@dowel-ui/react 0.4.0 → 0.5.0

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/progress/progress.d.ts

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/progress/progress.d.ts
 declare const progressVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
-  tone?: "destructive" | "success" | "warning" | "primary" | null | undefined;
+  tone?: "primary" | "success" | "warning" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ProgressProps extends ComponentPropsWithRef<typeof Progress.Root>, VariantProps<typeof progressVariants> {}
 /**

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"}

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

@@ -0,0 +1,168 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/secret-field/secret-field.tsx
+/**
+* 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.
+*/
+function maskSecret(value, keepEnd = 4) {
+	const underscore = value.slice(0, 12).lastIndexOf("_");
+	let prefix = underscore > 0 ? value.slice(0, underscore + 1) : value.slice(0, 4);
+	if (prefix.length + keepEnd + 4 > value.length) prefix = "";
+	if (value.length < keepEnd + 4) return "••••••••";
+	return `${prefix}…${value.slice(-keepEnd)}`;
+}
+function SecretField({ className, label, value, preview, once = false, onAcknowledge, onRevealChange, onRegenerate, regenerateWarning = "Regenerating revokes this one immediately. Anything still using it stops working.", children, ...props }) {
+	const id = useId();
+	const [revealed, setRevealed] = useState(false);
+	const [confirming, setConfirming] = useState(false);
+	const [copy, setCopy] = useState("idle");
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const state = value === void 0 ? "gone" : once ? "shown" : revealed ? "revealed" : "hidden";
+	const visible = state === "shown" || state === "revealed";
+	const masked = preview ?? (value !== void 0 ? maskSecret(value) : "••••••••");
+	const copyValue = () => {
+		if (value === void 0) return;
+		const settle = (next) => {
+			setCopy(next);
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopy("idle");
+			}, 2e3);
+		};
+		Promise.resolve().then(() => navigator.clipboard.writeText(value)).then(() => {
+			settle("copied");
+		}, () => {
+			settle("error");
+		});
+	};
+	const setReveal = (next) => {
+		setRevealed(next);
+		onRevealChange?.(next);
+	};
+	const note = state === "shown" ? "Shown once. Copy it now — it cannot be shown again." : state === "gone" ? "Cannot be shown again." : state === "hidden" ? "Hidden. Copy works without revealing it." : "Revealed.";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "secret-field",
+		"data-state": state,
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: `${id}-value`,
+				className: "text-xs font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						id: `${id}-value`,
+						readOnly: true,
+						inputSize: "sm",
+						value: visible ? value : masked,
+						spellCheck: false,
+						autoComplete: "off",
+						"aria-describedby": `${id}-note`,
+						className: "min-w-0 flex-1 basis-64 font-mono",
+						onFocus: (event) => {
+							if (visible) event.currentTarget.select();
+						}
+					}),
+					value !== void 0 && !once ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						"aria-pressed": revealed,
+						"aria-label": `${revealed ? "Hide" : "Reveal"} — ${label}`,
+						onClick: () => {
+							setReveal(!revealed);
+						},
+						children: revealed ? "Hide" : "Reveal"
+					}) : null,
+					value !== void 0 ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						"data-state": copy,
+						"aria-label": `Copy — ${label}`,
+						onClick: copyValue,
+						children: copy === "copied" ? "Copied" : "Copy"
+					}) : null,
+					state === "shown" && onAcknowledge ? /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						size: "sm",
+						onClick: onAcknowledge,
+						children: "I have saved it"
+					}) : null,
+					onRegenerate && !confirming ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						"aria-label": `Regenerate — ${label}`,
+						onClick: () => {
+							setConfirming(true);
+						},
+						children: "Regenerate…"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${id}-note`,
+				"data-slot": "secret-field-note",
+				className: cn("text-xs", state === "shown" ? "text-warning" : "text-muted-foreground"),
+				children: note
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: copy === "copied" ? "Copied to the clipboard" : copy === "error" ? "Could not copy. Select the value and copy it by hand." : ""
+			}),
+			copy === "error" ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "secret-field-copy-error",
+				className: "text-xs text-destructive",
+				children: "Could not copy. Select the value and copy it by hand."
+			}) : null,
+			children,
+			confirming ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "secret-field-confirm",
+				role: "group",
+				"aria-labelledby": `${id}-confirm`,
+				className: "flex flex-col gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					id: `${id}-confirm`,
+					className: "text-xs text-destructive",
+					children: regenerateWarning
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "destructive",
+						size: "sm",
+						onClick: () => {
+							setConfirming(false);
+							onRegenerate?.();
+						},
+						children: "Regenerate"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							setConfirming(false);
+						},
+						children: "Cancel"
+					})]
+				})]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { SecretField, maskSecret };
+
+//# sourceMappingURL=secret-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"secret-field.js","names":[],"sources":["../../../src/components/secret-field/secret-field.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 { Input } from \"@/components/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An API key, token or signing secret, in the three states it actually has.\n *\n * Stripe, GitHub, OpenAI, Vercel and every developer product with a settings\n * page draw this by hand, and the states are the same everywhere: shown once\n * at creation and never again; hidden but revealable, for a secret the server\n * can show again; and gone, where only a prefix and the last four remain and\n * the only thing left to do is regenerate. No component library ships it —\n * the nearest thing is a password input, which is a control for entering a\n * secret you know, not for handling one you have just been given.\n *\n * \"Shown once\" is a first-class state rather than a toast, because it is the\n * one that costs people money: the key is on screen, the tab closes, and the\n * next hour is spent regenerating it and updating every client. So the field\n * says it in a sentence beside the value, and the way out is a button that\n * says what it means — \"I have saved it\" — rather than the value quietly\n * vanishing on navigation.\n *\n * While hidden, the secret is not in the DOM. The preview is what is\n * rendered, so a screenshot, an extension or a devtools pane sees the prefix\n * and the last four, which is what the server itself keeps. Reveals are\n * reported, since an audit log of who looked is the reason the hidden state\n * exists. Copy works while hidden, because the point of the key is to be\n * pasted, not read.\n */\n\nexport type SecretFieldState = \"shown\" | \"hidden\" | \"revealed\" | \"gone\";\n\nexport interface SecretFieldProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  label: string;\n  /** The secret. Omit once it can no longer be shown. */\n  value?: string;\n  /** What stands in for it while hidden or gone. Derived from the value when there is one. */\n  preview?: string;\n  /** This is the only time the value can be seen. */\n  once?: boolean;\n  /** The reader has saved a shown-once value. Drop `value` in response. */\n  onAcknowledge?: () => void;\n  /** Called each time the value is shown or hidden, so reveals can be logged. */\n  onRevealChange?: (revealed: boolean) => void;\n  /** Offers to regenerate. Confirmed inline first, because it revokes the current one. */\n  onRegenerate?: () => void;\n  /** Said before regenerating. */\n  regenerateWarning?: string;\n  /** Metadata — when it was created, when it was last used. */\n  children?: ReactNode;\n}\n\n/**\n * A prefix and the last four, the way a server keeps a key it has hashed.\n * The prefix is kept through the last underscore in the first twelve\n * characters — `sk_live_`, `ghp_`, `whsec_` — so the reader can tell which\n * key this is without being shown any of it.\n */\nexport function maskSecret(value: string, keepEnd = 4): string {\n  const underscore = value.slice(0, 12).lastIndexOf(\"_\");\n  let prefix = underscore > 0 ? value.slice(0, underscore + 1) : value.slice(0, 4);\n  // Never show enough of a short secret to reconstruct it.\n  if (prefix.length + keepEnd + 4 > value.length) prefix = \"\";\n  if (value.length < keepEnd + 4) return \"••••••••\";\n  return `${prefix}…${value.slice(-keepEnd)}`;\n}\n\nexport function SecretField({\n  className,\n  label,\n  value,\n  preview,\n  once = false,\n  onAcknowledge,\n  onRevealChange,\n  onRegenerate,\n  regenerateWarning = \"Regenerating revokes this one immediately. Anything still using it stops working.\",\n  children,\n  ...props\n}: SecretFieldProps) {\n  const id = useId();\n  const [revealed, setRevealed] = useState(false);\n  const [confirming, setConfirming] = useState(false);\n  const [copy, setCopy] = useState<\"idle\" | \"copied\" | \"error\">(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const state: SecretFieldState =\n    value === undefined ? \"gone\" : once ? \"shown\" : revealed ? \"revealed\" : \"hidden\";\n  const visible = state === \"shown\" || state === \"revealed\";\n  const masked = preview ?? (value !== undefined ? maskSecret(value) : \"••••••••\");\n\n  const copyValue = () => {\n    if (value === undefined) return;\n    const settle = (next: \"copied\" | \"error\") => {\n      setCopy(next);\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopy(\"idle\");\n      }, 2000);\n    };\n    // Wrapped so a missing clipboard API throws into the same failure path\n    // as a refused one, rather than throwing out of the click handler.\n    Promise.resolve()\n      .then(() => navigator.clipboard.writeText(value))\n      .then(\n        () => {\n          settle(\"copied\");\n        },\n        () => {\n          settle(\"error\");\n        },\n      );\n  };\n\n  const setReveal = (next: boolean) => {\n    setRevealed(next);\n    onRevealChange?.(next);\n  };\n\n  const note =\n    state === \"shown\"\n      ? \"Shown once. Copy it now — it cannot be shown again.\"\n      : state === \"gone\"\n        ? \"Cannot be shown again.\"\n        : state === \"hidden\"\n          ? \"Hidden. Copy works without revealing it.\"\n          : \"Revealed.\";\n\n  return (\n    <div\n      data-slot=\"secret-field\"\n      data-state={state}\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <label htmlFor={`${id}-value`} className=\"text-xs font-medium\">\n        {label}\n      </label>\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {/* Read-only rather than disabled, so it can be focused, selected and\n            read. While hidden the DOM holds the preview, not the secret. */}\n        <Input\n          id={`${id}-value`}\n          readOnly\n          inputSize=\"sm\"\n          value={visible ? value : masked}\n          spellCheck={false}\n          autoComplete=\"off\"\n          aria-describedby={`${id}-note`}\n          // Claims a readable width first; the buttons wrap under it when the\n          // row is short, rather than the key being squeezed to a fragment.\n          className=\"min-w-0 flex-1 basis-64 font-mono\"\n          onFocus={(event) => {\n            if (visible) event.currentTarget.select();\n          }}\n        />\n\n        {value !== undefined && !once ? (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            aria-pressed={revealed}\n            aria-label={`${revealed ? \"Hide\" : \"Reveal\"} — ${label}`}\n            onClick={() => {\n              setReveal(!revealed);\n            }}\n          >\n            {revealed ? \"Hide\" : \"Reveal\"}\n          </Button>\n        ) : null}\n\n        {value !== undefined ? (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            data-state={copy}\n            aria-label={`Copy — ${label}`}\n            onClick={copyValue}\n          >\n            {copy === \"copied\" ? \"Copied\" : \"Copy\"}\n          </Button>\n        ) : null}\n\n        {state === \"shown\" && onAcknowledge ? (\n          <Button variant=\"primary\" size=\"sm\" onClick={onAcknowledge}>\n            I have saved it\n          </Button>\n        ) : null}\n\n        {onRegenerate && !confirming ? (\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            aria-label={`Regenerate — ${label}`}\n            onClick={() => {\n              setConfirming(true);\n            }}\n          >\n            Regenerate…\n          </Button>\n        ) : null}\n      </div>\n\n      <p\n        id={`${id}-note`}\n        data-slot=\"secret-field-note\"\n        className={cn(\"text-xs\", state === \"shown\" ? \"text-warning\" : \"text-muted-foreground\")}\n      >\n        {note}\n      </p>\n\n      {/* Present from the start, so the first copy is heard. Failure is said\n          too: the clipboard can be refused, and a button that only ever says\n          \"Copied\" would be lying the one time it matters. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copy === \"copied\"\n          ? \"Copied to the clipboard\"\n          : copy === \"error\"\n            ? \"Could not copy. Select the value and copy it by hand.\"\n            : \"\"}\n      </span>\n      {copy === \"error\" ? (\n        <p data-slot=\"secret-field-copy-error\" className=\"text-xs text-destructive\">\n          Could not copy. Select the value and copy it by hand.\n        </p>\n      ) : null}\n\n      {children}\n\n      {confirming ? (\n        <div\n          data-slot=\"secret-field-confirm\"\n          role=\"group\"\n          aria-labelledby={`${id}-confirm`}\n          className=\"flex flex-col gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-3\"\n        >\n          <p id={`${id}-confirm`} className=\"text-xs text-destructive\">\n            {regenerateWarning}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            <Button\n              variant=\"destructive\"\n              size=\"sm\"\n              onClick={() => {\n                setConfirming(false);\n                onRegenerate?.();\n              }}\n            >\n              Regenerate\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => {\n                setConfirming(false);\n              }}\n            >\n              Cancel\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/session-expiry/index.d.ts

@@ -0,0 +1,2 @@
+import { SessionExpiry, SessionExpiryProps, SessionPhase, describeCountdown, formatCountdown, secondsLeft, sessionPhase } from "./session-expiry.js";
+export { SessionExpiry, type SessionExpiryProps, type SessionPhase, describeCountdown, formatCountdown, secondsLeft, sessionPhase };

package/dist/components/session-expiry/index.js

@@ -0,0 +1,2 @@
+import { SessionExpiry, describeCountdown, formatCountdown, secondsLeft, sessionPhase } from "./session-expiry.js";
+export { SessionExpiry, describeCountdown, formatCountdown, secondsLeft, sessionPhase };

package/dist/components/session-expiry/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/session-expiry/meta.ts
+const meta = defineMeta({
+	name: "session-expiry",
+	title: "Session Expiry",
+	description: "The idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.",
+	category: "feedback",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: ["button", "dialog"],
+	files: ["session-expiry.tsx"],
+	a11y: "An alert dialog, named by its heading and described by the sentence that says how long is left. Escape and the backdrop do nothing, because dismissing a session warning without choosing is choosing nothing; the two buttons are the way out, and focus opens on the safe one. The visible countdown is not live — a number every second for two minutes drowns the question — and a separate status region speaks four times: when the warning opens, at one minute, thirty seconds and ten, still saying a threshold a slow tick skipped over. The clock is read in an effect, so the server renders nothing rather than a countdown from the wrong instant. This satisfies the warn-and-extend half of WCAG 2.2.1 Timing Adjustable; the twenty-second minimum is the default window's business and the application's."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/session-expiry/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/session-expiry/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"session-expiry\",\n  title: \"Session Expiry\",\n  description:\n    \"The idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.\",\n  category: \"feedback\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"button\", \"dialog\"],\n  files: [\"session-expiry.tsx\"],\n  a11y:\n    \"An alert dialog, named by its heading and described by the sentence that says how long is \" +\n    \"left. Escape and the backdrop do nothing, because dismissing a session warning without \" +\n    \"choosing is choosing nothing; the two buttons are the way out, and focus opens on the safe \" +\n    \"one. The visible countdown is not live — a number every second for two minutes drowns the \" +\n    \"question — and a separate status region speaks four times: when the warning opens, at one \" +\n    \"minute, thirty seconds and ten, still saying a threshold a slow tick skipped over. The \" +\n    \"clock is read in an effect, so the server renders nothing rather than a countdown from the \" +\n    \"wrong instant. This satisfies the warn-and-extend half of WCAG 2.2.1 Timing Adjustable; the \" +\n    \"twenty-second minimum is the default window's business and the application's.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,UAAU,QAAQ;CACzC,OAAO,CAAC,oBAAoB;CAC5B,MACE;AASJ,CAAC"}

package/dist/components/session-expiry/session-expiry.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+//#region src/components/session-expiry/session-expiry.d.ts
+/**
+ * "Your session ends in two minutes. Stay signed in?"
+ *
+ * Every product with an idle timeout builds this, and WCAG 2.2.1 (Timing
+ * Adjustable) says what it has to do: warn before the time runs out, and
+ * give at least twenty seconds to extend it with a simple action. Most
+ * implementations get the first half — a toast, a modal — and fail the
+ * second in one of two ways: the warning can be dismissed without choosing,
+ * so a reader who closed it to see the page underneath is signed out with
+ * no further word; or the countdown is a live region, so a screen reader
+ * user hears a number every second for two minutes and cannot hear the
+ * choice they are being asked to make.
+ *
+ * So this is an alert dialog that cannot be waved away. Escape and the
+ * backdrop do nothing, because dismissing a session warning without
+ * choosing is choosing nothing, and the two buttons are the two things a
+ * person can actually do. The countdown ticks on screen and is announced at
+ * four moments — when the warning opens, at one minute, thirty seconds and
+ * ten — which is enough to know how long is left and quiet enough to hear
+ * the question.
+ *
+ * When time runs out, `onExpire` fires once and the dialog says so, with a
+ * slot for whatever the application offers next. It does not sign anyone
+ * out; the server did that, and this is the part that tells the person.
+ */
+type SessionPhase = "active" | "warning" | "expired";
+/** Where a session stands, given the clock. Pure, for tests and for the server. */
+declare function sessionPhase(expiresAt: Date, now: Date, warnBefore: number): SessionPhase;
+/** Whole seconds left, never negative. */
+declare function secondsLeft(expiresAt: Date, now: Date): number;
+/** "1:59" for the screen. */
+declare function formatCountdown(seconds: number): string;
+/** "1 minute 59 seconds" for the ear. */
+declare function describeCountdown(seconds: number): string;
+interface SessionExpiryProps {
+  /** When the session ends. Move it forward after a successful extend. */
+  expiresAt: Date;
+  /** How long before the end to warn, in milliseconds. Two minutes by default. */
+  warnBefore?: number;
+  /**
+   * The clock. Supply it to drive the countdown yourself, or in tests; omit
+   * and the component ticks once a second while mounted.
+   */
+  now?: Date;
+  /** Keep the session going. May return a promise; the button waits for it. */
+  onExtend: () => void | Promise<void>;
+  /** Called once when the time runs out. */
+  onExpire?: () => void;
+  /** Offered as the other choice. Omit to offer only staying signed in. */
+  onSignOut?: () => void;
+  /** The warning's heading. */
+  heading?: string;
+  /** What is at stake, in the reader's language: "Unsaved edits will be lost." */
+  children?: ReactNode;
+  /** What to offer once the session has ended: a sign-in link, usually. */
+  expiredAction?: ReactNode;
+  className?: string;
+}
+declare function SessionExpiry({ expiresAt, warnBefore, now: nowProp, onExtend, onExpire, onSignOut, heading, children, expiredAction, className }: SessionExpiryProps): import("react").JSX.Element;
+//#endregion
+export { SessionExpiry, SessionExpiryProps, SessionPhase, describeCountdown, formatCountdown, secondsLeft, sessionPhase };
+//# sourceMappingURL=session-expiry.d.ts.map

package/dist/components/session-expiry/session-expiry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-expiry.d.ts","names":[],"sources":["../../../src/components/session-expiry/session-expiry.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDY;;iBAGI,aAAa,WAAW,MAAM,KAAK,MAAM,qBAAqB;;iBAQ9D,YAAY,WAAW,MAAM,KAAK;;iBAKlC,gBAAgB;;iBAOhB,kBAAkB;UAuBjB;;EAEf,WAAW;;EAEX;;;;;EAKA,MAAM;;EAEN,uBAAuB;;EAEvB;;EAEA;;EAEA;;EAEA,WAAW;;EAEX,gBAAgB;EAChB;;iBAGc,gBACd,WACA,YACA,KAAK,SACL,UACA,UACA,WACA,SACA,UACA,eACA,aACC,qCAAkB,IAAA"}