@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/rbac/ChangePasswordForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangePasswordForm.js","sources":["../../../src/components/rbac/ChangePasswordForm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../Button\";\nimport { Callout } from \"../Callout\";\nimport { Field } from \"../Field\";\nimport { PasswordInput } from \"../PasswordInput\";\nimport { PasswordRequirements, type PasswordRequirementRule } from \"../PasswordRequirements\";\nimport { useUiStrings } from \"../../lib/i18n\";\n\n/* ============================================================================\n   CHANGE PASSWORD FORM\n\n   THREE FIELDS, LOCAL STATE, SAME SHAPE AS `RoleEditorDialog` — current\n   password, new password, confirm — held in this component's own\n   `useState`, not lifted to the caller. That is a deliberate choice among a\n   few workable ones (see the card this shipped under for the alternatives\n   considered): lifting `next` to controlled `value`/`onChange` props would\n   mean every keystroke of a password briefly lives in the CONSUMER's own\n   state tree for no reason this form needs, and the one thing an external\n   caller actually has to own — what counts as a strong-enough password — is\n   already fully extracted into `passwordRules`, a pure function this form\n   calls with the current draft on every render. Nothing about the RULES lives\n   here; this library only ever renders the checklist `PasswordRequirements`\n   builds from whatever that function returns (see its own header — the\n   \"12 characters\" kind of policy belongs to the consumer's own\n   `auth-rules.ts`, never here).\n\n   CONFIRM-MATCHES-NEW is the one piece of validation done inline, because it\n   is not a password POLICY — it is arithmetic (\"do these two strings read the\n   same\"), the same category of decision `SecretField`'s empty-vs-cleared\n   distinction makes internally rather than pushing out to a caller.\n\n   FIELDS RESET ONLY ON A SUCCESSFUL SUBMIT. A REJECTED `onSubmit` (wrong\n   current password, a policy failure the server re-checks, a network error)\n   leaves every field exactly as typed — re-typing three password fields\n   because the server was slow is exactly the friction a working form must\n   not add — and shows whatever the rejection's `message` says in a `Callout`.\n   ========================================================================= */\n\n/* DX-5095 - an account that signed up through a provider has no password yet. `hasCurrentPassword={false}` is\n   set-password mode: no current-password field, and `onSubmit(next)` instead of `onSubmit(current, next)`. The\n   discriminated union keeps each mode's callback honestly typed. */\ninterface ChangePasswordFormBaseProps {\n  /** Pure — recomputed against the current draft of the new password on every\n   *  render. See the module header for why this is a function rather than a\n   *  precomputed `rules[]`. */\n  passwordRules: (nextPassword: string) => PasswordRequirementRule[];\n  submitLabel?: string;\n  className?: string;\n}\n\nexport type ChangePasswordFormProps = ChangePasswordFormBaseProps &\n  (\n    | { hasCurrentPassword?: true; onSubmit: (current: string, next: string) => Promise<void> }\n    | { hasCurrentPassword: false; onSubmit: (next: string) => Promise<void> }\n  );\n\nexport function ChangePasswordForm(props: ChangePasswordFormProps) {\n  const { passwordRules, submitLabel, className } = props;\n  const strings = useUiStrings().changePasswordForm;\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [submitting, setSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const askCurrent = props.hasCurrentPassword !== false;\n  const copy = askCurrent\n    ? { failedTitle: strings.failedTitle, failedMessage: strings.failedMessage, submit: strings.submit }\n    : { failedTitle: strings.setFailedTitle, failedMessage: strings.setFailedMessage, submit: strings.setSubmit };\n  const rules = passwordRules(next);\n  const allRulesMet = rules.length === 0 || rules.every((rule) => rule.met);\n  const confirmMismatch = confirm.length > 0 && confirm !== next;\n  const canSubmit =\n    (!askCurrent || current.length > 0) &&\n    next.length > 0 &&\n    confirm.length > 0 &&\n    allRulesMet &&\n    !confirmMismatch &&\n    !submitting;\n\n  async function handleSubmit(event: React.FormEvent) {\n    event.preventDefault();\n    if (!canSubmit) return;\n\n    setSubmitting(true);\n    setError(null);\n    try {\n      if (props.hasCurrentPassword === false) await props.onSubmit(next);\n      else await props.onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : copy.failedMessage);\n    } finally {\n      setSubmitting(false);\n    }\n  }\n\n  return (\n    <form className={className} onSubmit={(event) => void handleSubmit(event)}>\n      <div className=\"flex flex-col gap-4\">\n        {error && <Callout tone=\"danger\" title={copy.failedTitle}>{error}</Callout>}\n\n        {askCurrent && (\n          <Field label={strings.current}>\n            <PasswordInput\n              value={current}\n              onChange={(event) => setCurrent(event.target.value)}\n              autoComplete=\"current-password\"\n              disabled={submitting}\n              required\n            />\n          </Field>\n        )}\n\n        <Field label={strings.next}>\n          <PasswordInput\n            value={next}\n            onChange={(event) => setNext(event.target.value)}\n            autoComplete=\"new-password\"\n            disabled={submitting}\n            required\n          />\n          <PasswordRequirements rules={rules} className=\"mt-2\" />\n        </Field>\n\n        <Field\n          label={strings.confirmPassword}\n          error={confirmMismatch ? strings.mismatch : undefined}\n        >\n          <PasswordInput\n            value={confirm}\n            onChange={(event) => setConfirm(event.target.value)}\n            autoComplete=\"new-password\"\n            disabled={submitting}\n            required\n          />\n        </Field>\n\n        <div>\n          <Button type=\"submit\" disabled={!canSubmit} loading={submitting}>\n            {submitLabel ?? copy.submit}\n          </Button>\n        </div>\n      </div>\n    </form>\n  );\n}\n"],"names":["ChangePasswordForm","props","passwordRules","submitLabel","className","strings","useUiStrings","current","setCurrent","useState","next","setNext","confirm","setConfirm","submitting","setSubmitting","error","setError","askCurrent","copy","rules","allRulesMet","rule","confirmMismatch","canSubmit","handleSubmit","event","cause","jsx","jsxs","Callout","Field","PasswordInput","PasswordRequirements","Button"],"mappings":"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"}

package/dist/components/rbac/DangerZone.js

@@ -0,0 +1,27 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { cn as d } from "../../lib/cn.js";
+import { useUiStrings as i } from "../../lib/i18n/provider.js";
+function x({ title: o, description: r, children: t, className: a }) {
+  const l = i().dangerZone, n = o ?? l.title;
+  return /* @__PURE__ */ s(
+    "section",
+    {
+      className: d(
+        "flex flex-col gap-3 rounded-lg border border-danger-border bg-danger-subtle p-4",
+        a
+      ),
+      "aria-label": n,
+      children: [
+        /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-danger-text", children: n }),
+          r && /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-secondary", children: r })
+        ] }),
+        t && /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: t })
+      ]
+    }
+  );
+}
+export {
+  x as DangerZone
+};
+//# sourceMappingURL=DangerZone.js.map

package/dist/components/rbac/DangerZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DangerZone.js","sources":["../../../src/components/rbac/DangerZone.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\n\n/* ============================================================================\n   DANGER ZONE\n\n   A generic, presentational \"irreversible actions live here\" section —\n   danger-toned border/heading, a title, an optional description, and a\n   `children` slot for whatever action control the page composes in (a\n   `Button` wired to an `AlertDialog` confirm, matching `MembersPanel`'s own\n   remove-with-confirm convention; see that file for the pattern). This\n   component owns NO action logic, no confirmation, no danxbot/team\n   knowledge — purely the toned frame every settings page's own danger\n   section can reuse, the split test G-5 asks for (would another SaaS app's\n   settings page use this frame as-is? yes, given a title/description/action).\n\n   MULTIPLE `children` ACTIONS ARE FINE — a settings page with more than one\n   irreversible action (today: none for team settings, since team deletion\n   is out of v1 per PLN-13 CAV-3; tomorrow: whatever a later card adds) just\n   passes more than one control, each still rendered as its own row.\n   ========================================================================= */\n\nexport interface DangerZoneProps {\n  title?: string;\n  description?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function DangerZone({ title, description, children, className }: DangerZoneProps) {\n  const strings = useUiStrings().dangerZone;\n  const heading = title ?? strings.title;\n  return (\n    <section\n      className={cn(\n        \"flex flex-col gap-3 rounded-lg border border-danger-border bg-danger-subtle p-4\",\n        className,\n      )}\n      aria-label={heading}\n    >\n      <div>\n        <h3 className=\"text-sm font-semibold text-danger-text\">{heading}</h3>\n        {description && <p className=\"mt-1 text-sm text-secondary\">{description}</p>}\n      </div>\n      {children && <div className=\"flex flex-col gap-2\">{children}</div>}\n    </section>\n  );\n}\n"],"names":["DangerZone","title","description","children","className","strings","useUiStrings","heading","jsxs","cn","jsx"],"mappings":";;;AA8BO,SAASA,EAAW,EAAE,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,WAAAC,KAA8B;AACvF,QAAMC,IAAUC,IAAe,YACzBC,IAAUN,KAASI,EAAQ;AACjC,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,cAAYG;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EACC,UAAA;AAAA,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,0CAA0C,UAAAH,GAAQ;AAAA,UAC/DL,KAAe,gBAAAQ,EAAC,KAAA,EAAE,WAAU,+BAA+B,UAAAR,EAAA,CAAY;AAAA,QAAA,GAC1E;AAAA,QACCC,KAAY,gBAAAO,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAP,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}

package/dist/components/rbac/DevToolsPopover.js

@@ -0,0 +1,140 @@
+import { jsxs as i, jsx as t, Fragment as R } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { AlertDialog as T } from "../Dialog.js";
+import { Button as n } from "../Button.js";
+import { Icon as a } from "../Icon.js";
+import { Popover as z } from "../Popover.js";
+import { Select as m, SelectItem as p } from "../Select.js";
+import { resetSimStores as D } from "../../lib/sim/registry.js";
+import { useSimSettings as I, setSimSettings as x } from "../../lib/sim/settings.js";
+import { useRBAC as S } from "./RBACProvider.js";
+import { useUiStrings as w } from "../../lib/i18n/provider.js";
+import { emphasis as y } from "../../lib/i18n/emphasis.js";
+const E = ["instant", "fast", "typical", "flaky"], V = ["simulated", "live"], L = "wrench";
+function M({
+  onOpenUseCaseLedger: l,
+  showSimControls: o = !0,
+  iconOnly: e = !1
+} = {}) {
+  const s = w().devTools, { canAccessDevTools: c, isImpersonating: d } = S();
+  return c ? /* @__PURE__ */ t(
+    z,
+    {
+      align: "end",
+      width: "calc(20rem*var(--ui-scale))",
+      trigger: /* @__PURE__ */ i(
+        n,
+        {
+          size: "sm",
+          variant: d ? "subtle" : e ? "ghost" : "outline",
+          iconOnly: e,
+          "aria-label": s.triggerLabel,
+          children: [
+            /* @__PURE__ */ t(a, { name: L, size: "sm" }),
+            !e && /* @__PURE__ */ t("span", { className: "hidden sm:inline", children: s.trigger })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ t(P, { onOpenUseCaseLedger: l, showSimControls: o })
+    }
+  ) : null;
+}
+function P({ onOpenUseCaseLedger: l, showSimControls: o = !0 } = {}) {
+  const e = w().devTools, { canAccessDevTools: s, roles: c, viewingAsRoleId: d, setViewingAsRoleId: g, effectiveRole: N, isImpersonating: u } = S(), { networkSpeed: k, dataSource: f } = I(), [A, h] = b(!1), [C, v] = b(!1);
+  return s ? /* @__PURE__ */ i("div", { "data-dev-tools-panel": "", className: "flex w-full min-w-0 flex-col gap-4", children: [
+    /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ t("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.viewAs }),
+      /* @__PURE__ */ t(
+        m,
+        {
+          "aria-label": e.viewAsLabel,
+          placeholder: e.actualRole,
+          value: d,
+          onValueChange: (r) => g(r ?? null),
+          children: c.map((r) => /* @__PURE__ */ t(p, { value: r.id, children: r.label }, r.id))
+        }
+      )
+    ] }),
+    u && /* @__PURE__ */ i(
+      "div",
+      {
+        role: "status",
+        className: "flex items-start gap-2 rounded-md border border-warning-border bg-warning-subtle p-3",
+        children: [
+          /* @__PURE__ */ t(a, { name: "triangle-alert", size: "sm", className: "mt-px text-warning-text" }),
+          /* @__PURE__ */ t("p", { className: "text-xs text-warning-text", children: e.viewingAs(N?.label ?? e.unknownRole, y) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(
+      n,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: !u,
+        onClick: () => g(null),
+        children: [
+          /* @__PURE__ */ t(a, { name: "rotate-ccw", size: "sm" }),
+          e.resetToActual
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ i(R, { children: [
+      /* @__PURE__ */ i("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-4", children: [
+        /* @__PURE__ */ t("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.dataSource }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "aria-label": e.dataSource,
+            value: f,
+            onValueChange: (r) => x({ dataSource: r }),
+            children: V.map((r) => /* @__PURE__ */ t(p, { value: r, children: e.dataSources[r] }, r))
+          }
+        ),
+        f === "live" && /* @__PURE__ */ t("p", { className: "text-2xs text-tertiary", children: e.liveNotConfigured })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-4", children: [
+        /* @__PURE__ */ t("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.networkSpeed }),
+        /* @__PURE__ */ t(
+          m,
+          {
+            "aria-label": e.networkSpeed,
+            value: k,
+            onValueChange: (r) => x({ networkSpeed: r }),
+            children: E.map((r) => /* @__PURE__ */ t(p, { value: r, children: e.networkSpeeds[r] }, r))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-4", children: /* @__PURE__ */ t(
+        T,
+        {
+          trigger: /* @__PURE__ */ i(n, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ t(a, { name: "refresh-cw", size: "sm" }),
+            e.regenerate
+          ] }),
+          open: A,
+          onOpenChange: h,
+          title: e.regenerateTitle,
+          description: e.regenerateDescription,
+          confirmLabel: e.regenerateConfirm,
+          loading: C,
+          onConfirm: () => {
+            v(!0), D("demo").finally(() => {
+              v(!1), h(!1);
+            });
+          }
+        }
+      ) })
+    ] }),
+    l && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2 border-t border-border-subtle pt-4", children: /* @__PURE__ */ i(n, { variant: "ghost", size: "sm", onClick: l, children: [
+      /* @__PURE__ */ t(a, { name: "list-checks", size: "sm" }),
+      e.openLedger
+    ] }) })
+  ] }) : null;
+}
+export {
+  L as DEV_TOOLS_ICON,
+  P as DevToolsPanel,
+  M as DevToolsPopover
+};
+//# sourceMappingURL=DevToolsPopover.js.map

package/dist/components/rbac/DevToolsPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsPopover.js","sources":["../../../src/components/rbac/DevToolsPopover.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport { AlertDialog } from \"../Dialog\";\r\nimport { Button } from \"../Button\";\r\nimport { Icon, type IconName } from \"../Icon\";\r\nimport { Popover } from \"../Popover\";\r\nimport { Select, SelectItem } from \"../Select\";\r\nimport { resetSimStores } from \"../../lib/sim/registry\";\r\nimport { emphasis, useUiStrings } from \"../../lib/i18n\";\r\nimport { useSimSettings, setSimSettings } from \"../../lib/sim/settings\";\r\nimport type { DataSource, NetworkSpeed } from \"../../lib/sim/types\";\r\nimport { useRBAC } from \"./RBACProvider\";\r\n\r\n/* ============================================================================\r\n   DEV TOOLS POPOVER — the \"view the app as a different role\" escape hatch,\r\n   plus every other Dev-only control a pitch deck needs: what backend is\r\n   answering, how slow it pretends to be, and a one-click way back to a clean\r\n   demo.\r\n\r\n   THE STRUCTURAL GUARANTEE, NOT A CALLER CONVENTION. This component renders\r\n   `null` outright when `useRBAC().canAccessDevTools` is false — a consumer\r\n   cannot forget to gate it, wrap it in their own `if`, or render it behind a\r\n   feature flag that drifts out of sync with the real permission check. The\r\n   ONE thing that decides whether this exists on screen at all is the RBAC\r\n   provider's own `canAccessDevTools` config, evaluated against the REAL\r\n   signed-in user (see the block comment on `canAccessDevToolsValue` in\r\n   `RBACProvider.tsx` for why that evaluation can never read the impersonated\r\n   view). Putting the gate here, rather than leaving it to whoever mounts this\r\n   component, is what makes that guarantee actually hold.\r\n\r\n   NEVER A ROLE NAME. This file selects roles by `id`, labels them with\r\n   `role.label`, and has no branch that treats any particular id or label\r\n   specially — \"who is allowed to impersonate\" was already decided upstream by\r\n   the consumer's own predicate, and by the time this component runs that\r\n   question is closed. All that is left is \"which of these roles do you want\r\n   to look like,\" which is a plain list with nothing about it hardcoded.\r\n\r\n   THE 4 NEWER CONTROLS ARE SIM-LAYER, NOT RBAC-LAYER. Data source, network\r\n   speed and \"regenerate demo data\" have nothing to do with roles or\r\n   permissions — they read/write `src/lib/sim/settings.ts` and call\r\n   `resetSimStores()` directly, both of which are domain-agnostic (a Role\r\n   store and a future vertical's Invoice store reset exactly the same way).\r\n   This popover living under `rbac/` is a placement choice (it is where the\r\n   \"who can see Dev tools\" gate already lives), not a claim that these\r\n   controls are RBAC concerns.\r\n\r\n   \"OPEN USE CASE LEDGER\" IS THE ONE GENUINELY CONSUMER-SPECIFIC CONTROL —\r\n   this library has no idea what route (if any) renders `UseCaseLedgerPage`,\r\n   so it is an optional `onOpenUseCaseLedger` callback, same \"no router\"\r\n   pattern `AccountMenu` already uses for `onNavigateProfile`/`onNavigateRoles`:\r\n   supply it, or the row simply does not render.\r\n   ========================================================================= */\r\n\r\nconst NETWORK_SPEEDS: NetworkSpeed[] = [\"instant\", \"fast\", \"typical\", \"flaky\"];\r\n\r\nconst DATA_SOURCES: DataSource[] = [\"simulated\", \"live\"];\r\n\r\n/** The glyph of the Dev tools button. An app that folds the button into its account menu (`useHeaderFold`) draws the entry with this same glyph. */\r\nexport const DEV_TOOLS_ICON = \"wrench\" as const satisfies IconName;\r\n\r\nexport interface DevToolsPopoverProps {\r\n  /** Deep link to the dev-only Use Case Ledger. Omit and the row does not render. */\r\n  onOpenUseCaseLedger?: () => void;\r\n  /**\r\n   * Shows the Data source / Network speed / Regenerate demo data section —\r\n   * all three read and write THIS LIBRARY's OWN `src/lib/sim/` layer\r\n   * (`createSimStore`), which exists for the pitch-deck demo and has nothing\r\n   * to do with role-based access control. Defaults `true` so this package's\r\n   * own demo pages need no change. A consuming app with a real backend and no\r\n   * `createSimStore` usage of its own sets this `false` — otherwise the panel\r\n   * shows a \"Simulated ↔ Live\" toggle and a \"Regenerate demo data\" button\r\n   * that do nothing observable in that app, which reads as broken rather than\r\n   * inert. \"View as\" role impersonation (the RBAC feature this component\r\n   * exists to gate) and \"Reset to actual\" are unaffected either way — they\r\n   * have nothing to do with the sim layer.\r\n   */\r\n  showSimControls?: boolean;\r\n  /**\r\n   * Renders the trigger as a square wrench-only button with no \"Dev tools\"\r\n   * label, the same mode as `ThemeMenu.iconOnly` (whose doc explains why it is\r\n   * a mode and not a class). The accessible name stays\r\n   * `aria-label=\"Developer tools\"` either way.\r\n   */\r\n  iconOnly?: boolean;\r\n}\r\n\r\nexport function DevToolsPopover({\r\n  onOpenUseCaseLedger,\r\n  showSimControls = true,\r\n  iconOnly = false,\r\n}: DevToolsPopoverProps = {}) {\r\n  const strings = useUiStrings().devTools;\r\n  const { canAccessDevTools, isImpersonating } = useRBAC();\r\n\r\n  if (!canAccessDevTools) return null;\r\n\r\n  return (\r\n    <Popover\r\n      align=\"end\"\r\n      width=\"calc(20rem*var(--ui-scale))\"\r\n      trigger={\r\n        <Button\r\n          size=\"sm\"\r\n          variant={isImpersonating ? \"subtle\" : iconOnly ? \"ghost\" : \"outline\"}\r\n          iconOnly={iconOnly}\r\n          aria-label={strings.triggerLabel}\r\n        >\r\n          <Icon name={DEV_TOOLS_ICON} size=\"sm\" />\r\n          {!iconOnly && <span className=\"hidden sm:inline\">{strings.trigger}</span>}\r\n        </Button>\r\n      }\r\n    >\r\n      {/* DX-4086 — the design width lives on the popup (`width` below), which renders at\r\n          exactly that width capped by the clamp (Popover.tsx), so the panel just fills it. */}\r\n      <DevToolsPanel onOpenUseCaseLedger={onOpenUseCaseLedger} showSimControls={showSimControls} />\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport type DevToolsPanelProps = Pick<DevToolsPopoverProps, \"onOpenUseCaseLedger\" | \"showSimControls\">;\r\n\r\n/**\r\n * DX-5319 - the Dev tools popup's body on its own: view as a role, and the sim controls. `DevToolsPopover` draws it in its\r\n * popover; an app whose header folded the wrench into the account menu (`useHeaderFold`) draws this same panel in a `Dialog`.\r\n * It carries the SAME structural gate as the popover - nothing at all unless `canAccessDevTools` - so a folded entry cannot be\r\n * the way round it.\r\n */\r\nexport function DevToolsPanel({ onOpenUseCaseLedger, showSimControls = true }: DevToolsPanelProps = {}) {\r\n  const strings = useUiStrings().devTools;\r\n  const { canAccessDevTools, roles, viewingAsRoleId, setViewingAsRoleId, effectiveRole, isImpersonating } =\r\n    useRBAC();\r\n  const { networkSpeed, dataSource } = useSimSettings();\r\n  const [confirmingReset, setConfirmingReset] = useState(false);\r\n  const [resetting, setResetting] = useState(false);\r\n\r\n  if (!canAccessDevTools) return null;\r\n\r\n  return (\r\n    <div data-dev-tools-panel=\"\" className=\"flex w-full min-w-0 flex-col gap-4\">\r\n      <div className=\"flex flex-col gap-2\">\r\n        <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\r\n          {strings.viewAs}\r\n        </span>\r\n        <Select\r\n          aria-label={strings.viewAsLabel}\r\n          placeholder={strings.actualRole}\r\n          value={viewingAsRoleId}\r\n          onValueChange={(value) => setViewingAsRoleId((value as string | null) ?? null)}\r\n        >\r\n          {roles.map((role) => (\r\n            <SelectItem key={role.id} value={role.id}>\r\n              {role.label}\r\n            </SelectItem>\r\n          ))}\r\n        </Select>\r\n      </div>\r\n\r\n      {/* Clear, unmissable feedback while impersonating — this is the state\r\n          where it matters most that a person can tell WHY the app is\r\n          behaving differently than they expect. `role=\"status\"` announces\r\n          it the moment it appears, without stealing focus. */}\r\n      {isImpersonating && (\r\n        <div\r\n          role=\"status\"\r\n          className=\"flex items-start gap-2 rounded-md border border-warning-border bg-warning-subtle p-3\"\r\n        >\r\n          <Icon name=\"triangle-alert\" size=\"sm\" className=\"mt-px text-warning-text\" />\r\n          <p className=\"text-xs text-warning-text\">\r\n            {strings.viewingAs(effectiveRole?.label ?? strings.unknownRole, emphasis)}\r\n          </p>\r\n        </div>\r\n      )}\r\n\r\n      <Button\r\n        variant=\"outline\"\r\n        size=\"sm\"\r\n        disabled={!isImpersonating}\r\n        onClick={() => setViewingAsRoleId(null)}\r\n      >\r\n        <Icon name=\"rotate-ccw\" size=\"sm\" />\r\n        {strings.resetToActual}\r\n      </Button>\r\n\r\n      {showSimControls && (\r\n        <>\r\n          <div className=\"flex flex-col gap-2 border-t border-border-subtle pt-4\">\r\n            <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\r\n              {strings.dataSource}\r\n            </span>\r\n            <Select\r\n              aria-label={strings.dataSource}\r\n              value={dataSource}\r\n              onValueChange={(value) => setSimSettings({ dataSource: value as DataSource })}\r\n            >\r\n              {DATA_SOURCES.map((source) => (\r\n                <SelectItem key={source} value={source}>\r\n                  {strings.dataSources[source]}\r\n                </SelectItem>\r\n              ))}\r\n            </Select>\r\n            {dataSource === \"live\" && (\r\n              <p className=\"text-2xs text-tertiary\">\r\n                {strings.liveNotConfigured}\r\n              </p>\r\n            )}\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-2 border-t border-border-subtle pt-4\">\r\n            <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\r\n              {strings.networkSpeed}\r\n            </span>\r\n            <Select\r\n              aria-label={strings.networkSpeed}\r\n              value={networkSpeed}\r\n              onValueChange={(value) => setSimSettings({ networkSpeed: value as NetworkSpeed })}\r\n            >\r\n              {NETWORK_SPEEDS.map((speed) => (\r\n                <SelectItem key={speed} value={speed}>\r\n                  {strings.networkSpeeds[speed]}\r\n                </SelectItem>\r\n              ))}\r\n            </Select>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-2 border-t border-border-subtle pt-4\">\r\n            <AlertDialog\r\n              trigger={\r\n                <Button variant=\"outline\" size=\"sm\">\r\n                  <Icon name=\"refresh-cw\" size=\"sm\" />\r\n                  {strings.regenerate}\r\n                </Button>\r\n              }\r\n              open={confirmingReset}\r\n              onOpenChange={setConfirmingReset}\r\n              title={strings.regenerateTitle}\r\n              description={strings.regenerateDescription}\r\n              confirmLabel={strings.regenerateConfirm}\r\n              loading={resetting}\r\n              onConfirm={() => {\r\n                setResetting(true);\r\n                void resetSimStores(\"demo\").finally(() => {\r\n                  setResetting(false);\r\n                  setConfirmingReset(false);\r\n                });\r\n              }}\r\n            />\r\n          </div>\r\n        </>\r\n      )}\r\n\r\n      {onOpenUseCaseLedger && (\r\n        <div className=\"flex flex-col gap-2 border-t border-border-subtle pt-4\">\r\n          <Button variant=\"ghost\" size=\"sm\" onClick={onOpenUseCaseLedger}>\r\n            <Icon name=\"list-checks\" size=\"sm\" />\r\n            {strings.openLedger}\r\n          </Button>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["NETWORK_SPEEDS","DATA_SOURCES","DEV_TOOLS_ICON","DevToolsPopover","onOpenUseCaseLedger","showSimControls","iconOnly","strings","useUiStrings","canAccessDevTools","isImpersonating","useRBAC","jsx","Popover","jsxs","Button","Icon","DevToolsPanel","roles","viewingAsRoleId","setViewingAsRoleId","effectiveRole","networkSpeed","dataSource","useSimSettings","confirmingReset","setConfirmingReset","useState","resetting","setResetting","Select","value","role","SelectItem","emphasis","Fragment","setSimSettings","source","speed","AlertDialog","resetSimStores"],"mappings":"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"}

package/dist/components/rbac/EndedLine.js

@@ -0,0 +1,24 @@
+import { jsxs as e, jsx as a, Fragment as i } from "react/jsx-runtime";
+import { RelativeTime as r } from "../RelativeTime.js";
+function s({ ended: t }) {
+  return /* @__PURE__ */ e("span", { className: "text-xs text-tertiary", "data-testid": "ended-line", children: [
+    t.label,
+    " ",
+    /* @__PURE__ */ a(r, { at: t.at }),
+    t.after !== void 0 && `, ${t.after}`
+  ] });
+}
+function x({ idle: t }) {
+  return /* @__PURE__ */ e("span", { className: "text-xs text-tertiary", "data-testid": "idle-line", children: [
+    t.label,
+    t.at != null && /* @__PURE__ */ e(i, { children: [
+      " ",
+      /* @__PURE__ */ a(r, { at: t.at })
+    ] })
+  ] });
+}
+export {
+  s as EndedLine,
+  x as IdleLine
+};
+//# sourceMappingURL=EndedLine.js.map

package/dist/components/rbac/EndedLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndedLine.js","sources":["../../../src/components/rbac/EndedLine.tsx"],"sourcesContent":["import { RelativeTime } from \"../RelativeTime\";\r\n\r\n/** DX-5246: how a credential ended, in the consumer's own words (`label`, e.g. \"Revoked\") and when (`at`, an ISO instant). */\r\nexport interface EndedState {\r\n  label: string;\r\n  at: string;\r\n  /** What follows from it, in the consumer's own words (e.g. \"counts until Oct 24\"): shown after the time, after a comma. */\r\n  after?: string;\r\n}\r\n\r\n/** The muted \"<label> <time ago>[, <after>]\" line an ended session or key shows under its name (shared by `SessionsList` and `ApiKeysTable`). */\r\nexport function EndedLine({ ended }: { ended: EndedState }) {\r\n  return (\r\n    <span className=\"text-xs text-tertiary\" data-testid=\"ended-line\">\r\n      {ended.label} <RelativeTime at={ended.at} />\r\n      {ended.after !== undefined && `, ${ended.after}`}\r\n    </span>\r\n  );\r\n}\r\n\r\n/** DX-5246: a credential that still works but nobody is using: the consumer's own words (`label`, e.g. \"Idle, last used\") and, when known, the ISO instant it was last in use (`at`). */\r\nexport interface IdleState {\r\n  label: string;\r\n  /** ISO instant of its last use; `null`/omitted for one never used, which shows the label alone. */\r\n  at?: string | null;\r\n}\r\n\r\n/** The muted \"<label> <time ago>\" line an idle session or key shows under its name (shared by `SessionsList` and `ApiKeysTable`). Unlike an ended row it keeps every action. */\r\nexport function IdleLine({ idle }: { idle: IdleState }) {\r\n  return (\r\n    <span className=\"text-xs text-tertiary\" data-testid=\"idle-line\">\r\n      {idle.label}\r\n      {idle.at != null && (\r\n        <>\r\n          {\" \"}\r\n          <RelativeTime at={idle.at} />\r\n        </>\r\n      )}\r\n    </span>\r\n  );\r\n}\r\n"],"names":["EndedLine","ended","jsxs","jsx","RelativeTime","IdleLine","idle","Fragment"],"mappings":";;AAWO,SAASA,EAAU,EAAE,OAAAC,KAAgC;AAC1D,SACE,gBAAAC,EAAC,QAAA,EAAK,WAAU,yBAAwB,eAAY,cACjD,UAAA;AAAA,IAAAD,EAAM;AAAA,IAAM;AAAA,IAAC,gBAAAE,EAACC,GAAA,EAAa,IAAIH,EAAM,GAAA,CAAI;AAAA,IACzCA,EAAM,UAAU,UAAa,KAAKA,EAAM,KAAK;AAAA,EAAA,GAChD;AAEJ;AAUO,SAASI,EAAS,EAAE,MAAAC,KAA6B;AACtD,SACE,gBAAAJ,EAAC,QAAA,EAAK,WAAU,yBAAwB,eAAY,aACjD,UAAA;AAAA,IAAAI,EAAK;AAAA,IACLA,EAAK,MAAM,QACV,gBAAAJ,EAAAK,GAAA,EACG,UAAA;AAAA,MAAA;AAAA,MACD,gBAAAJ,EAACC,GAAA,EAAa,IAAIE,EAAK,GAAA,CAAI;AAAA,IAAA,EAAA,CAC7B;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/rbac/InvitationsList.js

@@ -0,0 +1,148 @@
+import { jsx as l, jsxs as g } from "react/jsx-runtime";
+import { AlertDialog as v } from "../Dialog.js";
+import { IconButton as m } from "../IconButton.js";
+import { Icon as c } from "../Icon.js";
+import { Badge as p } from "../Badge.js";
+import { TableEmptyState as b, DataTable as h, CellStack as k } from "../Table.js";
+import { RelativeTime as x } from "../RelativeTime.js";
+import { useUiStrings as f } from "../../lib/i18n/provider.js";
+const y = {
+  pending: "warning",
+  accepted: "success",
+  revoked: "danger",
+  expired: "neutral"
+};
+function S({
+  invitation: i,
+  busy: a,
+  onResend: t,
+  onRevoke: r,
+  onCopyLink: n
+}) {
+  const e = f().invitationsList;
+  return i.status === "pending" || i.status === "expired" ? /* @__PURE__ */ g("div", { className: "flex justify-end gap-1", children: [
+    n && /* @__PURE__ */ l(
+      m,
+      {
+        icon: /* @__PURE__ */ l(c, { name: "link", size: "sm" }),
+        label: e.copyLink(i.email),
+        size: "sm",
+        disabledReason: a ? e.working : void 0,
+        onClick: () => n(i.id)
+      }
+    ),
+    /* @__PURE__ */ l(
+      m,
+      {
+        icon: /* @__PURE__ */ l(c, { name: "refresh-cw", size: "sm" }),
+        label: e.resend(i.email),
+        size: "sm",
+        disabledReason: a ? e.working : void 0,
+        onClick: () => t(i.id)
+      }
+    ),
+    /* @__PURE__ */ l(
+      v,
+      {
+        trigger: /* @__PURE__ */ l(
+          m,
+          {
+            icon: /* @__PURE__ */ l(c, { name: "x", size: "sm" }),
+            label: e.revoke(i.email),
+            tone: "danger",
+            size: "sm",
+            disabledReason: a ? e.working : void 0
+          }
+        ),
+        title: e.revokeTitle(i.email),
+        description: e.revokeDescription,
+        confirmLabel: e.revokeConfirm,
+        destructive: !0,
+        loading: a,
+        onConfirm: () => r(i.id)
+      }
+    )
+  ] }) : null;
+}
+function N(i, a, t, r, n) {
+  return [
+    {
+      id: "invitee",
+      header: i.columnInvitee,
+      accessorFn: (e) => e.email,
+      cell: ({ row: e }) => /* @__PURE__ */ l(
+        k,
+        {
+          primary: e.original.email,
+          secondary: e.original.invitedByName ? i.invitedBy(e.original.invitedByName) : void 0
+        }
+      )
+    },
+    {
+      id: "role",
+      header: i.columnRole,
+      accessorFn: (e) => e.roleLabel,
+      cell: ({ row: e }) => /* @__PURE__ */ l("span", { className: "text-secondary", children: e.original.roleLabel })
+    },
+    {
+      id: "status",
+      header: i.columnStatus,
+      accessorFn: (e) => e.status,
+      // card AC #6 — a failed/suppressed send, or a later bounce/complaint
+      // notification, is shown on the invitation itself (not just a
+      // one-time toast at create/resend time) so an operator revisiting the
+      // list later still sees it and knows to Resend.
+      cell: ({ row: e }) => {
+        const { lastEmailStatus: o, lastEmailBounced: s, lastEmailComplained: d } = e.original, u = d ? i.complaint : s ? i.bounced : o === "failed" || o === "suppressed" ? i.deliveryFailed : null;
+        return /* @__PURE__ */ g("div", { className: "flex flex-wrap items-center gap-1", children: [
+          /* @__PURE__ */ l(p, { tone: y[e.original.status], dot: !0, children: i.status[e.original.status] }),
+          u && /* @__PURE__ */ l(p, { tone: "danger", children: u })
+        ] });
+      }
+    },
+    {
+      id: "sent",
+      header: i.columnSent,
+      accessorFn: (e) => e.createdAt,
+      cell: ({ row: e }) => /* @__PURE__ */ l("span", { className: "text-secondary", children: /* @__PURE__ */ l(x, { at: e.original.createdAt }) })
+    },
+    {
+      id: "actions",
+      header: "",
+      enableSorting: !1,
+      cell: ({ row: e }) => /* @__PURE__ */ l(
+        S,
+        {
+          invitation: e.original,
+          busy: a === e.original.id,
+          onResend: t,
+          onRevoke: r,
+          onCopyLink: n
+        }
+      )
+    }
+  ];
+}
+function R({
+  invitations: i,
+  onResend: a,
+  onRevoke: t,
+  onCopyLink: r,
+  busyId: n,
+  emptyState: e,
+  className: o
+}) {
+  const s = f().invitationsList, d = N(s, n, a, t, r);
+  return i.length === 0 ? e ?? /* @__PURE__ */ l(
+    b,
+    {
+      icon: /* @__PURE__ */ l(c, { name: "mail", size: "lg", className: "text-tertiary" }),
+      title: s.emptyTitle,
+      description: s.emptyDescription
+    }
+  ) : /* @__PURE__ */ l(h, { columns: d, data: i, className: o });
+}
+export {
+  R as InvitationsList
+};
+//# sourceMappingURL=InvitationsList.js.map

package/dist/components/rbac/InvitationsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvitationsList.js","sources":["../../../src/components/rbac/InvitationsList.tsx"],"sourcesContent":["import type { ColumnDef } from \"@tanstack/react-table\";\nimport { AlertDialog } from \"../Dialog\";\nimport { IconButton } from \"../IconButton\";\nimport { Icon } from \"../Icon\";\nimport { Badge } from \"../Badge\";\nimport { CellStack, DataTable, TableEmptyState } from \"../Table\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { UiStrings } from \"../../lib/i18n\";\n\n/* ----------------------------------------------------------------------------\n   INVITATIONS LIST\n\n   A team's pending/accepted/revoked/expired invitations — the sibling table\n   to `MembersPanel` (same `DataTable` primitive, same disabled/busy-row\n   shape), rendered alongside it on a members screen. PRESENTATIONAL ONLY:\n   every mutation (resend, revoke, copy the invite link) is a callback: the\n   list never fetches and knows nothing about HTTP or token shapes.\n\n   `status` is a CLOSED set the consumer computes and hands in (never derived\n   here — this library has no notion of \"expired\" without a clock, and no\n   business deciding what counts as one).\n   -------------------------------------------------------------------------- */\n\nexport type InvitationStatus = \"pending\" | \"accepted\" | \"revoked\" | \"expired\";\n\nexport interface InvitationsListItem {\n  id: string;\n  email: string;\n  roleLabel: string;\n  status: InvitationStatus;\n  createdAt: string;\n  invitedByName?: string;\n  /**\n   * The MOST RECENT send attempt's outcome for this invitation (create or a\n   * later resend), when the consumer's read surfaced one. `undefined` means\n   * the consumer's data source has no send-history correlation — the list\n   * renders no delivery indicator at all in that case (never assumed \"sent\"\n   * from absence). Omit `lastEmailBounced`/`lastEmailComplained` the same\n   * way when unknown, rather than defaulting to `false`.\n   */\n  lastEmailStatus?: \"sent\" | \"failed\" | \"suppressed\";\n  /** A LATER async bounce notification arrived for the most recent send. */\n  lastEmailBounced?: boolean;\n  /** A LATER async complaint notification arrived for the most recent send. */\n  lastEmailComplained?: boolean;\n}\n\nexport interface InvitationsListProps {\n  invitations: InvitationsListItem[];\n  onResend: (id: string) => void;\n  onRevoke: (id: string) => void;\n  /**\n   * Copies the invite link for manual sharing (card architecture: \"the admin\n   * UI can also copy the invite link\"). Omit to hide the copy control\n   * entirely — a consumer whose invite creation response never surfaced a raw\n   * token (e.g. a page reload after create) has nothing to copy.\n   */\n  onCopyLink?: (id: string) => void;\n  /** The id of a row currently mid-mutation (resend or revoke). */\n  busyId?: string | null;\n  emptyState?: React.ReactNode;\n  className?: string;\n}\n\nconst STATUS_TONE: Record<InvitationStatus, \"warning\" | \"success\" | \"danger\" | \"neutral\"> = {\n  pending: \"warning\",\n  accepted: \"success\",\n  revoked: \"danger\",\n  expired: \"neutral\",\n};\n\nfunction ActionsCell({\n  invitation,\n  busy,\n  onResend,\n  onRevoke,\n  onCopyLink,\n}: {\n  invitation: InvitationsListItem;\n  busy: boolean;\n  onResend: (id: string) => void;\n  onRevoke: (id: string) => void;\n  onCopyLink?: (id: string) => void;\n}) {\n  const strings = useUiStrings().invitationsList;\n  // Only a LIVE invitation (pending or expired-but-unrevoked, both resendable\n  // per the card's own DB contract) can be resent, revoked or copied — an\n  // accepted/revoked one is a historical row, actions-inert.\n  const live = invitation.status === \"pending\" || invitation.status === \"expired\";\n  if (!live) return null;\n\n  return (\n    <div className=\"flex justify-end gap-1\">\n      {onCopyLink && (\n        <IconButton\n          icon={<Icon name=\"link\" size=\"sm\" />}\n          label={strings.copyLink(invitation.email)}\n          size=\"sm\"\n          disabledReason={busy ? strings.working : undefined}\n          onClick={() => onCopyLink(invitation.id)}\n        />\n      )}\n      <IconButton\n        icon={<Icon name=\"refresh-cw\" size=\"sm\" />}\n        label={strings.resend(invitation.email)}\n        size=\"sm\"\n        disabledReason={busy ? strings.working : undefined}\n        onClick={() => onResend(invitation.id)}\n      />\n      <AlertDialog\n        trigger={\n          <IconButton\n            icon={<Icon name=\"x\" size=\"sm\" />}\n            label={strings.revoke(invitation.email)}\n            tone=\"danger\"\n            size=\"sm\"\n            disabledReason={busy ? strings.working : undefined}\n          />\n        }\n        title={strings.revokeTitle(invitation.email)}\n        description={strings.revokeDescription}\n        confirmLabel={strings.revokeConfirm}\n        destructive\n        loading={busy}\n        onConfirm={() => onRevoke(invitation.id)}\n      />\n    </div>\n  );\n}\n\nfunction buildColumns(\n  strings: UiStrings[\"invitationsList\"],\n  busyId: string | null | undefined,\n  onResend: (id: string) => void,\n  onRevoke: (id: string) => void,\n  onCopyLink: ((id: string) => void) | undefined,\n): ColumnDef<InvitationsListItem, unknown>[] {\n  return [\n    {\n      id: \"invitee\",\n      header: strings.columnInvitee,\n      accessorFn: (i) => i.email,\n      cell: ({ row }) => (\n        <CellStack\n          primary={row.original.email}\n          secondary={row.original.invitedByName ? strings.invitedBy(row.original.invitedByName) : undefined}\n        />\n      ),\n    },\n    {\n      id: \"role\",\n      header: strings.columnRole,\n      accessorFn: (i) => i.roleLabel,\n      cell: ({ row }) => <span className=\"text-secondary\">{row.original.roleLabel}</span>,\n    },\n    {\n      id: \"status\",\n      header: strings.columnStatus,\n      accessorFn: (i) => i.status,\n      // card AC #6 — a failed/suppressed send, or a later bounce/complaint\n      // notification, is shown on the invitation itself (not just a\n      // one-time toast at create/resend time) so an operator revisiting the\n      // list later still sees it and knows to Resend.\n      cell: ({ row }) => {\n        const { lastEmailStatus, lastEmailBounced, lastEmailComplained } = row.original;\n        const deliveryLabel = lastEmailComplained\n          ? strings.complaint\n          : lastEmailBounced\n            ? strings.bounced\n            : lastEmailStatus === \"failed\" || lastEmailStatus === \"suppressed\"\n              ? strings.deliveryFailed\n              : null;\n        return (\n          <div className=\"flex flex-wrap items-center gap-1\">\n            <Badge tone={STATUS_TONE[row.original.status]} dot>\n              {strings.status[row.original.status]}\n            </Badge>\n            {deliveryLabel && <Badge tone=\"danger\">{deliveryLabel}</Badge>}\n          </div>\n        );\n      },\n    },\n    {\n      id: \"sent\",\n      header: strings.columnSent,\n      accessorFn: (i) => i.createdAt,\n      cell: ({ row }) => <span className=\"text-secondary\"><RelativeTime at={row.original.createdAt} /></span>,\n    },\n    {\n      id: \"actions\",\n      header: \"\",\n      enableSorting: false,\n      cell: ({ row }) => (\n        <ActionsCell\n          invitation={row.original}\n          busy={busyId === row.original.id}\n          onResend={onResend}\n          onRevoke={onRevoke}\n          onCopyLink={onCopyLink}\n        />\n      ),\n    },\n  ];\n}\n\nexport function InvitationsList({\n  invitations,\n  onResend,\n  onRevoke,\n  onCopyLink,\n  busyId,\n  emptyState,\n  className,\n}: InvitationsListProps) {\n  const strings = useUiStrings().invitationsList;\n  const columns = buildColumns(strings, busyId, onResend, onRevoke, onCopyLink);\n\n  if (invitations.length === 0) {\n    return (\n      emptyState ?? (\n        <TableEmptyState\n          icon={<Icon name=\"mail\" size=\"lg\" className=\"text-tertiary\" />}\n          title={strings.emptyTitle}\n          description={strings.emptyDescription}\n        />\n      )\n    );\n  }\n\n  return <DataTable columns={columns} data={invitations} className={className} />;\n}\n"],"names":["STATUS_TONE","ActionsCell","invitation","busy","onResend","onRevoke","onCopyLink","strings","useUiStrings","jsxs","jsx","IconButton","Icon","AlertDialog","buildColumns","busyId","i","row","CellStack","lastEmailStatus","lastEmailBounced","lastEmailComplained","deliveryLabel","Badge","RelativeTime","InvitationsList","invitations","emptyState","className","columns","TableEmptyState","DataTable"],"mappings":"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"}

package/dist/components/rbac/InviteMembersDialog.js

@@ -0,0 +1,97 @@
+import { jsx as r, jsxs as p, Fragment as F } from "react/jsx-runtime";
+import { useState as d, useEffect as L } from "react";
+import { Badge as M } from "../Badge.js";
+import { Button as E } from "../Button.js";
+import { Callout as N } from "../Callout.js";
+import { Dialog as j } from "../Dialog.js";
+import { Field as y } from "../Field.js";
+import { Select as K, SelectItem as $ } from "../Select.js";
+import { useUiStrings as A } from "../../lib/i18n/provider.js";
+const w = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function R({
+  open: m,
+  onOpenChange: h,
+  assignableRoles: f,
+  loading: l = !1,
+  error: b,
+  onSubmit: k,
+  className: S
+}) {
+  const i = A().inviteMembersDialog, [t, n] = d([]), [a, s] = d(""), [u, v] = d(f[0]?.id ?? ""), [I, o] = d(void 0);
+  L(() => {
+    m && (n([]), s(""), o(void 0), v(f[0]?.id ?? ""));
+  }, [m]);
+  function g() {
+    const e = a.trim().replace(/,$/, "");
+    if (e !== "") {
+      if (!w.test(e)) {
+        o(i.invalidEmail(e));
+        return;
+      }
+      if (t.includes(e)) {
+        s(""), o(void 0);
+        return;
+      }
+      n([...t, e]), s(""), o(void 0);
+    }
+  }
+  function _(e) {
+    e.key === "Enter" || e.key === "," ? (e.preventDefault(), g()) : e.key === "Backspace" && a === "" && t.length > 0 && n(t.slice(0, -1));
+  }
+  const c = a.trim(), x = c !== "" && w.test(c) && !t.includes(c) ? [...t, c] : t, D = x.length > 0 && u !== "" && !l;
+  function B() {
+    D && k({ emails: x, roleId: u });
+  }
+  return /* @__PURE__ */ r(
+    j,
+    {
+      open: m,
+      onOpenChange: h,
+      title: i.title,
+      description: i.description,
+      className: S,
+      actions: /* @__PURE__ */ p(F, { children: [
+        /* @__PURE__ */ r(E, { variant: "outline", onClick: () => h(!1), disabled: l, children: i.cancel }),
+        /* @__PURE__ */ r(E, { onClick: B, disabled: !D, loading: l, children: i.send(t.length) })
+      ] }),
+      children: /* @__PURE__ */ p("div", { className: "flex flex-col gap-4", children: [
+        b && /* @__PURE__ */ r(N, { tone: "danger", title: b }),
+        /* @__PURE__ */ r(y, { label: i.emailsLabel, error: I, description: i.emailsDescription, children: /* @__PURE__ */ p("div", { className: "flex flex-wrap items-center gap-1.5 rounded-md border border-field-border bg-field p-1.5 focus-within:border-control focus-within:shadow-[0_0_0_3px_var(--control-focus-halo)]", children: [
+          t.map((e) => /* @__PURE__ */ r(
+            M,
+            {
+              tone: "accent",
+              dismiss: {
+                label: i.removeEmail(e),
+                onDismiss: () => n(t.filter((C) => C !== e))
+              },
+              children: e
+            },
+            e
+          )),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              type: "email",
+              value: a,
+              onChange: (e) => {
+                s(e.target.value), o(void 0);
+              },
+              onKeyDown: _,
+              onBlur: g,
+              placeholder: t.length === 0 ? i.emailPlaceholder : "",
+              disabled: l,
+              autoFocus: !0,
+              className: "min-w-32 flex-1 border-0 bg-transparent px-1 py-0.5 text-sm text-primary outline-none placeholder:text-field-placeholder"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ r(y, { label: i.roleLabel, children: /* @__PURE__ */ r(K, { value: u, onValueChange: (e) => v(e ?? ""), disabled: l, children: f.map((e) => /* @__PURE__ */ r($, { value: e.id, children: e.label }, e.id)) }) })
+      ] })
+    }
+  );
+}
+export {
+  R as InviteMembersDialog
+};
+//# sourceMappingURL=InviteMembersDialog.js.map

package/dist/components/rbac/InviteMembersDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteMembersDialog.js","sources":["../../../src/components/rbac/InviteMembersDialog.tsx"],"sourcesContent":["import { useEffect, useState, type KeyboardEvent } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Callout } from \"../Callout\";\nimport { Dialog } from \"../Dialog\";\nimport { Field } from \"../Field\";\nimport { Select, SelectItem } from \"../Select\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { Role } from \"./types\";\n\n/* ============================================================================\n   INVITE MEMBERS DIALOG\n\n   Multi-email chips + a single role, submitted together as one batch (the\n   card behind this: each email gets its own invitation, one send). PRESENTATIONAL\n   ONLY, local `useState` reset on open — same shape as `RoleEditorDialog`'s\n   own header describes.\n\n   The chip input is built from `Badge`'s own `dismiss` prop (\"a chip you can\n   take off\") rather than a new primitive — there is no dedicated tag/chip\n   input in this library yet, and one email address is exactly what a\n   dismissible badge already models.\n   ========================================================================= */\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nexport interface InviteMembersDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** The roles an invitee may be given — the role Select's options. */\n  assignableRoles: Role[];\n  /** Disables the form and shows a busy submit button while the invite request is in flight. */\n  loading?: boolean;\n  /**\n   * A server-side error surfaced after a failed submit (e.g. \"invite_exists\"\n   * for one address) — rendered as a `Callout`. The dialog has no notion of\n   * WHY a send failed; the consumer's own error copy goes here verbatim.\n   */\n  error?: string;\n  onSubmit: (input: { emails: string[]; roleId: string }) => void;\n  className?: string;\n}\n\nexport function InviteMembersDialog({\n  open,\n  onOpenChange,\n  assignableRoles,\n  loading = false,\n  error,\n  onSubmit,\n  className,\n}: InviteMembersDialogProps) {\n  const strings = useUiStrings().inviteMembersDialog;\n  const [emails, setEmails] = useState<string[]>([]);\n  const [draft, setDraft] = useState(\"\");\n  const [roleId, setRoleId] = useState<string>(assignableRoles[0]?.id ?? \"\");\n  const [draftError, setDraftError] = useState<string | undefined>(undefined);\n\n  useEffect(() => {\n    if (!open) return;\n    setEmails([]);\n    setDraft(\"\");\n    setDraftError(undefined);\n    setRoleId(assignableRoles[0]?.id ?? \"\");\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  function commitDraft(): void {\n    const value = draft.trim().replace(/,$/, \"\");\n    if (value === \"\") return;\n    if (!EMAIL_RE.test(value)) {\n      setDraftError(strings.invalidEmail(value));\n      return;\n    }\n    if (emails.includes(value)) {\n      setDraft(\"\");\n      setDraftError(undefined);\n      return;\n    }\n    setEmails([...emails, value]);\n    setDraft(\"\");\n    setDraftError(undefined);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>): void {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      commitDraft();\n    } else if (event.key === \"Backspace\" && draft === \"\" && emails.length > 0) {\n      setEmails(emails.slice(0, -1));\n    }\n  }\n\n  // A partially-typed valid address still in the draft field counts toward\n  // BOTH whether submit is enabled and what gets sent — a consumer hitting\n  // Submit without pressing Enter/comma on the LAST chip should not lose it\n  // or be blocked by a submit button that never noticed it was valid.\n  const pendingDraft = draft.trim();\n  const draftEmails =\n    pendingDraft !== \"\" && EMAIL_RE.test(pendingDraft) && !emails.includes(pendingDraft)\n      ? [...emails, pendingDraft]\n      : emails;\n  const canSubmit = draftEmails.length > 0 && roleId !== \"\" && !loading;\n\n  function handleSubmit(): void {\n    if (!canSubmit) return;\n    onSubmit({ emails: draftEmails, roleId });\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={onOpenChange}\n      title={strings.title}\n      description={strings.description}\n      className={className}\n      actions={\n        <>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={loading}>\n            {strings.cancel}\n          </Button>\n          <Button onClick={handleSubmit} disabled={!canSubmit} loading={loading}>\n            {strings.send(emails.length)}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"flex flex-col gap-4\">\n        {error && <Callout tone=\"danger\" title={error} />}\n        <Field label={strings.emailsLabel} error={draftError} description={strings.emailsDescription}>\n          <div className=\"flex flex-wrap items-center gap-1.5 rounded-md border border-field-border bg-field p-1.5 focus-within:border-control focus-within:shadow-[0_0_0_3px_var(--control-focus-halo)]\">\n            {emails.map((email) => (\n              <Badge\n                key={email}\n                tone=\"accent\"\n                dismiss={{\n                  label: strings.removeEmail(email),\n                  onDismiss: () => setEmails(emails.filter((e) => e !== email)),\n                }}\n              >\n                {email}\n              </Badge>\n            ))}\n            <input\n              type=\"email\"\n              value={draft}\n              onChange={(event) => {\n                setDraft(event.target.value);\n                setDraftError(undefined);\n              }}\n              onKeyDown={handleKeyDown}\n              onBlur={commitDraft}\n              placeholder={emails.length === 0 ? strings.emailPlaceholder : \"\"}\n              disabled={loading}\n              autoFocus\n              className=\"min-w-32 flex-1 border-0 bg-transparent px-1 py-0.5 text-sm text-primary outline-none placeholder:text-field-placeholder\"\n            />\n          </div>\n        </Field>\n        <Field label={strings.roleLabel}>\n          <Select value={roleId} onValueChange={(value) => setRoleId((value as string | null) ?? \"\")} disabled={loading}>\n            {assignableRoles.map((role) => (\n              <SelectItem key={role.id} value={role.id}>\n                {role.label}\n              </SelectItem>\n            ))}\n          </Select>\n        </Field>\n      </div>\n    </Dialog>\n  );\n}\n"],"names":["EMAIL_RE","InviteMembersDialog","open","onOpenChange","assignableRoles","loading","error","onSubmit","className","strings","useUiStrings","emails","setEmails","useState","draft","setDraft","roleId","setRoleId","draftError","setDraftError","useEffect","commitDraft","value","handleKeyDown","event","pendingDraft","draftEmails","canSubmit","handleSubmit","jsx","Dialog","jsxs","Fragment","Button","Callout","Field","email","Badge","e","Select","role","SelectItem"],"mappings":"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"}