@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/gallery-thread/block-caret.tsx

@@ -0,0 +1,439 @@
+"use client";
+
+import { useEffect, useState, type CSSProperties, type RefObject } from "react";
+
+/**
+ * Block caret for the gallery-thread composer.
+ *
+ * `caret-shape: block` is Chromium-only, so on engines without it the native
+ * caret is made transparent (see the `@supports not (caret-shape: block)`
+ * rules in the reference chatbot.css) and this painted block tracks it. The
+ * digichat embed likewise promotes the painted block ONLY on engines without a
+ * native block caret (inside the same `@supports not (caret-shape: block)`
+ * guard in product-chrome.css), so the tracking must be runtime-robust.
+ *
+ * Positioning is measured in pixels from the live textarea: the current
+ * logical line is sliced from the value + selection offset, its width is
+ * measured with a canvas 2d context using the textarea's own computed font,
+ * and the block is placed at padding + measured width (minus scroll). The old
+ * `col * 1ch` math drifted because the overlay's font-size (0.88rem) never
+ * matched the input's (`text-sm`/`text-base`), so the error grew per
+ * keystroke — behind on some skins, ahead on others. Soft-wrapped visual
+ * lines are followed with a hidden mirror div (see mirrorCaretPx); the
+ * logical-line canvas math is only the no-layout fallback.
+ *
+ * The textarea can mount after this overlay (the composer renders it from its
+ * own lifecycle), so listeners live on the document and the textarea is
+ * re-resolved per event; the initial paint retries briefly until it exists.
+ * Syncs run on the next animation frame so React-controlled value /
+ * selection updates have landed before we measure.
+ */
+
+export function caretRowCol(text: string, offset: number): { row: number; col: number } {
+  const safe = Math.max(0, Math.min(Math.trunc(offset), text.length));
+  const before = text.slice(0, safe);
+  const row = (before.match(/\n/g) ?? []).length;
+  return { row, col: safe - before.lastIndexOf("\n") - 1 };
+}
+
+const CARET_EVENTS = [
+  "select",
+  "input",
+  "beforeinput",
+  "click",
+  "keydown",
+  "keyup",
+  "compositionupdate",
+  "focusin",
+  "scroll",
+] as const;
+const SYNC_RETRY_MS = 50;
+const SYNC_RETRY_LIMIT = 40;
+
+let measureCanvas: HTMLCanvasElement | null = null;
+
+function measureTextWidth(text: string, font: string): number | null {
+  if (!text) return 0;
+  try {
+    if (!measureCanvas && typeof document !== "undefined") {
+      measureCanvas = document.createElement("canvas");
+    }
+    const ctx = measureCanvas?.getContext("2d");
+    if (!ctx) return null;
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The ink height of a capital/digit: how far the glyphs rise above the
+ * baseline. Measured from the font, not guessed, because the caret is placed
+ * against it.
+ */
+function fontInkAscent(font: string, fontSize: number): number {
+  const fallback = fontSize * 0.72;
+  try {
+    if (!measureCanvas && typeof document !== "undefined") {
+      measureCanvas = document.createElement("canvas");
+    }
+    const ctx = measureCanvas?.getContext("2d");
+    if (!ctx) return fallback;
+    ctx.font = font;
+    const digit = ctx.measureText("0").actualBoundingBoxAscent;
+    const cap = ctx.measureText("H").actualBoundingBoxAscent;
+    const ink = Math.max(
+      Number.isFinite(digit) ? digit : 0,
+      Number.isFinite(cap) ? cap : 0,
+    );
+    return ink > 0 ? ink : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * The font's own vertical metrics: the ascent and descent the browser uses to
+ * place the baseline inside a line box. Measured, not guessed — the block
+ * caret has to sit on the same baseline the text does, and a hardcoded
+ * ascent ratio lands off the glyphs on other families.
+ */
+function fontVerticalMetrics(
+  font: string,
+  fontSize: number,
+): { ascent: number; descent: number } {
+  const fallback = { ascent: fontSize * 0.8, descent: fontSize * 0.2 };
+  try {
+    if (!measureCanvas && typeof document !== "undefined") {
+      measureCanvas = document.createElement("canvas");
+    }
+    const ctx = measureCanvas?.getContext("2d");
+    if (!ctx) return fallback;
+    ctx.font = font;
+    const m = ctx.measureText("Hxg0");
+    const ascent = m.fontBoundingBoxAscent;
+    const descent = m.fontBoundingBoxDescent;
+    return {
+      ascent: Number.isFinite(ascent) && ascent > 0 ? ascent : fallback.ascent,
+      descent: Number.isFinite(descent) && descent >= 0 ? descent : fallback.descent,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+function px(value: string | null | undefined, fallback: number): number {
+  if (!value) return fallback;
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+/**
+ * Canvas 2d font string for the textarea. Built from the individual longhands
+ * — NEVER from the `font` shorthand: computed `font` includes `/line-height`
+ * (`400 14px/22px …`), which `ctx.font` rejects, silently leaving the canvas
+ * at default 10px sans-serif. Every glyph then measures wrong and the error
+ * compounds per character (block drifts further the longer the line).
+ */
+export function canvasFont(cs: CSSStyleDeclaration | null, fontSize: number): string {
+  const style = cs?.fontStyle && cs.fontStyle !== "" ? cs.fontStyle : "normal";
+  const variant = cs?.fontVariant && cs.fontVariant !== "" ? cs.fontVariant : "normal";
+  const weight = cs?.fontWeight && cs.fontWeight !== "" ? cs.fontWeight : "400";
+  const family = cs?.fontFamily && cs.fontFamily !== "" ? cs.fontFamily : "monospace";
+  return `${style} ${variant} ${weight} ${fontSize}px ${family}`;
+}
+
+/** Expand tabs the way a textarea lays them out (advance to next tab stop). */
+export function expandTabs(line: string, tabSize: number): string {
+  if (!line.includes("\t")) return line;
+  const stops = Math.max(1, Math.trunc(tabSize) || 8);
+  let out = "";
+  let col = 0;
+  for (const ch of line) {
+    if (ch === "\t") {
+      const next = col + (stops - (col % stops));
+      out += " ".repeat(next - col);
+      col = next;
+    } else {
+      out += ch;
+      col += 1;
+    }
+  }
+  return out;
+}
+
+const MIRROR_PROPS = [
+  "boxSizing",
+  "width",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontSize",
+  "fontFamily",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "textTransform",
+  "textIndent",
+  "tabSize",
+] as const;
+
+let mirrorDiv: HTMLDivElement | null = null;
+
+/**
+ * Wrapped caret position via a hidden mirror of the textarea (same width,
+ * padding and font, `pre-wrap`), so soft-wrapped lines are followed: the old
+ * logical-line math kept growing `left` past the right edge on a long single
+ * line instead of dropping to the next visual row. Returns null when the
+ * textarea has no layout (jsdom, display:none) so the canvas path still runs.
+ *
+ * The returned baseline is the text's own baseline, read with a zero-height
+ * inline-block probe (its bottom edge sits on the baseline). Measuring it
+ * beats modelling it: the browser's line layout and the canvas metrics
+ * disagree by a pixel or two, and a caret that misses the baseline by that
+ * much reads as "sitting below the letters".
+ */
+function mirrorCaretPx(
+  area: HTMLTextAreaElement,
+  cs: CSSStyleDeclaration | null,
+): { left: number; baseline: number; lineHeight: number } | null {
+  if (!cs || typeof document === "undefined" || !area.clientWidth) return null;
+  try {
+    if (!mirrorDiv) {
+      mirrorDiv = document.createElement("div");
+      mirrorDiv.setAttribute("aria-hidden", "true");
+      document.body.appendChild(mirrorDiv);
+    }
+    const style = mirrorDiv.style;
+    for (const prop of MIRROR_PROPS) {
+      (style as unknown as Record<string, string>)[prop] = cs[prop] as string;
+    }
+    style.position = "absolute";
+    style.visibility = "hidden";
+    style.top = "0";
+    style.left = "-9999px";
+    style.whiteSpace = "pre-wrap";
+    style.overflowWrap = "break-word";
+    style.wordBreak = cs.wordBreak || "normal";
+    style.overflow = "hidden";
+    style.height = "auto";
+    // The textarea's width includes a vertical scrollbar once it scrolls.
+    style.width = `${area.offsetWidth}px`;
+    const offset = area.selectionStart ?? area.value.length;
+    mirrorDiv.textContent = area.value.slice(0, offset);
+    const marker = document.createElement("span");
+    // A zero-width glyph keeps the marker on the line the next char would use.
+    marker.textContent = area.value.slice(offset) ? area.value.slice(offset, offset + 1) : "\u200b";
+    mirrorDiv.appendChild(marker);
+    // Zero-height inline-block: its bottom margin edge sits on the baseline.
+    const probe = document.createElement("span");
+    probe.style.display = "inline-block";
+    probe.style.width = "0";
+    probe.style.height = "0";
+    mirrorDiv.appendChild(probe);
+    const fontSize = px(cs.fontSize, 14);
+    const lh = cs.lineHeight === "normal" || !cs.lineHeight ? fontSize * 1.5 : px(cs.lineHeight, fontSize * 1.5);
+    return {
+      left: marker.offsetLeft,
+      baseline: probe.offsetTop,
+      lineHeight: lh,
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Pixel position of the caret relative to the container. Falls back to null when unmeasurable. */
+export function caretPx(
+  area: HTMLTextAreaElement,
+  container: HTMLElement | null,
+): { left: number; top: number; height: number; width: number } | null {
+  const { row, col } = caretRowCol(area.value, area.selectionStart ?? area.value.length);
+  const lines = area.value.split("\n");
+  const lineText = (lines[row] ?? "").slice(0, col);
+
+  let cs: CSSStyleDeclaration | null = null;
+  try {
+    cs = window.getComputedStyle(area);
+  } catch {
+    cs = null;
+  }
+  const fontSize = px(cs?.fontSize, 14);
+  const rawLineHeight = cs?.lineHeight ?? "";
+  const lineHeight = rawLineHeight === "normal" || !rawLineHeight ? fontSize * 1.5 : px(rawLineHeight, fontSize * 1.5);
+  const font = canvasFont(cs, fontSize);
+
+  const tabSizeRaw = cs?.tabSize ?? "";
+  const tabSize = tabSizeRaw.endsWith("px") ? px(tabSizeRaw, 8) / Math.max(1, fontSize * 0.6) : px(tabSizeRaw, 8);
+  const lineExpanded = expandTabs(lineText, tabSize);
+  const measured = measureTextWidth(lineExpanded, font);
+  const chWidth = measureTextWidth("0", font) ?? fontSize * 0.6;
+  // Canvas measureText ignores CSS letter/word-spacing — add them per unit
+  // or the block drifts a fraction of a pixel per character/space.
+  const letterSpacing = px(cs?.letterSpacing, 0);
+  const wordSpacing = px(cs?.wordSpacing, 0);
+  const spaces = (lineExpanded.match(/ /g) ?? []).length;
+  const textWidth =
+    (measured ?? [...lineExpanded].length * chWidth) + [...lineExpanded].length * letterSpacing + spaces * wordSpacing;
+
+  const paddingLeft = px(cs?.paddingLeft, 0);
+  const paddingTop = px(cs?.paddingTop, 0);
+  const borderLeft = px(cs?.borderLeftWidth, 0);
+  const borderTop = px(cs?.borderTopWidth, 0);
+
+  // Overlay is absolutely positioned in the relatively-positioned wrapper;
+  // offsetLeft/Top pin the textarea's border box inside that wrapper.
+  const baseLeft = (area.offsetLeft || 0) + borderLeft + paddingLeft;
+  const baseTop = (area.offsetTop || 0) + borderTop + paddingTop;
+  void container;
+
+  // Native-cursor geometry: the caret is as tall as the font's ascent +
+  // descent (what a real text cursor spans), and it is centred on the
+  // letters' ink box — half way between standing on the baseline and
+  // aligning with the top of the glyphs, so it neither hangs below the text
+  // nor floats above it.
+  const { ascent, descent } = fontVerticalMetrics(font, fontSize);
+  const contentHeight = ascent + descent;
+  const caretHeight = Math.max(8, Math.round(contentHeight));
+  const inkAscent = fontInkAscent(font, fontSize);
+  // Distance from the baseline down to the caret's top edge.
+  const caretDrop = inkAscent / 2 + caretHeight / 2;
+
+  const mirrored = mirrorCaretPx(area, cs);
+  if (mirrored) {
+    return {
+      left: (area.offsetLeft || 0) + borderLeft + mirrored.left - (area.scrollLeft || 0),
+      // The mirror's baseline is measured from the textarea's padding edge, so
+      // the block hangs from it: bottom edge on the baseline, height upward.
+      top:
+        (area.offsetTop || 0) +
+        borderTop +
+        mirrored.baseline -
+        caretDrop -
+        (area.scrollTop || 0),
+      height: caretHeight,
+      width: Math.max(1, chWidth),
+    };
+  }
+
+  // No layout to measure (jsdom, display:none): fall back to the font model.
+  const halfLeading = (lineHeight - contentHeight) / 2;
+  const baseline = baseTop + row * lineHeight + halfLeading + ascent;
+  return {
+    left: baseLeft + textWidth - (area.scrollLeft || 0),
+    top: baseline - caretDrop - (area.scrollTop || 0),
+    height: caretHeight,
+    width: Math.max(1, chWidth),
+  };
+}
+
+export function ComposerBlockCaret({
+  containerRef,
+}: {
+  /** Ref of the wrapper holding the composer textarea. */
+  containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  const [pos, setPos] = useState({ row: 0, col: 0, left: 0, top: 0, height: 22, width: 8 });
+
+  useEffect(() => {
+    let retries = 0;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let raf = 0;
+    let queued = false;
+
+    const textarea = () => containerRef.current?.querySelector("textarea") ?? null;
+
+    const sync = () => {
+      const area = textarea();
+      if (!area) return false;
+      const { row, col } = caretRowCol(area.value, area.selectionStart ?? area.value.length);
+      const measured = caretPx(area, containerRef.current);
+      setPos(
+        measured
+          ? { row, col, left: measured.left, top: measured.top, height: measured.height, width: measured.width }
+          : { row, col, left: col * 8, top: row * 22, height: 22, width: 8 },
+      );
+      return true;
+    };
+
+    const schedule = () => {
+      if (queued) return;
+      queued = true;
+      const run = () => {
+        queued = false;
+        sync();
+      };
+      if (typeof requestAnimationFrame === "function") {
+        raf = requestAnimationFrame(run);
+      } else {
+        run();
+      }
+    };
+
+    const onEvent = (event: Event) => {
+      const area = textarea();
+      if (!area) return;
+      if (event.target === area) {
+        // Immediate sync keeps unit-test determinism (assert right after
+        // dispatch); the rAF pass then re-measures after React-controlled
+        // value/selection updates land, which is the live-typing fix.
+        sync();
+        schedule();
+      } else if (event.type === "scroll") {
+        schedule();
+      }
+    };
+
+    if (!sync()) {
+      const retry = () => {
+        if (sync() || retries >= SYNC_RETRY_LIMIT) return;
+        retries += 1;
+        timer = setTimeout(retry, SYNC_RETRY_MS);
+      };
+      timer = setTimeout(retry, SYNC_RETRY_MS);
+    }
+
+    for (const name of CARET_EVENTS) {
+      document.addEventListener(name, onEvent, true);
+    }
+    window.addEventListener("resize", schedule);
+
+    return () => {
+      if (timer) clearTimeout(timer);
+      if (raf) cancelAnimationFrame(raf);
+      queued = false;
+      for (const name of CARET_EVENTS) {
+        document.removeEventListener(name, onEvent, true);
+      }
+      window.removeEventListener("resize", schedule);
+    };
+  }, [containerRef]);
+
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="aui_block-caret"
+      className="aui-block-caret"
+      style={
+        {
+          "--caret-col": pos.col,
+          "--caret-row": pos.row,
+          left: `${pos.left}px`,
+          top: `${pos.top}px`,
+          height: `${pos.height}px`,
+          width: `${pos.width}px`,
+        } as CSSProperties
+      }
+    />
+  );
+}

package/src/components/chat/gallery-thread/cn.ts

@@ -0,0 +1 @@
+export { cn } from "../../../lib/utils";

package/src/components/chat/gallery-thread/composer-keyboard.ts

@@ -0,0 +1,106 @@
+/**
+ * Composer keyboard dismissal for phones.
+ *
+ * On a phone the software keyboard covers most of the viewport, so sending a
+ * message leaves the visitor looking at the first lines of the answer with the
+ * keyboard still up. Dropping focus from the textarea retracts the keyboard and
+ * gives the streaming answer the whole screen.
+ *
+ * Scoped to a coarse pointer on purpose: on a desktop the caret belongs in the
+ * composer for the follow-up turn, and losing focus there would be a
+ * regression.
+ */
+
+type MatchMedia = ((query: string) => MediaQueryList) | undefined;
+
+function defaultMatchMedia(): MatchMedia {
+  return typeof window === "undefined" ? undefined : window.matchMedia;
+}
+
+/** True on a phone or tablet, where the pointer is a finger. */
+export function isCoarsePointer(matchMedia: MatchMedia = defaultMatchMedia()): boolean {
+  if (typeof matchMedia !== "function") return false;
+  try {
+    return matchMedia("(pointer: coarse)").matches;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * True when the composer holds something the user meant to send.
+ *
+ * Read *before* the submit is handed to the runtime: a successful send clears
+ * the textarea, so asking afterwards would answer "empty" for every real send.
+ * Enter on an empty composer also submits through the same form, and that one
+ * must not steal focus.
+ */
+export function composerHasText(root: HTMLElement | null): boolean {
+  if (!root) return false;
+  const area = root.querySelector<HTMLTextAreaElement>("textarea");
+  return area ? area.value.trim().length > 0 : false;
+}
+
+/**
+ * Blur the composer's textarea so the on-screen keyboard retracts.
+ *
+ * Returns true when the textarea had focus and was blurred, so a caller (or a
+ * test) can tell a dismissal from a no-op. Never throws: a missing textarea on
+ * a skin that does not use one is a valid state.
+ */
+export function dismissComposerKeyboard(
+  root: HTMLElement | null,
+  options: { coarse?: boolean } = {},
+): boolean {
+  const coarse = options.coarse ?? isCoarsePointer();
+  if (!coarse || !root) return false;
+  const area = root.querySelector<HTMLTextAreaElement>("textarea");
+  if (!area) return false;
+  const wasFocused = area.ownerDocument.activeElement === area;
+  area.blur();
+  return wasFocused;
+}
+
+const TEXT_INPUT_TYPES = new Set([
+  "text",
+  "search",
+  "email",
+  "url",
+  "tel",
+  "password",
+  "number",
+]);
+
+/** True when focusing this element is what opens the software keyboard. */
+function isTextEntry(element: Element | null): boolean {
+  if (!element) return false;
+  if (element.tagName === "TEXTAREA") return true;
+  if (element.tagName === "INPUT") {
+    const type = (element as HTMLInputElement).type || "text";
+    return TEXT_INPUT_TYPES.has(type);
+  }
+  return (element as HTMLElement).isContentEditable === true;
+}
+
+/**
+ * Blur whatever text field currently holds focus, so the keyboard retracts.
+ *
+ * The composer is not the only way to send: an example question, a redo, a
+ * retry and an edit all start a turn without going through the composer's
+ * submit, and each one leaves the keyboard up over the answer. This is the
+ * entry-point-shaped dismissal those paths call, and it deliberately works
+ * from the document's active element rather than from a composer ref.
+ *
+ * Only a text field is blurred. A focused button (an example question the
+ * visitor tapped) is left alone: it does not open a keyboard, and blurring it
+ * would drop the focus ring for a switch or keyboard user on a hybrid device.
+ */
+export function dismissKeyboardIfCoarse(options: { coarse?: boolean } = {}): boolean {
+  if (typeof document === "undefined") return false;
+  const coarse = options.coarse ?? isCoarsePointer();
+  if (!coarse) return false;
+  const active = document.activeElement;
+  if (!isTextEntry(active)) return false;
+  (active as HTMLElement).blur();
+  return true;
+}