@drawnagency/primitives 0.1.118 → 0.1.120

package/src/deck/components/DeckImageGrid.tsx

@@ -1,254 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { cn } from "../../lib/cn";
-import type { DeckImageGrid as DeckImageGridContent, DeckImageGridItem, DeckMediaAsset } from "../../schemas/deck";
-import { captureTileRects, playTileFlip, type TileRects } from "../flip";
-import { DeckMissingMedia, useDeckMediaResolver } from "../media";
-import { DECK_ELEVATION, surfaceInk } from "../tokens";
-
-interface Props {
-  content: DeckImageGridContent;
-}
-
-/**
- * Two columns for a small set, three once there are enough tiles to fill them.
- * Deliberately not a schema field: it is presentation, and one fewer knob for
- * an author to get wrong.
- */
-function columnsFor(count: number): number {
-  return count <= 4 ? 2 : 3;
-}
-
-/**
- * A tile's height as a multiple of the column width. Falls back to a square
- * when the resolver reports no dimensions — the packing still has to be
- * deterministic, and a square is the least-wrong guess.
- */
-function tileRatio(asset: DeckMediaAsset | null): number {
-  if (asset?.width === undefined || asset.height === undefined || asset.width <= 0) return 1;
-  return asset.height / asset.width;
-}
-
-/**
- * Greedy shortest-column packing: each tile joins whichever column is currently
- * least tall, ties going left. With uniform aspect ratios that degenerates to
- * round-robin, which is what makes the simple cases look deliberate.
- */
-export function packMasonry(ratios: number[], columns: number): number[][] {
-  const packed: number[][] = Array.from({ length: columns }, () => []);
-  const filled = new Array<number>(columns).fill(0);
-  ratios.forEach((ratio, index) => {
-    let target = 0;
-    for (let column = 1; column < columns; column++) {
-      if (filled[column] < filled[target]) target = column;
-    }
-    packed[target].push(index);
-    filled[target] += ratio;
-  });
-  return packed;
-}
-
-const TILE_BASE =
-  "group relative block shrink-0 overflow-hidden bg-base-200 will-change-transform transition-[transform,box-shadow,opacity] duration-[380ms] ease-[cubic-bezier(0.2,0.75,0.2,1)] focus-visible:outline-2 focus-visible:outline-offset-[-6px] focus-visible:outline-[var(--color-primary)]";
-
-/**
- * Deck Component — image grid, and the runtime's signature interaction.
- *
- * Masonry columns: every image keeps its own aspect ratio, the column width
- * decides its height, and a stack that runs past the bottom of the slot is
- * clipped there. That clip is the point — on a fixed 16:9 stage a collage that
- * runs off the bottom edge reads better than one that crops every frame to a
- * uniform cell, and nothing may spill past the slot onto the rest of the slide.
- *
- * Hover lifts a tile; activating it expands that tile to fill the whole grid
- * region as a lightbox contained inside the slide (never a full-screen overlay
- * — the deck stays the deck). Activating again, the close affordance, or Escape
- * returns it. Tiles are real buttons, so keyboard activation is the browser's.
- */
-export function DeckImageGrid({ content }: Props) {
-  const [active, setActive] = useState<number | null>(null);
-  const gridRef = useRef<HTMLDivElement>(null);
-  const pendingRects = useRef<TileRects | null>(null);
-
-  const expanded = active !== null;
-  const resolve = useDeckMediaResolver();
-  const count = content.items.length;
-
-  const assets = useMemo(() => content.items.map((item) => resolve(item.media)), [content.items, resolve]);
-  const columns = columnsFor(count);
-  const packed = useMemo(() => packMasonry(assets.map(tileRatio), columns), [assets, columns]);
-
-  // Measure BEFORE the state change: React moves the DOM, and FLIP needs the
-  // pre-move rects, which no longer exist by the time the effect runs.
-  const transitionTo = useCallback((next: number | null) => {
-    const grid = gridRef.current;
-    if (grid) pendingRects.current = captureTileRects(grid);
-    setActive(next);
-  }, []);
-
-  useLayoutEffect(() => {
-    const grid = gridRef.current;
-    const before = pendingRects.current;
-    pendingRects.current = null;
-    if (grid && before) playTileFlip(grid, before);
-  }, [active]);
-
-  // The Deck Builder replaces the whole deck every LLM turn, so a grid can lose
-  // tiles under an open lightbox. Left alone, the expanded index would point
-  // past the end and every tile would render hidden — a blank slot with no way
-  // out but Escape.
-  useEffect(() => {
-    setActive((prev) => (prev === null || prev < count ? prev : null));
-  }, [count]);
-
-  useEffect(() => {
-    if (!expanded) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      // NOTE: this stops the event travelling to an ancestor, which for a
-      // window listener is nothing at all — it does NOT stop other listeners on
-      // window from also seeing this Escape. A future shell-level Escape (exit
-      // presentation, close the builder) has to coordinate with the grid
-      // explicitly; it cannot rely on this call to have swallowed the key.
-      event.stopPropagation();
-      transitionTo(null);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [expanded, transitionTo]);
-
-  /**
-   * Close returns focus to the tile that was expanded. Without it the close
-   * button unmounts under the caret and focus falls to <body>, which strands a
-   * keyboard user outside the grid entirely. Focus first, then re-render, so
-   * the unmounting button is no longer the active element when it goes.
-   */
-  const close = useCallback(() => {
-    gridRef.current?.querySelector<HTMLElement>(`[data-deck-tile="${active}"]`)?.focus({ preventScroll: true });
-    transitionTo(null);
-  }, [active, transitionTo]);
-
-  return (
-    <div
-      ref={gridRef}
-      data-deck-component="imageGrid"
-      data-deck-grid-expanded={expanded ? "true" : "false"}
-      data-deck-grid-columns={columns}
-      style={DECK_ELEVATION}
-      // Clipped, not scrolled: a deck slide has no scrollbars, and a stack that
-      // runs long is meant to run off the bottom of the slot.
-      className="relative flex size-full gap-[14px] overflow-hidden"
-    >
-      {packed.map((indices, column) => (
-        // `flex-1` rather than a width fraction: the columns have to share the
-        // gap between them, and equal flex bases divide what is left over.
-        <div key={column} data-deck-grid-column={column} className="flex min-w-0 flex-1 flex-col gap-[14px]">
-          {indices.map((index) => (
-            <Tile
-              key={index}
-              item={content.items[index]}
-              asset={assets[index]}
-              index={index}
-              expanded={expanded}
-              active={index === active}
-              onActivate={() => transitionTo(index === active ? null : index)}
-            />
-          ))}
-        </div>
-      ))}
-
-      {expanded && (
-        <button
-          type="button"
-          data-deck-grid-close=""
-          onClick={close}
-          data-deck-surface="brand"
-          style={surfaceInk("brand")}
-          className="absolute top-[14px] right-[14px] z-[4] bg-primary px-[18px] py-[10px] text-[15px] font-semibold tracking-[0.12em] text-[var(--deck-ink)] uppercase"
-        >
-          Close
-        </button>
-      )}
-    </div>
-  );
-}
-
-interface TileProps {
-  item: DeckImageGridItem;
-  asset: DeckMediaAsset | null;
-  index: number;
-  expanded: boolean;
-  active: boolean;
-  onActivate: () => void;
-}
-
-function Tile({ item, asset, index, expanded, active, onActivate }: TileProps) {
-  const label = item.caption ?? asset?.alt ?? `Image ${index + 1}`;
-
-  return (
-    <button
-      type="button"
-      data-deck-tile={index}
-      data-deck-tile-active={active ? "true" : "false"}
-      aria-expanded={active}
-      aria-label={active ? `Close ${label}` : `Expand ${label}`}
-      tabIndex={expanded && !active ? -1 : 0}
-      onClick={onActivate}
-      className={cn(
-        TILE_BASE,
-        // Every tile leaves the column flow when one is expanded, not only the
-        // active one: leaving the siblings in place would let the columns
-        // re-pack around the gap, which both reflows the tiles the lightbox is
-        // covering and moves the ones the FLIP is animating.
-        expanded ? "absolute inset-0 flex items-center justify-center" : "w-full",
-        expanded && !active && "pointer-events-none opacity-0",
-        // Transparent, not the tile's loading plate: an expanded frame is
-        // letterboxed inside the slot, and the field around it should read as
-        // the slide showing through rather than as a grey box drawn on top.
-        expanded && active && "z-[3] bg-transparent opacity-100",
-        !expanded && "cursor-pointer hover:z-[2] hover:scale-[1.035] hover:shadow-[var(--deck-lift)]",
-      )}
-    >
-      {asset === null ? (
-        <DeckMissingMedia className={active ? "size-full" : "aspect-square h-auto w-full"} />
-      ) : (
-        <img
-          src={asset.src}
-          alt=""
-          // The intrinsic size, when the resolver knows it, so the column
-          // reserves the right height before a byte arrives — otherwise the
-          // masonry re-packs visibly as each image lands.
-          width={asset.width}
-          height={asset.height}
-          // The elevation moves onto the image when expanded: the button box is
-          // the whole slot now, and a shadow on THAT would outline the
-          // letterbox instead of the frame the viewer is looking at.
-          className={
-            active ? "max-h-full max-w-full object-contain shadow-[var(--deck-lift-strong)]" : "block h-auto w-full"
-          }
-        />
-      )}
-
-      <span
-        aria-hidden="true"
-        data-deck-surface="brand"
-        style={surfaceInk("brand")}
-        className="absolute top-0 left-0 bg-primary px-[12px] py-[6px] text-[15px] font-bold tracking-[0.1em] text-[var(--deck-ink)] tabular-nums"
-      >
-        {String(index + 1).padStart(2, "0")}
-      </span>
-
-      {item.caption !== undefined && (
-        <span
-          data-deck-surface="brand"
-          style={surfaceInk("brand")}
-          className={cn(
-            "absolute right-0 bottom-0 left-0 bg-primary text-left tracking-[0.04em] text-[var(--deck-ink)] transition-opacity duration-200",
-            active ? "px-[30px] py-[22px] text-[24px] opacity-100" : "px-[18px] py-[14px] text-[18px] opacity-0 group-hover:opacity-100",
-          )}
-        >
-          {item.caption}
-        </span>
-      )}
-    </button>
-  );
-}

package/src/deck/components/DeckRichText.tsx

@@ -1,111 +0,0 @@
-import { Fragment, type ReactNode } from "react";
-import type { DeckTextPath, DeckTextSlot } from "../../lib/deck-edit";
-import type { DeckInlineText, DeckRichText as DeckRichTextContent } from "../../schemas/deck";
-import { EditableText } from "../editing";
-
-interface Props {
-  content: DeckRichTextContent;
-  /**
-   * Which slot of the enclosing Layout this component fills. Supplied only so a
-   * text leaf can address itself for inline editing (#39); absent means "no
-   * edit seam here", which is the read-only default every viewer surface gets.
-   */
-  slot?: DeckTextSlot;
-}
-
-/**
- * A body line. A plain string renders as itself; a span run renders its marks
- * as elements. Nothing here reads a string as markup — `bold` and `italic` are
- * booleans on the span, which is the whole point of the representation.
- *
- * The editable unit is the LEAF, never the line: a marked run offers one field
- * per span, so editing the words around a bold phrase cannot flatten it. That
- * is what lets inline editing be plain-text-only without a formatting UI and
- * without silently dropping marks (#39).
- */
-function InlineText({ value, path }: { value: DeckInlineText; path?: DeckTextPath }) {
-  if (typeof value === "string") return <EditableText path={path}>{value}</EditableText>;
-  return (
-    <>
-      {value.map((span, i) => {
-        let node: ReactNode = (
-          <EditableText path={path && { ...path, span: i }}>{span.text}</EditableText>
-        );
-        if (span.italic) node = <em className="italic">{node}</em>;
-        // Bold pulls the phrase back to full ink: body copy renders muted, so
-        // weight alone barely registers at presentation size.
-        if (span.bold) node = <strong className="font-semibold text-[var(--deck-ink)]">{node}</strong>;
-        return <Fragment key={i}>{node}</Fragment>;
-      })}
-    </>
-  );
-}
-
-/**
- * Deck Component — rich text.
- *
- * Every size is px against the 1600x900 stage; every color, family and radius
- * is a token (`--deck-*` are set by the enclosing Layout, see ./tokens.ts).
- * Fields are typographic roles, not markup: the schema carries plain strings
- * and marked spans, so nothing here interpolates HTML.
- */
-export function DeckRichText({ content, slot }: Props) {
-  const { kicker, heading, subheading, paragraphs, bullets } = content;
-  const at = (field: DeckTextPath["field"], line?: number): DeckTextPath | undefined =>
-    slot === undefined ? undefined : { slot, field, line };
-
-  return (
-    <div data-deck-component="richText" className="flex flex-col gap-[28px]">
-      {kicker !== undefined && (
-        <div className="flex flex-col gap-[18px]">
-          <p className="text-[22px] font-semibold tracking-[0.2em] text-[var(--deck-accent)] [text-transform:var(--nav-text-transform)]">
-            <EditableText path={at("kicker")}>{kicker}</EditableText>
-          </p>
-          <span
-            aria-hidden="true"
-            // Inline, not `self-[var(…)]`: Tailwind never generated CSS for that
-            // arbitrary self- value, so the divider silently ignored --deck-align
-            // and hugged the left edge on centered layouts.
-            style={{ alignSelf: "var(--deck-align, start)" }}
-            className="h-[4px] w-[84px] rounded-[var(--radius-inner)] bg-[var(--deck-accent)]"
-          />
-        </div>
-      )}
-
-      {heading !== undefined && (
-        <h1 className="font-heading text-[88px] leading-[1.06] font-medium tracking-[-0.015em] text-[var(--deck-ink)] [text-transform:var(--heading-text-transform)]">
-          <EditableText path={at("heading")}>{heading}</EditableText>
-        </h1>
-      )}
-
-      {subheading !== undefined && (
-        <h2 className="font-heading text-[38px] leading-[1.25] font-normal text-[var(--deck-ink-muted)] [text-transform:var(--subheading-text-transform)]">
-          <EditableText path={at("subheading")}>{subheading}</EditableText>
-        </h2>
-      )}
-
-      {paragraphs !== undefined && paragraphs.length > 0 && (
-        <div className="flex max-w-[1000px] flex-col gap-[18px] self-[var(--deck-align,start)]">
-          {paragraphs.map((paragraph, i) => (
-            <p key={i} className="text-[26px] leading-[1.6] text-[var(--deck-ink-muted)]">
-              <InlineText value={paragraph} path={at("paragraphs", i)} />
-            </p>
-          ))}
-        </div>
-      )}
-
-      {bullets !== undefined && bullets.length > 0 && (
-        <ul className="flex flex-col gap-[16px] self-[var(--deck-align,start)] text-left">
-          {bullets.map((bullet, i) => (
-            <li key={i} className="flex items-start gap-[18px] text-[26px] leading-[1.45] text-[var(--deck-ink)]">
-              <span aria-hidden="true" className="mt-[14px] size-[10px] shrink-0 rounded-full bg-[var(--deck-accent)]" />
-              <span>
-                <InlineText value={bullet} path={at("bullets", i)} />
-              </span>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

package/src/deck/components/DeckVideo.tsx

@@ -1,81 +0,0 @@
-import { Play } from "lucide-react";
-import { useRef, useState } from "react";
-import type { DeckVideo as DeckVideoContent } from "../../schemas/deck";
-import { DeckMissingMedia, useDeckMedia } from "../media";
-import { DECK_ELEVATION, surfaceInk } from "../tokens";
-
-interface Props {
-  content: DeckVideoContent;
-}
-
-/**
- * Deck Component — video.
- *
- * Two states: a poster with a play affordance, and playback with the browser's
- * own controls. Nothing custom drives the media element once it is playing —
- * a presenter needs scrubbing and volume, and native controls are the ones
- * their keyboard already knows.
- */
-export function DeckVideo({ content }: Props) {
-  const asset = useDeckMedia(content.media);
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [playing, setPlaying] = useState(false);
-
-  const start = () => {
-    setPlaying(true);
-    // Rejects when the source is unplayable (wrong codec, a media id whose
-    // bytes are gone) — the poster is already dismissed, so just don't leave
-    // an unhandled rejection behind.
-    videoRef.current?.play()?.catch(() => undefined);
-  };
-
-  return (
-    <div
-      data-deck-component="video"
-      data-deck-video-state={playing ? "playing" : "idle"}
-      style={DECK_ELEVATION}
-      className="relative size-full overflow-hidden bg-base-200"
-    >
-      {asset === null ? (
-        <DeckMissingMedia />
-      ) : (
-        <video
-          ref={videoRef}
-          src={asset.src}
-          poster={asset.poster}
-          // Nothing is fetched until the poster is dismissed: a deck is mostly
-          // slides you never reach, and the poster is an explicit URL anyway.
-          preload="none"
-          playsInline
-          controls={playing}
-          onEnded={() => setPlaying(false)}
-          className="size-full object-cover"
-        />
-      )}
-
-      {!playing && asset !== null && (
-        <button
-          type="button"
-          data-deck-video-play=""
-          onClick={start}
-          aria-label={content.title === undefined ? "Play video" : `Play ${content.title}`}
-          className="group absolute inset-0 grid cursor-pointer place-items-center"
-        >
-          <span className="grid size-[108px] place-items-center rounded-full bg-primary text-[var(--color-on-primary)] shadow-[var(--deck-lift)] transition-transform duration-200 group-hover:scale-105">
-            <Play aria-hidden="true" className="ml-[6px] size-[44px] fill-current" />
-          </span>
-        </button>
-      )}
-
-      {!playing && content.title !== undefined && (
-        <span
-          data-deck-surface="brand"
-          style={surfaceInk("brand")}
-          className="pointer-events-none absolute right-0 bottom-0 left-0 bg-primary px-[28px] py-[18px] text-[18px] tracking-[0.06em] text-[var(--deck-ink)] [text-transform:var(--nav-text-transform)]"
-        >
-          {content.title}
-        </span>
-      )}
-    </div>
-  );
-}

package/src/deck/editing.tsx

@@ -1,201 +0,0 @@
-import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
-import type { DeckTextPath } from "../lib/deck-edit";
-
-/**
- * The runtime's inline-editing seam (#39).
- *
- * Editing happens INSIDE the real renderer rather than in an overlay that
- * imitates it, which is the only way "renders identically on blur" is true
- * rather than approximately true — the element the author types into is the
- * element the deck ships with.
- *
- * The seam is a context that defaults to null, so every read-only surface — a
- * filmstrip thumbnail, an in-portal deck view, the Public Link route — renders
- * exactly the markup it rendered before this file existed, with no affordance
- * and no listeners. Providing the context is an explicit act, performed in one
- * place (`DeckSlideSurface`).
- */
-
-export interface DeckTextEditor {
-  /** Commit a leaf edit. The provider owns validation and staging. */
-  onEditText: (path: DeckTextPath, text: string) => void;
-  /**
-   * Locked while a chat turn is in flight: a turn rewrites the WHOLE deck
-   * (ADR 0001), so an edit committed mid-stream would be written over by the
-   * turn's own `putDeckDraft` with nothing anywhere saying so.
-   */
-  disabled?: boolean;
-}
-
-const DeckTextEditContext = createContext<DeckTextEditor | null>(null);
-
-export function DeckTextEditProvider({ editor, children }: { editor: DeckTextEditor | null; children: ReactNode }) {
-  return <DeckTextEditContext.Provider value={editor}>{children}</DeckTextEditContext.Provider>;
-}
-
-export function useDeckTextEditor(): DeckTextEditor | null {
-  return useContext(DeckTextEditContext);
-}
-
-interface EditableTextProps {
-  /** Absent when the enclosing component was rendered without a slot — i.e. by
-   *  a surface that never carries an edit seam. Renders inert. */
-  path?: DeckTextPath;
-  /** The leaf's current text. Always a plain string; that is the schema's shape. */
-  children: string;
-}
-
-/**
- * One editable text leaf, or plain text when there is no editor.
- *
- * The two states are DIFFERENT ELEMENTS on purpose. React does not manage the
- * text of a `contentEditable` node it has no children for, so the field can be
- * written to freely while it is open, and swapping back to a React-rendered
- * span on commit is what makes the committed value the one that renders — no
- * reconciliation against a DOM the author mutated behind React's back.
- */
-export function EditableText({ path, children }: EditableTextProps) {
-  const editor = useDeckTextEditor();
-  const [editing, setEditing] = useState(false);
-
-  const enabled = editor !== null && path !== undefined && editor.disabled !== true;
-
-  // Losing the seam mid-edit (a chat turn starting, the surface going
-  // read-only) closes the field rather than leaving an orphaned editable node.
-  useEffect(() => {
-    if (!enabled && editing) setEditing(false);
-  }, [enabled, editing]);
-
-  if (editor === null || path === undefined) return <>{children}</>;
-
-  if (editing && enabled) {
-    return (
-      <EditableField
-        initial={children}
-        onCommit={(text) => {
-          setEditing(false);
-          // An emptied field is a cancel, not an edit: every one of these leaves
-          // is `min(1)` in the schema, so committing "" could only ever be
-          // refused — and refusing it with an error message would read as a
-          // failure rather than as "nothing happened".
-          const trimmed = text.trim();
-          if (trimmed !== "" && trimmed !== children) editor.onEditText(path, trimmed);
-        }}
-        onCancel={() => setEditing(false)}
-      />
-    );
-  }
-
-  return (
-    <span
-      role="button"
-      tabIndex={enabled ? 0 : -1}
-      aria-disabled={enabled ? undefined : true}
-      data-deck-editable=""
-      onClick={enabled ? () => setEditing(true) : undefined}
-      onKeyDown={
-        enabled
-          ? (event) => {
-              if (event.key !== "Enter" && event.key !== " ") return;
-              event.preventDefault();
-              setEditing(true);
-            }
-          : undefined
-      }
-      className={
-        enabled
-          ? "cursor-text rounded-[var(--radius-inner)] decoration-dotted underline-offset-[6px] outline-none hover:underline focus-visible:underline"
-          : "opacity-70"
-      }
-    >
-      {children}
-    </span>
-  );
-}
-
-/**
- * The open field. Rendered with no React children so React never fights the
- * author for the node's text; the initial value is written once on mount.
- */
-function EditableField({
-  initial,
-  onCommit,
-  onCancel,
-}: {
-  initial: string;
-  onCommit: (text: string) => void;
-  onCancel: () => void;
-}) {
-  const ref = useRef<HTMLSpanElement>(null);
-  // Escape has to beat the blur that follows it, and blur reads this ref rather
-  // than state because the two happen in the same tick.
-  const cancelled = useRef(false);
-
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-    element.textContent = initial;
-    element.focus();
-    const selection = window.getSelection?.();
-    if (selection) {
-      const range = document.createRange();
-      range.selectNodeContents(element);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    }
-  }, [initial]);
-
-  return (
-    <span
-      ref={ref}
-      contentEditable
-      suppressContentEditableWarning
-      role="textbox"
-      aria-label="Edit text"
-      spellCheck
-      data-deck-editing=""
-      onKeyDown={(event) => {
-        // Mid-composition, Enter and Escape belong to the IME: Enter accepts a
-        // conversion candidate and Escape abandons it. Committing or cancelling
-        // the field there cuts a CJK author off mid-word.
-        if (event.nativeEvent.isComposing) return;
-        if (event.key === "Enter") {
-          // A deck text leaf is one line in the schema, so Enter means "done",
-          // not "newline" — the layouts own line breaking.
-          event.preventDefault();
-          event.currentTarget.blur();
-          return;
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          cancelled.current = true;
-          event.currentTarget.blur();
-        }
-      }}
-      onPaste={(event) => {
-        // A deck text leaf is a plain string, and the field yields `textContent`
-        // — so pasted markup would show live formatting that vanishes on blur,
-        // and pasted block elements would join with no separator at all
-        // (`<div>a</div><div>b</div>` reads back as "ab"). Take the plain text
-        // and flatten its line breaks to spaces, which is what a one-line field
-        // can honestly hold.
-        event.preventDefault();
-        const text = event.clipboardData.getData("text/plain").replace(/\s+/g, " ").trim();
-        const doc = event.currentTarget.ownerDocument;
-        // Guarded because jsdom does not implement it; `insertText` is used
-        // rather than a Selection-API splice because it is what keeps the
-        // field's native undo stack intact.
-        if (text !== "" && typeof doc.execCommand === "function") doc.execCommand("insertText", false, text);
-      }}
-      onBlur={(event) => {
-        if (cancelled.current) {
-          cancelled.current = false;
-          onCancel();
-          return;
-        }
-        onCommit(event.currentTarget.textContent ?? "");
-      }}
-      className="rounded-[var(--radius-inner)] outline-2 outline-offset-2 outline-[var(--deck-accent)]"
-    />
-  );
-}