@kitn.ai/ui 0.28.0 → 0.29.0

package/src/components/coachmark.tsx

@@ -1,249 +0,0 @@
-import { createSignal, createUniqueId, createEffect, onCleanup, Show, type Accessor, type JSX } from 'solid-js';
-import { Portal } from 'solid-js/web';
-import { X } from 'lucide-solid';
-import type { Placement } from '@floating-ui/dom';
-import { cn } from '../utils/cn';
-import { useChatConfig } from '../primitives/chat-config';
-import { createPresence, usePosition } from '../ui/overlay';
-
-/** Imperative open controller, handed to the kai-coachmark facade via
- *  `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
-export interface CoachmarkController {
-  open: Accessor<boolean>;
-  setOpen: (v: boolean) => void;
-}
-
-export interface CoachmarkProps {
-  /** The anchor/trigger (the default slot). The bubble is positioned against it. */
-  children?: JSX.Element;
-  /** The bubble body text (the `content` slot). */
-  content?: JSX.Element;
-  /** The bold title. NOT `title` — that is a reserved IDL attr (see define.tsx). */
-  headline?: JSX.Element;
-  /** A small badge pill (e.g. "New"). */
-  badge?: JSX.Element;
-  /** Floating placement relative to the anchor. Defaults to `'bottom'`. */
-  placement?: Placement;
-  /** Color tone: `primary` (default, theme accent), `info` (blue), `success`
-   *  (green), `warning` (amber), or `error` (red) — reusing the kit's tool hues. */
-  tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';
-  /** Controlled open state. When set, the component never changes it itself;
-   *  drive it from `onOpenChange`. Omit for uncontrolled (internal) state. */
-  open?: boolean;
-  /** Initial open state when uncontrolled. */
-  defaultOpen?: boolean;
-  /** Fires whenever open wants to change (the × button / a method). */
-  onOpenChange?: (open: boolean) => void;
-  /** Dismiss intent: the × button. */
-  onDismiss?: () => void;
-  /** Render the arrow that points at the anchor. Defaults to `true`; set `false`
-   *  for a plain bubble with no pointer. */
-  arrow?: boolean;
-  /** Receive the open controller once mounted. */
-  controllerRef?: (api: CoachmarkController) => void;
-}
-
-/** Map a (post flip/shift) placement side to the bubble edge the arrow sits on. */
-const STATIC_SIDE: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left',
-};
-
-/** DEFAULT bubble colors per `tone`. `info` is the blue onboarding look (white
- *  text). These seed the `--kai-coachmark-bg` / `--kai-coachmark-fg` custom
- *  properties. A consumer can override those in CSS (e.g. `kai-coachmark {
- *  --kai-coachmark-bg: var(--color-tool-blue) }`) to recolor the bubble, arrow,
- *  and text in one place, persistently, without touching `tone`. */
-const TONE_DEFAULTS = {
-  primary: { bg: 'var(--color-primary)', fg: 'var(--color-primary-foreground)' },
-  info: { bg: 'var(--color-tool-blue)', fg: '#fff' },
-  success: { bg: 'var(--color-tool-green)', fg: '#fff' },
-  // Light amber surface + near-black foreground. --color-warning is a dark amber in
-  // light mode (#935f06) and a bright amber in dark mode, both too saturated for
-  // white/cream text at 85% opacity to hit 4.5:1. --color-warning-soft (14% warning
-  // blended into the page background) gives a light tint in light mode and a dark
-  // tint in dark mode; --color-foreground (near-black in light, near-white in dark)
-  // provides >10:1 on the soft surface — still >>4.5:1 at text-current/85 opacity.
-  warning: { bg: 'var(--color-warning-soft)', fg: 'var(--color-foreground)' },
-  error: { bg: 'var(--color-tool-red)', fg: '#fff' },
-} as const;
-
-// The dismiss/badge/content sub-elements derive from the bubble's foreground via
-// `currentColor` (which inherits the resolved `--kai-coachmark-fg`), so they
-// follow the tone default OR any CSS override automatically (no per-tone class).
-const DISMISS_CLS = 'text-current/70 hover:bg-current/15 hover:text-current';
-const BADGE_CLS = 'bg-current/20';
-const CONTENT_CLS = 'text-current/85';
-
-/**
- * Coachmark is the presentational onboarding hint: a tinted bubble with an arrow,
- * anchored to a trigger. It wraps the anchor (the default slot) and positions the
- * bubble against it with `usePosition` (the shared Floating UI primitive) so the
- * arrow tracks the anchor on scroll/resize AND when a sibling reflows it,
- * flipping/shifting to stay on screen. The developer owns when it shows
- * (`open`/`default-open`); the ×, Escape, OR clicking the trigger fires
- * `onDismiss`. Color comes from `--kai-coachmark-bg` / `--kai-coachmark-fg` (each
- * defaulting to the `tone` palette), so a consumer can recolor purely in CSS; the
- * arrow reads the same bg var so it always continues the bubble.
- */
-export function Coachmark(props: CoachmarkProps) {
-  const config = useChatConfig();
-  const tone = () => TONE_DEFAULTS[props.tone ?? 'primary'];
-  const titleId = createUniqueId();
-  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
-  const [anchor, setAnchor] = createSignal<HTMLElement>();
-  const [bubble, setBubble] = createSignal<HTMLElement>();
-  const [arrowEl, setArrowEl] = createSignal<HTMLElement>();
-
-  const isControlled = () => props.open !== undefined;
-  const isOpen = () => (isControlled() ? !!props.open : internalOpen());
-  const setOpen = (v: boolean) => {
-    if (!isControlled()) setInternalOpen(v);
-    props.onOpenChange?.(v);
-  };
-
-  props.controllerRef?.({ open: isOpen, setOpen });
-
-  const presence = createPresence(isOpen);
-  const position = usePosition(anchor, bubble, {
-    placement: props.placement ?? 'bottom',
-    gutter: 10,
-    arrowEl,
-    // Anchor removed from the DOM -> close so the bubble portal doesn't orphan.
-    onDisconnect: () => setOpen(false),
-  });
-
-  // The bubble edge the arrow sits on, derived from the resolved (post flip/shift)
-  // placement.
-  const arrowSide = () => STATIC_SIDE[position.pos().placement.split('-')[0]] ?? 'top';
-
-  const dismiss = () => {
-    setOpen(false);
-    props.onDismiss?.();
-  };
-
-  // Clicking the trigger dismisses the hint (alongside the × and Escape): the
-  // consumer engaged with what the hint points at, so it has done its job. A
-  // native listener (not preventing default or stopping propagation) so the
-  // trigger's own click still fires, and so it works for a slotted trigger in the
-  // web component. Only acts while open so it never re-fires onDismiss when shut.
-  createEffect(() => {
-    const el = anchor();
-    if (!el) return;
-    const onClick = () => { if (isOpen()) dismiss(); };
-    el.addEventListener('click', onClick);
-    onCleanup(() => el.removeEventListener('click', onClick));
-  });
-
-  return (
-    <>
-      {/* The anchor wrapper. inline-FLEX (not inline-block) so it hugs the trigger
-          it positions against WITHOUT the baseline strut: an inline-block sits on
-          the host line box's baseline, which reserves descender space below it
-          (line-height 24px), making the host ~6px taller than the trigger and
-          anchoring the trigger to the top, so in a flex toolbar (items-center) the
-          trigger renders a few px above the other controls. inline-flex +
-          vertical-align:middle decouples from that baseline so the wrapper hugs the
-          trigger's true height and stays centered. The trigger-click dismissal is
-          wired as a NATIVE listener on this element (see the effect below) rather
-          than a Solid-delegated onClick, so it also fires for a trigger projected
-          through the <slot/> in the web component (Solid's delegation walks
-          parentNode, which for slotted content stays in the light DOM and never
-          reaches this shadow ancestor). */}
-      <span ref={setAnchor} style={{ display: 'inline-flex', 'vertical-align': 'middle' }}>
-        {props.children}
-      </span>
-      <Show when={presence.present()}>
-        <Portal mount={config.portalMount()}>
-          <div
-            ref={(el) => { setBubble(el); presence.setRef(el); }}
-            part="bubble"
-            role="dialog"
-            aria-labelledby={titleId}
-            data-expanded={presence.state() === 'open' ? '' : undefined}
-            data-closed={presence.state() === 'closed' ? '' : undefined}
-            style={{
-              position: 'fixed',
-              left: `${position.pos().x}px`,
-              top: `${position.pos().y}px`,
-              visibility: position.hidden() ? 'hidden' : 'visible',
-              // Color via CSS vars: defaults to the `tone` palette, overridable in
-              // CSS. The text color is inherited by every child (dismiss/badge/
-              // content read it through currentColor).
-              background: `var(--kai-coachmark-bg, ${tone().bg})`,
-              color: `var(--kai-coachmark-fg, ${tone().fg})`,
-            }}
-            class={cn(
-              'z-50 w-64 rounded-lg p-3 pr-8 text-sm kai-elevation',
-              'animate-in fade-in-0 zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95',
-            )}
-          >
-            {/* The arrow: a rotated square inheriting the bubble bg. usePosition
-                writes its offset-axis position (x for top/bottom placements, y for
-                left/right); the static side (`-4px`) pins it to the bubble edge
-                facing the anchor so it pokes out as a pointer.
-
-                Each side is an EXPLICIT, static key. Do NOT collapse this to a
-                computed `[arrowSide()]: '-4px'` key: Solid compiles `style={{…}}`
-                object literals to per-property setStyleProperty calls at build time
-                and silently DROPS dynamic/computed keys, so the offset never
-                reaches the DOM and the arrow sinks into the bubble's padding box
-                (invisible against the matching background). */}
-            <Show when={props.arrow !== false}>
-              <div
-                ref={setArrowEl}
-                part="arrow"
-                aria-hidden="true"
-                class="absolute size-2 rotate-45"
-                style={{
-                  left: arrowSide() === 'left' ? '-4px'
-                    : position.arrowPos().x != null ? `${position.arrowPos().x}px` : '',
-                  top: arrowSide() === 'top' ? '-4px'
-                    : position.arrowPos().y != null ? `${position.arrowPos().y}px` : '',
-                  right: arrowSide() === 'right' ? '-4px' : '',
-                  bottom: arrowSide() === 'bottom' ? '-4px' : '',
-                  // Same bg var as the bubble so the arrow always reads as part of it.
-                  background: `var(--kai-coachmark-bg, ${tone().bg})`,
-                }}
-              />
-            </Show>
-
-            <button
-              type="button"
-              part="dismiss"
-              aria-label="Dismiss"
-              onClick={dismiss}
-              class={cn('absolute right-2 top-2 inline-flex size-5 items-center justify-center rounded transition-colors', DISMISS_CLS)}
-            >
-              <X class="size-3.5" aria-hidden="true" />
-            </button>
-
-            <Show when={props.headline}>
-              <div class="flex items-center gap-2">
-                <span id={titleId} part="title" class="font-semibold leading-tight">
-                  {props.headline}
-                </span>
-                <Show when={props.badge}>
-                  <span
-                    part="badge"
-                    class={cn('inline-flex items-center rounded-full px-1.5 py-0.5 text-micro font-medium uppercase leading-none tracking-wide', BADGE_CLS)}
-                  >
-                    {props.badge}
-                  </span>
-                </Show>
-              </div>
-            </Show>
-
-            <Show when={props.content}>
-              <div class={cn(CONTENT_CLS, props.headline ? 'mt-1.5' : '')}>
-                {props.content}
-              </div>
-            </Show>
-          </div>
-        </Portal>
-      </Show>
-    </>
-  );
-}

package/src/components/code-block.tsx

@@ -1,181 +0,0 @@
-import { type JSX, splitProps, createResource, createSignal, onCleanup, Show } from 'solid-js';
-import { Copy, Check } from 'lucide-solid';
-import { cn } from '../utils/cn';
-import { useChatConfig } from '../primitives/chat-config';
-import { highlight, isCodeHighlightingEnabled } from '../primitives/highlighter';
-
-// --- CodeBlock (Root) ---
-
-export interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children?: JSX.Element;
-  /**
-   * Render a copy button in a header row above the code.
-   *
-   * DEFAULT OFF, and deliberately. This component is shared by three surfaces —
-   * `markdown.tsx` (every fenced block in every assistant message), `artifact.tsx`
-   * (the code panel), and the `<kai-code-block>` facade — and only the ELEMENT is
-   * documented as shipping a copy button. Defaulting on would add one to every code
-   * block in every message, a kit-wide visible change. The facade opts in; the other
-   * two are untouched, which `tests/elements/code-block.test.tsx` pins both
-   * behaviourally and at the call sites.
-   */
-  copy?: boolean;
-  /**
-   * The exact text the copy button puts on the clipboard.
-   *
-   * Named for what it DOES rather than what it holds, because the distinction is the
-   * whole contract: by the time the button is clicked the source has been through
-   * Shiki, so anything read back out of the DOM is either `<span>`-laden HTML or a
-   * `textContent` reconstruction — and the reconstruction is where tabs, blank lines
-   * and trailing newlines quietly change. This prop never goes near the highlighter.
-   */
-  copyText?: string;
-}
-
-/** How long the button stays in its acknowledged state. Matches MessageCopyButton. */
-const COPIED_MS = 2000;
-
-function CodeBlockCopyButton(props: { text: string }) {
-  const [copied, setCopied] = createSignal(false);
-  let timer: ReturnType<typeof setTimeout> | undefined;
-  // A click just before unmount would otherwise set state on a disposed owner.
-  onCleanup(() => clearTimeout(timer));
-
-  return (
-    <button
-      type="button"
-      part="copy"
-      // The name carries the state, so a screen-reader user gets the same
-      // acknowledgement the icon swap gives a sighted one. The glyph is decorative.
-      aria-label={copied() ? 'Copied' : 'Copy code'}
-      class={cn(
-        'inline-flex items-center justify-center rounded-md p-1.5',
-        'text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-      )}
-      onClick={() => {
-        // Same mechanism as MessageCopyButton. A rejected promise (no permission,
-        // insecure context) must not become an unhandled rejection.
-        void Promise.resolve(navigator.clipboard?.writeText(props.text)).catch(() => {});
-        setCopied(true);
-        clearTimeout(timer);
-        timer = setTimeout(() => setCopied(false), COPIED_MS);
-      }}
-    >
-      <Show when={copied()} fallback={<Copy size={14} aria-hidden="true" />}>
-        <Check size={14} aria-hidden="true" class="text-emerald-500" />
-      </Show>
-    </button>
-  );
-}
-
-function CodeBlock(props: CodeBlockProps) {
-  const [local, rest] = splitProps(props, ['children', 'class', 'copy', 'copyText']);
-  return (
-    <div
-      class={cn(
-        'not-prose flex w-full flex-col overflow-clip border',
-        'border-border bg-card text-card-foreground',
-        // Radius is a CSS var (default = rounded-xl) so it can be set to 0 for
-        // flush embedding, e.g. under framework tabs in the docs Code panel.
-        'rounded-[var(--kai-code-radius,0.75rem)]',
-        local.class
-      )}
-      {...rest}
-    >
-      <Show when={local.copy}>
-        {/* A header row, NOT an overlay on the code: the code region scrolls
-            horizontally, so a button inside it would ride off-screen with the code.
-            Always visible — hover-only affordances fail touch outright and are
-            undiscoverable everywhere else. */}
-        <CodeBlockGroup class="justify-end border-b border-border px-2 py-1">
-          <CodeBlockCopyButton text={local.copyText ?? ''} />
-        </CodeBlockGroup>
-      </Show>
-      {local.children}
-    </div>
-  );
-}
-
-// --- CodeBlockCode ---
-
-export interface CodeBlockCodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  code: string;
-  language?: string;
-  theme?: string;
-}
-
-function CodeBlockCode(props: CodeBlockCodeProps) {
-  const [local, rest] = splitProps(props, ['code', 'language', 'theme', 'class']);
-  const config = useChatConfig();
-
-  const lang = () => local.language ?? 'tsx';
-  const theme = () => local.theme ?? config.codeTheme();
-  const highlightingOn = () => isCodeHighlightingEnabled() && config.codeHighlight();
-
-  // When highlighting is off, the source is null so the fetcher never runs and
-  // no Shiki code is ever imported — the plain `<pre>` fallback renders instead.
-  const [highlighted] = createResource(
-    () => (highlightingOn() ? { code: local.code, lang: lang(), theme: theme() } : null),
-    (src) => highlight(src.code, src.lang, src.theme)
-  );
-
-  const codeTextSize = () => {
-    switch (config.proseSize()) {
-      case 'xs': return 'text-caption';
-      case 'sm': return 'text-compact';
-      case 'base': return 'text-sm';
-      case 'lg': return 'text-base';
-    }
-  };
-
-  const classNames = () =>
-    cn(
-      // `kai-focus-inset`: this region fills a rounded `overflow: clip` wrapper,
-      // so the default focus outline (offset 2px, i.e. entirely outside the
-      // border box) was clipped away and keyboard users saw nothing. The inset
-      // ring is drawn inside the box, where the wrapper cannot erase it.
-      'w-full overflow-x-auto kai-focus-inset [&>pre]:px-4 [&>pre]:py-4',
-      codeTextSize(),
-      local.class
-    );
-
-  return (
-    // `tabindex={0}` makes the horizontally-scrollable region reachable by
-    // keyboard (axe `scrollable-region-focusable`); `{...rest}` lets a consumer
-    // override it. No `role="region"` — that would demand an accessible name.
-    <Show
-      when={highlighted()}
-      fallback={
-        <div class={classNames()} tabindex={0} {...rest}>
-          <pre><code>{local.code}</code></pre>
-        </div>
-      }
-    >
-      <div class={classNames()} tabindex={0} innerHTML={highlighted()} {...rest} />
-    </Show>
-  );
-}
-
-// --- CodeBlockGroup ---
-
-export interface CodeBlockGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  children?: JSX.Element;
-}
-
-function CodeBlockGroup(props: CodeBlockGroupProps) {
-  const [local, rest] = splitProps(props, ['children', 'class']);
-  return (
-    <div
-      class={cn('flex items-center justify-between', local.class)}
-      {...rest}
-    >
-      {local.children}
-    </div>
-  );
-}
-
-// CodeBlockCopyButton is deliberately NOT exported: `src/index.ts` re-exports this
-// module's public trio, and adding a fourth symbol here that index.ts does not carry
-// would create a half-public component. It is an implementation detail of `copy`.
-export { CodeBlock, CodeBlockCode, CodeBlockGroup };

package/src/components/composer-dom.ts

@@ -1,159 +0,0 @@
-import type { EntityRef, ComposerDoc } from '../primitives/composer-model';
-import { normalizeValue } from '../primitives/composer-model';
-
-export const ZWSP = '​';
-export const ENTITY_ATTR = 'data-kai-entity';
-export const entityStore = new WeakMap<HTMLElement, EntityRef>();
-
-export function isEntityEl(node: Node | null): node is HTMLElement {
-  return !!node && node.nodeType === 1 && (node as HTMLElement).hasAttribute(ENTITY_ATTR);
-}
-
-/**
- * A TreeWalker over the editable's text nodes that SKIPS text inside entity
- * pills. Pills are atomic and contribute nothing to the text model — their inner
- * label text must not pollute caret offsets, trigger detection, or highlight
- * ranges. (Without this, the text seen at a caret right after a pill is the
- * pill's label, so `/` reads as glued to the label instead of starting a token.)
- */
-export function createTextWalker(root: HTMLElement): TreeWalker {
-  return root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-    acceptNode(node) {
-      let p = node.parentElement;
-      while (p && p !== root) {
-        if (p.hasAttribute(ENTITY_ATTR)) return NodeFilter.FILTER_REJECT;
-        p = p.parentElement;
-      }
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
-}
-
-/**
- * The leading sigil shown on a "light" pill, by kind: skills `/`, agents `@`.
- * Skills and agents render as decorated inline text led by their sigil; this is
- * what makes them read like `/my-skill` / `@my-agent` rather than a chip.
- * Returns '' for kinds rendered as a richer CHIP (plugins, and any other/unknown
- * kind) — those carry an icon instead of a sigil. The sigil is visual only: it
- * never enters the text model (the entity is read from `entityStore`, and the
- * text walker skips pill-internal nodes).
- */
-export function kindSigil(kind: string): string {
-  switch (kind) {
-    case 'skill':
-      return '/';
-    case 'agent':
-      return '@';
-    default:
-      return '';
-  }
-}
-
-/**
- * Default monochrome (currentColor) glyph per entity kind, for the richer CHIP
- * kinds shown in the trigger menu / on plugin pills: plugin = plug. (Skills and
- * agents are light sigil-text pills — see `kindSigil` — so they take no glyph on
- * the pill, though the menu may still show one.) Returns inline SVG markup
- * (trusted — no user input), or '' for kinds without a default. An item's own
- * `icon` always takes precedence over this.
- */
-export function kindGlyph(kind: string): string {
-  const svg = (inner: string) =>
-    `<svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`;
-  switch (kind) {
-    case 'agent':
-      return svg('<rect x="4" y="8" width="16" height="12" rx="3"/><path d="M12 4.5V8M9.5 13.5v1.5M14.5 13.5v1.5"/><circle cx="12" cy="3" r="1.2"/>');
-    case 'plugin':
-      return svg('<path d="M9 2v4M15 2v4M6 6h12v5a6 6 0 0 1-12 0zM12 17v5"/>');
-    default:
-      return ''; // skills + unknown kinds: no default glyph
-  }
-}
-
-export function createEntityEl(
-  doc: Document,
-  entity: EntityRef,
-  kindIcons?: Record<string, string>,
-): HTMLElement {
-  const el = doc.createElement('span');
-  el.setAttribute(ENTITY_ATTR, '');
-  el.setAttribute('contenteditable', 'false');
-  el.dataset.kind = entity.kind;
-  el.dataset.id = entity.id;
-  el.className = 'kai-composer-pill';
-
-  const sigil = kindSigil(entity.kind);
-  if (sigil) {
-    // Skills/agents: LIGHT pill — decorated inline text led by the sigil, no
-    // icon. (`/my-skill`, `@my-agent`.)
-    const s = doc.createElement('span');
-    s.className = 'kai-composer-pill-sigil';
-    s.setAttribute('aria-hidden', 'true');
-    s.textContent = sigil;
-    el.appendChild(s);
-  } else {
-    // Plugins (and other composite/unknown kinds): the richer CHIP, with an
-    // icon so a bundle reads differently from a skill/agent at a glance. Icon
-    // resolution: the item's own icon → per-kind default (kindIcons) → a
-    // built-in kind glyph (plugin) → nothing.
-    const iconSrc = entity.icon ?? kindIcons?.[entity.kind];
-    if (iconSrc) {
-      const img = doc.createElement('img');
-      img.src = iconSrc;
-      img.alt = '';
-      img.className = 'kai-composer-pill-icon';
-      el.appendChild(img);
-    } else {
-      const glyph = kindGlyph(entity.kind);
-      if (glyph) {
-        const span = doc.createElement('span');
-        span.className = 'kai-composer-pill-icon kai-composer-pill-glyph';
-        span.setAttribute('aria-hidden', 'true');
-        span.innerHTML = glyph; // trusted SVG markup (not user input)
-        el.appendChild(span);
-      }
-    }
-  }
-  el.appendChild(doc.createTextNode(entity.label));
-  entityStore.set(el, entity);
-  return el;
-}
-
-export function parseDom(root: HTMLElement): ComposerDoc {
-  const segs: ComposerDoc = [];
-  const nodes = root.childNodes;
-  nodes.forEach((node, i) => {
-    if (isEntityEl(node)) {
-      const stored = entityStore.get(node as HTMLElement);
-      const el = node as HTMLElement;
-      segs.push({ type: 'entity', entity: stored ?? { kind: el.dataset.kind ?? '', id: el.dataset.id ?? '', label: el.textContent ?? '' } });
-    } else if (node.nodeType === 1 && (node as HTMLElement).tagName === 'BR') {
-      // Drop the browser's trailing filler <br> — contenteditable inserts one when
-      // the field is cleared (or after a newline) to keep the line visible. Treating
-      // it as content would leave the field "non-empty" (placeholder stuck hidden)
-      // and serialize a phantom trailing "\n". A <br> BETWEEN content is a real
-      // newline and is preserved.
-      if (i === nodes.length - 1) return;
-      segs.push({ type: 'text', text: '\n' });
-    } else if (node.nodeType === 3) {
-      segs.push({ type: 'text', text: (node.textContent ?? '').split(ZWSP).join('') });
-    }
-  });
-  return normalizeValue(segs);
-}
-
-export function renderDoc(
-  root: HTMLElement,
-  doc: ComposerDoc,
-  ownerDoc: Document = document,
-  kindIcons?: Record<string, string>,
-): void {
-  root.textContent = '';
-  for (const seg of doc) {
-    if (seg.type === 'text') root.appendChild(ownerDoc.createTextNode(seg.text));
-    else {
-      root.appendChild(createEntityEl(ownerDoc, seg.entity, kindIcons));
-      root.appendChild(ownerDoc.createTextNode(ZWSP));
-    }
-  }
-}