@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/chart/time-series-scale.js

@@ -0,0 +1,51 @@
+import { dateFormat as d } from "../../lib/intl-cache.js";
+const g = 6e4, y = 864e5;
+function k(n, s = 4) {
+  if (!Number.isFinite(n) || n <= 0) return { ticks: [0, 1], max: 1 };
+  const o = n / s, t = 10 ** Math.floor(Math.log10(o)), e = o / t, r = (e <= 1 ? 1 : e <= 2 ? 2 : e <= 5 ? 5 : 10) * t, f = Math.ceil(n / r - 1e-9) * r, c = [];
+  for (let m = 0; m * r <= f + r * 1e-9; m++) c.push(Number((m * r).toPrecision(12)));
+  return { ticks: c, max: c[c.length - 1] };
+}
+function p(n, s, o) {
+  const t = (i) => {
+    const u = d(s, { ...i, timeZone: o });
+    return (l) => u.format(l);
+  }, e = t({ hour: "numeric", minute: "2-digit" }), r = t({ month: "short", day: "numeric" }), f = t({ month: "short", year: "numeric" }), c = t({ year: "numeric" });
+  if (n < y) {
+    const i = t({ dateStyle: "medium", timeStyle: "short" });
+    return {
+      tick: (u, l) => {
+        const a = r(u);
+        return { primary: e(u), secondary: l === null || r(l) !== a ? a : null };
+      },
+      full: i
+    };
+  }
+  if (n < 28 * y) {
+    const i = t({ dateStyle: "medium" });
+    return {
+      tick: (u, l) => {
+        const a = c(u);
+        return { primary: r(u), secondary: l !== null && c(l) !== a ? a : null };
+      },
+      full: i
+    };
+  }
+  const m = t({ month: "long", year: "numeric" });
+  return { tick: (i) => ({ primary: f(i), secondary: null }), full: m };
+}
+function M(n, s, o) {
+  for (let t = n.length - 1; t >= 0; t--) {
+    const e = n[t];
+    if (o >= e) return o < e + s ? t : -1;
+  }
+  return -1;
+}
+export {
+  y as DAY_MS,
+  g as MINUTE_MS,
+  M as bucketIndexAt,
+  k as niceTicks,
+  p as timeFormatters
+};
+//# sourceMappingURL=time-series-scale.js.map

package/dist/components/chart/time-series-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-series-scale.js","sources":["../../../src/components/chart/time-series-scale.ts"],"sourcesContent":["/* ----------------------------------------------------------------------------\n   THE ARITHMETIC OF A TIME-SERIES CHART (DX-4328) — pure functions, no React,\n   so the axis and the time labels are tested as numbers and not as pixels.\n   -------------------------------------------------------------------------- */\n\nimport { dateFormat } from \"@/lib/intl-cache\";\n\nexport const MINUTE_MS = 60_000;\nexport const DAY_MS = 86_400_000;\n\n/**\n * A value axis that starts at zero and ends on a round number at or above\n * `max`, with about `count` intervals: steps of 1, 2 or 5 times a power of ten.\n * No data (`max <= 0`) is a 0-to-1 axis, never a zero-height one.\n */\nexport function niceTicks(max: number, count = 4): { ticks: number[]; max: number } {\n  if (!Number.isFinite(max) || max <= 0) return { ticks: [0, 1], max: 1 };\n  const raw = max / count;\n  const magnitude = 10 ** Math.floor(Math.log10(raw));\n  const norm = raw / magnitude;\n  const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10) * magnitude;\n  const top = Math.ceil(max / step - 1e-9) * step;\n  const ticks: number[] = [];\n  for (let k = 0; k * step <= top + step * 1e-9; k++) ticks.push(Number((k * step).toPrecision(12)));\n  return { ticks, max: ticks[ticks.length - 1]! };\n}\n\nexport interface TimeFormatters {\n  /** The label under a tick: a primary line, and a secondary line when the day (or year) changed since the last tick. */\n  tick: (ms: number, previousMs: number | null) => { primary: string; secondary: string | null };\n  /** The whole instant, for the tooltip and the table. */\n  full: (ms: number) => string;\n}\n\n/**\n * How a bucket start reads for a bucket this wide. Under a day the time is the\n * label and the date appears where it changes; a day or wider is labelled by\n * its date; a month or wider by month and year. `timeZone` is passed straight\n * to `Intl` (an unknown zone throws, loudly); undefined is the viewer's own.\n */\nexport function timeFormatters(bucketMs: number, locale: string, timeZone: string | undefined): TimeFormatters {\n  const fmt = (options: Intl.DateTimeFormatOptions) => {\n    const f = dateFormat(locale, { ...options, timeZone });\n    return (ms: number) => f.format(ms);\n  };\n  const time = fmt({ hour: \"numeric\", minute: \"2-digit\" });\n  const date = fmt({ month: \"short\", day: \"numeric\" });\n  const monthYear = fmt({ month: \"short\", year: \"numeric\" });\n  const year = fmt({ year: \"numeric\" });\n\n  if (bucketMs < DAY_MS) {\n    const full = fmt({ dateStyle: \"medium\", timeStyle: \"short\" });\n    return {\n      tick: (ms, prev) => {\n        const d = date(ms);\n        return { primary: time(ms), secondary: prev === null || date(prev) !== d ? d : null };\n      },\n      full,\n    };\n  }\n  if (bucketMs < 28 * DAY_MS) {\n    const full = fmt({ dateStyle: \"medium\" });\n    return {\n      tick: (ms, prev) => {\n        const y = year(ms);\n        return { primary: date(ms), secondary: prev !== null && year(prev) !== y ? y : null };\n      },\n      full,\n    };\n  }\n  const full = fmt({ month: \"long\", year: \"numeric\" });\n  return { tick: (ms) => ({ primary: monthYear(ms), secondary: null }), full };\n}\n\n/** The index of the bucket whose span `[start, start + bucketMs)` holds `at`, or -1. */\nexport function bucketIndexAt(buckets: readonly number[], bucketMs: number, at: number): number {\n  for (let i = buckets.length - 1; i >= 0; i--) {\n    const start = buckets[i]!;\n    if (at >= start) return at < start + bucketMs ? i : -1;\n  }\n  return -1;\n}\n"],"names":["MINUTE_MS","DAY_MS","niceTicks","max","count","raw","magnitude","norm","step","top","ticks","k","timeFormatters","bucketMs","locale","timeZone","fmt","options","f","dateFormat","ms","time","date","monthYear","year","full","prev","d","y","bucketIndexAt","buckets","at","i","start"],"mappings":";AAOO,MAAMA,IAAY,KACZC,IAAS;AAOf,SAASC,EAAUC,GAAaC,IAAQ,GAAqC;AAClF,MAAI,CAAC,OAAO,SAASD,CAAG,KAAKA,KAAO,EAAG,QAAO,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,EAAA;AACpE,QAAME,IAAMF,IAAMC,GACZE,IAAY,MAAM,KAAK,MAAM,KAAK,MAAMD,CAAG,CAAC,GAC5CE,IAAOF,IAAMC,GACbE,KAAQD,KAAQ,IAAI,IAAIA,KAAQ,IAAI,IAAIA,KAAQ,IAAI,IAAI,MAAMD,GAC9DG,IAAM,KAAK,KAAKN,IAAMK,IAAO,IAAI,IAAIA,GACrCE,IAAkB,CAAA;AACxB,WAASC,IAAI,GAAGA,IAAIH,KAAQC,IAAMD,IAAO,MAAMG,IAAK,CAAAD,EAAM,KAAK,QAAQC,IAAIH,GAAM,YAAY,EAAE,CAAC,CAAC;AACjG,SAAO,EAAE,OAAAE,GAAO,KAAKA,EAAMA,EAAM,SAAS,CAAC,EAAA;AAC7C;AAeO,SAASE,EAAeC,GAAkBC,GAAgBC,GAA8C;AAC7G,QAAMC,IAAM,CAACC,MAAwC;AACnD,UAAMC,IAAIC,EAAWL,GAAQ,EAAE,GAAGG,GAAS,UAAAF,GAAU;AACrD,WAAO,CAACK,MAAeF,EAAE,OAAOE,CAAE;AAAA,EACpC,GACMC,IAAOL,EAAI,EAAE,MAAM,WAAW,QAAQ,WAAW,GACjDM,IAAON,EAAI,EAAE,OAAO,SAAS,KAAK,WAAW,GAC7CO,IAAYP,EAAI,EAAE,OAAO,SAAS,MAAM,WAAW,GACnDQ,IAAOR,EAAI,EAAE,MAAM,WAAW;AAEpC,MAAIH,IAAWZ,GAAQ;AACrB,UAAMwB,IAAOT,EAAI,EAAE,WAAW,UAAU,WAAW,SAAS;AAC5D,WAAO;AAAA,MACL,MAAM,CAACI,GAAIM,MAAS;AAClB,cAAMC,IAAIL,EAAKF,CAAE;AACjB,eAAO,EAAE,SAASC,EAAKD,CAAE,GAAG,WAAWM,MAAS,QAAQJ,EAAKI,CAAI,MAAMC,IAAIA,IAAI,KAAA;AAAA,MACjF;AAAA,MACA,MAAAF;AAAAA,IAAA;AAAA,EAEJ;AACA,MAAIZ,IAAW,KAAKZ,GAAQ;AAC1B,UAAMwB,IAAOT,EAAI,EAAE,WAAW,UAAU;AACxC,WAAO;AAAA,MACL,MAAM,CAACI,GAAIM,MAAS;AAClB,cAAME,IAAIJ,EAAKJ,CAAE;AACjB,eAAO,EAAE,SAASE,EAAKF,CAAE,GAAG,WAAWM,MAAS,QAAQF,EAAKE,CAAI,MAAME,IAAIA,IAAI,KAAA;AAAA,MACjF;AAAA,MACA,MAAAH;AAAAA,IAAA;AAAA,EAEJ;AACA,QAAMA,IAAOT,EAAI,EAAE,OAAO,QAAQ,MAAM,WAAW;AACnD,SAAO,EAAE,MAAM,CAACI,OAAQ,EAAE,SAASG,EAAUH,CAAE,GAAG,WAAW,KAAA,IAAS,MAAAK,EAAA;AACxE;AAGO,SAASI,EAAcC,GAA4BjB,GAAkBkB,GAAoB;AAC9F,WAASC,IAAIF,EAAQ,SAAS,GAAGE,KAAK,GAAGA,KAAK;AAC5C,UAAMC,IAAQH,EAAQE,CAAC;AACvB,QAAID,KAAME,EAAO,QAAOF,IAAKE,IAAQpB,IAAWmB,IAAI;AAAA,EACtD;AACA,SAAO;AACT;"}

package/dist/components/chat/Attachment.js

@@ -0,0 +1,316 @@
+import { jsxs as i, jsx as t, Fragment as N } from "react/jsx-runtime";
+import { useMemo as C, useState as E, useRef as j, useEffect as T } from "react";
+import { cn as l } from "../../lib/cn.js";
+import { formatBytes as M } from "../../lib/format.js";
+import { formatPercent as L } from "../../lib/intl-cache.js";
+import { Icon as I } from "../Icon.js";
+import { Spinner as _ } from "../Spinner.js";
+import { reportCommittedError as $ } from "../media-error.js";
+import { isImageFile as A, isVideoFile as G, fileIconFor as O } from "./file-icon.js";
+import { Tooltip as B } from "../Popover.js";
+import { useUiLocale as P, useUiStrings as U } from "../../lib/i18n/provider.js";
+import { useNumberFormat as R } from "../../lib/i18n/number-format.js";
+function V(e) {
+  return e.includes("#") ? e : `${e}#t=0.001`;
+}
+function z({ file: e, iconSize: r, className: n }) {
+  const [s, a] = E(null), o = e.thumbnailUrl ?? (A(e) ? e.url : void 0);
+  return o && s !== o ? /* @__PURE__ */ t("img", { src: o, alt: "", loading: "lazy", className: n, onError: () => a(o) }) : G(e) && e.url && s !== e.url ? /* @__PURE__ */ t(
+    "video",
+    {
+      src: V(e.url),
+      preload: "metadata",
+      muted: !0,
+      playsInline: !0,
+      "aria-hidden": "true",
+      tabIndex: -1,
+      onError: () => a(e.url),
+      ref: $(() => a(e.url)),
+      className: n
+    }
+  ) : /* @__PURE__ */ t(I, { name: O(e), size: r, className: "text-tertiary" });
+}
+const W = 4;
+function X(e, r) {
+  const n = e.lastIndexOf("."), s = n > 0 ? e.slice(n + 1) : "";
+  return s === "" || s.length > W ? r : s.toUpperCase();
+}
+function q(e, r) {
+  return e === "tile" ? "aspect-4/3 w-36 shrink-0 rounded-xl" : e === "row" ? "flex w-full items-center gap-3 rounded-lg p-2 pr-1.5" : l(
+    "h-16 shrink-0 snap-start rounded-lg",
+    r ? "w-16" : "flex w-56 items-center gap-2 p-1.5 pr-2 [@media(pointer:coarse)]:w-80"
+  );
+}
+function D({
+  file: e,
+  image: r,
+  detail: n,
+  actions: s,
+  caption: a
+}) {
+  const o = U().chat.attachment, p = e.status === "error";
+  return r ? /* @__PURE__ */ i(N, { children: [
+    /* @__PURE__ */ t("div", { className: "absolute inset-0 grid place-items-center bg-surface-inset", children: /* @__PURE__ */ t(
+      z,
+      {
+        file: e,
+        iconSize: "sm",
+        className: l("size-full object-cover", e.status === "uploading" && "opacity-50")
+      }
+    ) }),
+    p && /* z-2, above the preview trigger's z-1, or the trigger would cover
+    the overlay and its tooltip would never fire. A failed file has
+    nothing complete to preview. Still below the actions' z-10. */
+    /* @__PURE__ */ t(B, { content: n, children: /* @__PURE__ */ t(
+      "div",
+      {
+        role: "img",
+        "aria-label": String(n),
+        className: "absolute inset-0 z-2 grid place-items-center bg-veil text-danger",
+        children: /* @__PURE__ */ t(I, { name: "circle-alert", size: "sm" })
+      }
+    ) }),
+    a && /* DXUI-74: the file's name along the bottom edge, ON the picture like the `"tile"` layout's caption. */
+    /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 bg-linear-to-t from-black/72 to-transparent px-1 pt-3 pb-0.5", children: /* @__PURE__ */ t("span", { className: "block truncate text-2xs font-semibold text-white", children: e.name }) }),
+    s
+  ] }) : /* @__PURE__ */ i(N, { children: [
+    /* @__PURE__ */ t("div", { className: "relative grid size-10 shrink-0 place-items-center overflow-hidden rounded-md bg-surface-inset", children: /* @__PURE__ */ t(z, { file: e, iconSize: "sm", className: "size-full object-cover" }) }),
+    /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ t("span", { className: "truncate text-xs font-medium text-primary", children: e.name }),
+      /* @__PURE__ */ t("span", { className: "flex min-w-0 items-center gap-1.5 text-2xs", children: p ? /* @__PURE__ */ t("span", { className: "truncate text-danger-text", children: n }) : /* @__PURE__ */ i(N, { children: [
+        /* @__PURE__ */ t("span", { className: "shrink-0 rounded-sm bg-surface-inset px-1 font-semibold text-tertiary", children: X(e.fileName ?? e.name, o.fileBadge) }),
+        n !== "" && /* @__PURE__ */ t("span", { className: "truncate text-tertiary", children: n })
+      ] }) })
+    ] }),
+    s
+  ] });
+}
+function H({
+  file: e,
+  layout: r = "tile",
+  meta: n,
+  action: s,
+  caption: a = !1,
+  onRemove: o,
+  onPreview: p,
+  onDownload: x,
+  selected: w = !1,
+  disabled: h = !1,
+  className: y,
+  ref: k
+}) {
+  const d = P(), m = U().chat.attachment, u = r === "tile", g = r === "strip", c = g && !!e.thumbnailUrl && A(e), b = e.status === "uploading", v = e.status === "error", f = C(() => v ? e.error ?? m.failed : b ? e.progress === void 0 ? m.uploading : L(Math.round(e.progress), d) : n !== void 0 ? n : e.size === void 0 ? "" : M(e.size, d), [v, b, n, e.error, e.progress, e.size, m, d]), S = /* @__PURE__ */ i(
+    "div",
+    {
+      className: l(
+        /* Above the full-card trigger, so a button click is a button click.
+           z-index rather than stopPropagation: propagation still fires the
+           card's handler on keyboard activation, which is where that trick
+           quietly breaks. */
+        "relative z-10 flex items-center gap-0.5",
+        /* DX-4039: a tile's cluster WRAPS inside the tile, never clips. Under
+                   `pointer: coarse` every action is `dx-tap`'s 44px, so three fill the
+                   144px tile (3*44 + 2*2 = 136 of the 138 left of the 6px right inset)
+                   and a fourth has no room on the row, where `overflow-hidden` on the
+                   tile would cut it off. Bounded by `left-0` and right-aligned, the
+                   overflow drops to a second row instead. `left-0`, not the 6px that
+                   mirrors the right: 132px would wrap the third. A fine pointer's 24px
+                   actions never reach the edge, so it is unchanged.
+        
+                   The box now spans the tile's width, so it is `pointer-events-none`
+                   and only its controls take the pointer (`[&>*]`): otherwise the empty
+                   part of the row would swallow taps meant for the preview trigger
+                   beneath it. */
+        u && "pointer-events-none absolute top-1.5 right-1.5 left-0 flex-wrap justify-end [&>*]:pointer-events-auto",
+        /* DXUI-16: a strip image tile is 64px square, so its cluster is the
+           corner. A strip file card lays the cluster BESIDE the text in its
+           flex row, so a 44px touch target pushes the filename over instead of
+           covering it. */
+        c && "absolute top-0.5 right-0.5",
+        g && !c && "shrink-0 self-start"
+      ),
+      children: [
+        s,
+        x && !b && /* @__PURE__ */ t(
+          F,
+          {
+            icon: "download",
+            label: m.download(e.name),
+            onClick: () => x(e),
+            disabled: h,
+            tinted: u || c
+          }
+        ),
+        o && /* @__PURE__ */ t(
+          F,
+          {
+            icon: "x",
+            label: m.remove(e.name),
+            onClick: () => o(e),
+            disabled: h,
+            tinted: u || c
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: k,
+      "data-attachment": e.id,
+      "data-status": e.status ?? "ready",
+      className: l(
+        /* `dx-ground-raised` so the action buttons inside mix their hover from
+           the tile they sit on, not from the page behind it. */
+        "dx-ground-raised group/attachment relative isolate overflow-hidden border bg-surface-raised",
+        "transition-[var(--tx-colors),box-shadow,transform] duration-(--dur-fast) ease-(--ease-standard)",
+        v ? "border-danger-border" : w ? "border-accent" : "border-border-subtle",
+        !h && "hover:border-border-strong",
+        w && "ring-2 ring-accent/35",
+        q(r, c),
+        h && "opacity-60",
+        y
+      ),
+      children: [
+        p && !h && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => p(e),
+            "aria-label": m.preview(e.name),
+            className: "absolute inset-0 z-1 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+          }
+        ),
+        u ? /* @__PURE__ */ i(N, { children: [
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 grid place-items-center bg-surface-inset", children: /* @__PURE__ */ t(
+            z,
+            {
+              file: e,
+              iconSize: "lg",
+              className: "size-full object-cover transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-slow) ease-(--ease-standard) group-hover/attachment:scale-[1.03]"
+            }
+          ) }),
+          /* @__PURE__ */ i("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-0 flex flex-col gap-0.5 bg-linear-to-t from-black/72 to-transparent px-2.5 pt-6 pb-2", children: [
+            /* @__PURE__ */ t("span", { className: "truncate text-2xs font-semibold text-white", children: e.name }),
+            f !== "" && /* @__PURE__ */ t("span", { className: l("truncate text-2xs", v ? "text-danger" : "text-white/70"), children: f })
+          ] }),
+          S
+        ] }) : g ? /* @__PURE__ */ t(D, { file: e, image: c, detail: f, actions: S, caption: a }) : /* @__PURE__ */ i(N, { children: [
+          /* @__PURE__ */ t("div", { className: "relative grid size-9 shrink-0 place-items-center overflow-hidden rounded-md bg-surface-inset", children: /* @__PURE__ */ t(z, { file: e, iconSize: "sm", className: "size-full object-cover" }) }),
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ t("span", { className: "truncate text-sm font-medium text-primary", children: e.name }),
+            f !== "" && /* @__PURE__ */ t("span", { className: l("truncate text-2xs", v ? "text-danger-text" : "text-tertiary"), children: f })
+          ] }),
+          S
+        ] }),
+        b && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-0.5 bg-border-subtle", children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              "h-full bg-accent transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)",
+              e.progress === void 0 && "w-1/3 animate-sweep"
+            ),
+            style: e.progress === void 0 ? void 0 : { width: `${e.progress}%` }
+          }
+        ) }),
+        b && u && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center bg-veil", children: /* @__PURE__ */ t(_, { size: "sm" }) })
+      ]
+    }
+  );
+}
+function F({
+  icon: e,
+  label: r,
+  onClick: n,
+  disabled: s,
+  tinted: a,
+  ...o
+}) {
+  return /* @__PURE__ */ t(B, { content: r, children: /* @__PURE__ */ t(
+    "button",
+    {
+      ...o,
+      type: "button",
+      onClick: n,
+      disabled: s,
+      "aria-label": r,
+      className: l(
+        "dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-none",
+        "transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+        "focus-visible:ring-2 focus-visible:ring-focus-ring",
+        a ? "bg-black/45 text-white opacity-0 backdrop-blur-[2px] hover:bg-black/70 group-hover/attachment:opacity-100 group-focus-within/attachment:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100 [@media(hover:none)]:opacity-100" : "text-tertiary hover:bg-surface-hover hover:text-primary",
+        s && "pointer-events-none opacity-40"
+      ),
+      children: /* @__PURE__ */ t(I, { name: e, size: "xs" })
+    }
+  ) });
+}
+function J(e, r) {
+  const n = j(null), s = j(r);
+  return T(() => {
+    const a = n.current;
+    e && a && r > s.current && (a.scrollLeft = a.scrollWidth), s.current = r;
+  }, [e, r]), n;
+}
+function ce({
+  files: e,
+  layout: r = "tile",
+  action: n,
+  caption: s,
+  onRemove: a,
+  onPreview: o,
+  onDownload: p,
+  max: x,
+  disabled: w,
+  className: h
+}) {
+  const y = U().chat.attachment, k = R(), d = r === "strip", m = J(d, e.length);
+  if (e.length === 0) return null;
+  const u = x === void 0 || d ? e : e.slice(0, x), g = e.length - u.length;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: d ? m : void 0,
+      className: l(
+        r === "tile" && "flex flex-wrap gap-2",
+        r === "row" && "flex flex-col gap-1.5",
+        d && "flex snap-x snap-mandatory gap-2 overflow-x-auto overscroll-x-contain pb-1 [scrollbar-width:thin]",
+        h
+      ),
+      children: [
+        u.map((c) => /* @__PURE__ */ t(
+          H,
+          {
+            file: c,
+            layout: r,
+            action: n?.(c),
+            caption: s,
+            onRemove: a,
+            onPreview: o,
+            onDownload: p,
+            disabled: w
+          },
+          c.id
+        )),
+        g > 0 && /* @__PURE__ */ t(
+          "div",
+          {
+            className: l(
+              "grid place-items-center rounded-xl border border-dashed border-border text-sm font-medium text-tertiary",
+              r === "tile" ? "aspect-4/3 w-36 shrink-0" : "h-9 w-full"
+            ),
+            children: y.more(k(g))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as Attachment,
+  F as AttachmentAction,
+  ce as AttachmentList,
+  z as TileMedia
+};
+//# sourceMappingURL=Attachment.js.map

package/dist/components/chat/Attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/chat/Attachment.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { formatBytes } from \"../../lib/format\";\nimport { useNumberFormat, useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { formatPercent } from \"../../lib/intl-cache\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport { reportCommittedError } from \"../media-error\";\nimport { fileIconFor, isImageFile, isVideoFile } from \"./file-icon\";\nimport { Tooltip } from \"../Popover\";\nimport type { ChatFile } from \"./types\";\nimport type { IconName } from \"../Icon\";\n\n/* ============================================================================\n   ATTACHMENTS\n   A file, rendered as either a flexible tile or an elongated row.\n\n   ONE COMPONENT, THREE LAYOUTS — not three components. The information is\n   identical (name, kind, size, state, actions) and only the arrangement\n   differs (a flexible `tile`, an elongated `row`, a 64px `strip` tile for a\n   composer), so splitting them would mean maintaining several copies of every\n   state: uploading, failed, image-with-thumbnail, image-without, and every\n   combination of optional action buttons. A `layout` prop keeps that surface\n   singular.\n\n   ACTIONS ARE OPT-IN, INDIVIDUALLY. Remove, preview and download each appear\n   only when the consumer passes a handler. A composer's staged files want\n   remove; a transcript's received files want download and preview and must NOT\n   offer remove, because deleting from a sent message is a lie about what was\n   sent. Defaulting them all on would put that lie in every transcript.\n\n   A VIDEO TILE SHOWS ITS FIRST FRAME (DX-3982), not the bare icon: a muted,\n   controlless <video> paints it without playing. Playback is `FileViewer`'s\n   job, and `FileCover` is the fixed-size cover for use inside other components.\n   ========================================================================= */\n\n/* DX-3982: the still frame of a video tile. A muted, controlless <video> with a\n   `#t=` fragment paints its first frame without playing, so a video reads as a\n   picture like every other tile. It is decoration — the caption names the file\n   — so it is hidden from assistive tech. A load error falls back to the icon. */\nfunction firstFrameUrl(url: string): string {\n  return url.includes(\"#\") ? url : `${url}#t=0.001`;\n}\n\n/* A tile's picture, or the file's icon when it has none or it will not load.\n   Exported (DX-4398) because the file viewer's rail shows the same thing for the\n   same reason — a thumbnail, a video's still frame, a type icon — and a second\n   copy of that decision would drift. The FAILED source is remembered, not a\n   boolean: a different url is a different picture and gets its own chance. */\nexport function TileMedia({ file, iconSize, className }: { file: ChatFile; iconSize: \"sm\" | \"lg\"; className?: string }) {\n  const [failedUrl, setFailedUrl] = useState<string | null>(null);\n  const picture = file.thumbnailUrl ?? (isImageFile(file) ? file.url : undefined);\n  if (picture && failedUrl !== picture) {\n    return <img src={picture} alt=\"\" loading=\"lazy\" className={className} onError={() => setFailedUrl(picture)} />;\n  }\n  if (isVideoFile(file) && file.url && failedUrl !== file.url) {\n    return (\n      <video\n        src={firstFrameUrl(file.url)}\n        preload=\"metadata\"\n        muted\n        playsInline\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        onError={() => setFailedUrl(file.url!)}\n        ref={reportCommittedError(() => setFailedUrl(file.url!))}\n        className={className}\n      />\n    );\n  }\n  return <Icon name={fileIconFor(file)} size={iconSize} className=\"text-tertiary\" />;\n}\n\n/* DXUI-16: \"strip\" is the composer's layout - 64px tiles in one scrolling row\n   (see `AttachmentList`), small enough to sit above a one-line text box. */\nexport type AttachmentLayout = \"tile\" | \"row\" | \"strip\";\n\nconst STRIP_BADGE_MAX = 4;\n\n/* DXUI-16: the strip tile's type badge - the extension upper-cased, `FILE` when\n   there is none or it is too long to read at badge size. */\nfunction extensionBadge(name: string, fallback: string): string {\n  const dot = name.lastIndexOf(\".\");\n  const extension = dot > 0 ? name.slice(dot + 1) : \"\";\n  return extension === \"\" || extension.length > STRIP_BADGE_MAX ? fallback : extension.toUpperCase();\n}\n\n/* DXUI-16: the outer shape of each layout. */\nfunction layoutClass(layout: AttachmentLayout, stripImage: boolean): string {\n  if (layout === \"tile\") {\n    /* Square-ISH, not square: it is a flexible tile that keeps its proportion\n       while the row it sits in decides the width. */\n    return \"aspect-4/3 w-36 shrink-0 rounded-xl\";\n  }\n  if (layout === \"row\") return \"flex w-full items-center gap-3 rounded-lg p-2 pr-1.5\";\n  /* A strip file card widens on a touch device, where its actions are 44px\n     targets that sit beside the text. */\n  return cn(\n    \"h-16 shrink-0 snap-start rounded-lg\",\n    stripImage ? \"w-16\" : \"flex w-56 items-center gap-2 p-1.5 pr-2 [@media(pointer:coarse)]:w-80\",\n  );\n}\n\n/* DXUI-16: the inside of a strip tile - a picture alone, or a card with the\n   file's icon, name, type badge and size. `actions` is the cluster `Attachment`\n   built, which this places (in the corner, or beside the text). */\nfunction StripTileBody({\n  file,\n  image,\n  detail,\n  actions,\n  caption,\n}: {\n  file: ChatFile;\n  image: boolean;\n  detail: ReactNode;\n  actions: ReactNode;\n  caption: boolean;\n}) {\n  const strings = useUiStrings().chat.attachment;\n  const failed = file.status === \"error\";\n  if (image) {\n    return (\n      <>\n        <div className=\"absolute inset-0 grid place-items-center bg-surface-inset\">\n          <TileMedia\n            file={file}\n            iconSize=\"sm\"\n            className={cn(\"size-full object-cover\", file.status === \"uploading\" && \"opacity-50\")}\n          />\n        </div>\n        {failed && (\n          /* z-2, above the preview trigger's z-1, or the trigger would cover\n             the overlay and its tooltip would never fire. A failed file has\n             nothing complete to preview. Still below the actions' z-10. */\n          <Tooltip content={detail}>\n            <div\n              role=\"img\"\n              aria-label={String(detail)}\n              className=\"absolute inset-0 z-2 grid place-items-center bg-veil text-danger\"\n            >\n              <Icon name=\"circle-alert\" size=\"sm\" />\n            </div>\n          </Tooltip>\n        )}\n        {caption && (\n          /* DXUI-74: the file's name along the bottom edge, ON the picture like the `\"tile\"` layout's caption. */\n          <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-0 bg-linear-to-t from-black/72 to-transparent px-1 pt-3 pb-0.5\">\n            <span className=\"block truncate text-2xs font-semibold text-white\">{file.name}</span>\n          </div>\n        )}\n        {actions}\n      </>\n    );\n  }\n  return (\n    <>\n      <div className=\"relative grid size-10 shrink-0 place-items-center overflow-hidden rounded-md bg-surface-inset\">\n        <TileMedia file={file} iconSize=\"sm\" className=\"size-full object-cover\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-xs font-medium text-primary\">{file.name}</span>\n        <span className=\"flex min-w-0 items-center gap-1.5 text-2xs\">\n          {failed ? (\n            <span className=\"truncate text-danger-text\">{detail}</span>\n          ) : (\n            <>\n              <span className=\"shrink-0 rounded-sm bg-surface-inset px-1 font-semibold text-tertiary\">\n                {extensionBadge(file.fileName ?? file.name, strings.fileBadge)}\n              </span>\n              {detail !== \"\" && <span className=\"truncate text-tertiary\">{detail}</span>}\n            </>\n          )}\n        </span>\n      </div>\n      {actions}\n    </>\n  );\n}\n\nexport interface AttachmentProps {\n  file: ChatFile;\n  layout?: AttachmentLayout;\n  /** Overrides the size line — \"Sheet 2 of 4\", a page count, anything truer. */\n  meta?: ReactNode;\n  /**\n   * The consumer's own control, rendered first in the action cluster — \"Extract\n   * this\", \"Attach to the demand\", \"Cancel the upload\".\n   *\n   * A SLOT RATHER THAN ANOTHER BOOLEAN, because the library has no opinion\n   * about what the verb is and a fixed list would be wrong for the second\n   * consumer and every one after. Remove, preview and download stay separate\n   * props: they are the three actions an attachment has REGARDLESS of the\n   * application, and each carries its own rule about when it may appear.\n   *\n   * NO RULE IS IMPOSED ON THIS ONE. Download hides itself while a file is still\n   * uploading, because there is nothing complete to fetch; the consumer's action\n   * may well BE \"cancel this upload\", so it is rendered whatever the file's\n   * state, and the consumer decides whether their verb makes sense yet.\n   *\n   * It goes inside the cluster, above the full-card preview trigger — rendered\n   * anywhere else it would sit UNDER that trigger and never receive a click.\n   * Keep it to a control or two: this is a corner of a tile, not a menu bar.\n   *\n   * FILL IT WITH `AttachmentAction`, which is exported for exactly this. The\n   * built-in download and remove are that component, so anything else lands in\n   * the cluster at a different size and, on a tile, without the hover fade the\n   * two beside it have. Any node is accepted — the slot has no opinion — but\n   * \"matches the built-ins\" is a real requirement and there is no way to hit it\n   * by hand. Pass `tinted` when the tile has a picture behind the cluster: a\n   * `\"tile\"`, or a `\"strip\"` image tile (a strip tile for a non-image file is\n   * a plain card, so it is not tinted).\n   */\n  action?: ReactNode;\n  /**\n   * DXUI-74: a `\"strip\"` picture tile prints the file's name along its bottom edge. Off by default: the composer's\n   * strip shows a picture alone. A strip file card always shows its name.\n   */\n  caption?: boolean;\n  onRemove?: (file: ChatFile) => void;\n  onPreview?: (file: ChatFile) => void;\n  onDownload?: (file: ChatFile) => void;\n  /** Marks the file as the current selection in a gallery. */\n  selected?: boolean;\n  disabled?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Attachment({\n  file,\n  layout = \"tile\",\n  meta,\n  action,\n  caption = false,\n  onRemove,\n  onPreview,\n  onDownload,\n  selected = false,\n  disabled = false,\n  className,\n  ref,\n}: AttachmentProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().chat.attachment;\n  const tile = layout === \"tile\";\n  const strip = layout === \"strip\";\n  /* DXUI-16: a strip tile with a picture is a 64px square; any other file is a\n     wider card carrying its name, type and size. */\n  const stripImage = strip && Boolean(file.thumbnailUrl) && isImageFile(file);\n  const uploading = file.status === \"uploading\";\n  const failed = file.status === \"error\";\n\n  const detail = useMemo(() => {\n    if (failed) return file.error ?? strings.failed;\n    if (uploading) {\n      return file.progress === undefined\n        ? strings.uploading\n        : formatPercent(Math.round(file.progress), locale);\n    }\n    if (meta !== undefined) return meta;\n    return file.size === undefined ? \"\" : formatBytes(file.size, locale);\n  }, [failed, uploading, meta, file.error, file.progress, file.size, strings, locale]);\n\n  const actions = (\n    <div\n      className={cn(\n        /* Above the full-card trigger, so a button click is a button click.\n           z-index rather than stopPropagation: propagation still fires the\n           card's handler on keyboard activation, which is where that trick\n           quietly breaks. */\n        \"relative z-10 flex items-center gap-0.5\",\n        /* DX-4039: a tile's cluster WRAPS inside the tile, never clips. Under\n           `pointer: coarse` every action is `dx-tap`'s 44px, so three fill the\n           144px tile (3*44 + 2*2 = 136 of the 138 left of the 6px right inset)\n           and a fourth has no room on the row, where `overflow-hidden` on the\n           tile would cut it off. Bounded by `left-0` and right-aligned, the\n           overflow drops to a second row instead. `left-0`, not the 6px that\n           mirrors the right: 132px would wrap the third. A fine pointer's 24px\n           actions never reach the edge, so it is unchanged.\n\n           The box now spans the tile's width, so it is `pointer-events-none`\n           and only its controls take the pointer (`[&>*]`): otherwise the empty\n           part of the row would swallow taps meant for the preview trigger\n           beneath it. */\n        tile &&\n          \"pointer-events-none absolute top-1.5 right-1.5 left-0 flex-wrap justify-end [&>*]:pointer-events-auto\",\n        /* DXUI-16: a strip image tile is 64px square, so its cluster is the\n           corner. A strip file card lays the cluster BESIDE the text in its\n           flex row, so a 44px touch target pushes the filename over instead of\n           covering it. */\n        stripImage && \"absolute top-0.5 right-0.5\",\n        strip && !stripImage && \"shrink-0 self-start\",\n      )}\n    >\n      {/* FIRST, so the consumer's own verb reads before the generic ones and\n          `Remove` stays where it always is — last, hard against the corner. */}\n      {action}\n      {onDownload && !uploading && (\n        <AttachmentAction\n          icon=\"download\"\n          label={strings.download(file.name)}\n          onClick={() => onDownload(file)}\n          disabled={disabled}\n          tinted={tile || stripImage}\n        />\n      )}\n      {onRemove && (\n        <AttachmentAction\n          icon=\"x\"\n          label={strings.remove(file.name)}\n          onClick={() => onRemove(file)}\n          disabled={disabled}\n          tinted={tile || stripImage}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-attachment={file.id}\n      data-status={file.status ?? \"ready\"}\n      className={cn(\n        /* `dx-ground-raised` so the action buttons inside mix their hover from\n           the tile they sit on, not from the page behind it. */\n        \"dx-ground-raised group/attachment relative isolate overflow-hidden border bg-surface-raised\",\n        \"transition-[var(--tx-colors),box-shadow,transform] duration-(--dur-fast) ease-(--ease-standard)\",\n        failed ? \"border-danger-border\" : selected ? \"border-accent\" : \"border-border-subtle\",\n        !disabled && \"hover:border-border-strong\",\n        selected && \"ring-2 ring-accent/35\",\n        layoutClass(layout, stripImage),\n        disabled && \"opacity-60\",\n        className,\n      )}\n    >\n      {/* Full-card preview trigger. A real button, absolutely positioned,\n          rather than an onClick on the card — the card contains buttons, and a\n          button inside a button is invalid and unreachable by keyboard.\n\n          `z-1`, ABOVE the thumbnail image/icon that follows it in the DOM\n          (SG-978). That sibling is itself `absolute inset-0` with no z-index\n          of its own, so without an explicit stack level here the two compete\n          at the same implicit layer and paint order (DOM order) decides the\n          winner — which put the thumbnail on top and silently ate every real\n          mouse click on a tile's picture, though a JS-dispatched `.click()`\n          on the button still \"worked\" (it bypasses hit-testing entirely) and\n          keyboard activation was never affected (focus order is DOM order,\n          not paint order). Stay below the actions cluster's `z-10` and the\n          upload progress bar's `z-20`, both of which must keep winning. */}\n      {onPreview && !disabled && (\n        <button\n          type=\"button\"\n          onClick={() => onPreview(file)}\n          aria-label={strings.preview(file.name)}\n          className=\"absolute inset-0 z-1 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n        />\n      )}\n\n      {tile ? (\n        <>\n          <div className=\"absolute inset-0 grid place-items-center bg-surface-inset\">\n            <TileMedia\n              file={file}\n              iconSize=\"lg\"\n              className=\"size-full object-cover transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-slow) ease-(--ease-standard) group-hover/attachment:scale-[1.03]\"\n            />\n          </div>\n\n          {/* The caption sits ON the tile, so a thumbnail is never cropped to\n              make room for text that could have floated over it. */}\n          <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-0 flex flex-col gap-0.5 bg-linear-to-t from-black/72 to-transparent px-2.5 pt-6 pb-2\">\n            <span className=\"truncate text-2xs font-semibold text-white\">{file.name}</span>\n            {detail !== \"\" && (\n              <span className={cn(\"truncate text-2xs\", failed ? \"text-danger\" : \"text-white/70\")}>\n                {detail}\n              </span>\n            )}\n          </div>\n          {actions}\n        </>\n      ) : strip ? (\n        <StripTileBody file={file} image={stripImage} detail={detail} actions={actions} caption={caption} />\n      ) : (\n        <>\n          <div className=\"relative grid size-9 shrink-0 place-items-center overflow-hidden rounded-md bg-surface-inset\">\n            <TileMedia file={file} iconSize=\"sm\" className=\"size-full object-cover\" />\n          </div>\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            <span className=\"truncate text-sm font-medium text-primary\">{file.name}</span>\n            {detail !== \"\" && (\n              <span className={cn(\"truncate text-2xs\", failed ? \"text-danger-text\" : \"text-tertiary\")}>\n                {detail}\n              </span>\n            )}\n          </div>\n          {actions}\n        </>\n      )}\n\n      {/* Progress reads as the file FILLING, not as a separate widget parked\n          next to it — a determinate bar pinned to the card's own bottom edge. */}\n      {uploading && (\n        <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-20 h-0.5 bg-border-subtle\">\n          <div\n            className={cn(\n              \"h-full bg-accent transition-[var(--tx-colors),width] duration-(--dur-slow) ease-(--ease-standard)\",\n              file.progress === undefined && \"w-1/3 animate-sweep\",\n            )}\n            style={file.progress === undefined ? undefined : { width: `${file.progress}%` }}\n          />\n        </div>\n      )}\n\n      {uploading && tile && (\n        <div className=\"pointer-events-none absolute inset-0 z-10 grid place-items-center bg-veil\">\n          <Spinner size=\"sm\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface AttachmentActionProps extends Omit<ComponentProps<\"button\">, \"children\" | \"className\" | \"type\" | \"aria-label\" | \"onClick\" | \"disabled\"> {\n  icon: IconName;\n  /** The accessible name AND the tooltip. Include the file: \"Extract report.pdf\". */\n  label: string;\n  /** Omitted when the control is the trigger of a `Menu`, which supplies the press itself. */\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * On a tile the buttons sit over imagery, so they need their own ground —\n   * and they FADE IN on hover rather than sitting permanently over the picture.\n   * A device with no hover at all (`(hover: none)`, a phone or tablet) has\n   * nothing to fade them in with, so there they are visible at rest (DX-4039);\n   * keyboard focus still reveals them on a hover-capable one.\n   *\n   * Pass it when the control sits over a picture: a `\"tile\"`, or a `\"strip\"`\n   * image tile. Getting it wrong is not a style preference: a tinted control on\n   * a row (or a strip file card) is dark-on-dark, and an untinted one over a\n   * photograph is a grey glyph on an arbitrary background.\n   */\n  tinted?: boolean;\n}\n\n/**\n * One control in an attachment's action cluster.\n *\n * THE CONTROL `Attachment.action` IS MEANT TO BE FILLED WITH, and until now it\n * was module-private — so the slot existed with nothing in the library that\n * fits it. A consumer's own `IconButton` is a different size and a different\n * resting state, and on a tile it does not fade in on `group-hover/attachment`\n * with the built-in download and remove beside it, so the one control the\n * consumer added was the one that looked wrong.\n *\n * It is deliberately NOT `IconButton`: `size-6` rather than a control height,\n * no ripple, no `disabledReason`, and a tinted variant that only means anything\n * inside `.group/attachment`. That is a corner-of-a-tile control, not a general\n * one, and generalising it would give the cluster two different buttons again.\n *\n *   <Attachment\n *     file={file}\n *     layout=\"tile\"\n *     action={<AttachmentAction icon=\"sparkles\" label={`Extract ${file.name}`}\n *                               onClick={() => extract(file)} tinted />}\n *   />\n */\nexport function AttachmentAction({\n  icon,\n  label,\n  onClick,\n  disabled,\n  tinted,\n  ...rest\n}: AttachmentActionProps) {\n  return (\n    <Tooltip content={label}>\n      <button\n        {...rest}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-label={label}\n        className={cn(\n          \"dx-tap grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-none\",\n          \"transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n          \"focus-visible:ring-2 focus-visible:ring-focus-ring\",\n          tinted\n            ? \"bg-black/45 text-white opacity-0 backdrop-blur-[2px] hover:bg-black/70 group-hover/attachment:opacity-100 group-focus-within/attachment:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100 [@media(hover:none)]:opacity-100\"\n            : \"text-tertiary hover:bg-surface-hover hover:text-primary\",\n          disabled && \"pointer-events-none opacity-40\",\n        )}\n      >\n        <Icon name={icon} size=\"xs\" />\n      </button>\n    </Tooltip>\n  );\n}\n\nexport interface AttachmentListProps {\n  files: ChatFile[];\n  layout?: AttachmentLayout;\n  /**\n   * `Attachment.action`, per file — a FUNCTION rather than a node, because the\n   * control almost always has to know which file it is on.\n   *\n   * Without it the slot would exist only on a lone `Attachment`, and a consumer\n   * wanting one on a list would have to stop using the list — which is the\n   * rebuild this slot was added to prevent, one level up.\n   */\n  action?: (file: ChatFile) => ReactNode;\n  /** `Attachment.caption` for every file. */\n  caption?: boolean;\n  onRemove?: (file: ChatFile) => void;\n  onPreview?: (file: ChatFile) => void;\n  onDownload?: (file: ChatFile) => void;\n  /** Collapses to \"+N more\" past this count. Ignored by `layout=\"strip\"`, which scrolls instead. */\n  max?: number;\n  disabled?: boolean;\n  className?: string;\n}\n\n/* DXUI-16: a file added to the strip is appended at its end, which is\n   off-screen once the row has scrolled; bring it into view. Removing a file\n   leaves the scroll where the reader put it. Does nothing for tile and row. */\nfunction useStripScrollToEnd(active: boolean, count: number) {\n  const scroller = useRef<HTMLDivElement>(null);\n  const seen = useRef(count);\n  useEffect(() => {\n    const el = scroller.current;\n    if (active && el && count > seen.current) el.scrollLeft = el.scrollWidth;\n    seen.current = count;\n  }, [active, count]);\n  return scroller;\n}\n\nexport function AttachmentList({\n  files,\n  layout = \"tile\",\n  action,\n  caption,\n  onRemove,\n  onPreview,\n  onDownload,\n  max,\n  disabled,\n  className,\n}: AttachmentListProps) {\n  const strings = useUiStrings().chat.attachment;\n  const fmt = useNumberFormat();\n  const strip = layout === \"strip\";\n  const scroller = useStripScrollToEnd(strip, files.length);\n  if (files.length === 0) return null;\n  const shown = max === undefined || strip ? files : files.slice(0, max);\n  const hidden = files.length - shown.length;\n\n  return (\n    <div\n      ref={strip ? scroller : undefined}\n      className={cn(\n        layout === \"tile\" && \"flex flex-wrap gap-2\",\n        layout === \"row\" && \"flex flex-col gap-1.5\",\n        strip && \"flex snap-x snap-mandatory gap-2 overflow-x-auto overscroll-x-contain pb-1 [scrollbar-width:thin]\",\n        className,\n      )}\n    >\n      {shown.map((file) => (\n        <Attachment\n          key={file.id}\n          file={file}\n          layout={layout}\n          action={action?.(file)}\n          caption={caption}\n          onRemove={onRemove}\n          onPreview={onPreview}\n          onDownload={onDownload}\n          disabled={disabled}\n        />\n      ))}\n      {hidden > 0 && (\n        <div\n          className={cn(\n            \"grid place-items-center rounded-xl border border-dashed border-border text-sm font-medium text-tertiary\",\n            layout === \"tile\" ? \"aspect-4/3 w-36 shrink-0\" : \"h-9 w-full\",\n          )}\n        >\n          {strings.more(fmt(hidden))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["firstFrameUrl","url","TileMedia","file","iconSize","className","failedUrl","setFailedUrl","useState","picture","isImageFile","jsx","isVideoFile","reportCommittedError","Icon","fileIconFor","STRIP_BADGE_MAX","extensionBadge","name","fallback","dot","extension","layoutClass","layout","stripImage","cn","StripTileBody","image","detail","actions","caption","strings","useUiStrings","failed","jsxs","Fragment","Tooltip","Attachment","meta","action","onRemove","onPreview","onDownload","selected","disabled","ref","locale","useUiLocale","tile","strip","uploading","useMemo","formatPercent","formatBytes","AttachmentAction","Spinner","icon","label","onClick","tinted","rest","useStripScrollToEnd","active","count","scroller","useRef","seen","useEffect","el","AttachmentList","files","max","fmt","useNumberFormat","shown","hidden"],"mappings":"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"}

package/dist/components/chat/Chat.js

@@ -0,0 +1,171 @@
+import { jsxs as n, Fragment as E, jsx as e } from "react/jsx-runtime";
+import { useState as U } from "react";
+import { cn as C } from "../../lib/cn.js";
+import { Icon as B } from "../Icon.js";
+import { Popover as G } from "../Popover.js";
+import { EmptyState as H } from "../Surface.js";
+import { Composer as J } from "./Composer.js";
+import { downloadChatFile as N } from "./download-file.js";
+import { Message as K } from "./Message.js";
+import { MessageScroller as L } from "./MessageScroller.js";
+import { ModelSelector as Q } from "./ModelSelector.js";
+import { EffortControl as R } from "./EffortControl.js";
+import { ContextMeter as W } from "./ContextMeter.js";
+import { useUiStrings as F } from "../../lib/i18n/provider.js";
+import { FileViewer as X } from "../file-viewer/FileViewer.js";
+function Y(i) {
+  return [
+    ...i.attachments ?? [],
+    ...i.parts.flatMap((o) => o.type === "file" ? [o.file] : [])
+  ];
+}
+function Z({
+  messages: i,
+  renderers: o,
+  components: c,
+  appContext: p,
+  title: t,
+  subtitle: u,
+  headerActions: m,
+  empty: M,
+  models: d,
+  model: v,
+  onModelChange: b,
+  modelOptions: S,
+  effortLevels: V,
+  effort: f,
+  onEffortChange: g,
+  context: l,
+  messageActions: I,
+  showTimestamps: D = !1,
+  status: x,
+  hint: P,
+  surface: a = "inline",
+  className: T,
+  ...j
+}) {
+  const w = F().chat.chat, [h, y] = U(null), k = (r, s) => {
+    y({ files: Y(r), fileId: s.id });
+  }, q = /* @__PURE__ */ n(E, { children: [
+    d && v !== void 0 && b && /* @__PURE__ */ e(
+      Q,
+      {
+        models: d,
+        value: v,
+        onValueChange: b,
+        options: S
+      }
+    ),
+    f !== void 0 && g && /* @__PURE__ */ e(R, { levels: V, value: f, onValueChange: g }),
+    l && /* @__PURE__ */ e(
+      W,
+      {
+        segments: l.segments,
+        capacity: l.capacity,
+        limits: l.limits
+      }
+    )
+  ] }), z = !!(d || f !== void 0 || l);
+  return /* @__PURE__ */ n(
+    "section",
+    {
+      "data-chat-surface": a,
+      className: C(
+        "flex min-h-0 flex-col bg-canvas",
+        a === "sidebar" && "h-full border-l border-border-subtle",
+        a === "popover" && "h-[32rem] w-[26rem]",
+        a === "inline" && "h-full",
+        T
+      ),
+      children: [
+        (t || m) && /* @__PURE__ */ n("header", { className: "flex shrink-0 items-center gap-3 border-b border-border-subtle px-4 py-2.5", children: [
+          /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-col", children: [
+            t && /* @__PURE__ */ e("h2", { className: "truncate font-display text-sm font-semibold text-primary", children: t }),
+            u && /* @__PURE__ */ e("p", { className: "truncate text-2xs text-tertiary", children: u })
+          ] }),
+          m && /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-1", children: m })
+        ] }),
+        /* @__PURE__ */ e(L, { className: "px-4 py-4", children: i.length === 0 ? M ?? /* @__PURE__ */ e(
+          H,
+          {
+            icon: "message-square",
+            title: w.emptyTitle,
+            description: w.emptyDescription
+          }
+        ) : i.map((r, s) => /* @__PURE__ */ e(
+          K,
+          {
+            message: r,
+            renderers: o,
+            components: c,
+            appContext: p,
+            actions: r.role === "assistant" ? I : void 0,
+            showTimestamp: D,
+            grouped: s > 0 && i[s - 1].role === r.role,
+            onPreviewFile: (O) => k(r, O),
+            onDownloadFile: N
+          },
+          r.id
+        )) }),
+        /* @__PURE__ */ n("div", { className: "shrink-0 px-4 pt-1 pb-4", children: [
+          x && /* @__PURE__ */ e("div", { className: "px-1 pb-1.5", children: x }),
+          /* @__PURE__ */ e(
+            J,
+            {
+              ...j,
+              hint: P,
+              toolbar: z ? q : void 0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          X,
+          {
+            open: h !== null,
+            onOpenChange: (r) => {
+              r || y(null);
+            },
+            files: h?.files ?? [],
+            initialFileId: h?.fileId,
+            onDownload: N
+          }
+        )
+      ]
+    }
+  );
+}
+function de({
+  trigger: i,
+  side: o = "top",
+  align: c = "end",
+  ...p
+}) {
+  const t = F().chat.chat;
+  return /* @__PURE__ */ e(
+    G,
+    {
+      side: o,
+      align: c,
+      className: "w-auto overflow-hidden p-0",
+      trigger: i ?? /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.open,
+          className: C(
+            "grid size-12 cursor-pointer place-items-center rounded-full bg-accent text-accent-contrast",
+            "shadow-lg outline-none transition-[var(--tx-colors),transform] duration-(--dur-fast) ease-(--ease-snappy)",
+            "hover:bg-accent-hover active:scale-95 focus-visible:ring-2 focus-visible:ring-focus-ring"
+          ),
+          children: /* @__PURE__ */ e(B, { name: "message-square", size: "md" })
+        }
+      ),
+      children: /* @__PURE__ */ e(Z, { ...p, surface: "popover" })
+    }
+  );
+}
+export {
+  Z as Chat,
+  de as ChatPopover
+};
+//# sourceMappingURL=Chat.js.map