@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/calendar/use-now.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-now.js","sources":["../../../src/components/calendar/use-now.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/* ----------------------------------------------------------------------------\n   THE CURRENT INSTANT, RE-READ ONLY WHEN IT MATTERS.\n\n   TWO THINGS ARE WRONG WITH `setInterval(…, 60000)` HERE, and the second is the\n   one that shows.\n\n   IT DRIFTS. A 60-second interval started at :37 fires at :37 forever, so the\n   line sits up to 59 seconds behind the minute it claims. Sleeping to the NEXT\n   BOUNDARY instead means every tick lands on the minute and the error is\n   bounded by the timer's own accuracy rather than by when the component\n   mounted.\n\n   AND A BACKGROUNDED TAB FREEZES IT. Browsers clamp timers in hidden tabs —\n   heavily, and eventually not at all — so a tab left open over lunch comes back\n   with the now-indicator forty-five minutes stale, pointing at an hour that has\n   passed. That is an open FullCalendar bug, and the fix is five lines:\n   re-read on `visibilitychange`. Without it the line is not merely late, it is\n   confidently wrong, which is worse than absent.\n   -------------------------------------------------------------------------- */\n\nexport interface UseNowOptions {\n  /**\n   * How often the value should change, in ms. 60,000 for a minute-resolution\n   * indicator.\n   */\n  readonly resolutionMs?: number;\n  /** Set false to freeze the value — for tests and visual baselines. */\n  readonly enabled?: boolean;\n  /** A fixed instant to report instead of the clock. Overrides `enabled`. */\n  readonly fixed?: number;\n}\n\n/**\n * `Date.now()`, re-read on each boundary of `resolutionMs`.\n *\n * `fixed` exists because every visual baseline in this package is a screenshot:\n * a now-indicator driven by the real clock moves a few pixels every minute and\n * re-records itself forever, so the demo and the preview pass a fixed instant\n * and the gate keeps gating.\n */\nexport function useNow(options: UseNowOptions = {}): number {\n  const { resolutionMs = 60_000, enabled = true, fixed } = options;\n  const [now, setNow] = useState<number>(() => fixed ?? Date.now());\n\n  useEffect(() => {\n    if (fixed !== undefined) {\n      setNow(fixed);\n      return;\n    }\n    if (!enabled) return;\n\n    let timer: ReturnType<typeof setTimeout> | undefined;\n\n    const tick = () => {\n      const current = Date.now();\n      setNow(current);\n      /* SLEEP TO THE NEXT BOUNDARY, not for a fixed span. `+ 1` so a tick that\n         lands a hair early does not schedule a zero-length wait and spin. */\n      const untilNext = resolutionMs - (current % resolutionMs) + 1;\n      timer = setTimeout(tick, untilNext);\n    };\n\n    /* A hidden tab's timers are clamped and may stop entirely. Re-reading on\n       the way back is what stops the indicator returning stale. */\n    const onVisibility = () => {\n      if (document.visibilityState !== \"visible\") return;\n      if (timer !== undefined) clearTimeout(timer);\n      tick();\n    };\n\n    tick();\n    document.addEventListener(\"visibilitychange\", onVisibility);\n    return () => {\n      if (timer !== undefined) clearTimeout(timer);\n      document.removeEventListener(\"visibilitychange\", onVisibility);\n    };\n  }, [enabled, fixed, resolutionMs]);\n\n  return now;\n}\n"],"names":["useNow","options","resolutionMs","enabled","fixed","now","setNow","useState","useEffect","timer","tick","current","untilNext","onVisibility"],"mappings":";AA0CO,SAASA,EAAOC,IAAyB,IAAY;AAC1D,QAAM,EAAE,cAAAC,IAAe,KAAQ,SAAAC,IAAU,IAAM,OAAAC,MAAUH,GACnD,CAACI,GAAKC,CAAM,IAAIC,EAAiB,MAAMH,KAAS,KAAK,KAAK;AAEhE,SAAAI,EAAU,MAAM;AACd,QAAIJ,MAAU,QAAW;AACvB,MAAAE,EAAOF,CAAK;AACZ;AAAA,IACF;AACA,QAAI,CAACD,EAAS;AAEd,QAAIM;AAEJ,UAAMC,IAAO,MAAM;AACjB,YAAMC,IAAU,KAAK,IAAA;AACrB,MAAAL,EAAOK,CAAO;AAGd,YAAMC,IAAYV,IAAgBS,IAAUT,IAAgB;AAC5D,MAAAO,IAAQ,WAAWC,GAAME,CAAS;AAAA,IACpC,GAIMC,IAAe,MAAM;AACzB,MAAI,SAAS,oBAAoB,cAC7BJ,MAAU,UAAW,aAAaA,CAAK,GAC3CC,EAAA;AAAA,IACF;AAEA,WAAAA,EAAA,GACA,SAAS,iBAAiB,oBAAoBG,CAAY,GACnD,MAAM;AACX,MAAIJ,MAAU,UAAW,aAAaA,CAAK,GAC3C,SAAS,oBAAoB,oBAAoBI,CAAY;AAAA,IAC/D;AAAA,EACF,GAAG,CAACV,GAASC,GAAOF,CAAY,CAAC,GAE1BG;AACT;"}

package/dist/components/card-face/AcRingGlyph.js

@@ -0,0 +1,39 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { cn as I } from "../../lib/cn.js";
+import { useNumberFormat as E } from "../../lib/i18n/number-format.js";
+import { BADGE_TONE_TEXT as i } from "../Badge.js";
+import { Icon as l } from "../Icon.js";
+import { ProgressRing as R } from "../Progress.js";
+import { ROW_RING_SIZE as _ } from "./hit-area.js";
+import { TapTip as A } from "./TapTip.js";
+import { CRITERION_STATES as f, CRITERION_STATE_VISUALS as o, CARD_FACE_ICONS as C } from "./vocabulary.js";
+function V({ total: a, byStatus: r, items: m, stateLabels: t, summary: N, label: d }) {
+  const x = E();
+  if (a === 0) return null;
+  const g = r.passing, u = r.failing > 0 ? i.danger : g === a ? i.success : void 0, h = f.map((e) => ({
+    value: r[e],
+    tone: o[e].tone,
+    label: t[e]
+  })).filter((e) => e.value > 0), T = /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ s("p", { className: "font-medium text-primary", children: N }),
+    /* @__PURE__ */ s("ul", { className: "flex flex-col gap-0.5", children: m ? m.map((e, n) => {
+      const p = o[e.status];
+      return /* @__PURE__ */ c("li", { className: "flex items-start gap-1.5", children: [
+        /* @__PURE__ */ s(l, { name: p.icon, size: "xs", className: I("mt-0.5 shrink-0", i[p.tone]) }),
+        /* @__PURE__ */ s("span", { className: "text-secondary", children: e.title })
+      ] }, n);
+    }) : f.filter((e) => r[e] > 0).map((e) => {
+      const n = o[e];
+      return /* @__PURE__ */ c("li", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ s(l, { name: n.icon, size: "xs", className: i[n.tone] }),
+        /* @__PURE__ */ s("span", { className: "text-secondary", children: t[e] }),
+        /* @__PURE__ */ s("span", { className: "ml-auto text-tertiary", children: x(r[e]) })
+      ] }, e);
+    }) })
+  ] });
+  return /* @__PURE__ */ s(A, { tooltip: T, testId: "ac-ring", className: "text-secondary", children: /* @__PURE__ */ s(R, { segments: h, total: a, size: "row", className: _, showValue: !1, label: d, children: /* @__PURE__ */ s(l, { name: C["indicator.acceptanceCriteria"], size: "sm", className: u }) }) });
+}
+export {
+  V as AcRingGlyph
+};
+//# sourceMappingURL=AcRingGlyph.js.map

package/dist/components/card-face/AcRingGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AcRingGlyph.js","sources":["../../../src/components/card-face/AcRingGlyph.tsx"],"sourcesContent":["import { cn } from \"../../lib/cn\";\nimport { useNumberFormat } from \"../../lib/i18n/number-format\";\nimport { BADGE_TONE_TEXT } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { ProgressRing, type ProgressRingSegment } from \"../Progress\";\nimport { ROW_RING_SIZE } from \"./hit-area\";\nimport { TapTip } from \"./TapTip\";\nimport { CARD_FACE_ICONS, CRITERION_STATES, CRITERION_STATE_VISUALS, type CriterionState } from \"./vocabulary\";\n\n/* ============================================================================\n   THE AC-RING GLYPH (DX-3014, DX-4099, DX-5425) — the acceptance-criteria\n   sibling of `GateRingGlyph`: the same row-height segmented donut, one arc\n   per criterion state, around the criteria icon (danger when one fails,\n   success when all pass).\n\n   FIVE states, each its own arc: `deferred` and `cancelled` (Withdrawn) are\n   marked on purpose, so folding them into \"outstanding\" would hide what a\n   person chose.\n\n   The tooltip names each criterion when the caller has them (`items`), and\n   otherwise lists a count per state: still a real breakdown, one level less\n   detailed. Renders NOTHING when there are no criteria.\n   ========================================================================= */\n\nexport interface AcRingItem {\n  title: string;\n  status: CriterionState;\n}\n\nexport interface AcRingGlyphProps {\n  /** How many criteria the card has: the ring's denominator. */\n  total: number;\n  /** How many criteria are in each state: the ring's arcs and, without `items`, the tooltip's rows. */\n  byStatus: Readonly<Record<CriterionState, number>>;\n  /** Each criterion's title and state, when the caller has them: the tooltip then names each one. */\n  items?: readonly AcRingItem[];\n  /** Each state's name (\"Passing\"), for the arcs and the count rows. */\n  stateLabels: Readonly<Record<CriterionState, string>>;\n  /** The tooltip's heading, e.g. \"Acceptance criteria: 3 of 5 passing, 1 failing\". */\n  summary: string;\n  /** The ring's accessible name. */\n  label: string;\n}\n\nexport function AcRingGlyph({ total, byStatus, items, stateLabels, summary, label }: AcRingGlyphProps) {\n  const formatNumber = useNumberFormat();\n  if (total === 0) return null;\n\n  const passing = byStatus.passing;\n  const failing = byStatus.failing;\n  const centreClass = failing > 0 ? BADGE_TONE_TEXT.danger : passing === total ? BADGE_TONE_TEXT.success : undefined;\n\n  const segments: ProgressRingSegment[] = CRITERION_STATES.map((state) => ({\n    value: byStatus[state],\n    tone: CRITERION_STATE_VISUALS[state].tone,\n    label: stateLabels[state],\n  })).filter((segment) => segment.value > 0);\n\n  const content = (\n    <div className=\"flex flex-col gap-1 text-xs\">\n      <p className=\"font-medium text-primary\">{summary}</p>\n      <ul className=\"flex flex-col gap-0.5\">\n        {items\n          ? items.map((item, index) => {\n              const visual = CRITERION_STATE_VISUALS[item.status];\n              return (\n                <li key={index} className=\"flex items-start gap-1.5\">\n                  <Icon name={visual.icon} size=\"xs\" className={cn(\"mt-0.5 shrink-0\", BADGE_TONE_TEXT[visual.tone])} />\n                  <span className=\"text-secondary\">{item.title}</span>\n                </li>\n              );\n            })\n          : CRITERION_STATES.filter((state) => byStatus[state] > 0).map((state) => {\n              const visual = CRITERION_STATE_VISUALS[state];\n              return (\n                <li key={state} className=\"flex items-center gap-1.5\">\n                  <Icon name={visual.icon} size=\"xs\" className={BADGE_TONE_TEXT[visual.tone]} />\n                  <span className=\"text-secondary\">{stateLabels[state]}</span>\n                  <span className=\"ml-auto text-tertiary\">{formatNumber(byStatus[state])}</span>\n                </li>\n              );\n            })}\n      </ul>\n    </div>\n  );\n\n  return (\n    <TapTip tooltip={content} testId=\"ac-ring\" className=\"text-secondary\">\n      <ProgressRing segments={segments} total={total} size=\"row\" className={ROW_RING_SIZE} showValue={false} label={label}>\n        <Icon name={CARD_FACE_ICONS[\"indicator.acceptanceCriteria\"]} size=\"sm\" className={centreClass} />\n      </ProgressRing>\n    </TapTip>\n  );\n}\n"],"names":["AcRingGlyph","total","byStatus","items","stateLabels","summary","label","formatNumber","useNumberFormat","passing","centreClass","BADGE_TONE_TEXT","segments","CRITERION_STATES","state","CRITERION_STATE_VISUALS","segment","content","jsxs","jsx","item","index","visual","Icon","cn","TapTip","ProgressRing","ROW_RING_SIZE","CARD_FACE_ICONS"],"mappings":";;;;;;;;;AA4CO,SAASA,EAAY,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,aAAAC,GAAa,SAAAC,GAAS,OAAAC,KAA2B;AACrG,QAAMC,IAAeC,EAAA;AACrB,MAAIP,MAAU,EAAG,QAAO;AAExB,QAAMQ,IAAUP,EAAS,SAEnBQ,IADUR,EAAS,UACK,IAAIS,EAAgB,SAASF,MAAYR,IAAQU,EAAgB,UAAU,QAEnGC,IAAkCC,EAAiB,IAAI,CAACC,OAAW;AAAA,IACvE,OAAOZ,EAASY,CAAK;AAAA,IACrB,MAAMC,EAAwBD,CAAK,EAAE;AAAA,IACrC,OAAOV,EAAYU,CAAK;AAAA,EAAA,EACxB,EAAE,OAAO,CAACE,MAAYA,EAAQ,QAAQ,CAAC,GAEnCC,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAd,GAAQ;AAAA,IACjD,gBAAAc,EAAC,QAAG,WAAU,yBACX,cACGhB,EAAM,IAAI,CAACiB,GAAMC,MAAU;AACzB,YAAMC,IAASP,EAAwBK,EAAK,MAAM;AAClD,aACE,gBAAAF,EAAC,MAAA,EAAe,WAAU,4BACxB,UAAA;AAAA,QAAA,gBAAAC,EAACI,GAAA,EAAK,MAAMD,EAAO,MAAM,MAAK,MAAK,WAAWE,EAAG,mBAAmBb,EAAgBW,EAAO,IAAI,CAAC,GAAG;AAAA,QACnG,gBAAAH,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAK,MAAA,CAAM;AAAA,MAAA,EAAA,GAFtCE,CAGT;AAAA,IAEJ,CAAC,IACDR,EAAiB,OAAO,CAACC,MAAUZ,EAASY,CAAK,IAAI,CAAC,EAAE,IAAI,CAACA,MAAU;AACrE,YAAMQ,IAASP,EAAwBD,CAAK;AAC5C,aACE,gBAAAI,EAAC,MAAA,EAAe,WAAU,6BACxB,UAAA;AAAA,QAAA,gBAAAC,EAACI,GAAA,EAAK,MAAMD,EAAO,MAAM,MAAK,MAAK,WAAWX,EAAgBW,EAAO,IAAI,EAAA,CAAG;AAAA,0BAC3E,QAAA,EAAK,WAAU,kBAAkB,UAAAlB,EAAYU,CAAK,GAAE;AAAA,QACrD,gBAAAK,EAAC,UAAK,WAAU,yBAAyB,YAAajB,EAASY,CAAK,CAAC,EAAA,CAAE;AAAA,MAAA,EAAA,GAHhEA,CAIT;AAAA,IAEJ,CAAC,EAAA,CACP;AAAA,EAAA,GACF;AAGF,SACE,gBAAAK,EAACM,GAAA,EAAO,SAASR,GAAS,QAAO,WAAU,WAAU,kBACnD,UAAA,gBAAAE,EAACO,GAAA,EAAa,UAAAd,GAAoB,OAAAX,GAAc,MAAK,OAAM,WAAW0B,GAAe,WAAW,IAAO,OAAArB,GACrG,UAAA,gBAAAa,EAACI,GAAA,EAAK,MAAMK,EAAgB,8BAA8B,GAAG,MAAK,MAAK,WAAWlB,EAAA,CAAa,GACjG,GACF;AAEJ;"}

package/dist/components/card-face/BoardCardAgentSlot.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { AvatarGroup as i, Avatar as n } from "../Avatar.js";
+import { Badge as a } from "../Badge.js";
+import { Icon as l } from "../Icon.js";
+import { TapTip as e } from "./TapTip.js";
+import { CARD_FACE_ICONS as m } from "./vocabulary.js";
+function h({ agent: t }) {
+  if (t.kind === "children") {
+    if (t.agents.length === 0) throw new Error("BoardCardAgentSlot: a children slot needs at least one agent");
+    return /* @__PURE__ */ o(e, { tooltip: t.tooltip, testId: "agent-slot-group", children: /* @__PURE__ */ o(i, { max: 3, size: "xs", children: t.agents.map((r) => /* @__PURE__ */ o(n, { name: r.name, size: "xs" }, r.key)) }) });
+  }
+  return /* @__PURE__ */ o(e, { tooltip: t.tooltip, testId: "agent-slot-gate", children: /* @__PURE__ */ o(a, { tone: "warning", size: "sm", icon: /* @__PURE__ */ o(l, { name: m["indicator.gateReviewer"], size: "xs" }), children: t.label }) });
+}
+export {
+  h as BoardCardAgentSlot
+};
+//# sourceMappingURL=BoardCardAgentSlot.js.map

package/dist/components/card-face/BoardCardAgentSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardCardAgentSlot.js","sources":["../../../src/components/card-face/BoardCardAgentSlot.tsx"],"sourcesContent":["import { Avatar, AvatarGroup } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { TapTip } from \"./TapTip\";\nimport { CARD_FACE_ICONS } from \"./vocabulary\";\n\n/* ============================================================================\n   THE AGENT SLOT (DX-4377, DX-5425) — who is working INSIDE a card, as ONE of\n   two exclusive things, never stacked:\n\n     · `children` — a container's agents, one avatar each (up to three, then\n       a count), rolled up from the child cards they hold;\n     · `gate`     — the quality-gate reviewer at work on the card right now,\n       a warning pill naming the gate.\n\n   Who HOLDS the card itself is not here: that is the work-state control,\n   a separate mark, so the two can never disagree.\n   ========================================================================= */\n\nexport type BoardCardAgent =\n  | {\n      kind: \"children\";\n      /** One sentence naming each child and the agent on it. */\n      tooltip: string;\n      /** The agents, each with a stable key and the name its avatar's initials come from. */\n      agents: readonly { key: string; name: string }[];\n    }\n  | {\n      kind: \"gate\";\n      /** \"Gate review in progress: Code quality\". */\n      tooltip: string;\n      /** The gate's name, printed in the pill. */\n      label: string;\n    };\n\nexport function BoardCardAgentSlot({ agent }: { agent: BoardCardAgent }) {\n  if (agent.kind === \"children\") {\n    if (agent.agents.length === 0) throw new Error(\"BoardCardAgentSlot: a children slot needs at least one agent\");\n    return (\n      <TapTip tooltip={agent.tooltip} testId=\"agent-slot-group\">\n        <AvatarGroup max={3} size=\"xs\">\n          {agent.agents.map((each) => (\n            <Avatar key={each.key} name={each.name} size=\"xs\" />\n          ))}\n        </AvatarGroup>\n      </TapTip>\n    );\n  }\n  return (\n    <TapTip tooltip={agent.tooltip} testId=\"agent-slot-gate\">\n      <Badge tone=\"warning\" size=\"sm\" icon={<Icon name={CARD_FACE_ICONS[\"indicator.gateReviewer\"]} size=\"xs\" />}>\n        {agent.label}\n      </Badge>\n    </TapTip>\n  );\n}\n"],"names":["BoardCardAgentSlot","agent","jsx","TapTip","AvatarGroup","each","Avatar","Badge","Icon","CARD_FACE_ICONS"],"mappings":";;;;;;AAmCO,SAASA,EAAmB,EAAE,OAAAC,KAAoC;AACvE,MAAIA,EAAM,SAAS,YAAY;AAC7B,QAAIA,EAAM,OAAO,WAAW,EAAG,OAAM,IAAI,MAAM,8DAA8D;AAC7G,WACE,gBAAAC,EAACC,GAAA,EAAO,SAASF,EAAM,SAAS,QAAO,oBACrC,UAAA,gBAAAC,EAACE,GAAA,EAAY,KAAK,GAAG,MAAK,MACvB,UAAAH,EAAM,OAAO,IAAI,CAACI,MACjB,gBAAAH,EAACI,GAAA,EAAsB,MAAMD,EAAK,MAAM,MAAK,QAAhCA,EAAK,GAAgC,CACnD,GACH,GACF;AAAA,EAEJ;AACA,SACE,gBAAAH,EAACC,GAAA,EAAO,SAASF,EAAM,SAAS,QAAO,mBACrC,UAAA,gBAAAC,EAACK,GAAA,EAAM,MAAK,WAAU,MAAK,MAAK,MAAM,gBAAAL,EAACM,GAAA,EAAK,MAAMC,EAAgB,wBAAwB,GAAG,MAAK,KAAA,CAAK,GACpG,UAAAR,EAAM,MAAA,CACT,EAAA,CACF;AAEJ;"}

package/dist/components/card-face/CardFace.js

@@ -0,0 +1,109 @@
+import { jsx as t, jsxs as o, Fragment as B } from "react/jsx-runtime";
+import { useId as S } from "react";
+import { cn as s } from "../../lib/cn.js";
+import { useNumberFormat as j } from "../../lib/i18n/number-format.js";
+import { BADGE_TONE_TEXT as Y, Badge as L } from "../Badge.js";
+import { CountBadge as P } from "../CountBadge.js";
+import { Icon as l } from "../Icon.js";
+import { AcRingGlyph as V } from "./AcRingGlyph.js";
+import { BoardCardAgentSlot as U } from "./BoardCardAgentSlot.js";
+import { CardTypeBadge as W } from "./CardTypeBadge.js";
+import { EffortBadge as X } from "./EffortBadge.js";
+import { GateRingGlyph as G } from "./GateRingGlyph.js";
+import { OverflowRow as J } from "./OverflowRow.js";
+import { TapTip as c } from "./TapTip.js";
+import { PRIORITY_TIER_VISUALS as Q, CARD_FACE_ICONS as p } from "./vocabulary.js";
+const F = "leading-4", K = { betweenRows: "gap-y-2", beforeTitle: "gap-1" }, $ = "[--hit-t:8px] [--hit-b:1px] [--hit-x:4px]", Z = "-my-[6px] py-[3px]", ee = "[--hit-t:4px] [--hit-b:7px] [--hit-x:3px]", te = "[&_button]:isolate [&_button]:hover:bg-transparent [&_button]:before:absolute [&_button]:before:content-[''] [&_button]:before:-inset-1 [&_button]:before:-z-10 [&_button]:before:rounded-md [&_button]:before:pointer-events-none [--halo-fill:color-mix(in_oklab,transparent,var(--state-lift)_calc(var(--mix-hover)/2))] [&_button]:hover:before:bg-(--halo-fill) [&_button]:focus-visible:before:bg-(--halo-fill) [--tap-target:1rem] [&_button]:h-4 [&_button]:p-0 [&_button]:relative [&_button]:pointer-coarse:after:absolute [&_button]:pointer-coarse:after:content-[''] [&_button]:pointer-coarse:after:top-[calc(var(--hit-t)*-1)] [&_button]:pointer-coarse:after:bottom-[calc(var(--hit-b)*-1)] [&_button]:pointer-coarse:after:left-[calc(var(--hit-x)*-1)] [&_button]:pointer-coarse:after:right-[calc(var(--hit-x)*-1)]";
+function ne({ hold: e, compact: n }) {
+  const i = j(), a = /* @__PURE__ */ t("span", { className: "sr-only", children: e.count === null ? e.sentence : ` — ${e.sentence}` });
+  return n ? /* @__PURE__ */ o(c, { tooltip: e.tooltip, testId: e.id, className: Y[e.tone], children: [
+    /* @__PURE__ */ t(l, { name: e.icon, size: "xs" }),
+    a
+  ] }) : /* @__PURE__ */ t(c, { tooltip: e.tooltip, testId: e.id, children: /* @__PURE__ */ o(L, { tone: e.tone, size: "sm", icon: /* @__PURE__ */ t(l, { name: e.icon, size: "xs" }), children: [
+    e.count === null ? null : i(e.count),
+    a
+  ] }) });
+}
+function re({ mark: e, icon: n, testId: i }) {
+  const a = j();
+  return /* @__PURE__ */ o(c, { tooltip: e.tooltip, label: e.label, testId: i, className: "text-tertiary", children: [
+    /* @__PURE__ */ t(l, { name: n, size: "xs" }),
+    /* @__PURE__ */ t("span", { className: "tabular", children: a(e.count) })
+  ] });
+}
+function ie({ count: e, tone: n, icon: i }) {
+  return /* @__PURE__ */ o("span", { className: s("relative inline-flex", e > 99 ? "mr-8" : e > 9 ? "mr-6" : "mr-4"), children: [
+    /* @__PURE__ */ t(l, { name: i, size: "xs" }),
+    /* @__PURE__ */ t(P, { count: e, tone: n, outside: !0 })
+  ] });
+}
+function oe({ mark: e, icon: n, testId: i }) {
+  return /* @__PURE__ */ t(c, { tooltip: e.tooltip, label: e.label, testId: i, className: "text-tertiary", children: /* @__PURE__ */ t(ie, { count: e.count, tone: e.tone ?? "neutral", icon: n }) });
+}
+function M({ mark: e, icon: n, testId: i }) {
+  return /* @__PURE__ */ t(c, { tooltip: e.tooltip, label: e.label, testId: i, className: "text-tertiary", children: /* @__PURE__ */ t(l, { name: n, size: "xs" }) });
+}
+function m(e, n) {
+  return n === void 0 ? [] : [{ ...e, render: n.render }];
+}
+function ge({
+  card: e,
+  renderTitle: n,
+  reference: i,
+  parent: a,
+  status: x,
+  trailing: y,
+  cover: k,
+  workState: f,
+  triage: _,
+  usage: g,
+  runtime: N,
+  age: v,
+  keepAge: q = !1
+}) {
+  const R = S(), I = Q[e.priority.tier], r = [], { effort: u, planGates: T, ac: w, codeGates: C, children: h, comments: b, retro: A, pullRequest: E, agent: z } = e;
+  u !== null && r.push({ key: "effort", hideRank: 4, render: () => /* @__PURE__ */ t(X, { ...u }) }), T !== null && r.push({ key: "plan-gates", hideRank: 1, render: () => /* @__PURE__ */ t(G, { phase: "plan", ...T }) }), w !== null && r.push({ key: "ac", hideRank: 1, render: () => /* @__PURE__ */ t(V, { ...w }) }), C !== null && r.push({ key: "code-gates", hideRank: 1, render: () => /* @__PURE__ */ t(G, { phase: "code", ...C }) }), h !== null && r.push({ key: "children", hideRank: 5, render: () => /* @__PURE__ */ t(re, { mark: h, icon: p["indicator.children"], testId: "face-children" }) }), b !== null && r.push({ key: "comments", hideRank: 5, render: () => /* @__PURE__ */ t(oe, { mark: b, icon: p["indicator.comments"], testId: "face-comments" }) }), A !== null && r.push({ key: "retro", hideRank: 7, render: () => /* @__PURE__ */ t(M, { mark: A, icon: p["indicator.retro"], testId: "face-retro" }) }), E !== null && r.push({ key: "pull-request", hideRank: 7, render: () => /* @__PURE__ */ t(M, { mark: E, icon: p["indicator.pullRequest"], testId: "face-pull-request" }) }), r.push(...m({ key: "triage", hideRank: 6 }, _)), z !== null && r.push({
+    key: "agent",
+    hideRank: 3,
+    render: () => /* @__PURE__ */ t("span", { className: "flex h-5 items-stretch [&>[data-tap-tip]]:h-5", children: /* @__PURE__ */ t(U, { agent: z }) })
+  }), r.push(...m({ key: "usage", hideRank: 0 }, g)), r.push(...m({ key: "runtime", hideRank: 8 }, N)), r.push(...m({ key: "age", hideRank: 9, keep: q }, v));
+  const D = [
+    e.holds.map((d) => `${d.id}:${d.count}`).join(","),
+    f?.contentKey ?? "",
+    _?.contentKey ?? "",
+    g?.contentKey ?? "",
+    N?.contentKey ?? "",
+    v?.contentKey ?? "",
+    `${h?.count ?? ""}/${b?.count ?? ""}/${u?.effort ?? ""}`
+  ].join(";"), H = f === void 0 && e.holds.length === 0 ? void 0 : (d) => /* @__PURE__ */ o(B, { children: [
+    f?.render(d),
+    e.holds.map((O) => /* @__PURE__ */ t(ne, { hold: O, compact: d }, O.id))
+  ] });
+  return /* @__PURE__ */ o("div", { className: s("flex flex-col", K.beforeTitle), "data-testid": "card-face", children: [
+    k === void 0 ? null : /* @__PURE__ */ t("div", { className: "aspect-video w-full overflow-hidden rounded-md", "data-testid": "face-cover", children: k }),
+    /* @__PURE__ */ o("div", { className: "flex items-start gap-x-2", "data-testid": "card-face-header", children: [
+      /* @__PURE__ */ o("div", { className: s("flex min-w-0 flex-1 flex-wrap items-center gap-x-2 pb-1.5", K.betweenRows), "data-testid": "face-header-group", children: [
+        /* @__PURE__ */ o("span", { id: R, className: s("flex h-4 min-w-0 shrink flex-nowrap items-stretch gap-x-2", F, $), "data-testid": "face-row-identity", children: [
+          /* @__PURE__ */ t(c, { tooltip: e.priority.tooltip, label: e.priority.label, testId: "face-priority", children: /* @__PURE__ */ t(l, { name: I.icon, size: "sm", className: I.colorClass }) }),
+          /* @__PURE__ */ t(W, { type: e.type.type, tooltip: e.type.tooltip, label: e.type.label, testId: "face-type" }),
+          x === void 0 ? null : /* @__PURE__ */ t("span", { className: "flex min-w-4 shrink-[4] items-stretch empty:hidden [&>*]:min-w-0", children: x }),
+          /* @__PURE__ */ o("span", { className: s("items-stretch gap-1", a === void 0 ? "inline-flex" : "inline-grid grid-cols-[auto_auto_minmax(0,1fr)]"), "data-testid": "face-refs", children: [
+            /* @__PURE__ */ t("span", { className: "whitespace-nowrap", children: i }),
+            a === void 0 ? null : /* @__PURE__ */ o(B, { children: [
+              /* @__PURE__ */ t(c, { tooltip: a.tooltip, label: a.label, testId: "face-parent-mark", className: "text-tertiary", children: /* @__PURE__ */ t(l, { name: p["indicator.parent"], size: "xs" }) }),
+              /* @__PURE__ */ t("span", { className: "min-w-0 truncate", "data-testid": "face-parent", children: a.reference })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t(J, { contentKey: D, testId: "face-row-activity", moreTestId: "face-more", className: s("ml-auto", F, Z, ee), alignEnd: !0, pinned: H, items: r })
+      ] }),
+      y === void 0 ? null : /* @__PURE__ */ t("span", { className: s("flex h-4 shrink-0 items-center", $, te), "data-testid": "face-trailing", children: y })
+    ] }),
+    n({ className: "block text-sm font-medium break-words text-primary", describedBy: R })
+  ] });
+}
+export {
+  ge as CardFace,
+  ie as CommentCountMark
+};
+//# sourceMappingURL=CardFace.js.map

package/dist/components/card-face/CardFace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFace.js","sources":["../../../src/components/card-face/CardFace.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat } from \"../../lib/i18n/number-format\";\nimport { Badge, BADGE_TONE_TEXT } from \"../Badge\";\nimport { CountBadge, type CountBadgeTone } from \"../CountBadge\";\nimport { Icon, type IconName } from \"../Icon\";\nimport { AcRingGlyph, type AcRingGlyphProps } from \"./AcRingGlyph\";\nimport { BoardCardAgentSlot, type BoardCardAgent } from \"./BoardCardAgentSlot\";\nimport { CardTypeBadge, type CardFaceType } from \"./CardTypeBadge\";\nimport { EffortBadge, type EffortBadgeProps } from \"./EffortBadge\";\nimport { GateRingGlyph, type GateRingGlyphProps } from \"./GateRingGlyph\";\nimport { OverflowRow, type OverflowItem } from \"./OverflowRow\";\nimport { TapTip } from \"./TapTip\";\nimport { CARD_FACE_ICONS, PRIORITY_TIER_VISUALS, type PriorityTier } from \"./vocabulary\";\n\n/* ============================================================================\n   THE CARD FACE (DX-3822, DX-3984, DX-5425) — a work card as a tile.\n   ----------------------------------------------------------------------------\n   One view for every place a card is a tile: a board lane, a plan's list, a\n   marketing page's demo board. It shows the card's TITLE, in full, and its\n   marks in two rows above it — never a summary:\n\n     1. THE IDENTITY ROW — who the card is:\n            [priority] [type] [status, when the host names it] REF ↰ PARENT   …   [host control]\n     2. THE ACTIVITY ROW — what is going on with it: first the work-state\n        control and the holds a human must see (needs a human, snoozed), which\n        never leave the row, then effort, the Plan quality gates / AC / Code\n        quality gates rings, children, comments, retro, pull request, triage,\n        the agent, the token usage, the dispatch runtime and the age.\n     3. THE TITLE — alone, full width, free to wrap, never clamped.\n\n   A PLAIN MODEL, WORDS INCLUDED. `card` carries every fact already resolved:\n   each tooltip and accessible name in the reader's language, each type with\n   its icon and hue. This view decides only how the face is LAID OUT: the\n   order of the marks, which ones a crowded row shortens or tucks first, the\n   icons and colours a fact is drawn with. Nothing here fetches, routes,\n   checks a permission or reads the clock, so it renders on a server.\n\n   SLOTS for what only the host can draw: the card's reference (a router link\n   in an app, plain text on a static page), the parent's, the work-state\n   control (it acts on the card), the token usage, the triage score, the\n   dispatch runtime, the age, the status mark (only the host knows whether the\n   card sits on its own list's lane) and the control at the identity row's end\n   (a board's move menu). An activity-row slot is `{ render, contentKey }`:\n   `render(compact)` draws it full or short, and `contentKey` is what it SAYS,\n   so the row starts over from the full form when it changes.\n\n   THE ROWS SIT TIGHT (DX-3984): icon-height lines, a hair of gap between the\n   rows and a small one before the title. Marks stay tappable on a coarse\n   pointer through a stretched `::after` (`TapTip`), never through layout\n   height. DX-5677: THE TWO ROWS ARE ONE WRAPPING GROUP: when the identity row and the activity row fit side by side they\n   share a line (the activity marks at its right edge); when they do not, the activity row drops to its own line,\n   right-aligned. The host's control stays outside the group, at the top right, in either layout. The activity row itself never wraps, and nothing is hidden: a crowded activity row\n   shortens its marks, then tucks the least-missed behind a `+N` popover.\n   ========================================================================= */\n\n/** DX-3984 — a row is as tall as its icons: one 16px line, whatever text size a mark inside it asks for. */\nconst ROW_LINE = \"leading-4\";\n\n/**\n * DX-3984 / DX-5677 — the face's vertical rhythm. The activity row's marks are up to 22px tall (rings, effort badge) but the\n * row takes only a 16px line in layout (`ACTIVITY_PAD` below), so the marks overhang the line 3px above and below, centred on\n * it. On a shared line header, marks and menu are then one 16px line with ONE centre line; on a wrapped one the marks sit\n * exactly where a 22px row would: 2px between the rows plus the 3px overhang = 5px visible above them, so the group's gap\n * between lines is 8px (`gap-y-2`) and its bottom padding 6px (`pb-1.5`: the 3px overhang plus the 3px the padding used to add).\n */\nconst FACE_GAPS = { betweenRows: \"gap-y-2\", beforeTitle: \"gap-1\" } as const;\n\n/**\n * DX-3984 / DX-5677 — how far each row's marks reach on a coarse pointer (`COARSE_HIT_AREA`): the targets TILE the lines of the\n * wrapping group and meet at the midpoint of every gap. Row 1 (16px) reaches 8px up into the card's padding and 1px down (half\n * the 2px between the rows); row 2 reaches 4px up (1px + the 3px of overhang its marks own) and 7px down (3px overhang, the group's 3px of bottom\n * padding beyond it, plus the 4px before the title, DX-4259). Sideways each mark reaches half its row's column gap.\n */\nconst IDENTITY_REACH = \"[--hit-t:8px] [--hit-b:1px] [--hit-x:4px]\";\n/* DX-5677: the activity row's marks are up to 22px tall and its 3px padding makes the box 28px; an equal negative margin of 6px a side\n   takes the row's LAYOUT height down to the header's 16px line. With every item centred (`items-center`) on a shared line the header,\n   the indicators and the host's control (the same 16px) share one centre line; the marks overhang the line symmetrically and the\n   padding survives as the marks' coarse-pointer reach room. */\nconst ACTIVITY_PAD = \"-my-[6px] py-[3px]\";\nconst ACTIVITY_REACH = \"[--hit-t:4px] [--hit-b:7px] [--hit-x:3px]\";\n\n/**\n * DX-3984 / DX-4043 — the host's control (a board's move menu) sits in a 16px slot with its padding gone and the tap-target\n * floor lowered to 16px, so it is a 16px mark like the rest and its reach tiles with them. Its hover fill moves to a\n * `::before` halo (24px, behind the glyph) at half the hover lift, so it follows both themes and any lane tint.\n * DX-4098 gives `BoardCard`'s menu trigger a dense variant; then this override goes.\n */\nconst HOST_CONTROL =\n  \"[&_button]:isolate [&_button]:hover:bg-transparent [&_button]:before:absolute [&_button]:before:content-[''] [&_button]:before:-inset-1 \" +\n  \"[&_button]:before:-z-10 [&_button]:before:rounded-md [&_button]:before:pointer-events-none \" +\n  \"[--halo-fill:color-mix(in_oklab,transparent,var(--state-lift)_calc(var(--mix-hover)/2))] [&_button]:hover:before:bg-(--halo-fill) [&_button]:focus-visible:before:bg-(--halo-fill) \" +\n  \"[--tap-target:1rem] [&_button]:h-4 [&_button]:p-0 [&_button]:relative [&_button]:pointer-coarse:after:absolute [&_button]:pointer-coarse:after:content-[''] \" +\n  \"[&_button]:pointer-coarse:after:top-[calc(var(--hit-t)*-1)] [&_button]:pointer-coarse:after:bottom-[calc(var(--hit-b)*-1)] \" +\n  \"[&_button]:pointer-coarse:after:left-[calc(var(--hit-x)*-1)] [&_button]:pointer-coarse:after:right-[calc(var(--hit-x)*-1)]\";\n\n/** A mark the face draws from a fact: what its tooltip says and what a screen reader calls it. */\nexport interface CardFaceMark {\n  tooltip: ReactNode;\n  label: string;\n}\n\n/** A counted mark (children, comments): the count, then what it says. */\nexport interface CardFaceCount extends CardFaceMark {\n  count: number;\n}\n\n/** DX-6446: the comments mark: a count whose badge is gray while nothing waits on it (the default) and `danger` red while some comment is unread to the viewer. */\nexport interface CardFaceComments extends CardFaceCount {\n  tone?: CountBadgeTone;\n}\n\n/**\n * One hold — something that makes a human act on the card (it needs a person's answer; it is snoozed). Holds are the\n * activity row's PINNED part: a crowded row shortens a hold's pill to its tone-coloured icon but never tucks it away.\n */\nexport interface CardFaceHold {\n  /** Stable across renders; also the mark's `data-testid`. */\n  id: string;\n  tone: \"danger\" | \"warning\" | \"info\" | \"neutral\";\n  icon: IconName;\n  /** The count the pill prints beside its icon; `null` for a hold with nothing to count. */\n  count: number | null;\n  /** What a screen reader is told, whichever form is drawn. */\n  sentence: string;\n  tooltip: ReactNode;\n}\n\n/** A slot in the activity row: the host's drawing, full or short, and what it says (the row restarts when that changes). */\nexport interface CardFaceSlot {\n  render: (compact: boolean) => ReactNode;\n  contentKey: string;\n}\n\n/**\n * The card's facts, every word already resolved. A fact the card does not have is `null` (no effort override, no gates\n * in a phase, no comments): the mark is then not drawn, never drawn empty.\n */\nexport interface CardFaceModel {\n  priority: CardFaceMark & { tier: PriorityTier };\n  type: CardFaceMark & { type: CardFaceType };\n  holds: readonly CardFaceHold[];\n  effort: EffortBadgeProps | null;\n  planGates: Omit<GateRingGlyphProps, \"phase\"> | null;\n  ac: AcRingGlyphProps | null;\n  codeGates: Omit<GateRingGlyphProps, \"phase\"> | null;\n  children: CardFaceCount | null;\n  comments: CardFaceComments | null;\n  retro: CardFaceMark | null;\n  pullRequest: CardFaceMark | null;\n  agent: BoardCardAgent | null;\n}\n\nexport interface CardFaceProps {\n  card: CardFaceModel;\n  /** The title, as the host's link (or plain text). `className` is the face's title style; `describedBy` names the identity row. */\n  renderTitle: (props: { className: string; describedBy: string }) => ReactNode;\n  /** The card's reference (its id), as the host draws it: a link in an app, plain text on a static page. */\n  reference: ReactNode;\n  /** The card's parent: its reference as the host draws it, and the glyph's tooltip and name. Omitted for a card with no parent, or one drawn inside its parent's box. */\n  parent?: CardFaceMark & { reference: ReactNode };\n  /** The card's list or status mark, when the host names it (a lane that IS the card's list does not). */\n  status?: ReactNode;\n  /** A control at the identity row's end (a board's move menu). */\n  trailing?: ReactNode;\n  /** A cover above the header, in a fixed 16:9 frame; no frame exists without it. */\n  cover?: ReactNode;\n  /** The work-state control, which leads the pinned part of the activity row: who holds the card and what holds it back. */\n  workState?: CardFaceSlot;\n  /** The triage score. */\n  triage?: CardFaceSlot;\n  /** The card's token usage. */\n  usage?: CardFaceSlot;\n  /** The latest dispatch's runtime. */\n  runtime?: CardFaceSlot;\n  /** When the card was made and last touched. */\n  age?: CardFaceSlot;\n  /** DX-5422 — the age never leaves the row for the `+N` popover (a card drawn inside its parent's box); it may still shorten. */\n  keepAge?: boolean;\n}\n\n/** One hold: a toned pill with its icon and count, or, once the row is crowded, the same icon in the tone's colour. */\nfunction HoldMark({ hold, compact }: { hold: CardFaceHold; compact: boolean }) {\n  const formatNumber = useNumberFormat();\n  const spoken = <span className=\"sr-only\">{hold.count === null ? hold.sentence : ` — ${hold.sentence}`}</span>;\n  if (compact) {\n    return (\n      <TapTip tooltip={hold.tooltip} testId={hold.id} className={BADGE_TONE_TEXT[hold.tone]}>\n        <Icon name={hold.icon} size=\"xs\" />\n        {spoken}\n      </TapTip>\n    );\n  }\n  return (\n    <TapTip tooltip={hold.tooltip} testId={hold.id}>\n      <Badge tone={hold.tone} size=\"sm\" icon={<Icon name={hold.icon} size=\"xs\" />}>\n        {hold.count === null ? null : formatNumber(hold.count)}\n        {spoken}\n      </Badge>\n    </TapTip>\n  );\n}\n\n/** A counted glyph (children). */\nfunction CountMark({ mark, icon, testId }: { mark: CardFaceCount; icon: IconName; testId: string }) {\n  const formatNumber = useNumberFormat();\n  return (\n    <TapTip tooltip={mark.tooltip} label={mark.label} testId={testId} className=\"text-tertiary\">\n      <Icon name={icon} size=\"xs\" />\n      <span className=\"tabular\">{formatNumber(mark.count)}</span>\n    </TapTip>\n  );\n}\n\n/**\n * DX-6446: the comment glyph with its count as the library's corner badge (`CountBadge`), the look every comment count has where the mark is not a button of its own: a card face, a tile that is a link.\n * The badge sits on the glyph's top-right corner, outside its box, so the right margin reserves its width and keeps it clear of the next mark. `aria-hidden` is the badge's: the owner's label says the count.\n */\nexport function CommentCountMark({ count, tone, icon }: { count: number; tone: CountBadgeTone; icon: IconName }) {\n  return (\n    <span className={cn(\"relative inline-flex\", count > 99 ? \"mr-8\" : count > 9 ? \"mr-6\" : \"mr-4\")}>\n      <Icon name={icon} size=\"xs\" />\n      <CountBadge count={count} tone={tone} outside />\n    </span>\n  );\n}\n\n/** The card face's comments mark: {@link CommentCountMark} with its tooltip. */\nfunction CommentsMark({ mark, icon, testId }: { mark: CardFaceComments; icon: IconName; testId: string }) {\n  return (\n    <TapTip tooltip={mark.tooltip} label={mark.label} testId={testId} className=\"text-tertiary\">\n      <CommentCountMark count={mark.count} tone={mark.tone ?? \"neutral\"} icon={icon} />\n    </TapTip>\n  );\n}\n\n/** A bare glyph (retro, pull request). */\nfunction FlagMark({ mark, icon, testId }: { mark: CardFaceMark; icon: IconName; testId: string }) {\n  return (\n    <TapTip tooltip={mark.tooltip} label={mark.label} testId={testId} className=\"text-tertiary\">\n      <Icon name={icon} size=\"xs\" />\n    </TapTip>\n  );\n}\n\n/** A slot as an activity-row item, or none when the host did not fill it. */\nfunction slotItem(item: Omit<OverflowItem, \"render\">, slot: CardFaceSlot | undefined): OverflowItem[] {\n  return slot === undefined ? [] : [{ ...item, render: slot.render }];\n}\n\nexport function CardFace({\n  card,\n  renderTitle,\n  reference,\n  parent,\n  status,\n  trailing,\n  cover,\n  workState,\n  triage,\n  usage,\n  runtime,\n  age,\n  keepAge = false,\n}: CardFaceProps) {\n  const factsId = useId();\n  const priority = PRIORITY_TIER_VISUALS[card.priority.tier];\n\n  /* The activity row's items, in display order. `hideRank` says which a crowded row can least afford to keep: the age\n     first (unless `keepAge`), the runtime, retro and pull request, then triage, the counts, effort, the agent; the rings\n     and the token usage last. */\n  const items: OverflowItem[] = [];\n  const { effort, planGates, ac, codeGates, children, comments, retro, pullRequest, agent } = card;\n  if (effort !== null) items.push({ key: \"effort\", hideRank: 4, render: () => <EffortBadge {...effort} /> });\n  if (planGates !== null) items.push({ key: \"plan-gates\", hideRank: 1, render: () => <GateRingGlyph phase=\"plan\" {...planGates} /> });\n  if (ac !== null) items.push({ key: \"ac\", hideRank: 1, render: () => <AcRingGlyph {...ac} /> });\n  if (codeGates !== null) items.push({ key: \"code-gates\", hideRank: 1, render: () => <GateRingGlyph phase=\"code\" {...codeGates} /> });\n  if (children !== null) items.push({ key: \"children\", hideRank: 5, render: () => <CountMark mark={children} icon={CARD_FACE_ICONS[\"indicator.children\"]} testId=\"face-children\" /> });\n  if (comments !== null) items.push({ key: \"comments\", hideRank: 5, render: () => <CommentsMark mark={comments} icon={CARD_FACE_ICONS[\"indicator.comments\"]} testId=\"face-comments\" /> });\n  if (retro !== null) items.push({ key: \"retro\", hideRank: 7, render: () => <FlagMark mark={retro} icon={CARD_FACE_ICONS[\"indicator.retro\"]} testId=\"face-retro\" /> });\n  if (pullRequest !== null) {\n    items.push({ key: \"pull-request\", hideRank: 7, render: () => <FlagMark mark={pullRequest} icon={CARD_FACE_ICONS[\"indicator.pullRequest\"]} testId=\"face-pull-request\" /> });\n  }\n  items.push(...slotItem({ key: \"triage\", hideRank: 6 }, triage));\n  // The 24px avatars sit in a 20px slot and overhang it by 2px a side, so an agent never makes the row taller than a hold's\n  // pill; the mark's own box (and so its tap area) is the 20px slot, never the avatar's 24px.\n  if (agent !== null) {\n    items.push({\n      key: \"agent\",\n      hideRank: 3,\n      render: () => (\n        <span className=\"flex h-5 items-stretch [&>[data-tap-tip]]:h-5\">\n          <BoardCardAgentSlot agent={agent} />\n        </span>\n      ),\n    });\n  }\n  items.push(...slotItem({ key: \"usage\", hideRank: 0 }, usage));\n  items.push(...slotItem({ key: \"runtime\", hideRank: 8 }, runtime));\n  items.push(...slotItem({ key: \"age\", hideRank: 9, keep: keepAge }, age));\n\n  /* What the activity row's marks SAY, so the row starts over from the full form when one of them gets shorter. */\n  const contentKey = [\n    card.holds.map((hold) => `${hold.id}:${hold.count}`).join(\",\"),\n    workState?.contentKey ?? \"\",\n    triage?.contentKey ?? \"\",\n    usage?.contentKey ?? \"\",\n    runtime?.contentKey ?? \"\",\n    age?.contentKey ?? \"\",\n    `${children?.count ?? \"\"}/${comments?.count ?? \"\"}/${effort?.effort ?? \"\"}`,\n  ].join(\";\");\n\n  const pinned =\n    workState === undefined && card.holds.length === 0\n      ? undefined\n      : (compact: boolean) => (\n          <>\n            {workState?.render(compact)}\n            {card.holds.map((hold) => (\n              <HoldMark key={hold.id} hold={hold} compact={compact} />\n            ))}\n          </>\n        );\n\n  return (\n    <div className={cn(\"flex flex-col\", FACE_GAPS.beforeTitle)} data-testid=\"card-face\">\n      {cover === undefined ? null : (\n        <div className=\"aspect-video w-full overflow-hidden rounded-md\" data-testid=\"face-cover\">\n          {cover}\n        </div>\n      )}\n      {/* DX-5677: the top area is [wrapping group | host control]. The control sits outside the group, top-right, in every layout; in\n          the group the identity row is on the left and the activity row is pushed right (an auto margin, neither row grows), so\n          they share a line when both fit and the activity row drops to its own right-aligned line when they do not. */}\n      <div className=\"flex items-start gap-x-2\" data-testid=\"card-face-header\">\n        <div className={cn(\"flex min-w-0 flex-1 flex-wrap items-center gap-x-2 pb-1.5\", FACE_GAPS.betweenRows)} data-testid=\"face-header-group\">\n        <span id={factsId} className={cn(\"flex h-4 min-w-0 shrink flex-nowrap items-stretch gap-x-2\", ROW_LINE, IDENTITY_REACH)} data-testid=\"face-row-identity\">\n          <TapTip tooltip={card.priority.tooltip} label={card.priority.label} testId=\"face-priority\">\n            <Icon name={priority.icon} size=\"sm\" className={priority.colorClass} />\n          </TapTip>\n          <CardTypeBadge type={card.type.type} tooltip={card.type.tooltip} label={card.type.label} testId=\"face-type\" />\n          {/* DX-5556: in a narrow lane the host's control keeps its own space (`shrink-0` below). The id never shrinks (`shrink-0`), so the\n              status gives way first, down to one icon's width (`min-w-4`): a mark is never lost. The id never wraps (`whitespace-nowrap`, whatever the host's link does) and the refs box is never narrower than it: with a parent it is a grid whose id and glyph tracks are `auto` and whose parent-ref track is `minmax(0,1fr)`, so only the parent ref's text shrinks. Nothing here clips with `overflow` around a mark: a wrapper's clip cuts a TapTip's stretched\n              coarse-pointer hit area (DX-3984) and a badge taller than the row. The status slot is a flex box whose child is `min-w-0` and may shrink,\n              so a Badge's own label ellipsis (DX-4449) and a host mark's own truncating label engage; only a text leaf (the parent ref) is clipped. A host\n              whose status component renders nothing for a card leaves the slot empty, and `empty:hidden` drops it, so no blank 16px sits before the id. */}\n          {status === undefined ? null : <span className=\"flex min-w-4 shrink-[4] items-stretch empty:hidden [&>*]:min-w-0\">{status}</span>}\n          <span className={cn(\"items-stretch gap-1\", parent === undefined ? \"inline-flex\" : \"inline-grid grid-cols-[auto_auto_minmax(0,1fr)]\")} data-testid=\"face-refs\">\n            <span className=\"whitespace-nowrap\">{reference}</span>\n            {parent === undefined ? null : (\n              <>\n                {/* DX-3888 — the parent ref's own tooltip may be hover-only (a tap navigates), so the glyph beside it carries the parent's title for a tap. */}\n                <TapTip tooltip={parent.tooltip} label={parent.label} testId=\"face-parent-mark\" className=\"text-tertiary\">\n                  <Icon name={CARD_FACE_ICONS[\"indicator.parent\"]} size=\"xs\" />\n                </TapTip>\n                <span className=\"min-w-0 truncate\" data-testid=\"face-parent\">{parent.reference}</span>\n              </>\n            )}\n          </span>\n        </span>\n        <OverflowRow contentKey={contentKey} testId=\"face-row-activity\" moreTestId=\"face-more\" className={cn(\"ml-auto\", ROW_LINE, ACTIVITY_PAD, ACTIVITY_REACH)} alignEnd pinned={pinned} items={items} />\n        </div>\n        {trailing === undefined ? null : <span className={cn(\"flex h-4 shrink-0 items-center\", IDENTITY_REACH, HOST_CONTROL)} data-testid=\"face-trailing\">{trailing}</span>}\n      </div>\n\n      {renderTitle({ className: \"block text-sm font-medium break-words text-primary\", describedBy: factsId })}\n    </div>\n  );\n}\n"],"names":["ROW_LINE","FACE_GAPS","IDENTITY_REACH","ACTIVITY_PAD","ACTIVITY_REACH","HOST_CONTROL","HoldMark","hold","compact","formatNumber","useNumberFormat","spoken","jsx","jsxs","TapTip","BADGE_TONE_TEXT","Icon","Badge","CountMark","mark","icon","testId","CommentCountMark","count","tone","cn","CountBadge","CommentsMark","FlagMark","slotItem","item","slot","CardFace","card","renderTitle","reference","parent","status","trailing","cover","workState","triage","usage","runtime","age","keepAge","factsId","useId","priority","PRIORITY_TIER_VISUALS","items","effort","planGates","ac","codeGates","children","comments","retro","pullRequest","agent","EffortBadge","GateRingGlyph","AcRingGlyph","CARD_FACE_ICONS","BoardCardAgentSlot","contentKey","pinned","Fragment","CardTypeBadge","OverflowRow"],"mappings":"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"}

package/dist/components/card-face/CardTypeBadge.js

@@ -0,0 +1,17 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../lib/cn.js";
+import { Badge as n } from "../Badge.js";
+import { Icon as p } from "../Icon.js";
+import { TapTip as t } from "./TapTip.js";
+import { paletteBadgeClassName as c } from "./vocabulary.js";
+function d({ type: r }) {
+  return /* @__PURE__ */ e(n, { size: "sm", "data-testid": "card-type-chip", className: m("h-4 gap-1 px-1 leading-none", c(r.hue)), icon: /* @__PURE__ */ e(p, { name: r.icon, size: "xs" }), children: r.label });
+}
+function x({ type: r, tooltip: i, label: o, testId: a }) {
+  return /* @__PURE__ */ e(t, { tooltip: i, label: o, testId: a, children: /* @__PURE__ */ e(d, { type: r }) });
+}
+export {
+  x as CardTypeBadge,
+  d as CardTypeChip
+};
+//# sourceMappingURL=CardTypeBadge.js.map

package/dist/components/card-face/CardTypeBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTypeBadge.js","sources":["../../../src/components/card-face/CardTypeBadge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { PaletteKey } from \"../../lib/calendar/types\";\nimport { cn } from \"../../lib/cn\";\nimport { Badge } from \"../Badge\";\nimport { Icon, type IconName } from \"../Icon\";\nimport { TapTip } from \"./TapTip\";\nimport { paletteBadgeClassName } from \"./vocabulary\";\n\n/* ============================================================================\n   THE CARD TYPE BADGE (DX-4794, DX-5425) — the one place a card's type wears\n   its colour. Every tile is the same neutral surface; the type is told apart\n   by this badge: the type's icon and name on its palette hue (the hue's fill\n   behind, its edge as border and text). It sits in a card face's 16px\n   identity line (`h-4`, tight padding, an `xs` icon).\n\n   The type arrives RESOLVED: its name in the reader's language, its icon and\n   its hue. Where those come from (a team's own type rows, a fixed demo set)\n   is the caller's business.\n   ========================================================================= */\n\nexport interface CardFaceType {\n  label: string;\n  icon: IconName;\n  hue: PaletteKey;\n}\n\n/** The badge alone, for a row that is itself a link: no tooltip anchor nested inside it. */\nexport function CardTypeChip({ type }: { type: CardFaceType }) {\n  return (\n    <Badge size=\"sm\" data-testid=\"card-type-chip\" className={cn(\"h-4 gap-1 px-1 leading-none\", paletteBadgeClassName(type.hue))} icon={<Icon name={type.icon} size=\"xs\" />}>\n      {type.label}\n    </Badge>\n  );\n}\n\nexport interface CardTypeBadgeProps {\n  type: CardFaceType;\n  tooltip: ReactNode;\n  /** The accessible name, e.g. \"Type: Story\". */\n  label: string;\n  testId?: string;\n}\n\n/** The badge as a mark that explains itself: a tap or hover shows `tooltip`, and never opens the card behind it. */\nexport function CardTypeBadge({ type, tooltip, label, testId }: CardTypeBadgeProps) {\n  return (\n    <TapTip tooltip={tooltip} label={label} testId={testId}>\n      <CardTypeChip type={type} />\n    </TapTip>\n  );\n}\n"],"names":["CardTypeChip","type","jsx","Badge","cn","paletteBadgeClassName","Icon","CardTypeBadge","tooltip","label","testId","TapTip"],"mappings":";;;;;;AA2BO,SAASA,EAAa,EAAE,MAAAC,KAAgC;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAM,MAAK,MAAK,eAAY,kBAAiB,WAAWC,EAAG,+BAA+BC,EAAsBJ,EAAK,GAAG,CAAC,GAAG,MAAM,gBAAAC,EAACI,GAAA,EAAK,MAAML,EAAK,MAAM,MAAK,KAAA,CAAK,GACjK,UAAAA,EAAK,MAAA,CACR;AAEJ;AAWO,SAASM,EAAc,EAAE,MAAAN,GAAM,SAAAO,GAAS,OAAAC,GAAO,QAAAC,KAA8B;AAClF,SACE,gBAAAR,EAACS,KAAO,SAAAH,GAAkB,OAAAC,GAAc,QAAAC,GACtC,UAAA,gBAAAR,EAACF,GAAA,EAAa,MAAAC,GAAY,EAAA,CAC5B;AAEJ;"}

package/dist/components/card-face/EffortBadge.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Icon as f } from "../Icon.js";
+import { TapTip as i } from "./TapTip.js";
+import { CARD_FACE_ICONS as m, effortColors as n } from "./vocabulary.js";
+function c({ effort: o, tooltip: e, label: t }) {
+  return /* @__PURE__ */ r(i, { tooltip: e, label: t, testId: "effort-badge", className: "h-5.5 justify-center rounded-full border px-1.5", style: n(o), children: /* @__PURE__ */ r(f, { name: m["indicator.effort"], size: "xs" }) });
+}
+export {
+  c as EffortBadge
+};
+//# sourceMappingURL=EffortBadge.js.map

package/dist/components/card-face/EffortBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffortBadge.js","sources":["../../../src/components/card-face/EffortBadge.tsx"],"sourcesContent":["import { Icon } from \"../Icon\";\nimport { TapTip } from \"./TapTip\";\nimport { CARD_FACE_ICONS, effortColors, type EffortRung } from \"./vocabulary\";\n\n/* ============================================================================\n   EFFORT (DX-4799, DX-5425) — a card's reasoning-effort rung as an icon-only\n   pill whose colour runs cool to hot with the rung (`effortColors`). The pill\n   is 22px tall, the card face's activity-row height; the rung's name lives in\n   the tooltip and the accessible name, since a crowded row has no room for it.\n   ========================================================================= */\n\nexport interface EffortBadgeProps {\n  effort: EffortRung;\n  /** The full sentence, e.g. \"Effort: High\". */\n  tooltip: string;\n  /** The accessible name, e.g. \"Effort High\". */\n  label: string;\n}\n\nexport function EffortBadge({ effort, tooltip, label }: EffortBadgeProps) {\n  return (\n    <TapTip tooltip={tooltip} label={label} testId=\"effort-badge\" className=\"h-5.5 justify-center rounded-full border px-1.5\" style={effortColors(effort)}>\n      <Icon name={CARD_FACE_ICONS[\"indicator.effort\"]} size=\"xs\" />\n    </TapTip>\n  );\n}\n"],"names":["EffortBadge","effort","tooltip","label","jsx","TapTip","effortColors","Icon","CARD_FACE_ICONS"],"mappings":";;;;AAmBO,SAASA,EAAY,EAAE,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,KAA2B;AACxE,SACE,gBAAAC,EAACC,KAAO,SAAAH,GAAkB,OAAAC,GAAc,QAAO,gBAAe,WAAU,mDAAkD,OAAOG,EAAaL,CAAM,GAClJ,UAAA,gBAAAG,EAACG,KAAK,MAAMC,EAAgB,kBAAkB,GAAG,MAAK,MAAK,EAAA,CAC7D;AAEJ;"}

package/dist/components/card-face/GateRingGlyph.js

@@ -0,0 +1,31 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { BADGE_TONE_TEXT as i } from "../Badge.js";
+import { Icon as o } from "../Icon.js";
+import { ProgressRing as N } from "../Progress.js";
+import { ROW_RING_SIZE as E } from "./hit-area.js";
+import { TapTip as T } from "./TapTip.js";
+import { GATE_VERDICTS as _, GATE_VERDICT_VISUALS as c, CARD_FACE_ICONS as m } from "./vocabulary.js";
+const I = { plan: m["indicator.planGates"], code: m["indicator.codeGates"] };
+function D({ phase: r, gates: l, verdictLabels: s, summary: p, label: d }) {
+  if (l.length === 0) return null;
+  const f = l.filter((e) => e.verdict === "pass").length, h = l.filter((e) => e.verdict === "fail").length > 0 ? "danger" : f === l.length ? "success" : "neutral", x = _.map((e) => ({
+    value: l.filter((n) => n.verdict === e).length,
+    tone: c[e].tone,
+    label: s[e]
+  })).filter((e) => e.value > 0), u = /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ t("p", { className: "font-medium text-primary", children: p }),
+    /* @__PURE__ */ t("ul", { className: "flex flex-col gap-0.5", children: l.map((e) => {
+      const n = c[e.verdict];
+      return /* @__PURE__ */ a("li", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ t(o, { name: n.icon, size: "xs", className: i[n.tone] }),
+        /* @__PURE__ */ t("span", { className: "text-secondary", children: e.label }),
+        /* @__PURE__ */ t("span", { className: "ml-auto text-tertiary", children: s[e.verdict] })
+      ] }, e.key);
+    }) })
+  ] });
+  return /* @__PURE__ */ t(T, { tooltip: u, testId: `gate-ring-${r}`, className: "text-secondary", children: /* @__PURE__ */ t(N, { segments: x, total: l.length, size: "row", className: E, showValue: !1, label: d, children: /* @__PURE__ */ t(o, { name: I[r], size: "sm", className: i[h] }) }) });
+}
+export {
+  D as GateRingGlyph
+};
+//# sourceMappingURL=GateRingGlyph.js.map

package/dist/components/card-face/GateRingGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GateRingGlyph.js","sources":["../../../src/components/card-face/GateRingGlyph.tsx"],"sourcesContent":["import { BADGE_TONE_TEXT } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { ProgressRing, type ProgressRingSegment } from \"../Progress\";\nimport { ROW_RING_SIZE } from \"./hit-area\";\nimport { TapTip } from \"./TapTip\";\nimport { CARD_FACE_ICONS, GATE_VERDICTS, GATE_VERDICT_VISUALS, type GateVerdict } from \"./vocabulary\";\n\n/* ============================================================================\n   THE GATE-RING GLYPH (DX-3014, DX-4099, DX-5425) — one component for both the\n   Plan and the Code quality gates: a segmented donut as tall as the card\n   face's activity row (22px, `ROW_RING_SIZE`), one arc per gate coloured by\n   its verdict, with the gate kind's icon in the centre in the tone of the\n   worst gate (failing outranks pending; every gate passed reads success).\n\n   The ring's denominator is EVERY gate the card carries for the phase, so the\n   ring and the tooltip's list can never disagree. Renders NOTHING when the\n   phase has no gates: a card with none shows no ring, not an empty one.\n\n   The words are the caller's: each verdict's name, the tooltip heading and\n   the ring's accessible name arrive already in the reader's language.\n   ========================================================================= */\n\nexport type GatePhase = \"plan\" | \"code\";\n\nexport interface GateRingEntry {\n  /** The gate's stable id. */\n  key: string;\n  /** The gate's name, in words. */\n  label: string;\n  verdict: GateVerdict;\n}\n\nexport interface GateRingGlyphProps {\n  /** Which kind of gate the ring stands for: it picks the centre icon. */\n  phase: GatePhase;\n  /** The phase's gates: the ring's arcs and the tooltip's rows. */\n  gates: readonly GateRingEntry[];\n  /** Each verdict's name (\"Passed\"), for the arcs and the rows. */\n  verdictLabels: Readonly<Record<GateVerdict, string>>;\n  /** The tooltip's heading, e.g. \"Plan quality gates: 2 of 3 passed, 1 failed\". */\n  summary: string;\n  /** The ring's accessible name. */\n  label: string;\n}\n\nconst PHASE_ICON = { plan: CARD_FACE_ICONS[\"indicator.planGates\"], code: CARD_FACE_ICONS[\"indicator.codeGates\"] } as const;\n\nexport function GateRingGlyph({ phase, gates, verdictLabels, summary, label }: GateRingGlyphProps) {\n  if (gates.length === 0) return null;\n\n  const passed = gates.filter((gate) => gate.verdict === \"pass\").length;\n  const failed = gates.filter((gate) => gate.verdict === \"fail\").length;\n  const centreTone = failed > 0 ? \"danger\" : passed === gates.length ? \"success\" : \"neutral\";\n\n  const segments: ProgressRingSegment[] = GATE_VERDICTS.map((verdict) => ({\n    value: gates.filter((gate) => gate.verdict === verdict).length,\n    tone: GATE_VERDICT_VISUALS[verdict].tone,\n    label: verdictLabels[verdict],\n  })).filter((segment) => segment.value > 0);\n\n  const content = (\n    <div className=\"flex flex-col gap-1 text-xs\">\n      <p className=\"font-medium text-primary\">{summary}</p>\n      <ul className=\"flex flex-col gap-0.5\">\n        {gates.map((gate) => {\n          const visual = GATE_VERDICT_VISUALS[gate.verdict];\n          return (\n            <li key={gate.key} className=\"flex items-center gap-1.5\">\n              <Icon name={visual.icon} size=\"xs\" className={BADGE_TONE_TEXT[visual.tone]} />\n              <span className=\"text-secondary\">{gate.label}</span>\n              <span className=\"ml-auto text-tertiary\">{verdictLabels[gate.verdict]}</span>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n\n  return (\n    <TapTip tooltip={content} testId={`gate-ring-${phase}`} className=\"text-secondary\">\n      <ProgressRing segments={segments} total={gates.length} size=\"row\" className={ROW_RING_SIZE} showValue={false} label={label}>\n        <Icon name={PHASE_ICON[phase]} size=\"sm\" className={BADGE_TONE_TEXT[centreTone]} />\n      </ProgressRing>\n    </TapTip>\n  );\n}\n"],"names":["PHASE_ICON","CARD_FACE_ICONS","GateRingGlyph","phase","gates","verdictLabels","summary","label","passed","gate","centreTone","segments","GATE_VERDICTS","verdict","GATE_VERDICT_VISUALS","segment","content","jsxs","jsx","visual","Icon","BADGE_TONE_TEXT","TapTip","ProgressRing","ROW_RING_SIZE"],"mappings":";;;;;;;AA6CA,MAAMA,IAAa,EAAE,MAAMC,EAAgB,qBAAqB,GAAG,MAAMA,EAAgB,qBAAqB,EAAA;AAEvG,SAASC,EAAc,EAAE,OAAAC,GAAO,OAAAC,GAAO,eAAAC,GAAe,SAAAC,GAAS,OAAAC,KAA6B;AACjG,MAAIH,EAAM,WAAW,EAAG,QAAO;AAE/B,QAAMI,IAASJ,EAAM,OAAO,CAACK,MAASA,EAAK,YAAY,MAAM,EAAE,QAEzDC,IADSN,EAAM,OAAO,CAACK,MAASA,EAAK,YAAY,MAAM,EAAE,SACnC,IAAI,WAAWD,MAAWJ,EAAM,SAAS,YAAY,WAE3EO,IAAkCC,EAAc,IAAI,CAACC,OAAa;AAAA,IACtE,OAAOT,EAAM,OAAO,CAACK,MAASA,EAAK,YAAYI,CAAO,EAAE;AAAA,IACxD,MAAMC,EAAqBD,CAAO,EAAE;AAAA,IACpC,OAAOR,EAAcQ,CAAO;AAAA,EAAA,EAC5B,EAAE,OAAO,CAACE,MAAYA,EAAQ,QAAQ,CAAC,GAEnCC,IACJ,gBAAAC,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,4BAA4B,UAAAZ,GAAQ;AAAA,sBAChD,MAAA,EAAG,WAAU,yBACX,UAAAF,EAAM,IAAI,CAACK,MAAS;AACnB,YAAMU,IAASL,EAAqBL,EAAK,OAAO;AAChD,aACE,gBAAAQ,EAAC,MAAA,EAAkB,WAAU,6BAC3B,UAAA;AAAA,QAAA,gBAAAC,EAACE,GAAA,EAAK,MAAMD,EAAO,MAAM,MAAK,MAAK,WAAWE,EAAgBF,EAAO,IAAI,EAAA,CAAG;AAAA,QAC5E,gBAAAD,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAK,OAAM;AAAA,0BAC5C,QAAA,EAAK,WAAU,yBAAyB,UAAAb,EAAcI,EAAK,OAAO,EAAA,CAAE;AAAA,MAAA,EAAA,GAH9DA,EAAK,GAId;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAGF,2BACGa,GAAA,EAAO,SAASN,GAAS,QAAQ,aAAab,CAAK,IAAI,WAAU,kBAChE,4BAACoB,GAAA,EAAa,UAAAZ,GAAoB,OAAOP,EAAM,QAAQ,MAAK,OAAM,WAAWoB,GAAe,WAAW,IAAO,OAAAjB,GAC5G,UAAA,gBAAAW,EAACE,GAAA,EAAK,MAAMpB,EAAWG,CAAK,GAAG,MAAK,MAAK,WAAWkB,EAAgBX,CAAU,EAAA,CAAG,GACnF,GACF;AAEJ;"}

package/dist/components/card-face/OverflowRow.js

@@ -0,0 +1,70 @@
+import { jsxs as W, jsx as c } from "react/jsx-runtime";
+import { useRef as z, useState as w, useLayoutEffect as C, useMemo as B } from "react";
+import { cn as d } from "../../lib/cn.js";
+import { useNumberFormat as K } from "../../lib/i18n/number-format.js";
+import { useUiStrings as P } from "../../lib/i18n/provider.js";
+import { Button as E } from "../Button.js";
+import { Popover as H } from "../Popover.js";
+function S(r) {
+  return r.filter((t) => t.keep !== !0);
+}
+function J(r, t) {
+  const f = S(r).map((n, s) => ({ key: n.key, hideRank: n.hideRank, index: s })).sort((n, s) => s.hideRank - n.hideRank || s.index - n.index);
+  return new Set(f.slice(0, t).map((n) => n.key));
+}
+function Q({ pinned: r, items: t, contentKey: f, testId: n, className: s, moreTestId: u, alignEnd: F = !1 }) {
+  const O = P().overflowRow, g = K(), h = z(null), [l, o] = w({ step: "full" }), p = JSON.stringify([t.map((e) => e.key), f]), [M, j] = w(p), [k, m] = w(null);
+  M !== p && (j(p), o({ step: "full" }), m(null));
+  const v = S(t).length;
+  C(() => {
+    const e = h.current;
+    e === null || !(e.scrollWidth > e.clientWidth) || (l.step === "full" ? (m(e.scrollWidth), o({ step: "compact" })) : l.step === "compact" ? o({ step: "collapsed", hiddenCount: Math.min(1, v) }) : l.hiddenCount < v && o({ step: "collapsed", hiddenCount: l.hiddenCount + 1 }));
+  }), C(() => {
+    const e = h.current;
+    if (e === null) return;
+    let a = e.clientWidth;
+    const N = new ResizeObserver(() => {
+      e.clientWidth !== a && (a = e.clientWidth, o({ step: "full" }), m(null));
+    });
+    return N.observe(e), () => N.disconnect();
+  }, []);
+  const y = l.step !== "full", R = B(() => l.step === "collapsed" ? J(t, l.hiddenCount) : /* @__PURE__ */ new Set(), [l, t]), b = t.filter((e) => !R.has(e.key)), x = F ? "ml-auto" : "", i = t.filter((e) => R.has(e.key));
+  return /* @__PURE__ */ W(
+    "span",
+    {
+      ref: h,
+      "data-testid": n,
+      className: d("-mx-1 flex min-w-0 flex-nowrap items-stretch gap-x-1.5 overflow-x-clip px-1", s),
+      style: l.step !== "full" && k !== null ? { flexBasis: k } : void 0,
+      children: [
+        r === void 0 ? null : /* @__PURE__ */ c("span", { className: d("flex shrink-0 items-center gap-x-1.5", x), children: r(y) }),
+        b.map((e, a) => /* @__PURE__ */ c("span", { className: d("flex shrink-0 items-center", r === void 0 && a === 0 && x), children: e.render(y) }, e.key)),
+        i.length === 0 ? null : /* @__PURE__ */ c(
+          H,
+          {
+            trigger: /* @__PURE__ */ W(
+              E,
+              {
+                variant: "ghost",
+                size: "2xs",
+                className: d("shrink-0 self-center px-1 tabular", r === void 0 && b.length === 0 && x),
+                "aria-label": O.more(i.length, g(i.length)),
+                "data-testid": u,
+                children: [
+                  "+",
+                  g(i.length)
+                ]
+              }
+            ),
+            children: /* @__PURE__ */ c("span", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", "data-testid": u === void 0 ? void 0 : `${u}-items`, children: i.map((e) => /* @__PURE__ */ c("span", { className: "flex items-center", children: e.render(!1) }, e.key)) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Q as OverflowRow,
+  J as hiddenKeys
+};
+//# sourceMappingURL=OverflowRow.js.map

package/dist/components/card-face/OverflowRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowRow.js","sources":["../../../src/components/card-face/OverflowRow.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\r\nimport { cn } from \"../../lib/cn\";\r\nimport { useNumberFormat } from \"../../lib/i18n/number-format\";\r\nimport { useUiStrings } from \"../../lib/i18n/provider\";\r\nimport { Button } from \"../Button\";\r\nimport { Popover } from \"../Popover\";\r\n\r\n/* ============================================================================\r\n   A ROW THAT NEVER WRAPS AND NEVER HIDES ANYTHING (DX-3984, DX-5425).\r\n   ----------------------------------------------------------------------------\r\n   A card tile gets two rows of marks, and a lane is only ~288px wide, so a\r\n   card that carries many indicators cannot show them all at their full size.\r\n   The row makes room in a fixed order and stops at the first step that fits:\r\n\r\n     1. FULL FORM    — every item as designed.\r\n     2. COMPACT FORM — each item's shorter form (`render(true)`): a usage chip\r\n                       without its words, an age without its created half.\r\n     3. \"+N\"         — the items nobody would miss first leave the row, and a\r\n                       `+N` control opens a popover holding them, each still a\r\n                       working mark with its own tooltip. Nothing is clipped:\r\n                       an item is either in the row or one tap away.\r\n\r\n   WHAT NEVER LEAVES THE ROW is `pinned` (the holds a human must see) and every\r\n   item marked `keep` (DX-5422: the age of a card inside its parent's box). Both\r\n   take part in step 2, shortening like everything else, but are never tucked\r\n   away; a kept item stays in its own place among the items. If they alone,\r\n   shortened, are wider than the row, it is the caller's layout that is wrong.\r\n\r\n   IT MEASURES THE REAL LAYOUT, not an estimate: all items render in a\r\n   non-wrapping box, and when `scrollWidth` exceeds `clientWidth` the next step\r\n   is taken. The steps run in a layout effect, so a re-render with the new form\r\n   is committed before the browser paints — no frame ever shows an overflowing\r\n   row. A `ResizeObserver` re-runs the whole sequence when the row's own width\r\n   changes (a rotated phone, a resized lane).\r\n\r\n   ON A SERVER (DX-5425) no effect runs, so the prerendered row is the full\r\n   form; the browser compacts it before its first paint after hydration.\r\n   ========================================================================= */\r\n\r\nexport interface OverflowItem {\r\n  /** Stable across renders; a card's marks come and go as its facts change. */\r\n  key: string;\r\n  /**\r\n   * Higher leaves the row FIRST. Display order is the array's order, never rank: rank only says which item a\r\n   * crowded row can least afford to keep.\r\n   */\r\n  hideRank: number;\r\n  /** DX-5422: the item never leaves for the `+N` popover; a crowded row shortens it and tucks the others instead. */\r\n  keep?: boolean;\r\n  /** `compact` is true once the row has had to shorten its items (step 2). */\r\n  render: (compact: boolean) => ReactNode;\r\n}\r\n\r\n/** The items a crowded row may tuck behind `+N`: every one not marked `keep`. */\r\nfunction hideable(items: readonly OverflowItem[]): OverflowItem[] {\r\n  return items.filter((item) => item.keep !== true);\r\n}\r\n\r\n/** Which item keys leave the row when `hiddenCount` of them must: highest `hideRank` first, the later item first among equals. */\r\nexport function hiddenKeys(items: readonly OverflowItem[], hiddenCount: number): ReadonlySet<string> {\r\n  const byHideOrder = hideable(items)\r\n    .map((item, index) => ({ key: item.key, hideRank: item.hideRank, index }))\r\n    .sort((a, b) => b.hideRank - a.hideRank || b.index - a.index);\r\n  return new Set(byHideOrder.slice(0, hiddenCount).map((entry) => entry.key));\r\n}\r\n\r\ntype Plan = { step: \"full\" } | { step: \"compact\" } | { step: \"collapsed\"; hiddenCount: number };\r\n\r\nexport interface OverflowRowProps {\r\n  /** Always in the row, before the items, whatever the width; `compact` is true once the row has had to shorten its marks. */\r\n  pinned?: (compact: boolean) => ReactNode;\r\n  items: readonly OverflowItem[];\r\n  /**\r\n   * What the row's marks SAY, as one string: the pinned part's content and every mark's text that can change width\r\n   * under an unchanged key (a hold's count, a usage label, an age). When it changes the row starts over from the\r\n   * full form, so a mark that shrinks (a hold clears, a label gets shorter) is not left in a compacted row. It must\r\n   * be stable across renders that change nothing, or the row would restart on every one of them.\r\n   */\r\n  contentKey: string;\r\n  testId?: string;\r\n  className?: string;\r\n  /** The `+N` button's test id; its popover's list takes `<moreTestId>-items`. */\r\n  moreTestId?: string;\r\n  /**\r\n   * DX-5677: the row's marks sit at its END (an auto margin on the first mark, so an overflowing row still overflows\r\n   * to the end and `scrollWidth` still sees it). The row's flex-basis is then pinned to its FULL form's measured width\r\n   * once it has had to shorten, so a wrapping parent decides on the same width whatever form is drawn: without that, a\r\n   * shortened row would fit back beside its neighbour, be reset by the resize observer, no longer fit, and flicker.\r\n   */\r\n  alignEnd?: boolean;\r\n}\r\n\r\nexport function OverflowRow({ pinned, items, contentKey, testId, className, moreTestId, alignEnd = false }: OverflowRowProps) {\r\n  const strings = useUiStrings().overflowRow;\r\n  const formatNumber = useNumberFormat();\r\n  const rowRef = useRef<HTMLSpanElement>(null);\r\n  const [plan, setPlan] = useState<Plan>({ step: \"full\" });\r\n  // A change in WHICH items exist, or in what they say, restarts the sequence from the full form: the steps only ever\r\n  // escalate, so without this a row that has shrunk back inside its width would stay compacted. A re-render that changes\r\n  // neither does not restart (that would loop).\r\n  const restartKey = JSON.stringify([items.map((item) => item.key), contentKey]);\r\n  const [restartedFor, setRestartedFor] = useState(restartKey);\r\n  // DX-5677: the full form's width, measured when it overflowed; `null` until then and after every restart.\r\n  const [fullWidth, setFullWidth] = useState<number | null>(null);\r\n  if (restartedFor !== restartKey) {\r\n    setRestartedFor(restartKey);\r\n    setPlan({ step: \"full\" });\r\n    setFullWidth(null);\r\n  }\r\n\r\n  const hideableCount = hideable(items).length;\r\n  useLayoutEffect(() => {\r\n    const row = rowRef.current;\r\n    if (row === null) return;\r\n    const overflows = row.scrollWidth > row.clientWidth;\r\n    if (!overflows) return;\r\n    if (plan.step === \"full\") {\r\n      setFullWidth(row.scrollWidth);\r\n      setPlan({ step: \"compact\" });\r\n    } else if (plan.step === \"compact\") setPlan({ step: \"collapsed\", hiddenCount: Math.min(1, hideableCount) });\r\n    else if (plan.hiddenCount < hideableCount) setPlan({ step: \"collapsed\", hiddenCount: plan.hiddenCount + 1 });\r\n  });\r\n\r\n  // The row's own width changing is the one thing that can make a settled plan wrong.\r\n  useLayoutEffect(() => {\r\n    const row = rowRef.current;\r\n    if (row === null) return;\r\n    let width = row.clientWidth;\r\n    const observer = new ResizeObserver(() => {\r\n      if (row.clientWidth === width) return;\r\n      width = row.clientWidth;\r\n      setPlan({ step: \"full\" });\r\n      setFullWidth(null);\r\n    });\r\n    observer.observe(row);\r\n    return () => observer.disconnect();\r\n  }, []);\r\n\r\n  const compact = plan.step !== \"full\";\r\n  const hidden = useMemo(() => (plan.step === \"collapsed\" ? hiddenKeys(items, plan.hiddenCount) : new Set<string>()), [plan, items]);\r\n  const shown = items.filter((item) => !hidden.has(item.key));\r\n  const endMargin = alignEnd ? \"ml-auto\" : \"\";\r\n  const tucked = items.filter((item) => hidden.has(item.key));\r\n\r\n  return (\r\n    <span\r\n      ref={rowRef}\r\n      data-testid={testId}\r\n      // DX-4202 / DX-4259: the clip box is 4px wider a side than the layout, so a first or last mark's coarse-pointer reach (3px) is not cut.\r\n      className={cn(\"-mx-1 flex min-w-0 flex-nowrap items-stretch gap-x-1.5 overflow-x-clip px-1\", className)}\r\n      style={plan.step !== \"full\" && fullWidth !== null ? { flexBasis: fullWidth } : undefined}\r\n    >\r\n      {/* DX-5677: each slot spans the row's height (its tap reach) and centres its mark, so a 20px mark shares the 22px marks' centre line. */}\n      {pinned === undefined ? null : <span className={cn(\"flex shrink-0 items-center gap-x-1.5\", endMargin)}>{pinned(compact)}</span>}\r\n      {shown.map((item, index) => (\r\n        <span key={item.key} className={cn(\"flex shrink-0 items-center\", pinned === undefined && index === 0 && endMargin)}>\r\n          {item.render(compact)}\r\n        </span>\r\n      ))}\r\n      {tucked.length === 0 ? null : (\r\n        <Popover\r\n          trigger={\r\n            <Button\r\n              variant=\"ghost\"\r\n              // I18N-ALLOW: a Button size token, not words\r\n              size=\"2xs\"\r\n              className={cn(\"shrink-0 self-center px-1 tabular\", pinned === undefined && shown.length === 0 && endMargin)}\r\n              aria-label={strings.more(tucked.length, formatNumber(tucked.length))}\r\n              data-testid={moreTestId}\r\n            >\r\n              +{formatNumber(tucked.length)}\r\n            </Button>\r\n          }\r\n        >\r\n          <span className=\"flex flex-wrap items-center gap-x-3 gap-y-2\" data-testid={moreTestId === undefined ? undefined : `${moreTestId}-items`}>\r\n            {tucked.map((item) => (\r\n              <span key={item.key} className=\"flex items-center\">\r\n                {item.render(false)}\r\n              </span>\r\n            ))}\r\n          </span>\r\n        </Popover>\r\n      )}\r\n    </span>\r\n  );\r\n}\r\n"],"names":["hideable","items","item","hiddenKeys","hiddenCount","byHideOrder","index","a","b","entry","OverflowRow","pinned","contentKey","testId","className","moreTestId","alignEnd","strings","useUiStrings","formatNumber","useNumberFormat","rowRef","useRef","plan","setPlan","useState","restartKey","restartedFor","setRestartedFor","fullWidth","setFullWidth","hideableCount","useLayoutEffect","row","width","observer","compact","hidden","useMemo","shown","endMargin","tucked","jsxs","cn","jsx","Popover","Button"],"mappings":";;;;;;;AAsDA,SAASA,EAASC,GAAgD;AAChE,SAAOA,EAAM,OAAO,CAACC,MAASA,EAAK,SAAS,EAAI;AAClD;AAGO,SAASC,EAAWF,GAAgCG,GAA0C;AACnG,QAAMC,IAAcL,EAASC,CAAK,EAC/B,IAAI,CAACC,GAAMI,OAAW,EAAE,KAAKJ,EAAK,KAAK,UAAUA,EAAK,UAAU,OAAAI,EAAA,EAAQ,EACxE,KAAK,CAACC,GAAGC,MAAMA,EAAE,WAAWD,EAAE,YAAYC,EAAE,QAAQD,EAAE,KAAK;AAC9D,SAAO,IAAI,IAAIF,EAAY,MAAM,GAAGD,CAAW,EAAE,IAAI,CAACK,MAAUA,EAAM,GAAG,CAAC;AAC5E;AA4BO,SAASC,EAAY,EAAE,QAAAC,GAAQ,OAAAV,GAAO,YAAAW,GAAY,QAAAC,GAAQ,WAAAC,GAAW,YAAAC,GAAY,UAAAC,IAAW,MAA2B;AAC5H,QAAMC,IAAUC,IAAe,aACzBC,IAAeC,EAAA,GACfC,IAASC,EAAwB,IAAI,GACrC,CAACC,GAAMC,CAAO,IAAIC,EAAe,EAAE,MAAM,QAAQ,GAIjDC,IAAa,KAAK,UAAU,CAACzB,EAAM,IAAI,CAACC,MAASA,EAAK,GAAG,GAAGU,CAAU,CAAC,GACvE,CAACe,GAAcC,CAAe,IAAIH,EAASC,CAAU,GAErD,CAACG,GAAWC,CAAY,IAAIL,EAAwB,IAAI;AAC9D,EAAIE,MAAiBD,MACnBE,EAAgBF,CAAU,GAC1BF,EAAQ,EAAE,MAAM,QAAQ,GACxBM,EAAa,IAAI;AAGnB,QAAMC,IAAgB/B,EAASC,CAAK,EAAE;AACtC,EAAA+B,EAAgB,MAAM;AACpB,UAAMC,IAAMZ,EAAO;AAGnB,IAFIY,MAAQ,QAER,EADcA,EAAI,cAAcA,EAAI,iBAEpCV,EAAK,SAAS,UAChBO,EAAaG,EAAI,WAAW,GAC5BT,EAAQ,EAAE,MAAM,WAAW,KAClBD,EAAK,SAAS,cAAmB,EAAE,MAAM,aAAa,aAAa,KAAK,IAAI,GAAGQ,CAAa,GAAG,IACjGR,EAAK,cAAcQ,KAAeP,EAAQ,EAAE,MAAM,aAAa,aAAaD,EAAK,cAAc,EAAA,CAAG;AAAA,EAC7G,CAAC,GAGDS,EAAgB,MAAM;AACpB,UAAMC,IAAMZ,EAAO;AACnB,QAAIY,MAAQ,KAAM;AAClB,QAAIC,IAAQD,EAAI;AAChB,UAAME,IAAW,IAAI,eAAe,MAAM;AACxC,MAAIF,EAAI,gBAAgBC,MACxBA,IAAQD,EAAI,aACZT,EAAQ,EAAE,MAAM,QAAQ,GACxBM,EAAa,IAAI;AAAA,IACnB,CAAC;AACD,WAAAK,EAAS,QAAQF,CAAG,GACb,MAAME,EAAS,WAAA;AAAA,EACxB,GAAG,CAAA,CAAE;AAEL,QAAMC,IAAUb,EAAK,SAAS,QACxBc,IAASC,EAAQ,MAAOf,EAAK,SAAS,cAAcpB,EAAWF,GAAOsB,EAAK,WAAW,IAAI,oBAAI,IAAA,GAAgB,CAACA,GAAMtB,CAAK,CAAC,GAC3HsC,IAAQtC,EAAM,OAAO,CAACC,MAAS,CAACmC,EAAO,IAAInC,EAAK,GAAG,CAAC,GACpDsC,IAAYxB,IAAW,YAAY,IACnCyB,IAASxC,EAAM,OAAO,CAACC,MAASmC,EAAO,IAAInC,EAAK,GAAG,CAAC;AAE1D,SACE,gBAAAwC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKrB;AAAA,MACL,eAAaR;AAAA,MAEb,WAAW8B,EAAG,+EAA+E7B,CAAS;AAAA,MACtG,OAAOS,EAAK,SAAS,UAAUM,MAAc,OAAO,EAAE,WAAWA,EAAA,IAAc;AAAA,MAG9E,UAAA;AAAA,QAAAlB,MAAW,SAAY,OAAO,gBAAAiC,EAAC,QAAA,EAAK,WAAWD,EAAG,wCAAwCH,CAAS,GAAI,UAAA7B,EAAOyB,CAAO,EAAA,CAAE;AAAA,QACvHG,EAAM,IAAI,CAACrC,GAAMI,MAChB,gBAAAsC,EAAC,QAAA,EAAoB,WAAWD,EAAG,8BAA8BhC,MAAW,UAAaL,MAAU,KAAKkC,CAAS,GAC9G,UAAAtC,EAAK,OAAOkC,CAAO,EAAA,GADXlC,EAAK,GAEhB,CACD;AAAA,QACAuC,EAAO,WAAW,IAAI,OACrB,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SACE,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBAER,MAAK;AAAA,gBACL,WAAWH,EAAG,qCAAqChC,MAAW,UAAa4B,EAAM,WAAW,KAAKC,CAAS;AAAA,gBAC1G,cAAYvB,EAAQ,KAAKwB,EAAO,QAAQtB,EAAasB,EAAO,MAAM,CAAC;AAAA,gBACnE,eAAa1B;AAAA,gBACd,UAAA;AAAA,kBAAA;AAAA,kBACGI,EAAasB,EAAO,MAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIhC,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,+CAA8C,eAAa7B,MAAe,SAAY,SAAY,GAAGA,CAAU,UAC5H,UAAA0B,EAAO,IAAI,CAACvC,MACX,gBAAA0C,EAAC,QAAA,EAAoB,WAAU,qBAC5B,UAAA1C,EAAK,OAAO,EAAK,EAAA,GADTA,EAAK,GAEhB,CACD,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/card-face/TapTip.js

@@ -0,0 +1,32 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { useState as m, useId as f } from "react";
+import { cn as u } from "../../lib/cn.js";
+import { Tooltip as x } from "../Popover.js";
+import { COARSE_HIT_AREA as T } from "./hit-area.js";
+const A = "[data-tap-tip]";
+function E({ tooltip: a, label: t, description: e, testId: r, className: s, style: p, children: d }) {
+  const [l, o] = m(!1), i = f();
+  return /* @__PURE__ */ n(x, { content: a, closeOnClick: !1, open: l, onOpenChange: o, children: /* @__PURE__ */ c(
+    "span",
+    {
+      "data-tap-tip": "",
+      tabIndex: 0,
+      role: t === void 0 ? void 0 : "img",
+      "aria-label": t,
+      "aria-describedby": e === void 0 ? void 0 : i,
+      onClick: () => o(!0),
+      "data-testid": r,
+      style: p,
+      className: u("inline-flex items-center gap-1 rounded-sm text-xs whitespace-nowrap", T, s),
+      children: [
+        d,
+        e === void 0 ? null : /* @__PURE__ */ n("span", { id: i, className: "sr-only", children: e })
+      ]
+    }
+  ) });
+}
+export {
+  A as TAP_TIP_SELECTOR,
+  E as TapTip
+};
+//# sourceMappingURL=TapTip.js.map

package/dist/components/card-face/TapTip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TapTip.js","sources":["../../../src/components/card-face/TapTip.tsx"],"sourcesContent":["import { useId, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Tooltip } from \"../Popover\";\nimport { COARSE_HIT_AREA } from \"./hit-area\";\n\n/* ============================================================================\n   A MARK THAT EXPLAINS ITSELF — hover, keyboard focus AND a tap (DX-3822, DX-5425).\n   ----------------------------------------------------------------------------\n   A phone has no hover, so a glyph with only a hover tooltip says nothing\n   there. The anchor is therefore a focusable span whose click drives the\n   tooltip OPEN (the library `Tooltip`'s controlled pair, which exists for\n   exactly this: a tap focuses without opening).\n\n   A TAP MUST NOT ALSO OPEN THE CARD. A card drawn as one big link (a block\n   link) treats a click inside it as a click on the card; `TAP_TIP_SELECTOR`\n   is what such a host leaves to the mark, so a tap here shows the tooltip\n   and nothing else.\n\n   THE TOOLTIP IS A LABEL, never a surface: the library `Tooltip` is not\n   enterable by default, so the popup closes as the pointer leaves the mark\n   and never covers its neighbours.\n\n   A SMALL MARK STAYS TAPPABLE (DX-3984). Marks packed tight get a coarse-\n   pointer hit area stretched past the glyph by a `::after` whose reach the\n   row sets (`COARSE_HIT_AREA`), so neighbouring targets tile.\n   ========================================================================= */\n\n/** The CSS selector a click-delegating host uses to leave a `TapTip` to itself — matches the attribute below. */\nexport const TAP_TIP_SELECTOR = \"[data-tap-tip]\";\n\nexport interface TapTipProps {\n  tooltip: ReactNode;\n  /** The mark's accessible name, when it is a glyph with no text of its own; a mark that prints its words omits it. */\n  label?: string;\n  /** DX-4315: the tooltip's text as the mark's accessible description, present whether or not the tooltip is open (a screen reader has no hover). */\n  description?: string;\n  testId?: string;\n  className?: string;\n  style?: CSSProperties;\n  children: ReactNode;\n}\n\nexport function TapTip({ tooltip, label, description, testId, className, style, children }: TapTipProps) {\n  const [open, setOpen] = useState(false);\n  const descriptionId = useId();\n  return (\n    <Tooltip content={tooltip} closeOnClick={false} open={open} onOpenChange={setOpen}>\n      <span\n        data-tap-tip=\"\"\n        tabIndex={0}\n        role={label === undefined ? undefined : \"img\"}\n        aria-label={label}\n        aria-describedby={description === undefined ? undefined : descriptionId}\n        onClick={() => setOpen(true)}\n        data-testid={testId}\n        style={style}\n        className={cn(\"inline-flex items-center gap-1 rounded-sm text-xs whitespace-nowrap\", COARSE_HIT_AREA, className)}\n      >\n        {children}\n        {description === undefined ? null : (\n          <span id={descriptionId} className=\"sr-only\">\n            {description}\n          </span>\n        )}\n      </span>\n    </Tooltip>\n  );\n}\n"],"names":["TAP_TIP_SELECTOR","TapTip","tooltip","label","description","testId","className","style","children","open","setOpen","useState","descriptionId","useId","jsx","Tooltip","jsxs","cn","COARSE_HIT_AREA"],"mappings":";;;;;AA4BO,MAAMA,IAAmB;AAczB,SAASC,EAAO,EAAE,SAAAC,GAAS,OAAAC,GAAO,aAAAC,GAAa,QAAAC,GAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAC,KAAyB;AACvG,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAgBC,EAAA;AACtB,SACE,gBAAAC,EAACC,KAAQ,SAASb,GAAS,cAAc,IAAO,MAAAO,GAAY,cAAcC,GACxE,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAa;AAAA,MACb,UAAU;AAAA,MACV,MAAMb,MAAU,SAAY,SAAY;AAAA,MACxC,cAAYA;AAAA,MACZ,oBAAkBC,MAAgB,SAAY,SAAYQ;AAAA,MAC1D,SAAS,MAAMF,EAAQ,EAAI;AAAA,MAC3B,eAAaL;AAAA,MACb,OAAAE;AAAA,MACA,WAAWU,EAAG,uEAAuEC,GAAiBZ,CAAS;AAAA,MAE9G,UAAA;AAAA,QAAAE;AAAA,QACAJ,MAAgB,SAAY,OAC3B,gBAAAU,EAAC,UAAK,IAAIF,GAAe,WAAU,WAChC,UAAAR,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

package/dist/components/card-face/hit-area.js

@@ -0,0 +1,6 @@
+const e = "relative pointer-coarse:after:absolute pointer-coarse:after:content-[''] pointer-coarse:after:top-[calc(var(--hit-t,0.5rem)*-1)] pointer-coarse:after:bottom-[calc(var(--hit-b,0.5rem)*-1)] pointer-coarse:after:left-[calc(var(--hit-x,0.5rem)*-1)] pointer-coarse:after:right-[calc(var(--hit-x,0.5rem)*-1)]", r = "size-5.5";
+export {
+  e as COARSE_HIT_AREA,
+  r as ROW_RING_SIZE
+};
+//# sourceMappingURL=hit-area.js.map

package/dist/components/card-face/hit-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hit-area.js","sources":["../../../src/components/card-face/hit-area.ts"],"sourcesContent":["/**\n * DX-3984 / DX-5425 — a small mark's TOUCH target: on a coarse pointer an `::after` stretches the mark's hit area past its\n * glyph (the target grows, the layout does not). Fine pointers keep the exact glyph box.\n *\n * THE STRETCH IS SET BY THE ROW, NOT BY THE MARK. A card face stacks two 16px rows 2px apart, so a fixed inset would make a\n * mark's target run into its neighbours'. A row declares how far its marks may reach on each side through `--hit-t` /\n * `--hit-b` / `--hit-x` (top, bottom, left and right) and chooses them so the targets TILE the stack and meet at the midpoint\n * of every gap. A mark outside any such row reaches 8px every way.\n *\n * A mark's box must be as tall as its row for the vertical reach to land on the row's edge, so a row stretches its marks.\n */\nexport const COARSE_HIT_AREA =\n  \"relative pointer-coarse:after:absolute pointer-coarse:after:content-[''] \" +\n  \"pointer-coarse:after:top-[calc(var(--hit-t,0.5rem)*-1)] pointer-coarse:after:bottom-[calc(var(--hit-b,0.5rem)*-1)] \" +\n  \"pointer-coarse:after:left-[calc(var(--hit-x,0.5rem)*-1)] pointer-coarse:after:right-[calc(var(--hit-x,0.5rem)*-1)]\";\n\n/**\n * DX-4259 — a card face's activity-row mark height. The effort badge is 22px tall (an explicit `h-5.5`, DX-4799: an\n * icon-only pill has no text line to size it), and the quality-gate and acceptance-criteria rings are exactly as tall: ring\n * outer diameter = row height, no padding between the ring and the row's edge. The ring SVG is viewBox-scaled and its `row`\n * track reaches the viewBox edge, so a size class on the ring is all it takes; `row` is kept for its thin track (a fat track\n * at 22px would leave the centre icon no room).\n */\nexport const ROW_RING_SIZE = \"size-5.5\";\n"],"names":["COARSE_HIT_AREA","ROW_RING_SIZE"],"mappings":"AAWO,MAAMA,IACX,kTAWWC,IAAgB;"}