@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/roles/more-chip.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import styles from "./more-chip.module.css";
+function MoreChip({ items, title }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.wrap,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsxs(Popover.Root, { children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles.chip,
+            "aria-label": `${items.length} more ${title.toLowerCase()}`,
+            children: [
+              "+",
+              items.length
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 6,
+            collisionPadding: 16,
+            className: styles.popover,
+            "aria-label": title,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: styles.title, children: title }),
+              /* @__PURE__ */ jsx("ul", { className: styles.list, children: items.map((item) => /* @__PURE__ */ jsx("li", { title: item, children: item }, item)) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  MoreChip
+};
+//# sourceMappingURL=more-chip.js.map

package/dist/admin/roles/more-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/roles/more-chip.tsx"],"sourcesContent":["'use client';\n\nimport * as Popover from '@radix-ui/react-popover';\nimport styles from './more-chip.module.css';\n\n/**\n * \"+N\" after a row of chips: a real control. Click (or Enter) opens the full\n * list in a popover; the click never reaches the row underneath it.\n */\nexport function MoreChip({ items, title }: { items: string[]; title: string }) {\n  if (items.length === 0) return null;\n  return (\n    <span\n      className={styles.wrap}\n      onClick={(e) => e.stopPropagation()}\n      onKeyDown={(e) => e.stopPropagation()}\n    >\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button\n            type=\"button\"\n            className={styles.chip}\n            aria-label={`${items.length} more ${title.toLowerCase()}`}\n          >\n            +{items.length}\n          </button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={6}\n            collisionPadding={16}\n            className={styles.popover}\n            aria-label={title}\n          >\n            <p className={styles.title}>{title}</p>\n            <ul className={styles.list}>\n              {items.map((item) => (\n                <li key={item} title={item}>\n                  {item}\n                </li>\n              ))}\n            </ul>\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </span>\n  );\n}\n"],"mappings":";AAkBQ,cACE,YADF;AAhBR,YAAY,aAAa;AACzB,OAAO,YAAY;AAMZ,SAAS,SAAS,EAAE,OAAO,MAAM,GAAuC;AAC7E,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAClC,WAAW,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAEpC,+BAAC,QAAQ,MAAR,EACC;AAAA,4BAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAW,OAAO;AAAA,YAClB,cAAY,GAAG,MAAM,MAAM,SAAS,MAAM,YAAY,CAAC;AAAA,YACxD;AAAA;AAAA,cACG,MAAM;AAAA;AAAA;AAAA,QACV,GACF;AAAA,QACA,oBAAC,QAAQ,QAAR,EACC;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,WAAW,OAAO;AAAA,YAClB,cAAY;AAAA,YAEZ;AAAA,kCAAC,OAAE,WAAW,OAAO,OAAQ,iBAAM;AAAA,cACnC,oBAAC,QAAG,WAAW,OAAO,MACnB,gBAAM,IAAI,CAAC,SACV,oBAAC,QAAc,OAAO,MACnB,kBADM,IAET,CACD,GACH;AAAA;AAAA;AAAA,QACF,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/roles/more-chip.module.css

@@ -0,0 +1,70 @@
+/* "+N" chip and the popover listing what it stands for. */
+.wrap {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background var(--adm-fast);
+}
+
+.chip:hover,
+.chip[data-state='open'] {
+  background: var(--adm-hover);
+  color: var(--text-primary);
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.popover {
+  z-index: 70;
+  width: min(280px, calc(100vw - 32px));
+  max-height: 320px;
+  padding: 12px;
+  overflow-y: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-shadow-pop);
+}
+
+.title {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}
+
+.list {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.list li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/admin/roles/page.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Button,
+  TableShell,
+  TableSkeleton,
+  Th,
+  useConfirm,
+  useToast
+} from "@withpotter/ui-kit";
+import { platformAdminApi } from "@withpotter/lib/admin-api";
+import { useAdminRoles, useAdminPermissions } from "../hooks";
+import { EmptyState, Panel } from "../_ui";
+import { EmptyBlock } from "../audit/empty-block";
+import { SectionHeader } from "../audit/section-header";
+import { RolesKpis } from "./roles-kpis";
+import { RoleDialog } from "./role-dialog";
+import { RoleRow, ROLE_COLUMNS, adminCount } from "./role-row";
+import section from "../audit/page.module.css";
+import kpi from "../audit/kpi-brand.module.css";
+import styles from "./roles.module.css";
+const CONTROLLED_PERMISSIONS = [
+  "money.cash.propose",
+  "money.cash.approve",
+  "money.payout_tiers.read",
+  "money.payout_tiers.manage",
+  "pricing.read",
+  "pricing.propose",
+  "pricing.approve",
+  "sales.read",
+  "sales.manage"
+];
+function RolesPage() {
+  const queryClient = useQueryClient();
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const [dialog, setDialog] = useState(null);
+  const { data: roles = [], isLoading, isError, refetch } = useAdminRoles();
+  const { data: catalog = [] } = useAdminPermissions();
+  const availablePermissions = useMemo(
+    () => Array.from(/* @__PURE__ */ new Set([...catalog, ...CONTROLLED_PERMISSIONS])),
+    [catalog]
+  );
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ["platform-admin", "roles"] });
+  const remove = useMutation({
+    mutationFn: (r) => platformAdminApi.deleteRole(r.id),
+    onSuccess: (_, r) => {
+      toast({ title: `${r.name} deleted` });
+      void invalidate();
+    },
+    onError: (error) => toast({
+      title: "The role was not deleted",
+      description: error.message,
+      variant: "destructive"
+    })
+  });
+  const confirmDelete = async (r) => {
+    const ok = await confirm({
+      title: `Delete ${r.name}?`,
+      description: r.assignedCount > 0 ? `${adminCount(r.assignedCount)} hold this role and will lose the access it grants. This can\u2019t be undone.` : "No admin holds this role. This can\u2019t be undone.",
+      confirmLabel: "Delete role",
+      tone: "danger"
+    });
+    if (ok) remove.mutate(r);
+  };
+  const create = /* @__PURE__ */ jsx(Button, { onClick: () => setDialog({ kind: "create" }), children: "Create role" });
+  let table;
+  if (isLoading) {
+    table = /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(TableSkeleton, { bare: true, rows: 5, columns: ROLE_COLUMNS }) });
+  } else if (isError) {
+    table = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: "error",
+        title: "Roles could not be loaded",
+        description: "Try again. If this keeps happening, contact engineering.",
+        action: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void refetch(), children: "Try again" })
+      }
+    );
+  } else if (roles.length === 0) {
+    table = /* @__PURE__ */ jsx(
+      EmptyBlock,
+      {
+        message: "No roles yet. A role bundles permissions so you can grant them in one step.",
+        action: create
+      }
+    );
+  } else {
+    table = /* @__PURE__ */ jsx(
+      TableShell,
+      {
+        bare: true,
+        fixed: true,
+        minWidth: 760,
+        density: "compact",
+        head: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx(Th, { className: styles.colRole, children: "Role" }),
+          /* @__PURE__ */ jsx(Th, { children: "Permissions" }),
+          /* @__PURE__ */ jsx(Th, { className: styles.colType, children: "Type" }),
+          /* @__PURE__ */ jsx(Th, { className: styles.colHeld, align: "right", children: "Held by" }),
+          /* @__PURE__ */ jsx(Th, { className: styles.colMenu, align: "right", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+        ] }),
+        children: roles.map((r) => /* @__PURE__ */ jsx(
+          RoleRow,
+          {
+            r,
+            onEdit: () => setDialog({ kind: "edit", role: r }),
+            onDuplicate: () => setDialog({ kind: "duplicate", role: r }),
+            onDelete: () => void confirmDelete(r)
+          },
+          r.id
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        title: "Roles",
+        description: "Reusable permission bundles. An admin\u2019s access is the union of every role they hold.",
+        actions: create
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: kpi.kpis, children: /* @__PURE__ */ jsx(
+      RolesKpis,
+      {
+        roles,
+        permissions: availablePermissions.length,
+        isLoading
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: section.section, "aria-busy": isLoading || void 0, children: /* @__PURE__ */ jsx(
+      Panel,
+      {
+        title: "All roles",
+        count: isLoading ? void 0 : roles.length,
+        height: "auto",
+        flush: true,
+        children: table
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      RoleDialog,
+      {
+        mode: dialog,
+        catalog: availablePermissions,
+        onClose: () => setDialog(null),
+        onSaved: () => void invalidate()
+      }
+    )
+  ] });
+}
+export {
+  RolesPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/roles/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/roles/page.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\nimport {\n  Button,\n  TableShell,\n  TableSkeleton,\n  Th,\n  useConfirm,\n  useToast,\n} from '@withpotter/ui-kit';\nimport { platformAdminApi, type RoleRow as Role } from '@withpotter/lib/admin-api';\nimport { useAdminRoles, useAdminPermissions } from '../hooks';\nimport { EmptyState, Panel } from '../_ui';\nimport { EmptyBlock } from '../audit/empty-block';\nimport { SectionHeader } from '../audit/section-header';\nimport { RolesKpis } from './roles-kpis';\nimport { RoleDialog, type RoleDialogMode } from './role-dialog';\nimport { RoleRow, ROLE_COLUMNS, adminCount } from './role-row';\nimport section from '../audit/page.module.css';\nimport kpi from '../audit/kpi-brand.module.css';\nimport styles from './roles.module.css';\n\nconst CONTROLLED_PERMISSIONS = [\n  'money.cash.propose',\n  'money.cash.approve',\n  'money.payout_tiers.read',\n  'money.payout_tiers.manage',\n  'pricing.read',\n  'pricing.propose',\n  'pricing.approve',\n  'sales.read',\n  'sales.manage',\n] as const;\n\nexport default function RolesPage() {\n  const queryClient = useQueryClient();\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const [dialog, setDialog] = useState<RoleDialogMode | null>(null);\n  const { data: roles = [], isLoading, isError, refetch } = useAdminRoles();\n  const { data: catalog = [] } = useAdminPermissions();\n  const availablePermissions = useMemo(\n    () => Array.from(new Set([...catalog, ...CONTROLLED_PERMISSIONS])),\n    [catalog],\n  );\n\n  const invalidate = () =>\n    queryClient.invalidateQueries({ queryKey: ['platform-admin', 'roles'] });\n\n  const remove = useMutation({\n    mutationFn: (r: Role) => platformAdminApi.deleteRole(r.id),\n    onSuccess: (_, r) => {\n      toast({ title: `${r.name} deleted` });\n      void invalidate();\n    },\n    onError: (error) =>\n      toast({\n        title: 'The role was not deleted',\n        description: error.message,\n        variant: 'destructive',\n      }),\n  });\n\n  const confirmDelete = async (r: Role) => {\n    const ok = await confirm({\n      title: `Delete ${r.name}?`,\n      description:\n        r.assignedCount > 0\n          ? `${adminCount(r.assignedCount)} hold this role and will lose the access it grants. This can’t be undone.`\n          : 'No admin holds this role. This can’t be undone.',\n      confirmLabel: 'Delete role',\n      tone: 'danger',\n    });\n    if (ok) remove.mutate(r);\n  };\n\n  const create = (\n    <Button onClick={() => setDialog({ kind: 'create' })}>Create role</Button>\n  );\n\n  let table;\n  if (isLoading) {\n    table = (\n      <div aria-hidden>\n        <TableSkeleton bare rows={5} columns={ROLE_COLUMNS} />\n      </div>\n    );\n  } else if (isError) {\n    table = (\n      <EmptyState\n        tone=\"error\"\n        title=\"Roles could not be loaded\"\n        description=\"Try again. If this keeps happening, contact engineering.\"\n        action={\n          <Button size=\"sm\" variant=\"secondary\" onClick={() => void refetch()}>\n            Try again\n          </Button>\n        }\n      />\n    );\n  } else if (roles.length === 0) {\n    table = (\n      <EmptyBlock\n        message=\"No roles yet. A role bundles permissions so you can grant them in one step.\"\n        action={create}\n      />\n    );\n  } else {\n    table = (\n      <TableShell\n        bare\n        fixed\n        minWidth={760}\n        density=\"compact\"\n        head={\n          <tr>\n            <Th className={styles.colRole}>Role</Th>\n            <Th>Permissions</Th>\n            <Th className={styles.colType}>Type</Th>\n            <Th className={styles.colHeld} align=\"right\">\n              Held by\n            </Th>\n            <Th className={styles.colMenu} align=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Th>\n          </tr>\n        }\n      >\n        {roles.map((r) => (\n          <RoleRow\n            key={r.id}\n            r={r}\n            onEdit={() => setDialog({ kind: 'edit', role: r })}\n            onDuplicate={() => setDialog({ kind: 'duplicate', role: r })}\n            onDelete={() => void confirmDelete(r)}\n          />\n        ))}\n      </TableShell>\n    );\n  }\n\n  return (\n    <div className={styles.page}>\n      <SectionHeader\n        title=\"Roles\"\n        description=\"Reusable permission bundles. An admin’s access is the union of every role they hold.\"\n        actions={create}\n      />\n\n      <div className={kpi.kpis}>\n        <RolesKpis\n          roles={roles}\n          permissions={availablePermissions.length}\n          isLoading={isLoading}\n        />\n      </div>\n\n      <div className={section.section} aria-busy={isLoading || undefined}>\n        <Panel\n          title=\"All roles\"\n          count={isLoading ? undefined : roles.length}\n          height=\"auto\"\n          flush\n        >\n          {table}\n        </Panel>\n      </div>\n\n      <RoleDialog\n        mode={dialog}\n        catalog={availablePermissions}\n        onClose={() => setDialog(null)}\n        onSaved={() => void invalidate()}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/roles/permission-picker.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, EmptyNote } from "@withpotter/ui-kit";
+import { actionLabel, groupPermissions, permissionLabel } from "./permissions";
+import styles from "./permission-picker.module.css";
+function PermissionPicker({
+  keys,
+  value,
+  onToggle,
+  onSet,
+  legend = "Permissions"
+}) {
+  const groups = groupPermissions(keys);
+  return /* @__PURE__ */ jsxs("fieldset", { className: styles.picker, children: [
+    /* @__PURE__ */ jsxs("legend", { className: styles.pickerLegend, children: [
+      legend,
+      /* @__PURE__ */ jsxs("span", { className: styles.pickerCount, children: [
+        value.length,
+        " of ",
+        keys.length
+      ] })
+    ] }),
+    groups.length === 0 ? /* @__PURE__ */ jsx(EmptyNote, { children: "No permissions available." }) : /* @__PURE__ */ jsx("div", { className: styles.groups, children: groups.map((g) => {
+      const on = g.keys.filter((k) => value.includes(k)).length;
+      const all = on === g.keys.length;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.group,
+          "data-active": on > 0,
+          role: "group",
+          "aria-label": g.label,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.groupHead, children: [
+              onSet ? /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: all,
+                  indeterminate: on > 0 && !all,
+                  onChange: () => onSet(
+                    all ? value.filter((k) => !g.keys.includes(k)) : Array.from(/* @__PURE__ */ new Set([...value, ...g.keys]))
+                  ),
+                  label: /* @__PURE__ */ jsx("span", { className: styles.groupTitle, children: g.label })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: styles.groupTitle, children: g.label }),
+              /* @__PURE__ */ jsxs("span", { className: styles.groupCount, children: [
+                on,
+                "/",
+                g.keys.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.groupItems, children: g.keys.map((key) => /* @__PURE__ */ jsx("span", { title: permissionLabel(key), children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: value.includes(key),
+                onChange: () => onToggle(key),
+                label: actionLabel(key)
+              }
+            ) }, key)) })
+          ]
+        },
+        g.area
+      );
+    }) })
+  ] });
+}
+const toggleIn = (key) => (current) => current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
+export {
+  PermissionPicker,
+  toggleIn
+};
+//# sourceMappingURL=permission-picker.js.map

package/dist/admin/roles/permission-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/roles/permission-picker.tsx"],"sourcesContent":["import { Checkbox, EmptyNote } from '@withpotter/ui-kit';\nimport { actionLabel, groupPermissions, permissionLabel } from './permissions';\nimport styles from './permission-picker.module.css';\n\n/**\n * Permission checkboxes grouped by area. Each area is a tile in an even\n * two-column grid, with an \"all\" box that selects or clears the area.\n */\nexport function PermissionPicker({\n  keys,\n  value,\n  onToggle,\n  onSet,\n  legend = 'Permissions',\n}: {\n  keys: readonly string[];\n  value: readonly string[];\n  onToggle: (key: string) => void;\n  /** Replace the whole selection; enables the per-area \"all\" box. */\n  onSet?: (next: string[]) => void;\n  legend?: string;\n}) {\n  const groups = groupPermissions(keys);\n  return (\n    <fieldset className={styles.picker}>\n      <legend className={styles.pickerLegend}>\n        {legend}\n        <span className={styles.pickerCount}>\n          {value.length} of {keys.length}\n        </span>\n      </legend>\n      {groups.length === 0 ? (\n        <EmptyNote>No permissions available.</EmptyNote>\n      ) : (\n        <div className={styles.groups}>\n          {groups.map((g) => {\n            const on = g.keys.filter((k) => value.includes(k)).length;\n            const all = on === g.keys.length;\n            return (\n              <div\n                key={g.area}\n                className={styles.group}\n                data-active={on > 0}\n                role=\"group\"\n                aria-label={g.label}\n              >\n                <div className={styles.groupHead}>\n                  {onSet ? (\n                    <Checkbox\n                      checked={all}\n                      indeterminate={on > 0 && !all}\n                      onChange={() =>\n                        onSet(\n                          all\n                            ? value.filter((k) => !g.keys.includes(k))\n                            : Array.from(new Set([...value, ...g.keys])),\n                        )\n                      }\n                      label={\n                        <span className={styles.groupTitle}>{g.label}</span>\n                      }\n                    />\n                  ) : (\n                    <span className={styles.groupTitle}>{g.label}</span>\n                  )}\n                  <span className={styles.groupCount}>\n                    {on}/{g.keys.length}\n                  </span>\n                </div>\n                <div className={styles.groupItems}>\n                  {g.keys.map((key) => (\n                    <span key={key} title={permissionLabel(key)}>\n                      <Checkbox\n                        checked={value.includes(key)}\n                        onChange={() => onToggle(key)}\n                        label={actionLabel(key)}\n                      />\n                    </span>\n                  ))}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </fieldset>\n  );\n}\n\n/** Add or remove one key; the shape every picker's state setter takes. */\nexport const toggleIn = (key: string) => (current: string[]) =>\n  current.includes(key) ? current.filter((k) => k !== key) : [...current, key];\n"],"mappings":"AA2BQ,SAKA,KALA;AA3BR,SAAS,UAAU,iBAAiB;AACpC,SAAS,aAAa,kBAAkB,uBAAuB;AAC/D,OAAO,YAAY;AAMZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,GAOG;AACD,QAAM,SAAS,iBAAiB,IAAI;AACpC,SACE,qBAAC,cAAS,WAAW,OAAO,QAC1B;AAAA,yBAAC,YAAO,WAAW,OAAO,cACvB;AAAA;AAAA,MACD,qBAAC,UAAK,WAAW,OAAO,aACrB;AAAA,cAAM;AAAA,QAAO;AAAA,QAAK,KAAK;AAAA,SAC1B;AAAA,OACF;AAAA,IACC,OAAO,WAAW,IACjB,oBAAC,aAAU,uCAAyB,IAEpC,oBAAC,SAAI,WAAW,OAAO,QACpB,iBAAO,IAAI,CAAC,MAAM;AACjB,YAAM,KAAK,EAAE,KAAK,OAAO,CAAC,MAAM,MAAM,SAAS,CAAC,CAAC,EAAE;AACnD,YAAM,MAAM,OAAO,EAAE,KAAK;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,OAAO;AAAA,UAClB,eAAa,KAAK;AAAA,UAClB,MAAK;AAAA,UACL,cAAY,EAAE;AAAA,UAEd;AAAA,iCAAC,SAAI,WAAW,OAAO,WACpB;AAAA,sBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,eAAe,KAAK,KAAK,CAAC;AAAA,kBAC1B,UAAU,MACR;AAAA,oBACE,MACI,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,IACvC,MAAM,KAAK,oBAAI,IAAI,CAAC,GAAG,OAAO,GAAG,EAAE,IAAI,CAAC,CAAC;AAAA,kBAC/C;AAAA,kBAEF,OACE,oBAAC,UAAK,WAAW,OAAO,YAAa,YAAE,OAAM;AAAA;AAAA,cAEjD,IAEA,oBAAC,UAAK,WAAW,OAAO,YAAa,YAAE,OAAM;AAAA,cAE/C,qBAAC,UAAK,WAAW,OAAO,YACrB;AAAA;AAAA,gBAAG;AAAA,gBAAE,EAAE,KAAK;AAAA,iBACf;AAAA,eACF;AAAA,YACA,oBAAC,SAAI,WAAW,OAAO,YACpB,YAAE,KAAK,IAAI,CAAC,QACX,oBAAC,UAAe,OAAO,gBAAgB,GAAG,GACxC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM,SAAS,GAAG;AAAA,gBAC3B,UAAU,MAAM,SAAS,GAAG;AAAA,gBAC5B,OAAO,YAAY,GAAG;AAAA;AAAA,YACxB,KALS,GAMX,CACD,GACH;AAAA;AAAA;AAAA,QAvCK,EAAE;AAAA,MAwCT;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ;AAEJ;AAGO,MAAM,WAAW,CAAC,QAAgB,CAAC,YACxC,QAAQ,SAAS,GAAG,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG;","names":[]}

package/dist/admin/roles/permission-picker.module.css

@@ -0,0 +1,81 @@
+/* The grouped permission picker: even tiles, two per row. */
+
+.picker {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.pickerLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.pickerCount,
+.groupCount {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary);
+}
+
+.groups {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 559px) {
+  .groups {
+    grid-template-columns: 1fr;
+  }
+}
+
+.group {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  min-width: 0;
+  padding: 12px 16px 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  transition:
+    border-color var(--adm-fast),
+    background-color var(--adm-fast);
+}
+
+.group[data-active='true'] {
+  border-color: var(--adm-tint-line);
+  background: var(--adm-tint);
+}
+
+.groupHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.groupTitle {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--text-primary);
+}
+
+.groupItems {
+  display: grid;
+  gap: 8px;
+}

package/dist/admin/roles/permissions.js

@@ -0,0 +1,66 @@
+const LABELS = {
+  "tenants.manage": "Manage tenants",
+  "accounts.manage": "Manage accounts",
+  "accounts.impersonate": "Impersonate accounts",
+  "admins.manage": "Manage admins",
+  "audit.read": "View audit log",
+  "money.cash.propose": "Propose cash postings (maker)",
+  "money.cash.approve": "Approve or reject cash postings (checker)",
+  "money.payout_tiers.read": "Payout tiers: view",
+  "money.payout_tiers.manage": "Payout tiers: manage"
+};
+const ACTION_LABELS = {
+  "audit.read": "View audit log",
+  "money.cash.propose": "Propose cash postings",
+  "money.cash.approve": "Approve or reject cash postings",
+  "money.payout_tiers.read": "View payout tiers",
+  "money.payout_tiers.manage": "Manage payout tiers"
+};
+const AREA_LABELS = {
+  money: "Money",
+  audit: "Audit"
+};
+const words = (s) => s.replace(/_/g, " ").trim();
+const sentence = (s) => {
+  const w = words(s);
+  return w ? w[0].toUpperCase() + w.slice(1) : w;
+};
+const split = (key) => {
+  const [area, ...rest] = key.split(".");
+  return { area, action: rest.join(" ") };
+};
+function areaLabel(area) {
+  return AREA_LABELS[area] ?? sentence(area);
+}
+function permissionLabel(key) {
+  if (LABELS[key]) return LABELS[key];
+  const { area, action } = split(key);
+  return action ? `${areaLabel(area)} \xB7 ${words(action)}` : areaLabel(area);
+}
+function actionLabel(key) {
+  if (ACTION_LABELS[key]) return ACTION_LABELS[key];
+  const { area, action } = split(key);
+  if (!action) return areaLabel(area);
+  return sentence(action);
+}
+function groupPermissions(keys) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const key of keys) {
+    const { area } = split(key);
+    const group = groups.get(area) ?? {
+      area,
+      label: areaLabel(area),
+      keys: []
+    };
+    group.keys.push(key);
+    groups.set(area, group);
+  }
+  return [...groups.values()];
+}
+export {
+  actionLabel,
+  areaLabel,
+  groupPermissions,
+  permissionLabel
+};
+//# sourceMappingURL=permissions.js.map

package/dist/admin/roles/permissions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/roles/permissions.ts"],"sourcesContent":["/**\n * Permission keys in words. A key is `area.action` (`product_insights.read`)\n * or `area.thing.action` (`money.cash.propose`). Known keys have a written\n * label; any other key is derived, so a new permission never shows raw.\n */\nconst LABELS: Record<string, string> = {\n  'tenants.manage': 'Manage tenants',\n  'accounts.manage': 'Manage accounts',\n  'accounts.impersonate': 'Impersonate accounts',\n  'admins.manage': 'Manage admins',\n  'audit.read': 'View audit log',\n  'money.cash.propose': 'Propose cash postings (maker)',\n  'money.cash.approve': 'Approve or reject cash postings (checker)',\n  'money.payout_tiers.read': 'Payout tiers: view',\n  'money.payout_tiers.manage': 'Payout tiers: manage',\n};\n\n/** Shorter names inside a group, where the area is already the heading. */\nconst ACTION_LABELS: Record<string, string> = {\n  'audit.read': 'View audit log',\n  'money.cash.propose': 'Propose cash postings',\n  'money.cash.approve': 'Approve or reject cash postings',\n  'money.payout_tiers.read': 'View payout tiers',\n  'money.payout_tiers.manage': 'Manage payout tiers',\n};\n\n/** Areas whose key does not read well on its own. */\nconst AREA_LABELS: Record<string, string> = {\n  money: 'Money',\n  audit: 'Audit',\n};\n\nconst words = (s: string) => s.replace(/_/g, ' ').trim();\nconst sentence = (s: string) => {\n  const w = words(s);\n  return w ? w[0].toUpperCase() + w.slice(1) : w;\n};\n\nconst split = (key: string) => {\n  const [area, ...rest] = key.split('.');\n  return { area, action: rest.join(' ') };\n};\n\n/** \"Product insights\" for `product_insights.read`. */\nexport function areaLabel(area: string): string {\n  return AREA_LABELS[area] ?? sentence(area);\n}\n\n/** The full label, for a badge out of context: \"Product insights · read\". */\nexport function permissionLabel(key: string): string {\n  if (LABELS[key]) return LABELS[key];\n  const { area, action } = split(key);\n  return action ? `${areaLabel(area)} · ${words(action)}` : areaLabel(area);\n}\n\n/** The label inside its area group: \"Read\". */\nexport function actionLabel(key: string): string {\n  if (ACTION_LABELS[key]) return ACTION_LABELS[key];\n  const { area, action } = split(key);\n  if (!action) return areaLabel(area);\n  return sentence(action);\n}\n\nexport interface PermissionGroup {\n  area: string;\n  label: string;\n  keys: string[];\n}\n\n/** Keys grouped by area, in the order each area first appears. */\nexport function groupPermissions(keys: readonly string[]): PermissionGroup[] {\n  const groups = new Map<string, PermissionGroup>();\n  for (const key of keys) {\n    const { area } = split(key);\n    const group = groups.get(area) ?? {\n      area,\n      label: areaLabel(area),\n      keys: [],\n    };\n    group.keys.push(key);\n    groups.set(area, group);\n  }\n  return [...groups.values()];\n}\n"],"mappings":"AAKA,MAAM,SAAiC;AAAA,EACrC,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,6BAA6B;AAC/B;AAGA,MAAM,gBAAwC;AAAA,EAC5C,cAAc;AAAA,EACd,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA,EAC3B,6BAA6B;AAC/B;AAGA,MAAM,cAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,OAAO;AACT;AAEA,MAAM,QAAQ,CAAC,MAAc,EAAE,QAAQ,MAAM,GAAG,EAAE,KAAK;AACvD,MAAM,WAAW,CAAC,MAAc;AAC9B,QAAM,IAAI,MAAM,CAAC;AACjB,SAAO,IAAI,EAAE,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,IAAI;AAC/C;AAEA,MAAM,QAAQ,CAAC,QAAgB;AAC7B,QAAM,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,MAAM,GAAG;AACrC,SAAO,EAAE,MAAM,QAAQ,KAAK,KAAK,GAAG,EAAE;AACxC;AAGO,SAAS,UAAU,MAAsB;AAC9C,SAAO,YAAY,IAAI,KAAK,SAAS,IAAI;AAC3C;AAGO,SAAS,gBAAgB,KAAqB;AACnD,MAAI,OAAO,GAAG,EAAG,QAAO,OAAO,GAAG;AAClC,QAAM,EAAE,MAAM,OAAO,IAAI,MAAM,GAAG;AAClC,SAAO,SAAS,GAAG,UAAU,IAAI,CAAC,SAAM,MAAM,MAAM,CAAC,KAAK,UAAU,IAAI;AAC1E;AAGO,SAAS,YAAY,KAAqB;AAC/C,MAAI,cAAc,GAAG,EAAG,QAAO,cAAc,GAAG;AAChD,QAAM,EAAE,MAAM,OAAO,IAAI,MAAM,GAAG;AAClC,MAAI,CAAC,OAAQ,QAAO,UAAU,IAAI;AAClC,SAAO,SAAS,MAAM;AACxB;AASO,SAAS,iBAAiB,MAA4C;AAC3E,QAAM,SAAS,oBAAI,IAA6B;AAChD,aAAW,OAAO,MAAM;AACtB,UAAM,EAAE,KAAK,IAAI,MAAM,GAAG;AAC1B,UAAM,QAAQ,OAAO,IAAI,IAAI,KAAK;AAAA,MAChC;AAAA,MACA,OAAO,UAAU,IAAI;AAAA,MACrB,MAAM,CAAC;AAAA,IACT;AACA,UAAM,KAAK,KAAK,GAAG;AACnB,WAAO,IAAI,MAAM,KAAK;AAAA,EACxB;AACA,SAAO,CAAC,GAAG,OAAO,OAAO,CAAC;AAC5B;","names":[]}