@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/ConnectionCard.js

@@ -0,0 +1,98 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as z } from "react";
+import { Badge as k } from "./Badge.js";
+import { Button as w } from "./Button.js";
+import { Card as C, CardFooter as T } from "./Card.js";
+import { Icon as n } from "./Icon.js";
+import { Tooltip as A } from "./Popover.js";
+import { cn as x } from "../lib/cn.js";
+import { useUiStrings as I } from "../lib/i18n/provider.js";
+const S = {
+  healthy: {
+    tone: "success",
+    icon: /* @__PURE__ */ e(n, { name: "circle-check", size: "xs" }),
+    // Quiet on purpose — a correct connection has nothing to announce beyond
+    // the badge, and giving it a coloured border too would spend emphasis a
+    // column of a dozen mostly-fine tiles cannot afford to spread around.
+    border: "border-border"
+  },
+  degraded: {
+    tone: "warning",
+    icon: /* @__PURE__ */ e(n, { name: "triangle-alert", size: "xs" }),
+    border: "border-warning-border"
+  },
+  broken: {
+    tone: "danger",
+    icon: /* @__PURE__ */ e(n, { name: "circle-x", size: "xs" }),
+    border: "border-danger-border"
+  },
+  unknown: {
+    tone: "neutral",
+    icon: /* @__PURE__ */ e(n, { name: "circle-dashed", size: "xs" }),
+    // A DASHED border, not merely a quiet-coloured one — the same convention
+    // `FileUpload`'s empty state already uses for "nothing is here yet". It
+    // gives "never configured" a shape difference on top of the colour
+    // difference, for the exact reader the colour difference does nothing for.
+    border: "border-dashed border-border-subtle"
+  }
+};
+function j() {
+  return /* @__PURE__ */ e("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-surface-inset text-tertiary", children: /* @__PURE__ */ e(n, { name: "link", size: "md" }) });
+}
+function H({
+  logo: u,
+  name: l,
+  description: m,
+  status: o,
+  detail: i,
+  actionLabel: a,
+  onAction: b,
+  actionDisabledReason: s,
+  titleAs: h,
+  className: g
+}) {
+  const f = I().connectionCard, c = S[o], r = s !== void 0, p = z(), y = h ?? "h3";
+  function v(N) {
+    if (r) {
+      N.preventDefault();
+      return;
+    }
+    b?.();
+  }
+  const d = a !== void 0 && /* @__PURE__ */ t(
+    w,
+    {
+      size: "sm",
+      variant: r ? "outline" : o === "unknown" ? "solid" : "outline",
+      "aria-label": f.actionName(a, l),
+      "aria-disabled": r || void 0,
+      "aria-describedby": r ? p : void 0,
+      onClick: v,
+      className: x(
+        // OFF, VISIBLY, AND NOT BY HUE ALONE — dimmed luminance plus a cursor
+        // the pointer actually reaches, exactly `IconButton`'s own off state.
+        r && "cursor-not-allowed opacity-45 active:translate-y-0"
+      ),
+      children: [
+        a,
+        r && /* @__PURE__ */ e("span", { id: p, className: "sr-only", children: s })
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(C, { variant: "flat", padding: "md", className: x(c.border, g), children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-wrap items-start gap-4", children: [
+      u ?? /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ t("div", { className: "flex grow basis-40 flex-col gap-1", children: [
+        /* @__PURE__ */ e(y, { className: "font-display text-md font-semibold text-primary text-balance", children: l }),
+        m && /* @__PURE__ */ e("p", { className: "text-sm text-secondary text-pretty", children: m })
+      ] }),
+      /* @__PURE__ */ e(k, { size: "sm", tone: c.tone, icon: c.icon, children: f.status[o] })
+    ] }),
+    i != null && /* @__PURE__ */ e("p", { className: "text-xs text-tertiary text-pretty", children: i }),
+    d && /* @__PURE__ */ e(T, { children: r ? /* @__PURE__ */ e(A, { content: s, children: d }) : d })
+  ] });
+}
+export {
+  H as ConnectionCard
+};
+//# sourceMappingURL=ConnectionCard.js.map

package/dist/components/ConnectionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionCard.js","sources":["../../src/components/ConnectionCard.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { Badge, type BadgeProps } from \"./Badge\";\nimport { Button, type ButtonProps } from \"./Button\";\nimport { Card, CardFooter, type CardHeaderProps } from \"./Card\";\nimport { Icon } from \"./Icon\";\nimport { Tooltip } from \"./Popover\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\n\n/* ----------------------------------------------------------------------------\n   CONNECTION CARD — one tile in a catalogue of third-party integrations: what\n   it is, whether it works, and the one thing to do about it.\n\n   FOUR STATES, NEVER TWO. It is tempting to model a connection as a boolean —\n   \"connected\" or not — because most of the time that is all a card needs to\n   say. It is also wrong, and the state a boolean erases is the one that costs\n   the most to rediscover: a connection can be authenticated and still not be\n   doing its job. `ConnectionHealth` is a closed four-value union so that case\n   has a name instead of quietly reading as \"connected\":\n\n     unknown  — never configured, or never checked. The \"Connect me\" state.\n     healthy  — connected and working.\n     degraded — connected, but something is partially wrong (data is not\n                flowing, a scope is missing, a sync is stale). Authenticated\n                is not the same claim as working, and most integration UIs\n                only have room for one of them.\n     broken   — connected-but-failing, or misconfigured. Needs action now.\n\n   Collapsing `degraded` into `healthy` hides a slow-burning failure behind a\n   green pill; collapsing it into `broken` cries wolf over something that is\n   still partly doing its job. Neither merge is a simplification — each one\n   deletes a real distinction a real operator needs, which is why this type\n   stays a named four-value union rather than folding into `ok: boolean`.\n\n   BUILT ON `Card`, NOT REINVENTED — the BOX and the FOOTER, still. The root\n   is still `Card`, still `variant=\"flat\"` for `Card`'s own documented reason\n   (\"for cards in a grid, where a dozen shadows turn the page into a quilt\" —\n   exactly this surface), and the action still sits in a plain `CardFooter`.\n\n   THE HEADER ROW, THOUGH, IS COMPOSED HERE — NOT VIA `CardHeader` — AND THAT\n   IS A DELIBERATE REVERSAL, NOT A REINVENTION FOR ITS OWN SAKE. `CardHeader`'s\n   text column is `flex-1` — `flex: 1 1 0%`, a ZERO flex-basis — so the\n   line-breaking decision that `flex-wrap` runs BEFORE any growing/shrinking\n   only ever sees that column at its floor: `min-width: auto`'s automatic\n   minimum, which for a paragraph that is already free to wrap is just its\n   longest unbreakable word, not anything resembling a readable column. Against\n   a fixed-width trailing Badge (~71–110px, \"Not connected\" widest) and a\n   ~36px logo, that floor is small enough that `logo + floor + badge` almost\n   always \"fits\" the line by the wrap algorithm's own arithmetic — so the wrap\n   this row visibly has NEVER FIRES, and the column is left to shrink to\n   whatever sliver is left over instead. Measured on the real 3-column grid\n   `ConnectionCardPage` recommends, at a 1280px viewport (309px card, the\n   demo's own header block calls out `md:grid-cols-2 xl:grid-cols-3` as\n   deliberately NOT a library concern) that sliver was 129px wide and 8 lines\n   tall, next to a mostly-empty card — a defect that shipped in 3.6.0 because\n   the wide demo grid never produces a card narrow enough to hit it.\n\n   The fix is the text column's flex-basis, not its floor: `grow basis-40`\n   (160px) instead of `flex-1`'s implicit `basis-0`. A real basis is what the\n   wrap decision actually measures, so `logo + 160px + badge` now correctly\n   fails to fit at 309px, wraps the Badge onto its own line, and the\n   description gets the FULL card width on the row beneath — not a race\n   against a badge for scraps of one shared row. At the width where it still\n   fits unwrapped (measured 448px card, 267px description, 4 lines — the\n   shipped-and-correct case), the basis is provably a no-op: once a flex line\n   is settled, `grow`'s share of the leftover space is `available − logo −\n   badge − gaps` regardless of what the basis itself was, so this fix cannot\n   change that number. `Card.tsx` and `RecordCard.tsx` carry the identical\n   `flex-1` shape — this file does not touch either, both being outside this\n   component's ownership, and the same defect can in principle still hit any\n   OTHER `CardHeader` consumer whose trailing action is wide enough relative\n   to its own grid. Restoring `<CardHeader ...>` here to \"de-duplicate\" would\n   silently reintroduce the exact regression this comment exists to prevent —\n   check the width math above before doing that.\n\n   THE CARD IS NOT THE BUTTON. A connection tile is not \"click anywhere to\n   manage\" — the primary action is one control with its own name, and the rest\n   of the card is inert. So the root never opts into `Card`'s `interactive`\n   variant; it stays a plain, unfocusable `<div>`, and the ONLY interactive\n   element this component ever renders is the action `Button` in the footer.\n\n   COLOUR IS NEVER THE ONLY CHANNEL (WCAG 1.4.1). Each state gets its own\n   glyph — a filled circle, a triangle, an X, a dashed circle — chosen so the\n   four are distinguishable by SILHOUETTE alone, not only by hue, and its own\n   text label, which a screen reader announces regardless of any of that. The\n   border tint on top is a bonus for a sighted reader scanning a dozen tiles\n   at once; it is never load-bearing, because the badge already carries the\n   full signal without it.\n   -------------------------------------------------------------------------- */\n\nexport type ConnectionHealth = \"healthy\" | \"degraded\" | \"broken\" | \"unknown\";\n\nconst STATUS_META: Record<\n  ConnectionHealth,\n  { tone: BadgeProps[\"tone\"]; icon: ReactNode; border: string }\n> = {\n  healthy: {\n    tone: \"success\",\n    icon: <Icon name=\"circle-check\" size=\"xs\" />,\n    // Quiet on purpose — a correct connection has nothing to announce beyond\n    // the badge, and giving it a coloured border too would spend emphasis a\n    // column of a dozen mostly-fine tiles cannot afford to spread around.\n    border: \"border-border\",\n  },\n  degraded: {\n    tone: \"warning\",\n    icon: <Icon name=\"triangle-alert\" size=\"xs\" />,\n    border: \"border-warning-border\",\n  },\n  broken: {\n    tone: \"danger\",\n    icon: <Icon name=\"circle-x\" size=\"xs\" />,\n    border: \"border-danger-border\",\n  },\n  unknown: {\n    tone: \"neutral\",\n    icon: <Icon name=\"circle-dashed\" size=\"xs\" />,\n    // A DASHED border, not merely a quiet-coloured one — the same convention\n    // `FileUpload`'s empty state already uses for \"nothing is here yet\". It\n    // gives \"never configured\" a shape difference on top of the colour\n    // difference, for the exact reader the colour difference does nothing for.\n    border: \"border-dashed border-border-subtle\",\n  },\n};\n\nexport interface ConnectionCardProps {\n  /**\n   * The service's brand mark. A consumer normally passes a real logo — an\n   * `<img>`, an inline SVG. Omit it and the card falls back to this library's\n   * own `Icon`, so a catalogue is never missing a media slot entirely just\n   * because one integration has no artwork yet.\n   */\n  logo?: ReactNode;\n  /** The service's name. Plain text — it is composed into the action button's\n   *  accessible name (see `actionLabel`), which a JSX tree cannot be. */\n  name: string;\n  /** What this connection is FOR, one line — \"Email via Mailchimp\n   *  Transactional\", not \"Mailchimp integration\". */\n  description?: ReactNode;\n  /** The four-state health model. See the file header for why not a boolean. */\n  status: ConnectionHealth;\n  /** A failure reason, a partial-failure explanation, or a last-checked\n   *  timestamp — whatever the status badge does not already say. Rendered\n   *  only when supplied; omitting it drops the line rather than reserving\n   *  empty space for it. */\n  detail?: ReactNode;\n  /**\n   * The primary action's visible label — typically \"Connect\" for `unknown`,\n   * \"Manage\" (or \"Reconnect\", \"Fix\") otherwise. Omitting it renders no action\n   * at all, for a read-only tile.\n   *\n   * The button's PROMINENCE follows `status`, not this label's wording: an\n   * `unknown` card gets the solid, high-contrast treatment because getting it\n   * connected is the one thing worth doing; every other state gets the\n   * quieter outline treatment, because the card's border and badge are\n   * already carrying the \"look here\" signal and a second loud button would\n   * just compete with them.\n   */\n  actionLabel?: string;\n  onAction?: () => void;\n  /**\n   * Present (and non-`undefined`) disables the action and explains why.\n   *\n   * This is `IconButton`'s `disabledReason` contract, carried over verbatim:\n   * `aria-disabled` rather than native `disabled`, so the control stays\n   * hoverable and focusable — a `disabled` button drops out of hit-testing\n   * entirely, and a control nobody can point at can never be asked why it\n   * won't fire. The reason is announced two ways at once, neither of them\n   * \"only on hover\": an always-present `sr-only` node wired through\n   * `aria-describedby` for a screen reader, and a visible `Tooltip` that opens\n   * on focus as well as on pointer hover, for a keyboard user who generates\n   * no hover event at all.\n   */\n  actionDisabledReason?: string;\n  /**\n   * The heading level the name renders as. See `CardHeader.titleAs` — the\n   * reasoning is identical: a card's correct heading level is a property of\n   * where it sits in the page outline, not of the card, so only the caller\n   * of a whole catalogue grid knows it.\n   *\n   * @default \"h3\"\n   */\n  titleAs?: CardHeaderProps[\"titleAs\"];\n  className?: string;\n}\n\n/** The library's own fallback mark for a connection with no supplied logo —\n *  never a bare, unboxed glyph, so a missing brand asset still occupies the\n *  same footprint a real one would. */\nfunction DefaultLogo() {\n  return (\n    <span className=\"grid size-9 shrink-0 place-items-center rounded-lg bg-surface-inset text-tertiary\">\n      <Icon name=\"link\" size=\"md\" />\n    </span>\n  );\n}\n\nexport function ConnectionCard({\n  logo,\n  name,\n  description,\n  status,\n  detail,\n  actionLabel,\n  onAction,\n  actionDisabledReason,\n  titleAs,\n  className,\n}: ConnectionCardProps) {\n  const strings = useUiStrings().connectionCard;\n  const meta = STATUS_META[status];\n  const off = actionDisabledReason !== undefined;\n  const reasonId = useId();\n  const Title = titleAs ?? \"h3\";\n\n  function handleAction(event: MouseEvent<HTMLButtonElement>) {\n    // The guard lives here, not on the caller's own handler, for the same\n    // reason `IconButton` puts it here: `aria-disabled` leaves the button\n    // genuinely clickable as far as the DOM is concerned, and forgetting this\n    // check is how a soft-disabled control fires anyway.\n    if (off) {\n      event.preventDefault();\n      return;\n    }\n    onAction?.();\n  }\n\n  const actionVariant: ButtonProps[\"variant\"] = off\n    ? \"outline\"\n    : status === \"unknown\"\n      ? \"solid\"\n      : \"outline\";\n\n  const action = actionLabel !== undefined && (\n    <Button\n      size=\"sm\"\n      variant={actionVariant}\n      // Composed rather than the visible label alone: a grid of a dozen\n      // tiles can easily carry several buttons that all just say \"Connect\",\n      // and a screen-reader user tabbing through a \"buttons\" list hears only\n      // the name, never the card around it. The visible label stays short —\n      // sighted readers already have the card for context.\n      aria-label={strings.actionName(actionLabel, name)}\n      aria-disabled={off || undefined}\n      aria-describedby={off ? reasonId : undefined}\n      onClick={handleAction}\n      className={cn(\n        // OFF, VISIBLY, AND NOT BY HUE ALONE — dimmed luminance plus a cursor\n        // the pointer actually reaches, exactly `IconButton`'s own off state.\n        off && \"cursor-not-allowed opacity-45 active:translate-y-0\",\n      )}\n    >\n      {actionLabel}\n      {off && (\n        <span id={reasonId} className=\"sr-only\">\n          {actionDisabledReason}\n        </span>\n      )}\n    </Button>\n  );\n\n  return (\n    <Card variant=\"flat\" padding=\"md\" className={cn(meta.border, className)}>\n      {/* HEADER — see the file header for why this is composed here rather\n          than `<CardHeader>`. `flex-wrap` is the same rule `Card`'s own header\n          slot uses; `basis-40` on the text column is the one line that isn't:\n          it is what makes that wrap actually fire once the Badge no longer\n          fits beside a full-width logo + column, instead of squeezing the\n          column down to its word-wrap floor and never wrapping at all. */}\n      <div className=\"flex flex-wrap items-start gap-4\">\n        {logo ?? <DefaultLogo />}\n        <div className=\"flex grow basis-40 flex-col gap-1\">\n          <Title className=\"font-display text-md font-semibold text-primary text-balance\">\n            {name}\n          </Title>\n          {description && <p className=\"text-sm text-secondary text-pretty\">{description}</p>}\n        </div>\n        <Badge size=\"sm\" tone={meta.tone} icon={meta.icon}>\n          {strings.status[status]}\n        </Badge>\n      </div>\n\n      {detail !== undefined && detail !== null && (\n        <p className=\"text-xs text-tertiary text-pretty\">{detail}</p>\n      )}\n\n      {action && (\n        <CardFooter>\n          {/* The tooltip carries the REASON, and only when there is one — the\n              button already shows its own label as visible text, unlike\n              `IconButton`, so there is nothing for a tooltip to add while the\n              control is live. */}\n          {off ? <Tooltip content={actionDisabledReason}>{action}</Tooltip> : action}\n        </CardFooter>\n      )}\n    </Card>\n  );\n}\n"],"names":["STATUS_META","jsx","Icon","DefaultLogo","ConnectionCard","logo","name","description","status","detail","actionLabel","onAction","actionDisabledReason","titleAs","className","strings","useUiStrings","meta","off","reasonId","useId","Title","handleAction","event","action","jsxs","Button","cn","Card","Badge","CardFooter","Tooltip"],"mappings":";;;;;;;;;AA6FA,MAAMA,IAGF;AAAA,EACF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM,gBAAAC,EAACC,GAAA,EAAK,MAAK,gBAAe,MAAK,MAAK;AAAA;AAAA;AAAA;AAAA,IAI1C,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAM,gBAAAD,EAACC,GAAA,EAAK,MAAK,kBAAiB,MAAK,MAAK;AAAA,IAC5C,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,MAAM,gBAAAD,EAACC,GAAA,EAAK,MAAK,YAAW,MAAK,MAAK;AAAA,IACtC,QAAQ;AAAA,EAAA;AAAA,EAEV,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAM,gBAAAD,EAACC,GAAA,EAAK,MAAK,iBAAgB,MAAK,MAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAK3C,QAAQ;AAAA,EAAA;AAEZ;AAkEA,SAASC,IAAc;AACrB,SACE,gBAAAF,EAAC,QAAA,EAAK,WAAU,qFACd,UAAA,gBAAAA,EAACC,KAAK,MAAK,QAAO,MAAK,KAAA,CAAK,EAAA,CAC9B;AAEJ;AAEO,SAASE,EAAe;AAAA,EAC7B,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAwB;AACtB,QAAMC,IAAUC,IAAe,gBACzBC,IAAOjB,EAAYQ,CAAM,GACzBU,IAAMN,MAAyB,QAC/BO,IAAWC,EAAA,GACXC,IAAQR,KAAW;AAEzB,WAASS,EAAaC,GAAsC;AAK1D,QAAIL,GAAK;AACP,MAAAK,EAAM,eAAA;AACN;AAAA,IACF;AACA,IAAAZ,IAAA;AAAA,EACF;AAQA,QAAMa,IAASd,MAAgB,UAC7B,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAT0CR,IAC1C,YACAV,MAAW,YACT,UACA;AAAA,MAWF,cAAYO,EAAQ,WAAWL,GAAaJ,CAAI;AAAA,MAChD,iBAAeY,KAAO;AAAA,MACtB,oBAAkBA,IAAMC,IAAW;AAAA,MACnC,SAASG;AAAA,MACT,WAAWK;AAAA;AAAA;AAAA,QAGTT,KAAO;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAR;AAAA,QACAQ,KACC,gBAAAjB,EAAC,QAAA,EAAK,IAAIkB,GAAU,WAAU,WAC3B,UAAAP,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKN,SACE,gBAAAa,EAACG,GAAA,EAAK,SAAQ,QAAO,SAAQ,MAAK,WAAWD,EAAGV,EAAK,QAAQH,CAAS,GAOpE,UAAA;AAAA,IAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,MAAApB,uBAASF,GAAA,EAAY;AAAA,MACtB,gBAAAsB,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,QAAA,gBAAAxB,EAACoB,GAAA,EAAM,WAAU,gEACd,UAAAf,GACH;AAAA,QACCC,KAAe,gBAAAN,EAAC,KAAA,EAAE,WAAU,sCAAsC,UAAAM,EAAA,CAAY;AAAA,MAAA,GACjF;AAAA,MACA,gBAAAN,EAAC4B,GAAA,EAAM,MAAK,MAAK,MAAMZ,EAAK,MAAM,MAAMA,EAAK,MAC1C,UAAAF,EAAQ,OAAOP,CAAM,EAAA,CACxB;AAAA,IAAA,GACF;AAAA,IAEyBC,KAAW,0BACjC,KAAA,EAAE,WAAU,qCAAqC,UAAAA,EAAA,CAAO;AAAA,IAG1De,KACC,gBAAAvB,EAAC6B,GAAA,EAKE,UAAAZ,IAAM,gBAAAjB,EAAC8B,KAAQ,SAASnB,GAAuB,UAAAY,EAAA,CAAO,IAAaA,EAAA,CACtE;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/ContextItemRow.js

@@ -0,0 +1,49 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cn as l } from "../lib/cn.js";
+import { AccordionItem as x } from "./Accordion.js";
+import { Badge as m } from "./Badge.js";
+const f = {
+  danxbot: "neutral",
+  repo: "info",
+  plugin: "success"
+};
+function N({ value: n, category: s, source: t, sourceLabel: c, id: d, sizeLabel: p, children: r, className: o }) {
+  const i = /* @__PURE__ */ a("span", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ e(m, { size: "sm", tone: "neutral", children: s }),
+    /* @__PURE__ */ e(m, { size: "sm", tone: f[t], children: c ?? t }),
+    /* @__PURE__ */ e("span", { className: "font-mono text-xs text-primary", children: d }),
+    /* @__PURE__ */ e("span", { className: "ml-auto text-xs text-tertiary", children: p })
+  ] });
+  return r == null || r === !1 ? /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "context-item-row-inert",
+      className: l("flex w-full items-center gap-3 border-b border-border-subtle py-4 last:border-b-0", o),
+      children: [
+        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 text-sm font-medium text-primary", children: i }),
+        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "shrink-0", style: { width: "var(--icon-sm)" } })
+      ]
+    }
+  ) : /* @__PURE__ */ e(x, { value: n, className: o, title: i, children: r });
+}
+function w({ countLabel: n, totalLabel: s, className: t }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: l(
+        "flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded border border-border px-3 py-2 text-sm",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "text-secondary", children: n }),
+        /* @__PURE__ */ e("span", { className: "font-medium text-primary", children: s })
+      ]
+    }
+  );
+}
+export {
+  f as CONTEXT_SOURCE_TONE,
+  N as ContextItemRow,
+  w as ContextSummary
+};
+//# sourceMappingURL=ContextItemRow.js.map

package/dist/components/ContextItemRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextItemRow.js","sources":["../../src/components/ContextItemRow.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { AccordionItem } from \"./Accordion\";\nimport { Badge, type BadgeProps } from \"./Badge\";\n\ntype BadgeTone = NonNullable<BadgeProps[\"tone\"]>;\n\n/* ============================================================================\n   THE CONTEXT-ITEM ROW (DX-5523, from danxbot's dispatch context viewer) — one\n   thing an agent starts with: what KIND it is, where it came FROM, its name and\n   how big it is. Plus the summary line above the list: how many, how large.\n\n   Views over a plain model. Every word arrives from the caller (the category\n   label, the size sentence, the item count and total sentence), so the library\n   fetches nothing and knows no language. The row is an `AccordionItem`, so it\n   goes inside an `Accordion`; its children are the body shown when it opens, and\n   a row with no children is inert (a picture that is not interactive).\n\n   `CONTEXT_SOURCE_TONE` is the one place a source gets a colour: the app's viewer\n   and the 50arms.ai picture of it both read it, so they cannot drift apart. The\n   source id itself (\"danxbot\", \"repo\", \"plugin\") is data, not copy, and is shown\n   as given.\n\n   It renders on a server: nothing here reads `window` or `document`.\n   ========================================================================= */\n\n/** Where a piece of an agent's context came from. */\nexport type ContextSource = \"danxbot\" | \"repo\" | \"plugin\";\n\n/** The badge tone of each source. */\nexport const CONTEXT_SOURCE_TONE = {\n  danxbot: \"neutral\",\n  repo: \"info\",\n  plugin: \"success\",\n} as const satisfies Record<ContextSource, BadgeTone>;\n\nexport interface ContextItemRowProps {\n  /** The `Accordion` item value; unique within the list. */\n  value: string;\n  /** The category, already in the reader's language (\"Skill\"). */\n  category: string;\n  source: ContextSource;\n  /** The Badge text for the source when it should differ from the id (\"50 Arms\" for \"danxbot\"); `source` still picks the tone. */\n  sourceLabel?: string;\n  /** The item's own name, shown in mono. */\n  id: string;\n  /** The size sentence (\"9,600 bytes · ~2,400 tokens\"), already formatted. */\n  sizeLabel: string;\n  /** The body shown when the row opens. */\n  children?: ReactNode;\n  className?: string;\n}\n\nexport function ContextItemRow({ value, category, source, sourceLabel, id, sizeLabel, children, className }: ContextItemRowProps) {\n  const title = (\n    <span className=\"flex flex-wrap items-center gap-2\">\n      <Badge size=\"sm\" tone=\"neutral\">\n        {category}\n      </Badge>\n      <Badge size=\"sm\" tone={CONTEXT_SOURCE_TONE[source]}>\n        {sourceLabel ?? source}\n      </Badge>\n      <span className=\"font-mono text-xs text-primary\">{id}</span>\n      <span className=\"ml-auto text-xs text-tertiary\">{sizeLabel}</span>\n    </span>\n  );\n  if (children === undefined || children === null || children === false) {\n    /* DX-5523: nothing to open, so no button, no chevron and nothing to focus. The row keeps the open row's padding, text\n       size and a chevron-wide spacer, so a list mixing both reads as one column at one height. */\n    return (\n      <div\n        data-slot=\"context-item-row-inert\"\n        className={cn(\"flex w-full items-center gap-3 border-b border-border-subtle py-4 last:border-b-0\", className)}\n      >\n        <span className=\"min-w-0 flex-1 text-sm font-medium text-primary\">{title}</span>\n        <span aria-hidden className=\"shrink-0\" style={{ width: \"var(--icon-sm)\" }} />\n      </div>\n    );\n  }\n  return (\n    <AccordionItem value={value} className={className} title={title}>\n      {children}\n    </AccordionItem>\n  );\n}\n\nexport interface ContextSummaryProps {\n  /** \"5 items\", already in the reader's language. */\n  countLabel: string;\n  /** \"20,000 bytes · ~5,000 tokens total\", already formatted. */\n  totalLabel: string;\n  className?: string;\n}\n\n/** The line above the list: how many items, and what they add up to. */\nexport function ContextSummary({ countLabel, totalLabel, className }: ContextSummaryProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded border border-border px-3 py-2 text-sm\",\n        className,\n      )}\n    >\n      <span className=\"text-secondary\">{countLabel}</span>\n      <span className=\"font-medium text-primary\">{totalLabel}</span>\n    </div>\n  );\n}\n"],"names":["CONTEXT_SOURCE_TONE","ContextItemRow","value","category","source","sourceLabel","id","sizeLabel","children","className","title","jsxs","jsx","Badge","cn","AccordionItem","ContextSummary","countLabel","totalLabel"],"mappings":";;;;AA8BO,MAAMA,IAAsB;AAAA,EACjC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AACV;AAmBO,SAASC,EAAe,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,aAAAC,GAAa,IAAAC,GAAI,WAAAC,GAAW,UAAAC,GAAU,WAAAC,KAAkC;AAChI,QAAMC,IACJ,gBAAAC,EAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,MAAK,MAAK,MAAK,WACnB,UAAAV,GACH;AAAA,IACA,gBAAAS,EAACC,KAAM,MAAK,MAAK,MAAMb,EAAoBI,CAAM,GAC9C,UAAAC,KAAeD,EAAA,CAClB;AAAA,IACA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,kCAAkC,UAAAN,GAAG;AAAA,IACrD,gBAAAM,EAAC,QAAA,EAAK,WAAU,iCAAiC,UAAAL,EAAA,CAAU;AAAA,EAAA,GAC7D;AAEF,SAA8BC,KAAa,QAAQA,MAAa,KAI5D,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,qFAAqFL,CAAS;AAAA,MAE5G,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,mDAAmD,UAAAF,GAAM;AAAA,QACzE,gBAAAE,EAAC,QAAA,EAAK,eAAW,IAAC,WAAU,YAAW,OAAO,EAAE,OAAO,mBAAiB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAK/E,gBAAAA,EAACG,GAAA,EAAc,OAAAb,GAAc,WAAAO,GAAsB,OAAAC,GAChD,UAAAF,GACH;AAEJ;AAWO,SAASQ,EAAe,EAAE,YAAAC,GAAY,YAAAC,GAAY,WAAAT,KAAkC;AACzF,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAK,GAAW;AAAA,QAC7C,gBAAAL,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAAM,EAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D;"}

package/dist/components/CopyValue.js

@@ -0,0 +1,57 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { useState as x, useRef as g, useEffect as h } from "react";
+import { copyText as b } from "../lib/clipboard.js";
+import { cn as S } from "../lib/cn.js";
+import { Icon as T } from "./Icon.js";
+import { IconButton as w } from "./IconButton.js";
+import { useUiStrings as v } from "../lib/i18n/provider.js";
+const E = 2e3;
+function V({ value: i, copyValue: a, label: l, onCopied: m, onCopyError: u, className: p }) {
+  const o = v().copyValue, [t, n] = x("idle"), e = g(null);
+  h(
+    () => () => {
+      e.current !== null && clearTimeout(e.current);
+    },
+    []
+  );
+  const d = async () => {
+    const s = a ?? i;
+    let c;
+    try {
+      await b(s), c = "copied", m?.(s);
+    } catch (f) {
+      c = "failed", u?.(f);
+    }
+    n(c), e.current !== null && clearTimeout(e.current), e.current = setTimeout(() => n("idle"), E);
+  };
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      "data-copy-value": "",
+      className: S(
+        "flex w-full min-w-0 items-center gap-2 rounded-md border border-border bg-surface-inset px-3 py-1.5",
+        p
+      ),
+      children: [
+        /* @__PURE__ */ r("code", { className: "min-w-0 flex-1 truncate font-mono text-sm text-primary", children: i }),
+        /* @__PURE__ */ r(
+          w,
+          {
+            icon: /* @__PURE__ */ r(T, { name: t === "copied" ? "check" : t === "failed" ? "triangle-alert" : "copy", size: "sm" }),
+            label: o.copy(l),
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              d();
+            }
+          }
+        ),
+        /* @__PURE__ */ r("span", { role: "status", className: "sr-only", children: t === "copied" ? o.copied : t === "failed" ? o.failed : "" })
+      ]
+    }
+  );
+}
+export {
+  V as CopyValue
+};
+//# sourceMappingURL=CopyValue.js.map

package/dist/components/CopyValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyValue.js","sources":["../../src/components/CopyValue.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { copyText } from \"../lib/clipboard\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\n\n/* ============================================================================\n   COPY VALUE — a value a person must carry somewhere else (a sign-up code, an\n   invite command, a link), with the one-click copy that goes with it.\n\n   WHY THE LIBRARY OWNS IT. Every consumer that needed this hand-built the same\n   three things: a monospace readout, an icon button, and a toast on the result.\n   The button is where it goes wrong — no accessible name, no answer when the\n   browser refuses the clipboard — so the control is one component whose `label`\n   is required (the `IconButton` argument) and whose failure is said on the\n   control itself, never swallowed.\n\n   WHAT IS SHOWN IS NOT NECESSARILY WHAT IS COPIED. `copyValue` defaults to\n   `value`; a sign-up code is shown as the code and copied as its sign-up LINK,\n   which is the thing a recipient can use. The button's name says which\n   (\"Copy sign-up link\"), so the difference is never a surprise.\n\n   THE OUTCOME IS ANNOUNCED. The icon turns into a check (or a warning) for\n   `RESET_MS`, and the same words go to a polite live region, so a screen-reader\n   user hears \"Copied\" or \"Copy failed\" and a sighted user is not left guessing\n   whether the click landed. Failure means BOTH the async Clipboard API and the\n   `execCommand` fallback refused (`copyText`), the only case that is a real\n   failure.\n   ========================================================================= */\n\nconst RESET_MS = 2000;\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nexport interface CopyValueProps {\n  /** What is shown, in a monospace readout. */\n  value: string;\n  /** What lands on the clipboard. Defaults to `value`. */\n  copyValue?: string;\n  /** Names the copy action for assistive tech and the tooltip, e.g. \"sign-up link\" → \"Copy sign-up link\". Required: an icon-only control has no other name. */\n  label: string;\n  /** Fires after a successful copy, with the text that was copied. */\n  onCopied?: (copied: string) => void;\n  /** Fires when the browser refused the clipboard, with the underlying error. */\n  onCopyError?: (error: unknown) => void;\n  className?: string;\n}\n\nexport function CopyValue({ value, copyValue, label, onCopied, onCopyError, className }: CopyValueProps) {\n  const strings = useUiStrings().copyValue;\n  const [state, setState] = useState<CopyState>(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current !== null) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copy = async () => {\n    const text = copyValue ?? value;\n    let next: CopyState;\n    try {\n      await copyText(text);\n      next = \"copied\";\n      onCopied?.(text);\n    } catch (error) {\n      next = \"failed\";\n      onCopyError?.(error);\n    }\n    setState(next);\n    if (timer.current !== null) clearTimeout(timer.current);\n    timer.current = setTimeout(() => setState(\"idle\"), RESET_MS);\n  };\n\n  return (\n    <div\n      data-copy-value=\"\"\n      className={cn(\n        \"flex w-full min-w-0 items-center gap-2 rounded-md border border-border bg-surface-inset px-3 py-1.5\",\n        className,\n      )}\n    >\n      <code className=\"min-w-0 flex-1 truncate font-mono text-sm text-primary\">{value}</code>\n      <IconButton\n        icon={<Icon name={state === \"copied\" ? \"check\" : state === \"failed\" ? \"triangle-alert\" : \"copy\"} size=\"sm\" />}\n        label={strings.copy(label)}\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={() => void copy()}\n      />\n      <span role=\"status\" className=\"sr-only\">\n        {state === \"copied\" ? strings.copied : state === \"failed\" ? strings.failed : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"names":["RESET_MS","CopyValue","value","copyValue","label","onCopied","onCopyError","className","strings","useUiStrings","state","setState","useState","timer","useRef","useEffect","copy","text","next","copyText","error","jsxs","cn","jsx","IconButton","Icon"],"mappings":";;;;;;;AA+BA,MAAMA,IAAW;AAkBV,SAASC,EAAU,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,aAAAC,GAAa,WAAAC,KAA6B;AACvG,QAAMC,IAAUC,IAAe,WACzB,CAACC,GAAOC,CAAQ,IAAIC,EAAoB,MAAM,GAC9CC,IAAQC,EAA6C,IAAI;AAE/D,EAAAC;AAAA,IACE,MAAM,MAAM;AACV,MAAIF,EAAM,YAAY,QAAM,aAAaA,EAAM,OAAO;AAAA,IACxD;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAMG,IAAO,YAAY;AACvB,UAAMC,IAAOd,KAAaD;AAC1B,QAAIgB;AACJ,QAAI;AACF,YAAMC,EAASF,CAAI,GACnBC,IAAO,UACPb,IAAWY,CAAI;AAAA,IACjB,SAASG,GAAO;AACd,MAAAF,IAAO,UACPZ,IAAcc,CAAK;AAAA,IACrB;AACA,IAAAT,EAASO,CAAI,GACTL,EAAM,YAAY,QAAM,aAAaA,EAAM,OAAO,GACtDA,EAAM,UAAU,WAAW,MAAMF,EAAS,MAAM,GAAGX,CAAQ;AAAA,EAC7D;AAEA,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAgB;AAAA,MAChB,WAAWC;AAAA,QACT;AAAA,QACAf;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,0DAA0D,UAAArB,GAAM;AAAA,QAChF,gBAAAqB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM,gBAAAD,EAACE,GAAA,EAAK,MAAMf,MAAU,WAAW,UAAUA,MAAU,WAAW,mBAAmB,QAAQ,MAAK,KAAA,CAAK;AAAA,YAC3G,OAAOF,EAAQ,KAAKJ,CAAK;AAAA,YACzB,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,MAAA;AAAM,cAAKY,EAAA;AAAA;AAAA,UAAK;AAAA,QAAA;AAAA,QAE3B,gBAAAO,EAAC,QAAA,EAAK,MAAK,UAAS,WAAU,WAC3B,UAAAb,MAAU,WAAWF,EAAQ,SAASE,MAAU,WAAWF,EAAQ,SAAS,GAAA,CAC/E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/CountBadge.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { BADGE_NEUTRAL_TONE as a } from "./Badge.js";
+import { cn as i } from "../lib/cn.js";
+const s = {
+  neutral: ["border", a],
+  danger: ["bg-danger", "text-danger-contrast"]
+}, d = "-right-1 -top-1", l = "-top-[11px] left-[calc(100%-5px)]", n = 99;
+function u({ count: t, tone: e, outside: r = !1 }) {
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-icon-button-badge": e,
+      className: i(
+        "pointer-events-none absolute inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-2xs font-semibold leading-none tabular-nums",
+        r ? l : d,
+        s[e]
+      ),
+      children: t > n ? `${n}+` : t
+    }
+  );
+}
+export {
+  u as CountBadge
+};
+//# sourceMappingURL=CountBadge.js.map

package/dist/components/CountBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountBadge.js","sources":["../../src/components/CountBadge.tsx"],"sourcesContent":["import { BADGE_NEUTRAL_TONE } from \"./Badge\";\nimport { cn } from \"../lib/cn\";\n\n/** `neutral` is the quiet gray of a count nothing waits on, `danger` the red of one that does. */\nexport type CountBadgeTone = \"neutral\" | \"danger\";\n\n/** The face of each tone. A solid red, so an unread count is the first thing the eye finds; the gray one is the library's raised surface, as a `Badge` neutral. */\nconst TONE = {\n  neutral: [\"border\", BADGE_NEUTRAL_TONE],\n  danger: [\"bg-danger\", \"text-danger-contrast\"],\n} as const satisfies Record<CountBadgeTone, readonly string[]>;\n\nconst INSIDE = \"-right-1 -top-1\";\nconst OUTSIDE = \"-top-[11px] left-[calc(100%-5px)]\";\n\nconst MAX = 99;\n\n/**\n * DX-6446 — a count as a small round badge on the top-right corner of its positioned parent (`relative`), the one look every comment count has:\n * the comment button's, and the card face's comment mark. It is a SIBLING of the glyph's clipping control, never inside it: `Button` clips its content\n * (`overflow-hidden`, for the ripple), which cut the badge and, once it was pulled inward, put it over the glyph.\n * `outside` rides the badge on the corner of a bare glyph: it overlaps only a 5px square of the glyph's corner and is anchored by its left edge, so a wider count grows away from the glyph; the owner reserves the width to its right.\n * The number is zero-inclusive (a count of nothing is still a count) and reads `99+` above 99. `aria-hidden`: the owner's label says the count.\n */\nexport function CountBadge({ count, tone, outside = false }: { count: number; tone: CountBadgeTone; outside?: boolean }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-icon-button-badge={tone}\n      className={cn(\n        \"pointer-events-none absolute inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-2xs font-semibold leading-none tabular-nums\",\n        outside ? OUTSIDE : INSIDE,\n        TONE[tone],\n      )}\n    >\n      {count > MAX ? `${MAX}+` : count}\n    </span>\n  );\n}\n"],"names":["TONE","BADGE_NEUTRAL_TONE","INSIDE","OUTSIDE","MAX","CountBadge","count","tone","outside","jsx","cn"],"mappings":";;;AAOA,MAAMA,IAAO;AAAA,EACX,SAAS,CAAC,UAAUC,CAAkB;AAAA,EACtC,QAAQ,CAAC,aAAa,sBAAsB;AAC9C,GAEMC,IAAS,mBACTC,IAAU,qCAEVC,IAAM;AASL,SAASC,EAAW,EAAE,OAAAC,GAAO,MAAAC,GAAM,SAAAC,IAAU,MAAqE;AACvH,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,0BAAwBF;AAAA,MACxB,WAAWG;AAAA,QACT;AAAA,QACAF,IAAUL,IAAUD;AAAA,QACpBF,EAAKO,CAAI;AAAA,MAAA;AAAA,MAGV,UAAAD,IAAQF,IAAM,GAAGA,CAAG,MAAME;AAAA,IAAA;AAAA,EAAA;AAGjC;"}

package/dist/components/DateCalendar.js

@@ -0,0 +1,156 @@
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import { useState as Y, useMemo as K } from "react";
+import { cn as O } from "../lib/cn.js";
+import { dateFormat as L } from "../lib/intl-cache.js";
+import { Icon as P } from "./Icon.js";
+import { Button as j } from "./Button.js";
+import { IconButton as z } from "./IconButton.js";
+import { useUiLocale as G, useUiStrings as Z } from "../lib/i18n/provider.js";
+const u = (e, o, s) => new Date(e, o, s), b = (e) => u(e.getFullYear(), e.getMonth(), e.getDate()), m = (e, o) => !!e && !!o && e.getFullYear() === o.getFullYear() && e.getMonth() === o.getMonth() && e.getDate() === o.getDate(), v = (e, o) => u(e.getFullYear(), e.getMonth(), e.getDate() + o), x = (e, o) => u(e.getFullYear(), e.getMonth() + o, 1), $ = (e) => (e.getDay() + 6) % 7;
+function J(e) {
+  const o = u(e.getFullYear(), e.getMonth(), 1), s = v(o, -$(o));
+  return Array.from({ length: 42 }, (D, f) => v(s, f));
+}
+const nt = "w-[19rem] p-3 pointer-coarse:w-[22rem] pointer-coarse:p-2";
+function st({
+  value: e,
+  onValueChange: o,
+  range: s = !1,
+  min: D,
+  max: f,
+  isDateDisabled: E,
+  clearable: I = !0,
+  className: R
+}) {
+  const w = G(), d = Z().dateCalendar, _ = Array.from(
+    { length: 7 },
+    (t, l) => L(w, { weekday: "short", timeZone: "UTC" }).format(new Date(Date.UTC(2024, 0, 1 + l)))
+  ), M = e ?? null, r = s ? M ?? { from: null, to: null } : null, k = s ? null : M, [a, c] = Y(() => b(k ?? r?.from ?? /* @__PURE__ */ new Date())), [S, A] = Y(null), B = K(() => J(a), [a]), g = b(/* @__PURE__ */ new Date()), h = r?.to ?? (r?.from && S ? S : null), [F, C] = r?.from && h && h < r.from ? [h, r.from] : [r?.from ?? null, h];
+  function N(t) {
+    return D && t < b(D) || f && t > b(f) ? !0 : E?.(t) ?? !1;
+  }
+  function U(t) {
+    if (!N(t)) {
+      if (!s) {
+        o?.(t);
+        return;
+      }
+      if (!r?.from || r.from && r.to)
+        o?.({ from: t, to: null });
+      else {
+        const l = r.from;
+        o?.(t < l ? { from: t, to: l } : { from: l, to: t });
+      }
+    }
+  }
+  function T(t, l) {
+    const p = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    if (p[t.key] !== void 0) {
+      t.preventDefault();
+      const n = v(l, p[t.key]);
+      n.getMonth() !== a.getMonth() && c(u(n.getFullYear(), n.getMonth(), 1)), queueMicrotask(() => {
+        document.querySelector(`[data-day="${n.toDateString()}"]`)?.focus();
+      });
+    } else (t.key === "PageUp" || t.key === "PageDown") && (t.preventDefault(), c((n) => x(n, t.key === "PageUp" ? -1 : 1)));
+  }
+  return (
+    /* The calendar FILLS its popover (`CALENDAR_POPOVER_CLASS` sizes that), so the month grid
+       never reflows as the day count changes and never outgrows a phone: a fixed frame wider
+       than 90vw is what clipped it. */
+    /* @__PURE__ */ y("div", { className: O("flex w-full flex-col gap-3", R), children: [
+      /* @__PURE__ */ y("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ i(
+          z,
+          {
+            label: d.previousMonth,
+            icon: /* @__PURE__ */ i(P, { name: "chevron-left", size: "sm" }),
+            onClick: () => c((t) => x(t, -1))
+          }
+        ),
+        /* @__PURE__ */ i("span", { "aria-live": "polite", className: "text-sm font-semibold text-primary", children: L(w, { month: "long", year: "numeric" }).format(a) }),
+        /* @__PURE__ */ i(
+          z,
+          {
+            label: d.nextMonth,
+            icon: /* @__PURE__ */ i(P, { name: "chevron-right", size: "sm" }),
+            onClick: () => c((t) => x(t, 1))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ y("div", { className: "grid grid-cols-7 gap-0.5 pointer-coarse:gap-0", role: "grid", children: [
+        _.map((t) => /* @__PURE__ */ i(
+          "span",
+          {
+            role: "columnheader",
+            className: "grid h-7 place-items-center text-2xs font-semibold text-tertiary",
+            children: t
+          },
+          t
+        )),
+        B.map((t) => {
+          const l = t.getMonth() !== a.getMonth(), p = N(t), n = s ? m(t, r?.from) || m(t, r?.to) : m(t, k), q = !!F && !!C && t > F && t < C;
+          return /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "data-day": t.toDateString(),
+              disabled: p,
+              "aria-selected": n,
+              "aria-current": m(t, g) ? "date" : void 0,
+              onClick: () => U(t),
+              onMouseEnter: () => A(t),
+              onMouseLeave: () => A(null),
+              onKeyDown: (H) => T(H, t),
+              className: O(
+                "dx-tap grid h-9 place-items-center rounded-md text-sm tabular-nums",
+                "transition-[var(--tx-colors)] duration-(--dur-instant)",
+                "disabled:pointer-events-none disabled:opacity-30",
+                /* Days from the neighbouring months stay VISIBLE but quiet.
+                   Blanking them leaves ragged holes at the grid's corners and
+                   makes the six-week frame look broken. */
+                l ? "text-tertiary/60" : "text-secondary",
+                /* EXACTLY ONE hover fill is ever emitted, chosen here rather
+                   than layered in CSS. Layered, `hover:not-disabled:` carries
+                   three conditions and the selected day's own `hover:bg-control`
+                   carried two, so the UNSELECTED hover fill out-specified it:
+                   pointing at the chosen date repainted it slate and the
+                   selection disappeared under the pointer. That was the
+                   reported bug. A ternary cannot lose that race. */
+                n ? "bg-control font-semibold text-control-contrast hover:not-disabled:bg-control-hover" : q ? "rounded-none bg-control-subtle text-control-text hover:not-disabled:bg-control-subtle-hover" : "hover:not-disabled:bg-surface-hover",
+                m(t, g) && !n && "font-semibold text-control-text"
+              ),
+              children: t.getDate()
+            },
+            t.toISOString()
+          );
+        })
+      ] }),
+      /* @__PURE__ */ y("div", { className: "flex items-center justify-between gap-2 border-t border-border-subtle pt-2.5", children: [
+        /* @__PURE__ */ i(
+          j,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => {
+              c(g), U(g);
+            },
+            children: d.today
+          }
+        ),
+        I && /* @__PURE__ */ i(j, { size: "sm", variant: "ghost", onClick: () => o?.(s ? { from: null, to: null } : null), children: d.clear })
+      ] })
+    ] })
+  );
+}
+export {
+  nt as CALENDAR_POPOVER_CLASS,
+  st as DateCalendar,
+  b as startOfDay
+};
+//# sourceMappingURL=DateCalendar.js.map

package/dist/components/DateCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateCalendar.js","sources":["../../src/components/DateCalendar.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { dateFormat } from \"../lib/intl-cache\";\nimport { Icon } from \"./Icon\";\nimport { Button } from \"./Button\";\nimport { IconButton } from \"./IconButton\";\n\n/* ============================================================================\n   DATE CALENDAR — the month grid, on its own.\n\n   Written from scratch — Base UI ships no date primitive, and every dependency\n   that does brings a date library with it. Split out of `DatePicker` (SG-906)\n   so the two date controls that need a calendar — `DatePicker`, a button that\n   opens one, and `DateField`, a typeable box with one beside it — draw the SAME\n   calendar rather than two copies of it.\n\n   NO DATE LIBRARY. The whole calendar is `Date` arithmetic, which is enough\n   because the only operations a month grid needs are \"first of the month\",\n   \"day of week\" and \"add a day\", and the platform does all three.\n\n   THE THREE THINGS PICKERS GET WRONG:\n\n     1. TIMEZONE DRIFT. Building dates from ISO strings parses them as UTC, so\n        anyone west of Greenwich sees yesterday. Every date here is constructed\n        from local year/month/day components, never parsed from a string.\n     2. THE SIX-WEEK GRID. Months span five or six weeks depending on where\n        they start, so a grid sized to its content changes height as you page\n        through the year and the buttons move under the pointer. This always\n        renders six weeks.\n     3. KEYBOARD. Arrows move by day, PageUp/PageDown by month. A calendar you\n        cannot drive from the keyboard fails the people who need it most.\n\n   RANGE MODE previews as you hover, so the span you are about to select is\n   visible before you commit to it.\n   ========================================================================= */\n\n/** Local-midnight date. Never `new Date(\"2026-08-19\")` — that parses as UTC. */\nconst at = (year: number, month: number, day: number) => new Date(year, month, day);\n\nexport const startOfDay = (d: Date) => at(d.getFullYear(), d.getMonth(), d.getDate());\nconst sameDay = (a?: Date | null, b?: Date | null) =>\n  !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\nconst addDays = (d: Date, n: number) => at(d.getFullYear(), d.getMonth(), d.getDate() + n);\nconst addMonths = (d: Date, n: number) => at(d.getFullYear(), d.getMonth() + n, 1);\n\n/** Monday-first weekday index. `getDay()` is Sunday-first, which most of the world is not. */\nconst mondayIndex = (d: Date) => (d.getDay() + 6) % 7;\n\n/** Always 42 cells — six weeks — so the grid never changes height. */\nfunction monthGrid(month: Date): Date[] {\n  const first = at(month.getFullYear(), month.getMonth(), 1);\n  const start = addDays(first, -mondayIndex(first));\n  return Array.from({ length: 42 }, (_, i) => addDays(start, i));\n}\n\nexport type DateRange = { from: Date | null; to: Date | null };\n\n/**\n * The popover a calendar opens in — ONE size for every control that opens one (`DatePicker`,\n * `DateField`), so they cannot drift apart.\n *\n * A touch day is floored to 44px (`dx-tap`), so seven of them need 308px, and a popover is capped\n * at 90vw. With the old fixed 20.5rem frame plus 12px padding a 375px phone clipped the Sunday\n * column, the next-month arrow and Clear (SG-906, measured). So on a coarse pointer the padding\n * drops to 8px and the calendar fills the popover instead of fixing its own width: 308px of days +\n * 16px of padding = 324px, which is 90vw of a 360px phone. On a mouse nothing changes size.\n */\nexport const CALENDAR_POPOVER_CLASS = \"w-[19rem] p-3 pointer-coarse:w-[22rem] pointer-coarse:p-2\";\n\nexport interface DateCalendarProps {\n  /** A single date, or a range when `range` is set. */\n  value?: Date | DateRange | null;\n  onValueChange?: (value: Date | DateRange | null) => void;\n  range?: boolean;\n  min?: Date;\n  max?: Date;\n  /** Disable specific days — weekends, holidays, taken slots. */\n  isDateDisabled?: (date: Date) => boolean;\n  /** Draw the Clear button. `false` for a field that must always hold a date: no Clear button, and the calendar never emits an empty value. */\n  clearable?: boolean;\n  className?: string;\n}\n\nexport function DateCalendar({\n  value,\n  onValueChange,\n  range = false,\n  min,\n  max,\n  isDateDisabled,\n  clearable = true,\n  className,\n}: DateCalendarProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().dateCalendar;\n  /* Monday-first column heads, named by the locale: 2024-01-01 is a Monday. */\n  const weekdayHeads = Array.from({ length: 7 }, (_, i) =>\n    dateFormat(locale, { weekday: \"short\", timeZone: \"UTC\" }).format(new Date(Date.UTC(2024, 0, 1 + i))),\n  );\n  const selected = value ?? null;\n  const asRange = range ? ((selected as DateRange | null) ?? { from: null, to: null }) : null;\n  const single = range ? null : (selected as Date | null);\n\n  const [month, setMonth] = useState<Date>(() => startOfDay(single ?? asRange?.from ?? new Date()));\n  /* Hover preview for the second half of a range. */\n  const [hovered, setHovered] = useState<Date | null>(null);\n\n  const days = useMemo(() => monthGrid(month), [month]);\n  const today = startOfDay(new Date());\n\n  const rangeEnd = asRange?.to ?? (asRange?.from && hovered ? hovered : null);\n  const [spanFrom, spanTo] =\n    asRange?.from && rangeEnd && rangeEnd < asRange.from ? [rangeEnd, asRange.from] : [asRange?.from ?? null, rangeEnd];\n\n  function isOutOfBounds(date: Date) {\n    if (min && date < startOfDay(min)) return true;\n    if (max && date > startOfDay(max)) return true;\n    return isDateDisabled?.(date) ?? false;\n  }\n\n  function pick(date: Date) {\n    if (isOutOfBounds(date)) return;\n    if (!range) {\n      onValueChange?.(date);\n      return;\n    }\n    /* A complete range, or none at all, starts a new one. Otherwise the click\n       closes the open range — with the ends swapped if you picked backwards,\n       because \"select 20th then 12th\" obviously means the 12th to the 20th. */\n    if (!asRange?.from || (asRange.from && asRange.to)) {\n      onValueChange?.({ from: date, to: null });\n    } else {\n      const from = asRange.from;\n      onValueChange?.(date < from ? { from: date, to: from } : { from, to: date });\n    }\n  }\n\n  function onKeyDown(event: React.KeyboardEvent, date: Date) {\n    const moves: Record<string, number> = {\n      ArrowLeft: -1,\n      ArrowRight: 1,\n      ArrowUp: -7,\n      ArrowDown: 7,\n    };\n    if (moves[event.key] !== undefined) {\n      event.preventDefault();\n      const next = addDays(date, moves[event.key]);\n      if (next.getMonth() !== month.getMonth()) setMonth(at(next.getFullYear(), next.getMonth(), 1));\n      // Focus follows the DOM, which re-renders with the new month in place.\n      queueMicrotask(() => {\n        document.querySelector<HTMLButtonElement>(`[data-day=\"${next.toDateString()}\"]`)?.focus();\n      });\n    } else if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n      setMonth((m) => addMonths(m, event.key === \"PageUp\" ? -1 : 1));\n    }\n  }\n\n  return (\n    /* The calendar FILLS its popover (`CALENDAR_POPOVER_CLASS` sizes that), so the month grid\n       never reflows as the day count changes and never outgrows a phone: a fixed frame wider\n       than 90vw is what clipped it. */\n    <div className={cn(\"flex w-full flex-col gap-3\", className)}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <IconButton\n          label={strings.previousMonth}\n          icon={<Icon name=\"chevron-left\" size=\"sm\" />}\n          onClick={() => setMonth((m) => addMonths(m, -1))}\n        />\n        <span aria-live=\"polite\" className=\"text-sm font-semibold text-primary\">\n          {dateFormat(locale, { month: \"long\", year: \"numeric\" }).format(month)}\n        </span>\n        <IconButton\n          label={strings.nextMonth}\n          icon={<Icon name=\"chevron-right\" size=\"sm\" />}\n          onClick={() => setMonth((m) => addMonths(m, 1))}\n        />\n      </div>\n\n      {/* No gap on a coarse pointer: seven 44px touch days must fit a 360px phone's popover. */}\n      <div className=\"grid grid-cols-7 gap-0.5 pointer-coarse:gap-0\" role=\"grid\">\n        {weekdayHeads.map((day) => (\n          <span\n            key={day}\n            role=\"columnheader\"\n            className=\"grid h-7 place-items-center text-2xs font-semibold text-tertiary\"\n          >\n            {day}\n          </span>\n        ))}\n\n        {days.map((date) => {\n          const outside = date.getMonth() !== month.getMonth();\n          const isDisabled = isOutOfBounds(date);\n          const isSelected = range ? sameDay(date, asRange?.from) || sameDay(date, asRange?.to) : sameDay(date, single);\n          const inSpan = !!spanFrom && !!spanTo && date > spanFrom && date < spanTo;\n\n          return (\n            <button\n              key={date.toISOString()}\n              type=\"button\"\n              role=\"gridcell\"\n              data-day={date.toDateString()}\n              disabled={isDisabled}\n              aria-selected={isSelected}\n              aria-current={sameDay(date, today) ? \"date\" : undefined}\n              onClick={() => pick(date)}\n              onMouseEnter={() => setHovered(date)}\n              onMouseLeave={() => setHovered(null)}\n              onKeyDown={(e) => onKeyDown(e, date)}\n              className={cn(\n                \"dx-tap grid h-9 place-items-center rounded-md text-sm tabular-nums\",\n                \"transition-[var(--tx-colors)] duration-(--dur-instant)\",\n                \"disabled:pointer-events-none disabled:opacity-30\",\n                /* Days from the neighbouring months stay VISIBLE but quiet.\n                   Blanking them leaves ragged holes at the grid's corners and\n                   makes the six-week frame look broken. */\n                outside ? \"text-tertiary/60\" : \"text-secondary\",\n                /* EXACTLY ONE hover fill is ever emitted, chosen here rather\n                   than layered in CSS. Layered, `hover:not-disabled:` carries\n                   three conditions and the selected day's own `hover:bg-control`\n                   carried two, so the UNSELECTED hover fill out-specified it:\n                   pointing at the chosen date repainted it slate and the\n                   selection disappeared under the pointer. That was the\n                   reported bug. A ternary cannot lose that race. */\n                isSelected\n                  ? \"bg-control font-semibold text-control-contrast hover:not-disabled:bg-control-hover\"\n                  : inSpan\n                    ? \"rounded-none bg-control-subtle text-control-text hover:not-disabled:bg-control-subtle-hover\"\n                    : \"hover:not-disabled:bg-surface-hover\",\n                sameDay(date, today) && !isSelected && \"font-semibold text-control-text\",\n              )}\n            >\n              {date.getDate()}\n            </button>\n          );\n        })}\n      </div>\n\n      <div className=\"flex items-center justify-between gap-2 border-t border-border-subtle pt-2.5\">\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={() => {\n            setMonth(today);\n            pick(today);\n          }}\n        >\n          {strings.today}\n        </Button>\n        {clearable && (\n          <Button size=\"sm\" variant=\"ghost\" onClick={() => onValueChange?.(range ? { from: null, to: null } : null)}>\n            {strings.clear}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["at","year","month","day","startOfDay","d","sameDay","a","b","addDays","n","addMonths","mondayIndex","monthGrid","first","start","_","i","CALENDAR_POPOVER_CLASS","DateCalendar","value","onValueChange","range","min","max","isDateDisabled","clearable","className","locale","useUiLocale","strings","useUiStrings","weekdayHeads","dateFormat","selected","asRange","single","setMonth","useState","hovered","setHovered","days","useMemo","today","rangeEnd","spanFrom","spanTo","isOutOfBounds","date","pick","from","onKeyDown","event","moves","next","m","cn","jsxs","jsx","IconButton","Icon","outside","isDisabled","isSelected","inSpan","e","Button"],"mappings":"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"}