@ai-composer/dom 0.0.0-stage → 0.1.0

package/src/mount.ts

@@ -0,0 +1,218 @@
+/**
+ * Vanilla JS mount — proves the stack works with zero framework. Builds the
+ * DOM once (every slot exists), then applies the mode's structural preset and
+ * re-applies it live when the editor's mode changes — the draft, focus and
+ * undo history survive a compact ↔ chat ↔ expanded switch.
+ */
+
+import type { AIComposer, SuggestionItem, Unsubscribe } from '@ai-composer/core';
+import { createEditableSurface, type EditableSurface } from './surface';
+import { createSuggestionList } from './suggestions';
+import { createIcon, createSpinner } from './icons';
+import { templateForMode, SLOT_ATTRIBUTE, type AIComposerDomTemplate } from './template';
+
+export interface MountOptions {
+  /** Initial mode preset; can be changed later via `editor.setMode()`. */
+  mode?: string;
+  /** Replace the structural preset (static — not mode-switched). */
+  template?: AIComposerDomTemplate;
+  /**
+   * Force slots on regardless of the mode preset (projection-friendly):
+   * attachments/header/toolbar/footer stay mountable in compact too.
+   */
+  showSlots?: Array<'header' | 'attachments' | 'toolbar' | 'footer'>;
+  /**
+   * Auto-height ceiling — any CSS length ("160px", "40vh"). The box grows
+   * with content up to this height, then scrolls inside.
+   * Equivalent to the `--aic-input-max-height` token.
+   */
+  maxHeight?: string;
+  /** Custom suggestion item renderer. */
+  renderSuggestionItem?: (item: SuggestionItem, active: boolean) => HTMLElement;
+  labels?: { removeAttachment?: string };
+}
+
+export interface MountedEditor {
+  root: HTMLElement;
+  input: HTMLElement;
+  suggestions: HTMLElement;
+  surface: EditableSurface;
+  slots: Record<string, HTMLElement>;
+  destroy(): void;
+}
+
+export function mountAIComposer(
+  container: HTMLElement,
+  editor: AIComposer,
+  options: MountOptions = {},
+): MountedEditor {
+  const labels = {
+    removeAttachment: options.labels?.removeAttachment ?? 'Remove',
+  };
+
+  const slots: Record<string, HTMLElement> = {};
+  const disposables: Unsubscribe[] = [];
+
+  const makeSlot = (name: string, className: string): HTMLElement => {
+    const element = document.createElement('div');
+    element.className = className;
+    element.setAttribute(SLOT_ATTRIBUTE, name);
+    slots[name] = element;
+    return element;
+  };
+
+  const root = container;
+  root.classList.add('aic-root');
+  if (options.maxHeight) {
+    root.style.setProperty('--aic-input-max-height', options.maxHeight);
+  }
+
+  const header = makeSlot('header', 'aic-header');
+  const body = makeSlot('body', 'aic-body');
+  const toolbar = makeSlot('toolbar', 'aic-toolbar');
+  const footer = makeSlot('footer', 'aic-footer');
+  const attachments = makeSlot('attachments', 'aic-attachments');
+  const input = makeSlot('input', 'aic-input-host');
+
+  root.append(header, body, toolbar, footer);
+
+  // The input wrapper is the popup anchor: it occupies exactly the input's
+  // space — the suggestion list floats out of it (no DOM-space reservation).
+  const inputWrap = document.createElement('div');
+  inputWrap.className = 'aic-input-wrap';
+  inputWrap.setAttribute(SLOT_ATTRIBUTE, 'suggestions');
+  inputWrap.appendChild(input);
+  slots.suggestions = inputWrap;
+  body.append(attachments, inputWrap);
+
+  const surface = createEditableSurface(editor, input, { id: input.id || undefined });
+
+  const suggestionList = createSuggestionList(editor, undefined, {
+    renderItem: options.renderSuggestionItem,
+    inputHost: input,
+  });
+  inputWrap.appendChild(suggestionList.element);
+
+  // -- mode presets ----------------------------------------------------------
+
+  const applyTemplate = (mode: string): void => {
+    const template = options.template ?? templateForMode(mode);
+    const present = new Set(template.slots);
+    for (const slotName of options.showSlots ?? []) present.add(slotName);
+
+    root.setAttribute('data-aic-mode', template.name);
+    header.hidden = !present.has('header');
+    toolbar.hidden = !present.has('toolbar');
+    footer.hidden = !present.has('footer');
+    surface.setMultiline(template.multiline);
+    surface.setSubmitKey(template.submitKey);
+
+    if (toolbar) {
+      toolbar.textContent = '';
+      for (const action of template.toolbarButtons ?? []) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = `aic-toolbar-${action}`;
+        button.setAttribute('data-aic-action', action);
+        if (action === 'submit') {
+          button.appendChild(createIcon('send'));
+          button.setAttribute('aria-label', 'Send');
+          button.addEventListener('click', () => void editor.executeCommand('submit'));
+        } else if (action === 'undo') {
+          button.appendChild(createIcon('undo'));
+          button.setAttribute('aria-label', 'Undo');
+          button.addEventListener('click', () => void editor.executeCommand('undo'));
+        } else {
+          button.appendChild(createIcon('redo'));
+          button.setAttribute('aria-label', 'Redo');
+          button.addEventListener('click', () => void editor.executeCommand('redo'));
+        }
+        toolbar.appendChild(button);
+      }
+    }
+  };
+
+  // -- state-driven UI -------------------------------------------------------
+
+  let currentMode = '';
+  const syncUi = (state: ReturnType<AIComposer['getState']>): void => {
+    if (state.mode !== currentMode) {
+      currentMode = state.mode;
+      applyTemplate(state.mode);
+    }
+
+    const submit = toolbar.querySelector<HTMLButtonElement>('[data-aic-action="submit"]');
+    if (submit) {
+      const canSubmit =
+        !state.disabled && !state.readonly && !state.submitting &&
+        (!state.empty || state.attachments.length > 0);
+      submit.disabled = !canSubmit;
+      submit.setAttribute('aria-disabled', String(!canSubmit));
+      if (state.submitting) {
+        if (!submit.querySelector('.aic-spinner')) {
+          submit.textContent = '';
+          submit.appendChild(createSpinner());
+        }
+      } else if (!submit.querySelector('svg')) {
+        submit.textContent = '';
+        submit.appendChild(createIcon('send'));
+      }
+    }
+    const undo = toolbar.querySelector<HTMLButtonElement>('[data-aic-action="undo"]');
+    if (undo) undo.disabled = !state.canUndo;
+    const redo = toolbar.querySelector<HTMLButtonElement>('[data-aic-action="redo"]');
+    if (redo) redo.disabled = !state.canRedo;
+
+    // Attachments are projection-friendly: visible whenever they exist,
+    // regardless of the mode preset (apps add them via editor.addAttachment).
+    attachments.hidden = state.attachments.length === 0;
+    attachments.textContent = '';
+    for (const attachment of state.attachments) {
+      const item = document.createElement('span');
+      item.className = 'aic-attachment';
+      const name = document.createElement('span');
+      name.className = 'aic-attachment-name';
+      name.textContent = attachment.name;
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.className = 'aic-attachment-remove';
+      remove.setAttribute('aria-label', `${labels.removeAttachment} ${attachment.name}`);
+      remove.appendChild(createIcon('close', 12));
+      remove.addEventListener('click', () => editor.removeNode(attachment.key));
+      item.append(name, remove);
+      attachments.appendChild(item);
+    }
+  };
+  const unsubscribeState = editor.subscribe(syncUi);
+  disposables.push(unsubscribeState);
+
+  if (options.mode && options.mode !== editor.getState().mode) {
+    editor.setMode(options.mode);
+  }
+  // setMode emits to subscribers; ensure the initial template is applied even
+  // when the editor was already in the target mode.
+  currentMode = editor.getState().mode;
+  applyTemplate(currentMode);
+  syncUi(editor.getState());
+
+  const offDestroy = editor.on('destroy', () => mounted.destroy());
+  disposables.push(offDestroy);
+
+  const mounted: MountedEditor = {
+    root,
+    input,
+    suggestions: suggestionList.element,
+    surface,
+    slots,
+    destroy() {
+      for (const dispose of disposables.splice(0)) dispose();
+      suggestionList.destroy();
+      surface.destroy();
+      root.textContent = '';
+      root.classList.remove('aic-root');
+      root.removeAttribute('data-aic-mode');
+    },
+  };
+
+  return mounted;
+}

package/src/parse.ts

@@ -0,0 +1,135 @@
+/**
+ * DOM → model parsing with strict sanitization: only elements we generate
+ * (data-aic-node chips) survive as structured nodes — everything else is
+ * flattened to plain text (see the serialization ADR).
+ */
+
+import {
+  createDocument,
+  createNodeKey,
+  type NodeRegistry,
+  type AIComposerNode,
+  type TextNode,
+} from '@ai-composer/core';
+
+const INTERNAL_CLIP_MIME = 'application/x-ai-composer';
+
+function textNode(text: string, previous?: TextNode): TextNode {
+  if (previous) return { ...previous, text: previous.text + text };
+  return { type: 'text', key: createNodeKey('text'), text };
+}
+
+/** Parse the editable host back into a document. Never trusts markup: unknown nodes collapse to text. */
+export function parseEditableHost(host: HTMLElement, registry: NodeRegistry): ReturnType<typeof createDocument> {
+  const nodes: AIComposerNode[] = [];
+
+  const appendText = (text: string): void => {
+    if (!text) return;
+    const last = nodes[nodes.length - 1];
+    if (last && last.type === 'text') nodes[nodes.length - 1] = textNode(text, last);
+    else nodes.push(textNode(text));
+  };
+
+  const walk = (parent: Node): void => {
+    for (const child of Array.from(parent.childNodes)) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        appendText(child.textContent ?? '');
+        continue;
+      }
+      if (child.nodeName === 'BR') {
+        appendText('\n');
+        continue;
+      }
+      if (child instanceof HTMLElement) {
+        // Never surface executable/style content as text.
+        if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') continue;
+        const type = child.getAttribute('data-aic-node');
+        const parsed = type ? chipFromElement(child, type, registry) : null;
+        if (parsed) {
+          nodes.push(parsed);
+          continue;
+        }
+        // Unknown wrapper (browser artifact, pasted markup) — flatten to text only.
+        walk(child);
+      }
+      // Comments and other node types are dropped.
+    }
+  };
+
+  walk(host);
+  return createDocument(nodes);
+}
+
+function chipFromElement(element: HTMLElement, type: string, registry: NodeRegistry): AIComposerNode | null {
+  if (!registry.has(type)) return null;
+  const key = element.getAttribute('data-aic-key') ?? createNodeKey(type);
+  const attr = (name: string): string | null => element.getAttribute(`data-aic-${name}`);
+
+  switch (type) {
+    case 'mention':
+    case 'command': {
+      const id = attr('id');
+      const label = attr('label');
+      if (!id || !label) return null;
+      return type === 'mention'
+        ? { type: 'mention', key, id, label }
+        : { type: 'command', key, id, label };
+    }
+    case 'variable': {
+      const name = attr('name');
+      if (!name) return null;
+      return { type: 'variable', key, name };
+    }
+    case 'attachment': {
+      const id = attr('id');
+      const name = attr('name');
+      const mimeType = attr('mime') ?? 'application/octet-stream';
+      if (!id || !name) return null;
+      const sizeAttr = attr('size');
+      const size = sizeAttr ? Number(sizeAttr) : undefined;
+      return { type: 'attachment', key, id, name, mimeType, ...(Number.isFinite(size) ? { size } : {}) };
+    }
+    case 'custom': {
+      const plugin = attr('plugin');
+      const nodeType = attr('type');
+      if (!plugin || !nodeType) return null;
+      let data: unknown = null;
+      try {
+        data = JSON.parse(attr('data') ?? 'null');
+      } catch {
+        data = null;
+      }
+      return { type: 'custom', key, plugin, nodeType, data };
+    }
+    default:
+      // Registered custom node types without a known chip shape degrade to text.
+      return null;
+  }
+}
+
+/** Extract safe plain text from arbitrary HTML (paste path). Tags are dropped, <br> becomes \n. */
+export function htmlToPlainText(html: string): string {
+  const container = document.createElement('div');
+  container.innerHTML = html; // parsed, never inserted into the page
+  let text = '';
+  const walk = (parent: Node): void => {
+    for (const child of Array.from(parent.childNodes)) {
+      if (child.nodeType === Node.TEXT_NODE) text += child.textContent ?? '';
+      else if (child.nodeName === 'BR') text += '\n';
+      else if (child.nodeType === Node.ELEMENT_NODE) {
+        const element = child as HTMLElement;
+        if (element.tagName === 'DIV' || element.tagName === 'P') {
+          walk(element);
+          text += '\n';
+        } else {
+          walk(element);
+        }
+      }
+    }
+  };
+  walk(container);
+  return text;
+}
+
+/** Clipboard mime used for lossless internal copy/paste round-trips. */
+export const CLIPBOARD_MIME = INTERNAL_CLIP_MIME;

package/src/popup.ts

@@ -0,0 +1,153 @@
+/**
+ * Caret-anchored popup positioning. The suggestion menu opens where the
+ * trigger key (@, /, …) was hit — not just above the box — and reflows:
+ *
+ *   - horizontal: popup's left edge follows the caret, clamped into the
+ *     viewport so it never opens out of the window
+ *   - vertical: prefers `placement` (Copilot-style: above), flips to the
+ *     other side when the viewport lacks room, caps its max-height to the
+ *     available space and scrolls inside
+ *   - repositions on window resize and on any scroll (capture) while open
+ *
+ * The popup must live inside a positioned ancestor (`.aic-input-wrap`) —
+ * coordinates are computed relative to that offset parent each update.
+ */
+
+export interface CaretPoint {
+  /** Viewport x of the caret. */
+  x: number;
+  /** Viewport y of the caret line's top / bottom. */
+  top: number;
+  bottom: number;
+}
+
+export interface CaretAnchor {
+  /** Recompute position (call after content/visibility changes). */
+  update(): void;
+  destroy(): void;
+}
+
+export interface CaretAnchorOptions {
+  /** Preferred side; flips automatically when the viewport lacks room. */
+  placement?: 'above' | 'below';
+}
+
+const GAP = 6;
+const EDGE = 8;
+
+/** Measure the caret inside a contenteditable host (viewport coordinates). */
+export function measureCaret(host: HTMLElement): CaretPoint | null {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  if (!win) return null;
+  const selection = win.getSelection();
+  if (selection && selection.rangeCount > 0 && host.contains(selection.focusNode)) {
+    const range = selection.getRangeAt(0).cloneRange();
+    const rects = range.getClientRects();
+    if (rects.length > 0) {
+      const rect = rects[0];
+      return { x: rect.left, top: rect.top, bottom: rect.bottom };
+    }
+    // Collapsed caret at an element boundary reports no rects — probe with a
+    // zero-width marker and remove it synchronously (no input event fires,
+    // so the editor's view pipeline is never involved).
+    const marker = doc.createElement('span');
+    marker.textContent = '​';
+    try {
+      range.insertNode(marker);
+      const rect = marker.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return null;
+      return { x: rect.left, top: rect.top, bottom: rect.bottom };
+    } catch {
+      return null;
+    } finally {
+      marker.remove();
+    }
+  }
+  return null;
+}
+
+/** Fallback: the first text line's start (empty host, no selection). */
+function firstLine(host: HTMLElement): CaretPoint {
+  const rect = host.getBoundingClientRect();
+  const style = host.ownerDocument.defaultView?.getComputedStyle(host);
+  const padLeft = Number.parseFloat(style?.paddingLeft ?? '0') || 0;
+  const padTop = Number.parseFloat(style?.paddingTop ?? '0') || 0;
+  return { x: rect.left + padLeft, top: rect.top + padTop, bottom: rect.top + padTop + 22 };
+}
+
+export function attachCaretAnchoredPopup(
+  popup: HTMLElement,
+  host: HTMLElement,
+  options: CaretAnchorOptions = {},
+): CaretAnchor {
+  const win = host.ownerDocument.defaultView ?? window;
+  const prefer = options.placement ?? 'above';
+  const scrollOptions: AddEventListenerOptions & EventListenerOptions = {
+    capture: true,
+    passive: true,
+  };
+
+  const update = (): void => {
+    if (popup.hidden) return;
+    const viewportWidth = win.innerWidth;
+    const viewportHeight = win.innerHeight;
+
+    const width = Math.max(180, Math.min(360, viewportWidth - EDGE * 2));
+    popup.style.position = 'absolute';
+    popup.style.width = `${Math.round(width)}px`;
+    popup.style.margin = '0';
+    popup.style.zIndex = 'var(--aic-z-suggestions)';
+
+    // Measure the anchor AFTER taking the popup out of flow — otherwise the
+    // wrap's rect still includes the freshly-opened list and the popup
+    // detaches by exactly its own height.
+    const wrap = popup.parentElement ?? host;
+    const wrapRect = wrap.getBoundingClientRect();
+    const point = measureCaret(host) ?? firstLine(host);
+
+    // Horizontal — under the caret, clamped so the popup stays on screen.
+    const desiredLeft = point.x - wrapRect.left - 4;
+    const absoluteLeft = Math.min(
+      Math.max(wrapRect.left + desiredLeft, EDGE),
+      viewportWidth - width - EDGE,
+    );
+    popup.style.left = `${Math.round(absoluteLeft - wrapRect.left)}px`;
+    popup.style.right = 'auto';
+
+    // Vertical — preferred side first, flip when the viewport lacks room.
+    popup.style.maxHeight = '';
+    const needed = Math.min(popup.offsetHeight || 200, 260);
+    const spaceAbove = point.top - EDGE;
+    const spaceBelow = viewportHeight - point.bottom - EDGE;
+    let side = prefer;
+    const wanted = Math.min(needed, 140);
+    if (side === 'above' && spaceAbove < wanted && spaceBelow > spaceAbove) side = 'below';
+    else if (side === 'below' && spaceBelow < wanted && spaceAbove > spaceBelow) side = 'above';
+
+    const available = Math.max(
+      96,
+      Math.min(260, (side === 'above' ? spaceAbove : spaceBelow) - GAP),
+    );
+    popup.style.maxHeight = `${Math.round(available)}px`;
+    if (side === 'above') {
+      popup.style.bottom = `${Math.round(wrapRect.bottom - point.top + GAP)}px`;
+      popup.style.top = 'auto';
+    } else {
+      popup.style.top = `${Math.round(point.bottom - wrapRect.top + GAP)}px`;
+      popup.style.bottom = 'auto';
+    }
+  };
+
+  const onReflow = (): void => update();
+  win.addEventListener('resize', onReflow);
+  win.addEventListener('scroll', onReflow, scrollOptions);
+
+  return {
+    update,
+    destroy() {
+      win.removeEventListener('resize', onReflow);
+      win.removeEventListener('scroll', onReflow, scrollOptions);
+    },
+  };
+}

package/src/render.ts

@@ -0,0 +1,88 @@
+/**
+ * Model → DOM rendering. The DOM is a projection of the authoritative
+ * document (ADR-0001). Atomic nodes render as non-editable chips carrying
+ * data-aic-* attributes so parse.ts can round-trip them safely.
+ */
+
+import type { AIComposerDocument, AIComposerNode } from '@ai-composer/core';
+import type { NodeRegistry } from '@ai-composer/core';
+
+function displayOf(node: AIComposerNode, registry: NodeRegistry): string {
+  const definition = registry.get(node.type);
+  return definition?.toDisplay?.(node) ?? '';
+}
+
+/** Render one atomic node as a non-editable chip element. */
+export function renderChip(node: AIComposerNode, registry: NodeRegistry): HTMLElement {
+  const chip = document.createElement('span');
+  chip.setAttribute('contenteditable', 'false');
+  chip.className = 'aic-chip';
+  chip.setAttribute('data-aic-key', node.key);
+  chip.setAttribute('data-aic-node', node.type);
+  chip.hidden = node.type === 'attachment';
+  chip.setAttribute('aria-label', displayOf(node, registry));
+
+  switch (node.type) {
+    case 'mention':
+      chip.setAttribute('data-aic-id', node.id);
+      chip.setAttribute('data-aic-label', node.label);
+      break;
+    case 'command':
+      chip.setAttribute('data-aic-id', node.id);
+      chip.setAttribute('data-aic-label', node.label);
+      break;
+    case 'variable':
+      chip.setAttribute('data-aic-name', node.name);
+      break;
+    case 'attachment':
+      chip.setAttribute('data-aic-id', node.id);
+      chip.setAttribute('data-aic-name', node.name);
+      chip.setAttribute('data-aic-mime', node.mimeType);
+      if (node.size !== undefined) chip.setAttribute('data-aic-size', String(node.size));
+      break;
+    case 'custom':
+      chip.setAttribute('data-aic-plugin', node.plugin);
+      chip.setAttribute('data-aic-type', node.nodeType);
+      chip.setAttribute('data-aic-data', safeJson(node.data));
+      break;
+    default:
+      break;
+  }
+
+  chip.textContent = displayOf(node, registry);
+  return chip;
+}
+
+function safeJson(value: unknown): string {
+  try {
+    return JSON.stringify(value ?? null);
+  } catch {
+    return 'null';
+  }
+}
+
+/** Render a text run; newlines become <br> so the editable area shows line breaks. */
+export function renderTextRun(text: string): Node {
+  if (!text.includes('\n')) return document.createTextNode(text);
+  const fragment = document.createDocumentFragment();
+  const parts = text.split('\n');
+  parts.forEach((part, index) => {
+    if (part) fragment.appendChild(document.createTextNode(part));
+    if (index < parts.length - 1) fragment.appendChild(document.createElement('br'));
+  });
+  return fragment;
+}
+
+/**
+ * Render the document into `host`, replacing previous content.
+ * The placeholder <br> keeps the host clickable when empty.
+ */
+export function renderDocument(host: HTMLElement, document_: AIComposerDocument, registry: NodeRegistry): void {
+  host.textContent = '';
+  for (const node of document_.nodes) {
+    host.appendChild(node.type === 'text' ? renderTextRun(node.text) : renderChip(node, registry));
+  }
+  if (document_.nodes.length === 0) {
+    host.appendChild(document.createElement('br'));
+  }
+}