@cancia/toolbar 0.0.1 → 0.1.0

package/dist/cancia.js

@@ -189,6 +189,14 @@ async function deleteListEntry(listName, id, locale) {
   );
   if (!res.ok) throw new Error(`Cancia: failed to delete entry (${res.status})`);
 }
+async function reorderList(listName, ids) {
+  const { apiUrl, site } = state.config;
+  const res = await fetch(
+    `${apiUrl}/api/cancia/lists/${encodeURIComponent(listName)}/reorder?site=${encodeURIComponent(site)}`,
+    { method: "POST", headers: headers(), body: JSON.stringify({ ids }) }
+  );
+  if (!res.ok) throw new Error(`Cancia: failed to reorder list (${res.status})`);
+}
 async function flushPending() {
   const entries = Array.from(state.pending.values());
   const results = await Promise.allSettled(
@@ -958,11 +966,55 @@ function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function formatExcerpt(value, maxLength = 120) {
-  if (typeof value !== "string") return "";
-  const trimmed = value.trim();
+  const text = toPlainText(value);
+  if (!text) return "";
+  const trimmed = text.trim();
   if (trimmed.length <= maxLength) return trimmed;
   return trimmed.slice(0, maxLength).trimEnd() + "\u2026";
 }
+function toPlainText(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    const parts = [];
+    for (const block of value) {
+      if (block && typeof block === "object" && Array.isArray(block.children)) {
+        for (const span of block.children) {
+          const t = span?.text;
+          if (typeof t === "string") parts.push(t);
+        }
+        parts.push(" ");
+      }
+    }
+    return parts.join("").replace(/\s+/g, " ").trim();
+  }
+  return "";
+}
+function derivePreview(schema, data) {
+  let subtitle = "";
+  if (schema.bodyField) subtitle = formatExcerpt(data[schema.bodyField]);
+  if (!subtitle) {
+    const TEXTISH = /* @__PURE__ */ new Set(["text", "textarea", "richtext"]);
+    for (const f of schema.fields) {
+      if (f.name === schema.titleField) continue;
+      if (!TEXTISH.has(f.widget)) continue;
+      const s = formatExcerpt(data[f.name]);
+      if (s) {
+        subtitle = s;
+        break;
+      }
+    }
+  }
+  let thumbnail = "";
+  for (const f of schema.fields) {
+    if (f.widget !== "image") continue;
+    const v = data[f.name];
+    if (typeof v === "string" && v.trim()) {
+      thumbnail = v.trim();
+      break;
+    }
+  }
+  return { subtitle, thumbnail };
+}
 function locales() {
   return state.config?.languages ?? [];
 }
@@ -1097,25 +1149,106 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
     return;
   }
   body.innerHTML = "";
+  const dragRecs = [];
+  let dragging = null;
+  let orderBeforeDrag = [];
+  const currentOrder = () => dragRecs.map((r) => r.id);
+  async function commitOrder(prevOrder) {
+    try {
+      await reorderList(schema.name, currentOrder());
+    } catch {
+      const byId = new Map(dragRecs.map((r) => [r.id, r]));
+      dragRecs.length = 0;
+      for (const id of prevOrder) {
+        const rec = byId.get(id);
+        if (rec) {
+          dragRecs.push(rec);
+          body.appendChild(rec.wrap);
+        }
+      }
+      const err = document.createElement("div");
+      err.textContent = "Couldn't save the new order. Reverted.";
+      err.style.cssText = `text-align:center; padding:8px; color:#c0392b; font-size:12px;`;
+      body.insertBefore(err, body.firstChild);
+      setTimeout(() => err.remove(), 3e3);
+    }
+  }
   rows.forEach((row) => {
-    const item = document.createElement("button");
     const isStub = row.entry === null;
+    const wrap = document.createElement("div");
+    wrap.style.cssText = `display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px;`;
+    const handle = document.createElement("div");
+    handle.textContent = "\u22EE\u22EE";
+    handle.title = "Drag to reorder";
+    handle.draggable = true;
+    handle.style.cssText = `
+      cursor: grab; user-select: none;
+      display: flex; align-items: center; justify-content: center;
+      color: #bbb; font-size: 13px; letter-spacing: -2px;
+      padding: 0 2px; flex-shrink: 0;
+    `;
+    const item = document.createElement("button");
     item.style.cssText = `
       appearance: none; border: 1px solid transparent; background: ${isStub ? "#fff8ee" : "#fafafa"};
-      text-align: left; width: 100%;
+      text-align: left; flex: 1; min-width: 0;
       padding: 12px 14px; border-radius: 8px; cursor: pointer;
-      margin-bottom: 6px;
       transition: background 0.12s, border-color 0.12s, transform 0.12s;
       display: block;
     `;
+    const rec = { wrap, id: row.id };
+    handle.addEventListener("dragstart", (e) => {
+      dragging = rec;
+      orderBeforeDrag = currentOrder();
+      handle.style.cursor = "grabbing";
+      wrap.style.opacity = "0.5";
+      e.dataTransfer?.setData("text/plain", "");
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    });
+    handle.addEventListener("dragend", () => {
+      handle.style.cursor = "grab";
+      wrap.style.opacity = "1";
+      dragging = null;
+    });
+    wrap.addEventListener("dragover", (e) => {
+      if (!dragging || dragging === rec) return;
+      e.preventDefault();
+      const rect = wrap.getBoundingClientRect();
+      const after = e.clientY > rect.top + rect.height / 2;
+      const from = dragRecs.indexOf(dragging);
+      let to = dragRecs.indexOf(rec);
+      if (from < 0 || to < 0) return;
+      if (after) to += 1;
+      if (from < to) to -= 1;
+      if (from === to) return;
+      dragRecs.splice(from, 1);
+      dragRecs.splice(to, 0, dragging);
+      body.insertBefore(dragging.wrap, after ? wrap.nextSibling : wrap);
+    });
+    wrap.addEventListener("drop", (e) => {
+      if (!dragging) return;
+      e.preventDefault();
+      const next = currentOrder();
+      const changed = next.length !== orderBeforeDrag.length || next.some((id, i) => id !== orderBeforeDrag[i]);
+      if (changed) void commitOrder(orderBeforeDrag);
+    });
     if (row.entry) {
       const titleValue = row.entry.data[schema.titleField];
       const title = typeof titleValue === "string" && titleValue.trim().length > 0 ? titleValue : `(untitled ${schema.labelSingular.toLowerCase()})`;
-      const excerptValue = schema.bodyField ? row.entry.data[schema.bodyField] : void 0;
-      const excerpt = formatExcerpt(excerptValue);
+      const { subtitle, thumbnail } = derivePreview(schema, row.entry.data);
+      const textCol = `
+        <div style="min-width: 0; flex: 1;">
+          <div style="font-weight: 600; font-size: 14px; color: #1a1a1d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(title)}</div>
+          ${subtitle ? `<div style="font-size: 12px; color: #666; margin-top: 4px; line-height: 1.4;">${escapeHtml(subtitle)}</div>` : ""}
+        </div>
+      `;
+      const thumb = thumbnail ? `<img src="${escapeHtml(thumbnail)}" alt="" loading="lazy" style="
+            width: 44px; height: 44px; flex-shrink: 0; object-fit: cover;
+            border-radius: 6px; background: #eee; border: 1px solid #eaeaea;
+          " onerror="this.style.display='none'" />` : "";
       item.innerHTML = `
-        <div style="font-weight: 600; font-size: 14px; color: #1a1a1d;">${escapeHtml(title)}</div>
-        ${excerpt ? `<div style="font-size: 12px; color: #666; margin-top: 4px; line-height: 1.4;">${escapeHtml(excerpt)}</div>` : ""}
+        <div style="display: flex; align-items: center; gap: 12px;">
+          ${thumb}${textCol}
+        </div>
       `;
       item.addEventListener("mouseenter", () => {
         item.style.background = "#f3f3f3";
@@ -1156,7 +1289,10 @@ function renderEntries(body, schema, activeLocale, entriesInLocale, translations
         () => currentOnTranslateEntry?.(row.id, sourceEntry, activeLocale)
       );
     }
-    body.appendChild(item);
+    wrap.appendChild(handle);
+    wrap.appendChild(item);
+    dragRecs.push(rec);
+    body.appendChild(wrap);
   });
 }
 async function openListPanel(opts) {
@@ -1250,6 +1386,13 @@ function isListPanelOpen() {
 }
 
 // src/entry-modal.ts
+import {
+  rowsToPortableText,
+  portableTextToRows,
+  portableTextSubsetSchema,
+  PT_STYLES
+} from "@cancia/astro/richtext";
+import { slugify } from "@cancia/astro/schema";
 var MODAL_Z = 2147483647;
 var BACKDROP_Z2 = 2147483646;
 var modalEl = null;
@@ -1327,7 +1470,8 @@ var INPUT_BASE = `
   outline: none;
   transition: border-color 0.18s, background 0.18s;
 `;
-function renderField(field, initial) {
+var MAX_FIELD_DEPTH = 6;
+function renderField(field, initial, depth = 0) {
   const wrapper = document.createElement("div");
   wrapper.style.cssText = `margin-bottom: 14px;`;
   const labelRow = document.createElement("label");
@@ -1348,7 +1492,7 @@ function renderField(field, initial) {
     labelText.appendChild(star);
   }
   labelRow.appendChild(labelText);
-  wrapper.appendChild(labelRow);
+  if (field.label) wrapper.appendChild(labelRow);
   if (field.description) {
     const help = document.createElement("div");
     help.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 6px; line-height: 1.4;`;
@@ -1368,7 +1512,37 @@ function renderField(field, initial) {
     }
   };
   let getValue2;
+  let validate = null;
+  let onInput;
+  let setValue;
   switch (field.widget) {
+    case "array": {
+      const built = renderArrayField(field, initial, setError, depth);
+      wrapper.appendChild(built.control);
+      getValue2 = built.getValue;
+      validate = built.validate;
+      break;
+    }
+    case "object": {
+      const built = renderObjectField(field, initial, setError, depth);
+      wrapper.appendChild(built.control);
+      getValue2 = built.getValue;
+      validate = built.validate;
+      break;
+    }
+    case "reference": {
+      const built = renderReferenceField(field, initial);
+      wrapper.appendChild(built.control);
+      getValue2 = built.getValue;
+      break;
+    }
+    case "richtext": {
+      const built = renderRichTextField(field, initial, setError);
+      wrapper.appendChild(built.control);
+      getValue2 = built.getValue;
+      validate = built.validate;
+      break;
+    }
     case "textarea": {
       const ta = document.createElement("textarea");
       ta.className = "cancia-form-textarea";
@@ -1579,40 +1753,591 @@ function renderField(field, initial) {
       if (typeof initial === "string") input.value = initial;
       wrapper.appendChild(input);
       getValue2 = () => input.value;
+      onInput = (cb) => input.addEventListener("input", cb);
+      setValue = (v) => {
+        input.value = v;
+      };
       break;
     }
   }
   wrapper.appendChild(errorEl);
-  return { wrapper, fieldState: { field, getValue: getValue2, setError } };
+  const scalarValidate = () => {
+    const value = getValue2();
+    setError(null);
+    if (field.required && (value === void 0 || value === "" || value === null)) {
+      setError(`${field.label || "This field"} is required`);
+      return { value, ok: false };
+    }
+    const err = validateValue(field, value);
+    if (err) {
+      setError(err);
+      return { value, ok: false };
+    }
+    return { value, ok: true };
+  };
+  return {
+    wrapper,
+    fieldState: { field, getValue: getValue2, setError, validate: validate ?? scalarValidate, onInput, setValue }
+  };
+}
+function renderArrayField(field, initial, setOwnError, depth) {
+  const itemSchema = field.of;
+  const container = document.createElement("div");
+  container.style.cssText = `
+    display: flex; flex-direction: column; gap: 8px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 10px;
+    padding: 10px;
+  `;
+  const rowsWrap = document.createElement("div");
+  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: 8px;`;
+  container.appendChild(rowsWrap);
+  if (!itemSchema || depth >= MAX_FIELD_DEPTH) {
+    const note = document.createElement("div");
+    note.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.4);`;
+    note.textContent = itemSchema ? "Nesting too deep to edit here." : "This array has no item schema.";
+    container.appendChild(note);
+    return { control: container, getValue: () => [], validate: () => ({ value: [], ok: true }) };
+  }
+  const rows = [];
+  let dragging = null;
+  function makeRow(itemValue) {
+    const row = document.createElement("div");
+    row.style.cssText = `
+      display: flex; align-items: flex-start; gap: 8px;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 8px;
+      padding: 8px;
+    `;
+    const handle = document.createElement("div");
+    handle.textContent = "\u22EE\u22EE";
+    handle.title = "Drag to reorder";
+    handle.draggable = true;
+    handle.style.cssText = `
+      cursor: grab; user-select: none;
+      color: rgba(255,255,255,0.35);
+      font-size: 13px; line-height: 1.2;
+      padding: 4px 2px; flex-shrink: 0;
+      letter-spacing: -2px;
+    `;
+    const { wrapper, fieldState } = renderField(itemSchema, itemValue, depth + 1);
+    wrapper.style.marginBottom = "0";
+    wrapper.style.flex = "1";
+    wrapper.style.minWidth = "0";
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.textContent = "\xD7";
+    removeBtn.title = "Remove";
+    removeBtn.style.cssText = `
+      appearance: none; cursor: pointer; flex-shrink: 0;
+      background: transparent; border: 1px solid transparent;
+      color: rgba(255,135,134,0.7);
+      font-size: 16px; line-height: 1;
+      padding: 2px 7px; border-radius: 6px;
+      transition: background 0.15s;
+    `;
+    removeBtn.addEventListener("mouseenter", () => {
+      removeBtn.style.background = "rgba(255,135,134,0.1)";
+    });
+    removeBtn.addEventListener("mouseleave", () => {
+      removeBtn.style.background = "transparent";
+    });
+    row.appendChild(handle);
+    row.appendChild(wrapper);
+    row.appendChild(removeBtn);
+    const rec = { el: row, state: fieldState };
+    removeBtn.addEventListener("click", () => {
+      const i = rows.indexOf(rec);
+      if (i >= 0) rows.splice(i, 1);
+      row.remove();
+      setOwnError(null);
+    });
+    handle.addEventListener("dragstart", (e) => {
+      dragging = rec;
+      handle.style.cursor = "grabbing";
+      row.style.opacity = "0.5";
+      e.dataTransfer?.setData("text/plain", "");
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    });
+    handle.addEventListener("dragend", () => {
+      handle.style.cursor = "grab";
+      row.style.opacity = "1";
+      dragging = null;
+    });
+    row.addEventListener("dragover", (e) => {
+      if (!dragging || dragging === rec) return;
+      e.preventDefault();
+      const rect = row.getBoundingClientRect();
+      const after = e.clientY > rect.top + rect.height / 2;
+      const from = rows.indexOf(dragging);
+      let to = rows.indexOf(rec);
+      if (from < 0 || to < 0) return;
+      if (after) to += 1;
+      if (from < to) to -= 1;
+      if (from === to) return;
+      rows.splice(from, 1);
+      rows.splice(to, 0, dragging);
+      rowsWrap.insertBefore(dragging.el, after ? row.nextSibling : row);
+    });
+    return rec;
+  }
+  function addRow(itemValue) {
+    const rec = makeRow(itemValue);
+    rows.push(rec);
+    rowsWrap.appendChild(rec.el);
+  }
+  const initialItems = Array.isArray(initial) ? initial : [];
+  for (const it of initialItems) addRow(it);
+  const addBtn = document.createElement("button");
+  addBtn.type = "button";
+  const itemLabel = itemSchema.label || "item";
+  addBtn.textContent = `+ Add ${itemLabel.toLowerCase()}`;
+  addBtn.style.cssText = `
+    appearance: none; cursor: pointer; align-self: flex-start;
+    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
+    border: 1px solid rgba(255,255,255,0.08);
+    font-size: 11px; font-weight: 500;
+    padding: 6px 11px; border-radius: 7px;
+    transition: background 0.15s;
+  `;
+  addBtn.addEventListener("mouseenter", () => {
+    addBtn.style.background = "rgba(255,255,255,0.1)";
+  });
+  addBtn.addEventListener("mouseleave", () => {
+    addBtn.style.background = "rgba(255,255,255,0.05)";
+  });
+  addBtn.addEventListener("click", () => addRow(defaultForField(itemSchema)));
+  container.appendChild(addBtn);
+  const collect = () => rows.map((r) => r.state.getValue());
+  return {
+    control: container,
+    // Deleting the last item serialises to [] (not undefined) so a cleared
+    // array persists as an empty array.
+    getValue: () => collect(),
+    validate: () => {
+      setOwnError(null);
+      let ok = true;
+      for (const r of rows) {
+        const res = r.state.validate();
+        if (!res.ok) ok = false;
+      }
+      const value = collect();
+      if (field.required && value.length === 0) {
+        setOwnError(`${field.label || "This list"} needs at least one item`);
+        ok = false;
+      }
+      return { value, ok };
+    }
+  };
+}
+function renderObjectField(field, initial, setOwnError, depth) {
+  const subFields = field.fields ?? [];
+  const subInitial = initial && typeof initial === "object" && !Array.isArray(initial) ? initial : {};
+  const fieldset = document.createElement("div");
+  fieldset.style.cssText = `
+    display: flex; flex-direction: column; gap: 2px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 10px;
+    padding: 10px 10px 0;
+  `;
+  if (depth >= MAX_FIELD_DEPTH) {
+    const note = document.createElement("div");
+    note.style.cssText = `font-size: 11px; color: rgba(255,255,255,0.4); padding-bottom: 10px;`;
+    note.textContent = "Nesting too deep to edit here.";
+    fieldset.appendChild(note);
+    return { control: fieldset, getValue: () => ({}), validate: () => ({ value: {}, ok: true }) };
+  }
+  const childStates = [];
+  for (const sub of subFields) {
+    const { wrapper, fieldState } = renderField(sub, subInitial[sub.name], depth + 1);
+    fieldset.appendChild(wrapper);
+    childStates.push(fieldState);
+  }
+  const collect = () => {
+    const out = {};
+    for (const c of childStates) {
+      const v = c.getValue();
+      if (v !== void 0 && v !== "") out[c.field.name] = v;
+    }
+    return out;
+  };
+  return {
+    control: fieldset,
+    getValue: () => collect(),
+    validate: () => {
+      setOwnError(null);
+      let ok = true;
+      for (const c of childStates) {
+        const res = c.validate();
+        if (!res.ok) ok = false;
+      }
+      return { value: collect(), ok };
+    }
+  };
+}
+function renderReferenceField(field, initial) {
+  const currentId = typeof initial === "string" ? initial : "";
+  const targetList = field.referenceList;
+  const sel = document.createElement("select");
+  sel.className = "cancia-form-select";
+  sel.style.cssText = `${INPUT_BASE} appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;`;
+  const opt = (value, text, selected = false) => {
+    const o = document.createElement("option");
+    o.value = value;
+    o.textContent = text;
+    if (selected) o.selected = true;
+    return o;
+  };
+  const loadingOpt = opt("", "Loading\u2026");
+  loadingOpt.disabled = true;
+  sel.appendChild(loadingOpt);
+  if (currentId) sel.appendChild(opt(currentId, `Current (${currentId})`, true));
+  const getValue2 = () => sel.value === "" ? void 0 : sel.value;
+  if (!targetList) {
+    sel.innerHTML = "";
+    const note = opt("", "No target list configured");
+    note.disabled = true;
+    sel.appendChild(note);
+    return { control: sel, getValue: getValue2 };
+  }
+  const titleField = state.schemas[targetList]?.titleField;
+  const titleOf = (entry) => {
+    if (titleField) {
+      const v = entry.data[titleField];
+      if (typeof v === "string" && v.trim()) return v;
+    }
+    return `(untitled \xB7 ${entry.id})`;
+  };
+  void (async () => {
+    let entries = [];
+    let failed = false;
+    try {
+      entries = await fetchList(targetList, state.activeListLocale || state.activeLang || void 0);
+    } catch {
+      failed = true;
+    }
+    sel.innerHTML = "";
+    if (failed) {
+      const errOpt = opt("", "Failed to load options");
+      errOpt.disabled = true;
+      sel.appendChild(errOpt);
+      if (currentId) sel.appendChild(opt(currentId, `Current (${currentId})`, true));
+      return;
+    }
+    if (!field.required) sel.appendChild(opt("", "\u2014 none \u2014", currentId === ""));
+    let matched = false;
+    for (const entry of entries) {
+      const isCurrent = entry.id === currentId;
+      if (isCurrent) matched = true;
+      sel.appendChild(opt(entry.id, titleOf(entry), isCurrent));
+    }
+    if (currentId && !matched) {
+      sel.appendChild(opt(currentId, `\u26A0 missing (${currentId})`, true));
+    }
+  })();
+  return { control: sel, getValue: getValue2 };
+}
+function renderRichTextField(field, initial, setOwnError) {
+  const STYLE_LABELS = {
+    normal: "Normal",
+    h2: "Heading 2",
+    h3: "Heading 3",
+    blockquote: "Quote"
+  };
+  const LIST_LABELS = [
+    { value: "", label: "No list" },
+    { value: "bullet", label: "Bulleted" },
+    { value: "number", label: "Numbered" }
+  ];
+  const container = document.createElement("div");
+  container.style.cssText = `
+    display: flex; flex-direction: column; gap: 8px;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.07);
+    border-radius: 10px;
+    padding: 10px;
+  `;
+  const rowsWrap = document.createElement("div");
+  rowsWrap.style.cssText = `display: flex; flex-direction: column; gap: 8px;`;
+  container.appendChild(rowsWrap);
+  const rows = [];
+  let dragging = null;
+  function makeRow(initialRow) {
+    const row = document.createElement("div");
+    row.style.cssText = `
+      display: flex; align-items: flex-start; gap: 8px;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.06);
+      border-radius: 8px;
+      padding: 8px;
+    `;
+    const handle = document.createElement("div");
+    handle.textContent = "\u22EE\u22EE";
+    handle.title = "Drag to reorder";
+    handle.draggable = true;
+    handle.style.cssText = `
+      cursor: grab; user-select: none;
+      color: rgba(255,255,255,0.35);
+      font-size: 13px; line-height: 1.2;
+      padding: 4px 2px; flex-shrink: 0;
+      letter-spacing: -2px;
+    `;
+    const main = document.createElement("div");
+    main.style.cssText = `flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;`;
+    const ta = document.createElement("textarea");
+    ta.className = "cancia-form-textarea";
+    ta.style.cssText = `${INPUT_BASE} resize: vertical; min-height: 54px; max-height: 240px; caret-color: ${accent4()};`;
+    ta.rows = 2;
+    ta.placeholder = "Text \u2014 use **bold**, *italic*, [label](https://\u2026)";
+    ta.value = initialRow.text;
+    const controls = document.createElement("div");
+    controls.style.cssText = `display: flex; gap: 6px;`;
+    const styleSel = document.createElement("select");
+    styleSel.className = "cancia-form-select";
+    styleSel.style.cssText = `${INPUT_BASE} width: auto; flex: 1; appearance: none; padding: 5px 26px 5px 9px; font-size: 11px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2.5 3.75l2.5 2.5 2.5-2.5' stroke='rgba(255,255,255,0.4)' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer;`;
+    for (const s of PT_STYLES) {
+      const o = document.createElement("option");
+      o.value = s;
+      o.textContent = STYLE_LABELS[s];
+      if (initialRow.style === s) o.selected = true;
+      styleSel.appendChild(o);
+    }
+    const listSel = document.createElement("select");
+    listSel.className = "cancia-form-select";
+    listSel.style.cssText = styleSel.style.cssText;
+    for (const { value, label } of LIST_LABELS) {
+      const o = document.createElement("option");
+      o.value = value;
+      o.textContent = label;
+      if ((initialRow.listItem ?? "") === value) o.selected = true;
+      listSel.appendChild(o);
+    }
+    controls.appendChild(styleSel);
+    controls.appendChild(listSel);
+    main.appendChild(ta);
+    main.appendChild(controls);
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.textContent = "\xD7";
+    removeBtn.title = "Remove block";
+    removeBtn.style.cssText = `
+      appearance: none; cursor: pointer; flex-shrink: 0;
+      background: transparent; border: 1px solid transparent;
+      color: rgba(255,135,134,0.7);
+      font-size: 16px; line-height: 1;
+      padding: 2px 7px; border-radius: 6px;
+      transition: background 0.15s;
+    `;
+    removeBtn.addEventListener("mouseenter", () => {
+      removeBtn.style.background = "rgba(255,135,134,0.1)";
+    });
+    removeBtn.addEventListener("mouseleave", () => {
+      removeBtn.style.background = "transparent";
+    });
+    row.appendChild(handle);
+    row.appendChild(main);
+    row.appendChild(removeBtn);
+    const rec = {
+      el: row,
+      read: () => {
+        const style = styleSel.value ?? "normal";
+        const listValue = listSel.value;
+        const out = { text: ta.value, style };
+        if (listValue) out.listItem = listValue;
+        return out;
+      }
+    };
+    removeBtn.addEventListener("click", () => {
+      const i = rows.indexOf(rec);
+      if (i >= 0) rows.splice(i, 1);
+      row.remove();
+      setOwnError(null);
+    });
+    handle.addEventListener("dragstart", (e) => {
+      dragging = rec;
+      handle.style.cursor = "grabbing";
+      row.style.opacity = "0.5";
+      e.dataTransfer?.setData("text/plain", "");
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    });
+    handle.addEventListener("dragend", () => {
+      handle.style.cursor = "grab";
+      row.style.opacity = "1";
+      dragging = null;
+    });
+    row.addEventListener("dragover", (e) => {
+      if (!dragging || dragging === rec) return;
+      e.preventDefault();
+      const rect = row.getBoundingClientRect();
+      const after = e.clientY > rect.top + rect.height / 2;
+      const from = rows.indexOf(dragging);
+      let to = rows.indexOf(rec);
+      if (from < 0 || to < 0) return;
+      if (after) to += 1;
+      if (from < to) to -= 1;
+      if (from === to) return;
+      rows.splice(from, 1);
+      rows.splice(to, 0, dragging);
+      rowsWrap.insertBefore(dragging.el, after ? row.nextSibling : row);
+    });
+    return rec;
+  }
+  function addRow(initialRow) {
+    const rec = makeRow(initialRow);
+    rows.push(rec);
+    rowsWrap.appendChild(rec.el);
+  }
+  const initialRows = (() => {
+    const parsed = portableTextSubsetSchema.safeParse(initial);
+    if (parsed.success && parsed.data.length > 0) return portableTextToRows(parsed.data);
+    return [{ text: "", style: "normal" }];
+  })();
+  for (const r of initialRows) addRow(r);
+  const addBtn = document.createElement("button");
+  addBtn.type = "button";
+  addBtn.textContent = "+ Add block";
+  addBtn.style.cssText = `
+    appearance: none; cursor: pointer; align-self: flex-start;
+    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
+    border: 1px solid rgba(255,255,255,0.08);
+    font-size: 11px; font-weight: 500;
+    padding: 6px 11px; border-radius: 7px;
+    transition: background 0.15s;
+  `;
+  addBtn.addEventListener("mouseenter", () => {
+    addBtn.style.background = "rgba(255,255,255,0.1)";
+  });
+  addBtn.addEventListener("mouseleave", () => {
+    addBtn.style.background = "rgba(255,255,255,0.05)";
+  });
+  addBtn.addEventListener("click", () => addRow({ text: "", style: "normal" }));
+  container.appendChild(addBtn);
+  const serialise = () => {
+    const editorRows = rows.map((r) => r.read()).filter((r) => r.text.trim() !== "");
+    return rowsToPortableText(editorRows);
+  };
+  return {
+    control: container,
+    getValue: () => serialise(),
+    validate: () => {
+      setOwnError(null);
+      const value = serialise();
+      const parsed = portableTextSubsetSchema.safeParse(value);
+      if (!parsed.success) {
+        setOwnError("This rich-text content is not valid. Check links and formatting.");
+        return { value, ok: false };
+      }
+      if (field.required && value.length === 0) {
+        setOwnError(`${field.label || "This field"} is required`);
+        return { value, ok: false };
+      }
+      return { value: parsed.data, ok: true };
+    }
+  };
+}
+function defaultForField(field) {
+  if (field.widget === "array" || field.widget === "richtext") return [];
+  if (field.widget === "object") {
+    const out = {};
+    for (const sub of field.fields ?? []) {
+      const d = defaultForField(sub);
+      if (d !== void 0) out[sub.name] = d;
+    }
+    return out;
+  }
+  if (field.widget === "checkbox") return false;
+  return "";
 }
 function preValidate(fieldStates) {
   const data = {};
   let ok = true;
   for (const f of fieldStates) {
-    const value = f.getValue();
-    f.setError(null);
-    if (f.field.required && (value === void 0 || value === "" || value === null)) {
-      f.setError(`${f.field.label} is required`);
+    const { value, ok: fieldOk } = f.validate();
+    if (!fieldOk) {
       ok = false;
       continue;
     }
-    if (typeof value === "string") {
-      if (f.field.minLength !== void 0 && value.length < f.field.minLength) {
-        f.setError(`Must be at least ${f.field.minLength} character${f.field.minLength === 1 ? "" : "s"}`);
-        ok = false;
-        continue;
+    if (f.field.widget === "array" || f.field.widget === "object" || f.field.widget === "richtext") {
+      data[f.field.name] = value;
+    } else if (value !== void 0 && value !== "") {
+      data[f.field.name] = value;
+    }
+  }
+  return { data, ok };
+}
+function validateValue(field, value) {
+  if (value === void 0 || value === null || value === "") return null;
+  if (typeof value === "string") {
+    if (field.minLength !== void 0 && value.length < field.minLength) {
+      return `Must be at least ${field.minLength} character${field.minLength === 1 ? "" : "s"}`;
+    }
+    if (field.maxLength !== void 0 && value.length > field.maxLength) {
+      return `Must be at most ${field.maxLength} characters`;
+    }
+    if (field.pattern !== void 0) {
+      let re = null;
+      try {
+        re = new RegExp(field.pattern);
+      } catch {
+        re = null;
       }
-      if (f.field.maxLength !== void 0 && value.length > f.field.maxLength) {
-        f.setError(`Must be at most ${f.field.maxLength} characters`);
-        ok = false;
-        continue;
+      if (re && !re.test(value)) {
+        return "Invalid format";
       }
     }
-    if (value !== void 0 && value !== "") {
-      data[f.field.name] = value;
+    if (field.options && field.options.length > 0 && !field.options.includes(value)) {
+      return "Choose one of the allowed options";
+    }
+    if (field.widget === "email" && !isLikelyEmail(value)) {
+      return "Enter a valid email address";
+    }
+    if ((field.widget === "url" || field.widget === "image") && !isLikelyUrl(value)) {
+      return "Enter a valid URL";
     }
   }
-  return { data, ok };
+  if (typeof value === "number") {
+    if (field.min !== void 0 && value < field.min) {
+      return `Must be at least ${field.min}`;
+    }
+    if (field.max !== void 0 && value > field.max) {
+      return `Must be at most ${field.max}`;
+    }
+  }
+  return null;
+}
+function isLikelyEmail(s) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);
+}
+function isLikelyUrl(s) {
+  try {
+    new URL(s);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function wireSlugAutoFill(schema, fieldStates, sourceEntry) {
+  const byName = new Map(fieldStates.map((f) => [f.field.name, f]));
+  for (const slug of fieldStates) {
+    if (slug.field.widget !== "slug") continue;
+    const sourceName = slug.field.source;
+    if (!sourceName) continue;
+    const src = byName.get(sourceName);
+    if (!src || !src.onInput || !slug.setValue) continue;
+    const existing = sourceEntry?.data[slug.field.name];
+    let dirty = typeof existing === "string" && existing.trim().length > 0;
+    slug.onInput?.(() => {
+      dirty = true;
+    });
+    src.onInput(() => {
+      if (dirty) return;
+      const sv = src.getValue();
+      slug.setValue?.(typeof sv === "string" ? slugify(sv) : "");
+    });
+  }
 }
 function openEntryModal(opts) {
   closeEntryModal();
@@ -1741,6 +2466,7 @@ function openEntryModal(opts) {
     body.appendChild(wrapper);
     fieldStates.push(fieldState);
   }
+  wireSlugAutoFill(opts.schema, fieldStates, sourceForInitial);
   const footer = document.createElement("div");
   footer.style.cssText = `
     display: flex; align-items: center; justify-content: space-between;