@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/provenance/ProvenanceDisclosure.js

@@ -0,0 +1,111 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { Icon as N } from "../Icon.js";
+import { Popover as g } from "../Popover.js";
+import { cn as m } from "../../lib/cn.js";
+import { ProvenanceBadge as P } from "./ProvenanceBadge.js";
+import { ProvenanceDetail as k } from "./ProvenanceDetail.js";
+import { shownValue as D } from "./absence.js";
+import { useUiStrings as I } from "../../lib/i18n/provider.js";
+function B({
+  record: o,
+  actions: p,
+  emptyLabel: r,
+  redactedLabel: t,
+  ratingLabel: u,
+  triggerBadge: s = "word",
+  valueWrap: n = !1,
+  triggerContent: i,
+  valueContent: d,
+  stateContent: f,
+  onOpenChange: h,
+  className: b,
+  width: v = "30rem"
+}) {
+  const a = I(), x = D(o, { emptyLabel: r, redactedLabel: t }, a.provenanceAbsence), c = `provenance-${y()}`, w = /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      className: m(
+        "dx-tap group inline-flex max-w-full gap-1.5 rounded-sm text-left",
+        /* A wrapping value is several lines tall; centring the badge against
+           the block would float it beside the middle line. Aligned to the top
+           it sits on the first line, where the value starts. */
+        n ? "items-start" : "items-center",
+        /* The dotted rule is the affordance on a bare value. Custom content
+           brings its own edges, and a chip inside a second underline reads as
+           two controls. */
+        !i && "underline decoration-border-subtle decoration-dotted underline-offset-4 hover:decoration-accent-border",
+        "transition-colors duration-(--dur-fast)",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border",
+        b
+      ),
+      children: [
+        /* @__PURE__ */ l("span", { className: "sr-only", children: [
+          o.label,
+          ":"
+        ] }),
+        i ?? /* @__PURE__ */ e(
+          "span",
+          {
+            className: m(
+              "min-w-0 text-sm text-primary",
+              /* `truncate` sets `overflow-hidden` and `white-space: nowrap`
+                 together, so wrapping is not "drop truncate" — the wrap case
+                 names both halves explicitly, and `break-words` covers the
+                 single unbroken token that would otherwise push the column. */
+              n ? "whitespace-normal break-words" : "truncate"
+            ),
+            children: x
+          }
+        ),
+        s !== "none" && /* @__PURE__ */ e(
+          P,
+          {
+            state: o.state,
+            appearance: s === "icon" ? "icon" : "word",
+            className: "shrink-0"
+          }
+        ),
+        /* @__PURE__ */ e(
+          N,
+          {
+            name: "search",
+            size: "xs",
+            className: "shrink-0 text-tertiary opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-fast) group-hover:opacity-100"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: a.provenanceDisclosure.showWhereFrom })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    g,
+    {
+      trigger: w,
+      side: "bottom",
+      align: "start",
+      width: v,
+      className: "p-0",
+      onOpenChange: h,
+      "aria-labelledby": c,
+      children: /* @__PURE__ */ e(
+        k,
+        {
+          record: o,
+          actions: p,
+          emptyLabel: r,
+          redactedLabel: t,
+          ratingLabel: u,
+          valueContent: d,
+          stateContent: f,
+          titleId: c
+        }
+      )
+    }
+  );
+}
+export {
+  B as ProvenanceDisclosure
+};
+//# sourceMappingURL=ProvenanceDisclosure.js.map

package/dist/components/provenance/ProvenanceDisclosure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvenanceDisclosure.js","sources":["../../../src/components/provenance/ProvenanceDisclosure.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { ProvenanceBadge } from \"./ProvenanceBadge\";\nimport { ProvenanceDetail } from \"./ProvenanceDetail\";\nimport { shownValue } from \"./absence\";\nimport type { ProvenanceRecord } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ONE CLICK FROM A VALUE TO EVERYTHING BEHIND IT.\n\n   The value, where it came from, the exact text at that place, why the model\n   concluded it, the verdict of whatever check ran, what the call cost, and who\n   has signed or corrected it since.\n\n   THE RESTING STATE IS ALMOST SILENT, and that is the whole design. A page of\n   four hundred extracted values where every one wears a badge and a bar is a\n   page where nothing stands out — so a verified value renders as the value with\n   a hairline affordance, and only the exceptions carry weight. Somebody\n   scanning a page should see what is WRONG with it, not be asked to read four\n   hundred confirmations that things are fine.\n\n   A POPOVER, not a dialog. A dialog takes the whole screen for one field, which\n   is the wrong trade when the interesting thing is usually the row NEXT to the\n   one you opened. This is a surface people open, glance at, and close.\n\n   THIS COMPONENT IS THE TRIGGER AND THE POPOVER. The contents are\n   `ProvenanceDetail`, which it RENDERS rather than duplicates — see that file\n   for why the two were split and what the body owes nobody. A copy of the body\n   here would be a second vocabulary for the same record, drifting on the first\n   fix that only one caller reported. There is one, and it is imported.\n\n   The consumer-facing slots are passed straight through: `actions`,\n   `valueContent`, `emptyLabel` and `redactedLabel` are documented on\n   `ProvenanceDetailProps` and mean exactly the same thing here. What stays with\n   this component is everything about the TRIGGER, plus `onOpenChange`, which is\n   about the popover and could not be about anything else.\n\n   THE TRIGGER IS CONFIGURABLE; THE CONTROL IS NOT. `triggerBadge`, `valueWrap`\n   and `triggerContent` change what the trigger DRAWS. None of them hands over\n   the `<button>` itself, and that is deliberate — the accessible name, the\n   focus ring and the coarse-pointer tap target are the three things a consumer\n   loses first when a component lets its trigger be replaced wholesale, and they\n   are exactly the three this component exists to guarantee. See the note above\n   `triggerContent`.\n\n   THE PANEL IS THE OTHER WAY ROUND, and `valueContent` is where the two rules\n   part company. The trigger's slot must be presentational because it lives\n   inside a `<button>`; the panel's slot may be INTERACTIVE, because an editor\n   is an ordinary control in reading order and correcting a value in the surface\n   you opened to judge it is the whole point of opening it. A consumer that had\n   to put its editor in `actions` instead was left showing the value once at the\n   top and a form about some value at the bottom.\n\n   OPENING IS AN EVENT, AND IT HAD NO LISTENER. `onOpenChange` is the one thing\n   here that is not about drawing: it says WHEN the panel opened and when it\n   shut, and it is the only moment at which a consumer can afford to go and\n   fetch what the panel is about to show.\n\n   The component's own design is what creates the need. Ninety of these on one\n   screen is the intended density — the resting state is nearly silent\n   precisely so that many can sit side by side — and a panel's contents are\n   frequently the expensive part: the citation sources behind a value, the\n   pages a quote was drawn from, an audit trail. Fetching those on mount is\n   ninety requests to answer the one question somebody actually asks. Fetching\n   them never is a panel that opens onto a blank.\n\n   The first consumer to hit this had no third option, so it invented one: a\n   button INSIDE the panel whose whole job was to trigger the fetch. That\n   buried the real content two clicks deep and made the panel's first paint a\n   piece of scaffolding rather than the evidence. The moment it wanted was\n   always \"the panel opened\"; there was simply no way to be told.\n\n   THE SIGNAL IS THIS COMPONENT'S, NOT THE BODY'S, and the split is what makes\n   that obvious. A consumer rendering `ProvenanceDetail` inline has no opening\n   to hear about and needs none: the body is on screen from mount, so the fetch\n   is the mount. `onOpenChange` exists because a POPOVER defers the moment, and\n   it stays here with the popover.\n\n   OBSERVED, NOT CONTROLLED. There is deliberately no `open` prop beside it.\n   Base UI still owns the state — dismissal, focus return, escape, the outside\n   click — and taking it over would make a consumer responsible for all four to\n   get a fetch. `onOpenChange` is a wire out, not a wire in, which is also why\n   it is safe to add to a component whose panel already works.\n\n   IT IS SILENT ON MOUNT, and that is the whole point rather than a detail. A\n   callback that fired once per mounted disclosure would return the consumer to\n   ninety requests with extra steps, so it fires only on a CHANGE — a closed\n   panel that nobody has touched emits nothing, ever. Pinned by test.\n   -------------------------------------------------------------------------- */\n\n/** How much of the verification state the trigger draws. */\nexport type ProvenanceTriggerBadge = \"icon\" | \"word\" | \"none\";\n\nexport interface ProvenanceDisclosureProps {\n  record: ProvenanceRecord;\n  /** Rendered at the foot of the panel. {@link ProvenanceDetailProps.actions} */\n  actions?: ReactNode;\n  /** Shown in place of the value when there is none and it did not fail. Absent means the provider's own words. */\n  emptyLabel?: string;\n  /** Shown in place of the value when the viewer may not see it. */\n  redactedLabel?: string;\n  /** Your word for what a discrete rating is OF. {@link ProvenanceDetailProps.ratingLabel} */\n  ratingLabel?: string;\n  /**\n   * How the state reads ON THE TRIGGER. The panel always shows icon + word.\n   *\n   * - `\"word\"` (default) — today's behaviour exactly, quiet rule included: the\n   *   exceptions wear a worded badge and `verified` wears nothing.\n   * - `\"icon\"` — the glyph alone, in the same coloured box, for ALL FOUR states\n   *   including `verified`. A dense table of values wants a legend, not four\n   *   hundred sentences; the word is still announced (see below).\n   * - `\"none\"` — no badge at all, for a consumer drawing the state itself in an\n   *   adjacent column. The state then leaves the accessible name too, because\n   *   the name says what the trigger says and nothing more.\n   */\n  triggerBadge?: ProvenanceTriggerBadge;\n  /**\n   * Let a long value wrap onto more lines instead of truncating.\n   *\n   * Off by default because the component's home is a dense table where a\n   * ragged row height is worse than an ellipsis. On by default would be wrong;\n   * unavailable was also wrong — a value clipped at `No — typed notes only, at\n   * gu…` in a 900px column is not a value, and there was no way in.\n   */\n  valueWrap?: boolean;\n  /**\n   * Draw something else in place of the value — an id chip, an avatar, a\n   * sparkline — and anchor the panel to THAT.\n   *\n   * NOT a whole-trigger slot, and the difference matters. This node becomes the\n   * CONTENT of the disclosure's own button; the button, its focus ring, its tap\n   * target and its accessible name stay with the component. A prop that took\n   * the control itself would hand a consumer all four obligations at once, and\n   * the observed result of consumers owning this one is a chip that announces a\n   * bare id (\"FM-002\") with no field, no value and no state — which is the\n   * exact defect this library has now shipped three times.\n   *\n   * Pass presentational markup. An interactive element here nests a control\n   * inside a control, which is invalid and unfocusable.\n   *\n   * The field, the state and the \"show where this came from\" affordance are\n   * still composed around it, so the announced name is the same as any other\n   * disclosure's. The dotted underline is dropped — a chip carries its own\n   * edges and does not want a second one.\n   */\n  triggerContent?: ReactNode;\n  /**\n   * Draw the PANEL HEADER'S VALUE yourself — an editor, most usefully.\n   * {@link ProvenanceDetailProps.valueContent}\n   *\n   * It does not touch the trigger — the value on the page is still drawn from\n   * `record`, still truncated or wrapped per `valueWrap`, still announced as\n   * part of the trigger's own name. The closed page does not change because a\n   * consumer supplied this.\n   */\n  valueContent?: ReactNode;\n  /**\n   * Draw the PANEL HEADER'S top-right corner yourself, in place of the\n   * built-in `ProvenanceBadge`. {@link ProvenanceDetailProps.stateContent}\n   *\n   * Like `valueContent`, this reaches only the panel — the trigger's own\n   * `triggerBadge` is a separate, independent choice about what the CLOSED\n   * page shows, and passing this does not change it or the trigger's\n   * accessible name (see \"THE NAME IS COMPUTED FROM THE CONTENT\" above).\n   */\n  stateContent?: ReactNode;\n  /**\n   * Called with `true` when the panel opens and `false` when it closes.\n   *\n   * The signature `Collapsible`, `Dialog`, `Menu` and `Popover` all use, for\n   * the reason a fourth spelling would be worse than a familiar one: a\n   * consumer already knows what `onOpenChange` does everywhere else here.\n   *\n   * Purely an observation. The popover stays uncontrolled, so this does not\n   * make the caller responsible for closing it, for returning focus, or for\n   * escape — pass the callback and nothing else about the component moves.\n   *\n   * The reason it exists is the fetch: a value's citations, its source pages,\n   * its audit trail are usually a request, and this is the only moment at\n   * which a consumer knows that request is now worth making. It does NOT fire\n   * on mount — see the note at the top of this file for why that is the load-\n   * bearing half of the guarantee, not a footnote to it.\n   */\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  /**\n   * Override the panel's design width. See the `width` note at the `<Popover>`\n   * call site below for what 30rem was arithmetic on and why going wider used\n   * to read as a mistake — this exists because a real consumer's content\n   * (a dense multi-column table, not prose) outgrew that arithmetic. Unset,\n   * the panel keeps the library default of `30rem`, still clamped to\n   * `Popover`'s own viewport ceiling either way.\n   */\n  width?: string;\n}\n\nexport function ProvenanceDisclosure({\n  record,\n  actions,\n  emptyLabel,\n  redactedLabel,\n  ratingLabel,\n  triggerBadge = \"word\",\n  valueWrap = false,\n  triggerContent,\n  valueContent,\n  stateContent,\n  onOpenChange,\n  className,\n  width = \"30rem\",\n}: ProvenanceDisclosureProps) {\n  /* What the trigger reads — the value, or the absence standing in for it. The\n     SAME function the body calls for its own header, so the two can never\n     disagree about whether a record is withheld, empty or disproved. */\n  const strings = useUiStrings();\n  const shown = shownValue(record, { emptyLabel, redactedLabel }, strings.provenanceAbsence);\n\n  /* THE NAME IS COMPUTED FROM THE CONTENT, AND THERE IS NO `aria-label`.\n\n     `aria-label` REPLACES a control's content rather than extending it, and\n     this library has shipped that defect three times: forty-eight disclosure\n     triggers announcing field names and no values, a refusal folded into a\n     control's name and lost, a fact chip announcing a bare id. The first\n     version of THIS component was the first of those three.\n\n     Composing a string is what keeps reintroducing it, because the string and\n     the markup are written in two places and only one of them gets updated —\n     an icon-only badge, a `ReactNode` value, a consumer's own trigger content:\n     each is a fresh chance for the name to drift away from what is on screen.\n\n     So the name is not composed at all. The field and the affordance are\n     rendered as visually-hidden text INSIDE the button, in reading order, and\n     the browser computes the name from the button's own subtree. Whatever is\n     drawn is announced, necessarily — a `ReactNode` value that used to fall\n     back to the field name alone now announces its own text, and the state\n     word is carried by the badge (as its label under `\"word\"`, as `sr-only`\n     text under `\"icon\"`) so BOTH APPEARANCES PRODUCE THE SAME NAME.\n\n     `\"none\"` draws no badge and so announces no state: the name says exactly\n     what the trigger says. That is also why the default is unchanged — under\n     `\"word\"` a verified record still renders no badge, so its name is the\n     `{label}: {value} — show where this came from` it has always been. */\n  const titleId = `provenance-${useId()}`;\n\n  const trigger = (\n    <button\n      type=\"button\"\n      className={cn(\n        \"dx-tap group inline-flex max-w-full gap-1.5 rounded-sm text-left\",\n        /* A wrapping value is several lines tall; centring the badge against\n           the block would float it beside the middle line. Aligned to the top\n           it sits on the first line, where the value starts. */\n        valueWrap ? \"items-start\" : \"items-center\",\n        /* The dotted rule is the affordance on a bare value. Custom content\n           brings its own edges, and a chip inside a second underline reads as\n           two controls. */\n        !triggerContent &&\n          \"underline decoration-border-subtle decoration-dotted underline-offset-4 hover:decoration-accent-border\",\n        \"transition-colors duration-(--dur-fast)\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-border\",\n        className,\n      )}\n    >\n      {/* THE FIELD, first and in reading order. Visually hidden because the\n          consumer's own table already has a column header saying it; announced\n          because a screen-reader user has no column header to look up at. */}\n      <span className=\"sr-only\">{record.label}:</span>\n      {triggerContent ?? (\n        <span\n          className={cn(\n            \"min-w-0 text-sm text-primary\",\n            /* `truncate` sets `overflow-hidden` and `white-space: nowrap`\n               together, so wrapping is not \"drop truncate\" — the wrap case\n               names both halves explicitly, and `break-words` covers the\n               single unbroken token that would otherwise push the column. */\n            valueWrap ? \"whitespace-normal break-words\" : \"truncate\",\n          )}\n        >\n          {shown}\n        </span>\n      )}\n      {triggerBadge !== \"none\" && (\n        <ProvenanceBadge\n          state={record.state}\n          appearance={triggerBadge === \"icon\" ? \"icon\" : \"word\"}\n          className=\"shrink-0\"\n        />\n      )}\n      <Icon\n        name=\"search\"\n        size=\"xs\"\n        /* `transition-[…]` REPLACES the global colour transition rather than\n           extending it, so naming only `opacity` here left this icon as the one\n           element on the row that cut between themes instead of fading with\n           everything around it. Caught by `audit:motion`, which was not run when\n           this shipped. */\n        className=\"shrink-0 text-tertiary opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-fast) group-hover:opacity-100\"\n      />\n      <span className=\"sr-only\">{strings.provenanceDisclosure.showWhereFrom}</span>\n    </button>\n  );\n\n  return (\n    <Popover\n      trigger={trigger}\n      side=\"bottom\"\n      align=\"start\"\n      /* 480px, and the number is arithmetic on the contents rather than a\n         preference.\n\n         IT IS A `width` PROP RATHER THAN A `w-…`/`max-w-…` IN `className`, and\n         that is not a style choice. `className` is merged LAST by `twMerge`, so\n         a max-width passed there replaces the one `Popover` sets — and the one\n         `Popover` sets is now the clamp that keeps the panel on screen. The\n         prop writes `--dx-popover-w`, which sits INSIDE that clamp: the design\n         size is still 480px and it still cannot render wider than 90vw or than\n         the room the positioner found beside the anchor.\n\n         WHAT THE PANEL CARRIES. A source is no longer a line and a quote.\n         It is a document title over a STACK of cited pages, each setting a\n         thumbnail beside citation text that wraps. The horizontal budget is\n         spent before the text starts: `p-4` takes 32px of the panel, and a\n         thumbnail with its gap takes roughly 76 more. Whatever survives that\n         is the measure the citation is actually read at — and at `w-96` it was\n         about 276px, near forty characters, which sets a quotation as a column\n         of broken phrases. At 480px the same subtraction leaves about 372px,\n         sixty-odd characters, inside the 45–75 band prose stays legible in.\n\n         AND WHY NOT WIDER, BY DEFAULT. At the DEFAULT this is a popover\n         hanging off one cell of a dense table — past roughly a third of a\n         laptop's width it stops reading as a detail attached to a value and\n         starts reading as a panel that happens to be floating near one, and\n         `align=\"start\"` can no longer place it beside its anchor without the\n         collision logic dragging it back off the row it belongs to. That is\n         an argument for the DEFAULT staying narrow, not for the width being\n         fixed — a caller whose panel content is not prose beside a table row\n         (a dense multi-column layout with its own reason to spread out) can\n         override it via the `width` prop above, still clamped to `Popover`'s\n         own viewport ceiling either way.\n\n         THE SMALL-VIEWPORT GUARD USED TO LIVE HERE, as `max-w-[92vw]`: 384px\n         already fit a 375px phone, 480px does not, so on that viewport the cap\n         — not the width — was what rendered. It is gone rather than kept\n         beside the new one. `Popover` now clamps every panel to the smaller of\n         its design size, 90vw/80vh, and `--available-*`, so a second local cap\n         would only ever be the looser of the two and would read as the rule\n         while the primitive did the work. */\n      width={width}\n      className=\"p-0\"\n      onOpenChange={onOpenChange}\n      /* The popup takes `role=\"dialog\"`, and an unlabelled dialog announces\n         itself as nothing. The body puts this id on its own heading. */\n      aria-labelledby={titleId}\n    >\n      {/* THE PANEL SCROLLS ITSELF NOW, one element above this one. The cap and\n          the overflow used to be here — `max-h-[80vh] overflow-y-auto` — and\n          moving them into `Popover` is the whole point of that change: 80% of\n          the VIEWPORT is the wrong bound for a panel that is hanging off the\n          TOP of it, and a panel already off screen cannot be scrolled back by\n          a scroller living inside it. Keeping this one as well would nest two\n          scrollers around the same content, the outer one capped against the\n          wrong thing — which is the miss, re-introduced one level down. */}\n      <ProvenanceDetail\n        record={record}\n        actions={actions}\n        emptyLabel={emptyLabel}\n        redactedLabel={redactedLabel}\n        ratingLabel={ratingLabel}\n        valueContent={valueContent}\n        stateContent={stateContent}\n        titleId={titleId}\n      />\n    </Popover>\n  );\n}\n"],"names":["ProvenanceDisclosure","record","actions","emptyLabel","redactedLabel","ratingLabel","triggerBadge","valueWrap","triggerContent","valueContent","stateContent","onOpenChange","className","width","strings","useUiStrings","shown","shownValue","titleId","useId","trigger","jsxs","cn","jsx","ProvenanceBadge","Icon","Popover","ProvenanceDetail"],"mappings":";;;;;;;;;AAuMO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AACV,GAA8B;AAI5B,QAAMC,IAAUC,EAAA,GACVC,IAAQC,EAAWhB,GAAQ,EAAE,YAAAE,GAAY,eAAAC,EAAA,GAAiBU,EAAQ,iBAAiB,GA2BnFI,IAAU,cAAcC,EAAA,CAAO,IAE/BC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA;AAAA;AAAA;AAAA,QAIAf,IAAY,gBAAgB;AAAA;AAAA;AAAA;AAAA,QAI5B,CAACC,KACC;AAAA,QACF;AAAA,QACA;AAAA,QACAI;AAAA,MAAA;AAAA,MAMF,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA;AAAA,UAAApB,EAAO;AAAA,UAAM;AAAA,QAAA,GAAC;AAAA,QACxCO,KACC,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA;AAAA;AAAA;AAAA;AAAA,cAKAf,IAAY,kCAAkC;AAAA,YAAA;AAAA,YAG/C,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJV,MAAiB,UAChB,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAOvB,EAAO;AAAA,YACd,YAAYK,MAAiB,SAAS,SAAS;AAAA,YAC/C,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAiB;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YAML,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEX,QAAA,EAAK,WAAU,WAAW,UAAAX,EAAQ,qBAAqB,cAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E,SACE,gBAAAS;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,SAAAN;AAAA,MACA,MAAK;AAAA,MACL,OAAM;AAAA,MAyCN,OAAAP;AAAA,MACA,WAAU;AAAA,MACV,cAAAF;AAAA,MAGA,mBAAiBO;AAAA,MAUjB,UAAA,gBAAAK;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,QAAA1B;AAAA,UACA,SAAAC;AAAA,UACA,YAAAC;AAAA,UACA,eAAAC;AAAA,UACA,aAAAC;AAAA,UACA,cAAAI;AAAA,UACA,cAAAC;AAAA,UACA,SAAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/provenance/absence.js

@@ -0,0 +1,31 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { Icon as s } from "../Icon.js";
+import { cn as d } from "../../lib/cn.js";
+const u = {
+  redacted: { icon: "eye-off", className: "italic text-tertiary" },
+  empty: { icon: "minus", className: "italic text-tertiary" },
+  failed: { icon: "triangle-alert", className: "text-danger-text" }
+};
+function r({ kind: e, children: i }) {
+  const t = u[e];
+  return /* @__PURE__ */ c("span", { "data-absence": e, className: d("inline-flex items-center gap-1.5", t.className), children: [
+    /* @__PURE__ */ n(s, { name: t.icon, size: "xs" }),
+    i
+  ] });
+}
+function l(e) {
+  return e.redacted === !0;
+}
+function o(e) {
+  return !l(e) && e.state === "failed";
+}
+function p(e, { emptyLabel: i, redactedLabel: t }, a) {
+  return l(e) ? /* @__PURE__ */ n(r, { kind: "redacted", children: t ?? a.redacted }) : o(e) ? /* @__PURE__ */ n(r, { kind: "failed", children: a.heldNull }) : e.value === null ? /* @__PURE__ */ n(r, { kind: "empty", children: i ?? a.noValue }) : e.value;
+}
+export {
+  r as Absence,
+  o as isFailed,
+  l as isRedacted,
+  p as shownValue
+};
+//# sourceMappingURL=absence.js.map

package/dist/components/provenance/absence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"absence.js","sources":["../../../src/components/provenance/absence.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon, type IconName } from \"../Icon\";\nimport { cn } from \"../../lib/cn\";\nimport type { UiStrings } from \"../../lib/i18n\";\nimport type { ProvenanceRecord } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   THE THREE ABSENCES, AND WHY THEY EACH GET A SHAPE.\n\n   Withheld from you, never extracted, and extracted-then-disproved call for\n   completely different next actions: ask for a grant, go and extract it, go and\n   look at why the check failed. Rendering all three as an empty cell would make\n   them indistinguishable — and once the state badge can be a bare glyph, an\n   icon-only treatment is the easiest possible way to collapse them back onto\n   one mark.\n\n   So each carries BOTH a word and a distinct SHAPE: a struck-through eye, a\n   bare dash, a triangle. Not three colours — two of the three are deliberately\n   the same tertiary grey, so nothing here can be told apart by hue and a reader\n   with a colour deficiency loses nothing.\n\n   None of the three is a circle, which is what every state badge glyph is\n   (`circle-check`, `shield-check`, `circle-dashed`, `circle-x`) — so the mark\n   that says WHAT IS MISSING never reads as the mark that says HOW IT WAS\n   CHECKED, even when they sit beside each other on a failed record.\n\n   WHY THIS SITS IN ITS OWN FILE. The trigger and the body are two components\n   now — `ProvenanceDisclosure` draws the value on the page, `ProvenanceDetail`\n   draws it again at the head of the panel — and BOTH have to spell an absence\n   the same way. A second copy in either file is a second vocabulary waiting to\n   drift, which is the exact failure the three shapes exist to prevent. It is\n   deliberately NOT re-exported from `./index`: it is shared implementation, not\n   API.\n   -------------------------------------------------------------------------- */\nconst ABSENCE: Record<\"redacted\" | \"empty\" | \"failed\", { icon: IconName; className: string }> = {\n  redacted: { icon: \"eye-off\", className: \"italic text-tertiary\" },\n  empty: { icon: \"minus\", className: \"italic text-tertiary\" },\n  failed: { icon: \"triangle-alert\", className: \"text-danger-text\" },\n};\n\nexport function Absence({ kind, children }: { kind: keyof typeof ABSENCE; children: ReactNode }) {\n  const detail = ABSENCE[kind];\n  return (\n    <span data-absence={kind} className={cn(\"inline-flex items-center gap-1.5\", detail.className)}>\n      <Icon name={detail.icon} size=\"xs\" />\n      {children}\n    </span>\n  );\n}\n\n/** Whether the record is withheld from this viewer. The first gate, everywhere. */\nexport function isRedacted(record: ProvenanceRecord): boolean {\n  return record.redacted === true;\n}\n\n/**\n * Whether the record's own check disproved it.\n *\n * Precedence matters and is asserted: a record that is BOTH withheld and failed\n * reads as withheld, because that is the fact about this viewer. The failure is\n * still true, but it is not theirs to act on — and showing them a failure reason\n * drawn from a value they may not see is the leak the panel is supposed to\n * close.\n */\nexport function isFailed(record: ProvenanceRecord): boolean {\n  return !isRedacted(record) && record.state === \"failed\";\n}\n\n/**\n * What a reader is shown IN PLACE OF the value — or the value itself.\n *\n * Each of the three absences says which one it is: withheld from you, never\n * extracted, or extracted and disproved. Rendering all three as an empty cell\n * would make them indistinguishable, and they call for completely different\n * next actions.\n */\nexport function shownValue(\n  record: ProvenanceRecord,\n  { emptyLabel, redactedLabel }: { emptyLabel?: string; redactedLabel?: string },\n  absence: UiStrings[\"provenanceAbsence\"],\n): ReactNode {\n  if (isRedacted(record)) return <Absence kind=\"redacted\">{redactedLabel ?? absence.redacted}</Absence>;\n  if (isFailed(record)) return <Absence kind=\"failed\">{absence.heldNull}</Absence>;\n  /* Only null. An extracted empty string IS a value — coercing it to \"No value\"\n     is the component collapsing an absence it was built to keep apart, one\n     level down. */\n  if (record.value === null) return <Absence kind=\"empty\">{emptyLabel ?? absence.noValue}</Absence>;\n  return record.value;\n}\n"],"names":["ABSENCE","Absence","kind","children","detail","jsxs","cn","jsx","Icon","isRedacted","record","isFailed","shownValue","emptyLabel","redactedLabel","absence"],"mappings":";;;AAkCA,MAAMA,IAA0F;AAAA,EAC9F,UAAU,EAAE,MAAM,WAAW,WAAW,uBAAA;AAAA,EACxC,OAAO,EAAE,MAAM,SAAS,WAAW,uBAAA;AAAA,EACnC,QAAQ,EAAE,MAAM,kBAAkB,WAAW,mBAAA;AAC/C;AAEO,SAASC,EAAQ,EAAE,MAAAC,GAAM,UAAAC,KAAiE;AAC/F,QAAMC,IAASJ,EAAQE,CAAI;AAC3B,SACE,gBAAAG,EAAC,UAAK,gBAAcH,GAAM,WAAWI,EAAG,oCAAoCF,EAAO,SAAS,GAC1F,UAAA;AAAA,IAAA,gBAAAG,EAACC,GAAA,EAAK,MAAMJ,EAAO,MAAM,MAAK,MAAK;AAAA,IAClCD;AAAA,EAAA,GACH;AAEJ;AAGO,SAASM,EAAWC,GAAmC;AAC5D,SAAOA,EAAO,aAAa;AAC7B;AAWO,SAASC,EAASD,GAAmC;AAC1D,SAAO,CAACD,EAAWC,CAAM,KAAKA,EAAO,UAAU;AACjD;AAUO,SAASE,EACdF,GACA,EAAE,YAAAG,GAAY,eAAAC,EAAA,GACdC,GACW;AACX,SAAIN,EAAWC,CAAM,IAAU,gBAAAH,EAACN,KAAQ,MAAK,YAAY,UAAAa,KAAiBC,EAAQ,SAAA,CAAS,IACvFJ,EAASD,CAAM,sBAAWT,GAAA,EAAQ,MAAK,UAAU,UAAAc,EAAQ,SAAA,CAAS,IAIlEL,EAAO,UAAU,OAAa,gBAAAH,EAACN,KAAQ,MAAK,SAAS,UAAAY,KAAcE,EAAQ,QAAA,CAAQ,IAChFL,EAAO;AAChB;"}

package/dist/components/provenance/types.js

@@ -0,0 +1,30 @@
+import { devWarn as e } from "../../lib/dev-warn.js";
+function t(n) {
+  return (!Number.isFinite(n) || n < 0 || n > 1) && e(
+    "confidenceScore",
+    `received ${String(n)}, which is not a 0–1 score. If this is a rating on a small integer scale (say 4 out of 5), use ratedConfidence(rating, scale) — dividing it down into 0–1 makes it render as a percentage the scale cannot produce.`
+  ), Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : 0;
+}
+function o(n) {
+  return { kind: "score", score: t(n) };
+}
+function a(n, i) {
+  return !Number.isFinite(n) || !Number.isFinite(i) || i < 1 ? (e(
+    "ratedConfidence",
+    `received ${String(n)} out of ${String(i)}, which is not a rating on a whole scale. Pass null instead of a rating you do not have — a bar at zero and a bar with nothing to show look identical and mean opposite things.`
+  ), { kind: "rating", rating: 0, scale: 0 }) : {
+    kind: "rating",
+    rating: Math.round(Math.max(0, Math.min(i, n))),
+    scale: Math.round(i)
+  };
+}
+function d(n) {
+  return n >= 0.9 ? "high" : n >= 0.7 ? "moderate" : "low";
+}
+export {
+  d as confidenceBand,
+  t as confidenceScore,
+  a as ratedConfidence,
+  o as scoredConfidence
+};
+//# sourceMappingURL=types.js.map

package/dist/components/provenance/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/provenance/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { devWarn } from \"../../lib/dev-warn\";\n\n/* ============================================================================\n   PROVENANCE — an extracted value, and everything needed to defend it.\n\n   ANY product that surfaces a machine-extracted value needs this shape: the\n   value, where it came from, the exact text at that place, why the model\n   concluded it, whether a check confirmed it, what the call cost, and whether a\n   person has since signed or corrected it. The vocabulary here is deliberately\n   domain-free — `source.label` is a document to one consumer, a URL to another,\n   a row id to a third — because the consumer's own words belong in the\n   consumer's own mapping layer, not in this library.\n\n   The one opinion the library does hold: NULL IS A RENDERED STATE. A value that\n   failed its check comes through as `value: null` with `state: \"failed\"`, and\n   renders as a marked failure carrying its reason — never as an empty cell, and\n   never as a plausible-looking value. A component that quietly drew nothing for\n   a failure would make the failure invisible, which is the one outcome a\n   provenance surface exists to prevent.\n   ========================================================================= */\n\nexport type ProvenanceState =\n  /** Machine-extracted, and the check passed. */\n  | \"verified\"\n  /** A person signed it — on top of the machine's verdict, never instead. */\n  | \"human\"\n  /** Extracted, but nothing confirmed it. The value stands, flagged. */\n  | \"unverified\"\n  /** The check actively failed. There is no value. */\n  | \"failed\";\n\n/** Where a value came from, precisely enough to go and look. */\nexport interface ProvenanceSource {\n  /** The thing it came from — a document title, a URL, a table name. */\n  label: string;\n  /** Where inside it: \"page 4\", \"line 82\", \"§3.1\". Null when there is no locus. */\n  locus: string | null;\n  /** The exact text at that locus. */\n  quote: string | null;\n}\n\n/**\n * The verdict of whatever check the consumer ran.\n *\n * `passed` is a tri-state on purpose: `true`, `false`, and `null` for \"no check\n * was run\" — which is a different claim from \"a check ran and failed\", and\n * collapsing the two would let an unchecked value read as a passing one.\n */\nexport interface ProvenanceCheck {\n  passed: boolean | null;\n  /** How it was checked, or why it could not be. */\n  detail: string;\n}\n\n/** The model call that produced the value. */\nexport interface ProvenanceCall {\n  model: string;\n  tokensIn: number;\n  tokensOut: number;\n  latencyMs: number;\n}\n\n/** A person's signature over the value. */\nexport interface ProvenanceSignoff {\n  by: string;\n  at: string;\n  note: string | null;\n  /**\n   * What the value was before they changed it.\n   *\n   * Null when they signed without correcting. Present means the value was\n   * replaced — and the original is kept, because a correction whose previous\n   * value is gone is an assertion rather than a record.\n   */\n  replaced: string | null;\n}\n\nexport interface ProvenanceRecord {\n  /** What this value IS. Always shown, even when the value is hidden. */\n  label: string;\n  /** Null when it failed, or when the viewer may not see it. */\n  value: ReactNode | null;\n  state: ProvenanceState;\n  /**\n   * How sure the author was, on whichever scale they said it — `scoredConfidence`\n   * for a continuous 0–1 figure, `ratedConfidence` for \"4 out of 5\". Null when\n   * nothing scored it, which is a different claim from a score of zero.\n   */\n  confidence: ProvenanceConfidence | null;\n  source: ProvenanceSource | null;\n  reasoning: string | null;\n  check: ProvenanceCheck | null;\n  call: ProvenanceCall | null;\n  signoff: ProvenanceSignoff | null;\n  /**\n   * Withheld from this viewer.\n   *\n   * Distinct from a null value: the label and the verification state still\n   * render, so a reader can see that a value EXISTS and was checked without\n   * seeing it. Hiding the row entirely would make the record look thinner than\n   * it is to the person least able to tell.\n   */\n  redacted?: boolean;\n}\n\n/* ============================================================================\n   CONFIDENCE ARRIVES ON TWO DIFFERENT KINDS OF SCALE, AND THEY MUST NOT MIX.\n\n   A SCORE is CONTINUOUS on 0–1 and can take any value in between: a\n   probability, a similarity, a model's own certainty. Every figure in the range\n   is reachable, so drawing one as a percentage reports something real.\n\n   A RATING is a small integer out of a small maximum — \"4 out of 5\". A\n   percentage is NOT a fair way to draw one: on a five-point scale only\n   20/40/60/80/100 can ever be printed, so the two digits of apparent precision\n   are digits the number does not have, and a reader seeing `100%` concludes\n   something was MEASURED that was in fact SELF-REPORTED as \"top marks\".\n\n   THIS IS NOT HYPOTHETICAL, AND IT IS WHY THE TYPE CHANGED. `confidence` was a\n   bare `number | null` documented as 0–1. A consumer whose extractor self-rates\n   1–5 divided by five on the way in — the only conversion available to it — and\n   every top rating rendered as `100%`. Nothing was wrong in the library's own\n   terms; the wrong SHAPE fitted the prop, silently, and the documentation that\n   said \"0..1\" was the only thing standing in the way of it.\n\n   Documentation is no longer the thing standing in the way. A bare number does\n   not type-check any more: a `ProvenanceConfidence` can only come out of\n   `scoredConfidence` or `ratedConfidence`, and the two renderers dispatch on\n   which one it is. A five-point rating CANNOT reach the percentage renderer,\n   because the only value `ConfidenceMeter` accepts is a `ConfidenceScore` and\n   the only thing that mints one is `confidenceScore`, whose entire job is the\n   range check.\n   ========================================================================= */\n\n/* The brand. DECLARED AND NEVER DEFINED — it exists only in the type system, is\n   not exported, and has no runtime value, so there is no object literal a\n   consumer can write that satisfies `ConfidenceScore`. That is the whole\n   mechanism: the constructor is not the recommended way in, it is the only\n   way in. */\ndeclare const CONFIDENCE_SCORE: unique symbol;\n\n/**\n * A confidence on the CONTINUOUS 0–1 scale — the one thing that may be drawn as\n * a percentage.\n *\n * Nominal on purpose. It IS a number at runtime and arithmetic on it behaves\n * exactly as it reads, but a raw `0.94` is not assignable to it. `confidenceScore`\n * is the only way in, and is therefore the one place a range can be checked.\n */\nexport type ConfidenceScore = number & { readonly [CONFIDENCE_SCORE]: \"score\" };\n\n/**\n * Mint a 0–1 score.\n *\n * Out of range is CLAMPED and warned about rather than thrown: the caller most\n * likely to be out of range is one holding a rating on some other scale, and a\n * blank page is a worse outcome than a bar at one end with a line in the console\n * naming the function that fixes it.\n */\nexport function confidenceScore(value: number): ConfidenceScore {\n  if (!Number.isFinite(value) || value < 0 || value > 1) {\n    devWarn(\n      \"confidenceScore\",\n      `received ${String(value)}, which is not a 0–1 score. If this is a rating on a small ` +\n        `integer scale (say 4 out of 5), use ratedConfidence(rating, scale) — dividing it down ` +\n        `into 0–1 makes it render as a percentage the scale cannot produce.`,\n    );\n  }\n  const clamped = Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;\n  return clamped as ConfidenceScore;\n}\n\n/**\n * HOW SURE THE AUTHOR WAS, carrying WHICH KIND OF SCALE it was said on.\n *\n * Never written as a literal — see the brand above. `scoredConfidence` and\n * `ratedConfidence` are the two doors, and which door a value came through is\n * what the renderer dispatches on.\n */\nexport type ProvenanceConfidence =\n  /** Continuous 0–1. Drawn as a banded meter with its percentage. */\n  | { readonly kind: \"score\"; readonly score: ConfidenceScore }\n  /**\n   * `rating` out of `scale`, both whole numbers. Drawn as one bar — one colour per\n   * step of five — because a percentage of a small scale prints precision it\n   * does not have.\n   */\n  | { readonly kind: \"rating\"; readonly rating: number; readonly scale: number };\n\n/** A continuous 0–1 confidence, for a record. */\nexport function scoredConfidence(value: number): ProvenanceConfidence {\n  return { kind: \"score\", score: confidenceScore(value) };\n}\n\n/**\n * A discrete `rating` out of `scale`, for a record.\n *\n * The denominator travels WITH the number, because \"4\" means nothing on its own\n * and every consumer that has had to pass a rating around without one has ended\n * up hard-coding the scale at the far end.\n */\nexport function ratedConfidence(rating: number, scale: number): ProvenanceConfidence {\n  if (!Number.isFinite(rating) || !Number.isFinite(scale) || scale < 1) {\n    devWarn(\n      \"ratedConfidence\",\n      `received ${String(rating)} out of ${String(scale)}, which is not a rating on a whole ` +\n        `scale. Pass null instead of a rating you do not have — a bar at zero and a bar with ` +\n        `nothing to show look identical and mean opposite things.`,\n    );\n    return { kind: \"rating\", rating: 0, scale: 0 };\n  }\n  return {\n    kind: \"rating\",\n    rating: Math.round(Math.max(0, Math.min(scale, rating))),\n    scale: Math.round(scale),\n  };\n}\n\n/** 0..1 to a band. A bare percentage invites false precision. */\nexport type ConfidenceBand = \"high\" | \"moderate\" | \"low\";\n\nexport function confidenceBand(confidence: ConfidenceScore): ConfidenceBand {\n  if (confidence >= 0.9) return \"high\";\n  if (confidence >= 0.7) return \"moderate\";\n  return \"low\";\n}\n"],"names":["confidenceScore","value","devWarn","scoredConfidence","ratedConfidence","rating","scale","confidenceBand","confidence"],"mappings":";AAgKO,SAASA,EAAgBC,GAAgC;AAC9D,UAAI,CAAC,OAAO,SAASA,CAAK,KAAKA,IAAQ,KAAKA,IAAQ,MAClDC;AAAA,IACE;AAAA,IACA,YAAY,OAAOD,CAAK,CAAC;AAAA,EAAA,GAKb,OAAO,SAASA,CAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGA,CAAK,CAAC,IAAI;AAE7E;AAoBO,SAASE,EAAiBF,GAAqC;AACpE,SAAO,EAAE,MAAM,SAAS,OAAOD,EAAgBC,CAAK,EAAA;AACtD;AASO,SAASG,EAAgBC,GAAgBC,GAAqC;AACnF,SAAI,CAAC,OAAO,SAASD,CAAM,KAAK,CAAC,OAAO,SAASC,CAAK,KAAKA,IAAQ,KACjEJ;AAAA,IACE;AAAA,IACA,YAAY,OAAOG,CAAM,CAAC,WAAW,OAAOC,CAAK,CAAC;AAAA,EAAA,GAI7C,EAAE,MAAM,UAAU,QAAQ,GAAG,OAAO,EAAA,KAEtC;AAAA,IACL,MAAM;AAAA,IACN,QAAQ,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAIA,GAAOD,CAAM,CAAC,CAAC;AAAA,IACvD,OAAO,KAAK,MAAMC,CAAK;AAAA,EAAA;AAE3B;AAKO,SAASC,EAAeC,GAA6C;AAC1E,SAAIA,KAAc,MAAY,SAC1BA,KAAc,MAAY,aACvB;AACT;"}

package/dist/components/rbac/AccessRequestPanel.js

@@ -0,0 +1,153 @@
+import { jsxs as m, jsx as o, Fragment as f } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Button as C } from "../Button.js";
+import { Callout as u } from "../Callout.js";
+import { Dialog as _ } from "../Dialog.js";
+import { DescriptionList as U } from "../DescriptionList.js";
+import { cn as W } from "../../lib/cn.js";
+import { DateTimeText as I, useDateTimeText as z } from "../DateTimeText.js";
+import { RelativeTime as J } from "../RelativeTime.js";
+import { isRoleSelectable as K, leastPrivilegeRoleId as Q, RoleKeyPicker as X } from "./RoleKeyPicker.js";
+import { confirmCodeMatches as Y, useApprovalActions as Z, ApprovalHeader as $, ConfirmCodeEntry as q, ConfirmCodeCallout as ee, ApprovalError as ne, ApprovalButtons as oe, ExpiredNotice as ie, TerminalCallout as A } from "./approvalPanelParts.js";
+import { useUiStrings as k } from "../../lib/i18n/provider.js";
+function M(n) {
+  return n.request.kind === "machine";
+}
+const re = {
+  session: (n) => n.kindSession,
+  worker: (n) => n.kindWorker,
+  machine: (n) => n.kindMachine
+}, te = {
+  session: (n) => n.session,
+  worker: (n) => n.worker,
+  machine: (n) => n.machine
+};
+function le(n, e, r) {
+  const { accessRequest: i, approval: t } = n;
+  return [
+    { key: "kind", term: i.kind, value: re[e.kind](i) },
+    {
+      key: "label",
+      term: te[e.kind](i),
+      value: e.label,
+      mono: e.kind !== "session"
+    },
+    e.repo ? { key: "repo", term: i.repository, value: e.repo } : null,
+    // DXUI-15: a machine request's label row already names the machine, so its host is not shown a second time.
+    e.machine && e.kind !== "machine" ? { key: "machine", term: i.machine, value: e.machine } : null,
+    e.requesterIp ? { key: "ip", term: i.address, value: e.requesterIp, mono: !0 } : null,
+    e.clientVersion ? { key: "version", term: i.clientVersion, value: e.clientVersion } : null,
+    {
+      key: "requested",
+      term: t.requested,
+      value: /* @__PURE__ */ m(f, { children: [
+        /* @__PURE__ */ o(I, { at: e.requestedAt }),
+        " (",
+        /* @__PURE__ */ o(J, { at: e.requestedAt, tooltip: !1 }),
+        ")"
+      ] })
+    },
+    r && e.expiresAt ? { key: "expires", term: t.expires, value: /* @__PURE__ */ o(I, { at: e.expiresAt }) } : null
+  ].filter((s) => s !== null);
+}
+function se({ onRevoke: n }) {
+  const e = k().accessRequest, [r, i] = p(!1), [t, l] = p(!1), [s, c] = p(null);
+  async function h() {
+    l(!0), c(null);
+    try {
+      await n();
+    } catch (d) {
+      c(d instanceof Error ? d.message : e.revokeFailedMessage);
+    } finally {
+      l(!1), i(!1);
+    }
+  }
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-3", children: [
+    s !== null && /* @__PURE__ */ o(u, { tone: "danger", live: !0, title: e.revokeFailedTitle, children: s }),
+    /* @__PURE__ */ o("div", { className: "flex sm:justify-end", children: /* @__PURE__ */ o(C, { variant: "danger", onClick: () => i(!0), className: "w-full sm:w-auto", children: e.revokeKey }) }),
+    /* @__PURE__ */ o(
+      _,
+      {
+        open: r,
+        onOpenChange: (d) => {
+          t || i(d);
+        },
+        title: e.revokeTitle,
+        description: e.revokeBody,
+        actions: /* @__PURE__ */ m(f, { children: [
+          /* @__PURE__ */ o(C, { variant: "outline", onClick: () => i(!1), disabled: t, children: e.revokeCancel }),
+          /* @__PURE__ */ o(C, { variant: "danger", onClick: () => {
+            h();
+          }, loading: t, children: e.revokeKey })
+        ] })
+      }
+    )
+  ] });
+}
+function ae({ revokedAt: n, revokedBy: e }) {
+  const r = k().accessRequest;
+  return /* @__PURE__ */ o(f, { children: r.revokedBody(z(n), e) });
+}
+function ce({
+  state: n,
+  request: e,
+  expiredNote: r,
+  issuedKey: i,
+  revokedKey: t
+}) {
+  const l = k().accessRequest;
+  if (t?.revokedAt)
+    return /* @__PURE__ */ o(u, { tone: "danger", title: l.revoked, children: /* @__PURE__ */ o(ae, { revokedAt: t.revokedAt, revokedBy: t.revokedBy }) });
+  switch (n) {
+    case "approved":
+      return /* @__PURE__ */ o(A, { state: n, children: l.approved(e.roleLabel) });
+    case "claimed":
+      return /* @__PURE__ */ m("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ o(A, { state: n, children: l.claimed(e.roleLabel) }),
+        i?.onRevoke && /* @__PURE__ */ o(se, { onRevoke: i.onRevoke })
+      ] });
+    case "denied":
+      return /* @__PURE__ */ o(A, { state: n, children: l.denied });
+    case "expired":
+      return /* @__PURE__ */ o(ie, { note: r, fallback: l.expiredFallback });
+  }
+}
+function Ae(n) {
+  const { request: e, state: r, defaultRoleId: i, onDeny: t, expiredNote: l, confirmCodeEntry: s = !1, issuedKey: c, aboveActions: h, className: d } = n, R = M(n), v = n.roles ?? [], S = n.permissions ?? [], b = n.ownPermissionKeys ?? [], T = r === "claimed" && c?.revokedAt ? c : void 0, y = k(), a = y.accessRequest, g = new Set(b), w = i !== void 0 && K(i, v, g), B = w ? i : Q(v, g), N = v.find((H) => H.id === B), [E, V] = p(""), x = K(E, v, g) ? E : B, [D, F] = p(""), O = !s || Y(D, e.confirmCode), { busy: L, error: j, run: G } = Z(), P = r === "pending";
+  return /* @__PURE__ */ m("div", { className: W("flex flex-col gap-5", d), children: [
+    /* @__PURE__ */ o($, { title: a.title, state: r, revokedLabel: T ? a.revoked : void 0 }),
+    /* @__PURE__ */ o(U, { entries: le(y, e, P), className: "divide-y divide-border-subtle" }),
+    P ? /* @__PURE__ */ m(f, { children: [
+      s ? /* @__PURE__ */ o(q, { expected: e.confirmCode, value: D, onValueChange: F }) : /* @__PURE__ */ o(ee, { code: e.confirmCode }),
+      /* @__PURE__ */ o(u, { tone: "warning", title: y.approval.approveOnlyTitle, children: a.approveBody(e.kind, s) }),
+      /* @__PURE__ */ o(ne, { error: j }),
+      R ? /* @__PURE__ */ o(u, { tone: "info", title: a.machineGrantTitle, children: a.machineGrant }) : N === void 0 ? /* @__PURE__ */ o(u, { tone: "danger", title: a.noRoleTitle, children: a.noRoleBody }) : /* @__PURE__ */ o(
+        X,
+        {
+          roles: v,
+          permissions: S,
+          ownPermissionKeys: b,
+          value: x,
+          onValueChange: V,
+          description: a.roleHint(N.label, w),
+          disabled: L !== null
+        }
+      ),
+      h,
+      /* @__PURE__ */ o(
+        oe,
+        {
+          busy: L,
+          run: G,
+          onApprove: () => M(n) ? n.onApprove() : n.onApprove(x),
+          onDeny: t,
+          approveDisabled: !O || !R && x === ""
+        }
+      )
+    ] }) : /* @__PURE__ */ o(ce, { state: r, request: e, expiredNote: l, issuedKey: c, revokedKey: T })
+  ] });
+}
+export {
+  Ae as AccessRequestPanel
+};
+//# sourceMappingURL=AccessRequestPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccessRequestPanel.js","sources":["../../../src/components/rbac/AccessRequestPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport { Callout } from \"../Callout\";\nimport { Dialog } from \"../Dialog\";\nimport { DescriptionList, type DescriptionListEntry } from \"../DescriptionList\";\nimport { cn } from \"../../lib/cn\";\nimport { DateTimeText, useDateTimeText } from \"../DateTimeText\";\nimport { RelativeTime } from \"../RelativeTime\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { UiStrings } from \"../../lib/i18n\";\nimport type { AccessRequestKind } from \"../../lib/i18n/areas/rbac\";\nimport { isRoleSelectable, leastPrivilegeRoleId, RoleKeyPicker } from \"./RoleKeyPicker\";\nimport {\n  ApprovalButtons,\n  ApprovalError,\n  ApprovalHeader,\n  ConfirmCodeCallout,\n  ConfirmCodeEntry,\n  confirmCodeMatches,\n  ExpiredNotice,\n  TerminalCallout,\n  type ExpiredNote,\n  useApprovalActions,\n  type AccessRequestState,\n} from \"./approvalPanelParts\";\nimport type { Permission, Role } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ACCESS REQUEST PANEL\n\n   THE SCREEN A PERSON SEES WHEN SOMETHING ELSE ASKS TO ACT AS THEM. An agent\n   session or a worker holds no credential until a signed-in person approves its\n   request; approving mints a key under that person with a role they choose.\n   This panel is the whole decision: who is asking, the code to compare, the\n   role to grant, approve or deny.\n\n   PRESENTATIONAL. It fetches nothing and knows no endpoint. `state` is whatever\n   the consumer's server derived: it is never computed here, and never assumed\n   to follow a click. After `onApprove` resolves the panel stays \"pending\" until\n   the consumer hands it `state=\"approved\"`. `onApprove` / `onDeny` return\n   promises; a rejection shows its message in the panel and re-enables the\n   buttons.\n\n   THE CONFIRM CODE IS FOR COMPARING, NOT COPYING. The requester displays the\n   same code in its own terminal and the person checks the two match. That is\n   the defence against being sent a link to someone else's request, so the code\n   is deliberately plain large text, with no copy control (which would invite\n   pasting it somewhere instead of reading it against the requester's screen).\n   The panel never authenticates anything with it.\n\n   `confirmCodeEntry` TURNS COMPARING INTO TYPING (DX-4467). For a screen where a request may be junk someone\n   addressed to the approver, a mis-click on the wrong request must not approve it: the code is then never shown,\n   a field takes the code the requester displays, and Approve stays disabled until it matches (case and spaces\n   ignored). Deny is always available, and every fact stays visible so the approver can refuse what they do not\n   recognise. The match is a client-side gate, not authentication.\n\n   THE ROLE STARTS AT THE NARROWEST ONE ALLOWED. Approval is a grant, so the\n   default is the selectable role with the fewest permissions, never the\n   approver's own role (which would make \"just click Approve\" the broadest\n   choice). Roles holding a permission the approver lacks are disabled with the\n   missing permissions named (`RoleKeyPicker`, shared with `ApiKeysPanel`).\n   Approve stays disabled until a role is chosen, which only matters when no\n   role is allowed at all; the panel then says so.\n\n   Only a pending request has controls. Approved, denied, expired and claimed\n   are terminal readouts: a `Callout` for what it means for the requester, a\n   `Badge` for the state at a glance.\n   ---------------------------------------------------------------------------- */\n\n/** DXUI-15: `machine` is a dev machine's unattended maintenance: a fixed read-only grant, so no role is chosen. */\nexport type { AccessRequestKind };\n\nexport type { AccessRequestState, ExpiredNote };\n\nexport interface AccessRequest {\n  kind: AccessRequestKind;\n  /** The session title or the worker id: what the requester calls itself. */\n  label: string;\n  repo?: string;\n  machine?: string;\n  /** The address the request came from. */\n  requesterIp?: string;\n  clientVersion?: string;\n  /** ISO instant. */\n  requestedAt: string;\n  /** ISO instant. Shown while the request is pending. */\n  expiresAt?: string;\n  /** The short code the requester also displays. Compared by eye, or typed back when `confirmCodeEntry` is set. */\n  confirmCode: string;\n  /** The label of the role granted. Shown once the request is approved or claimed. */\n  roleLabel?: string;\n}\n\n/**\n * DX-4856: the key a claim minted, and what a person may do with it. Pass it once the requester holds a key; omit it before that.\n * `revokedAt` set means the key was revoked: the panel reads Revoked and offers nothing. Otherwise `onRevoke` (pass it only for a\n * person allowed to revoke this key) adds a Revoke key button behind a confirmation dialog.\n */\nexport interface IssuedKey {\n  /** ISO instant the key was revoked. */\n  revokedAt?: string;\n  /** Who revoked it, when a person did. */\n  revokedBy?: string;\n  /** Revokes the key. A rejection shows its message in the panel; a resolution leaves the panel as it was until the consumer hands it `revokedAt`. */\n  onRevoke?: () => Promise<void>;\n}\n\ninterface AccessRequestPanelCommonProps {\n  state: AccessRequestState;\n  onDeny: () => Promise<void>;\n  /**\n   * Why an expired request expired and what its requester does next. Used only in the `expired` state; without it the readout says only\n   * that nothing was granted.\n   */\n  expiredNote?: ExpiredNote;\n  /**\n   * Opt in to typing the confirm code instead of comparing it by eye: the code is not rendered, a field takes it, and Approve is\n   * disabled until what was typed matches `request.confirmCode`, ignoring case and spaces. Deny stays available.\n   */\n  confirmCodeEntry?: boolean;\n  /** DX-4856: the key this request minted, with its revoke. Used only in the `claimed` state. */\n  issuedKey?: IssuedKey;\n  /**\n   * DXUI-95: the consumer's own control, drawn just above the Approve and Deny buttons while `state` is `pending`, on role and\n   * machine requests alike (for example a switch for machine auto-approve). Never rendered in a terminal state. The panel\n   * knows nothing of what it holds.\n   */\n  aboveActions?: ReactNode;\n  className?: string;\n}\n\n/** A session or worker request: the approver chooses the role the key gets. */\nexport interface RoleAccessRequestPanelProps extends AccessRequestPanelCommonProps {\n  request: AccessRequest & { kind: \"session\" | \"worker\" };\n  /** The roles the approver may grant. */\n  roles: Role[];\n  /** The permission catalog, used to name the permissions that make a role unavailable. */\n  permissions: Permission[];\n  /** What the approver holds. A role holding anything outside this set cannot be chosen. */\n  ownPermissionKeys: string[];\n  /**\n   * The role to start on instead of the narrowest allowed one (DX-4431: an agent session starts on the team's\n   * default agent role). Used only while it is selectable; otherwise the narrowest allowed role applies.\n   */\n  defaultRoleId?: string;\n  onApprove: (roleId: string) => Promise<void>;\n}\n\n/** DXUI-15: a machine request has a fixed read-only grant, so there is no role to choose and the role props are never read. */\nexport interface MachineAccessRequestPanelProps extends AccessRequestPanelCommonProps {\n  request: AccessRequest & { kind: \"machine\" };\n  roles?: Role[];\n  permissions?: Permission[];\n  ownPermissionKeys?: string[];\n  defaultRoleId?: string;\n  onApprove: () => Promise<void>;\n}\n\nexport type AccessRequestPanelProps = RoleAccessRequestPanelProps | MachineAccessRequestPanelProps;\n\nfunction isMachineProps(props: AccessRequestPanelProps): props is MachineAccessRequestPanelProps {\n  return props.request.kind === \"machine\";\n}\n\ntype Strings = UiStrings[\"accessRequest\"];\nconst KIND_LABEL: Record<AccessRequestKind, (s: Strings) => string> = {\n  session: (s) => s.kindSession,\n  worker: (s) => s.kindWorker,\n  machine: (s) => s.kindMachine,\n};\nconst LABEL_TERM: Record<AccessRequestKind, (s: Strings) => string> = {\n  session: (s) => s.session,\n  worker: (s) => s.worker,\n  machine: (s) => s.machine,\n};\n\nfunction factEntries(strings: UiStrings, request: AccessRequest, pending: boolean): DescriptionListEntry[] {\n  const { accessRequest, approval } = strings;\n  const entries: (DescriptionListEntry | null)[] = [\n    { key: \"kind\", term: accessRequest.kind, value: KIND_LABEL[request.kind](accessRequest) },\n    {\n      key: \"label\",\n      term: LABEL_TERM[request.kind](accessRequest),\n      value: request.label,\n      mono: request.kind !== \"session\",\n    },\n    request.repo ? { key: \"repo\", term: accessRequest.repository, value: request.repo } : null,\n    // DXUI-15: a machine request's label row already names the machine, so its host is not shown a second time.\n    request.machine && request.kind !== \"machine\" ? { key: \"machine\", term: accessRequest.machine, value: request.machine } : null,\n    request.requesterIp ? { key: \"ip\", term: accessRequest.address, value: request.requesterIp, mono: true } : null,\n    request.clientVersion ? { key: \"version\", term: accessRequest.clientVersion, value: request.clientVersion } : null,\n    {\n      key: \"requested\",\n      term: approval.requested,\n      value: (\n        <>\n          <DateTimeText at={request.requestedAt} /> (<RelativeTime at={request.requestedAt} tooltip={false} />)\n        </>\n      ),\n    },\n    pending && request.expiresAt\n      ? { key: \"expires\", term: approval.expires, value: <DateTimeText at={request.expiresAt} /> }\n      : null,\n  ];\n  return entries.filter((entry): entry is DescriptionListEntry => entry !== null);\n}\n\n/** The Revoke key button, its confirmation and the error a failed revoke leaves (DX-4856). */\nfunction RevokeKey({ onRevoke }: { onRevoke: () => Promise<void> }) {\n  const strings = useUiStrings().accessRequest;\n  const [open, setOpen] = useState(false);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  async function confirm() {\n    setBusy(true);\n    setError(null);\n    try {\n      await onRevoke();\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : strings.revokeFailedMessage);\n    } finally {\n      setBusy(false);\n      setOpen(false);\n    }\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      {error !== null && (\n        <Callout tone=\"danger\" live title={strings.revokeFailedTitle}>\n          {error}\n        </Callout>\n      )}\n      <div className=\"flex sm:justify-end\">\n        <Button variant=\"danger\" onClick={() => setOpen(true)} className=\"w-full sm:w-auto\">\n          {strings.revokeKey}\n        </Button>\n      </div>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (!busy) setOpen(next);\n        }}\n        title={strings.revokeTitle}\n        description={strings.revokeBody}\n        actions={\n          <>\n            <Button variant=\"outline\" onClick={() => setOpen(false)} disabled={busy}>\n              {strings.revokeCancel}\n            </Button>\n            <Button variant=\"danger\" onClick={() => void confirm()} loading={busy}>\n              {strings.revokeKey}\n            </Button>\n          </>\n        }\n      />\n    </div>\n  );\n}\n\n/** The revoked callout's sentence: its time is a hook's text, so it lives in a component of its own. */\nfunction RevokedBody({ revokedAt, revokedBy }: { revokedAt: string; revokedBy: string | undefined }) {\n  const strings = useUiStrings().accessRequest;\n  return <>{strings.revokedBody(useDateTimeText(revokedAt), revokedBy)}</>;\n}\n\nfunction TerminalNotice({\n  state,\n  request,\n  expiredNote,\n  issuedKey,\n  revokedKey,\n}: {\n  state: Exclude<AccessRequestState, \"pending\">;\n  request: AccessRequest;\n  expiredNote: ExpiredNote | undefined;\n  issuedKey: IssuedKey | undefined;\n  /** The key when it was revoked (`issuedKey` in the `claimed` state with `revokedAt` set), else undefined. */\n  revokedKey: IssuedKey | undefined;\n}) {\n  const strings = useUiStrings().accessRequest;\n  if (revokedKey?.revokedAt) {\n    return (\n      <Callout tone=\"danger\" title={strings.revoked}>\n        <RevokedBody revokedAt={revokedKey.revokedAt} revokedBy={revokedKey.revokedBy} />\n      </Callout>\n    );\n  }\n  switch (state) {\n    case \"approved\":\n      return <TerminalCallout state={state}>{strings.approved(request.roleLabel)}</TerminalCallout>;\n    case \"claimed\":\n      return (\n        <div className=\"flex flex-col gap-4\">\n          <TerminalCallout state={state}>{strings.claimed(request.roleLabel)}</TerminalCallout>\n          {issuedKey?.onRevoke && <RevokeKey onRevoke={issuedKey.onRevoke} />}\n        </div>\n      );\n    case \"denied\":\n      return (\n        <TerminalCallout state={state}>\n          {strings.denied}\n        </TerminalCallout>\n      );\n    case \"expired\":\n      return <ExpiredNotice note={expiredNote} fallback={strings.expiredFallback} />;\n  }\n}\n\nexport function AccessRequestPanel(props: AccessRequestPanelProps) {\n  const { request, state, defaultRoleId, onDeny, expiredNote, confirmCodeEntry = false, issuedKey, aboveActions, className } = props;\n  const isMachine = isMachineProps(props);\n  const roles = props.roles ?? [];\n  const permissions = props.permissions ?? [];\n  const ownPermissionKeys = props.ownPermissionKeys ?? [];\n  // DX-4856: a revoked key outranks the request's own state, which stays `claimed` for good.\n  const revokedKey = state === \"claimed\" && issuedKey?.revokedAt ? issuedKey : undefined;\n  const allStrings = useUiStrings();\n  const strings = allStrings.accessRequest;\n  const own = new Set(ownPermissionKeys);\n  const usesDefault = defaultRoleId !== undefined && isRoleSelectable(defaultRoleId, roles, own);\n  const narrowest = usesDefault ? defaultRoleId : leastPrivilegeRoleId(roles, own);\n  // The hint names the role that is actually preselected: the consumer's default when it is selectable, else the narrowest allowed one (DX-4445).\n  const preselected = roles.find((role) => role.id === narrowest);\n  // \"\" until the person chooses. The effective role is derived, not stored: a pick that stops being selectable\n  // (the approver's permissions narrowed, `roles` reloaded) falls back to the narrowest allowed role, so Approve\n  // can never submit a role the picker shows as unavailable, and roles arriving after mount still preselect.\n  const [picked, setPicked] = useState(\"\");\n  const roleId = isRoleSelectable(picked, roles, own) ? picked : narrowest;\n  const [typedCode, setTypedCode] = useState(\"\");\n  const codeOk = !confirmCodeEntry || confirmCodeMatches(typedCode, request.confirmCode);\n  const { busy, error, run } = useApprovalActions();\n\n  const pending = state === \"pending\";\n\n  return (\n    <div className={cn(\"flex flex-col gap-5\", className)}>\n      <ApprovalHeader title={strings.title} state={state} revokedLabel={revokedKey ? strings.revoked : undefined} />\n\n      <DescriptionList entries={factEntries(allStrings, request, pending)} className=\"divide-y divide-border-subtle\" />\n\n      {pending ? (\n        <>\n          {confirmCodeEntry ? (\n            <ConfirmCodeEntry expected={request.confirmCode} value={typedCode} onValueChange={setTypedCode} />\n          ) : (\n            <ConfirmCodeCallout code={request.confirmCode} />\n          )}\n\n          <Callout tone=\"warning\" title={allStrings.approval.approveOnlyTitle}>\n            {strings.approveBody(request.kind, confirmCodeEntry)}\n          </Callout>\n\n          <ApprovalError error={error} />\n\n          {isMachine ? (\n            <Callout tone=\"info\" title={strings.machineGrantTitle}>\n              {strings.machineGrant}\n            </Callout>\n          ) : preselected === undefined ? (\n            <Callout tone=\"danger\" title={strings.noRoleTitle}>\n              {strings.noRoleBody}\n            </Callout>\n          ) : (\n            <RoleKeyPicker\n              roles={roles}\n              permissions={permissions}\n              ownPermissionKeys={ownPermissionKeys}\n              value={roleId}\n              onValueChange={setPicked}\n              description={strings.roleHint(preselected.label, usesDefault)}\n              disabled={busy !== null}\n            />\n          )}\n\n          {aboveActions}\n\n          <ApprovalButtons\n            busy={busy}\n            run={run}\n            // The union does not narrow through `isMachine`, so the guard is repeated for the type system.\n            onApprove={() => (isMachineProps(props) ? props.onApprove() : props.onApprove(roleId))}\n            onDeny={onDeny}\n            approveDisabled={!codeOk || (!isMachine && roleId === \"\")}\n          />\n        </>\n      ) : (\n        <TerminalNotice state={state} request={request} expiredNote={expiredNote} issuedKey={issuedKey} revokedKey={revokedKey} />\n      )}\n    </div>\n  );\n}\n"],"names":["isMachineProps","props","KIND_LABEL","s","LABEL_TERM","factEntries","strings","request","pending","accessRequest","approval","jsxs","Fragment","jsx","DateTimeText","RelativeTime","entry","RevokeKey","onRevoke","useUiStrings","open","setOpen","useState","busy","setBusy","error","setError","confirm","cause","Callout","Button","Dialog","next","RevokedBody","revokedAt","revokedBy","useDateTimeText","TerminalNotice","state","expiredNote","issuedKey","revokedKey","TerminalCallout","ExpiredNotice","AccessRequestPanel","defaultRoleId","onDeny","confirmCodeEntry","aboveActions","className","isMachine","roles","permissions","ownPermissionKeys","allStrings","own","usesDefault","isRoleSelectable","narrowest","leastPrivilegeRoleId","preselected","role","picked","setPicked","roleId","typedCode","setTypedCode","codeOk","confirmCodeMatches","run","useApprovalActions","cn","ApprovalHeader","DescriptionList","ConfirmCodeEntry","ConfirmCodeCallout","ApprovalError","RoleKeyPicker","ApprovalButtons"],"mappings":"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"}

package/dist/components/rbac/AccountMenu.js

@@ -0,0 +1,118 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Avatar as N } from "../Avatar.js";
+import { Badge as C } from "../Badge.js";
+import { Icon as i } from "../Icon.js";
+import { Popover as z, PopoverClose as a } from "../Popover.js";
+import { cn as n } from "../../lib/cn.js";
+import { useRBAC as A } from "./RBACProvider.js";
+import { useUiStrings as _ } from "../../lib/i18n/provider.js";
+import { emphasis as y } from "../../lib/i18n/emphasis.js";
+const c = [
+  "dx-tap flex w-full items-center gap-2.5 rounded-md px-2.5 py-2",
+  "text-left text-sm text-secondary outline-none",
+  "transition-[var(--tx-colors)] duration-(--dur-instant)",
+  "hover:bg-surface-hover hover:text-primary",
+  "focus-visible:bg-surface-hover focus-visible:text-primary"
+], p = "text-2xs font-semibold tracking-widest text-tertiary uppercase";
+function T({ title: o, children: d }) {
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5 border-t border-border-subtle px-1 py-3", children: [
+    /* @__PURE__ */ e("span", { className: p, children: o }),
+    d
+  ] });
+}
+function O({
+  actions: o,
+  nameBadge: d,
+  sections: k,
+  footer: x,
+  onNavigateProfile: m,
+  onNavigateRoles: u,
+  onNavigateAccess: h,
+  onSwitchTeam: f,
+  onSignOut: g,
+  className: w
+}) {
+  const l = _().accountMenu, { actualUser: s, effectiveRole: b, teams: v } = A();
+  return /* @__PURE__ */ e(
+    z,
+    {
+      align: "end",
+      width: "calc(20rem*var(--ui-scale))",
+      className: w,
+      trigger: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": l.triggerLabel(s.name),
+          className: "dx-tap shrink-0 rounded-full transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover focus-visible:shadow-[0_0_0_3px_var(--focus-halo)]",
+          children: /* @__PURE__ */ e(N, { name: s.name, src: s.avatarUrl, size: "sm" })
+        }
+      ),
+      children: /* @__PURE__ */ r("div", { "data-account-menu-panel": "", className: "flex w-full min-w-0 flex-col gap-1", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-3 px-1 pb-3", children: [
+          /* @__PURE__ */ e(N, { name: s.name, src: s.avatarUrl, size: "md" }),
+          /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ r("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+              /* @__PURE__ */ e("span", { className: "truncate text-sm font-semibold text-primary", children: s.name }),
+              d
+            ] }),
+            /* @__PURE__ */ e("span", { className: "truncate text-xs text-tertiary", children: s.email })
+          ] })
+        ] }),
+        o && o.length > 0 && /* @__PURE__ */ e("div", { "data-account-menu-actions": "", className: "flex flex-col gap-0.5 border-t border-border-subtle pt-2 pb-2", children: o.map((t) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r("button", { type: "button", "data-action-id": t.id, className: n(c), onClick: t.onSelect, children: [
+          /* @__PURE__ */ e(i, { name: t.icon, size: "sm" }),
+          t.label,
+          t.badge && t.badge.value > 0 && /* @__PURE__ */ e(C, { size: "sm", tone: "info", className: "ml-auto", "aria-label": t.badge.label, "data-action-badge": "", children: t.badge.value })
+        ] }) }, t.id)) }),
+        (m || u) && /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 border-t border-border-subtle pt-2", children: [
+          m && /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r("button", { type: "button", className: n(c), onClick: m, children: [
+            /* @__PURE__ */ e(i, { name: "user", size: "sm" }),
+            l.profile
+          ] }) }),
+          u && /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r("button", { type: "button", className: n(c), onClick: u, children: [
+            /* @__PURE__ */ e(i, { name: "shield-check", size: "sm" }),
+            l.roles
+          ] }) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5 border-t border-border-subtle px-1 py-3", children: [
+          /* @__PURE__ */ e("span", { className: p, children: l.yourAccess }),
+          b ? h ? /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "text-left text-xs text-secondary underline-offset-2 outline-none hover:underline focus-visible:underline",
+              onClick: h,
+              children: l.hasRole(b.label, y)
+            }
+          ) }) : /* @__PURE__ */ e("p", { className: "text-xs text-secondary", children: l.hasRole(b.label, y) }) : /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: l.noRole })
+        ] }),
+        k,
+        v.length > 1 && f && /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 border-t border-border-subtle pt-2", children: [
+          /* @__PURE__ */ e("span", { className: n(p, "px-1 pb-1"), children: l.switchTeam }),
+          v.map((t) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r("button", { type: "button", className: n(c), onClick: () => f(t.id), children: [
+            /* @__PURE__ */ e(i, { name: "users", size: "sm" }),
+            t.name
+          ] }) }, t.id))
+        ] }),
+        g && /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5 border-t border-border-subtle pt-2", children: /* @__PURE__ */ e(a, { children: /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: n(c, "text-danger-text hover:bg-danger-subtle hover:text-danger-text focus-visible:bg-danger-subtle focus-visible:text-danger-text"),
+            onClick: g,
+            children: [
+              /* @__PURE__ */ e(i, { name: "log-out", size: "sm" }),
+              l.signOut
+            ]
+          }
+        ) }) }),
+        x && /* @__PURE__ */ e("div", { className: "border-t border-border-subtle px-1 pt-2 text-2xs text-tertiary", children: x })
+      ] })
+    }
+  );
+}
+export {
+  O as AccountMenu,
+  T as AccountMenuSection
+};
+//# sourceMappingURL=AccountMenu.js.map