astro-dev-edit 0.11.0

package/src/client/editors/copy-panel.ts

@@ -0,0 +1,73 @@
+import { clearHighlight } from '../hover.ts';
+import { trapFocus } from '../focus.ts';
+import * as state from '../state.ts';
+import { buildBackdrop, buildPanel, footButton, inputEl, styled, toast } from '../ui.ts';
+import { mount } from '../shadow.ts';
+
+/**
+ * Clipboard fallback for the hover pill's `copy ⧉`: the gathered context shown
+ * in a read-only, preselected textarea with its own Copy button.
+ *
+ * Needed because `navigator.clipboard` is not always there to write to. A dev
+ * server opened over the network (http://192.168.x.x:4321, for a phone or a
+ * second machine) is not a secure context, so the API is simply absent; a
+ * permission policy or the lost user-activation after our `await` can also
+ * reject the write. The panel's own button is a fresh user gesture, and
+ * ⌘A/⌘C works even where every programmatic path is blocked.
+ */
+
+/** Show the context text for manual copying. `title` names the element. */
+export function openCopyPanel(title: string, text: string): void {
+  clearHighlight();
+  const panel = buildPanel(`Element context — ${title}`, undefined, { width: 'min(640px, 94vw)' });
+  const body = panel.querySelector('[data-body]') as HTMLElement;
+
+  const note = styled('p', 'atx-copy-note');
+  note.textContent =
+    'Your browser would not let the page write to the clipboard — over a network address the dev server is not a secure context. Copy it from here instead:';
+
+  const area = inputEl('textarea', 'atx-copy-text');
+  area.readOnly = true;
+  area.value = text;
+  body.append(note, area);
+
+  const close = (): void => {
+    state.releaseIf(token);
+    releaseFocus();
+    panel.remove();
+    backdrop.remove();
+  };
+  const backdrop = buildBackdrop(close);
+  const token = state.begin({ kind: 'panel', close });
+
+  /** Try both paths from a real click: the modern API first, then the legacy
+   *  command, which is the one that still works in an insecure context. */
+  const copyNow = async (): Promise<void> => {
+    area.focus();
+    area.select();
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      if (!document.execCommand('copy')) {
+        toast('Still blocked — select the text and press ⌘C / Ctrl+C', 'err');
+        return;
+      }
+    }
+    toast('Copied element context', 'ok');
+    close();
+  };
+
+  const foot = panel.querySelector('[data-foot]') as HTMLElement;
+  foot.append(
+    footButton('Close', 'outline', close),
+    footButton('Copy', 'default', () => void copyNow()),
+  );
+
+  mount(backdrop, panel);
+  const releaseFocus = trapFocus(panel);
+  // Preselected, so ⌘C works the moment the panel opens.
+  requestAnimationFrame(() => {
+    area.focus();
+    area.select();
+  });
+}

package/src/client/editors/drawer.ts

@@ -0,0 +1,95 @@
+import { trapFocus } from '../focus.ts';
+import * as state from '../state.ts';
+import { buildBackdrop, buildDrawer } from '../ui.ts';
+import { mount } from '../shadow.ts';
+
+/**
+ * Drawer lifecycle scaffold: shell + backdrop + interaction-state token +
+ * dirty-checked close, owned once so every drawer behaves identically. Callers
+ * fill `body`/`foot`/`actions` and wire their buttons to `close` (dirty check)
+ * or `teardown` (unconditional). ui.ts stays pure DOM; the state coupling
+ * lives here.
+ */
+
+export interface DrawerShell {
+  /** Scrollable content slot. */
+  body: HTMLElement;
+  /** Sticky footer slot. */
+  foot: HTMLElement;
+  /** Title-bar action slot. */
+  actions: HTMLElement;
+  /**
+   * Dirty-checked close — backdrop click, Escape and Cancel all end up here.
+   * Returns false when the user kept the drawer open at the discard prompt, so a
+   * caller that meant to *hand off* to another surface can stay put.
+   */
+  close(): boolean;
+  /** Remove the drawer unconditionally (after a successful save/create). */
+  teardown(): void;
+}
+
+export interface DrawerOpenOptions {
+  isDirty(): boolean;
+  /** window.confirm prompt shown when closing dirty. */
+  discardMessage: string;
+  /** CSS width override; see `ui.ts::DrawerOptions`. */
+  width?: string;
+  /** Second line under the title; see `ui.ts::DrawerOptions`. */
+  description?: string;
+  /** Chip beside the title; see `ui.ts::DrawerOptions`. */
+  badge?: HTMLElement;
+  /** Stacking layer. Needed when a drawer opens above something already
+   *  raised — the Settings drawer reached from the media modal's "no key
+   *  configured" card. */
+  layer?: number;
+  /** Run after the drawer is gone, however it closed. Lets the caller that
+   *  raised it resume — the Unsplash pane re-runs its search once a key
+   *  exists. */
+  onClose?(): void;
+  /**
+   * Hand the interaction slot back to whatever held it, instead of clearing it.
+   * Required when this drawer opened above another modal surface, which would
+   * otherwise stop owning the page's clicks once this one closes.
+   */
+  restoreState?: boolean;
+}
+
+export function openDrawer(title: string, opts: DrawerOpenOptions): DrawerShell {
+  const drawer = buildDrawer(title, {
+    ...(opts.width ? { width: opts.width } : {}),
+    ...(opts.description ? { description: opts.description } : {}),
+    ...(opts.badge ? { badge: opts.badge } : {}),
+    ...(opts.layer !== undefined ? { layer: opts.layer } : {}),
+  });
+  const body = drawer.querySelector('[data-body]') as HTMLElement;
+  const foot = drawer.querySelector('[data-foot]') as HTMLElement;
+  const actions = drawer.querySelector('[data-actions]') as HTMLElement;
+
+  const heldBefore = opts.restoreState ? state.get() : null;
+  const teardown = (): void => {
+    if (heldBefore) state.releaseTo(token, heldBefore);
+    else state.releaseIf(token);
+    releaseFocus();
+    drawer.remove();
+    backdrop.remove();
+    opts.onClose?.();
+  };
+  const close = (): boolean => {
+    if (opts.isDirty() && !window.confirm(opts.discardMessage)) {
+      // The slot may already be cleared (Escape path goes through dismiss);
+      // re-claim it so the drawer stays the active interaction.
+      token = state.begin({ kind: 'panel', close });
+      return false;
+    }
+    teardown();
+    return true;
+  };
+  const backdrop = buildBackdrop(close, opts.layer !== undefined ? opts.layer - 1 : undefined);
+  let token = state.begin({ kind: 'panel', close });
+
+  mount(backdrop, drawer);
+  // After mounting: a trap focuses its first control, and nothing in a drawer
+  // that is not in the document yet can take focus.
+  const releaseFocus = trapFocus(drawer);
+  return { body, foot, actions, close, teardown };
+}

package/src/client/editors/entry.ts

@@ -0,0 +1,433 @@
+import type { EntryResponse, FieldDescriptor } from '../../shared/protocol.ts';
+import * as api from '../api.ts';
+import { EntryApplyError } from '../api.ts';
+import { slugify } from '../../shared/slug.ts';
+import { pageSource } from '../page-source.ts';
+import * as state from '../state.ts';
+import { basename, footButton, toast } from '../ui.ts';
+import { card, fieldGroup } from '../group.ts';
+import { icon } from '../icons.ts';
+import { buildBodyEditor } from './body-editor.ts';
+import { openDrawer } from './drawer.ts';
+import { applyFieldErrors, buildControl, collectChanges, type FieldControl } from './fields.ts';
+
+/**
+ * The CMS entry drawers (edit + create): schema-driven forms over a collection
+ * entry's frontmatter plus its markdown body. Fields come from the server
+ * (/entry) — derived from the project's own zod schema when resolvable,
+ * inferred from the file's values otherwise — and render through the field
+ * registry in fields.ts; the drawer shell/lifecycle comes from drawer.ts.
+ * Saves are atomic and etag-guarded; Astro HMR refreshes the page afterwards.
+ */
+
+// ---------------------------------------------------------------------------
+// Shared pieces
+// ---------------------------------------------------------------------------
+
+/**
+ * Where the field list came from, said plainly. The drawer is schema-driven
+ * when the project's `content.config.ts` resolves and value-inferred when it
+ * does not, and that difference decides whether a missing field is a gap in
+ * the file or a gap in what the tool could work out — worth a line rather than
+ * something the user infers from which fields happen to be present.
+ */
+function fieldsOrigin(fields: readonly FieldDescriptor[]): string {
+  return fields.some((f) => f.source === 'schema')
+    ? "From the collection's schema."
+    : "Inferred from the file's own values.";
+}
+
+/** A card holding one run of fields. The drawer body is a stack of these, so
+ *  every group states what it is instead of running into the next. */
+function fieldCard(title: string, description: string, controls: readonly FieldControl[]): HTMLElement {
+  const c = card({ title, description });
+  const group = fieldGroup();
+  for (const ctl of controls) group.append(ctl.root);
+  c.body.append(group);
+  return c.root;
+}
+
+/** The header's corner action: one size down, and iconned, because it leaves
+ *  the drawer rather than completing it. */
+function newEntryButton(onClick: () => void): HTMLButtonElement {
+  const btn = footButton('New', 'outline', onClick);
+  btn.classList.add('atx-btn-sm');
+  btn.prepend(icon('plus', 16));
+  return btn;
+}
+
+/** URL of the listing above the current detail page (…/articles/x → …/articles). */
+function parentPath(): string {
+  const p = location.pathname.replace(/\/+$/, '');
+  const i = p.lastIndexOf('/');
+  return i <= 0 ? '/' : p.slice(0, i);
+}
+
+/** URL a sibling entry with `slug` would live at, by route convention. */
+function siblingPath(slug: string): string {
+  const parent = parentPath();
+  return (parent === '/' ? '' : parent) + '/' + slug;
+}
+
+/**
+ * Where a just-created entry is waiting to be opened, remembered across the
+ * reload that creating it causes.
+ *
+ * Writing the file makes Astro resync its content layer, which full-reloads the
+ * page — the very reload the poll below is waiting for the *result* of. A
+ * promise cannot survive that: the document it belongs to is gone, and with it
+ * the only record that anyone asked to go anywhere. The same `sessionStorage`
+ * trick that carries edit mode across a save carries the destination.
+ */
+const NAV_KEY = 'astroDevEditPendingNav';
+
+/** How long the poll runs, measured from the create — not from the boot that
+ *  resumed it, so a reload cannot extend the wait indefinitely. */
+const NAV_BUDGET_MS = 10_000;
+
+/** After this a remembered destination is stale — a poll that never finished
+ *  must not hijack an unrelated visit minutes later. */
+const NAV_TTL_MS = 30_000;
+
+function rememberNavigation(url: string | null, at = Date.now()): void {
+  try {
+    if (url) sessionStorage.setItem(NAV_KEY, JSON.stringify({ url, at }));
+    else sessionStorage.removeItem(NAV_KEY);
+  } catch {
+    // sessionStorage unavailable — the poll just won't survive a reload.
+  }
+}
+
+function readPendingNavigation(): { url: string; at: number } | null {
+  try {
+    const raw = sessionStorage.getItem(NAV_KEY);
+    if (!raw) return null;
+    const { url, at } = JSON.parse(raw) as { url?: string; at?: number };
+    if (!url || typeof at !== 'number' || Date.now() - at > NAV_TTL_MS) {
+      sessionStorage.removeItem(NAV_KEY);
+      return null;
+    }
+    return { url, at };
+  } catch {
+    return null;
+  }
+}
+
+const samePath = (a: string, b: string): boolean =>
+  a.replace(/\/+$/, '') === b.replace(/\/+$/, '');
+
+/**
+ * Pick a create's navigation back up after Astro's reload interrupted it.
+ * Called from the overlay's boot; does nothing when nothing is pending, and
+ * drops the record when this *is* the page it named.
+ */
+export function resumePendingNavigation(): void {
+  const pending = readPendingNavigation();
+  if (!pending) return;
+  if (samePath(location.pathname, pending.url)) {
+    rememberNavigation(null);
+    return;
+  }
+  void navigateWhenReady(pending.url, pending.at);
+}
+
+/** Navigate to a freshly created route once the content layer has synced it:
+ *  poll until it stops 404ing, then go. After ~10s give up and navigate
+ *  anyway, so a non-conventional detail route degrades to a visible 404
+ *  (reload once the sync lands) instead of stranding the user here. */
+async function navigateWhenReady(url: string, since = Date.now()): Promise<void> {
+  rememberNavigation(url, since);
+  const deadline = since + NAV_BUDGET_MS;
+  while (Date.now() < deadline) {
+    if (await api.routeExists(url)) break;
+    await new Promise((r) => setTimeout(r, 250));
+  }
+  // Consumed *before* the jump: arriving must never re-arm the poll, and a
+  // give-up landing on a route that still 404s must not loop on it either.
+  rememberNavigation(null);
+  location.assign(url);
+}
+
+// ---------------------------------------------------------------------------
+// Edit drawer
+// ---------------------------------------------------------------------------
+
+/** Fetch an entry and open the edit drawer for it. */
+export async function openEntryPanel(file: string): Promise<void> {
+  const busy = state.begin({ kind: 'busy' });
+  let entry: EntryResponse;
+  try {
+    entry = await api.getEntry({ file });
+  } catch (err) {
+    toast(`Could not load entry — ${err instanceof Error ? err.message : 'unknown error'}`, 'err');
+    return;
+  } finally {
+    state.releaseIf(busy);
+  }
+  showEditDrawer(entry);
+}
+
+function showEditDrawer(entry: EntryResponse): void {
+  const controls = entry.fields.map((f) =>
+    buildControl(f, entry.values[f.name], entry.file),
+  );
+  const bodyEditor = entry.bodyEditable ? buildBodyEditor(entry.body) : null;
+
+  const shell = openDrawer('Edit entry', {
+    description: entry.file,
+    isDirty: () => controls.some((c) => c.dirty()) || (bodyEditor?.dirty() ?? false),
+    discardMessage: 'Discard unsaved changes?',
+    // The body editor's writing surface is light-DOM (slotted in), so closing
+    // the drawer does not take it with it.
+    onClose: () => bodyEditor?.destroy(),
+  });
+
+  shell.body.append(fieldCard('Frontmatter', fieldsOrigin(entry.fields), controls));
+  if (bodyEditor) {
+    const bodyCard = card({ title: 'Body', description: 'Markdown, written straight to the file.' });
+    bodyCard.body.append(bodyEditor.root);
+    shell.body.append(bodyCard.root);
+  }
+
+  // "New" — only when the file maps to a known collection.
+  if (entry.collection) {
+    shell.actions.append(
+      newEntryButton(() => {
+        // Hand off through the dirty gate, not around it: teardown() is
+        // unconditional, so a draft in this drawer would go without being
+        // asked about — and there is no in-app undo to get it back.
+        if (!shell.close()) return;
+        showCreateDrawer(entry);
+      }),
+    );
+  }
+
+  const save = async (): Promise<void> => {
+    const changes: { frontmatter?: Record<string, unknown>; body?: string } = {};
+    const fm = collectChanges(controls);
+    if (Object.keys(fm).length > 0) changes.frontmatter = fm;
+    if (bodyEditor?.dirty()) changes.body = bodyEditor.value();
+    if (!changes.frontmatter && changes.body === undefined) {
+      shell.teardown();
+      return;
+    }
+    saveBtn.disabled = true;
+    saveBtn.textContent = 'Saving…';
+    try {
+      await api.applyEntry({ file: entry.file, etag: entry.etag, changes });
+      toast(`Saved ${basename(entry.file)}`, 'ok');
+      shell.teardown();
+    } catch (err) {
+      saveBtn.disabled = false;
+      saveBtn.textContent = 'Save';
+      if (err instanceof EntryApplyError && err.code === 'validation' && err.fieldErrors) {
+        applyFieldErrors(controls, err.fieldErrors);
+        toast('Fix the highlighted fields', 'err');
+      } else if (err instanceof EntryApplyError && err.code === 'conflict') {
+        toast('File changed on disk — reloading its current state', 'err');
+        shell.teardown();
+        void openEntryPanel(entry.file);
+      } else {
+        toast(`Save failed — ${err instanceof Error ? err.message : 'unknown error'}`, 'err');
+      }
+    }
+  };
+
+  const del = async (): Promise<void> => {
+    if (!window.confirm(`Delete ${basename(entry.file)}? (Undo is git.)`)) return;
+    try {
+      await api.deleteEntry({ file: entry.file, etag: entry.etag });
+      toast(`Deleted ${basename(entry.file)}`, 'ok');
+      shell.teardown();
+      // This page is about to 404 — land on the listing above it.
+      location.assign(parentPath());
+    } catch (err) {
+      toast(`Delete failed — ${err instanceof Error ? err.message : 'unknown error'}`, 'err');
+    }
+  };
+
+  const saveBtn = footButton('Save', 'default', () => void save());
+  const delBtn = footButton('Delete…', 'destructive', () => void del());
+  delBtn.prepend(icon('trash', 16));
+  // Delete first in the DOM is what puts it at the far end of the band — see
+  // the `:first-child` rule in styles.ts. Cancel is an outline rather than a
+  // ghost so the pair the user is choosing between reads as a pair.
+  shell.foot.append(delBtn, footButton('Cancel', 'outline', shell.close), saveBtn);
+}
+
+// ---------------------------------------------------------------------------
+// Create drawer
+// ---------------------------------------------------------------------------
+
+/**
+ * Everything the create drawer needs, independent of a loaded entry — so the
+ * collection designer's Items view can open it for a collection the user hasn't
+ * navigated to.
+ */
+export interface EntrySeed {
+  collection: string;
+  /** Repo-relative collection dir; relative asset values resolve against it. */
+  collectionDir: string | null;
+  /** Stand-in path for asset resolution when there is no collection dir. */
+  file: string;
+  /** Only `source: 'schema'` fields are offered — a new entry has no values to
+   *  infer from. */
+  fields: FieldDescriptor[];
+  /**
+   * What to do once the file exists, **including saying so** — a hook owns the
+   * whole outcome, because two toasts would stack on top of each other.
+   *
+   * The default navigates to the sibling detail route, which is right when the
+   * create started from a rendered page and wrong when it started anywhere
+   * else — the Collections tab, or an Items drawer showing another
+   * collection's entry. Hence the hook.
+   */
+  afterCreate?(file: string, slug: string): void;
+}
+
+/**
+ * Whether a sibling route is a defensible guess for a new entry alongside this
+ * one.
+ *
+ * The default post-create destination is derived from the browser's current
+ * path, on the assumption that the entry being created is a sibling of the
+ * page you are looking at. That holds only while the drawer is showing the
+ * entry that *backs* this page. Opened through Collections → Items it is
+ * showing an entry in some other collection entirely, and the "sibling" would
+ * be a route in the current page's family — a 404 for a create that fully
+ * succeeded, which reads as a failure and sends the author hunting for a file
+ * already on disk.
+ *
+ * A page that declares no backing entry can only have reached this drawer
+ * through Items, so a null reading is the same answer.
+ */
+function backsCurrentPage(file: string): boolean {
+  return pageSource() === file;
+}
+
+function showCreateDrawer(entry: EntryResponse): void {
+  openEntryCreatePanel({
+    collection: entry.collection!,
+    collectionDir: entry.collectionDir,
+    file: entry.file,
+    fields: entry.fields,
+    // Same rule the server keeps for Open page source: a destination that
+    // cannot be justified is refused, not guessed. Say where the file landed
+    // and stay put.
+    ...(backsCurrentPage(entry.file)
+      ? {}
+      : { afterCreate: (file: string) => toast(`Created ${file}`, 'ok') }),
+  });
+}
+
+/** The create drawer, opened from a seed rather than from a loaded entry. */
+export function openEntryCreatePanel(entry: EntrySeed): void {
+  const collection = entry.collection;
+
+  // Slug first: filename of the new entry, auto-suggested from the title
+  // while untouched.
+  const slugField: FieldDescriptor = {
+    name: 'slug', label: 'Slug (filename)', type: 'text',
+    required: true, present: false, source: 'schema',
+  };
+  const slugControl = buildControl(slugField, '');
+  const slugInput = slugControl.root.querySelector('input') as HTMLInputElement;
+  slugInput.placeholder = 'my-new-entry';
+
+  // A new entry has no path yet, but relative asset values only depend on the
+  // *directory* it will land in — which is the collection dir the create route
+  // writes to. Resolve against a placeholder sibling there.
+  const entryFile = entry.collectionDir ? `${entry.collectionDir}/_new.md` : entry.file;
+
+  // Only schema fields make sense for a brand-new entry. The descriptors
+  // describe the entry this drawer was opened from, where a key may well be
+  // present; in a file that does not exist yet none of them is, and `present`
+  // is what tells a control to offer the schema's default rather than to
+  // present its own idle state as a value.
+  const controls: FieldControl[] = entry.fields
+    .filter((f) => f.source === 'schema' && f.type !== 'json')
+    .map((f) => buildControl({ ...f, present: false }, undefined, entryFile));
+
+  const bodyEditor = buildBodyEditor('');
+
+  const shell = openDrawer('New entry', {
+    description: `in ${collection}`,
+    isDirty: () =>
+      slugInput.value !== '' || bodyEditor.dirty() || controls.some((c) => c.dirty()),
+    discardMessage: 'Discard this new entry?',
+    onClose: () => bodyEditor.destroy(),
+  });
+
+  // Three concerns, three cards. The slug is not frontmatter — it is the
+  // filename, and therefore the URL — so it gets said separately rather than
+  // sitting at the top of the field list looking like a key.
+  shell.body.append(
+    fieldCard('File', 'The filename, and the path it will be served at.', [slugControl]),
+    fieldCard('Frontmatter', fieldsOrigin(entry.fields), controls),
+  );
+  const bodyCard = card({ title: 'Body', description: 'Markdown, written straight to the file.' });
+  bodyCard.body.append(bodyEditor.root);
+  shell.body.append(bodyCard.root);
+
+  let slugTouched = false;
+  slugInput.addEventListener('input', () => (slugTouched = true));
+  const titleControl = controls.find((c) => c.field.name === 'title');
+  if (titleControl) {
+    const titleInput = titleControl.root.querySelector('input, textarea') as HTMLInputElement | null;
+    titleInput?.addEventListener('input', () => {
+      // The server re-runs the same slugify as the authority on create.
+      if (!slugTouched) slugInput.value = slugify(titleInput.value);
+    });
+  }
+
+  const create = async (): Promise<void> => {
+    const slug = slugInput.value.trim();
+    if (!slug) {
+      slugControl.setError('required');
+      return;
+    }
+    slugControl.setError(null);
+    const frontmatter: Record<string, unknown> = {};
+    for (const c of controls) {
+      // Only what was actually filled in. An untouched control has no value to
+      // contribute — it has an idle state, which is not the same thing, and
+      // writing it would override the schema's own default. A checkbox is
+      // where that bites: nobody chose Off, the box simply starts empty, and
+      // `published: false` in the file beats `.default(true)` in the schema.
+      if (!c.dirty()) continue;
+      const v = c.value();
+      const empty = v === '' || v === undefined || (Array.isArray(v) && v.length === 0);
+      if (!empty) frontmatter[c.field.name] = v;
+    }
+    createBtn.disabled = true;
+    createBtn.textContent = 'Creating…';
+    try {
+      const { file } = await api.createEntry({ collection, slug, frontmatter, body: bodyEditor.value() });
+      shell.teardown();
+      if (entry.afterCreate) {
+        entry.afterCreate(file, slug);
+      } else {
+        toast(`Created ${basename(file)}`, 'ok');
+        // Detail routes are conventionally siblings of the current page; the
+        // fresh route 404s until Astro's content layer syncs the new file.
+        void navigateWhenReady(siblingPath(slug));
+      }
+    } catch (err) {
+      createBtn.disabled = false;
+      createBtn.textContent = 'Create';
+      if (err instanceof EntryApplyError && err.code === 'validation' && err.fieldErrors) {
+        applyFieldErrors(controls, err.fieldErrors);
+        toast('Fix the highlighted fields', 'err');
+      } else if (err instanceof EntryApplyError && err.code === 'exists') {
+        slugControl.setError(err.message);
+        toast('That slug is taken', 'err');
+      } else {
+        toast(`Create failed — ${err instanceof Error ? err.message : 'unknown error'}`, 'err');
+      }
+    }
+  };
+
+  const createBtn = footButton('Create', 'default', () => void create());
+  shell.foot.append(footButton('Cancel', 'outline', shell.close), createBtn);
+  slugInput.focus();
+}

package/src/client/editors/expression.ts

@@ -0,0 +1,77 @@
+import type { SourceLoc } from '../../shared/protocol.ts';
+import * as api from '../api.ts';
+import { clearHighlight } from '../hover.ts';
+import * as state from '../state.ts';
+import { basename, lockElement, toast } from '../ui.ts';
+import { openSourcePopup } from './source-popup.ts';
+
+/**
+ * Value popup: for text the page renders through an `{expression}` — a
+ * frontmatter const, or one item of an array a `.map()` loops over. The words
+ * are edited here and written back to that string in the frontmatter; the
+ * template itself is never touched.
+ *
+ * Deliberately a popup rather than inline editing, and deliberately titled
+ * with where the value lives (`benefits[].title`): what you are changing is a
+ * constant that may be rendered in more than one place, which is worth knowing
+ * before you type.
+ *
+ * **Plain text only, no markup palette.** `{value}` renders escaped in Astro,
+ * so a `<br>` typed here would show as visible punctuation rather than a line
+ * break. Offering the palette would promise something the template can't do.
+ *
+ * The text sent is the text the page showed, and for a loop it is the *only*
+ * thing that says which item was clicked — every card shares one source loc.
+ * Two items reading the same way refuse rather than guess.
+ */
+
+export function beginExpressionEdit(
+  el: HTMLElement,
+  src: SourceLoc,
+  info: { property: string; label: string },
+  openSource: (src: SourceLoc) => void,
+): void {
+  clearHighlight();
+  const original = el.textContent ?? '';
+  openSourcePopup({
+    title: `Value · ${info.label}`,
+    label: `Text of ${info.property}, in ${basename(src.file)}`,
+    value: original,
+    minHeight: '90px',
+    // The element's own loc: that is where the {expression} sits, which is the
+    // way in to both the loop and the const it reads.
+    openSource: () => openSource(src),
+    save: (value) => commitExpressionEdit(el, src, original, value),
+  });
+}
+
+/** Writes the edit. Resolves to null on success, or the refusal message. */
+async function commitExpressionEdit(
+  el: HTMLElement,
+  src: SourceLoc,
+  original: string,
+  newText: string,
+): Promise<string | null> {
+  const busy = state.begin({ kind: 'busy' });
+  const release = lockElement(el);
+  state.setSavePhase('saving');
+  try {
+    await api.apply({
+      file: src.file,
+      loc: src.loc,
+      tag: el.tagName.toLowerCase(),
+      ops: [{ targetType: 'expression', original, newText }],
+    });
+    state.setSavePhase('saved');
+    toast(`Saved — ${basename(src.file)}`, 'ok');
+    // HMR re-renders from the frontmatter; every place that value appears
+    // updates with it, which is exactly why the popup names where it lives.
+    return null;
+  } catch (err) {
+    state.setSavePhase('error');
+    return err instanceof Error ? err.message : 'The edit could not be saved.';
+  } finally {
+    release();
+    state.releaseIf(busy);
+  }
+}