@jini-ai/user-management 0.2.0

package/dist/react/roles/Roles.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { rolesDescriptionParts, roleDeleteBodyParts, policyDeleteBodyParts, permissionRemoveBodyParts } from "./text.js";
+import { Fragment } from "react";
+import { DataTable, RowMenu, ConfirmDialog } from "@jini-ai/admin/react";
+import { agentHandle } from "@jini-ai/agentic";
+import { buildAgentListHandles } from "@jini-ai/ui/panel-kit";
+import { TabBar } from "@jini-ai/ui/tab-strip";
+import { roleMenuItems, policyMenuItems } from "./rules.js";
+import { useRoles } from "./hooks/use-roles.hooks.js";
+import { resolveRolesTabId, resolveRolesTabs } from "./Roles.hooks.js";
+export function RolesSection({ roles, create, row, t, translate }) {
+    const roleMenuHandles = buildAgentListHandles({ prefix: "roles-row", ids: roles.map((role) => role.id) });
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "visually-hidden", children: t("Roles") }), _jsxs("form", { onSubmit: create.submit, className: "notice integrations-form form-measure", children: [create.error ? _jsx("span", { className: "save-error", children: create.error }) : null, _jsxs("label", { children: [t("Role name"), _jsx("input", { value: create.name, onChange: (e) => create.setName(e.target.value), required: true, ...agentHandle({ handle: "roles-create-name" }, { role: "field", label: t("New role's name") }) })] }), _jsx("button", { type: "submit", disabled: create.saving || !create.name, ...agentHandle({ handle: "roles-create-submit" }, { role: "button", label: t("Create this new role") }), children: create.saving ? t("Creating…") : t("Create role") })] }), _jsx(DataTable, { rows: roles, rowKey: (role) => role.id, empty: _jsx("div", { className: "card", children: _jsx("div", { className: "empty-state", children: _jsx("p", { children: t("No roles yet.") }) }) }), columns: [
+                    {
+                        key: "name",
+                        header: t("Name"),
+                        cell: (role, index) => row.editingId === role.id ? (_jsx("input", { value: row.draftName, onChange: (e) => row.setDraftName(e.target.value), ...agentHandle({ handle: `${roleMenuHandles[index]}-rename-name` }, { role: "field", label: t("This role's new name") }) })) : (role.name),
+                    },
+                    { key: "type", header: t("Type"), cell: (role) => (role.isBuiltin ? t("Built-in") : t("Custom")) },
+                    {
+                        key: "actions",
+                        header: t("More"),
+                        cell: (role, index) => role.isBuiltin ? (_jsx("span", { className: "muted-cell", children: "\u2014" })) : row.editingId === role.id ? (_jsxs("span", { className: "editor-actions", children: [_jsx("button", { type: "button", disabled: row.savingId === role.id, onClick: () => row.saveRename({ roleId: role.id }), ...agentHandle({ handle: `${roleMenuHandles[index]}-save` }, { role: "button", label: t(`Save this role's new name`) }), children: row.savingId === role.id ? t("Saving…") : t("Save") }), _jsx("button", { type: "button", onClick: () => row.setEditingId(null), ...agentHandle({ handle: `${roleMenuHandles[index]}-cancel` }, { role: "button", label: t("Cancel renaming this role") }), children: t("Cancel") })] })) : (_jsx(RowMenu, { triggerLabel: `${t("Actions for role")} "${role.name}"`, agentHandle: `${roleMenuHandles[index]}-menu`, items: roleMenuItems({ role, handlers: { onRename: row.startRename, onDelete: row.requestDelete }, translate }) })),
+                    },
+                ] })] }));
+}
+function PolicyRowActions({ policy, row, permission, agentBase, t, translate }) {
+    if (policy.isBuiltin || policy.isFrozen)
+        return _jsx("span", { className: "muted-cell", children: "\u2014" });
+    if (row.editingId === policy.id) {
+        return (_jsxs("span", { className: "editor-actions", children: [_jsx("button", { type: "button", disabled: row.savingId === policy.id, onClick: () => row.saveRename({ policyId: policy.id }), ...agentHandle({ handle: `${agentBase}-save` }, { role: "button", label: t("Save this policy's new name and description") }), children: row.savingId === policy.id ? t("Saving…") : t("Save") }), _jsx("button", { type: "button", onClick: () => row.setEditingId(null), ...agentHandle({ handle: `${agentBase}-cancel` }, { role: "button", label: t("Cancel renaming this policy") }), children: t("Cancel") })] }));
+    }
+    return (_jsx(RowMenu, { triggerLabel: `${t("Actions for policy")} "${policy.name}"`, agentHandle: `${agentBase}-menu`, items: policyMenuItems({
+            policy,
+            permissionPolicyId: permission.openForPolicyId,
+            handlers: {
+                onRename: row.startRename,
+                onTogglePermissionForm: permission.toggleForm,
+                onDelete: row.requestDelete,
+            },
+            translate,
+        }) }));
+}
+function PolicyPermissionList({ policyId, permission, t }) {
+    if (permission.loading)
+        return _jsx("p", { className: "muted-cell", children: t("Loading permissions…") });
+    if (permission.rows.length === 0)
+        return _jsx("p", { className: "muted-cell", children: t("No permissions yet.") });
+    const removeHandles = buildAgentListHandles({
+        prefix: `policy-permission-remove-${policyId}`,
+        ids: permission.rows.map((row) => row.id),
+    });
+    return (_jsx("ul", { className: "permission-list", children: permission.rows.map((row, index) => (_jsxs("li", { children: [_jsx("code", { children: row.permission }), row.resourceType ? _jsxs("span", { className: "muted-cell", children: [" (", row.resourceType, ")"] }) : null, _jsx("button", { type: "button", disabled: permission.removingId === row.id, "aria-label": `${t("Remove permission")} ${row.permission}`, onClick: () => permission.requestRemove({ policyId, row }), ...agentHandle({ handle: removeHandles[index] }, { role: "button", label: t(`Remove the "${row.permission}" permission from this policy`) }), children: permission.removingId === row.id ? t("Removing…") : t("Remove") })] }, row.id))) }));
+}
+function PolicyPermissionForm({ policyId, savingId, permission, t }) {
+    const formHandleBase = buildAgentListHandles({ prefix: "policy-permission-form", ids: [policyId] })[0];
+    return (_jsx("tr", { children: _jsx("td", { colSpan: 4, children: _jsxs("div", { className: "notice integrations-form", children: [_jsx("p", { children: t("Current permissions") }), _jsx(PolicyPermissionList, { policyId: policyId, permission: permission, t: t }), _jsxs("label", { children: [t("Permission"), _jsxs("span", { className: "editor-actions permission-form-fields", children: [_jsx("input", { value: permission.permission, onChange: (e) => permission.setPermission(e.target.value), placeholder: t("e.g. content.write"), ...agentHandle({ handle: `${formHandleBase}-permission` }, { role: "field", label: t("Permission string to grant, e.g. content.write") }) }), _jsx("input", { value: permission.resourceType, onChange: (e) => permission.setResourceType(e.target.value), placeholder: t("resource type (optional)"), ...agentHandle({ handle: `${formHandleBase}-resource-type` }, { role: "field", label: t("Optional resource type this permission is scoped to") }) }), _jsx("button", { type: "button", disabled: !permission.permission || savingId === policyId, onClick: () => permission.write({ policyId }), ...agentHandle({ handle: `${formHandleBase}-add` }, { role: "button", label: t("Add this permission to the policy") }), children: savingId === policyId ? t("Saving…") : t("Add") })] })] })] }) }) }));
+}
+export function PolicyRow({ policy, row, permission, agentBase, t, translate }) {
+    const renaming = row.editingId === policy.id;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { children: renaming ? (_jsx("input", { value: row.draftName, onChange: (e) => row.setDraftName(e.target.value), ...agentHandle({ handle: `${agentBase}-rename-name` }, { role: "field", label: t("This policy's new name") }) })) : (policy.name) }), _jsx("td", { children: renaming ? (_jsx("input", { value: row.draftDescription, onChange: (e) => row.setDraftDescription(e.target.value), ...agentHandle({ handle: `${agentBase}-rename-description` }, { role: "field", label: t("This policy's new description") }) })) : (policy.description ?? _jsx("span", { className: "muted-cell", children: "\u2014" })) }), _jsxs("td", { children: [policy.isBuiltin ? t("Built-in") : t("Custom"), policy.isFrozen ? ` ${t("(frozen)")}` : ""] }), _jsx("td", { children: _jsx(PolicyRowActions, { policy: policy, row: row, permission: permission, agentBase: agentBase, t: t, translate: translate }) })] }), permission.openForPolicyId === policy.id ? (_jsx(PolicyPermissionForm, { policyId: policy.id, savingId: row.savingId, permission: permission, t: t })) : null] }));
+}
+export function PoliciesSection({ policies, create, row, permission, t, translate }) {
+    const policyMenuBases = buildAgentListHandles({ prefix: "policies-row", ids: policies.map((policy) => policy.id) });
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "visually-hidden", children: t("Policies") }), _jsxs("form", { onSubmit: create.submit, className: "notice integrations-form form-measure", children: [create.error ? _jsx("span", { className: "save-error", children: create.error }) : null, _jsxs("label", { children: [t("Policy name"), _jsx("input", { value: create.name, onChange: (e) => create.setName(e.target.value), required: true, ...agentHandle({ handle: "policies-create-name" }, { role: "field", label: t("New policy's name") }) })] }), _jsxs("label", { children: [t("Description (optional)"), _jsx("input", { value: create.description, onChange: (e) => create.setDescription(e.target.value), ...agentHandle({ handle: "policies-create-description" }, { role: "field", label: t("New policy's optional description") }) })] }), _jsx("button", { type: "submit", disabled: create.saving || !create.name, ...agentHandle({ handle: "policies-create-submit" }, { role: "button", label: t("Create this new policy") }), children: create.saving ? t("Creating…") : t("Create policy") })] }), policies.length === 0 ? (_jsx("div", { className: "card", children: _jsx("div", { className: "empty-state", children: _jsx("p", { children: t("No policies yet.") }) }) })) : (_jsx("div", { className: "table-scroll", children: _jsxs("table", { className: "list-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t("Name") }), _jsx("th", { children: t("Description") }), _jsx("th", { children: t("Type") }), _jsx("th", { children: t("More") })] }) }), _jsx("tbody", { children: policies.map((policy, index) => (_jsx(Fragment, { children: _jsx(PolicyRow, { policy: policy, row: row, permission: permission, agentBase: policyMenuBases[index], t: t, translate: translate }) }, policy.id))) })] }) }))] }));
+}
+function RoleDeleteDialog({ pendingRoleDelete, setPendingRoleDelete, rowSavingId, onDeleteRole, t, translate }) {
+    const { prefix, suffix } = roleDeleteBodyParts({ translate });
+    return (_jsx(ConfirmDialog, { cancelLabel: t("Cancel"), open: pendingRoleDelete !== null, agentHandle: "roles-delete-role", title: t("Delete role?"), body: pendingRoleDelete ? (_jsxs("p", { children: [prefix, pendingRoleDelete.name, suffix] })) : null, confirmLabel: t("Delete"), destructive: true, pending: pendingRoleDelete !== null && rowSavingId === pendingRoleDelete.id, onConfirm: onDeleteRole, onCancel: () => setPendingRoleDelete(null) }));
+}
+function PolicyDeleteDialog({ pendingPolicyDelete, setPendingPolicyDelete, rowSavingId, onDeletePolicy, t, translate }) {
+    const { prefix, suffix } = policyDeleteBodyParts({ translate });
+    return (_jsx(ConfirmDialog, { cancelLabel: t("Cancel"), open: pendingPolicyDelete !== null, agentHandle: "roles-delete-policy", title: t("Delete policy?"), body: pendingPolicyDelete ? (_jsxs("p", { children: [prefix, pendingPolicyDelete.name, suffix] })) : null, confirmLabel: t("Delete"), destructive: true, pending: pendingPolicyDelete !== null && rowSavingId === pendingPolicyDelete.id, onConfirm: onDeletePolicy, onCancel: () => setPendingPolicyDelete(null) }));
+}
+function PermissionRemoveDialog({ pendingPermissionRemove, setPendingPermissionRemove, removingPermissionId, onConfirmRemovePermission, t, translate, }) {
+    const { prefix, suffix } = permissionRemoveBodyParts({ translate });
+    const pending = pendingPermissionRemove;
+    return (_jsx(ConfirmDialog, { cancelLabel: t("Cancel"), open: pending !== null, agentHandle: "roles-remove-permission", title: t("Remove permission?"), body: pending ? (_jsxs("p", { children: [prefix, _jsx("code", { children: pending.row.permission }), pending.row.resourceType ? ` (${pending.row.resourceType})` : "", suffix] })) : null, confirmLabel: t("Remove"), tone: "warning", pending: pending !== null && removingPermissionId === pending.row.id, onConfirm: onConfirmRemovePermission, onCancel: () => setPendingPermissionRemove(null) }));
+}
+function RolesTab({ controller }) {
+    const c = controller;
+    return (_jsx(RolesSection, { roles: c.roles ?? [], create: {
+            name: c.roleName,
+            setName: c.setRoleName,
+            saving: c.roleSaving,
+            error: c.roleError,
+            submit: c.onCreateRole,
+        }, row: {
+            editingId: c.editingRoleId,
+            setEditingId: c.setEditingRoleId,
+            draftName: c.editingRoleName,
+            setDraftName: c.setEditingRoleName,
+            startRename: c.startEditRole,
+            saveRename: c.onSaveRole,
+            savingId: c.rowSavingId,
+            requestDelete: c.setPendingRoleDelete,
+        }, t: c.t, translate: c.translate }));
+}
+function PoliciesTab({ controller }) {
+    const c = controller;
+    return (_jsx(PoliciesSection, { policies: c.policies ?? [], create: {
+            name: c.policyName,
+            setName: c.setPolicyName,
+            description: c.policyDescription,
+            setDescription: c.setPolicyDescription,
+            saving: c.policySaving,
+            error: c.policyError,
+            submit: c.onCreatePolicy,
+        }, row: {
+            editingId: c.editingPolicyId,
+            setEditingId: c.setEditingPolicyId,
+            draftName: c.editingPolicyName,
+            setDraftName: c.setEditingPolicyName,
+            draftDescription: c.editingPolicyDescription,
+            setDraftDescription: c.setEditingPolicyDescription,
+            startRename: c.startEditPolicy,
+            saveRename: c.onSavePolicy,
+            savingId: c.rowSavingId,
+            requestDelete: c.setPendingPolicyDelete,
+        }, permission: {
+            openForPolicyId: c.permissionPolicyId,
+            permission: c.permissionInput,
+            setPermission: c.setPermissionInput,
+            resourceType: c.resourceTypeInput,
+            setResourceType: c.setResourceTypeInput,
+            toggleForm: c.togglePermissionForm,
+            write: c.onWritePermission,
+            rows: c.permissionRows,
+            loading: c.permissionsLoading,
+            removingId: c.removingPermissionId,
+            requestRemove: c.setPendingPermissionRemove,
+        }, t: c.t, translate: c.translate }));
+}
+function rolesTabPanel(activeTabId, controller) {
+    if (activeTabId === "policies")
+        return _jsx(PoliciesTab, { controller: controller });
+    return _jsx(RolesTab, { controller: controller });
+}
+export function Roles({ tabId, useRolesHook = useRoles, port, translate: injectedTranslate, queryScope, onTabChange, usersHref }) {
+    const controller = useRolesHook({ port, translate: injectedTranslate, queryScope });
+    const { roles, policies, error, rowError, rowSavingId, pendingRoleDelete, setPendingRoleDelete, onDeleteRole, pendingPolicyDelete, setPendingPolicyDelete, onDeletePolicy, pendingPermissionRemove, setPendingPermissionRemove, removingPermissionId, onConfirmRemovePermission, t, translate, } = controller;
+    const { prefix: descriptionPrefix, linkLabel: descriptionLinkLabel, suffix: descriptionSuffix } = rolesDescriptionParts({ translate });
+    if (error)
+        return _jsx("div", { className: "notice error", children: error });
+    if (!roles || !policies)
+        return _jsx("div", { className: "notice", children: t("Loading roles & permissions…") });
+    const activeTabId = resolveRolesTabId({ tabId });
+    return (_jsxs("div", { className: "page", children: [_jsx("div", { className: "page-header", children: _jsxs("div", { className: "page-header-text", children: [_jsx("p", { className: "page-kicker", children: t("People") }), _jsx("h1", { className: "page-title", children: t("Roles & Permissions") }), _jsxs("p", { className: "page-description", children: [descriptionPrefix, _jsx("a", { href: usersHref, children: descriptionLinkLabel }), descriptionSuffix] })] }) }), rowError ? _jsx("div", { className: "notice error", children: rowError }) : null, _jsx(TabBar, { ariaLabel: t("Roles & Permissions"), tabs: resolveRolesTabs({ translate: t }), activeId: activeTabId, onChange: (next) => onTabChange({ tabId: resolveRolesTabId({ tabId: next }) }), containerHandle: "roles-tab-bar" }), rolesTabPanel(activeTabId, controller), _jsx(RoleDeleteDialog, { pendingRoleDelete: pendingRoleDelete, setPendingRoleDelete: setPendingRoleDelete, rowSavingId: rowSavingId, t: t, translate: translate, onDeleteRole: onDeleteRole }), _jsx(PolicyDeleteDialog, { pendingPolicyDelete: pendingPolicyDelete, setPendingPolicyDelete: setPendingPolicyDelete, rowSavingId: rowSavingId, t: t, translate: translate, onDeletePolicy: onDeletePolicy }), _jsx(PermissionRemoveDialog, { pendingPermissionRemove: pendingPermissionRemove, setPendingPermissionRemove: setPendingPermissionRemove, removingPermissionId: removingPermissionId, onConfirmRemovePermission: onConfirmRemovePermission, t: t, translate: translate })] }));
+}
+//# sourceMappingURL=Roles.js.map

package/dist/react/roles/hooks/use-roles.hooks.d.ts

@@ -0,0 +1,80 @@
+import type { Translate } from "@jini-ai/ui/panel-kit";
+import { type AdminPolicy, type AdminPolicyPermission, type AdminRole } from "../../models.js";
+import type { RolesPort } from "../../ports.js";
+export interface PendingPermissionRemove {
+    policyId: string;
+    row: AdminPolicyPermission;
+}
+export interface RolesController {
+    roles: AdminRole[] | null;
+    policies: AdminPolicy[] | null;
+    error: string | null;
+    rowError: string | null;
+    roleName: string;
+    setRoleName: (name: string) => void;
+    roleSaving: boolean;
+    roleError: string | null;
+    onCreateRole: (e: React.FormEvent) => Promise<void>;
+    policyName: string;
+    setPolicyName: (name: string) => void;
+    policyDescription: string;
+    setPolicyDescription: (description: string) => void;
+    policySaving: boolean;
+    policyError: string | null;
+    onCreatePolicy: (e: React.FormEvent) => Promise<void>;
+    editingRoleId: string | null;
+    setEditingRoleId: (roleId: string | null) => void;
+    editingRoleName: string;
+    setEditingRoleName: (name: string) => void;
+    startEditRole: (role: AdminRole) => void;
+    onSaveRole: (required: {
+        roleId: string;
+    }) => Promise<void>;
+    editingPolicyId: string | null;
+    setEditingPolicyId: (policyId: string | null) => void;
+    editingPolicyName: string;
+    setEditingPolicyName: (name: string) => void;
+    editingPolicyDescription: string;
+    setEditingPolicyDescription: (description: string) => void;
+    startEditPolicy: (policy: AdminPolicy) => void;
+    onSavePolicy: (required: {
+        policyId: string;
+    }) => Promise<void>;
+    rowSavingId: string | null;
+    permissionPolicyId: string | null;
+    permissionInput: string;
+    setPermissionInput: (permission: string) => void;
+    resourceTypeInput: string;
+    setResourceTypeInput: (resourceType: string) => void;
+    togglePermissionForm: (required: {
+        policyId: string;
+    }) => void;
+    onWritePermission: (required: {
+        policyId: string;
+    }) => Promise<void>;
+    permissionRows: AdminPolicyPermission[];
+    permissionsLoading: boolean;
+    removingPermissionId: string | null;
+    onRemovePermission: (required: {
+        policyId: string;
+        policyPermissionId: string;
+    }) => Promise<void>;
+    pendingPermissionRemove: PendingPermissionRemove | null;
+    setPendingPermissionRemove: (target: PendingPermissionRemove | null) => void;
+    onConfirmRemovePermission: () => Promise<void>;
+    pendingRoleDelete: AdminRole | null;
+    setPendingRoleDelete: (role: AdminRole | null) => void;
+    onDeleteRole: () => Promise<void>;
+    pendingPolicyDelete: AdminPolicy | null;
+    setPendingPolicyDelete: (policy: AdminPolicy | null) => void;
+    onDeletePolicy: () => Promise<void>;
+    t: (key: string) => string;
+    translate: Translate;
+}
+export interface RolesDependencies {
+    port: RolesPort;
+    translate: Translate;
+    queryScope: string;
+}
+export declare function useRoles(deps: RolesDependencies): RolesController;
+//# sourceMappingURL=use-roles.hooks.d.ts.map

package/dist/react/roles/hooks/use-roles.hooks.js

@@ -0,0 +1,303 @@
+import { useRef, useState } from "react";
+import {} from "../../models.js";
+import { useFetchMutation, useFetchQuery } from "@jini-ai/ui/panel-kit";
+import { describeApiError as describeFeatureError, KEYS } from "../rules.js";
+async function runRowDelete(id, mutate, setRowSavingId, setRowError, clearPending, describeError) {
+    setRowSavingId(id);
+    setRowError(null);
+    try {
+        await mutate(id);
+    }
+    catch (e) {
+        setRowError(describeError(e));
+    }
+    finally {
+        setRowSavingId((current) => (current === id ? null : current));
+        clearPending();
+    }
+}
+export function useRoles(deps) {
+    const { port, translate, queryScope } = deps;
+    const describeApiError = (error, fallback) => describeFeatureError({ error, fallback, translate });
+    const t = translate;
+    const boundT = translate;
+    const list = useFetchQuery({
+        key: [queryScope, ...KEYS.list],
+        fetch: async () => {
+            const [r, p] = await Promise.all([port.listRoles({}), port.listPolicies({})]);
+            return { roles: r.roles, policies: p.policies };
+        },
+    });
+    const roles = list.data?.roles ?? null;
+    const policies = list.data?.policies ?? null;
+    const error = list.error ? describeApiError(list.error, t("failed to load roles/policies")) : null;
+    const [rowError, setRowError] = useState(null);
+    const [roleName, setRoleName] = useState("");
+    const [policyName, setPolicyName] = useState("");
+    const [policyDescription, setPolicyDescription] = useState("");
+    const [editingRoleId, setEditingRoleId] = useState(null);
+    const [editingRoleName, setEditingRoleName] = useState("");
+    const [editingPolicyId, setEditingPolicyId] = useState(null);
+    const [editingPolicyName, setEditingPolicyName] = useState("");
+    const [editingPolicyDescription, setEditingPolicyDescription] = useState("");
+    const [rowSavingId, setRowSavingId] = useState(null);
+    const [permissionPolicyId, setPermissionPolicyId] = useState(null);
+    const [permissionInput, setPermissionInput] = useState("");
+    const [resourceTypeInput, setResourceTypeInput] = useState("");
+    const [permissionRows, setPermissionRows] = useState([]);
+    const [permissionsLoading, setPermissionsLoading] = useState(false);
+    const [removingPermissionId, setRemovingPermissionId] = useState(null);
+    const permissionsGenerationRef = useRef(0);
+    const permissionPolicyIdRef = useRef(null);
+    const [pendingRoleDelete, setPendingRoleDelete] = useState(null);
+    const [pendingPolicyDelete, setPendingPolicyDelete] = useState(null);
+    const [pendingPermissionRemove, setPendingPermissionRemove] = useState(null);
+    const createRoleMutation = useFetchMutation({
+        run: ({ input: name }) => port.createRole({ name: name })
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const createPolicyMutation = useFetchMutation({
+        run: ({ input }) => port.createPolicy({ name: input.name }, { description: input.description })
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const saveRoleMutation = useFetchMutation({
+        run: ({ input }) => port.updateRole(input)
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const deleteRoleMutation = useFetchMutation({
+        run: ({ input: id }) => port.deleteRole({ roleId: id })
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const savePolicyMutation = useFetchMutation({
+        run: ({ input }) => port.updatePolicy({ policyId: input.policyId }, { name: input.name, description: input.description })
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const deletePolicyMutation = useFetchMutation({
+        run: ({ input: id }) => port.deletePolicy({ policyId: id })
+    }, {
+        invalidates: [[queryScope, ...KEYS.list]],
+    });
+    const writePermissionMutation = useFetchMutation({
+        run: ({ input }) => port.writePolicyPermission({ policyId: input.policyId, permission: input.permission }, { resourceType: input.resourceType }),
+    });
+    const removePermissionMutation = useFetchMutation({
+        run: ({ input }) => port.removePolicyPermission(input),
+    });
+    async function onCreateRole(e) {
+        e.preventDefault();
+        try {
+            await createRoleMutation.mutate({ input: roleName });
+            setRoleName("");
+        }
+        catch {
+        }
+    }
+    async function onCreatePolicy(e) {
+        e.preventDefault();
+        try {
+            await createPolicyMutation.mutate({ input: { name: policyName, description: policyDescription || undefined } });
+            setPolicyName("");
+            setPolicyDescription("");
+        }
+        catch {
+        }
+    }
+    function startEditRole(role) {
+        setRowError(null);
+        setEditingRoleId(role.id);
+        setEditingRoleName(role.name);
+    }
+    async function onSaveRole({ roleId }) {
+        setRowSavingId(roleId);
+        setRowError(null);
+        try {
+            await saveRoleMutation.mutate({ input: { roleId, name: editingRoleName } });
+            setEditingRoleId((current) => (current === roleId ? null : current));
+        }
+        catch (e) {
+            setRowError(describeApiError(e, t("failed to rename role")));
+        }
+        finally {
+            setRowSavingId((current) => (current === roleId ? null : current));
+        }
+    }
+    async function onDeleteRole() {
+        if (!pendingRoleDelete)
+            return;
+        const role = pendingRoleDelete;
+        await runRowDelete(role.id, (id) => deleteRoleMutation.mutate({ input: id }), setRowSavingId, setRowError, () => setPendingRoleDelete((current) => (current?.id === role.id ? null : current)), (e) => describeApiError(e, t("failed to delete role")));
+    }
+    function startEditPolicy(policy) {
+        setRowError(null);
+        setEditingPolicyId(policy.id);
+        setEditingPolicyName(policy.name);
+        setEditingPolicyDescription(policy.description ?? "");
+    }
+    async function onSavePolicy({ policyId }) {
+        setRowSavingId(policyId);
+        setRowError(null);
+        try {
+            await savePolicyMutation.mutate({ input: { policyId, name: editingPolicyName, description: editingPolicyDescription } });
+            setEditingPolicyId((current) => (current === policyId ? null : current));
+        }
+        catch (e) {
+            setRowError(describeApiError(e, t("failed to update policy")));
+        }
+        finally {
+            setRowSavingId((current) => (current === policyId ? null : current));
+        }
+    }
+    async function onDeletePolicy() {
+        if (!pendingPolicyDelete)
+            return;
+        const policy = pendingPolicyDelete;
+        await runRowDelete(policy.id, (id) => deletePolicyMutation.mutate({ input: id }), setRowSavingId, setRowError, () => setPendingPolicyDelete((current) => (current?.id === policy.id ? null : current)), (e) => describeApiError(e, t("failed to delete policy")));
+    }
+    async function loadPermissions(policyId) {
+        const generation = ++permissionsGenerationRef.current;
+        setPermissionsLoading(true);
+        try {
+            const { policyPermissions } = await port.listPolicyPermissions({ policyId: policyId });
+            if (permissionsGenerationRef.current !== generation)
+                return;
+            setPermissionRows(policyPermissions);
+        }
+        catch (e) {
+            if (permissionsGenerationRef.current !== generation)
+                return;
+            setPermissionRows([]);
+            setRowError(describeApiError(e, t("failed to load permissions")));
+        }
+        finally {
+            if (permissionsGenerationRef.current !== generation)
+                return;
+            setPermissionsLoading(false);
+        }
+    }
+    function togglePermissionForm({ policyId }) {
+        setRowError(null);
+        setPermissionInput("");
+        setResourceTypeInput("");
+        const closing = permissionPolicyIdRef.current === policyId;
+        permissionPolicyIdRef.current = closing ? null : policyId;
+        setPermissionPolicyId(permissionPolicyIdRef.current);
+        setPermissionRows([]);
+        if (!closing)
+            void loadPermissions(policyId);
+    }
+    async function onRemovePermission({ policyId, policyPermissionId }) {
+        setRemovingPermissionId(policyPermissionId);
+        setRowError(null);
+        try {
+            await removePermissionMutation.mutate({ input: { policyId, policyPermissionId } });
+            if (permissionPolicyIdRef.current === policyId)
+                await loadPermissions(policyId);
+        }
+        catch (e) {
+            setRowError(describeApiError(e, t("failed to remove permission")));
+        }
+        finally {
+            setRemovingPermissionId((current) => (current === policyPermissionId ? null : current));
+        }
+    }
+    async function onConfirmRemovePermission() {
+        if (!pendingPermissionRemove)
+            return;
+        const target = pendingPermissionRemove;
+        try {
+            await onRemovePermission({ policyId: target.policyId, policyPermissionId: target.row.id });
+        }
+        finally {
+            setPendingPermissionRemove((current) => (current?.row.id === target.row.id ? null : current));
+        }
+    }
+    async function onWritePermission({ policyId }) {
+        if (!permissionInput)
+            return;
+        const generationAtStart = permissionsGenerationRef.current;
+        setRowSavingId(policyId);
+        setRowError(null);
+        try {
+            await writePermissionMutation.mutate({ input: { policyId, permission: permissionInput, resourceType: resourceTypeInput || undefined } });
+            if (permissionsGenerationRef.current === generationAtStart) {
+                setPermissionInput("");
+                setResourceTypeInput("");
+            }
+            if (permissionPolicyIdRef.current === policyId)
+                await loadPermissions(policyId);
+        }
+        catch (e) {
+            setRowError(describeApiError(e, t("failed to add permission")));
+        }
+        finally {
+            setRowSavingId((current) => (current === policyId ? null : current));
+        }
+    }
+    const roleSaving = createRoleMutation.status === "pending";
+    const roleError = createRoleMutation.error ? describeApiError(createRoleMutation.error, t("failed to create role")) : null;
+    const policySaving = createPolicyMutation.status === "pending";
+    const policyError = createPolicyMutation.error
+        ? describeApiError(createPolicyMutation.error, t("failed to create policy"))
+        : null;
+    return {
+        roles,
+        policies,
+        error,
+        rowError,
+        roleName,
+        setRoleName,
+        roleSaving,
+        roleError,
+        onCreateRole,
+        policyName,
+        setPolicyName,
+        policyDescription,
+        setPolicyDescription,
+        policySaving,
+        policyError,
+        onCreatePolicy,
+        editingRoleId,
+        setEditingRoleId,
+        editingRoleName,
+        setEditingRoleName,
+        startEditRole,
+        onSaveRole,
+        editingPolicyId,
+        setEditingPolicyId,
+        editingPolicyName,
+        setEditingPolicyName,
+        editingPolicyDescription,
+        setEditingPolicyDescription,
+        startEditPolicy,
+        onSavePolicy,
+        rowSavingId,
+        permissionPolicyId,
+        permissionInput,
+        setPermissionInput,
+        resourceTypeInput,
+        setResourceTypeInput,
+        togglePermissionForm,
+        onWritePermission,
+        permissionRows,
+        permissionsLoading,
+        removingPermissionId,
+        onRemovePermission,
+        pendingPermissionRemove,
+        setPendingPermissionRemove,
+        onConfirmRemovePermission,
+        pendingRoleDelete,
+        setPendingRoleDelete,
+        onDeleteRole,
+        pendingPolicyDelete,
+        setPendingPolicyDelete,
+        onDeletePolicy,
+        t: boundT,
+        translate,
+    };
+}
+//# sourceMappingURL=use-roles.hooks.js.map

package/dist/react/roles/rules.d.ts

@@ -0,0 +1,35 @@
+import type { AdminRole, AdminPolicy } from "../models.js";
+import type { Translate } from "@jini-ai/ui/panel-kit";
+import type { RowMenuItem } from "@jini-ai/admin/react";
+import type { QueryKey } from "@jini-ai/ui/panel-kit";
+export declare const KEYS: {
+    list: QueryKey;
+};
+export declare function describeApiError({ error, fallback, translate }: {
+    error: unknown;
+    fallback: string;
+    translate: Translate;
+}): string;
+export interface RoleRowMenuHandlers {
+    onRename: (role: AdminRole) => void;
+    onDelete: (role: AdminRole) => void;
+}
+export declare function roleMenuItems({ role, handlers, translate }: {
+    role: AdminRole;
+    handlers: RoleRowMenuHandlers;
+    translate: Translate;
+}): RowMenuItem[];
+export interface PolicyRowMenuHandlers {
+    onRename: (policy: AdminPolicy) => void;
+    onTogglePermissionForm: (required: {
+        policyId: string;
+    }) => void;
+    onDelete: (policy: AdminPolicy) => void;
+}
+export declare function policyMenuItems({ policy, permissionPolicyId, handlers, translate }: {
+    policy: AdminPolicy;
+    permissionPolicyId: string | null;
+    handlers: PolicyRowMenuHandlers;
+    translate: Translate;
+}): RowMenuItem[];
+//# sourceMappingURL=rules.d.ts.map

package/dist/react/roles/rules.js

@@ -0,0 +1,31 @@
+import { describeIdentityError } from "../errors.js";
+export const KEYS = {
+    list: ["roles-and-policies"],
+};
+const STATIC_ERROR_MESSAGES = {
+    FORBIDDEN: "You do not have permission to do that.",
+    RESOURCE_CONFLICT: "It is still in use — remove that assignment/attachment first.",
+    PERMISSION_UNKNOWN: "That permission is not recognized.",
+    GRANT_EXCEEDS_ISSUER: "You cannot grant a permission you do not hold.",
+};
+export function describeApiError({ error, fallback, translate }) {
+    return describeIdentityError({ error, fallback, translate }, { messages: STATIC_ERROR_MESSAGES });
+}
+export function roleMenuItems({ role, handlers, translate }) {
+    return [
+        { key: "rename", label: translate("Rename"), onSelect: () => handlers.onRename(role) },
+        { key: "delete", label: translate("Delete"), destructive: true, onSelect: () => handlers.onDelete(role) },
+    ];
+}
+export function policyMenuItems({ policy, permissionPolicyId, handlers, translate }) {
+    return [
+        { key: "rename", label: translate("Rename"), onSelect: () => handlers.onRename(policy) },
+        {
+            key: "permission",
+            label: permissionPolicyId === policy.id ? translate("Close") : translate("Add permission"),
+            onSelect: () => handlers.onTogglePermissionForm({ policyId: policy.id }),
+        },
+        { key: "delete", label: translate("Delete"), destructive: true, onSelect: () => handlers.onDelete(policy) },
+    ];
+}
+//# sourceMappingURL=rules.js.map

package/dist/react/roles/text.d.ts

@@ -0,0 +1,27 @@
+import { type Translate } from "@jini-ai/ui/panel-kit";
+export declare function rolesDescriptionParts({ translate }: {
+    translate: Translate;
+}): {
+    prefix: string;
+    suffix: string;
+    linkLabel: string;
+};
+export declare function roleDeleteBodyParts({ translate }: {
+    translate: Translate;
+}): {
+    prefix: string;
+    suffix: string;
+};
+export declare function policyDeleteBodyParts({ translate }: {
+    translate: Translate;
+}): {
+    prefix: string;
+    suffix: string;
+};
+export declare function permissionRemoveBodyParts({ translate }: {
+    translate: Translate;
+}): {
+    prefix: string;
+    suffix: string;
+};
+//# sourceMappingURL=text.d.ts.map

package/dist/react/roles/text.js

@@ -0,0 +1,13 @@
+import { splitOnPlaceholders } from "@jini-ai/ui/panel-kit";
+export function rolesDescriptionParts({ translate }) {
+    const [prefix = "", suffix = ""] = splitOnPlaceholders({ template: translate("Roles and policies grant access to operator users. Assign a role or policy to a specific user from the {users} screen."), tokens: ["{users}"] });
+    return { prefix, suffix, linkLabel: translate("Users") };
+}
+function nameParts(translate, template) {
+    const [prefix = "", suffix = ""] = splitOnPlaceholders({ template: translate(template), tokens: ["{name}"] });
+    return { prefix, suffix };
+}
+export function roleDeleteBodyParts({ translate }) { return nameParts(translate, 'Delete role "{name}"?'); }
+export function policyDeleteBodyParts({ translate }) { return nameParts(translate, 'Delete policy "{name}"?'); }
+export function permissionRemoveBodyParts({ translate }) { return nameParts(translate, 'Remove "{name}" from this policy? Anyone with this policy loses it.'); }
+//# sourceMappingURL=text.js.map