@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { useCallback, useRef, type ReactNode, type Ref } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { useDialogFinalFocus, useSupersedePopovers } from \"./Dialog\";\nimport { overlayBackdropClassName, OVERLAY_HEADER_ACTIONS_CLASS, OVERLAY_HEADER_ACTIONS_GROW_CLASS, OVERLAY_POPUP_SURFACE } from \"./overlay-shell\";\n\n/* ============================================================================\n   DRAWER (DX-5545)\n\n   A panel that slides in from a side edge, full height, over the page. It is the\n   Dialog's sibling for content that is read alongside the page rather than\n   answered: a timeline, a thread, a detail pane. Same modal behaviour as Dialog\n   (focus trap, Escape, outside click, focus returned to the opener, popovers\n   around it superseded), same near-full-width default (DX-5257), and full width\n   on a phone.\n\n   It lives in the page, not in a route: the host owns `open`, so a drawer can be\n   driven from the URL and closed by Back.\n   ========================================================================= */\n\nconst drawer = tv({\n  slots: {\n    backdrop: overlayBackdropClassName(),\n    popup: [\n      \"fixed inset-y-0 z-(--z-modal) flex h-dvh w-full flex-col\",\n      OVERLAY_POPUP_SURFACE,\n      \"rounded-none border-y-0\",\n      \"transition-[var(--tx-colors),translate] duration-(--dur-slower) ease-emphasis\",\n      \"data-ending-style:duration-(--dur-exit-slow) data-ending-style:ease-exit\",\n    ],\n    header: \"flex items-start gap-4 border-b border-border-subtle px-5 pb-4 pt-5 pr-14\",\n    close: \"absolute top-4 right-4\",\n    titleBlock: \"min-w-0 flex-1\",\n    title: \"font-display text-lg font-semibold text-primary text-balance\",\n    description: \"mt-1.5 text-sm text-secondary text-pretty\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 py-5\",\n  },\n  variants: {\n    side: {\n      right: { popup: \"right-0 border-r-0 data-starting-style:translate-x-full data-ending-style:translate-x-full\" },\n      left: { popup: \"left-0 border-l-0 data-starting-style:-translate-x-full data-ending-style:-translate-x-full\" },\n    },\n    size: {\n      /* The default: most of the screen, because what a drawer holds is read, not glanced at. */\n      wide: { popup: \"sm:w-[min(64rem,calc(100vw-2rem))]\" },\n      md: { popup: \"sm:w-[min(32rem,calc(100vw-2rem))]\" },\n    },\n    /* DX-5682: a body the host lays out itself (a split view, a thread with a pinned composer): no\n       padding and no scroll of its own, so the content owns both. Same shape as Dialog size=\"full\". */\n    flush: { true: { body: \"flex flex-col overflow-hidden p-0\" } },\n    /* DXUI-93: set by the Drawer itself from `singleRowHeader`; see the compound variant. */\n    bar: { true: {}, false: {} },\n    /* DXUI-94: set by the Drawer itself from `headerActionsGrow` / `compactHeader`; see the compound variants. */\n    grow: { true: {}, false: {} },\n    compact: { true: {}, false: {} },\n  },\n  compoundVariants: [\n    /* DXUI-93: a header opted in with `singleRowHeader` is ONE thin bar, as Dialog's (DX-5682): the title block, the host's\n       controls and the close button share a single vertically-centred row, and the close button sits IN the row (see the\n       markup) instead of pinned to the corner, so the header costs the body one line, not the title's line plus a padded\n       corner. */\n    { bar: true, class: { header: \"items-center gap-2 px-4 py-3\", close: \"static flex-none\" } },\n    /* DXUI-94: `compactHeader` thins the single-row bar: less padding and a tighter gap. */\n    { bar: true, compact: true, class: { header: \"gap-1.5 px-3 py-1.5\" } },\n    /* DXUI-94: `headerActionsGrow`: the title block takes only what its content needs, so the host's controls fill the rest. */\n    { grow: true, class: { titleBlock: \"flex-initial\" } },\n  ],\n  defaultVariants: { side: \"right\", size: \"wide\", bar: false, grow: false, compact: false },\n});\n\nexport interface DrawerProps extends Omit<VariantProps<typeof drawer>, \"grow\" | \"compact\"> {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  title: ReactNode;\n  description?: ReactNode;\n  /**\n   * DXUI-93: the host's own controls in the header row, beside the title and before the close button, as Dialog's `headerActions`\n   * (DX-4398). They sit outside the title element, so they are no part of the drawer's accessible name. Focus then starts on the\n   * drawer itself, not on the first control: an IconButton's tooltip opens on keyboard focus and would swallow the first Escape.\n   */\n  headerActions?: ReactNode;\n  /**\n   * DXUI-93: opt in to ONE thin header row, as Dialog's `singleRowHeader` (DX-5682): the title, the `headerActions` and the close\n   * button share a single non-wrapping, vertically centred row, and the close button sits in the row instead of the corner.\n   */\n  singleRowHeader?: boolean;\n  /**\n   * DXUI-94: the `headerActions` fill the row beside the title (start-aligned, truncating inside it) instead of hugging the close button, as Dialog's\n   * `headerActionsGrow`; the title block then takes only the room its content needs. Without `headerActions` it changes nothing.\n   */\n  headerActionsGrow?: boolean;\n  /** DXUI-94: with `singleRowHeader`, a thinner bar (less padding, a tighter gap, a smaller close button), as Dialog's `compactHeader`. Without `singleRowHeader` it changes nothing. */\n  compactHeader?: boolean;\n  /** The body has no padding and no scroll of its own: the content lays itself out and owns its scroll regions (DX-5682). */\n  flush?: boolean;\n  className?: string;\n  children?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Drawer({ open, onOpenChange, title, description, headerActions, singleRowHeader, headerActionsGrow, compactHeader, side, size, flush, className, children, ref }: DrawerProps) {\n  const s = drawer({ side, size, flush, bar: Boolean(singleRowHeader), grow: Boolean(headerActionsGrow), compact: Boolean(compactHeader) });\n  const strings = useUiStrings().dialog;\n  const finalFocus = useDialogFinalFocus(open);\n  const handleOpenChange = useSupersedePopovers(open, onOpenChange);\n  const popupElRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popupElRef.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n\n  const closeSize = singleRowHeader && compactHeader ? \"xs\" : \"sm\";\n  const closeButton = (\n    <BaseDialog.Close\n      render={<IconButton label={strings.close} hideTooltip size={closeSize} icon={<Icon name=\"x\" size={closeSize} />} className={s.close()} />}\n    />\n  );\n\n  return (\n    <BaseDialog.Root open={open} onOpenChange={handleOpenChange}>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={s.backdrop()} />\n        <BaseDialog.Popup\n          ref={popupRef}\n          className={cn(s.popup(), className)}\n          finalFocus={finalFocus}\n          initialFocus={headerActions ? () => popupElRef.current : undefined}\n        >\n          <div className={s.header()}>\n            <div className={s.titleBlock()}>\n              <BaseDialog.Title className={s.title()}>{title}</BaseDialog.Title>\n              {description && <BaseDialog.Description className={s.description()}>{description}</BaseDialog.Description>}\n            </div>\n            {headerActions && <div className={headerActionsGrow ? OVERLAY_HEADER_ACTIONS_GROW_CLASS : OVERLAY_HEADER_ACTIONS_CLASS}>{headerActions}</div>}\n            {singleRowHeader && closeButton}\n          </div>\n          {/* Pinned to the popup's corner, outside the header row, as Dialog does (the single-row header carries it in the\n              row); `hideTooltip` because a Base UI `render` slot merges into ONE element. */}\n          {!singleRowHeader && closeButton}\n          {children && <div className={s.body()}>{children}</div>}\n        </BaseDialog.Popup>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\n"],"names":["drawer","tv","overlayBackdropClassName","OVERLAY_POPUP_SURFACE","Drawer","open","onOpenChange","title","description","headerActions","singleRowHeader","headerActionsGrow","compactHeader","side","size","flush","className","children","ref","s","strings","useUiStrings","finalFocus","useDialogFinalFocus","handleOpenChange","useSupersedePopovers","popupElRef","useRef","popupRef","useCallback","el","closeSize","closeButton","jsx","BaseDialog","IconButton","Icon","jsxs","cn","OVERLAY_HEADER_ACTIONS_GROW_CLASS","OVERLAY_HEADER_ACTIONS_CLASS"],"mappings":"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"}

package/dist/components/EditGutter.js

@@ -0,0 +1,110 @@
+import { jsxs as E, jsx as h } from "react/jsx-runtime";
+import { useRef as m, useEffect as b } from "react";
+import { cn as v } from "../lib/cn.js";
+import { useControllable as x } from "../lib/use-controllable.js";
+import { assertActivationPair as C } from "./edit/activation.js";
+import { Icon as y } from "./Icon.js";
+import { IconButton as w } from "./IconButton.js";
+function G({
+  label: n,
+  children: t,
+  editing: e,
+  onEditingChange: o,
+  disabled: i,
+  className: r,
+  size: u = "sm"
+}) {
+  C("EditGutter", e, o);
+  const [c, f] = x(e, !1, o), s = m(null), a = m(null), l = !c && !i, p = m("");
+  N(s, a, l), F(s, a, c);
+  function d(g) {
+    p.current !== "touch" || !l || g.target.closest("a, button, input, textarea, select, [role='button']") === null && f(!0);
+  }
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: s,
+      "data-slot": "edit-gutter",
+      "data-editing": c || void 0,
+      onPointerDown: (g) => {
+        p.current = g.pointerType;
+      },
+      onClick: d,
+      className: v("group/edit-gutter relative min-w-0", r),
+      children: [
+        l && /* @__PURE__ */ h(
+          "span",
+          {
+            ref: a,
+            "data-slot": "edit-gutter-pencil",
+            className: v(
+              "absolute top-0 right-full z-10 flex",
+              "transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+              // DX-3623 — reveal on real HOVER or the pencil's OWN
+              // `:focus-visible` (never `focus-within`, which also fires for
+              // the M2 return-focus programmatic `.focus()` after a
+              // pointer-driven close — see the module comment). DX-4280:
+              // a touch pointer opens the field by tapping the text instead.
+              "opacity-0 pointer-events-none",
+              "[@media(any-hover:hover)]:group-hover/edit-gutter:opacity-100",
+              "[@media(any-hover:hover)]:group-hover/edit-gutter:pointer-events-auto",
+              "has-focus-visible:opacity-100 has-focus-visible:pointer-events-auto"
+            ),
+            children: /* @__PURE__ */ h(w, { icon: /* @__PURE__ */ h(y, { name: "pencil", size: u }), label: n, size: u, onClick: () => f(!0) })
+          }
+        ),
+        t({ editing: c, onEditingChange: f })
+      ]
+    }
+  );
+}
+function R(n, t) {
+  return document.createTreeWalker(n, NodeFilter.SHOW_TEXT, {
+    acceptNode: (o) => t !== null && t.contains(o) || (o.textContent ?? "").trim() === "" ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+  }).nextNode();
+}
+function T(n) {
+  for (let t = n.parentElement; t !== null && t !== document.body; t = t.parentElement) {
+    const { overflowX: e } = getComputedStyle(t);
+    if (e !== "visible") return t;
+  }
+  return null;
+}
+function N(n, t, e) {
+  const o = m(!1);
+  b(() => {
+    const i = n.current, r = t.current;
+    if (!e || !i || !r) return;
+    function u() {
+      if (!i || !r) return;
+      const f = i.getBoundingClientRect(), s = r.getBoundingClientRect(), a = R(i, r);
+      if (a !== null) {
+        const p = document.createRange();
+        p.selectNodeContents(a);
+        const d = p.getClientRects()[0];
+        d !== void 0 && d.height > 0 && (r.style.top = `${d.top - f.top + (d.height - s.height) / 2}px`);
+      }
+      const l = T(i);
+      l !== null && !o.current && s.left < l.getBoundingClientRect().left && (o.current = !0, console.warn(
+        "[danxbot] EditGutter: an ancestor with `overflow` other than visible clips the pencil — it sits in the gutter LEFT of the field, outside its box. Leave that gutter inside the clipping box (padding on the clipping element, or move the overflow further out).",
+        l
+      ));
+    }
+    u();
+    const c = new ResizeObserver(u);
+    return c.observe(i), () => c.disconnect();
+  }, [n, t, e]);
+}
+function F(n, t, e) {
+  const o = m(e);
+  b(() => {
+    const i = o.current && !e;
+    if (o.current = e, !i) return;
+    const r = document.activeElement;
+    (r === null || r === document.body || n.current?.contains(r) === !0) && t.current?.querySelector("button")?.focus();
+  }, [e, n, t]);
+}
+export {
+  G as EditGutter
+};
+//# sourceMappingURL=EditGutter.js.map

package/dist/components/EditGutter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditGutter.js","sources":["../../src/components/EditGutter.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllable } from \"../lib/use-controllable\";\nimport { assertActivationPair, type EditActivation } from \"./edit/activation\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\n\n/* ============================================================================\n   EDIT GUTTER — the pencil that opens a read-only field. DX-3372.\n\n   The operator's design for every editable text in danxbot (DX-3371): the\n   text is read-only; hovering it shows a pencil floating in the LEFT GUTTER;\n   clicking the pencil makes that exact text editable in place and focuses it;\n   losing focus saves and ends editing. Every field needs the same pencil, so it\n   lives here once instead of being hand-rolled beside each one.\n\n   ONE ACTIVATION CONTRACT. This component hands the wrapped field\n   `{ editing, onEditingChange }` (`EditActivation`) through a render prop —\n   the exact controlled pair `InlineEdit` and `InlineMarkdownEdit` both take.\n   So the wrapper knows nothing about which field it wraps: a spread is the\n   whole wiring, and a field closing itself (commit, Escape) or declining to\n   open (read-only) flows back through the same callback that brings the pencil\n   back. `editing` is itself controllable (`useControllable`, like `ReadMore`'s\n   `expanded`): pass `editing` + `onEditingChange` to own it, omit both and the\n   gutter keeps it.\n\n   THE FIELD DECIDES WHETHER IT CAN OPEN (review H3). A read-only field asked\n   to open hands `onEditingChange(false)` straight back, so the pencil returns\n   instead of vanishing for good. `disabled` is only presentation, for a caller\n   that already knows the field is locked: no pencil is rendered at all.\n\n   NO LAYOUT SHIFT, BY CONSTRUCTION. The pencil is absolutely positioned at\n   `right-full` — outside the wrapper's own box, in the gutter to its left — so\n   it contributes nothing to layout in any state. It is revealed by OPACITY\n   only, never `display`/`visibility`/size, which would reflow or pull it out\n   of the tab order.\n\n   THE GUTTER MUST BE LEFT FREE, AND UNCLIPPED. Nothing here reserves it,\n   because reserving it would indent the text away from everything aligned\n   with it; the page leaves it (a padded column, a page margin). An ancestor\n   with `overflow` other than `visible` whose box starts to the right of the\n   pencil cuts it off, so the gutter checks for exactly that when it measures\n   and says so on the console, once per mount (review M6).\n\n   ON THE FIRST LINE. The pencil is centred on the wrapped text's first line\n   box, measured from the DOM, rather than pinned to the wrapper's top edge,\n   which sits above the text by the field's own padding (review M6).\n\n   ACCESSIBLE. The pencil is a real labelled `IconButton` in the tab order at\n   all times — invisible to a mouse user until hover, and visible whenever it\n   genuinely HOLDS keyboard focus. The `(any-hover: hover)` gate suppresses\n   the reveal on a device with a hover-capable pointer; a touch laptop, which\n   also has a mouse, still gets the hover reveal (review M6). While the field\n   is open the pencil is removed: it would be a second, dead target, and focus\n   is already inside the field it opened. When the field closes and focus has\n   nowhere better to be — still inside the wrapper, or fallen to `<body>`\n   because the open editor unmounted — it returns to the pencil (review M2),\n   so a keyboard user's Tab order never dead-ends on a vanished control.\n\n   DX-3623 — REVEAL IS `:focus-visible` ON THE BUTTON ITSELF, NEVER\n   `:focus-within` ON THE WRAPPER. The pre-DX-3623 CSS revealed on\n   `focus-within`, which fires for ANY DOM focus location, including the\n   programmatic `.focus()` the M2 return above performs after a plain mouse\n   click ends an edit. Browsers suppress `:focus-visible` for a focus that\n   followed pointer interaction, so committing a field with a mouse — click\n   the text? no, that never opens it; click elsewhere to blur, or press\n   Escape with a mouse already having been the last input — leaves the pencil\n   invisible even though the M2 return still parks real DOM focus on it. A\n   genuine Tab-key user, whose last input WAS the keyboard, still gets\n   `:focus-visible` and sees exactly what holds focus. This is what makes the\n   pencil stop \"sticking\" after editing (the operator's report) without\n   dropping keyboard affordance entirely. `has-focus-visible` (not a bare\n   `focus-visible` variant) is used because the pseudo-class lives on the\n   `<IconButton>` INSIDE this span, not on the span itself.\n\n   DX-4280 — TOUCH: TAP THE TEXT. A phone has no hover to reveal the pencil, and\n   the gutter it floats in is usually off the screen's left edge, so a pencil a\n   touch user must first find and then hit cannot be relied on. (DX-3623's\n   \"tap the text to reveal, then tap the pencil\" left exactly that overhanging,\n   half-offscreen target as the only way in.) On a TOUCH pointer a tap on the\n   wrapped text IS the activation: `pointerdown` records the pointer type, and\n   the `click` that follows opens the field when that type was `touch` — a\n   scroll or a long-press selection never produces a click, so neither opens\n   it. A tap that lands on an interactive element inside the field (a link in\n   rendered markdown, a button) is that element's tap, not ours. A mouse click\n   on the text still does nothing (DX-3371): only the pencil opens it there.\n   The pencil stays in the tab order and appears on `:focus-visible` for a\n   keyboard or switch user; it is never revealed by touch, and being\n   `pointer-events-none` until hover or keyboard focus it cannot eat a stray tap.\n   ========================================================================= */\n\ninterface EditGutterFieldProps {\n  /**\n   * The pencil's accessible name — say WHAT it edits (\"Edit title\"), because\n   * a screen reader lists it among every other pencil on the page.\n   */\n  label: string;\n  /**\n   * Render the field, spreading the activation onto it:\n   * `{(edit) => <InlineEdit {...edit} … />}`.\n   */\n  children: (activation: EditActivation) => ReactNode;\n  /** Render no pencil — the field cannot be edited here. */\n  disabled?: boolean;\n  className?: string;\n  /**\n   * DX-3623 — `\"sm\"` (default, unchanged) is `--control-sm` (36px on a fine\n   * pointer). `\"xs\"` is `--control-xs` (28px on a fine pointer) for a host\n   * page whose own left gutter is narrower than 36px — it still fits INSIDE\n   * a typical ~32px page gutter with room to spare, where `\"sm\"` would not.\n   * Neither size opts out of the coarse-pointer tap floor (`dx-tap`'s\n   * `min-width`/`min-height: 44px` under `(pointer: coarse)`): on a touch\n   * device the pencil's HIT AREA still grows to the accessible 44px minimum\n   * once revealed, deliberately overhanging past a gutter narrower than\n   * that — it is a `ghost` button, invisible until pressed, so the extra\n   * hit area costs nothing visually and nothing in layout (the pencil is\n   * `position: absolute` throughout, so growing it never shifts content).\n   */\n  size?: \"sm\" | \"xs\";\n}\n\n/**\n * The gutter keeps `editing` itself (omit both), or the caller owns it: pass\n * `editing` AND `onEditingChange` (`EditActivation`) — the pencil then asks\n * through `onEditingChange(true)` and the field's close arrives through\n * `onEditingChange(false)`. One without the other is a type error and throws\n * at render, for the reason `assertActivationPair` gives.\n */\nexport type EditGutterProps = EditGutterFieldProps &\n  ({ editing?: undefined; onEditingChange?: (editing: boolean) => void } | EditActivation);\n\nexport function EditGutter({\n  label,\n  children,\n  editing: editingProp,\n  onEditingChange,\n  disabled,\n  className,\n  size = \"sm\",\n}: EditGutterProps) {\n  assertActivationPair(\"EditGutter\", editingProp, onEditingChange);\n  const [editing, setEditing] = useControllable(editingProp, false, onEditingChange);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const pencilSlotRef = useRef<HTMLSpanElement>(null);\n  const showPencil = !editing && !disabled;\n  // DX-4280: the pointer type of the latest pointerdown, read by the click it precedes.\n  const lastPointerType = useRef(\"\");\n\n  usePencilPlacement(wrapperRef, pencilSlotRef, showPencil);\n  useFocusReturn(wrapperRef, pencilSlotRef, editing);\n\n  function handleWrapperClick(event: React.MouseEvent<HTMLDivElement>) {\n    if (lastPointerType.current !== \"touch\" || !showPencil) return;\n    if ((event.target as Element).closest(\"a, button, input, textarea, select, [role='button']\") !== null) return;\n    setEditing(true);\n  }\n\n  return (\n    <div\n      ref={wrapperRef}\n      data-slot=\"edit-gutter\"\n      data-editing={editing || undefined}\n      onPointerDown={(event) => {\n        lastPointerType.current = event.pointerType;\n      }}\n      onClick={handleWrapperClick}\n      className={cn(\"group/edit-gutter relative min-w-0\", className)}\n    >\n      {showPencil && (\n        <span\n          ref={pencilSlotRef}\n          data-slot=\"edit-gutter-pencil\"\n              className={cn(\n            \"absolute top-0 right-full z-10 flex\",\n            \"transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n            // DX-3623 — reveal on real HOVER or the pencil's OWN\n            // `:focus-visible` (never `focus-within`, which also fires for\n            // the M2 return-focus programmatic `.focus()` after a\n            // pointer-driven close — see the module comment). DX-4280:\n            // a touch pointer opens the field by tapping the text instead.\n            \"opacity-0 pointer-events-none\",\n            \"[@media(any-hover:hover)]:group-hover/edit-gutter:opacity-100\",\n            \"[@media(any-hover:hover)]:group-hover/edit-gutter:pointer-events-auto\",\n            \"has-focus-visible:opacity-100 has-focus-visible:pointer-events-auto\",\n          )}\n        >\n          <IconButton icon={<Icon name=\"pencil\" size={size} />} label={label} size={size} onClick={() => setEditing(true)} />\n        </span>\n      )}\n      {children({ editing, onEditingChange: setEditing })}\n    </div>\n  );\n}\n\n/** The first text node inside `root` that holds something visible, skipping `skip`. */\nfunction firstTextNode(root: Node, skip: Node | null): Text | null {\n  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {\n    acceptNode: (node) =>\n      (skip !== null && skip.contains(node)) || (node.textContent ?? \"\").trim() === \"\"\n        ? NodeFilter.FILTER_REJECT\n        : NodeFilter.FILTER_ACCEPT,\n  });\n  return walker.nextNode() as Text | null;\n}\n\n/** The nearest ancestor that clips horizontally, if any. */\nfunction clippingAncestor(el: HTMLElement): HTMLElement | null {\n  for (let node = el.parentElement; node !== null && node !== document.body; node = node.parentElement) {\n    const { overflowX } = getComputedStyle(node);\n    if (overflowX !== \"visible\") return node;\n  }\n  return null;\n}\n\n/**\n * Centre the pencil on the first line of text and report a clipping ancestor.\n * Measured when the pencil appears and whenever the wrapper resizes (a reflow\n * can move the first line). A passive effect, not a layout effect, because the\n * wrapped field may write its own text in ITS passive effect (`InlineEdit`\n * does), and a child's passive effects run before this one.\n */\nfunction usePencilPlacement(\n  wrapperRef: React.RefObject<HTMLDivElement | null>,\n  slotRef: React.RefObject<HTMLSpanElement | null>,\n  shown: boolean,\n) {\n  const warnedRef = useRef(false);\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    const slot = slotRef.current;\n    if (!shown || !wrapper || !slot) return;\n    function measure() {\n      if (!wrapper || !slot) return;\n      const box = wrapper.getBoundingClientRect();\n      const pencil = slot.getBoundingClientRect();\n      const text = firstTextNode(wrapper, slot);\n      if (text !== null) {\n        const range = document.createRange();\n        range.selectNodeContents(text);\n        const line = range.getClientRects()[0];\n        if (line !== undefined && line.height > 0) {\n          slot.style.top = `${line.top - box.top + (line.height - pencil.height) / 2}px`;\n        }\n      }\n      const clipper = clippingAncestor(wrapper);\n      if (clipper !== null && !warnedRef.current && pencil.left < clipper.getBoundingClientRect().left) {\n        warnedRef.current = true;\n        console.warn(\n          \"[danxbot] EditGutter: an ancestor with `overflow` other than visible clips the pencil — it sits \" +\n            \"in the gutter LEFT of the field, outside its box. Leave that gutter inside the clipping box \" +\n            \"(padding on the clipping element, or move the overflow further out).\",\n          clipper,\n        );\n      }\n    }\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, [wrapperRef, slotRef, shown]);\n}\n\n/**\n * When the field closes, return focus to the pencil if it would otherwise be\n * lost: still inside the wrapper (a field that stays mounted, like\n * `InlineEdit`) or fallen to `<body>` (an editor that unmounted). Focus the\n * reader moved elsewhere is left alone.\n */\nfunction useFocusReturn(\n  wrapperRef: React.RefObject<HTMLDivElement | null>,\n  slotRef: React.RefObject<HTMLSpanElement | null>,\n  editing: boolean,\n) {\n  const wasEditingRef = useRef(editing);\n  useEffect(() => {\n    const closed = wasEditingRef.current && !editing;\n    wasEditingRef.current = editing;\n    if (!closed) return;\n    const active = document.activeElement;\n    const lost = active === null || active === document.body || wrapperRef.current?.contains(active) === true;\n    if (lost) slotRef.current?.querySelector(\"button\")?.focus();\n  }, [editing, wrapperRef, slotRef]);\n}\n"],"names":["EditGutter","label","children","editingProp","onEditingChange","disabled","className","size","assertActivationPair","editing","setEditing","useControllable","wrapperRef","useRef","pencilSlotRef","showPencil","lastPointerType","usePencilPlacement","useFocusReturn","handleWrapperClick","event","jsxs","cn","jsx","IconButton","Icon","firstTextNode","root","skip","node","clippingAncestor","el","overflowX","slotRef","shown","warnedRef","useEffect","wrapper","slot","measure","box","pencil","text","range","line","clipper","observer","wasEditingRef","closed","active"],"mappings":"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"}

package/dist/components/EmojiPicker.js

@@ -0,0 +1,174 @@
+import { jsxs as z, jsx as n } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { Button as q } from "./Button.js";
+import { Field as K } from "./Field.js";
+import { Icon as S } from "./Icon.js";
+import { Input as Q } from "./Input.js";
+import { Popover as R } from "./Popover.js";
+import { SearchInput as A } from "./SearchInput.js";
+import { cn as I } from "../lib/cn.js";
+import { useRovingOptions as F } from "../lib/use-roving-options.js";
+import { useUiStrings as L } from "../lib/i18n/provider.js";
+const H = [
+  ["🚀", "rocket"],
+  ["⭐", "star"],
+  ["🔥", "fire"],
+  ["✅", "check"],
+  ["⚠️", "warning"],
+  ["🐛", "bug"],
+  ["💡", "idea"],
+  ["🎯", "target"],
+  ["📌", "pin"],
+  ["📝", "note"],
+  ["🔒", "lock"],
+  ["🧪", "test"],
+  ["🛠️", "tools"],
+  ["📦", "package"],
+  ["🎨", "palette"],
+  ["💬", "chat"],
+  ["⏳", "hourglass"],
+  ["🏁", "flag"],
+  ["❤️", "heart"],
+  ["👀", "eyes"],
+  ["🌱", "seedling"],
+  ["🧹", "broom"],
+  ["📣", "megaphone"],
+  ["🔔", "bell"]
+], T = 160, B = 8, G = new RegExp("\\p{Extended_Pictographic}|\\p{Regional_Indicator}", "u");
+function J(l) {
+  return [...new Intl.Segmenter().segment(l)].length === 1 && G.test(l);
+}
+const W = (l) => l;
+function se({
+  value: l,
+  onChange: o,
+  label: s,
+  options: g,
+  allowCustom: a = !0,
+  validateCustom: i = J,
+  renderValue: c = W,
+  clearable: h = !0,
+  searchable: u = !1,
+  className: m
+}) {
+  const t = L().emojiPicker, [d, p] = f(!1), [k, N] = f(""), [P, x] = f(!1), [O, j] = f(""), v = g ?? H.map(([e, M]) => ({ value: e, glyph: e, label: t.names[M] })), r = l ?? null, y = r !== null ? v.find((e) => e.value === r) : void 0, D = r !== null && !y ? [{ value: r, glyph: c(r), label: r }, ...v] : v, b = O.trim().toLowerCase(), w = b ? D.filter((e) => e.label.toLowerCase().includes(b) || e.value.toLowerCase().includes(b)) : D, U = u ? w.slice(0, T) : w;
+  function E(e) {
+    p(e), N(""), x(!1), j("");
+  }
+  function C(e) {
+    o(e), E(!1);
+  }
+  function _() {
+    const e = k.trim();
+    if (!i(e)) {
+      x(!0);
+      return;
+    }
+    C(e);
+  }
+  return /* @__PURE__ */ z(
+    R,
+    {
+      open: d,
+      onOpenChange: E,
+      align: "start",
+      "aria-label": s,
+      trigger: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          "aria-label": s,
+          className: I("dx-tap flex size-7 shrink-0 items-center justify-center rounded-md text-base hover:bg-surface-hover", m),
+          children: r !== null ? /* @__PURE__ */ n("span", { "aria-hidden": !0, children: y ? y.glyph : c(r) }) : /* @__PURE__ */ n(S, { name: "smile", size: "sm", className: "text-tertiary" })
+        }
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          X,
+          {
+            label: s,
+            choices: U,
+            current: r,
+            onChoose: C,
+            search: u ? { query: O, onQuery: j, total: w.length } : void 0
+          }
+        ),
+        a && /* @__PURE__ */ n(K, { label: t.typeLabel, error: P ? t.invalid : void 0, className: "mt-3", children: /* @__PURE__ */ n(
+          Q,
+          {
+            size: "sm",
+            value: k,
+            onChange: (e) => {
+              N(e.target.value), x(!1);
+            },
+            onKeyDown: (e) => {
+              e.key === "Enter" && (e.preventDefault(), _());
+            }
+          }
+        ) }),
+        h && r !== null && /* @__PURE__ */ n(q, { size: "sm", variant: "outline", className: "mt-3", leadingIcon: /* @__PURE__ */ n(S, { name: "x", size: "xs" }), onClick: () => C(null), children: t.clear })
+      ]
+    }
+  );
+}
+function X({
+  label: l,
+  choices: o,
+  current: s,
+  onChoose: g,
+  search: a
+}) {
+  const i = L().emojiPicker, { listRef: c, tabIndexFor: h, onKeyDown: u } = F(
+    o.length,
+    o.findIndex((t) => t.value === s),
+    B
+  ), m = /* @__PURE__ */ n(
+    "div",
+    {
+      ref: c,
+      role: "listbox",
+      "aria-label": l,
+      onKeyDown: u,
+      className: I("grid w-max max-w-full grid-cols-8 gap-1 p-1", a && "max-h-56 overflow-y-auto"),
+      children: o.map((t, d) => {
+        const p = t.value === s;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": p,
+            "aria-label": t.label,
+            "data-option-index": d,
+            tabIndex: h(d),
+            onClick: () => g(t.value),
+            className: I("dx-tap flex size-7 items-center justify-center rounded-md text-base", p ? "bg-accent-subtle" : "hover:bg-surface-hover"),
+            children: /* @__PURE__ */ n("span", { "aria-hidden": !0, children: t.glyph })
+          },
+          t.value
+        );
+      })
+    }
+  );
+  return a ? /* @__PURE__ */ z("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ n(
+      A,
+      {
+        size: "sm",
+        "aria-label": i.search,
+        placeholder: i.search,
+        value: a.query,
+        onValueChange: a.onQuery,
+        onKeyDown: (t) => {
+          t.key === "ArrowDown" && (t.preventDefault(), c.current?.querySelector('[tabindex="0"]')?.focus());
+        }
+      }
+    ),
+    o.length === 0 ? /* @__PURE__ */ n("p", { className: "px-1 text-sm text-tertiary", children: i.noMatches }) : m,
+    a.total > o.length && /* @__PURE__ */ n("p", { className: "px-1 text-xs text-tertiary", children: i.showing(o.length, a.total) })
+  ] }) : m;
+}
+export {
+  se as EmojiPicker
+};
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/components/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","sources":["../../src/components/EmojiPicker.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Button } from \"./Button\";\nimport { Field } from \"./Field\";\nimport { Icon } from \"./Icon\";\nimport { Input } from \"./Input\";\nimport { Popover } from \"./Popover\";\nimport { SearchInput } from \"./SearchInput\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { useRovingOptions } from \"../lib/use-roving-options\";\n\n/* ============================================================================\n   EMOJI PICKER - an emoji chosen from a grid, or typed (DXUI-27).\n\n   A trigger showing the current emoji that opens a popover of choices, a field\n   for a value that is not among them, and an optional \"remove\" button.\n   Controlled: `value` in, `onChange` out. The choices are one Tab stop with\n   arrow-key navigation (`useRovingOptions`).\n\n   THE STORED VALUE IS THE CALLER'S, NOT NECESSARILY A GLYPH. A choice is a\n   stored `value`, the `glyph` drawn for it and the spoken `label`. By default\n   the value IS the Unicode character and the glyph is the same character, but\n   a caller that stores a Slack emoji NAME (`gear`, which is also the reaction\n   target) passes options whose value is the name and whose glyph is the\n   character, so the trigger shows the glyph and never the raw name. Three\n   props adapt the free-typed path to the same stored shape:\n\n     validateCustom  accepts a typed value; default: exactly one Unicode emoji.\n     renderValue     draws a stored value that is not among the options (a\n                     typed custom value, or one set elsewhere); default: the\n                     value as text, right for Unicode.\n     allowCustom     false hides the typed field for a closed set.\n\n   A stored value outside the options is still the current value: the trigger\n   draws it and the grid leads with it, selected. `clearable={false}` is for a\n   field that is required: no remove button, `null` is never emitted.\n\n   SEARCH. `searchable` adds a `SearchInput` above the grid that filters the\n   options by label and value (case-insensitive substring). It is for a large\n   set - a product's whole Slack emoji table is about 1,900 names - so the\n   grid draws at most MAX_SHOWN matches and says how many more there are\n   (render cost stays flat however large `options` is); narrowing the search\n   reaches the rest. The search box is its own Tab stop and the grid stays\n   one: ArrowDown in the box moves focus into the grid.\n   ========================================================================= */\n\nexport interface EmojiOption {\n  /** What is stored and handed back to `onChange`. */\n  value: string;\n  /** What is drawn for it. */\n  glyph: ReactNode;\n  /** The spoken name. */\n  label: string;\n}\n\nexport interface EmojiPickerProps {\n  /** The current stored value, or `null`/absent for none. */\n  value: string | null | undefined;\n  onChange: (value: string | null) => void;\n  /** Accessible name of the trigger and the grid, e.g. \"Emoji for Backlog\". */\n  label: string;\n  /** The choices. Default: 24 Unicode emoji whose value is the character. */\n  options?: readonly EmojiOption[];\n  /** Show the field that takes a value not among `options`. @default true */\n  allowCustom?: boolean;\n  /** Whether a typed value is acceptable. @default exactly one Unicode emoji */\n  validateCustom?: (text: string) => boolean;\n  /** Draws a stored value that is not among `options`. @default the value as text */\n  renderValue?: (value: string) => ReactNode;\n  /** Offer a way to remove the emoji (`onChange(null)`). @default true */\n  clearable?: boolean;\n  /** Add a search box that filters `options` by label and value, and draw at most 160 matches at once. @default false */\n  searchable?: boolean;\n  className?: string;\n}\n\nconst UNICODE_CHOICES = [\n  [\"🚀\", \"rocket\"], [\"⭐\", \"star\"], [\"🔥\", \"fire\"], [\"✅\", \"check\"], [\"⚠️\", \"warning\"], [\"🐛\", \"bug\"], [\"💡\", \"idea\"], [\"🎯\", \"target\"],\n  [\"📌\", \"pin\"], [\"📝\", \"note\"], [\"🔒\", \"lock\"], [\"🧪\", \"test\"], [\"🛠️\", \"tools\"], [\"📦\", \"package\"], [\"🎨\", \"palette\"], [\"💬\", \"chat\"],\n  [\"⏳\", \"hourglass\"], [\"🏁\", \"flag\"], [\"❤️\", \"heart\"], [\"👀\", \"eyes\"], [\"🌱\", \"seedling\"], [\"🧹\", \"broom\"], [\"📣\", \"megaphone\"], [\"🔔\", \"bell\"],\n] as const;\n\n/** At most this many matches are drawn when `searchable`; the rest are reached by narrowing the search. */\nconst MAX_SHOWN = 160;\n\nconst COLUMNS = 8;\n\nconst UNICODE_EMOJI = /\\p{Extended_Pictographic}|\\p{Regional_Indicator}/u;\n\n/** True when `text` is exactly one emoji (one grapheme cluster that holds a pictograph or a flag). */\nfunction isSingleUnicodeEmoji(text: string): boolean {\n  const clusters = [...new Intl.Segmenter().segment(text)];\n  return clusters.length === 1 && UNICODE_EMOJI.test(text);\n}\n\nconst asText = (value: string): ReactNode => value;\n\nexport function EmojiPicker({\n  value,\n  onChange,\n  label,\n  options,\n  allowCustom = true,\n  validateCustom = isSingleUnicodeEmoji,\n  renderValue = asText,\n  clearable = true,\n  searchable = false,\n  className,\n}: EmojiPickerProps) {\n  const strings = useUiStrings().emojiPicker;\n  const [open, setOpen] = useState(false);\n  const [draft, setDraft] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const offered: readonly EmojiOption[] =\n    options ?? UNICODE_CHOICES.map(([character, name]) => ({ value: character, glyph: character, label: strings.names[name] }));\n  const current = value ?? null;\n  const known = current !== null ? offered.find((option) => option.value === current) : undefined;\n  const choices =\n    current !== null && !known ? [{ value: current, glyph: renderValue(current), label: current }, ...offered] : offered;\n  const needle = query.trim().toLowerCase();\n  const matches = needle ? choices.filter((choice) => choice.label.toLowerCase().includes(needle) || choice.value.toLowerCase().includes(needle)) : choices;\n  const shown = searchable ? matches.slice(0, MAX_SHOWN) : matches;\n\n  function changeOpen(next: boolean) {\n    setOpen(next);\n    setDraft(\"\");\n    setInvalid(false);\n    setQuery(\"\");\n  }\n\n  function choose(next: string | null) {\n    onChange(next);\n    changeOpen(false);\n  }\n\n  function submitTyped() {\n    const typed = draft.trim();\n    if (!validateCustom(typed)) {\n      setInvalid(true);\n      return;\n    }\n    choose(typed);\n  }\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={changeOpen}\n      align=\"start\"\n      aria-label={label}\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={label}\n          className={cn(\"dx-tap flex size-7 shrink-0 items-center justify-center rounded-md text-base hover:bg-surface-hover\", className)}\n        >\n          {current !== null ? (\n            <span aria-hidden>{known ? known.glyph : renderValue(current)}</span>\n          ) : (\n            <Icon name=\"smile\" size=\"sm\" className=\"text-tertiary\" />\n          )}\n        </button>\n      }\n    >\n      <EmojiGrid\n        label={label}\n        choices={shown}\n        current={current}\n        onChoose={choose}\n        search={searchable ? { query, onQuery: setQuery, total: matches.length } : undefined}\n      />\n      {allowCustom && (\n        <Field label={strings.typeLabel} error={invalid ? strings.invalid : undefined} className=\"mt-3\">\n          <Input\n            size=\"sm\"\n            value={draft}\n            onChange={(event) => {\n              setDraft(event.target.value);\n              setInvalid(false);\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\") {\n                event.preventDefault();\n                submitTyped();\n              }\n            }}\n          />\n        </Field>\n      )}\n      {clearable && current !== null && (\n        <Button size=\"sm\" variant=\"outline\" className=\"mt-3\" leadingIcon={<Icon name=\"x\" size=\"xs\" />} onClick={() => choose(null)}>\n          {strings.clear}\n        </Button>\n      )}\n    </Popover>\n  );\n}\n\nfunction EmojiGrid({\n  label,\n  choices,\n  current,\n  onChoose,\n  search,\n}: {\n  label: string;\n  choices: readonly EmojiOption[];\n  current: string | null;\n  onChoose: (value: string) => void;\n  search?: { query: string; onQuery: (query: string) => void; total: number };\n}) {\n  const strings = useUiStrings().emojiPicker;\n  const { listRef, tabIndexFor, onKeyDown } = useRovingOptions(\n    choices.length,\n    choices.findIndex((choice) => choice.value === current),\n    COLUMNS,\n  );\n  const grid = (\n    <div\n      ref={listRef}\n      role=\"listbox\"\n      aria-label={label}\n      onKeyDown={onKeyDown}\n      className={cn(\"grid w-max max-w-full grid-cols-8 gap-1 p-1\", search && \"max-h-56 overflow-y-auto\")}\n    >\n      {choices.map((choice, index) => {\n        const selected = choice.value === current;\n        return (\n          <button\n            key={choice.value}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={selected}\n            aria-label={choice.label}\n            data-option-index={index}\n            tabIndex={tabIndexFor(index)}\n            onClick={() => onChoose(choice.value)}\n            className={cn(\"dx-tap flex size-7 items-center justify-center rounded-md text-base\", selected ? \"bg-accent-subtle\" : \"hover:bg-surface-hover\")}\n          >\n            <span aria-hidden>{choice.glyph}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n  if (!search) return grid;\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <SearchInput\n        size=\"sm\"\n        aria-label={strings.search}\n        placeholder={strings.search}\n        value={search.query}\n        onValueChange={search.onQuery}\n        onKeyDown={(event) => {\n          if (event.key !== \"ArrowDown\") return;\n          event.preventDefault();\n          listRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n        }}\n      />\n      {choices.length === 0 ? <p className=\"px-1 text-sm text-tertiary\">{strings.noMatches}</p> : grid}\n      {search.total > choices.length && <p className=\"px-1 text-xs text-tertiary\">{strings.showing(choices.length, search.total)}</p>}\n    </div>\n  );\n}\n"],"names":["UNICODE_CHOICES","MAX_SHOWN","COLUMNS","UNICODE_EMOJI","isSingleUnicodeEmoji","text","asText","value","EmojiPicker","onChange","label","options","allowCustom","validateCustom","renderValue","clearable","searchable","className","strings","useUiStrings","open","setOpen","useState","draft","setDraft","invalid","setInvalid","query","setQuery","offered","character","name","current","known","option","choices","needle","matches","choice","shown","changeOpen","next","choose","submitTyped","typed","jsxs","Popover","jsx","cn","Icon","EmojiGrid","Field","Input","event","Button","onChoose","search","listRef","tabIndexFor","onKeyDown","useRovingOptions","grid","index","selected","SearchInput"],"mappings":"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"}

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,47 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Component as n } from "react";
+import { Icon as a } from "./Icon.js";
+import { useUiStrings as i } from "../lib/i18n/provider.js";
+class u extends n {
+  state = { error: null, resetKey: this.props.resetKey };
+  static getDerivedStateFromError(e) {
+    return { error: e };
+  }
+  /* Compared against STATE's own copy of `resetKey`, not the previous props —
+     `getDerivedStateFromProps` runs on every render (including the one
+     `getDerivedStateFromError` triggers), so diffing against last render's
+     props would also fire on that render and immediately clear the very error
+     it just caught. Diffing against state instead only fires when the KEY
+     itself has actually moved on. */
+  static getDerivedStateFromProps(e, r) {
+    return e.resetKey !== r.resetKey ? { error: null, resetKey: e.resetKey } : null;
+  }
+  componentDidCatch(e, r) {
+    console.error(`[danxbot] ${this.props.label ?? "component"} failed to render`, e, r), this.props.onError?.(e, r);
+  }
+  render() {
+    const { error: e } = this.state;
+    return e ? /* @__PURE__ */ o(l, { label: this.props.label, message: e.message }) : this.props.children;
+  }
+}
+function l({ label: t, message: e }) {
+  const r = i().errorBoundary;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      role: "alert",
+      className: "rounded-xl border border-danger-border bg-danger-subtle p-5 text-danger-text",
+      children: [
+        /* @__PURE__ */ s("p", { className: "flex items-center gap-2 font-semibold", children: [
+          /* @__PURE__ */ o(a, { name: "triangle-alert", size: "sm" }),
+          t ? r.failure(t) : r.generic
+        ] }),
+        /* @__PURE__ */ o("pre", { className: "mt-2 overflow-x-auto whitespace-pre-wrap font-mono text-xs opacity-80", children: e })
+      ]
+    }
+  );
+}
+export {
+  u as ErrorBoundary
+};
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../src/components/ErrorBoundary.tsx"],"sourcesContent":["import { Component, type ErrorInfo, type ReactNode } from \"react\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   A single uncaught throw during render unmounts React's entire tree, which\n   presents as a completely blank page with no visible clue. That is the worst\n   possible failure signature: it destroys every part of the UI that was fine,\n   and it hides which component was actually at fault.\n\n   Wrapping each top-level section means a broken component degrades to an\n   inline message in its own slot while the rest of the page keeps working.\n   -------------------------------------------------------------------------- */\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode;\n  /** Shown in the fallback so the failing region is identifiable at a glance. */\n  label?: string;\n  /**\n   * Changing this clears a previously-caught error (SG-833 slice 7).\n   *\n   * A class component's error state is sticky by design — once caught,\n   * `render()` keeps returning the fallback forever, even once whatever\n   * crashed it is no longer what is being shown. That is correct for a\n   * boundary wrapping a fixed region, and wrong for one wrapping a slot whose\n   * CONTENT changes identity underneath it — a list row that starts showing a\n   * different record after a filter or a re-fetch reorders things, for\n   * instance. Passing something that identifies the current content (a\n   * record id, a list key) un-catches the boundary the moment that identity\n   * changes, rather than leaving it permanently wearing a previous item's\n   * crash.\n   *\n   * Omit it for a boundary around a genuinely fixed region — the default\n   * behaviour (sticky until unmount) is unchanged when this is left out.\n   */\n  resetKey?: unknown;\n  /**\n   * Called once per caught error, with React's own error and component stack\n   * (DX-4075). For a consumer that has to REPORT a render failure — a framed\n   * harness posting it to its host — rather than only show it. The fallback and\n   * the console log are unchanged whether or not this is passed.\n   */\n  onError?: (error: Error, info: ErrorInfo) => void;\n}\n\ninterface State {\n  error: Error | null;\n  resetKey?: unknown;\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, State> {\n  state: State = { error: null, resetKey: this.props.resetKey };\n\n  static getDerivedStateFromError(error: Error): Partial<State> {\n    return { error };\n  }\n\n  /* Compared against STATE's own copy of `resetKey`, not the previous props —\n     `getDerivedStateFromProps` runs on every render (including the one\n     `getDerivedStateFromError` triggers), so diffing against last render's\n     props would also fire on that render and immediately clear the very error\n     it just caught. Diffing against state instead only fires when the KEY\n     itself has actually moved on. */\n  static getDerivedStateFromProps(\n    props: ErrorBoundaryProps,\n    state: State,\n  ): Partial<State> | null {\n    if (props.resetKey !== state.resetKey) {\n      return { error: null, resetKey: props.resetKey };\n    }\n    return null;\n  }\n\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    console.error(`[danxbot] ${this.props.label ?? \"component\"} failed to render`, error, info);\n    this.props.onError?.(error, info);\n  }\n\n  render() {\n    const { error } = this.state;\n    if (!error) return this.props.children;\n\n    return <ErrorFallback label={this.props.label} message={error.message} />;\n  }\n}\n\n/* A function component so the words come from the provider: a class cannot call hooks. */\nfunction ErrorFallback({ label, message }: { label?: string; message: string }) {\n  const strings = useUiStrings().errorBoundary;\n  return (\n    <div\n      role=\"alert\"\n      className=\"rounded-xl border border-danger-border bg-danger-subtle p-5 text-danger-text\"\n    >\n      <p className=\"flex items-center gap-2 font-semibold\">\n        <Icon name=\"triangle-alert\" size=\"sm\" />\n        {label ? strings.failure(label) : strings.generic}\n      </p>\n      <pre className=\"mt-2 overflow-x-auto whitespace-pre-wrap font-mono text-xs opacity-80\">\n        {message}\n      </pre>\n    </div>\n  );\n}\n"],"names":["ErrorBoundary","Component","error","props","state","info","jsx","ErrorFallback","label","message","strings","useUiStrings","jsxs","Icon"],"mappings":";;;;AAkDO,MAAMA,UAAsBC,EAAqC;AAAA,EACtE,QAAe,EAAE,OAAO,MAAM,UAAU,KAAK,MAAM,SAAA;AAAA,EAEnD,OAAO,yBAAyBC,GAA8B;AAC5D,WAAO,EAAE,OAAAA,EAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,yBACLC,GACAC,GACuB;AACvB,WAAID,EAAM,aAAaC,EAAM,WACpB,EAAE,OAAO,MAAM,UAAUD,EAAM,SAAA,IAEjC;AAAA,EACT;AAAA,EAEA,kBAAkBD,GAAcG,GAAiB;AAC/C,YAAQ,MAAM,aAAa,KAAK,MAAM,SAAS,WAAW,qBAAqBH,GAAOG,CAAI,GAC1F,KAAK,MAAM,UAAUH,GAAOG,CAAI;AAAA,EAClC;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,OAAAH,MAAU,KAAK;AACvB,WAAKA,IAEE,gBAAAI,EAACC,KAAc,OAAO,KAAK,MAAM,OAAO,SAASL,EAAM,SAAS,IAFpD,KAAK,MAAM;AAAA,EAGhC;AACF;AAGA,SAASK,EAAc,EAAE,OAAAC,GAAO,SAAAC,KAAgD;AAC9E,QAAMC,IAAUC,IAAe;AAC/B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAA,EAAC,KAAA,EAAE,WAAU,yCACX,UAAA;AAAA,UAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,kBAAiB,MAAK,MAAK;AAAA,UACrCL,IAAQE,EAAQ,QAAQF,CAAK,IAAIE,EAAQ;AAAA,QAAA,GAC5C;AAAA,QACA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,yEACZ,UAAAG,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Field.js

@@ -0,0 +1,115 @@
+import { jsxs as e, jsx as t, Fragment as p } from "react/jsx-runtime";
+import { Field as s } from "@base-ui/react/field";
+import { Fieldset as u } from "@base-ui/react/fieldset";
+import { tv as v } from "tailwind-variants";
+import { cn as g } from "../lib/cn.js";
+import { Icon as F } from "./Icon.js";
+const w = v({
+  slots: {
+    root: "flex min-w-0",
+    label: [
+      "font-sans font-medium text-secondary select-none",
+      "transition-colors duration-(--dur-fast)",
+      /* The label follows the control's state rather than staying inert:
+         dimmed when disabled, and tinted when the field is invalid, so the
+         eye lands on the broken field before reading a word. */
+      "data-disabled:text-disabled data-invalid:text-danger-text"
+    ],
+    description: "text-2xs text-tertiary text-balance",
+    error: [
+      "flex items-start gap-1.5 text-2xs font-medium text-danger-text",
+      /* Errors RISE in and fade out faster than they arrived. A message that
+         appears instantly reads as an accusation; one that rises reads as the
+         form answering you. */
+      "data-starting-style:opacity-0 data-starting-style:-translate-y-1",
+      "data-ending-style:opacity-0",
+      "transition-[var(--tx-colors),opacity,translate] duration-(--dur-base) ease-entrance",
+      "data-ending-style:duration-(--dur-exit) data-ending-style:ease-exit"
+    ]
+  },
+  variants: {
+    layout: {
+      /* Label above the control — text inputs, selects, textareas. */
+      stacked: {
+        root: "flex-col gap-1.5",
+        label: "text-xs"
+      },
+      /* Control first, label beside it — checkboxes and switches, where the
+               control is small and the label is the target you actually click.
+      
+               `items-center` on the ROW, and normal line-height on the label. The
+               first version stretched the label's line-height to a control height to
+               fake vertical centring, which works right up until the field has a
+               description — then that inflated line box opens a visible gulf between
+               the label and the text under it. Centring belongs to the layout, not
+               to the type. */
+      inline: {
+        root: "flex-row items-center gap-3",
+        label: "text-sm leading-snug"
+      }
+    }
+  },
+  defaultVariants: { layout: "stacked" }
+});
+function B({
+  label: a,
+  description: n,
+  error: l,
+  required: i,
+  disabled: o,
+  name: y,
+  layout: d = "stacked",
+  className: h,
+  children: c,
+  ref: b
+}) {
+  const r = w({ layout: d }), N = !!l, m = a ? /* @__PURE__ */ e(s.Label, { className: r.label(), children: [
+    a,
+    i && /* @__PURE__ */ t("span", { className: "ml-1 text-danger-text", "aria-hidden": !0, children: "*" })
+  ] }) : null, x = n ? /* @__PURE__ */ t(s.Description, { className: r.description(), render: /* @__PURE__ */ t("p", {}), children: n }) : null, f = l ? (
+    /* role="alert" ON TOP of the aria-describedby association Base UI already
+       makes. The two cover different moments: describedby is read when focus
+       reaches the control, which serves someone tabbing INTO a broken field;
+       alert announces the moment the message appears, which serves someone who
+       just submitted and whose focus is nowhere near it. */
+    /* @__PURE__ */ e(s.Error, { match: !0, role: "alert", className: r.error(), children: [
+      /* @__PURE__ */ t(F, { name: "circle-alert", size: "xs", className: "mt-px" }),
+      /* @__PURE__ */ t("span", { children: l })
+    ] })
+  ) : null;
+  return /* @__PURE__ */ t(
+    s.Root,
+    {
+      ref: b,
+      name: y,
+      disabled: o,
+      invalid: N,
+      className: g(r.root(), h),
+      children: d === "inline" ? /* @__PURE__ */ e(p, { children: [
+        c,
+        /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          m,
+          x,
+          f
+        ] })
+      ] }) : /* @__PURE__ */ e(p, { children: [
+        m,
+        c,
+        x,
+        f
+      ] })
+    }
+  );
+}
+function D({ legend: a, description: n, className: l, children: i, ref: o }) {
+  return /* @__PURE__ */ e(u.Root, { ref: o, className: g("flex min-w-0 flex-col gap-3", l), children: [
+    a && /* @__PURE__ */ t(u.Legend, { className: "font-sans text-sm font-semibold text-primary", children: a }),
+    n && /* @__PURE__ */ t("p", { className: "-mt-2 text-2xs text-tertiary", children: n }),
+    i
+  ] });
+}
+export {
+  B as Field,
+  D as FieldSet
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../src/components/Field.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { Fieldset as BaseFieldset } from \"@base-ui/react/fieldset\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   Field owns the SEMANTICS of a labelled control — label association,\n   description and error wiring, disabled and invalid propagation — and nothing\n   about the control itself.\n\n   The association is delegated to Base UI rather than hand-rolled. That is a\n   correctness decision, not a convenience one: the hand-rolled version of this\n   file shipped a real defect where a checkbox outside a Field generated no id,\n   so its `<label htmlFor>` pointed at nothing and the control had no accessible\n   name at all. Delegating removes the entire class — ids, `aria-describedby`,\n   `aria-invalid` and `aria-required` are wired by the primitive, for every\n   control, including ones we have not written yet.\n   -------------------------------------------------------------------------- */\n\nconst field = tv({\n  slots: {\n    root: \"flex min-w-0\",\n    label: [\n      \"font-sans font-medium text-secondary select-none\",\n      \"transition-colors duration-(--dur-fast)\",\n      /* The label follows the control's state rather than staying inert:\n         dimmed when disabled, and tinted when the field is invalid, so the\n         eye lands on the broken field before reading a word. */\n      \"data-disabled:text-disabled data-invalid:text-danger-text\",\n    ],\n    description: \"text-2xs text-tertiary text-balance\",\n    error: [\n      \"flex items-start gap-1.5 text-2xs font-medium text-danger-text\",\n      /* Errors RISE in and fade out faster than they arrived. A message that\n         appears instantly reads as an accusation; one that rises reads as the\n         form answering you. */\n      \"data-starting-style:opacity-0 data-starting-style:-translate-y-1\",\n      \"data-ending-style:opacity-0\",\n      \"transition-[var(--tx-colors),opacity,translate] duration-(--dur-base) ease-entrance\",\n      \"data-ending-style:duration-(--dur-exit) data-ending-style:ease-exit\",\n    ],\n  },\n  variants: {\n    layout: {\n      /* Label above the control — text inputs, selects, textareas. */\n      stacked: {\n        root: \"flex-col gap-1.5\",\n        label: \"text-xs\",\n      },\n      /* Control first, label beside it — checkboxes and switches, where the\n         control is small and the label is the target you actually click.\n\n         `items-center` on the ROW, and normal line-height on the label. The\n         first version stretched the label's line-height to a control height to\n         fake vertical centring, which works right up until the field has a\n         description — then that inflated line box opens a visible gulf between\n         the label and the text under it. Centring belongs to the layout, not\n         to the type. */\n      inline: {\n        root: \"flex-row items-center gap-3\",\n        label: \"text-sm leading-snug\",\n      },\n    },\n  },\n  defaultVariants: { layout: \"stacked\" },\n});\n\nexport interface FieldProps {\n  label?: ReactNode;\n  /** Helper text. Rendered under the label, and referenced by the control. */\n  description?: ReactNode;\n  /**\n   * An error message. Presence marks the field invalid — one prop rather than\n   * a separate `invalid` boolean, because a field that is invalid with no\n   * message tells the user nothing, and the two are never legitimately apart.\n   */\n  error?: ReactNode;\n  required?: boolean;\n  disabled?: boolean;\n  /** Identifies the field in a form submission. */\n  name?: string;\n  layout?: \"stacked\" | \"inline\";\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Field({\n  label,\n  description,\n  error,\n  required,\n  disabled,\n  name,\n  layout = \"stacked\",\n  className,\n  children,\n  ref,\n}: FieldProps) {\n  const s = field({ layout });\n  const invalid = Boolean(error);\n\n  const labelEl = label ? (\n    <BaseField.Label className={s.label()}>\n      {label}\n      {/* aria-hidden because `required` is already on the control itself and\n          announced from there; the asterisk is the VISUAL half of the same\n          fact, and announcing \"star\" after every required label is noise. */}\n      {required && (\n        <span className=\"ml-1 text-danger-text\" aria-hidden>\n          *\n        </span>\n      )}\n    </BaseField.Label>\n  ) : null;\n\n  const descriptionEl = description ? (\n    <BaseField.Description className={s.description()} render={<p />}>\n      {description}\n    </BaseField.Description>\n  ) : null;\n\n  const errorEl = error ? (\n    /* role=\"alert\" ON TOP of the aria-describedby association Base UI already\n       makes. The two cover different moments: describedby is read when focus\n       reaches the control, which serves someone tabbing INTO a broken field;\n       alert announces the moment the message appears, which serves someone who\n       just submitted and whose focus is nowhere near it. */\n    <BaseField.Error match role=\"alert\" className={s.error()}>\n      <Icon name=\"circle-alert\" size=\"xs\" className=\"mt-px\" />\n      <span>{error}</span>\n    </BaseField.Error>\n  ) : null;\n\n  return (\n    <BaseField.Root\n      ref={ref}\n      name={name}\n      disabled={disabled}\n      invalid={invalid}\n      className={cn(s.root(), className)}\n    >\n      {/* Same parts, different order — which is exactly why this is one\n          component with a variant rather than two. Inline puts the control\n          first and stacks the text beside it; stacked brackets the control. */}\n      {layout === \"inline\" ? (\n        <>\n          {children}\n          <div className=\"flex min-w-0 flex-col gap-0.5\">\n            {labelEl}\n            {descriptionEl}\n            {errorEl}\n          </div>\n        </>\n      ) : (\n        <>\n          {labelEl}\n          {children}\n          {descriptionEl}\n          {errorEl}\n        </>\n      )}\n    </BaseField.Root>\n  );\n}\n\nexport interface FieldSetProps {\n  legend?: ReactNode;\n  description?: ReactNode;\n  className?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLFieldSetElement>;\n}\n\n/**\n * Groups related fields under a shared legend.\n *\n * A real `<fieldset>` / `<legend>` rather than a heading, because a screen\n * reader announces the legend with EACH control inside it — which is the whole\n * point for a group of radios or a set of related toggles, and is not something\n * a heading can do.\n */\nexport function FieldSet({ legend, description, className, children, ref }: FieldSetProps) {\n  return (\n    <BaseFieldset.Root ref={ref} className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      {legend && (\n        <BaseFieldset.Legend className=\"font-sans text-sm font-semibold text-primary\">\n          {legend}\n        </BaseFieldset.Legend>\n      )}\n      {description && <p className=\"-mt-2 text-2xs text-tertiary\">{description}</p>}\n      {children}\n    </BaseFieldset.Root>\n  );\n}\n"],"names":["field","tv","Field","label","description","error","required","disabled","name","layout","className","children","ref","s","invalid","labelEl","jsxs","BaseField","jsx","descriptionEl","errorEl","Icon","cn","Fragment","FieldSet","legend","BaseFieldset"],"mappings":"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"}