Free Text, written from inside the page

Every column gets Add component; every component in one gets Edit and Delete, drawn ON the rendered
thing rather than replacing it. An editor that swaps content for a placeholder is showing you the
editor, not the page — and free text with nothing in it renders as nothing, so the outline is the only
thing saying it is there.

Add component opens the editor STRAIGHT AWAY. Free Text is the only kind, and one option is not a
choice: a picker offering it would be a click asking to be got past. The picker arrives with the second
kind, which is when it starts meaning something.

The add button is quieter than Add section. This is the inner loop, and a control as loud as the one
that adds a whole band would make every column shout.

── The dialog, and the limitation worth naming ──

Editing happens in a modal, not in the page. In-place is the obvious idea and a much bigger one: the
toolbar would have to live in a document the site owns, the site's typography would fight it, and every
keystroke would cross into another document. The dialog is where a working editor already exists, and
it costs a modal instead of a rewrite.

So what you type is not laid out in the page until you save. The preview reloads immediately after, so
the loop is short — but it is a loop, and direct manipulation is what a page builder eventually wants.

The editor is keyed on the stored html, so opening a different component rebuilds it rather than
reusing one still holding the last component's document. Empty text saves: clearing a paragraph is
deleting its words, not abandoning the edit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/canvas.ts

@@ -42,12 +42,25 @@ const MARK = 'data-fofos-admin-canvas';
 /** The editor's own colour. Deliberately not the site's — this is chrome, and it should not blend in. */
 const ACCENT = '#3b82f6';
 
-export type CanvasSection = { id: number; name: string; layout: 'one' | 'two' };
+/**
+ * A component, as the canvas needs it.
+ *
+ * `content` is carried even though nothing in this file draws it: the panel reads it back when somebody
+ * presses Edit, and it arrived with the section. Fetching it again on every Edit would be a request to
+ * be told something already in hand.
+ */
+export type CanvasComponent = { id: number; column: number; kind: string; content?: { html?: string } };
+export type CanvasSection = { id: number; name: string; layout: 'one' | 'two'; components: CanvasComponent[] };
 
 export type Canvas = {
   sections: CanvasSection[];
   onAddSection: () => void;
   onDeleteSection: (section: CanvasSection) => void;
+  /** A column wants something in it. */
+  onAddComponent: (section: CanvasSection, column: number) => void;
+  /** Something already in a column was pressed. */
+  onEditComponent: (component: CanvasComponent) => void;
+  onDeleteComponent: (component: CanvasComponent) => void;
 };
 
 /**
@@ -181,14 +194,107 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
       identical until something is in them — which is exactly when it is too late to notice you chose
       the wrong one.
     */
-    element.querySelectorAll<HTMLElement>('[data-column]').forEach((column) => {
-      const was = column.style.outline;
-      const wasOffset = column.style.outlineOffset;
-      column.style.outline = `1px dashed color-mix(in srgb, ${ACCENT} 45%, transparent)`;
-      column.style.outlineOffset = '-5px';
+    element.querySelectorAll<HTMLElement>('[data-column]').forEach((columnElement, columnIndex) => {
+      const was = columnElement.style.outline;
+      const wasOffset = columnElement.style.outlineOffset;
+      columnElement.style.outline = `1px dashed color-mix(in srgb, ${ACCENT} 45%, transparent)`;
+      columnElement.style.outlineOffset = '-5px';
       undo.push(() => {
-        column.style.outline = was;
-        column.style.outlineOffset = wasOffset;
+        columnElement.style.outline = was;
+        columnElement.style.outlineOffset = wasOffset;
+      });
+
+      /*
+        Every component in this column gets a handle.
+
+        Drawn ON the rendered component rather than replacing it — an editor that swaps content for a
+        placeholder is showing you the editor, not the page. Free text with nothing written in it
+        renders as nothing, so the outline is the only thing saying it is there at all.
+      */
+      const mine = section.components.filter((component) => component.column === columnIndex);
+      for (const component of mine) {
+        const node = columnElement.children[mine.indexOf(component)] as HTMLElement | undefined;
+        if (!node) continue;
+
+        const wasPosition = node.style.position;
+        const wasOutline = node.style.outline;
+        node.style.position = 'relative';
+        node.style.outline = `1px dotted color-mix(in srgb, ${ACCENT} 60%, transparent)`;
+        undo.push(() => {
+          node.style.position = wasPosition;
+          node.style.outline = wasOutline;
+        });
+
+        const tools = document.createElement('div');
+        tools.setAttribute(MARK, 'component-tools');
+        style(tools, [
+          'position:absolute',
+          'top:0',
+          'right:0',
+          'display:flex',
+          'gap:0.5rem',
+          'padding:0.125rem 0.25rem',
+          'font-size:0.625rem',
+          'font-family:ui-sans-serif, system-ui, sans-serif',
+          `color:${ACCENT}`,
+          'background:var(--site-bg, #fff)',
+        ]);
+
+        for (const [label, run] of [
+          ['Edit', () => canvas.onEditComponent(component)],
+          ['Delete', () => canvas.onDeleteComponent(component)],
+        ] as const) {
+          const action = document.createElement('button');
+          action.type = 'button';
+          action.textContent = label;
+          style(action, [
+            'cursor:pointer',
+            'background:none',
+            'border:0',
+            'padding:0',
+            'font:inherit',
+            'color:inherit',
+            'text-decoration:underline',
+          ]);
+          action.addEventListener('click', run);
+          undo.push(() => action.removeEventListener('click', run));
+          tools.append(action);
+        }
+
+        node.append(tools);
+        undo.push(() => tools.remove());
+      }
+
+      /*
+        And a way to put something in it.
+
+        One per column, always at the bottom, so a column that already has three paragraphs still has
+        somewhere obvious to add a fourth. Quieter than Add section — this is the inner loop, and a
+        button as loud as the one that adds a whole band would make every column shout.
+      */
+      const add = document.createElement('button');
+      add.setAttribute(MARK, 'add-component');
+      add.type = 'button';
+      add.textContent = '+ Add component';
+      style(add, [
+        'display:block',
+        'width:100%',
+        'margin-top:0.75rem',
+        'padding:0.5rem',
+        'cursor:pointer',
+        'background:none',
+        `border:1px dashed color-mix(in srgb, ${ACCENT} 40%, transparent)`,
+        'border-radius:0.375rem',
+        `color:${ACCENT}`,
+        'font-family:ui-sans-serif, system-ui, sans-serif',
+        'font-size:0.75rem',
+      ]);
+      const onAdd = () => canvas.onAddComponent(section, columnIndex);
+      add.addEventListener('click', onAdd);
+      columnElement.append(add);
+      undo.push(() => {
+        add.removeEventListener('click', onAdd);
+        add.remove();
       });
     });
   }