@deckbuilderkit/editor 0.0.0-stage → 0.1.1

package/src/SvgView.tsx

@@ -0,0 +1,231 @@
+import { PanelBanner, t } from '@deckbuilderkit/ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CodeView } from './CodeView';
+
+
+const NAMESPACES: Record<string, string> = {
+  inkscape: 'http://www.inkscape.org/namespaces/inkscape',
+  sodipodi: 'http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd',
+  xlink: 'http://www.w3.org/1999/xlink',
+  dc: 'http://purl.org/dc/elements/1.1/',
+  cc: 'http://creativecommons.org/ns#',
+  rdf: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
+};
+
+/** Declares the well-known prefixes a file uses without declaring them (some generators forget `xmlns:inkscape`), so the strict XML parser accepts it. */
+export function declareNamespaces(source: string): string {
+  const root = /<svg[^>]*>/.exec(source);
+  if (!root) return source;
+  const missing = Object.keys(NAMESPACES).filter((p) => !root[0].includes(`xmlns:${p}=`) && (source.includes(`<${p}:`) || source.includes(` ${p}:`)));
+  if (missing.length === 0) return source;
+  const decls = missing.map((p) => ` xmlns:${p}="${NAMESPACES[p]}"`).join('');
+  return source.replace(/<svg/, `<svg${decls}`);
+}
+
+interface Layer {
+  id: number;
+  label: string;
+}
+
+interface Parsed {
+  doc?: Document;
+  layers: Layer[];
+  error?: string;
+}
+
+const isLayer = (el: Element) => el.getAttributeNS(NAMESPACES.inkscape!, 'groupmode') === 'layer';
+
+function parseSvg(source: string): Parsed {
+  const doc = new DOMParser().parseFromString(declareNamespaces(source), 'image/svg+xml');
+  const err = doc.querySelector('parsererror');
+  if (err) return { layers: [], error: err.textContent?.trim().slice(0, 200) ?? 'parse error' };
+  const layers = [...doc.querySelectorAll('g')].filter(isLayer).map((g, id) => ({ id, label: g.getAttributeNS(NAMESPACES.inkscape!, 'label') || g.id || `Layer ${id + 1}` }));
+  return { doc, layers };
+}
+
+const MIN_ZOOM = 0.05;
+const MAX_ZOOM = 40;
+
+/** What an image view shows, for a status bar: natural size in px (0 until loaded) and zoom (1 = 100 %). */
+export interface ImageInfo {
+  width: number;
+  height: number;
+  zoom: number;
+}
+
+/** Pointer travel (px) below which a press counts as a click, not a pan. */
+const CLICK_SLOP = 4;
+
+/**
+ * An SVG drawn by an `<img>` (its scripts never run) with zoom, drag to pan, a background switch and its source.
+ * Without `source` it shows any image this way (PNG, JPEG, ...). It opens fitted to the view (never enlarged);
+ * a click toggles fit and 100 %; the wheel and +/- (0 fits) zoom while the pointer or focus is on the image.
+ */
+export function SvgView({ url, source, name, onInfo }: { url: string; source?: string; name: string; onInfo?(info: ImageInfo): void }) {
+  const [view, setView] = useState({ zoom: 1, x: 0, y: 0 });
+  const [fit, setFit] = useState(true);
+  const [natural, setNatural] = useState({ w: 0, h: 0 });
+  const [box, setBox] = useState({ w: 0, h: 0 });
+  const [light, setLight] = useState(true);
+  const [showSource, setShowSource] = useState(false);
+  const drag = useRef<{ x: number; y: number; moved: number }>();
+  const stage = useRef<HTMLDivElement>(null);
+  const [hidden, setHidden] = useState<Set<number>>(new Set());
+  const [showLayers, setShowLayers] = useState(false);
+  const parsed = useMemo(() => (source === undefined ? undefined : parseSvg(source)), [source]);
+  const [shown, setShown] = useState(url);
+
+  useEffect(() => setHidden(new Set()), [source]);
+  // The file as the page shows it: namespaces repaired, hidden layers display:none, drawn by an <img> so its scripts never run.
+  useEffect(() => {
+    if (!parsed?.doc) {
+      setShown(url);
+      return;
+    }
+    const copy = parsed.doc.cloneNode(true) as Document;
+    [...copy.querySelectorAll('g')].filter(isLayer).forEach((g, i) => {
+      if (hidden.has(i)) g.setAttribute('style', `${g.getAttribute('style') ?? ''};display:none`);
+    });
+    const blob = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(copy)], { type: 'image/svg+xml' }));
+    setShown(blob);
+    return () => URL.revokeObjectURL(blob);
+  }, [parsed, hidden, url]);
+
+  // An SVG without its own size takes the size of the view.
+  const size = natural.w > 0 && natural.h > 0 ? natural : box;
+  const fitZoom = size.w > 0 && box.w > 0 ? Math.min(1, box.w / size.w, box.h / size.h) : 1;
+  const shownView = fit ? { zoom: fitZoom, x: 0, y: 0 } : view;
+
+  const zoomAt = (factor: number, cx: number, cy: number) => {
+    const from = shownView;
+    const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, from.zoom * factor));
+    const k = zoom / from.zoom;
+    setFit(false);
+    setView({ zoom, x: cx - (cx - from.x) * k, y: cy - (cy - from.y) * k });
+  };
+  const actual = () => {
+    setFit(false);
+    setView({ zoom: 1, x: 0, y: 0 });
+  };
+  const toggle = () => (fit ? actual() : setFit(true));
+
+  useEffect(() => {
+    onInfo?.({ width: natural.w, height: natural.h, zoom: shownView.zoom });
+  }, [natural.w, natural.h, shownView.zoom]);
+
+  useEffect(() => {
+    const el = stage.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => setBox({ w: el.clientWidth, h: el.clientHeight }));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [showSource]);
+
+  // A native listener: React's wheel listeners are passive, so they can't stop the page from scrolling or zooming (Ctrl+wheel in a browser tab).
+  const zoomRef = useRef(zoomAt);
+  zoomRef.current = zoomAt;
+  useEffect(() => {
+    const el = stage.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      zoomRef.current(e.deltaY < 0 ? 1.15 : 1 / 1.15, e.clientX - r.left - r.width / 2, e.clientY - r.top - r.height / 2);
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [showSource]);
+
+  return (
+    <div className="file-preview">
+      <div className="file-preview-bar svg-bar">
+        <button className="btn btn-ghost btn-sm" onClick={() => zoomAt(1 / 1.25, 0, 0)} aria-label={t('pdf.zoomOut')} title={t('pdf.zoomOut')}>−</button>
+        <span className="svg-zoom">{Math.round(shownView.zoom * 100)}%</span>
+        <button className="btn btn-ghost btn-sm" onClick={() => zoomAt(1.25, 0, 0)} aria-label={t('pdf.zoomIn')} title={t('pdf.zoomIn')}>+</button>
+        <button className="btn btn-ghost btn-sm" onClick={toggle}>{fit ? '100%' : t('svg.actual')}</button>
+        <button className="btn btn-ghost btn-sm" onClick={() => setLight(!light)} aria-pressed={light}>{light ? t('svg.bgLight') : t('svg.bgDark')}</button>
+        {parsed && parsed.layers.length > 0 && (
+          <button className="btn btn-ghost btn-sm" onClick={() => setShowLayers(!showLayers)} aria-pressed={showLayers}>
+            {t('pdf.layers')} ({parsed.layers.length})
+          </button>
+        )}
+        {source !== undefined && (
+          <button className="btn btn-ghost btn-sm" onClick={() => setShowSource(!showSource)} aria-pressed={showSource}>
+            {showSource ? t('svg.image') : t('svg.source')}
+          </button>
+        )}
+      </div>
+      {parsed?.error && <PanelBanner tone="err" icon="alert">{t('svg.invalid', { message: parsed.error })}</PanelBanner>}
+      <div className="file-preview-body svg-body">
+        {showSource && source !== undefined ? (
+          <CodeView value={source} lang="text" wrap lineNumbers />
+        ) : (
+          <div
+            ref={stage}
+            className={`svg-stage${light ? ' svg-light' : ''}`}
+            tabIndex={0}
+            onPointerDown={(e) => {
+              drag.current = { x: e.clientX, y: e.clientY, moved: 0 };
+              e.currentTarget.setPointerCapture(e.pointerId);
+            }}
+            onPointerMove={(e) => {
+              const d = drag.current;
+              if (!d) return;
+              const dx = e.clientX - d.x;
+              const dy = e.clientY - d.y;
+              drag.current = { x: e.clientX, y: e.clientY, moved: d.moved + Math.abs(dx) + Math.abs(dy) };
+              if (drag.current.moved < CLICK_SLOP) return;
+              const from = shownView;
+              setFit(false);
+              setView({ ...from, x: from.x + dx, y: from.y + dy });
+            }}
+            onPointerUp={() => {
+              if (drag.current && drag.current.moved < CLICK_SLOP) toggle();
+              drag.current = undefined;
+            }}
+            onKeyDown={(e) => {
+              if (e.ctrlKey || e.altKey || e.metaKey) return;
+              if (e.key === '+' || e.key === '=') zoomAt(1.25, 0, 0);
+              else if (e.key === '-') zoomAt(1 / 1.25, 0, 0);
+              else if (e.key === '0') setFit(true);
+              else return;
+              e.preventDefault();
+            }}
+          >
+            <img
+              src={shown}
+              alt={name}
+              draggable={false}
+              onLoad={(e) => setNatural({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })}
+              style={{
+                width: size.w || undefined,
+                height: size.h || undefined,
+                transform: `translate(-50%, -50%) translate(${shownView.x}px, ${shownView.y}px) scale(${shownView.zoom})`,
+              }}
+            />
+          </div>
+        )}
+        {showLayers && !showSource && parsed && (
+          <div className="pdf-layers">
+            {parsed.layers.map((layer) => (
+              <label key={layer.id} className="pdf-layer">
+                <input
+                  type="checkbox"
+                  checked={!hidden.has(layer.id)}
+                  onChange={() =>
+                    setHidden((h) => {
+                      const next = new Set(h);
+                      if (!next.delete(layer.id)) next.add(layer.id);
+                      return next;
+                    })
+                  }
+                />
+                <span>{layer.label}</span>
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/TableView.tsx

@@ -0,0 +1,85 @@
+import { PanelBanner, t } from '@deckbuilderkit/ui';
+import { type ReactNode, useMemo, useState } from 'react';
+import { compareCells, delimiterOf, parseDelimited } from './table';
+
+/** Most rows drawn at once; the filter and the sort still cover all of them. */
+export const TABLE_ROW_LIMIT = 2000;
+
+type Cell = string | number | null;
+
+/** A header row and cells, with an optional row-number column and sortable headers. */
+export function DataGrid({ columns, rows, onSort, sort }: {
+  columns: ReactNode[];
+  rows: Cell[][];
+  sort?: { column: number; desc: boolean } | null;
+  onSort?(column: number): void;
+}) {
+  return (
+    <table className="data-grid">
+      <thead>
+        <tr>
+          <th className="data-grid-n">#</th>
+          {columns.map((c, i) => (
+            <th key={i} onClick={onSort ? () => onSort(i) : undefined} className={onSort ? 'sortable' : undefined}>
+              {c}{sort?.column === i && <span aria-hidden> {sort.desc ? '▼' : '▲'}</span>}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, r) => (
+          <tr key={r}>
+            <td className="data-grid-n">{r + 1}</td>
+            {columns.map((_, c) => (
+              <td key={c} className={row[c] === null || row[c] === undefined ? 'data-grid-null' : undefined} title={String(row[c] ?? '')}>{row[c] ?? 'NULL'}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** A CSV or TSV file as a table: the first line is the header; filter on any cell, sort by a header. */
+export function TableView({ name, text, truncated }: { name: string; text: string; truncated?: boolean }) {
+  const parsed = useMemo(() => {
+    const all = parseDelimited(text, delimiterOf(name, text));
+    const width = all.reduce((max, r) => Math.max(max, r.length), 0);
+    const header = (all[0] ?? []).slice();
+    while (header.length < width) header.push('');
+    return { header, body: all.slice(1) };
+  }, [name, text]);
+  const [filter, setFilter] = useState('');
+  const [sort, setSort] = useState<{ column: number; desc: boolean } | null>(null);
+
+  const rows = useMemo(() => {
+    const q = filter.trim().toLowerCase();
+    let out = q ? parsed.body.filter((r) => r.some((c) => c.toLowerCase().includes(q))) : parsed.body;
+    if (sort) {
+      const sign = sort.desc ? -1 : 1;
+      out = [...out].sort((a, b) => sign * compareCells(a[sort.column] ?? '', b[sort.column] ?? ''));
+    }
+    return out;
+  }, [parsed, filter, sort]);
+
+  const onSort = (column: number) =>
+    setSort((s) => (s?.column !== column ? { column, desc: false } : s.desc ? null : { column, desc: true }));
+
+  return (
+    <div className="file-preview">
+      {truncated && <PanelBanner tone="warn" icon="alert">{t('preview.truncated')}</PanelBanner>}
+      <div className="file-preview-bar archive-bar">
+        <span className="archive-summary">
+          {t('preview.rows', { shown: rows.length, total: parsed.body.length })} · {t('preview.columns', { count: parsed.header.length })}
+        </span>
+        <input className="input archive-filter" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder={t('preview.filter')} aria-label={t('preview.filter')} />
+      </div>
+      {rows.length > TABLE_ROW_LIMIT && <PanelBanner tone="warn" icon="alert">{t('preview.rowsCapped', { max: TABLE_ROW_LIMIT })}</PanelBanner>}
+      <div className="file-preview-body">
+        {parsed.header.length === 0
+          ? <div className="archive-empty">{t('preview.empty')}</div>
+          : <DataGrid columns={parsed.header} rows={rows.slice(0, TABLE_ROW_LIMIT)} sort={sort} onSort={onSort} />}
+      </div>
+    </div>
+  );
+}

package/src/VarSuggest.tsx

@@ -0,0 +1,125 @@
+import type { RestEnvVar } from '@deckbuilderkit/server-core/protocol';
+import { type InputHTMLAttributes, type KeyboardEvent, type ReactNode, type RefObject, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { filterVariableOptions, insertVariable, type VariableOption, variableOptions, variableQueryAt } from './variables';
+
+export interface VarSuggest {
+  /** Re-reads the text before the caret; call on change, select and click. */
+  update(el: HTMLInputElement): void;
+  /** Handles ↑/↓/Enter/Tab/Esc while the list is open; true when it took the key. */
+  keyDown(e: KeyboardEvent<HTMLInputElement>): boolean;
+  close(): void;
+  /** The dropdown, or null when closed; render it inside a positioned wrapper. */
+  list: ReactNode;
+}
+
+interface Open {
+  caret: number;
+  items: VariableOption[];
+  index: number;
+}
+
+/** A `{{name}}` suggestion list for a plain input; without `variables` it never opens. */
+export function useVarSuggest(variables: readonly RestEnvVar[] | undefined, input: RefObject<HTMLInputElement | null>, onChange: (value: string) => void): VarSuggest {
+  const options = useMemo(() => (variables ? variableOptions(variables) : []), [variables]);
+  const [open, setOpen] = useState<Open | null>(null);
+  const pendingCaret = useRef<number | null>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  useLayoutEffect(() => {
+    const el = input.current;
+    if (pendingCaret.current !== null && el) {
+      el.setSelectionRange(pendingCaret.current, pendingCaret.current);
+      pendingCaret.current = null;
+    }
+    listRef.current?.querySelector('.active')?.scrollIntoView({ block: 'nearest' });
+  });
+
+  const close = () => setOpen(null);
+  const update = (el: HTMLInputElement) => {
+    if (!variables || el.selectionStart === null || el.selectionStart !== el.selectionEnd) return close();
+    const q = variableQueryAt(el.value, el.selectionStart);
+    const items = q ? filterVariableOptions(options, q.partial) : [];
+    if (items.length === 0) return close();
+    setOpen((prev) => ({ caret: el.selectionStart!, items, index: prev && prev.index < items.length ? prev.index : 0 }));
+  };
+  const pick = (name: string) => {
+    const el = input.current;
+    if (!el || !open) return;
+    const r = insertVariable(el.value, open.caret, name);
+    pendingCaret.current = r.caret;
+    setOpen(null);
+    onChange(r.text);
+  };
+  const keyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (!open) return false;
+    const n = open.items.length;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      setOpen({ ...open, index: (open.index + (e.key === 'ArrowDown' ? 1 : n - 1)) % n });
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      pick(open.items[open.index]!.name);
+    } else if (e.key === 'Escape') {
+      close();
+    } else {
+      return false;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    return true;
+  };
+  const list = open && (
+    <ul ref={listRef} className="menu var-suggest" role="listbox">
+      {open.items.map((o, i) => (
+        <li
+          key={o.name}
+          role="option"
+          aria-selected={i === open.index}
+          className={`menu-item${i === open.index ? ' active' : ''}`}
+          title={o.detail}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            pick(o.name);
+          }}
+        >
+          <span className="menu-label">{o.name}</span>
+          <span className="var-suggest-detail menu-hint">{o.detail}</span>
+        </li>
+      ))}
+    </ul>
+  );
+  return { update, keyDown, close, list };
+}
+
+export type VarInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+  value: string;
+  onValueChange(value: string): void;
+  variables?: readonly RestEnvVar[];
+};
+
+/** An input that suggests `{{name}}` after `{{`; without `variables` a plain input. */
+export function VarInput({ value, onValueChange, variables, onKeyDown, onBlur, ...rest }: VarInputProps) {
+  const input = useRef<HTMLInputElement>(null);
+  const s = useVarSuggest(variables, input, onValueChange);
+  if (!variables) return <input value={value} onChange={(e) => onValueChange(e.target.value)} onKeyDown={onKeyDown} onBlur={onBlur} {...rest} />;
+  return (
+    <span className="var-suggest-wrap">
+      <input
+        ref={input}
+        value={value}
+        {...rest}
+        onChange={(e) => {
+          onValueChange(e.target.value);
+          s.update(e.target);
+        }}
+        onKeyDown={(e) => {
+          if (!s.keyDown(e)) onKeyDown?.(e);
+        }}
+        onSelect={(e) => s.update(e.currentTarget)}
+        onBlur={(e) => {
+          s.close();
+          onBlur?.(e);
+        }}
+      />
+      {s.list}
+    </span>
+  );
+}

package/src/curl-file.ts

@@ -0,0 +1,70 @@
+export interface CurlCommand {
+  from: number;
+  to: number;
+  text: string;
+}
+
+const START = /^\s*(?:\$\s+)?curl(?:\.exe)?(?=\s|$)/;
+
+function scanQuote(line: string, open: string | null): string | null {
+  let q = open;
+  for (let i = 0; i < line.length; i++) {
+    const c = line[i];
+    if (q === "'") {
+      if (c === "'") q = null;
+    } else if (q === '"') {
+      if (c === '\\' || c === '^') i++;
+      else if (c === '"') q = null;
+    } else if (c === '\\' || c === '^') {
+      i++;
+    } else if (c === "'" || c === '"') {
+      q = c;
+    }
+  }
+  return q;
+}
+
+export function curlCommands(text: string): CurlCommand[] {
+  const out: CurlCommand[] = [];
+  let start = -1;
+  let end = 0;
+  let quote: string | null = null;
+  let continued = false;
+  let pos = 0;
+  while (pos <= text.length) {
+    let nl = text.indexOf('\n', pos);
+    if (nl < 0) nl = text.length;
+    let lineEnd = nl;
+    if (lineEnd > pos && text[lineEnd - 1] === '\r') lineEnd--;
+    const line = text.slice(pos, lineEnd);
+    const trimmed = line.trim();
+    if (start >= 0 && !quote && !continued) {
+      out.push({ from: start, to: end, text: text.slice(start, end) });
+      start = -1;
+    }
+    if (start < 0) {
+      if (trimmed !== '' && !trimmed.startsWith('#') && START.test(line)) {
+        start = pos;
+        quote = scanQuote(line, null);
+        continued = !quote && /[\\^]$/.test(line.trimEnd());
+        end = lineEnd;
+      }
+    } else {
+      quote = scanQuote(line, quote);
+      continued = !quote && /[\\^]$/.test(line.trimEnd());
+      end = lineEnd;
+    }
+    pos = nl + 1;
+  }
+  if (start >= 0) out.push({ from: start, to: end, text: text.slice(start, end) });
+  return out;
+}
+
+export function curlAt(text: string, offset: number): CurlCommand | null {
+  let above: CurlCommand | null = null;
+  for (const c of curlCommands(text)) {
+    if (offset >= c.from && offset <= c.to) return c;
+    if (c.to < offset) above = c;
+  }
+  return above;
+}

package/src/editorOptions.ts

@@ -0,0 +1,83 @@
+import { closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, indentUnit } from '@codemirror/language';
+import { EditorState, type Extension } from '@codemirror/state';
+import { Decoration, type DecorationSet, drawSelection, EditorView, highlightActiveLine, highlightActiveLineGutter, highlightWhitespace, lineNumbers, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { useContext } from 'react';
+import { EditorOptionsContext } from './editorOptionsContext';
+
+/** Plain-data editor preferences; every field is optional and defaults to the built-in behavior. */
+export interface EditorOptions {
+  tabSize?: number;
+  insertSpaces?: boolean;
+  /** Initial wrapping for editors that don't set `wrap` themselves. */
+  wordWrap?: boolean;
+  lineNumbers?: boolean;
+  highlightActiveLine?: boolean;
+  renderWhitespace?: 'none' | 'selection' | 'all';
+  bracketMatching?: boolean;
+  autoCloseBrackets?: boolean;
+  cursorStyle?: 'line' | 'block' | 'underline';
+  cursorBlink?: boolean;
+}
+
+export const DEFAULT_EDITOR_OPTIONS: Required<EditorOptions> = {
+  tabSize: 4, insertSpaces: true, wordWrap: false, lineNumbers: true, highlightActiveLine: true, renderWhitespace: 'none',
+  bracketMatching: true, autoCloseBrackets: true, cursorStyle: 'line', cursorBlink: true,
+};
+
+/** The indent unit for the options: `tabSize` spaces, or a tab character. */
+export const indentUnitOf = (o: Required<EditorOptions>): string => (o.insertSpaces ? ' '.repeat(o.tabSize) : '\t');
+
+const cursorTheme = (style: 'block' | 'underline') => EditorView.theme({
+  '.cm-cursor, .cm-dropCursor': style === 'block'
+    ? { borderLeft: 'none', backgroundColor: 'color-mix(in srgb, var(--accent) 60%, transparent)', width: '0.6em' }
+    : { borderLeft: 'none', borderBottom: '2px solid var(--accent)', width: '0.6em' },
+});
+
+const wsMark = Decoration.mark({ class: 'cm-ws-mark' });
+
+function selectionWhitespace(view: EditorView): DecorationSet {
+  const ranges = [];
+  for (const r of view.state.selection.ranges) {
+    if (r.empty) continue;
+    const text = view.state.sliceDoc(r.from, r.to);
+    for (let i = 0; i < text.length; i++) if (text[i] === ' ' || text[i] === '	') ranges.push(wsMark.range(r.from + i, r.from + i + 1));
+  }
+  return Decoration.set(ranges, true);
+}
+
+const selectionWhitespaceExt = [
+  ViewPlugin.fromClass(class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = selectionWhitespace(view);
+    }
+    update(u: ViewUpdate) {
+      if (u.selectionSet || u.docChanged) this.decorations = selectionWhitespace(u.view);
+    }
+  }, { decorations: (v) => v.decorations }),
+  EditorView.baseTheme({ '.cm-ws-mark': { backgroundImage: 'radial-gradient(circle at 50% 55%, var(--text-3) 12%, transparent 14%)' } }),
+];
+
+/** Maps the options (defaults filled in) to CodeMirror extensions. */
+export function editorOptionsExtension(options: EditorOptions | undefined): Extension {
+  const o = { ...DEFAULT_EDITOR_OPTIONS, ...options };
+  const indentSet = options?.tabSize !== undefined || options?.insertSpaces !== undefined;
+  return [
+    EditorState.tabSize.of(o.tabSize),
+    indentSet ? indentUnit.of(indentUnitOf(o)) : [],
+    o.lineNumbers ? lineNumbers() : [],
+    o.highlightActiveLine ? [highlightActiveLine(), highlightActiveLineGutter()] : [],
+    o.renderWhitespace === 'all' ? highlightWhitespace() : [],
+    o.renderWhitespace === 'selection' ? selectionWhitespaceExt : [],
+    o.bracketMatching ? bracketMatching() : [],
+    o.autoCloseBrackets ? closeBrackets() : [],
+    drawSelection({ cursorBlinkRate: o.cursorBlink ? 1200 : 0 }),
+    o.cursorStyle === 'line' ? [] : cursorTheme(o.cursorStyle),
+  ];
+}
+
+export { EditorOptionsContext };
+
+/** The app-wide editor options, as provided above the editors. */
+export const useEditorOptions = (): EditorOptions | undefined => useContext(EditorOptionsContext);

package/src/editorOptionsContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import type { EditorOptions } from './editorOptions';
+
+export const EditorOptionsContext = createContext<EditorOptions | undefined>(undefined);

package/src/fileKinds.ts

@@ -0,0 +1,69 @@
+import type { Lang } from './languages';
+import { effectiveName, LOG_NAME } from '@deckbuilderkit/ui/file-associations';
+
+const extOf = (name: string) => {
+  const dot = name.lastIndexOf('.');
+  return dot < 0 ? '' : name.slice(dot + 1).toLowerCase();
+};
+
+const LANG_BY_EXT: Record<string, Lang> = {
+  sql: 'sql', pls: 'sql', pkb: 'sql', pks: 'sql', json: 'json', jsonc: 'json', java: 'java', sh: 'shell', bash: 'shell', curl: 'shell', http: 'shell',
+  md: 'markdown', markdown: 'markdown',
+  xml: 'xml', xsd: 'xml', xsl: 'xml', xslt: 'xml', wsdl: 'xml', pom: 'xml', plist: 'xml', csproj: 'xml', fxml: 'xml',
+  html: 'html', htm: 'html', xhtml: 'html',
+  js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript', ts: 'typescript', mts: 'typescript', cts: 'typescript', tsx: 'typescript',
+  css: 'css', py: 'python', yaml: 'yaml', yml: 'yaml', toml: 'toml', properties: 'properties', ini: 'properties', cfg: 'properties', conf: 'properties',
+  rs: 'rust', go: 'go', c: 'c', h: 'c', cpp: 'cpp', cc: 'cpp', hpp: 'cpp', cs: 'csharp', kt: 'kotlin', kts: 'kotlin',
+  diff: 'diff', patch: 'diff', dockerfile: 'dockerfile',
+};
+
+/** The editor language for a file name, by extension. */
+export function langOfFile(name: string): Lang {
+  return langOfEffective(effectiveName(name));
+}
+
+function langOfEffective(name: string): Lang {
+  const lower = name.toLowerCase();
+  if (lower === 'dockerfile' || lower.startsWith('dockerfile.')) return 'dockerfile';
+  if (lower === '.env' || lower.startsWith('.env.')) return 'properties';
+  return LANG_BY_EXT[extOf(name)] ?? 'text';
+}
+
+export type PreviewKind =
+  | 'markdown' | 'json' | 'html' | 'code' | 'image' | 'svg' | 'pdf' | 'archive' | 'log' | 'text'
+  | 'audio' | 'video' | 'table' | 'font' | 'notebook' | 'har' | 'sqlite' | 'hex' | 'env';
+
+const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'ico']);
+const ARCHIVE_EXTS = new Set([
+  'zip', '7z', 'rar', 'tar', 'gz', 'tgz', 'bz2', 'tbz2', 'xz', 'txz', 'lzma', 'zst', 'iso', 'cab', 'jar', 'war', 'whl', 'nupkg', 'apk',
+  'docx', 'xlsx', 'pptx', 'odt', 'ods', 'odp', 'epub',
+]);
+const AUDIO_EXTS = new Set(['mp3', 'wav', 'flac', 'ogg', 'm4a', 'aac', 'opus']);
+const VIDEO_EXTS = new Set(['mp4', 'm4v', 'webm', 'mov', 'mkv', 'avi']);
+const FONT_EXTS = new Set(['ttf', 'otf', 'woff', 'woff2']);
+const HEX_EXTS = new Set(['class', 'exe', 'dll', 'so', 'dylib', 'bin', 'msi', 'o', 'obj', 'dat', 'pyc']);
+const SQLITE_EXTS = new Set(['sqlite', 'sqlite3', 'db', 'db3']);
+
+/** How FilePreview shows a file: images need its bytes (`/api/fs/raw`), the rest its text. */
+export function previewKind(original: string): PreviewKind {
+  const name = effectiveName(original);
+  if (LOG_NAME.test(name)) return 'log';
+  const lower = name.toLowerCase();
+  if (lower === '.env' || lower.startsWith('.env.') || lower.endsWith('.env')) return 'env';
+  const ext = extOf(name);
+  if (ext === 'csv' || ext === 'tsv') return 'table';
+  if (ext === 'ipynb') return 'notebook';
+  if (ext === 'har') return 'har';
+  if (AUDIO_EXTS.has(ext)) return 'audio';
+  if (VIDEO_EXTS.has(ext)) return 'video';
+  if (FONT_EXTS.has(ext)) return 'font';
+  if (HEX_EXTS.has(ext)) return 'hex';
+  if (SQLITE_EXTS.has(ext)) return 'sqlite';
+  if (IMAGE_EXTS.has(ext)) return 'image';
+  if (ext === 'svg') return 'svg';
+  if (ext === 'pdf') return 'pdf';
+  if (ARCHIVE_EXTS.has(ext)) return 'archive';
+  const lang = langOfEffective(name);
+  if (lang === 'markdown' || lang === 'json' || lang === 'html') return lang;
+  return lang === 'text' ? 'text' : 'code';
+}