@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/src/frontmatterSettings.ts

@@ -0,0 +1,23 @@
+/** Canonical and legacy keys for frontmatter settings managed by the editor. */
+export const FRONTMATTER_SETTING_KEYS = {
+  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] as const },
+  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
+  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
+  coverSlide: { canonical: 'squisq-cover-slide', legacy: 'cover-slide' as const },
+} as const;
+
+/** Runtime defaults whose equivalent frontmatter entries can be omitted. */
+export const FRONTMATTER_SETTING_DEFAULTS = {
+  theme: 'standard',
+  transform: '',
+  captions: 'standard',
+  coverSlide: true,
+} as const;
+
+/** Return `null` when a setting matches its runtime default so writers remove it. */
+export function omitFrontmatterDefault<T extends string | number | boolean>(
+  value: T,
+  defaultValue: T,
+): T | null {
+  return value === defaultValue ? null : value;
+}

package/src/index.ts

@@ -263,6 +263,7 @@ export {
   applyRepairCommand,
   replaceAsciiFenceText,
 } from './asciiDiagram/asciiDiagramCommands.js';
+export type { ApplyAsciiDiagramCommandOptions } from './asciiDiagram/asciiDiagramCommands.js';
 // RepairableDiagramExtension mounts an inline "Repair as diagram" button on
 // code fences holding BROKEN box art — art too misaligned for clean detection
 // (so it renders as a faithful code block). One click reconstructs it into
@@ -288,6 +289,7 @@ export {
   renameNodeOp,
   resizeNodeOp,
   sanitizeAsciiLabel,
+  translateDiagramOp,
 } from './asciiDiagram/asciiDiagramOps.js';
 export { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste.js';
 
@@ -367,7 +369,11 @@ export type { JsonEditorProps } from './jsonEditor/index.js';
 // `MediaProvider`. Previously published as `@bendyline/squisq-recorder-react`;
 // folded into editor-react so it ships with the editor it's wired into.
 export { RecorderModal } from './recorder/RecorderModal.js';
-export type { RecorderModalProps, RecorderSaveResult } from './recorder/RecorderModal.js';
+export type {
+  RecorderColorScheme,
+  RecorderModalProps,
+  RecorderSaveResult,
+} from './recorder/RecorderModal.js';
 export { RecorderButton } from './recorder/RecorderButton.js';
 export type { RecorderButtonProps } from './recorder/RecorderButton.js';
 export { RecorderPanel } from './recorder/RecorderPanel.js';

package/src/recorder/RecorderButton.tsx

@@ -11,7 +11,11 @@ import { useCallback, useState, type CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
-import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import {
+  RecorderModal,
+  type RecorderColorScheme,
+  type RecorderSaveResult,
+} from './RecorderModal.js';
 import type { RecorderSource } from './hooks/useMediaRecorder.js';
 
 export interface RecorderButtonProps {
@@ -21,6 +25,8 @@ export interface RecorderButtonProps {
   container?: ContentContainer | null;
   /** Initial capture source. Defaults to `'mic'`. */
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme copied onto the portaled modal. */
+  colorScheme?: RecorderColorScheme;
   /** Fired after a successful save. */
   onSave?: (result: RecorderSaveResult) => void;
   /** Button label. Defaults to `'Record'`. */
@@ -35,6 +41,7 @@ export function RecorderButton({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onSave,
   label = 'Record',
   style,
@@ -62,6 +69,7 @@ export function RecorderButton({
             mediaProvider={mediaProvider}
             container={container}
             initialMode={initialMode}
+            colorScheme={colorScheme}
             onClose={handleClose}
             onSave={handleSave}
           />,

package/src/recorder/RecorderModal.tsx

@@ -12,7 +12,8 @@
  * doc parse.
  *
  * Visual conventions match `VideoExportModal` from `@bendyline/squisq-
- * video-react` (cream / gold palette, inline styles, no external CSS).
+ * video-react`, with inline theme tokens so the body-level portal follows
+ * the editor's light/dark chrome scheme.
  */
 
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';
@@ -25,6 +26,8 @@ import { buildTimingJson, encodeTimingJson, timingPathFor } from './timingJson.j
 
 // ── Types ──────────────────────────────────────────────────────────
 
+export type RecorderColorScheme = 'light' | 'dark';
+
 export interface RecorderModalProps {
   /** Required — recordings are written here. */
   mediaProvider: MediaProvider;
@@ -37,6 +40,8 @@ export interface RecorderModalProps {
   container?: ContentContainer | null;
   /** Initial capture source. Defaults to `'mic'` (narration). */
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme. Defaults to `'light'`. */
+  colorScheme?: RecorderColorScheme;
   /** Called after the modal is dismissed (save or cancel). */
   onClose: () => void;
   /**
@@ -77,9 +82,34 @@ const overlayStyle: CSSProperties = {
   zIndex: 10000,
 };
 
+/**
+ * The recorder is normally portaled to `document.body`, outside the editor
+ * shell's CSS-variable scope. Copy the scheme onto a fresh scope and provide
+ * inline fallbacks so the standalone RecorderModal/RecorderButton exports are
+ * themed even when a host has not loaded the editor stylesheet.
+ */
+function recorderThemeStyle(colorScheme: RecorderColorScheme): CSSProperties {
+  const dark = colorScheme === 'dark';
+  return {
+    colorScheme,
+    '--squisq-recorder-surface': `var(--squisq-bg, ${dark ? '#1f2937' : '#fffdf7'})`,
+    '--squisq-recorder-input': `var(--squisq-input-bg, ${dark ? '#374151' : '#fff'})`,
+    '--squisq-recorder-border': `var(--squisq-border, ${dark ? '#4b5563' : '#c9b98a'})`,
+    '--squisq-recorder-text': `var(--squisq-text, ${dark ? '#e5e7eb' : '#4a3c1f'})`,
+    '--squisq-recorder-muted': `var(--squisq-text-muted, ${dark ? '#9ca3af' : '#5a4a2a'})`,
+    '--squisq-recorder-accent': 'var(--squisq-accent, #8b6914)',
+    '--squisq-recorder-accent-text': '#fff',
+    '--squisq-recorder-danger': dark ? '#dc4c4c' : '#b33a3a',
+    '--squisq-recorder-danger-border': dark ? '#ef6a6a' : '#902929',
+    '--squisq-recorder-error-bg': dark ? '#3f151b' : '#fceeee',
+    '--squisq-recorder-error-border': dark ? '#7f1d1d' : '#d88a8a',
+    '--squisq-recorder-error-text': dark ? '#fecdd3' : '#8c2a2a',
+  } as CSSProperties;
+}
+
 const modalStyle: CSSProperties = {
-  background: '#FFFDF7',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-surface)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
   padding: '24px 28px',
   width: 'min(560px, calc(100vw - 48px))',
@@ -87,14 +117,14 @@ const modalStyle: CSSProperties = {
   overflowY: 'auto',
   boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
   fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: '#4a3c1f',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const titleStyle: CSSProperties = {
   margin: '0 0 16px 0',
   fontSize: 18,
   fontWeight: 600,
-  color: '#2d2310',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const labelStyle: CSSProperties = {
@@ -102,7 +132,7 @@ const labelStyle: CSSProperties = {
   fontSize: 13,
   fontWeight: 500,
   marginBottom: 4,
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const inputStyle: CSSProperties = {
@@ -110,10 +140,10 @@ const inputStyle: CSSProperties = {
   padding: '6px 8px',
   fontSize: 13,
   fontFamily: 'inherit',
-  border: '1px solid #c9b98a',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
-  background: '#fff',
-  color: '#4a3c1f',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
   marginBottom: 12,
   boxSizing: 'border-box',
 };
@@ -130,9 +160,9 @@ const btnPrimary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#8B6914',
-  color: '#fff',
-  border: '1px solid #7a5c10',
+  background: 'var(--squisq-recorder-accent)',
+  color: 'var(--squisq-recorder-accent-text)',
+  border: '1px solid var(--squisq-recorder-accent)',
   borderRadius: 0,
 };
 
@@ -142,16 +172,16 @@ const btnSecondary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#E8DFC6',
-  color: '#4a3c1f',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
 };
 
 const btnDanger: CSSProperties = {
   ...btnPrimary,
-  background: '#B33A3A',
-  borderColor: '#902929',
+  background: 'var(--squisq-recorder-danger)',
+  borderColor: 'var(--squisq-recorder-danger-border)',
 };
 
 const toggleRowStyle: CSSProperties = {
@@ -166,17 +196,17 @@ const toggleBase: CSSProperties = {
   fontFamily: 'inherit',
   cursor: 'pointer',
   background: 'transparent',
-  color: '#5a4a2a',
-  border: '1px solid #c9b98a',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 999,
 };
 
 const toggleActive: CSSProperties = {
   ...toggleBase,
-  color: '#fffdf5',
+  color: 'var(--squisq-recorder-accent-text)',
   fontWeight: 600,
-  background: '#8B6914',
-  borderColor: '#8B6914',
+  background: 'var(--squisq-recorder-accent)',
+  borderColor: 'var(--squisq-recorder-accent)',
 };
 
 const previewBoxStyle: CSSProperties = {
@@ -196,21 +226,21 @@ const previewBoxStyle: CSSProperties = {
 const audioMeterStyle: CSSProperties = {
   width: '100%',
   height: 56,
-  background: '#F2EBD9',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  border: '1px solid var(--squisq-recorder-border)',
   marginBottom: 12,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-muted)',
   fontSize: 13,
   fontVariantNumeric: 'tabular-nums',
 };
 
 const errorStyle: CSSProperties = {
-  background: '#FCEEEE',
-  border: '1px solid #D88A8A',
-  color: '#8C2A2A',
+  background: 'var(--squisq-recorder-error-bg)',
+  border: '1px solid var(--squisq-recorder-error-border)',
+  color: 'var(--squisq-recorder-error-text)',
   padding: '8px 10px',
   fontSize: 13,
   marginBottom: 12,
@@ -223,6 +253,20 @@ const buttonRowStyle: CSSProperties = {
   marginTop: 8,
 };
 
+const summaryStyle: CSSProperties = {
+  margin: '0 0 12px 0',
+  fontSize: 12,
+  color: 'var(--squisq-recorder-muted)',
+};
+
+const recordingStatusStyle: CSSProperties = {
+  fontSize: 13,
+  fontVariantNumeric: 'tabular-nums',
+  marginBottom: 12,
+  color: 'var(--squisq-recorder-accent)',
+  fontWeight: 600,
+};
+
 // ── Helpers ────────────────────────────────────────────────────────
 
 function formatDurationMs(ms: number): string {
@@ -293,6 +337,7 @@ export function RecorderModal({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onClose,
   onSave,
 }: RecorderModalProps) {
@@ -471,7 +516,14 @@ export function RecorderModal({
   };
 
   return (
-    <div style={overlayStyle} role="dialog" aria-modal="true" aria-label="Record media">
+    <div
+      className="squisq-editor-shell squisq-recorder-overlay"
+      data-theme={colorScheme}
+      style={{ ...overlayStyle, ...recorderThemeStyle(colorScheme) }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Record media"
+    >
       <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
         <h2 style={titleStyle}>Record media</h2>
 
@@ -493,9 +545,7 @@ export function RecorderModal({
           })}
         </div>
 
-        <p style={{ margin: '0 0 12px 0', fontSize: 12, color: '#5a4a2a' }}>
-          {captureSummary(micOn, video)}
-        </p>
+        <p style={summaryStyle}>{captureSummary(micOn, video)}</p>
 
         {recorder.error && <div style={errorStyle}>{recorder.error.message}</div>}
         {saveError && <div style={errorStyle}>{saveError}</div>}
@@ -579,6 +629,7 @@ export function RecorderModal({
           >
             <input
               type="checkbox"
+              style={{ accentColor: 'var(--squisq-recorder-accent)' }}
               checked={includeSystemAudio}
               onChange={(e) => setIncludeSystemAudio(e.target.checked)}
               disabled={recorder.state === 'recording' || recorder.state === 'requesting'}
@@ -602,15 +653,7 @@ export function RecorderModal({
 
         {/* Live duration during recording */}
         {recorder.state === 'recording' && !isAudioOnly && (
-          <div
-            style={{
-              fontSize: 13,
-              fontVariantNumeric: 'tabular-nums',
-              marginBottom: 12,
-              color: '#8B6914',
-              fontWeight: 600,
-            }}
-          >
+          <div style={recordingStatusStyle}>
             ● Recording {formatDurationMs(recorder.durationMs)}
           </div>
         )}

package/src/recorder/RecorderPanel.tsx

@@ -12,7 +12,11 @@ import { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
-import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import {
+  RecorderModal,
+  type RecorderColorScheme,
+  type RecorderSaveResult,
+} from './RecorderModal.js';
 import { Icon } from '../Icon';
 import type { RecorderSource } from './hooks/useMediaRecorder.js';
 
@@ -20,6 +24,8 @@ export interface RecorderPanelProps {
   mediaProvider: MediaProvider;
   container?: ContentContainer | null;
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme copied onto the portaled modal. */
+  colorScheme?: RecorderColorScheme;
   onSave?: (result: RecorderSaveResult) => void;
   /** ARIA / tooltip label. Defaults to `'Record media'`. */
   tooltip?: string;
@@ -31,6 +37,7 @@ export function RecorderPanel({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onSave,
   tooltip = 'Record media',
   className,
@@ -57,6 +64,7 @@ export function RecorderPanel({
             mediaProvider={mediaProvider}
             container={container}
             initialMode={initialMode}
+            colorScheme={colorScheme}
             onClose={handleClose}
             onSave={(result) => {
               onSave?.(result);

package/src/scene/__tests__/sceneIsolation.test.tsx

@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { SceneToolContext } from '../tools/SceneTool';
-import { SelectTool, getActiveMoveOffset } from '../tools/SelectTool';
+import { SelectTool, beginHandleDrag, getActiveMoveOffset } from '../tools/SelectTool';
 import { ConnectTool } from '../tools/ConnectTool';
 import { createSceneTextChannel } from '../text/sceneTextChannel';
 import { SceneViewport } from '../SceneViewport';
@@ -61,6 +61,32 @@ describe('Scene instance isolation', () => {
     expect(second.interaction.connect).toBeUndefined();
   });
 
+  it('commits a resize as one command containing origin and size', () => {
+    const ctx = context('node-card-a');
+    beginHandleDrag(
+      {
+        layerId: 'node-card-a',
+        corner: 'nw',
+        startV: { x: 10, y: 20 },
+        startBounds: { x: 10, y: 20, width: 100, height: 50 },
+      },
+      ctx.interaction,
+    );
+
+    SelectTool.onPointerMove!(pointer(0, 0), ctx);
+    SelectTool.onPointerUp!(pointer(0, 0), ctx);
+
+    expect(ctx.dispatch).toHaveBeenCalledTimes(1);
+    expect(ctx.dispatch).toHaveBeenCalledWith({
+      kind: 'resizeLayer',
+      id: 'node-card-a',
+      x: 0,
+      y: 0,
+      width: 110,
+      height: 70,
+    });
+  });
+
   it('creates independent text-toolbar channels', () => {
     const first = createSceneTextChannel();
     const second = createSceneTextChannel();

package/src/scene/adapters/DrawingAdapter.ts

@@ -238,7 +238,12 @@ export function useDrawingAdapter(
       case 'resizeLayer': {
         if (!isPrimaryShapeLayer(cmd.id)) return;
         const id = shapeIdFromLayerId(cmd.id);
-        if (id) resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        if (id) {
+          if (cmd.x !== undefined && cmd.y !== undefined) {
+            moveShape(editor, headingPos, id, cmd.x, cmd.y);
+          }
+          resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        }
         return;
       }
       case 'addLayer': {

package/src/scene/adapters/LayoutAdapter.ts

@@ -130,6 +130,9 @@ export function useLayoutAdapter(
         moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
         return;
       case 'resizeLayer':
+        if (cmd.x !== undefined && cmd.y !== undefined) {
+          moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
+        }
         resizeLayoutLayer(editor, headingPos, cmd.id, cmd.width, cmd.height);
         return;
       case 'addLayer': {

package/src/scene/commands/SceneCommand.ts

@@ -16,8 +16,19 @@ import type { DiagramEdgeAnchor, Layer } from '@bendyline/squisq/schemas';
 export type SceneCommand =
   /** Commit a layer's new top-left position (in viewport units). */
   | { kind: 'moveLayer'; id: string; x: number; y: number }
-  /** Commit a layer's new size (in viewport units). */
-  | { kind: 'resizeLayer'; id: string; width: number; height: number }
+  /**
+   * Commit a layer's new size (in viewport units). `x`/`y` carry the final
+   * top-left for west/north handle drags so hosts can persist the whole
+   * resize atomically instead of reparsing between a move and a size write.
+   */
+  | {
+      kind: 'resizeLayer';
+      id: string;
+      width: number;
+      height: number;
+      x?: number;
+      y?: number;
+    }
   /** Append a new layer to the scene. */
   | { kind: 'addLayer'; layer: Layer }
   /** Remove a layer by id. */

package/src/scene/tools/SelectTool.ts

@@ -212,11 +212,11 @@ export const SelectTool: SceneTool = {
       }
     } else if (dragState.kind === 'resize') {
       const { x, y, width, height } = dragState.currentBounds;
-      // Resize translates into a move (if origin shifted) + a size change.
-      // We dispatch both so a single grab on a corner can change all four
-      // fields atomically from the host's point of view.
-      ctx.dispatch({ kind: 'moveLayer', id: dragState.layerId, x, y });
-      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, width, height });
+      // Keep the final origin + size in one command. In particular, the ASCII
+      // diagram adapter must render/reparse only once: committing a move and
+      // then a resize used to normalize the art between the two halves of one
+      // pointer gesture and could snap the node to a different grid position.
+      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, x, y, width, height });
     }
     (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
     setDragState(ctx.interaction, null);

package/src/selectionConversions.ts

@@ -0,0 +1,155 @@
+/**
+ * Plain-text selection conversions used by the toolbar's Convert menu.
+ * Keeping delimiter detection separate from the editor integrations makes
+ * the behavior identical in Monaco and Tiptap.
+ */
+
+export type SelectionTableDelimiter = 'pipe' | 'comma' | 'tab' | 'multispace' | null;
+
+export interface SelectionTable {
+  delimiter: SelectionTableDelimiter;
+  rows: string[][];
+}
+
+export interface SelectionTaskItem {
+  checked: boolean;
+  text: string;
+}
+
+type CandidateDelimiter = Exclude<SelectionTableDelimiter, null>;
+
+/** Non-empty selected lines, trimmed without changing their order. */
+export function selectionLines(text: string): string[] {
+  return text
+    .replace(/\r\n?/g, '\n')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+}
+
+function splitPipeLine(line: string): string[] {
+  let value = line.trim();
+  if (value.startsWith('|')) value = value.slice(1);
+  if (value.endsWith('|') && !value.endsWith('\\|')) value = value.slice(0, -1);
+
+  const cells: string[] = [];
+  let cell = '';
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === '\\' && value[i + 1] === '|') {
+      cell += '|';
+      i++;
+    } else if (char === '|') {
+      cells.push(cell.trim());
+      cell = '';
+    } else {
+      cell += char;
+    }
+  }
+  cells.push(cell.trim());
+  return cells;
+}
+
+/** A small CSV-row parser so quoted commas remain inside their cell. */
+function splitCommaLine(line: string): string[] {
+  const cells: string[] = [];
+  let cell = '';
+  let quoted = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (char === '"' && !quoted && cell.trim().length === 0) {
+      // A quote only opens CSV quoting at the start of a field. Literal
+      // quotes elsewhere (for example 5" screen) remain part of the value.
+      quoted = true;
+      cell = '';
+    } else if (char === '"' && quoted) {
+      if (line[i + 1] === '"') {
+        cell += '"';
+        i++;
+      } else {
+        quoted = false;
+      }
+    } else if (char === ',' && !quoted) {
+      cells.push(cell.trim());
+      cell = '';
+    } else {
+      cell += char;
+    }
+  }
+  if (quoted) return line.split(',').map((value) => value.trim());
+  cells.push(cell.trim());
+  return cells;
+}
+
+function splitLine(line: string, delimiter: CandidateDelimiter): string[] {
+  switch (delimiter) {
+    case 'pipe':
+      return splitPipeLine(line);
+    case 'comma':
+      return splitCommaLine(line);
+    case 'tab':
+      return line
+        .trim()
+        .split('\t')
+        .map((cell) => cell.trim());
+    case 'multispace':
+      return line
+        .trim()
+        .split(/[ \u00a0]{2,}/)
+        .map((cell) => cell.trim());
+  }
+}
+
+/**
+ * Detect a delimiter only when at least two lines use it and every line
+ * produces the same number of columns. Inconsistent prose therefore falls
+ * back to a useful one-column table instead of losing text.
+ */
+export function selectionToTable(text: string): SelectionTable {
+  const lines = selectionLines(text);
+  const candidates: CandidateDelimiter[] = ['pipe', 'comma', 'tab', 'multispace'];
+
+  if (lines.length >= 2) {
+    for (const delimiter of candidates) {
+      const rows = lines.map((line) => splitLine(line, delimiter));
+      const columnCount = rows[0]?.length ?? 0;
+      if (columnCount >= 2 && rows.every((row) => row.length === columnCount)) {
+        return { delimiter, rows };
+      }
+    }
+  }
+
+  return { delimiter: null, rows: lines.map((line) => [line]) };
+}
+
+function escapeTableCell(cell: string): string {
+  return cell.replace(/\|/g, '\\|');
+}
+
+/** Render a selection as a GFM table, using its first row as the header. */
+export function selectionToTableMarkdown(text: string): string {
+  const { rows } = selectionToTable(text);
+  if (rows.length === 0) return '';
+
+  const formatRow = (row: string[]) => `| ${row.map(escapeTableCell).join(' | ')} |`;
+  const separator = rows[0].map(() => '---');
+  return [formatRow(rows[0]), formatRow(separator), ...rows.slice(1).map(formatRow)].join('\n');
+}
+
+/** Convert selected lines to task items, normalizing existing list markers. */
+export function selectionToTaskItems(text: string): SelectionTaskItem[] {
+  return selectionLines(text).map((line) => {
+    const task = /^[-*+]\s+\[([ xX])\]\s*(.*)$/.exec(line);
+    if (task) return { checked: task[1].toLowerCase() === 'x', text: task[2].trim() };
+
+    const withoutListMarker = line.replace(/^(?:[-*+]\s+|\d+[.)]\s+)/, '');
+    return { checked: false, text: withoutListMarker.trim() };
+  });
+}
+
+export function selectionToTaskListMarkdown(text: string): string {
+  return selectionToTaskItems(text)
+    .map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+    .join('\n');
+}