@camstack/ui-library 0.1.44 → 0.1.45

package/dist/composites/index.d.ts

@@ -97,3 +97,5 @@ export type { KebabMenuProps, KebabMenuItem } from './kebab-menu';
 export { ConfirmDialogProvider, useConfirm } from './confirm-dialog';
 export { WidgetSlot } from './widget-slot';
 export type { WidgetSlotProps } from './widget-slot';
+export { ScopePicker, validateScopes } from './scope-picker';
+export type { ScopeAccess } from './scope-picker';

package/dist/composites/scope-picker.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { TokenScope } from '@camstack/types';
+export type ScopeAccess = 'view' | 'create' | 'delete';
+interface ScopePickerProps {
+    readonly value: readonly TokenScope[];
+    readonly onChange: (next: TokenScope[]) => void;
+    /**
+     * When set, the caller's own scope set. Each row's target dropdown
+     * is narrowed to entries the caller already grants, and access
+     * checkboxes are disabled for flavours the caller lacks. Admins
+     * (unscoped) should pass `null` to allow everything.
+     */
+    readonly clampToParent?: readonly TokenScope[] | null;
+    /** Optional empty-state CTA when `value.length === 0`. */
+    readonly emptyHint?: ReactNode;
+}
+export declare function ScopePicker({ value, onChange, clampToParent, emptyHint }: ScopePickerProps): React.ReactElement;
+/**
+ * Validation helper. The wire schema (`TokenScopeSchema`) requires every
+ * scope to carry a non-empty target and `access.length >= 1`. Use this
+ * before passing the picker output to a mutate call so the user sees a
+ * clean inline error instead of a tRPC ZodError.
+ */
+export declare function validateScopes(scopes: readonly TokenScope[]): string | null;
+export {};

package/dist/index.cjs

@@ -7937,6 +7937,13 @@ var Network = createLucideIcon("network", [
 		key: "2874zd"
 	}]
 ]);
+var Pencil = createLucideIcon("pencil", [["path", {
+	d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+	key: "1a8usu"
+}], ["path", {
+	d: "m15 5 4 4",
+	key: "1mk7zo"
+}]]);
 var Play = createLucideIcon("play", [["path", {
 	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
 	key: "10ikf1"
@@ -23001,6 +23008,196 @@ function KebabMenu({ items, header, triggerClassName, title = "More actions" })
 	});
 }
 //#endregion
+//#region src/composites/scope-picker.tsx
+/**
+* <ScopePicker> — operator-facing editor for a `TokenScope[]` value.
+*
+* Two consumers: the user-scope editor on `/system/users` (admin grants
+* a baseline scope set to a viewer / agent / scoped user) and the
+* scoped-token create modal on `/system/api-keys` (a caller carves
+* out a subset of THEIR scopes for a `cst_*` token).
+*
+* Each row is `{ type, target, access }`:
+*   - `type`: `addon` or `capability` (route-prefix retired in the
+*     caps-only refactor — every endpoint lives behind a cap).
+*   - `target`: a known addon id (live from `useAddonsList`) or a known
+*     cap name (from `KNOWN_CAP_NAMES` emitted by codegen).
+*   - `access`: three independent checkboxes (`view` / `create` /
+*     `delete`). At least one must be selected; an empty grant is
+*     rejected by the server-side Zod schema (`access.min(1)`).
+*
+* `clampToParent` narrows the target dropdown + access checkboxes to
+* what the CALLER possesses — this is the subset check rendered in
+* the UI, mirroring the structural check in `createScopedToken`.
+* Admins should pass `null` to allow everything.
+*/
+var ACCESS_OPTIONS = [
+	{
+		value: "view",
+		label: "View",
+		icon: Eye,
+		hint: "Read-only — queries + subscriptions"
+	},
+	{
+		value: "create",
+		label: "Create",
+		icon: Pencil,
+		hint: "Mutations that create or update"
+	},
+	{
+		value: "delete",
+		label: "Delete",
+		icon: Trash2,
+		hint: "Destructive ops (delete/revoke/reset/…)"
+	}
+];
+function defaultRow() {
+	return {
+		type: "capability",
+		target: "",
+		access: ["view"]
+	};
+}
+function clampedTargetsForType(type, parent, addonChoices, capChoices) {
+	const universe = type === "addon" ? addonChoices : capChoices;
+	if (parent == null) return universe;
+	const allowed = new Set(parent.filter((s) => s.type === type).map((s) => s.target));
+	return universe.filter((t) => allowed.has(t));
+}
+function clampedAccessForRow(row, parent) {
+	if (parent == null) return [
+		"view",
+		"create",
+		"delete"
+	];
+	const matches = parent.filter((s) => s.type === row.type && s.target === row.target);
+	if (matches.length === 0) return [];
+	const out = /* @__PURE__ */ new Set();
+	for (const m of matches) for (const a of m.access) out.add(a);
+	return [...out];
+}
+function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
+	const { data: addons } = useAddonsList();
+	const addonChoices = (0, react.useMemo)(() => (addons ?? []).map((a) => a.manifest.id).sort(), [addons]);
+	const capChoices = (0, react.useMemo)(() => [..._camstack_types.KNOWN_CAP_NAMES].sort(), []);
+	const update = (idx, patch) => {
+		onChange(value.map((s, i) => {
+			if (i !== idx) return s;
+			const next = {
+				...s,
+				...patch
+			};
+			if (patch.type !== void 0 && patch.type !== s.type) next.target = "";
+			return next;
+		}));
+	};
+	const removeAt = (idx) => {
+		onChange(value.filter((_, i) => i !== idx));
+	};
+	const append = () => {
+		onChange([...value, defaultRow()]);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-2",
+		children: [
+			value.length === 0 && emptyHint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-[10px] text-foreground-subtle italic px-2 py-2",
+				children: emptyHint
+			}),
+			value.map((row, idx) => {
+				const targetChoices = clampedTargetsForType(row.type, clampToParent, addonChoices, capChoices);
+				const allowedAccess = clampedAccessForRow(row, clampToParent);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-1.5 rounded border border-border bg-surface px-2 py-1.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+							value: row.type,
+							onChange: (e) => update(idx, { type: e.target.value }),
+							className: "rounded border border-border bg-background px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-primary",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "capability",
+								children: "capability"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "addon",
+								children: "addon"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+							value: row.target,
+							onChange: (e) => update(idx, { target: e.target.value }),
+							className: "flex-1 min-w-[160px] rounded border border-border bg-background px-2 py-1 text-[11px] font-mono focus:outline-none focus:ring-1 focus:ring-primary",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+								value: "",
+								children: [
+									"— pick ",
+									row.type,
+									" —"
+								]
+							}), targetChoices.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: t,
+								children: t
+							}, t))]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex items-center gap-1",
+							children: ACCESS_OPTIONS.map(({ value: access, label, icon: Icon, hint }) => {
+								const checked = row.access.includes(access);
+								const disabled = clampToParent != null && !allowedAccess.includes(access) && !checked;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									title: disabled ? `${hint} — not granted by your scope` : hint,
+									className: `inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] cursor-pointer transition-colors ${checked ? "bg-primary/15 text-primary font-medium" : "text-foreground-subtle hover:bg-foreground-subtle/10"} ${disabled ? "opacity-40 cursor-not-allowed" : ""}`,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "checkbox",
+											checked,
+											disabled,
+											onChange: (e) => {
+												const nextSet = new Set(row.access);
+												if (e.target.checked) nextSet.add(access);
+												else nextSet.delete(access);
+												update(idx, { access: [...nextSet] });
+											},
+											className: "sr-only"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3 w-3" }),
+										label
+									]
+								}, access);
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => removeAt(idx),
+							className: "rounded p-1 text-foreground-subtle hover:bg-danger/10 hover:text-danger transition-colors",
+							title: "Remove scope",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-3 w-3" })
+						})
+					]
+				}, idx);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: append,
+				className: "inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] text-foreground-subtle hover:text-foreground hover:bg-foreground-subtle/10 transition-colors",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, { className: "h-3 w-3" }), "Add scope"]
+			})
+		]
+	});
+}
+/**
+* Validation helper. The wire schema (`TokenScopeSchema`) requires every
+* scope to carry a non-empty target and `access.length >= 1`. Use this
+* before passing the picker output to a mutate call so the user sees a
+* clean inline error instead of a tRPC ZodError.
+*/
+function validateScopes(scopes) {
+	for (const s of scopes) {
+		if (s.target.trim().length === 0) return `Scope ${s.type}: pick a target`;
+		if (s.access.length === 0) return `Scope ${s.type}:${s.target}: pick at least one access`;
+	}
+	return null;
+}
+//#endregion
 //#region src/contexts/zone-editing.tsx
 /**
 * Per-device zone-editing state shared between the player overlay
@@ -23830,6 +24027,7 @@ exports.SECTION_HEADER = SECTION_HEADER;
 exports.SPLIT_PANEL_OUTER = SPLIT_PANEL_OUTER;
 exports.SPLIT_PANEL_SIDE = SPLIT_PANEL_SIDE;
 exports.STACK_GAP = STACK_GAP;
+exports.ScopePicker = ScopePicker;
 exports.ScrollArea = ScrollArea;
 exports.Select = Select;
 exports.SemanticBadge = SemanticBadge;
@@ -24391,5 +24589,6 @@ exports.useZonesAddZone = useZonesAddZone;
 exports.useZonesListZones = useZonesListZones;
 exports.useZonesRemoveZone = useZonesRemoveZone;
 exports.useZonesUpdateZone = useZonesUpdateZone;
+exports.validateScopes = validateScopes;
 
 //# sourceMappingURL=index.cjs.map