@realiizlabs/admin 0.7.2 → 0.8.1

package/dist/forms-ui/index.js

@@ -1,9 +1,53 @@
 "use client";
-import { walkSchema } from '../chunk-IS52OXZ2.js';
-import { FORM_CSS } from '../chunk-4OCBMOEP.js';
-import { useId, useMemo, useState, useEffect, useCallback } from 'react';
+import { walkSchema } from '../chunk-J6FI73PF.js';
+import { FORM_CSS } from '../chunk-CE2DRQBD.js';
+import { useState, useRef, useCallback, useEffect, useId, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+function ChipsInput({ id, name, value, onChange, onBlur, placeholder, invalid, max }) {
+  const [draft, setDraft] = useState("");
+  const commit = () => {
+    const parts = draft.split(",").map((s) => s.trim()).filter(Boolean);
+    if (parts.length) onChange([...value, ...parts.filter((p) => !value.includes(p))]);
+    setDraft("");
+  };
+  const onKey = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    } else if (e.key === "Backspace" && draft === "" && value.length) {
+      onChange(value.slice(0, -1));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["realiiz-chips", invalid && "realiiz-form__control--invalid"].filter(Boolean).join(" "), "data-name": name, children: [
+    value.map((tag) => /* @__PURE__ */ jsxs("span", { className: "realiiz-chip", children: [
+      tag,
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Remove ${tag}`, onClick: () => onChange(value.filter((t) => t !== tag)), children: "\xD7" })
+    ] }, tag)),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        className: "realiiz-chips__input",
+        value: draft,
+        placeholder: value.length ? "" : placeholder,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: onKey,
+        onBlur: () => {
+          commit();
+          onBlur();
+        },
+        "aria-invalid": invalid || void 0
+      }
+    ),
+    typeof max === "number" && /* @__PURE__ */ jsxs("span", { className: "realiiz-chips__count", children: [
+      value.length,
+      " of ",
+      max
+    ] })
+  ] });
+}
 function Control(p) {
   const cls = ["realiiz-form__control", p.invalid && "realiiz-form__control--invalid"].filter(Boolean).join(" ");
   const common = {
@@ -78,18 +122,6 @@ function Control(p) {
           onChange: (e) => p.onChange(e.target.value)
         }
       );
-    case "tags":
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...common,
-          type: "text",
-          className: cls,
-          value: str,
-          placeholder: p.spec.placeholder ?? "one, two, three",
-          onChange: (e) => p.onChange(e.target.value)
-        }
-      );
     default:
       return /* @__PURE__ */ jsx(
         "input",
@@ -105,24 +137,61 @@ function Control(p) {
       );
   }
 }
+var defaultLabel = (label, help) => /* @__PURE__ */ jsx("span", { className: "realiiz-form__help", title: help, children: label });
+function LengthGauge({ length: raw, range, suffix }) {
+  const [min, max] = range;
+  const length = raw === 0 ? 0 : raw + (suffix?.length ?? 0);
+  const state = length === 0 ? "empty" : length < min ? "short" : length <= max ? "ok" : "over";
+  const scale = Math.round(max * 1.3);
+  const pct = (n) => `${Math.min(100, n / scale * 100)}%`;
+  const verdict = state === "ok" ? "good length" : state === "over" ? `over ${max} \u2014 may be cut off` : `aim for ${min}\u2013${max}`;
+  const incl = suffix && length > 0 ? ` incl. \u201C${suffix.trim()}\u201D` : "";
+  return /* @__PURE__ */ jsxs("span", { className: `realiiz-gauge realiiz-gauge--${state}`, title: `Recommended ${min}\u2013${max} characters${suffix ? ` including \u201C${suffix.trim()}\u201D` : ""}`, children: [
+    /* @__PURE__ */ jsxs("span", { className: "realiiz-gauge__bar", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "realiiz-gauge__zone", style: { left: pct(min), width: `calc(${pct(max)} - ${pct(min)})` } }),
+      /* @__PURE__ */ jsx("span", { className: "realiiz-gauge__fill", style: { width: pct(length) } })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "realiiz-gauge__text", children: [
+      /* @__PURE__ */ jsx("b", { children: length }),
+      " characters",
+      incl,
+      " \xB7 ",
+      verdict
+    ] })
+  ] });
+}
 function Field(p) {
   const id = `${p.formId}-${p.spec.name}`;
   const invalid = p.issues.length > 0;
   const max = p.spec.constraints.max;
-  const showCount = typeof max === "number" && (p.spec.input === "text" || p.spec.input === "textarea");
+  const isText = p.spec.input === "text" || p.spec.input === "textarea";
   const len = typeof p.value === "string" ? p.value.length : 0;
   const isCheck = p.spec.input === "boolean";
-  const control = /* @__PURE__ */ jsx(Control, { id, spec: p.spec, value: p.value, invalid, options: p.options, onChange: p.onChange, onBlur: p.onBlur });
+  const isTags = p.spec.input === "tags";
+  const labelText = p.spec.help ? (p.renderLabel ?? defaultLabel)(p.spec.label, p.spec.help) : p.spec.label;
+  const control = isTags ? /* @__PURE__ */ jsx(
+    ChipsInput,
+    {
+      id,
+      name: p.spec.name,
+      value: Array.isArray(p.value) ? p.value : [],
+      onChange: (v) => p.onChange(v),
+      onBlur: p.onBlur,
+      placeholder: p.spec.placeholder,
+      invalid,
+      max: p.spec.constraints.exact ?? p.spec.constraints.max
+    }
+  ) : /* @__PURE__ */ jsx(Control, { id, spec: p.spec, value: p.value, invalid, options: p.options, onChange: p.onChange, onBlur: p.onBlur });
   return /* @__PURE__ */ jsxs("div", { className: `realiiz-form__field realiiz-form__field--${p.spec.input}`, "data-field": p.spec.name, children: [
     isCheck ? /* @__PURE__ */ jsxs("label", { className: "realiiz-form__check", htmlFor: id, children: [
       control,
       /* @__PURE__ */ jsxs("span", { children: [
-        p.spec.label,
+        labelText,
         p.spec.required && /* @__PURE__ */ jsx("span", { className: "realiiz-form__required", "aria-hidden": "true", children: "*" })
       ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("label", { className: "realiiz-form__label", htmlFor: id, children: [
-        p.spec.label,
+        labelText,
         p.spec.required && /* @__PURE__ */ jsx("span", { className: "realiiz-form__required", "aria-hidden": "true", children: "*" })
       ] }),
       control
@@ -131,15 +200,529 @@ function Field(p) {
       "Current: ",
       p.current
     ] }),
-    showCount && /* @__PURE__ */ jsx("div", { className: "realiiz-form__helper", children: /* @__PURE__ */ jsxs("span", { className: "realiiz-form__count", children: [
-      len,
-      " / ",
-      max
-    ] }) }),
+    isText && (p.spec.recommended || typeof max === "number") && /* @__PURE__ */ jsxs("div", { className: "realiiz-form__helper", children: [
+      p.spec.recommended ? /* @__PURE__ */ jsx(LengthGauge, { length: len, range: p.spec.recommended, suffix: p.spec.suffix }) : /* @__PURE__ */ jsx("span", {}),
+      typeof max === "number" && /* @__PURE__ */ jsxs("span", { className: "realiiz-form__count", children: [
+        len,
+        " / ",
+        max
+      ] })
+    ] }),
     invalid && /* @__PURE__ */ jsx("div", { className: "realiiz-form__error", id: `${id}-error`, children: p.issues.map((i, n) => /* @__PURE__ */ jsx("div", { children: i.message }, n)) })
   ] });
 }
 
+// src/forms-ui/md/table.ts
+var ROW = /^\s*\|.*\|\s*$/;
+var SEP = /^\s*\|[\s:|-]+\|\s*$/;
+function tableCells(line) {
+  return line.trim().replace(/^\|/, "").replace(/\|$/, "").split(/(?<!\\)\|/).map((c) => c.trim());
+}
+function tableAt(v, pos) {
+  const lines = v.split("\n");
+  let i = 0, off = 0;
+  while (i < lines.length && pos > off + lines[i].length) {
+    off += lines[i].length + 1;
+    i++;
+  }
+  if (i >= lines.length || !ROW.test(lines[i])) return null;
+  let s = i, e = i;
+  while (s > 0 && ROW.test(lines[s - 1])) s--;
+  while (e < lines.length - 1 && ROW.test(lines[e + 1])) e++;
+  if (e - s < 1 || !SEP.test(lines[s + 1])) return null;
+  const start = lines.slice(0, s).reduce((n, l) => n + l.length + 1, 0);
+  const end = start + lines.slice(s, e + 1).join("\n").length;
+  const align = tableCells(lines[s + 1]).map((c) => c.startsWith(":") && c.endsWith(":") ? "c" : c.endsWith(":") ? "r" : c.startsWith(":") ? "L" : "l");
+  const rows = lines.slice(s, e + 1).filter((_, n) => n !== 1).map(tableCells);
+  const col = Math.max(0, (lines[i].slice(0, pos - off).match(/(?<!\\)\|/g) || []).length - 1);
+  const row = i - s <= 1 ? 0 : i - s - 1;
+  return { start, end, rows, align, row, col };
+}
+function renderTable(rows, align) {
+  const cols = Math.max(...rows.map((r) => r.length));
+  const w = [];
+  for (let c = 0; c < cols; c++) w[c] = Math.max(3, ...rows.map((r) => (r[c] || "").length));
+  const pad = (t, c) => (t || "").padEnd(w[c]);
+  const line = (r) => "| " + Array.from({ length: cols }, (_, c) => pad(r[c], c)).join(" | ") + " |";
+  const sep = "|" + Array.from({ length: cols }, (_, c) => align[c] === "c" ? ":" + "-".repeat(w[c]) + ":" : align[c] === "r" ? " " + "-".repeat(w[c] - 1) + ": " : align[c] === "L" ? ":" + "-".repeat(w[c] - 1) + "  " : " " + "-".repeat(w[c]) + " ").join("|") + "|";
+  return [line(rows[0]), sep, ...rows.slice(1).map(line)].join("\n");
+}
+function newTable(rows, cols) {
+  const head = Array.from({ length: cols }, (_, i) => `Column ${i + 1}`);
+  const grid = [head, ...Array.from({ length: rows }, () => Array(cols).fill(""))];
+  return { text: renderTable(grid, Array(cols).fill("l")), firstHeader: head[0] };
+}
+function applyTableOp(v, pos, op) {
+  const t = tableAt(v, pos);
+  if (!t) return null;
+  const rows = t.rows.map((r) => r.slice());
+  const cols = Math.max(...rows.map((r) => r.length));
+  const align = t.align.slice();
+  if (op === "rowAfter") {
+    rows.splice(Math.max(1, t.row + 1), 0, Array(cols).fill(""));
+  } else if (op === "rowDel") {
+    if (t.row === 0 || rows.length <= 2) return { error: "A table needs its header row and at least one row below it." };
+    rows.splice(t.row, 1);
+  } else if (op === "colAfter") {
+    rows.forEach((r) => {
+      while (r.length < cols) r.push("");
+      r.splice(t.col + 1, 0, "");
+    });
+    align.splice(t.col + 1, 0, "l");
+  } else if (op === "colDel") {
+    if (cols <= 1) return { error: "That's the last column \u2014 delete the table instead." };
+    rows.forEach((r) => r.splice(t.col, 1));
+    align.splice(t.col, 1);
+  }
+  const out = renderTable(rows, align);
+  return { text: v.slice(0, t.start) + out + v.slice(t.end), a: t.start, b: t.start + out.length };
+}
+
+// src/forms-ui/md/edits.ts
+var toggleWrap = (mark, placeholder = "text") => (s, a, b) => {
+  const sel = s.slice(a, b);
+  const n = mark.length;
+  if (sel.length >= 2 * n && sel.startsWith(mark) && sel.endsWith(mark)) {
+    const inner = sel.slice(n, sel.length - n);
+    return { text: s.slice(0, a) + inner + s.slice(b), a, b: a + inner.length };
+  }
+  if (s.slice(a - n, a) === mark && s.slice(b, b + n) === mark) {
+    return { text: s.slice(0, a - n) + sel + s.slice(b + n), a: a - n, b: a - n + sel.length };
+  }
+  const body = sel || placeholder;
+  return { text: s.slice(0, a) + mark + body + mark + s.slice(b), a: a + n, b: a + n + body.length };
+};
+var PREFIX_RE = /^(#{1,6}\s+|[-*+]\s+|\d+[.)]\s+|>\s?)/;
+var lineSpan = (s, a, b) => {
+  const start = s.lastIndexOf("\n", a - 1) + 1;
+  const endIdx = s.indexOf("\n", Math.max(b, a));
+  return { start, end: endIdx === -1 ? s.length : endIdx };
+};
+var toggleLines = (prefix, matches) => (s, a, b) => {
+  const { start, end } = lineSpan(s, a, b);
+  const lines = s.slice(start, end).split("\n");
+  const allOn = lines.every((l) => l.trim() === "" || matches(l));
+  const out = lines.map((l, i) => {
+    const bare = l.replace(PREFIX_RE, "");
+    return allOn ? bare : (typeof prefix === "string" ? prefix : prefix(i)) + bare;
+  });
+  const replaced = out.join("\n");
+  return { text: s.slice(0, start) + replaced + s.slice(end), a: start, b: start + replaced.length };
+};
+var LINK_RE = /\[([^\]\n]*)\]\(([^)\n]*)\)/g;
+function linkAt(s, a, b) {
+  for (const m of s.matchAll(LINK_RE)) {
+    if (s[m.index - 1] === "!") continue;
+    const from = m.index, to = from + m[0].length;
+    if (a >= from && b <= to) return { from, to, label: m[1] };
+    if (from > b) break;
+  }
+  return null;
+}
+var toggleLink = (s, a, b) => {
+  const hit = linkAt(s, a, b);
+  if (hit) return { text: s.slice(0, hit.from) + hit.label + s.slice(hit.to), a: hit.from, b: hit.from + hit.label.length };
+  const label = s.slice(a, b) || "link text";
+  const urlStart = a + label.length + 3;
+  return { text: s.slice(0, a) + `[${label}](https://)` + s.slice(b), a: urlStart, b: urlStart + 8 };
+};
+var insertImage = (s, a, b) => {
+  const alt = s.slice(a, b) || "description";
+  const urlStart = a + alt.length + 4;
+  return { text: s.slice(0, a) + `![${alt}](https://)` + s.slice(b), a: urlStart, b: urlStart + 8 };
+};
+var insertDot = (s, a, b) => {
+  const t = " \xB7 ";
+  return { text: s.slice(0, a) + t + s.slice(b), a: a + t.length, b: a + t.length };
+};
+var blockBefore = (s, a) => a === 0 || s.slice(0, a).endsWith("\n\n") ? "" : s.slice(0, a).endsWith("\n") ? "\n" : "\n\n";
+var insertRule = (s, a, b) => {
+  const before = blockBefore(s, a);
+  const t = before + "---\n\n";
+  return { text: s.slice(0, a) + t + s.slice(b), a: a + t.length, b: a + t.length };
+};
+var insertTable = (rows, cols) => (s, a, b) => {
+  const { text, firstHeader } = newTable(rows, cols);
+  const before = blockBefore(s, a);
+  const t = before + text + "\n";
+  const at = a + before.length + text.indexOf(firstHeader);
+  return { text: s.slice(0, a) + t + s.slice(b), a: at, b: at + firstHeader.length };
+};
+var toggleTerm = (component = "Term", attr = "definition") => (s, a, b) => {
+  const re = new RegExp(`<${component}\\s+${attr}="([^"]*)"\\s*>([\\s\\S]*?)</${component}>`, "g");
+  for (const m of s.matchAll(re)) {
+    const from = m.index, to = from + m[0].length;
+    if (a >= from && b <= to) return { text: s.slice(0, from) + m[2] + s.slice(to), a: from, b: from + m[2].length };
+    if (from > b) break;
+  }
+  const word = s.slice(a, b) || "term";
+  const open = `<${component} ${attr}="`;
+  const text = s.slice(0, a) + open + `">${word}</${component}>` + s.slice(b);
+  return { text, a: a + open.length, b: a + open.length };
+};
+var TOOLS = [
+  { id: "bold", title: "Bold \u2014 \u2318B", apply: toggleWrap("**") },
+  { id: "italic", title: "Italic \u2014 \u2318I", apply: toggleWrap("_") },
+  { id: "h2", title: "Section heading", apply: toggleLines("## ", (l) => /^##\s/.test(l)) },
+  { id: "h3", title: "Sub-heading", apply: toggleLines("### ", (l) => /^###\s/.test(l)) },
+  { id: "ul", title: "Bulleted list", apply: toggleLines("- ", (l) => /^[-*+]\s/.test(l)) },
+  { id: "ol", title: "Numbered list", apply: toggleLines((i) => `${i + 1}. `, (l) => /^\d+[.)]\s/.test(l)) },
+  { id: "quote", title: "Quote", apply: toggleLines("> ", (l) => /^>/.test(l)) },
+  { id: "link", title: "Link", apply: toggleLink },
+  { id: "code", title: "Inline code", apply: toggleWrap("`", "code") },
+  { id: "image", title: "Image", apply: insertImage },
+  { id: "dot", title: "Separator between details ( \xB7 )", apply: insertDot },
+  { id: "rule", title: "Divider line across the page", apply: insertRule }
+];
+var toolById = (id) => TOOLS.find((t) => t.id === id);
+function activeTools(s, a, b) {
+  const on = /* @__PURE__ */ new Set();
+  const sel = s.slice(a, b);
+  const wrapped = (m) => s.slice(a - m.length, a) === m && s.slice(b, b + m.length) === m || sel.length >= 2 * m.length && sel.startsWith(m) && sel.endsWith(m);
+  if (wrapped("**") || spanAt(s, a, b, /\*\*[^*\n]+\*\*/g, 2)) on.add("bold");
+  if (wrapped("_") || spanAt(s, a, b, /(?<![\w_])_[^_\n]+_(?![\w_])/g, 1)) on.add("italic");
+  if (wrapped("`") || spanAt(s, a, b, /`[^`\n]+`/g, 1)) on.add("code");
+  if (linkAt(s, a, b)) on.add("link");
+  if (spanAt(s, a, b, /<([A-Z][\w]*)\s[^>]*>[\s\S]*?<\/\1>/g, 0)) on.add("term");
+  const { start, end } = lineSpan(s, a, a);
+  const line = s.slice(start, end);
+  if (/^##\s/.test(line)) on.add("h2");
+  else if (/^###\s/.test(line)) on.add("h3");
+  else if (/^[-*+]\s/.test(line)) on.add("ul");
+  else if (/^\d+[.)]\s/.test(line)) on.add("ol");
+  else if (/^>/.test(line)) on.add("quote");
+  return on;
+}
+function spanAt(s, a, b, re, pad) {
+  for (const m of s.matchAll(re)) {
+    const from = m.index, to = from + m[0].length;
+    if (a >= from + pad && b <= to - pad) return true;
+    if (from > b) break;
+  }
+  return false;
+}
+var Svg = ({ children, fill = "none" }) => /* @__PURE__ */ jsx("svg", { className: "realiiz-md__ico", viewBox: "0 0 24 24", fill, stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children });
+var MD_ICONS = {
+  bold: /* @__PURE__ */ jsx("b", { children: "B" }),
+  italic: /* @__PURE__ */ jsx("i", { children: "I" }),
+  h2: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 12h8" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.5 19v-6.5l-1.6 1.2" })
+  ] }),
+  h3: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 12h7" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 12.5h3.5l-2 2.2a1.9 1.9 0 1 1-1.5 3.2" })
+  ] }),
+  ul: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "6.5", x2: "20", y2: "6.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "12", x2: "20", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "17.5", x2: "20", y2: "17.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.6", cy: "6.5", r: "1.3", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.6", cy: "12", r: "1.3", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.6", cy: "17.5", r: "1.3", fill: "currentColor", stroke: "none" })
+  ] }),
+  ol: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "6.5", x2: "20", y2: "6.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "12", x2: "20", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "17.5", x2: "20", y2: "17.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 5.6 5.2 5v3.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.6 11.2h1.8L3.6 13.7h1.9" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.7 16.3h1.7v1.2H4.2h1.2v1.2H3.7" })
+  ] }),
+  quote: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 7c-2.4 0-4 1.7-4 4 0 1.9 1.3 3.2 3 3.2.4 0 .8-.1 1-.2-.3 1.4-1.5 2.6-3 3l.7 1.5c2.8-.8 4.8-3.3 4.8-6.6C11.5 8.7 10.5 7 9 7z", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 7c-2.4 0-4 1.7-4 4 0 1.9 1.3 3.2 3 3.2.4 0 .8-.1 1-.2-.3 1.4-1.5 2.6-3 3l.7 1.5c2.8-.8 4.8-3.3 4.8-6.6C20.5 8.7 19.5 7 18 7z", fill: "currentColor", stroke: "none" })
+  ] }),
+  link: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.5.5l2.5-2.5a5 5 0 0 0-7-7l-1.5 1.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.5-.5L4 13a5 5 0 0 0 7 7l1.4-1.4" })
+  ] }),
+  code: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m8 7-5 5 5 5" }),
+    /* @__PURE__ */ jsx("path", { d: "m16 7 5 5-5 5" }),
+    /* @__PURE__ */ jsx("path", { d: "m14 4-4 16" })
+  ] }),
+  // A tooltip: a tall speech bubble with an "i" — what the reader will actually see on the page.
+  term: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 2.5h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-4.5L12 21.5 9.5 17.5H5a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v4.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6.2", r: ".9", fill: "currentColor", stroke: "none" })
+  ] }),
+  image: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.6" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-5-5L5 21" })
+  ] }),
+  dot: /* @__PURE__ */ jsx("span", { className: "realiiz-md__dot", children: "\xB7" }),
+  rule: /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }) }),
+  table: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "9.5", x2: "21", y2: "9.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9.5", x2: "12", y2: "20" })
+  ] }),
+  expand: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 3H3v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 21h6v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3l7 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 21l-7-7" })
+  ] }),
+  contract: /* @__PURE__ */ jsxs(Svg, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 10h6V4" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 14h-6v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3l7 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 21l-7-7" })
+  ] })
+};
+var MAX = 6;
+function TableGrid({ onPick }) {
+  const [open, setOpen] = useState(false);
+  const [hot, setHot] = useState([0, 0]);
+  const wrap = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const away = (e) => {
+      if (!wrap.current?.contains(e.target)) setOpen(false);
+    };
+    const esc = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", away);
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.removeEventListener("mousedown", away);
+      document.removeEventListener("keydown", esc);
+    };
+  }, [open]);
+  const [r, c] = hot;
+  const label = r && c ? `${c} column${c === 1 ? "" : "s"} \xD7 ${r} row${r === 1 ? "" : "s"}` : "Pick a size";
+  return /* @__PURE__ */ jsxs("span", { className: ["realiiz-md__tgwrap", open && "is-open"].filter(Boolean).join(" "), ref: wrap, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", "data-tool": "table", "data-tip": "New table \u2014 pick a size", "aria-label": "Insert a table", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: MD_ICONS.table }),
+    open && /* @__PURE__ */ jsxs("span", { className: "realiiz-md__tgrid", role: "dialog", "aria-label": "Table size", onMouseLeave: () => setHot([0, 0]), children: [
+      /* @__PURE__ */ jsx("span", { className: "realiiz-md__tgcells", children: Array.from({ length: MAX * MAX }, (_, n) => {
+        const rr = Math.floor(n / MAX) + 1, cc = n % MAX + 1;
+        return /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: rr <= r && cc <= c ? "hot" : void 0,
+            onMouseEnter: () => setHot([rr, cc]),
+            onClick: () => {
+              setOpen(false);
+              onPick(rr, cc);
+            },
+            "aria-label": `${cc} \xD7 ${rr}`,
+            role: "button"
+          },
+          n
+        );
+      }) }),
+      /* @__PURE__ */ jsx("span", { className: "realiiz-md__tglab", children: label })
+    ] })
+  ] });
+}
+var FORMAT = ["bold", "italic"];
+var BLOCK = ["h2", "h3", "ul", "ol", "quote"];
+var INLINE = ["link", "code"];
+var INSERT = ["image", "dot", "rule"];
+var TABLE_OPS = [
+  { op: "rowAfter", label: "+ Row", tip: "Insert a row below this one" },
+  { op: "rowDel", label: "\u2212 Row", tip: "Delete this row" },
+  { op: "colAfter", label: "+ Col", tip: "Insert a column to the right" },
+  { op: "colDel", label: "\u2212 Col", tip: "Delete this column" }
+];
+function MarkdownEditor({ id, name = "body", value, onChange, placeholder, renderPreview, previewClassName, minHeight = 320, termComponent }) {
+  const [mode, setMode] = useState(() => renderPreview && value.trim() ? "preview" : "edit");
+  const [preview, setPreview] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [on, setOn] = useState(() => /* @__PURE__ */ new Set());
+  const [inTable, setInTable] = useState(false);
+  const [note, setNote] = useState(null);
+  const ta = useRef(null);
+  const sync = useCallback(() => {
+    const el = ta.current;
+    if (!el) return;
+    setOn(activeTools(el.value, el.selectionStart, el.selectionEnd));
+    setInTable(Boolean(tableAt(el.value, el.selectionStart)));
+  }, []);
+  const commit = (edit) => {
+    const el = ta.current;
+    if (!el) return;
+    const { text, a, b } = edit;
+    const from = commonPrefix(el.value, text);
+    const oldTail = el.value.length - from, newTail = text.length - from;
+    const suffix = commonSuffix(el.value.slice(from), text.slice(from));
+    const oldEnd = from + oldTail - suffix, newEnd = from + newTail - suffix;
+    let ok = false;
+    el.focus();
+    el.setSelectionRange(from, oldEnd);
+    try {
+      ok = document.execCommand("insertText", false, text.slice(from, newEnd));
+    } catch {
+      ok = false;
+    }
+    if (!ok || el.value !== text) onChange(text);
+    requestAnimationFrame(() => {
+      el.setSelectionRange(a, b);
+      sync();
+    });
+  };
+  const run = (apply) => {
+    const el = ta.current;
+    if (!el) return;
+    commit(apply(value, el.selectionStart, el.selectionEnd));
+  };
+  const runTable = (op) => {
+    const el = ta.current;
+    if (!el) return;
+    const r = applyTableOp(value, el.selectionStart, op);
+    if (!r) return;
+    if ("error" in r) {
+      setNote(r.error);
+      return;
+    }
+    setNote(null);
+    commit(r);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape" && expanded) {
+      e.preventDefault();
+      setExpanded(false);
+      return;
+    }
+    if (!(e.metaKey || e.ctrlKey)) return;
+    if (e.key === "b") {
+      e.preventDefault();
+      run(toolById("bold").apply);
+    }
+    if (e.key === "i") {
+      e.preventDefault();
+      run(toolById("italic").apply);
+    }
+    if (e.key === "k") {
+      e.preventDefault();
+      run(toolById("link").apply);
+    }
+  };
+  useEffect(() => {
+    if (!expanded) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const esc = (e) => {
+      if (e.key === "Escape") setExpanded(false);
+    };
+    document.addEventListener("keydown", esc);
+    return () => {
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", esc);
+    };
+  }, [expanded]);
+  useEffect(() => {
+    if (mode !== "preview" || !renderPreview) return;
+    let live = true;
+    setLoading(true);
+    renderPreview(value).then((r) => {
+      if (live) setPreview(r);
+    }).catch((err) => {
+      if (live) setPreview({ error: err instanceof Error ? err.message : String(err) });
+    }).finally(() => {
+      if (live) setLoading(false);
+    });
+    return () => {
+      live = false;
+    };
+  }, [mode, value, renderPreview]);
+  const termTool = termComponent ? { id: "term", title: `Tooltip \u2014 wraps the selection in <${termComponent}>`, apply: toggleTerm(termComponent) } : null;
+  const btn = (toolId) => {
+    const t = toolId === "term" && termTool ? termTool : toolById(toolId);
+    return /* @__PURE__ */ jsx("button", { type: "button", "data-tool": t.id, "data-tip": t.title, "aria-label": t.title, "aria-pressed": on.has(t.id) || void 0, className: on.has(t.id) ? "on" : void 0, onMouseDown: (e) => e.preventDefault(), onClick: () => run(t.apply), children: MD_ICONS[t.id] }, t.id);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["realiiz-md", expanded && "realiiz-md--fs"].filter(Boolean).join(" "), children: [
+    renderPreview && /* @__PURE__ */ jsxs("span", { className: "realiiz-md__mode", role: "tablist", "aria-label": "Editor mode", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", role: "tab", "aria-selected": mode === "edit", onClick: () => setMode("edit"), children: "Edit Markdown" }),
+      /* @__PURE__ */ jsx("button", { type: "button", role: "tab", "aria-selected": mode === "preview", onClick: () => setMode("preview"), children: "Preview" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "realiiz-md__panel", children: [
+      /* @__PURE__ */ jsxs("div", { className: "realiiz-md__head", children: [
+        mode === "edit" && /* @__PURE__ */ jsxs("span", { className: "realiiz-md__tools", role: "toolbar", "aria-label": "Formatting", children: [
+          FORMAT.map(btn),
+          /* @__PURE__ */ jsx("span", { className: "realiiz-md__sep" }),
+          BLOCK.map(btn),
+          /* @__PURE__ */ jsx("span", { className: "realiiz-md__sep" }),
+          INLINE.map(btn),
+          termTool && btn("term"),
+          inTable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "realiiz-md__sep" }),
+            TABLE_OPS.map((t) => /* @__PURE__ */ jsx("button", { type: "button", "data-tbl-op": t.op, "data-tip": t.tip, "aria-label": t.tip, onMouseDown: (e) => e.preventDefault(), onClick: () => runTable(t.op), children: t.label }, t.op))
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "realiiz-md__insert", children: [
+            /* @__PURE__ */ jsx("span", { className: "realiiz-md__lab", children: "Insert" }),
+            INSERT.map(btn),
+            /* @__PURE__ */ jsx(TableGrid, { onPick: (r, c) => run(insertTable(r, c)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "realiiz-md__spacer" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "realiiz-md__expand",
+            "data-tip": expanded ? "Back to the normal layout \u2014 or press Esc" : "Fill the window \u2014 Esc to come back",
+            "aria-label": expanded ? "Exit" : "Expand",
+            onClick: () => setExpanded((x) => !x),
+            children: expanded ? MD_ICONS.contract : MD_ICONS.expand
+          }
+        )
+      ] }),
+      mode === "edit" ? /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: ta,
+          id,
+          name,
+          className: "realiiz-form__control realiiz-form__control--body realiiz-md__ta",
+          style: expanded ? void 0 : { minHeight },
+          value,
+          placeholder,
+          onChange: (e) => {
+            onChange(e.target.value);
+            sync();
+          },
+          onSelect: sync,
+          onKeyUp: sync,
+          onClick: sync,
+          onKeyDown: onKey,
+          spellCheck: true
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "realiiz-md__preview", style: expanded ? void 0 : { minHeight }, "aria-live": "polite", "aria-busy": loading, children: [
+        loading && /* @__PURE__ */ jsx("div", { className: "realiiz-md__loading", children: "Rendering\u2026" }),
+        !loading && preview && "error" in preview && /* @__PURE__ */ jsxs("div", { className: "realiiz-form__alert", role: "alert", children: [
+          "Couldn't render: ",
+          preview.error
+        ] }),
+        !loading && preview && "html" in preview && /* @__PURE__ */ jsx("div", { className: ["realiiz-prose", previewClassName].filter(Boolean).join(" "), dangerouslySetInnerHTML: { __html: preview.html } })
+      ] })
+    ] }),
+    note && /* @__PURE__ */ jsx("div", { className: "realiiz-form__helper realiiz-md__note", role: "status", children: note })
+  ] });
+}
+function commonPrefix(a, b) {
+  const n = Math.min(a.length, b.length);
+  let i = 0;
+  while (i < n && a[i] === b[i]) i++;
+  return i;
+}
+function commonSuffix(a, b) {
+  const n = Math.min(a.length, b.length);
+  let i = 0;
+  while (i < n && a[a.length - 1 - i] === b[b.length - 1 - i]) i++;
+  return i;
+}
+
 // src/forms-ui/issues.ts
 function mapIssues(issues, specs) {
   const byName = new Map(specs.map((s) => [s.name, s]));
@@ -189,10 +772,13 @@ function toControl(spec, raw) {
   switch (spec.input) {
     case "boolean":
       return Boolean(raw);
-    case "date":
-      return raw instanceof Date ? raw.toISOString().slice(0, 10) : String(raw);
+    case "date": {
+      if (raw instanceof Date) return raw.toISOString().slice(0, 10);
+      const s = String(raw);
+      return /^\d{4}-\d{2}-\d{2}/.test(s) ? s.slice(0, 10) : s;
+    }
     case "tags":
-      return Array.isArray(raw) ? raw.join(", ") : String(raw);
+      return Array.isArray(raw) ? raw.map(String) : String(raw).split(",").map((t) => t.trim()).filter(Boolean);
     default:
       return String(raw);
   }
@@ -213,6 +799,10 @@ function toFrontmatter(specs, state, hiddenValues) {
       frontmatter[spec.name] = PENDING_UPLOAD_PREFIX + v.name;
       continue;
     }
+    if (Array.isArray(v)) {
+      if (v.length || spec.required) frontmatter[spec.name] = v;
+      continue;
+    }
     const s = typeof v === "string" ? v.trim() : "";
     if (s === "") {
       if (spec.required) frontmatter[spec.name] = spec.input === "tags" ? [] : "";
@@ -233,13 +823,39 @@ function toFrontmatter(specs, state, hiddenValues) {
   }
   return { frontmatter, files };
 }
-function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, onCancel, submitLabel = "Save", className, showBody = true, bodyLabel = "Content" }) {
+var LEAVE_MESSAGE = "You have unsaved changes. Leave this page and lose them?";
+function slugify(s) {
+  return s.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, onCancel, submitLabel = "Save", className, showBody = true, bodyLabel = "Content", renderPreview, previewClassName, termComponent, stickyBar = false, status, barExtra, footer, renderLabel, derive, guardUnsaved = true }) {
   const formId = useId();
   const specs = useMemo(() => walkSchema(entry.schema, entry), [entry]);
   const visible = useMemo(() => specs.filter((s) => s.role !== "hidden" && s.role !== "body"), [specs]);
   const bodySpec = specs.find((s) => s.role === "body");
-  const [state, setState] = useState(() => Object.fromEntries(specs.map((s) => [s.name, toControl(s, initialValues[s.name])])));
+  const sections = useMemo(() => {
+    const groups = entry.groups ?? [];
+    const grouped = new Set(groups.flatMap((g) => g.fields));
+    const byName = new Map(visible.map((s) => [s.name, s]));
+    const main = { label: entry.singular ?? entry.label, fields: visible.filter((s) => !grouped.has(s.name)) };
+    const rest = groups.map((g) => ({ label: g.label, fields: g.fields.map((n) => byName.get(n)).filter((s) => Boolean(s)) })).filter((g) => g.fields.length > 0);
+    return [main, ...rest];
+  }, [visible, entry.groups, entry.label, entry.singular]);
+  const initialState = useMemo(() => Object.fromEntries(specs.map((s) => [s.name, toControl(s, initialValues[s.name])])), [specs, initialValues]);
+  const [state, setState] = useState(initialState);
+  const [deriving, setDeriving] = useState(() => Boolean(derive && !initialState[derive.target]));
+  const update = (name, v) => setState((st) => {
+    const next = { ...st, [name]: v };
+    if (derive && deriving && name === derive.source && typeof v === "string") {
+      next[derive.target] = (derive.transform ?? slugify)(v);
+    }
+    return next;
+  });
+  const onFieldChange = (name, v) => {
+    if (derive && deriving && name === derive.target) setDeriving(false);
+    update(name, v);
+  };
   const [body, setBody] = useState(initialBody);
+  const dirty = body !== initialBody || specs.some((s) => !sameValue(state[s.name], initialState[s.name]));
   const [issues, setIssues] = useState([]);
   const [attempted, setAttempted] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -262,6 +878,31 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
       live = false;
     };
   }, [visible]);
+  const leaving = useRef(false);
+  useEffect(() => {
+    if (!guardUnsaved || !dirty || submitting) return;
+    const onUnload = (e) => {
+      if (!leaving.current) {
+        e.preventDefault();
+        e.returnValue = LEAVE_MESSAGE;
+      }
+    };
+    const onClick = (e) => {
+      const a = e.target?.closest?.("a[href]");
+      if (!a || a.target === "_blank" || e.defaultPrevented || e.metaKey || e.ctrlKey) return;
+      if (a.origin !== window.location.origin) return;
+      if (!window.confirm(LEAVE_MESSAGE)) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else leaving.current = true;
+    };
+    window.addEventListener("beforeunload", onUnload);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      window.removeEventListener("beforeunload", onUnload);
+      document.removeEventListener("click", onClick, true);
+    };
+  }, [guardUnsaved, dirty, submitting]);
   const validate = useCallback(() => {
     const { frontmatter } = toFrontmatter(specs, state, hiddenValues);
     const result = entry.schema.safeParse(frontmatter);
@@ -290,9 +931,9 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
       /* @__PURE__ */ jsx("strong", { children: "This can't be saved yet." }),
       /* @__PURE__ */ jsx("ul", { children: formLevel.map((i, n) => /* @__PURE__ */ jsx("li", { children: i.message }, n)) })
     ] }),
-    /* @__PURE__ */ jsxs("fieldset", { children: [
-      /* @__PURE__ */ jsx("legend", { children: entry.label }),
-      visible.map((s) => /* @__PURE__ */ jsx(
+    sections.map((sec) => /* @__PURE__ */ jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsx("legend", { children: sec.label }),
+      sec.fields.map((s) => /* @__PURE__ */ jsx(
         Field,
         {
           formId,
@@ -301,36 +942,45 @@ function ContentForm({ entry, initialValues = {}, initialBody = "", onSubmit, on
           issues: byField.get(s.name) ?? [],
           current: typeof initialValues[s.name] === "string" ? initialValues[s.name] : void 0,
           options: optionsFor(s),
-          onChange: (v) => setState((st) => ({ ...st, [s.name]: v })),
+          renderLabel,
+          onChange: (v) => onFieldChange(s.name, v),
           onBlur: () => {
             if (attempted) validate();
           }
         },
         s.name
       ))
-    ] }),
+    ] }, sec.label)),
     (showBody || bodySpec) && /* @__PURE__ */ jsxs("fieldset", { children: [
       /* @__PURE__ */ jsx("legend", { children: bodySpec?.label ?? bodyLabel }),
-      /* @__PURE__ */ jsx("label", { className: "realiiz-form__label", htmlFor: `${formId}-body`, children: bodySpec?.label ?? bodyLabel }),
+      /* @__PURE__ */ jsx("label", { className: "realiiz-form__label realiiz-sr-only", htmlFor: `${formId}-body`, children: bodySpec?.label ?? bodyLabel }),
       /* @__PURE__ */ jsx(
-        "textarea",
+        MarkdownEditor,
         {
           id: `${formId}-body`,
-          name: "body",
-          className: "realiiz-form__control realiiz-form__control--body",
           value: body,
+          onChange: setBody,
           placeholder: bodySpec?.placeholder ?? "Write in Markdown. Headings with ##, links as [text](url).",
-          onChange: (e) => setBody(e.target.value)
+          renderPreview,
+          previewClassName,
+          termComponent
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "realiiz-form__actions", children: [
+    footer && /* @__PURE__ */ jsx("div", { className: "realiiz-form__footer", children: footer }),
+    /* @__PURE__ */ jsxs("div", { className: stickyBar ? "realiiz-form__bar" : "realiiz-form__actions", "data-dirty": dirty || void 0, children: [
+      stickyBar && /* @__PURE__ */ jsx("span", { className: "realiiz-form__status", role: "status", children: status ?? (dirty ? "Unsaved changes" : "No changes yet") }),
+      stickyBar && barExtra,
       onCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "realiiz-form__button", onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ jsx("button", { type: "submit", className: "realiiz-form__button realiiz-form__button--primary", disabled: submitting, children: submitting ? `${submitLabel}\u2026` : submitLabel })
     ] })
   ] });
 }
+function sameValue(a, b) {
+  if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => v === b[i]);
+  return a === b;
+}
 
-export { ContentForm, PENDING_UPLOAD_PREFIX };
+export { ChipsInput, ContentForm, LengthGauge, MarkdownEditor, PENDING_UPLOAD_PREFIX, TOOLS, slugify };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map