@valentinkolb/cloud 0.4.0 → 0.5.0

package/src/styles/utilities-script.css

@@ -0,0 +1,84 @@
+/* `\`\`\`script` block styling — both edit-mode (CodeMirror widget)
+   and read-mode (rendered HTML).
+
+   Markup contract:
+     <div class="md-script-block" data-script-source="<base64>">  ← read-mode wrapper
+       <pre class="md-script-source"> ... source ... </pre>
+       <div class="md-script-output"></div>
+     </div>
+
+   In edit-mode the CM6 extension just emits a bare
+   `<div class="md-script-output">` (no wrapper); the source stays
+   visible as the underlying fenced code.
+
+   Read-mode-active state: when `enhanceReadModeScripts` runs the
+   block, it adds `.md-script-active` to the wrapper, which hides
+   the source `<pre>` so the user only sees the widget output. The
+   source is preserved for view-source / a11y. */
+
+.md-script-block.md-script-active .md-script-source {
+  display: none;
+}
+
+/* The output container itself — used by both edit + read modes.
+   Slight padding so widgets don't touch the surrounding text /
+   code-fence edges; no border (the rendered widget supplies its
+   own affordances). */
+.md-script-output {
+  padding: 0.25rem 0;
+  /* Empty output (e.g. a script that only does background work)
+     should collapse to zero height — no minimum height here. */
+}
+
+/* Error path — `runner.ts:renderError` adds the `md-script-error`
+   class to the output container alongside the rendered error
+   block. The class is just a marker today (the inline error block
+   carries its own styles) but reserved for future use, e.g. a
+   notification dot in the script-block frame. */
+.md-script-output.md-script-error {
+  /* No additional rules yet; reserved. */
+}
+
+/* Script UI buttons use the shared button utilities, with a subtle
+   dynamic tint so they read as actions inside generated script output
+   rather than tag-like pills. */
+.md-script-button.btn-primary {
+  border-color: color-mix(in oklab, rgb(59 130 246) 72%, transparent);
+  background-image:
+    linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 42%),
+    linear-gradient(135deg, rgb(59 130 246), rgb(34 197 94));
+  color: white;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.34),
+    inset 0 -1px 1px rgb(0 0 0 / 0.2);
+}
+
+.md-script-button.btn-primary:hover {
+  border-color: color-mix(in oklab, rgb(59 130 246) 88%, white 12%);
+  background-image:
+    linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 44%),
+    linear-gradient(135deg, color-mix(in oklab, rgb(59 130 246) 92%, black), color-mix(in oklab, rgb(34 197 94) 92%, black));
+  color: white;
+  filter: saturate(1.08);
+}
+
+.md-script-button.btn-primary:active {
+  box-shadow:
+    inset 0 2px 4px rgb(0 0 0 / 0.28),
+    inset 0 1px 1px rgb(0 0 0 / 0.14);
+}
+
+.dark .md-script-button.btn-primary {
+  border-color: color-mix(in oklab, rgb(96 165 250) 62%, transparent);
+  background-image:
+    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 42%),
+    linear-gradient(135deg, rgb(37 99 235), rgb(20 184 166));
+  color: white;
+}
+
+.dark .md-script-button.btn-primary:hover {
+  background-image:
+    linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 44%),
+    linear-gradient(135deg, rgb(29 78 216), rgb(13 148 136));
+  color: white;
+}

package/src/styles/utilities-table-tile.css

@@ -0,0 +1,229 @@
+/* Tile-style markdown tables — every cell is a self-contained rounded
+   rectangle on a soft background, with 4px gaps between. Used by both
+   the server-side `marked` renderer and the CodeMirror table widget so
+   read-mode and edit-mode look identical.
+
+   Three-layer markup:
+     <div class="md-table-wrap">      ← horizontal scroll owner
+       <table class="md-table">       ← layout reset + height-1px chain
+         <thead><tr><th>
+           <span class="md-table-cell">  ← visible tile (bg + radius)
+   See https://www.notion.so etc — same pattern for the same reason: the
+   inner span ensures uniform border-radius on every cell with no
+   first/last edge cases. */
+
+.md-table-wrap {
+  overflow-x: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* `height: 1px` is the trick — it gives the table an explicit height
+   reference so children's `height: 100%` resolves. The table grows past
+   1px to fit content; the 1px purely enables percentage children. */
+.md-table {
+  width: 100%;
+  border-collapse: collapse;
+  height: 1px;
+  border: 0;
+}
+
+/* `@tailwindcss/typography` (`prose` class) puts a `border-bottom` on
+   `thead` AND every `tbody tr`. The tile look already separates rows
+   visually via the 4px gap + per-cell radius, so we reset all
+   table/row/cell borders to keep the surface clean. Our utility CSS
+   is loaded AFTER the typography plugin in `global.css` → same
+   specificity, later wins. */
+.md-table thead,
+.md-table tbody,
+.md-table thead tr,
+.md-table tbody tr,
+.md-table th,
+.md-table td {
+  border: 0;
+}
+
+.md-table th,
+.md-table td {
+  padding: 0;
+  height: 100%;
+  vertical-align: top;
+  /* Per-cell minimum width — the table's own `width: 100%` keeps it
+     fitted to the wrap when content is narrow, but `min-width` here
+     gives every column a readable floor and triggers the wrap div's
+     `overflow-x: auto` once the sum exceeds the available width. */
+  min-width: 7rem;
+}
+
+/* Gaps via adjacent-sibling padding (NOT border-spacing — that would
+   add outer space and trigger spurious horizontal scroll). */
+.md-table th + th,
+.md-table td + td {
+  padding-left: 4px;
+}
+
+.md-table tbody tr + tr > *,
+.md-table thead + tbody tr:first-child > * {
+  padding-top: 4px;
+}
+
+/* Body cells: filled zinc tiles. They intentionally avoid hairline
+   borders; the fill + crisp inset edge separates cells from the page
+   without reading like a button. */
+.md-table-cell {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.35rem;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0.46rem 0.68rem 0.52rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: color-mix(in oklab, rgb(244 244 245) 78%, white);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.56),
+    inset 0 -1px 0 rgb(24 24 27 / 0.035);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+  color: rgb(24 24 27); /* zinc-900 */
+}
+
+.dark .md-table-cell {
+  background: color-mix(in oklab, rgb(24 24 27) 88%, rgb(39 39 42));
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.045),
+    inset 0 -1px 0 rgb(0 0 0 / 0.26);
+  color: rgb(244 244 245); /* zinc-100 */
+}
+
+/* Header tiles: one shade darker than body + medium weight. Subtle
+   bg-shift only — no accent line, no caps, no shouting. Headers also
+   get `nowrap` so they don't ever break char-by-char even if the
+   widest body cell still pushes the column past the 7 rem floor. */
+.md-table thead .md-table-cell {
+  background: color-mix(in oklab, rgb(244 244 245) 74%, rgb(228 228 231));
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.dark .md-table thead .md-table-cell {
+  background: color-mix(in oklab, rgb(39 39 42) 88%, rgb(24 24 27));
+}
+
+/* Per-column alignment from `:---:` syntax. Marked / our parser map
+   that to one of these classes; default is left. */
+.md-table-cell.md-align-right {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+.md-table-cell.md-align-center {
+  text-align: center;
+  justify-content: center;
+}
+
+/* "Total" / summary rows — when ≥50 % of a row's formula cells are
+   aggregates (`SUM`, `AVG`, …) the renderer tags the `<tr>` with this
+   class. Body cells in such rows render with bumped weight + a stable
+   tile bg one shade darker than the regular zinc-50 floor, so the
+   summary visually anchors the bottom of the table. */
+.md-table tbody tr.md-table-total-row .md-table-cell {
+  font-weight: 600;
+  background: color-mix(in oklab, rgb(244 244 245) 74%, rgb(228 228 231));
+}
+
+.dark .md-table tbody tr.md-table-total-row .md-table-cell {
+  background: color-mix(in oklab, rgb(39 39 42) 88%, rgb(24 24 27));
+}
+
+/* Formula-OK cells: blue text + `ti-math-function` icon prefix so the
+   reader can tell which values are computed vs hand-typed. Hover
+   title shows the original formula. */
+.md-table-cell.md-formula-ok {
+  color: rgb(37 99 235); /* blue-600 */
+  cursor: help;
+}
+
+.md-table-cell.md-formula-ok > i.ti {
+  margin-right: 0.25rem;
+  font-size: 0.75rem;
+  opacity: 0.7;
+  line-height: 1.35;
+  transform: translateY(0.04em);
+}
+
+.dark .md-table-cell.md-formula-ok {
+  color: rgb(96 165 250); /* blue-400 */
+}
+
+/* CodeMirror inline live-preview after each `=...` cell when the
+   table source is visible (cursor inside the table). Greyed out so
+   it's clearly virtual / not part of the markdown. Errors switch to
+   red to mirror the read-mode error styling.
+
+   The OK variant is click-to-copy (handled in tables.ts). Hover gets
+   underline + pointer cursor as the affordance. Errors stay inert —
+   `pointer-events: none` blocks any interaction, leaving CM to handle
+   clicks at the underlying source position. */
+.cm-formula-preview {
+  color: rgb(113 113 122); /* zinc-500 */
+  font-style: italic;
+  font-size: 0.85em;
+  opacity: 0.7;
+  user-select: none;
+}
+
+.cm-formula-preview:hover {
+  text-decoration: underline;
+  cursor: pointer;
+  opacity: 1;
+}
+
+.dark .cm-formula-preview {
+  color: rgb(161 161 170); /* zinc-400 */
+}
+
+.cm-formula-preview-error {
+  color: rgb(220 38 38); /* red-600 */
+  font-style: normal;
+  pointer-events: none;
+}
+
+.cm-formula-preview-error:hover {
+  text-decoration: none;
+  cursor: default;
+}
+
+.dark .cm-formula-preview-error {
+  color: rgb(248 113 113); /* red-400 */
+}
+
+/* Brief post-copy state — green, no italic, stable through hover. */
+.cm-formula-preview-copied,
+.cm-formula-preview-copied:hover {
+  color: rgb(22 163 74); /* green-600 */
+  font-style: normal;
+  text-decoration: none;
+  opacity: 1;
+}
+
+.dark .cm-formula-preview-copied,
+.dark .cm-formula-preview-copied:hover {
+  color: rgb(74 222 128); /* green-400 */
+}
+
+/* Formula-error cells render the original formula in red so the user
+   spots the broken cell immediately. The full diagnostic (with
+   "did-you-mean" suggestion when available) lives in the `title`
+   attribute → hover tooltip. */
+.md-table-cell.md-formula-error {
+  color: rgb(220 38 38); /* red-600 */
+  background-color: rgb(254 242 242); /* red-50 */
+  cursor: help;
+}
+
+.dark .md-table-cell.md-formula-error {
+  color: rgb(248 113 113); /* red-400 */
+  background-color: rgb(127 29 29 / 0.25); /* red-900 / 25% */
+}

package/src/types/ambient.d.ts

@@ -6,3 +6,12 @@ declare module "*.md" {
   const content: string;
   export default content;
 }
+
+declare module "@babel/core" {
+  export const types: typeof import("@babel/types");
+
+  export function transformAsync(
+    source: string,
+    options: Record<string, unknown>,
+  ): Promise<{ code?: string } | null>;
+}

package/src/ui/completion/behaviors.test.ts

@@ -0,0 +1,95 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import type { QueryContext, Suggestion } from "./engine";
+import { applySuggestion, resetCompletionState, tryRestore } from "./behaviors";
+
+type FakeTextarea = HTMLTextAreaElement & {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+  setSelectionRange: (start: number, end: number) => void;
+};
+
+let activeTextarea: FakeTextarea | null = null;
+const originalDocument = globalThis.document;
+
+const installExecCommand = () => {
+  globalThis.document = {
+    execCommand: (_command: string, _showUi: boolean, value: string) => {
+      if (!activeTextarea) return false;
+      const start = activeTextarea.selectionStart;
+      const end = activeTextarea.selectionEnd;
+      activeTextarea.value = `${activeTextarea.value.slice(0, start)}${value}${activeTextarea.value.slice(end)}`;
+      activeTextarea.selectionStart = start + value.length;
+      activeTextarea.selectionEnd = start + value.length;
+      return true;
+    },
+  } as Document;
+};
+
+const textarea = (value: string): FakeTextarea =>
+  ({
+    value,
+    selectionStart: 0,
+    selectionEnd: 0,
+    setSelectionRange(start: number, end: number) {
+      activeTextarea = this;
+      this.selectionStart = start;
+      this.selectionEnd = end;
+    },
+  }) as FakeTextarea;
+
+const ctx = (text: string): QueryContext => ({
+  start: 0,
+  end: text.length,
+  text,
+  query: text,
+  completion: { suggest: () => [] },
+});
+
+const fieldSuggestion: Suggestion = {
+  text: "Units",
+  expansion: "#Wf87H",
+  label: "Units",
+};
+
+afterEach(() => {
+  resetCompletionState();
+  activeTextarea = null;
+  globalThis.document = originalDocument;
+});
+
+describe("completion behaviours", () => {
+  test("accepted expansion restores to display text by default", () => {
+    installExecCommand();
+    const el = textarea("Units");
+
+    expect(applySuggestion(el, ctx("Units"), fieldSuggestion)).toBe(true);
+    expect(el.value).toBe("#Wf87H ");
+
+    expect(tryRestore(el)).toBe(true);
+    expect(el.value).toBe("Units ");
+  });
+
+  test("accepted expansion can opt out of Backspace restore tracking", () => {
+    installExecCommand();
+    const el = textarea("Units");
+
+    expect(applySuggestion(el, ctx("Units"), fieldSuggestion, { trackExpansion: false })).toBe(true);
+    expect(el.value).toBe("#Wf87H ");
+
+    expect(tryRestore(el)).toBe(false);
+    expect(el.value).toBe("#Wf87H ");
+  });
+
+  test("applies explicit suggestion text edits", () => {
+    installExecCommand();
+    const el = textarea("from table Ord\nselect Amount");
+    const suggestion: Suggestion = {
+      text: "Orders",
+      textEdit: { start: "from table ".length, end: "from table Ord".length, text: "Orders" },
+    };
+
+    expect(applySuggestion(el, ctx("Ord"), suggestion)).toBe(true);
+    expect(el.value).toBe("from table Orders\nselect Amount");
+  });
+});

package/src/ui/completion/behaviors.ts

@@ -0,0 +1,205 @@
+/**
+ * DOM-bound completion behaviours. Each function mutates a textarea
+ * via `document.execCommand("insertText", …)` so the native undo
+ * stack stays usable.
+ *
+ * State lives at module scope (`lastExpansion`, `suppressNextExpansion`)
+ * because only one cursor / one expansion exists at a time. Module
+ * scope keeps the API stateless from the caller's perspective.
+ *
+ * Re-entrancy: `execCommand` fires a synchronous `input` event. If
+ * `tryExpand` runs in that handler and itself calls `execCommand`, we
+ * arm `suppressNextExpansion` so the NEXT input event (the one
+ * triggered by the expansion's own insertion) skips the expand check
+ * — otherwise an expansion's tail could cascade into another match.
+ */
+
+import { type Completion, type QueryContext, type Suggestion, type SuggestContext, TRIGGER_CHARS, WORD_CHAR, suggestSync } from "./engine";
+
+type LastExpansion = {
+  textarea: HTMLTextAreaElement;
+  startOffset: number;
+  originalWord: string;
+  triggerChar: string;
+  expansion: string;
+};
+
+let lastExpansion: LastExpansion | null = null;
+let suppressNextExpansion = false;
+
+/** Reset module-level state. Call on editor blur or unmount so a
+ *  stale expansion record doesn't leak across editor instances. */
+export const resetCompletionState = (): void => {
+  lastExpansion = null;
+  suppressNextExpansion = false;
+};
+
+/** Find the first sync suggestion whose `text === word` and that
+ *  carries an `expansion`. Returns null when nothing matches OR when
+ *  no plain completion provides a sync result. */
+const findExpansion = (
+  word: string,
+  completions: Completion[],
+  ctx: SuggestContext,
+): { suggestion: Suggestion; completion: Completion } | null => {
+  for (const c of completions) {
+    if (c.trigger !== undefined) continue;
+    const list = suggestSync(c, word, ctx);
+    if (!list) continue;
+    const exact = list.find((s) => s.text === word && s.expansion && s.expansion !== word);
+    if (exact) return { suggestion: exact, completion: c };
+    const lower = word.toLowerCase();
+    const ci = list.find((s) => s.text.toLowerCase() === lower && s.expansion && s.expansion !== word);
+    if (ci) return { suggestion: ci, completion: c };
+  }
+  return null;
+};
+
+export type TryExpandOptions = {
+  /** Optional predicate to suppress expansion at a position (e.g.
+   *  markdown code spans). Default: never suppress. */
+  isExcluded?: (text: string, pos: number) => boolean;
+};
+
+/**
+ * If the user just typed a word-boundary char AND the preceding word
+ * has a registered `expansion` AND the position passes `isExcluded`,
+ * replace the word with its expansion via `execCommand`. Returns true
+ * if an expansion happened — caller should treat that as "consumed"
+ * and not run the normal input pipeline.
+ */
+export const tryExpand = (
+  textarea: HTMLTextAreaElement,
+  completions: Completion[] | undefined,
+  options: TryExpandOptions = {},
+): boolean => {
+  if (suppressNextExpansion) {
+    suppressNextExpansion = false;
+    return false;
+  }
+  if (!completions || completions.length === 0) return false;
+
+  const value = textarea.value;
+  const caret = textarea.selectionStart;
+  if (caret === 0 || caret !== textarea.selectionEnd) return false;
+
+  const triggerChar = value[caret - 1];
+  if (!triggerChar || !TRIGGER_CHARS.has(triggerChar)) return false;
+
+  let wordEnd = caret - 1;
+  let wordStart = wordEnd;
+  while (wordStart > 0 && WORD_CHAR.test(value[wordStart - 1]!)) wordStart--;
+  if (wordStart === wordEnd) return false;
+
+  const word = value.slice(wordStart, wordEnd);
+  if (options.isExcluded?.(value, wordStart)) return false;
+
+  const ctx: SuggestContext = { fullText: value, caret, tokenStart: wordStart };
+  const hit = findExpansion(word, completions, ctx);
+  if (!hit) return false;
+  const { suggestion } = hit;
+  if (!suggestion.expansion || suggestion.expansion === word) return false;
+
+  const replacement = suggestion.expansion + triggerChar;
+  textarea.setSelectionRange(wordStart, caret);
+  document.execCommand("insertText", false, replacement);
+
+  lastExpansion = {
+    textarea,
+    startOffset: wordStart,
+    originalWord: word,
+    triggerChar,
+    expansion: suggestion.expansion,
+  };
+  suppressNextExpansion = true;
+  return true;
+};
+
+/**
+ * Backspace IMMEDIATELY after an expansion reverts to the original
+ * short form + trigger. Returns true if a restore happened — caller
+ * should `preventDefault` to suppress the native backspace.
+ */
+export const tryRestore = (textarea: HTMLTextAreaElement): boolean => {
+  const last = lastExpansion;
+  if (!last || last.textarea !== textarea) return false;
+
+  const value = textarea.value;
+  const tail = last.startOffset + last.expansion.length + last.triggerChar.length;
+  if (textarea.selectionStart !== tail || textarea.selectionEnd !== tail) return false;
+
+  const expected = last.expansion + last.triggerChar;
+  if (value.slice(last.startOffset, tail) !== expected) return false;
+
+  suppressNextExpansion = true;
+  textarea.setSelectionRange(last.startOffset, tail);
+  document.execCommand("insertText", false, last.originalWord + last.triggerChar);
+
+  lastExpansion = null;
+  return true;
+};
+
+/**
+ * Insert a selected suggestion at the query position. Replaces the
+ * typed prefix with either `suggestion.expansion` (when present —
+ * abbreviation-style: Tab is shortcut for "type the rest + space")
+ * or `suggestion.text` (triggered completions).
+ *
+ * Always appends a space UNLESS the next char is already a literal
+ * space / tab. Records `lastExpansion` for direct expansions so
+ * Backspace afterwards reverts to the short form, matching the
+ * contract of manual word-boundary expansion.
+ *
+ * The expansion is done as a SINGLE `execCommand` rather than
+ * inserting the abbreviation and waiting for `tryExpand` to fire on
+ * the trailing space — nested execCommand inside an input handler is
+ * unreliable in some browsers (the inner call's selection-replace can
+ * be silently dropped, leaving the abbreviation selected).
+ */
+export const applySuggestion = (
+  textarea: HTMLTextAreaElement,
+  ctx: QueryContext,
+  suggestion: Suggestion,
+  options: { trackExpansion?: boolean } = {},
+): boolean => {
+  if (suggestion.textEdit) {
+    const { start, end, text } = suggestion.textEdit;
+    if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end > textarea.value.length) {
+      return false;
+    }
+    if (textarea.value.slice(start, end) === text) return false;
+    textarea.setSelectionRange(start, end);
+    document.execCommand("insertText", false, text);
+    return true;
+  }
+
+  const baseText = suggestion.expansion ?? suggestion.text;
+  if (baseText === ctx.text) return false;
+
+  // Don't append a space when the suggestion ends with an opening
+  // bracket — that's a signal the user wants to keep typing INSIDE
+  // (e.g. `=SUM(` → cursor right after `(`, not after a space). A
+  // trailing space would also break chained completions: `=SUM( r`
+  // can't activate the `(` trigger because the trigger char is no
+  // longer directly before the word.
+  const nextChar = textarea.value[ctx.end];
+  const alreadySeparated = nextChar === " " || nextChar === "\t";
+  const opensScope = /[([{]$/.test(baseText);
+  const shouldAppendSpace = suggestion.appendSpace ?? true;
+  const insertText = alreadySeparated || opensScope || !shouldAppendSpace ? baseText : baseText + " ";
+
+  textarea.setSelectionRange(ctx.start, ctx.end);
+  document.execCommand("insertText", false, insertText);
+
+  if ((options.trackExpansion ?? true) && suggestion.expansion !== undefined && suggestion.expansion !== suggestion.text) {
+    lastExpansion = {
+      textarea,
+      startOffset: ctx.start,
+      originalWord: suggestion.text,
+      triggerChar: alreadySeparated || opensScope || !shouldAppendSpace ? "" : " ",
+      expansion: suggestion.expansion,
+    };
+    suppressNextExpansion = true;
+  }
+  return true;
+};