@particle-academy/react-fancy 5.33.0 → 5.35.0

package/dist/chunk-EHNMKQ4O.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ActivityLight = react.forwardRef(
+  ({ level, direction, count = null, label, className, ...props }, ref) => {
+    if (level === null) return null;
+    const counted = typeof count === "number" && Number.isFinite(count);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-react-fancy-activity-light": level,
+        ...direction ? { "data-react-fancy-activity-light-direction": direction } : {},
+        "aria-label": counted ? `${label}: ${level}, ${count}` : `${label}: ${level}`,
+        role: "img",
+        className: chunkZU5Q77OT_cjs.cn(
+          "inline-flex items-center gap-1 align-middle",
+          LEVEL_CLASS[level],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-react-fancy-activity-light-dot": "",
+              "aria-hidden": "true",
+              className: chunkZU5Q77OT_cjs.cn("size-2 shrink-0 rounded-full bg-current", level === "live" && "animate-pulse")
+            }
+          ),
+          direction && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-react-fancy-activity-light-arrow": "",
+              "aria-hidden": "true",
+              className: "font-mono text-[0.625rem] leading-none",
+              children: DIRECTION_GLYPH[direction]
+            }
+          ),
+          counted && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-react-fancy-activity-light-count": "",
+              className: "font-mono text-xs tabular-nums leading-none",
+              children: count
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ActivityLight.displayName = "ActivityLight";
+var LEVEL_CLASS = {
+  live: "text-emerald-500 dark:text-emerald-400",
+  recent: "text-sky-500 dark:text-sky-400",
+  quiet: "text-zinc-400 dark:text-zinc-500",
+  unseen: "text-amber-500 dark:text-amber-400"
+};
+var DIRECTION_GLYPH = {
+  in: "\u2190",
+  out: "\u2192",
+  both: "\u21C4"
+};
+
+exports.ActivityLight = ActivityLight;
+//# sourceMappingURL=chunk-EHNMKQ4O.cjs.map
+//# sourceMappingURL=chunk-EHNMKQ4O.cjs.map

package/dist/chunk-EHNMKQ4O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ActivityLight/ActivityLight.tsx"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;;AAkCO,IAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,KAAA,GAAQ,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAEvE,IAAA,IAAI,KAAA,KAAU,MAAM,OAAO,IAAA;AAE3B,IAAA,MAAM,UAAU,OAAO,KAAA,KAAU,QAAA,IAAY,MAAA,CAAO,SAAS,KAAK,CAAA;AAElE,IAAA,uBACEC,eAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,iCAAA,EAAiC,KAAA;AAAA,QAChC,GAAI,SAAA,GAAY,EAAE,2CAAA,EAA6C,SAAA,KAAc,EAAC;AAAA,QAC/E,YAAA,EAAY,OAAA,GAAU,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA,GAAK,CAAA,EAAG,KAAK,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA;AAAA,QACzE,IAAA,EAAK,KAAA;AAAA,QACL,SAAA,EAAWC,oBAAA;AAAA,UACT,6CAAA;AAAA,UACA,YAAY,KAAK,CAAA;AAAA,UACjB;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,qCAAA,EAAoC,EAAA;AAAA,cACpC,aAAA,EAAY,MAAA;AAAA,cACZ,SAAA,EAAWD,oBAAA,CAAG,yCAAA,EAA2C,KAAA,KAAU,UAAU,eAAe;AAAA;AAAA,WAC9F;AAAA,UAEC,SAAA,oBACCC,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,uCAAA,EAAsC,EAAA;AAAA,cACtC,aAAA,EAAY,MAAA;AAAA,cACZ,SAAA,EAAU,wCAAA;AAAA,cAET,0BAAgB,SAAS;AAAA;AAAA,WAC5B;AAAA,UAID,OAAA,oBACCA,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,uCAAA,EAAsC,EAAA;AAAA,cACtC,SAAA,EAAU,6CAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;AAM5B,IAAM,WAAA,GAA6C;AAAA,EACjD,IAAA,EAAM,wCAAA;AAAA,EACN,MAAA,EAAQ,gCAAA;AAAA,EACR,KAAA,EAAO,kCAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAA;AAEA,IAAM,eAAA,GAAyD;AAAA,EAC7D,EAAA,EAAI,QAAA;AAAA,EACJ,GAAA,EAAK,QAAA;AAAA,EACL,IAAA,EAAM;AACR,CAAA","file":"chunk-EHNMKQ4O.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { ActivityLightProps, ActivityLevel } from \"./ActivityLight.types\";\n\n/**\n * Activity on an **edge** — a relationship between two parties — with a recency\n * ramp and an optional volume.\n *\n * Not a presence dot. `Avatar status` belongs to one party and says whether\n * *they* are online; this belongs to a pair and says when *the link between\n * them* last moved. Use it in a comms column, a collaborator lane, anywhere the\n * subject is the relationship rather than the participant.\n *\n * ## Two kinds of nothing, and they must not look alike\n *\n * - **`level: null`** — the edge is real, its recency is not observable. Renders\n *   NOTHING: no dot, no dash, no placeholder. A grey dot would assert \"quiet\",\n *   which is a claim we cannot make.\n * - **`count: null`** or omitted — the edge's recency is known but its volume is\n *   not. Renders the light with no number.\n * - **`count: 0`** — measured, and none. Renders `0`, because that is a fact.\n *   Suppressing it would be indistinguishable from not having looked.\n *\n * The distinction reads as pedantic until a count is wrong in the direction\n * that flatters: a `0` where the truth is \"unknown\" tells the reader an agent\n * works alone, and they believe it.\n *\n * @example\n * ```tsx\n * <ActivityLight level=\"live\" direction=\"both\" count={12} label=\"Genie and Tynn\" />\n * <ActivityLight level=\"quiet\" count={0} label=\"Genie and Weaver\" />\n * <ActivityLight level={null} label=\"Genie and an unknown peer\" />\n * ```\n */\nexport const ActivityLight = forwardRef<HTMLSpanElement, ActivityLightProps>(\n  ({ level, direction, count = null, label, className, ...props }, ref) => {\n    // The one early return in the component, and the most important line in it.\n    if (level === null) return null;\n\n    const counted = typeof count === \"number\" && Number.isFinite(count);\n\n    return (\n      <span\n        ref={ref}\n        data-react-fancy-activity-light={level}\n        {...(direction ? { \"data-react-fancy-activity-light-direction\": direction } : {})}\n        aria-label={counted ? `${label}: ${level}, ${count}` : `${label}: ${level}`}\n        role=\"img\"\n        className={cn(\n          \"inline-flex items-center gap-1 align-middle\",\n          LEVEL_CLASS[level],\n          className,\n        )}\n        {...props}\n      >\n        <span\n          data-react-fancy-activity-light-dot=\"\"\n          aria-hidden=\"true\"\n          className={cn(\"size-2 shrink-0 rounded-full bg-current\", level === \"live\" && \"animate-pulse\")}\n        />\n\n        {direction && (\n          <span\n            data-react-fancy-activity-light-arrow=\"\"\n            aria-hidden=\"true\"\n            className=\"font-mono text-[0.625rem] leading-none\"\n          >\n            {DIRECTION_GLYPH[direction]}\n          </span>\n        )}\n\n        {/* `counted` is the gate, NOT `count` — `0` is falsy and would vanish. */}\n        {counted && (\n          <span\n            data-react-fancy-activity-light-count=\"\"\n            className=\"font-mono text-xs tabular-nums leading-none\"\n          >\n            {count}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\n\nActivityLight.displayName = \"ActivityLight\";\n\n/**\n * The ramp. Each level is visually distinct from every other — a test asserts\n * that, because two levels that look alike make the ramp a lie.\n */\nconst LEVEL_CLASS: Record<ActivityLevel, string> = {\n  live: \"text-emerald-500 dark:text-emerald-400\",\n  recent: \"text-sky-500 dark:text-sky-400\",\n  quiet: \"text-zinc-400 dark:text-zinc-500\",\n  unseen: \"text-amber-500 dark:text-amber-400\",\n};\n\nconst DIRECTION_GLYPH: Record<\"in\" | \"out\" | \"both\", string> = {\n  in: \"←\",\n  out: \"→\",\n  both: \"⇄\",\n};\n"]}

package/dist/chunk-IR6JSQ4O.cjs

@@ -0,0 +1,233 @@
+'use strict';
+
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function VirtualList({
+  items,
+  renderRow,
+  height = "100%",
+  estimateRowHeight = 32,
+  overscan = 6,
+  followTail = false,
+  onFollowChange,
+  onUnseenChange,
+  scrollToId = null,
+  onScrollToIdResolved,
+  className,
+  ref,
+  ...props
+}) {
+  const viewportRef = react.useRef(null);
+  const windowRef = react.useRef(null);
+  const heights = react.useRef(/* @__PURE__ */ new Map());
+  const [measured, setMeasured] = react.useState(0);
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const [clientHeight, setClientHeight] = react.useState(0);
+  const attachViewport = react.useCallback(
+    (el) => {
+      viewportRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const viewport = clientHeight > 0 ? clientHeight : typeof height === "number" ? height : estimateRowHeight * 20;
+  const { offsets, total } = react.useMemo(() => {
+    const offs = new Float64Array(items.length + 1);
+    for (let i = 0; i < items.length; i += 1) {
+      offs[i + 1] = offs[i] + (heights.current.get(items[i].id) ?? estimateRowHeight);
+    }
+    return { offsets: offs, total: items.length === 0 ? 0 : offs[items.length] };
+  }, [items, measured, estimateRowHeight]);
+  const indexAt = react.useCallback(
+    (y) => {
+      let lo = 0;
+      let hi = items.length - 1;
+      while (lo < hi) {
+        const mid = lo + hi + 1 >> 1;
+        if (offsets[mid] <= y) lo = mid;
+        else hi = mid - 1;
+      }
+      return Math.max(0, lo);
+    },
+    [items.length, offsets]
+  );
+  const start = Math.max(0, indexAt(scrollTop) - overscan);
+  const end = Math.min(items.length, indexAt(scrollTop + viewport) + 1 + overscan);
+  const visible = react.useMemo(() => items.slice(start, end), [items, start, end]);
+  const observer = react.useRef(null);
+  react.useEffect(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setMeasured((v) => v + 1));
+    observer.current = ro;
+    return () => {
+      ro.disconnect();
+      observer.current = null;
+    };
+  }, []);
+  react.useLayoutEffect(() => {
+    const win = windowRef.current;
+    if (!win) return;
+    let changed = false;
+    for (const el of Array.from(win.children)) {
+      const id = el.getAttribute(ROW_ID_ATTR);
+      if (id === null) continue;
+      observer.current?.observe(el);
+      const h = el.getBoundingClientRect().height;
+      if (h > 0 && heights.current.get(id) !== h) {
+        heights.current.set(id, h);
+        changed = true;
+      }
+    }
+    const vp = viewportRef.current;
+    if (vp && vp.clientHeight > 0 && vp.clientHeight !== clientHeight) setClientHeight(vp.clientHeight);
+    if (changed) setMeasured((v) => v + 1);
+  });
+  const anchored = react.useRef(null);
+  const resolved = react.useRef(null);
+  react.useEffect(() => {
+    anchored.current = null;
+    resolved.current = null;
+  }, [scrollToId]);
+  react.useLayoutEffect(() => {
+    if (scrollToId === null || resolved.current === scrollToId) return;
+    const index = items.findIndex((item) => item.id === scrollToId);
+    if (index < 0) {
+      resolved.current = scrollToId;
+      onScrollToIdResolved?.(scrollToId, false);
+      return;
+    }
+    const vp = viewportRef.current;
+    if (!vp) return;
+    const target = Math.max(0, Math.min(offsets[index], Math.max(0, total - viewport)));
+    if (anchored.current !== target) {
+      anchored.current = target;
+      vp.scrollTop = target;
+      setScrollTop(target);
+      return;
+    }
+    if (Math.abs(vp.scrollTop - target) <= 1) {
+      resolved.current = scrollToId;
+      onScrollToIdResolved?.(scrollToId, true);
+    }
+  });
+  const reportedFollow = react.useRef(followTail);
+  const programmatic = react.useRef(false);
+  react.useEffect(() => {
+    reportedFollow.current = followTail;
+  }, [followTail]);
+  const askFollow = react.useCallback(
+    (next) => {
+      if (reportedFollow.current === next) return;
+      reportedFollow.current = next;
+      onFollowChange?.(next);
+    },
+    [onFollowChange]
+  );
+  react.useLayoutEffect(() => {
+    if (!followTail) return;
+    if (scrollToId !== null && resolved.current !== scrollToId) return;
+    const vp = viewportRef.current;
+    if (!vp) return;
+    const bottom = Math.max(0, total - viewport);
+    if (Math.abs(vp.scrollTop - bottom) > 0.5) {
+      programmatic.current = true;
+      vp.scrollTop = bottom;
+      setScrollTop(bottom);
+    }
+  });
+  const onScroll = react.useCallback(() => {
+    const vp = viewportRef.current;
+    if (!vp) return;
+    const next = vp.scrollTop;
+    const previous = scrollTop;
+    setScrollTop(next);
+    const bottom = Math.max(0, total - viewport);
+    const wasProgrammatic = programmatic.current;
+    programmatic.current = false;
+    if (next <= bottom - BOTTOM_SLACK) {
+      if (!wasProgrammatic && next < previous) askFollow(false);
+    } else {
+      askFollow(true);
+    }
+  }, [scrollTop, total, viewport, askFollow]);
+  const onWheel = react.useCallback(
+    (e) => {
+      if (e.deltaY < 0) askFollow(false);
+    },
+    [askFollow]
+  );
+  const onKeyDown = react.useCallback(
+    (e) => {
+      if (UPWARD_KEYS.has(e.key)) askFollow(false);
+    },
+    [askFollow]
+  );
+  const touchStart = react.useRef(null);
+  const onTouchStart = react.useCallback((e) => {
+    touchStart.current = e.touches[0]?.clientY ?? null;
+  }, []);
+  const onTouchMove = react.useCallback(
+    (e) => {
+      const from = touchStart.current;
+      const y = e.touches[0]?.clientY;
+      if (from !== null && y !== void 0 && y - from > TOUCH_SLOP) askFollow(false);
+    },
+    [askFollow]
+  );
+  const seen = react.useRef(items.length);
+  const reportedUnseen = react.useRef(null);
+  react.useEffect(() => {
+    const unseen = followTail ? 0 : Math.max(0, items.length - seen.current);
+    if (followTail) seen.current = items.length;
+    if (reportedUnseen.current === unseen) return;
+    reportedUnseen.current = unseen;
+    onUnseenChange?.(unseen);
+  }, [items.length, followTail, onUnseenChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: attachViewport,
+      "data-react-fancy-virtual-list": "",
+      "data-react-fancy-virtual-list-following": followTail ? "true" : "false",
+      "data-react-fancy-virtual-list-rows": items.length,
+      role: "log",
+      tabIndex: 0,
+      className: chunkZU5Q77OT_cjs.cn("relative overflow-y-auto overflow-x-hidden outline-none", className),
+      style: { height },
+      onScroll,
+      onWheel,
+      onKeyDown,
+      onTouchStart,
+      onTouchMove,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-react-fancy-virtual-list-sizer": "",
+          style: { height: `${total}px`, position: "relative" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: windowRef,
+              "data-react-fancy-virtual-list-window": "",
+              "data-react-fancy-virtual-list-start": start,
+              style: { transform: `translateY(${offsets[start] ?? 0}px)` },
+              children: visible.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-virtual-row-id": item.id, children: renderRow(item, start + i) }, item.id))
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var ROW_ID_ATTR = "data-react-fancy-virtual-row-id";
+var BOTTOM_SLACK = 4;
+var TOUCH_SLOP = 4;
+var UPWARD_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
+
+exports.VirtualList = VirtualList;
+//# sourceMappingURL=chunk-IR6JSQ4O.cjs.map
+//# sourceMappingURL=chunk-IR6JSQ4O.cjs.map

package/dist/chunk-IR6JSQ4O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VirtualList/VirtualList.tsx"],"names":["useRef","useState","useCallback","useMemo","useEffect","useLayoutEffect","jsx","cn"],"mappings":"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","file":"chunk-IR6JSQ4O.cjs","sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, TouchEvent, WheelEvent } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { VirtualListProps, VirtualListRow } from \"./VirtualList.types\";\n\n/**\n * A windowed list for ledgers that run to tens of thousands of rows — only the\n * visible slice is in the DOM, with **measured** variable row heights, deep\n * links by row id, and sticky-bottom tail-following.\n *\n * Built for an agent event stream, where every one of those three is load\n * bearing at once: message rows wrap and event rows do not, a link carries\n * `?at=<rowId>` to the exact row under discussion, and new rows arrive while\n * the human is reading older ones.\n *\n * ## Heights are measured, never predicted\n *\n * `estimateRowHeight` only seeds rows that have never been on screen. The\n * moment a row renders, its real height is measured and replaces the estimate,\n * and every offset after it moves. The alternative — a `rowHeight(item)`\n * callback — is a prediction about text wrapping, font loading and container\n * width, and when it is wrong the error accumulates down the list: rows draw in\n * the wrong place and `scrollToId` lands on a neighbour. Measuring is slower to\n * settle and correct when it does.\n *\n * ## Tail-follow breaks on INTENT, not on position\n *\n * Any upward gesture — wheel, drag, PageUp, Home — stops following\n * immediately, even when the list is still pinned to the bottom and\n * `scrollTop` has not changed yet. Position cannot tell \"the human scrolled\n * up\" from \"content grew downward\", so a position-only implementation keeps\n * following through a wheel-up and yanks the reader back on the next append.\n *\n * ## It is controlled\n *\n * `followTail` is the consumer's state. This component only ever *asks* via\n * `onFollowChange`, so the follow state is readable and writable by an agent\n * over a bridge, as the Human+ component contract requires. The `↓ n new` pill\n * is the consumer's to render, from `onUnseenChange`.\n *\n * @example\n * ```tsx\n * const [following, setFollowing] = useState(true);\n * const [unseen, setUnseen] = useState(0);\n *\n * <VirtualList\n *   items={events}\n *   renderRow={(e) => <StreamRow event={e} />}\n *   height=\"100%\"\n *   estimateRowHeight={28}\n *   followTail={following}\n *   onFollowChange={setFollowing}\n *   onUnseenChange={setUnseen}\n *   scrollToId={params.at}\n * />\n * {!following && unseen > 0 && (\n *   <Button onClick={() => setFollowing(true)}>↓ {unseen} new</Button>\n * )}\n * ```\n */\nexport function VirtualList<T extends VirtualListRow>({\n  items,\n  renderRow,\n  height = \"100%\",\n  estimateRowHeight = 32,\n  overscan = 6,\n  followTail = false,\n  onFollowChange,\n  onUnseenChange,\n  scrollToId = null,\n  onScrollToIdResolved,\n  className,\n  ref,\n  ...props\n}: VirtualListProps<T>) {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const windowRef = useRef<HTMLDivElement | null>(null);\n\n  /** Measured heights by row id, so a height follows its row across a reindex. */\n  const heights = useRef(new Map<string, number>());\n  /** Bumped when a measurement actually changed, to recompute offsets. */\n  const [measured, setMeasured] = useState(0);\n\n  const [scrollTop, setScrollTop] = useState(0);\n  const [clientHeight, setClientHeight] = useState(0);\n\n  const attachViewport = useCallback(\n    (el: HTMLDivElement | null) => {\n      viewportRef.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) (ref as { current: HTMLDivElement | null }).current = el;\n    },\n    [ref],\n  );\n\n  // A number `height` IS the viewport height, and is usable before the element\n  // has been measured. Without one, render a conservative first window so there\n  // is something on screen for the measurement pass to work from.\n  const viewport =\n    clientHeight > 0 ? clientHeight : typeof height === \"number\" ? height : estimateRowHeight * 20;\n\n  /**\n   * Prefix sums of row heights: `offsets[i]` is where row `i` starts, and the\n   * last entry is the total. Rebuilt whenever rows or measurements change —\n   * O(n) once per change, against O(log n) per scroll from the binary search,\n   * rather than O(n) on every scroll frame.\n   */\n  const { offsets, total } = useMemo(() => {\n    const offs = new Float64Array(items.length + 1);\n    for (let i = 0; i < items.length; i += 1) {\n      offs[i + 1] = offs[i] + (heights.current.get(items[i].id) ?? estimateRowHeight);\n    }\n\n    return { offsets: offs, total: items.length === 0 ? 0 : offs[items.length] };\n  }, [items, measured, estimateRowHeight]);\n\n  /** First row whose span contains `y`. */\n  const indexAt = useCallback(\n    (y: number): number => {\n      let lo = 0;\n      let hi = items.length - 1;\n      while (lo < hi) {\n        const mid = (lo + hi + 1) >> 1;\n        if (offsets[mid] <= y) lo = mid;\n        else hi = mid - 1;\n      }\n\n      return Math.max(0, lo);\n    },\n    [items.length, offsets],\n  );\n\n  const start = Math.max(0, indexAt(scrollTop) - overscan);\n  const end = Math.min(items.length, indexAt(scrollTop + viewport) + 1 + overscan);\n  const visible = useMemo(() => items.slice(start, end), [items, start, end]);\n\n  // ---------------------------------------------------------------- measuring\n\n  const observer = useRef<ResizeObserver | null>(null);\n\n  useEffect(() => {\n    // Absent in jsdom and in older runtimes. Without it the list still measures\n    // on every render; it just does not notice a row reflowing in place.\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const ro = new ResizeObserver(() => setMeasured((v) => v + 1));\n    observer.current = ro;\n\n    return () => {\n      ro.disconnect();\n      observer.current = null;\n    };\n  }, []);\n\n  // No dependency array on purpose: every render re-measures what is on screen,\n  // and the `changed` guard is what stops it looping. A render that learns\n  // nothing new sets no state.\n  useLayoutEffect(() => {\n    const win = windowRef.current;\n    if (!win) return;\n\n    let changed = false;\n    for (const el of Array.from(win.children) as HTMLElement[]) {\n      const id = el.getAttribute(ROW_ID_ATTR);\n      if (id === null) continue;\n\n      observer.current?.observe(el);\n\n      const h = el.getBoundingClientRect().height;\n      // A zero height is \"not laid out yet\", not a 0px row. Recording it would\n      // collapse the list and make every offset after it wrong.\n      if (h > 0 && heights.current.get(id) !== h) {\n        heights.current.set(id, h);\n        changed = true;\n      }\n    }\n\n    const vp = viewportRef.current;\n    if (vp && vp.clientHeight > 0 && vp.clientHeight !== clientHeight) setClientHeight(vp.clientHeight);\n\n    if (changed) setMeasured((v) => v + 1);\n  });\n\n  // ------------------------------------------------------------- deep linking\n\n  /** The target this component last moved to, to detect that it has settled. */\n  const anchored = useRef<number | null>(null);\n  const resolved = useRef<string | null>(null);\n\n  useEffect(() => {\n    // A new id is a new request, even if the old one had resolved.\n    anchored.current = null;\n    resolved.current = null;\n  }, [scrollToId]);\n\n  useLayoutEffect(() => {\n    if (scrollToId === null || resolved.current === scrollToId) return;\n\n    const index = items.findIndex((item) => item.id === scrollToId);\n    if (index < 0) {\n      // A link to a row that is no longer in the list. Leaving the viewport\n      // where it is and SAYING SO is the only honest outcome — scrolling to the\n      // top would be indistinguishable from a successful landing.\n      resolved.current = scrollToId;\n      onScrollToIdResolved?.(scrollToId, false);\n\n      return;\n    }\n\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    // Clamped the way the browser clamps: a row inside the final viewport-height\n    // of the list cannot be brought to the top, and pretending otherwise would\n    // leave this waiting for a position that can never be reached.\n    const target = Math.max(0, Math.min(offsets[index], Math.max(0, total - viewport)));\n\n    if (anchored.current !== target) {\n      anchored.current = target;\n      vp.scrollTop = target;\n      setScrollTop(target);\n\n      return;\n    }\n\n    // The target stopped moving as rows above it were measured, and we are on\n    // it. Only now is the deep link actually honoured.\n    if (Math.abs(vp.scrollTop - target) <= 1) {\n      resolved.current = scrollToId;\n      onScrollToIdResolved?.(scrollToId, true);\n    }\n  });\n\n  // ------------------------------------------------------------- tail-follow\n\n  const reportedFollow = useRef(followTail);\n  const programmatic = useRef(false);\n\n  useEffect(() => {\n    // The prop is the truth, so adopt it rather than remembering what we asked\n    // for. Otherwise a consumer that declines an `onFollowChange(false)` would\n    // never be asked again.\n    reportedFollow.current = followTail;\n  }, [followTail]);\n\n  const askFollow = useCallback(\n    (next: boolean) => {\n      if (reportedFollow.current === next) return;\n      reportedFollow.current = next;\n      onFollowChange?.(next);\n    },\n    [onFollowChange],\n  );\n\n  useLayoutEffect(() => {\n    if (!followTail) return;\n    // A pending deep link wins while it resolves; otherwise the two would fight\n    // over the same scrollTop and the link would lose.\n    if (scrollToId !== null && resolved.current !== scrollToId) return;\n\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    const bottom = Math.max(0, total - viewport);\n    if (Math.abs(vp.scrollTop - bottom) > 0.5) {\n      programmatic.current = true;\n      vp.scrollTop = bottom;\n      setScrollTop(bottom);\n    }\n  });\n\n  const onScroll = useCallback(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    const next = vp.scrollTop;\n    const previous = scrollTop;\n    setScrollTop(next);\n\n    const bottom = Math.max(0, total - viewport);\n    const wasProgrammatic = programmatic.current;\n    programmatic.current = false;\n\n    if (next <= bottom - BOTTOM_SLACK) {\n      // Moved up, and not because we moved it.\n      if (!wasProgrammatic && next < previous) askFollow(false);\n    } else {\n      askFollow(true);\n    }\n  }, [scrollTop, total, viewport, askFollow]);\n\n  /** Any upward gesture is a statement of intent, whatever scrollTop says. */\n  const onWheel = useCallback(\n    (e: WheelEvent<HTMLDivElement>) => {\n      if (e.deltaY < 0) askFollow(false);\n    },\n    [askFollow],\n  );\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (UPWARD_KEYS.has(e.key)) askFollow(false);\n    },\n    [askFollow],\n  );\n\n  const touchStart = useRef<number | null>(null);\n\n  const onTouchStart = useCallback((e: TouchEvent<HTMLDivElement>) => {\n    touchStart.current = e.touches[0]?.clientY ?? null;\n  }, []);\n\n  const onTouchMove = useCallback(\n    (e: TouchEvent<HTMLDivElement>) => {\n      const from = touchStart.current;\n      const y = e.touches[0]?.clientY;\n      // Finger travelling DOWN drags the content down, which scrolls up.\n      if (from !== null && y !== undefined && y - from > TOUCH_SLOP) askFollow(false);\n    },\n    [askFollow],\n  );\n\n  // ------------------------------------------------------------ unseen count\n\n  const seen = useRef(items.length);\n  const reportedUnseen = useRef<number | null>(null);\n\n  useEffect(() => {\n    const unseen = followTail ? 0 : Math.max(0, items.length - seen.current);\n    if (followTail) seen.current = items.length;\n\n    if (reportedUnseen.current === unseen) return;\n    reportedUnseen.current = unseen;\n    onUnseenChange?.(unseen);\n  }, [items.length, followTail, onUnseenChange]);\n\n  // ------------------------------------------------------------------ render\n\n  return (\n    <div\n      ref={attachViewport}\n      data-react-fancy-virtual-list=\"\"\n      data-react-fancy-virtual-list-following={followTail ? \"true\" : \"false\"}\n      data-react-fancy-virtual-list-rows={items.length}\n      role=\"log\"\n      tabIndex={0}\n      className={cn(\"relative overflow-y-auto overflow-x-hidden outline-none\", className)}\n      style={{ height }}\n      onScroll={onScroll}\n      onWheel={onWheel}\n      onKeyDown={onKeyDown}\n      onTouchStart={onTouchStart}\n      onTouchMove={onTouchMove}\n      {...props}\n    >\n      {/* Holds the full scroll range so the scrollbar is honest from the first\n          paint, instead of growing as rows are discovered. */}\n      <div\n        data-react-fancy-virtual-list-sizer=\"\"\n        style={{ height: `${total}px`, position: \"relative\" }}\n      >\n        <div\n          ref={windowRef}\n          data-react-fancy-virtual-list-window=\"\"\n          data-react-fancy-virtual-list-start={start}\n          style={{ transform: `translateY(${offsets[start] ?? 0}px)` }}\n        >\n          {visible.map((item, i) => (\n            <div key={item.id} data-react-fancy-virtual-row-id={item.id}>\n              {renderRow(item, start + i)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst ROW_ID_ATTR = \"data-react-fancy-virtual-row-id\";\n/** Within this many px of the bottom counts as \"at the bottom\". */\nconst BOTTOM_SLACK = 4;\n/** Ignore a touch jitter smaller than this before calling it an upward drag. */\nconst TOUCH_SLOP = 4;\nconst UPWARD_KEYS = new Set([\"ArrowUp\", \"PageUp\", \"Home\"]);\n"]}

package/dist/{chunk-5TUZENNJ.cjs → chunk-MTUH2X3W.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkWKNVZUWZ_cjs = require('./chunk-WKNVZUWZ.cjs');
-var chunkUWL6U3L7_cjs = require('./chunk-UWL6U3L7.cjs');
+var chunkRMJGF7MN_cjs = require('./chunk-RMJGF7MN.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 var CONFIDENCE_TIERS = [
@@ -109,11 +109,11 @@ function ReasonTag({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: s.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
       ] }),
-      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkUWL6U3L7_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkRMJGF7MN_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
     ] }) })
   ] });
 }
 
 exports.ReasonTag = ReasonTag;
-//# sourceMappingURL=chunk-5TUZENNJ.cjs.map
-//# sourceMappingURL=chunk-5TUZENNJ.cjs.map
+//# sourceMappingURL=chunk-MTUH2X3W.cjs.map
+//# sourceMappingURL=chunk-MTUH2X3W.cjs.map

package/dist/{chunk-5TUZENNJ.cjs.map → chunk-MTUH2X3W.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":["jsxs","jsx","Popover","Button"],"mappings":"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","file":"chunk-5TUZENNJ.cjs","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ml-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":["jsxs","jsx","Popover","Button"],"mappings":"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","file":"chunk-MTUH2X3W.cjs","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ml-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}

package/dist/{chunk-B4PFNSX7.js → chunk-O3WEV562.js}

@@ -1,8 +1,31 @@
 import { Tooltip } from './chunk-35EN5AYE.js';
-import { Button } from './chunk-G6VMNSCM.js';
-import { useState, useRef, useMemo, useEffect } from 'react';
+import { Button } from './chunk-46IPQEUP.js';
+import { Icon } from './chunk-IVRYSSM7.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+// src/utils/platform.ts
+var APPLE_UA_DATA_PLATFORMS = /* @__PURE__ */ new Set(["macos", "ios", "ipados"]);
+var APPLE_FREE_TEXT = /\b(mac|macintosh|iphone|ipad|ipod|darwin)/i;
+function detectPlatform(hints) {
+  if (!hints) return "generic";
+  const uaData = hints.userAgentData?.platform;
+  if (typeof uaData === "string" && uaData.length > 0) {
+    return APPLE_UA_DATA_PLATFORMS.has(uaData.trim().toLowerCase()) ? "apple" : "generic";
+  }
+  for (const value of [hints.platform, hints.userAgent]) {
+    if (typeof value === "string" && APPLE_FREE_TEXT.test(value)) return "apple";
+  }
+  return "generic";
+}
+function modifierKeyLabel(platform) {
+  return platform === "apple" ? "\u2318" : "Ctrl";
+}
+function browserPlatformHints() {
+  if (typeof navigator === "undefined") return null;
+  return navigator;
+}
 var DEFAULT_MENTION_COLOR = {
   agent: "#a855f7",
   file: "#10b981",
@@ -13,12 +36,15 @@ function PromptInput({
   commands = [],
   mentions = [],
   showHint = true,
+  platform,
   onSubmit,
-  placeholder = "Ask anything. Type / for commands, @ for mentions. \u2318/Ctrl+Enter to send.",
+  placeholder,
   charsPerToken = 4,
   mentionColor,
   maxHeight = 280,
-  aboveInput
+  aboveInput,
+  className,
+  ...rest
 }) {
   const [text, setText] = useState("");
   const [attachments, setAttachments] = useState([]);
@@ -27,6 +53,13 @@ function PromptInput({
   const fileRef = useRef(null);
   const [dragOver, setDragOver] = useState(false);
   const colors = mentionColor ?? DEFAULT_MENTION_COLOR;
+  const [detected, setDetected] = useState("generic");
+  useEffect(() => {
+    if (platform) return;
+    setDetected(detectPlatform(browserPlatformHints()));
+  }, [platform]);
+  const modKey = modifierKeyLabel(platform ?? detected);
+  const resolvedPlaceholder = placeholder ?? `Ask anything. Type / for commands, @ for mentions. ${modKey}+Enter to send.`;
   const tokens = useMemo(
     () => Math.ceil(text.length / Math.max(1, charsPerToken)),
     [text, charsPerToken]
@@ -160,13 +193,20 @@ function PromptInput({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...rest,
+      "data-react-fancy-prompt-input": "",
+      "data-react-fancy-prompt-input-drag": dragOver ? "over" : "idle",
       onDragOver: (e) => {
         e.preventDefault();
         setDragOver(true);
       },
       onDragLeave: () => setDragOver(false),
       onDrop,
-      className: `relative rounded-md border transition ${dragOver ? "border-violet-400 bg-violet-50/50 dark:border-violet-600 dark:bg-violet-950/30" : "border-zinc-200 dark:border-zinc-800"} bg-white dark:bg-zinc-900`,
+      className: cn(
+        "relative rounded-md border bg-white transition dark:bg-zinc-900",
+        dragOver ? "border-violet-400 bg-violet-50/50 dark:border-violet-600 dark:bg-violet-950/30" : "border-zinc-200 dark:border-zinc-800",
+        className
+      ),
       children: [
         aboveInput && /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-200 dark:border-zinc-800", children: aboveInput }),
         attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: attachments.map((a) => /* @__PURE__ */ jsxs(
@@ -174,7 +214,7 @@ function PromptInput({
           {
             className: "inline-flex items-center gap-1.5 rounded-md bg-zinc-100 px-2 py-0.5 text-[11px] dark:bg-zinc-800",
             children: [
-              /* @__PURE__ */ jsx("span", { children: "\u{1F4CE}" }),
+              /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: "xs", className: "text-zinc-400" }),
               /* @__PURE__ */ jsx("span", { className: "font-mono", children: a.name }),
               /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: fmtSize(a.bytes) }),
               /* @__PURE__ */ jsx(
@@ -199,7 +239,7 @@ function PromptInput({
               onChange: (e) => updateText(e.target.value, e.target.selectionStart),
               onKeyDown,
               onPaste,
-              placeholder,
+              placeholder: resolvedPlaceholder,
               spellCheck: false,
               className: "block w-full resize-none bg-transparent px-3 py-2.5 text-[14px] leading-relaxed outline-none placeholder:text-zinc-400",
               rows: 3
@@ -265,9 +305,10 @@ function PromptInput({
             {
               variant: "ghost",
               size: "sm",
+              icon: "paperclip",
               className: "shrink-0",
               onClick: () => fileRef.current?.click(),
-              children: "\u{1F4CE} attach"
+              children: "attach"
             }
           ) }),
           /* @__PURE__ */ jsx(
@@ -298,16 +339,33 @@ function PromptInput({
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
-            showHint && /* @__PURE__ */ jsxs("span", { className: "hidden text-[10px] text-zinc-500 sm:inline", children: [
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "\u2318" }),
-              " ",
-              "+",
-              " ",
-              /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "Enter" }),
-              " ",
-              "to send"
-            ] }),
-            /* @__PURE__ */ jsx(Button, { color: "violet", size: "sm", className: "shrink-0", onClick: submit, children: "send \u2192" })
+            showHint && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "hidden text-[10px] text-zinc-500 sm:inline",
+                "data-react-fancy-prompt-input-hint": modKey === "\u2318" ? "apple" : "generic",
+                children: [
+                  /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: modKey }),
+                  " ",
+                  "+",
+                  " ",
+                  /* @__PURE__ */ jsx("kbd", { className: "rounded border border-zinc-300 bg-zinc-50 px-1 py-0.5 font-mono text-[9px] text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300", children: "Enter" }),
+                  " ",
+                  "to send"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "violet",
+                size: "sm",
+                iconTrailing: "arrow-right",
+                className: "shrink-0",
+                onClick: submit,
+                children: "send"
+              }
+            )
           ] })
         ] })
       ]
@@ -324,6 +382,6 @@ function fmtSize(b) {
   return `${(b / 1024 / 1024).toFixed(1)} MB`;
 }
 
-export { PromptInput };
-//# sourceMappingURL=chunk-B4PFNSX7.js.map
-//# sourceMappingURL=chunk-B4PFNSX7.js.map
+export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel };
+//# sourceMappingURL=chunk-O3WEV562.js.map
+//# sourceMappingURL=chunk-O3WEV562.js.map