@aeratic/pagetailor 0.3.0 → 0.5.0

package/src/studio/tabs/PagesTab.jsx

@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { Select, Toggle, ListEditor, YamlPane, SaveBar, useFileDraft, danger, section, h } from "../ui.jsx";
+import { notationToProp } from "./ComponentsTab.jsx";
+import { validateTree, typeAccepts, splitRef } from "../../validator.js";
+
+// A path addresses a node from the root: [] is the root, [0, "chart"] is child "chart" of the first child.
+export function nodeAt(tree, path) {
+  let n = tree;
+  for (const k of path) { n = n?.children?.[k]; if (n === undefined) return undefined; }
+  return n;
+}
+// Copy of tree with the node at path replaced by fn(node) (fn may also mutate and return nothing).
+export function updateAt(tree, path, fn) {
+  if (!path.length) { const n = structuredClone(tree); const r = fn(n); return r === undefined ? n : r; }
+  const copy = structuredClone(tree), parent = nodeAt(copy, path.slice(0, -1)), k = path.at(-1);
+  const r = fn(parent.children[k]);
+  if (r !== undefined) parent.children[k] = r;
+  return copy;
+}
+export const schemaOf = (registry, ref) => registry?.[splitRef(ref ?? "")[0]]?.props;
+
+// Catalog sources whose returned type the component accepts; none for containers or components without `accepts`.
+export function acceptedSources(catalog, component) {
+  if (!component?.accepts || component.container) return [];
+  return Object.keys(catalog ?? {}).filter(s => catalog[s]?.returns && typeAccepts(component.accepts, catalog[s].returns));
+}
+
+// Keep the props the new schema still declares; without a new schema everything is kept.
+export function migrateProps(props, oldSchema, newSchema) {
+  if (!newSchema) return { ...(props ?? {}) };
+  return Object.fromEntries(Object.entries(props ?? {}).filter(([k]) => k in newSchema));
+}
+
+// areas: text of rows, cells separated by spaces, "." is an empty cell.
+const rows = areas => String(areas ?? "").split("\n").map(r => r.trim().split(/\s+/).filter(Boolean)).filter(r => r.length);
+const text = rs => rs.length ? rs.map(r => r.join(" ")).join("\n") + "\n" : "";
+export const appendAreaRow = (areas, name) => {
+  const rs = rows(areas), cols = Math.max(1, ...rs.map(r => r.length));
+  return text([...rs, Array(cols).fill(name)]);
+};
+// The name's cells become "."; rows left all empty are dropped.
+export const removeAreaName = (areas, name) => text(rows(areas).map(r => r.map(c => c === name ? "." : c)).filter(r => r.some(c => c !== ".")));
+export const renameAreaName = (areas, from, to) => text(rows(areas).map(r => r.map(c => c === from ? to : c)));
+
+const defaultFor = (key, t) => t.type === "number" ? 0 : t.type === "boolean" ? false : t.type === "enum" ? (t.values?.[0] ?? "")
+  : t.type.endsWith("[]") ? [] : key === "areas" && t.type === "text" ? ".\n" : "";
+// New node with the required props filled in; containers get children ({} when they place them by areas).
+export function newNode(name, version, entry) {
+  const node = { ref: `${name}@${version}` };
+  const props = Object.fromEntries(Object.entries(entry?.props ?? {}).map(([k, s]) => [k, notationToProp(s)]).filter(([, t]) => !t.optional).map(([k, t]) => [k, defaultFor(k, t)]));
+  if (Object.keys(props).length) node.props = props;
+  if (entry?.container) node.children = "areas" in (entry.props ?? {}) ? {} : [];
+  return node;
+}
+
+export const refOptions = registry => Object.entries(registry ?? {}).flatMap(([n, e]) => Object.keys(e.versions ?? {}).map(v => `${n}@${v}`));
+const pathKey = p => JSON.stringify(p);
+const listText = v => [].concat(v ?? []).join(", ");
+
+function Tree({ node, path, sel, onSel, name }) {
+  if (!node) return null;
+  const on = pathKey(path) === pathKey(sel);
+  const kids = Array.isArray(node.children) ? node.children.map((c, i) => [i, c, null]) : Object.entries(node.children ?? {}).map(([k, c]) => [k, c, k]);
+  return <div style={{ paddingLeft: path.length ? 14 : 0 }}>
+    <button onClick={() => onSel(path)} style={{ border: "none", background: on ? "var(--pt-color-surface)" : "none", cursor: "pointer", padding: "2px 4px", fontSize: 13, textAlign: "left", fontWeight: on ? 700 : 400 }}>
+      {name && <span style={{ color: "var(--pt-color-muted)" }}>{name}: </span>}{node.ref}
+      {node.data?.source && <span style={{ color: "var(--pt-color-muted)" }}> ← {node.data.source}</span>}
+    </button>
+    {kids.map(([k, c, n]) => <Tree key={k} node={c} path={[...path, k]} sel={sel} onSel={onSel} name={n} />)}
+  </div>;
+}
+
+function PropInput({ k, t, value, onChange }) {
+  const lab = { display: "flex", flexDirection: "column", gap: 4, fontSize: 13, marginBottom: 12 };
+  const clear = t.optional && value !== undefined && <button onClick={() => onChange(undefined)} style={{ alignSelf: "flex-start", fontSize: 11 }}>clear</button>;
+  const title = <span>{k}{t.optional ? "" : " *"}</span>;
+  if (t.type === "boolean") return <div style={{ marginBottom: 12, display: "flex", gap: 8 }}><Toggle label={k} checked={value} onChange={onChange} />{clear}</div>;
+  if (t.type === "enum") return <label style={lab}>{title}<select value={value ?? ""} onChange={e => onChange(e.target.value || undefined)} style={{ maxWidth: 320 }}>
+    <option value="">{t.optional ? "(none)" : "choose…"}</option>{t.values.map(v => <option key={v}>{v}</option>)}</select></label>;
+  const input = t.type === "text" ? <textarea rows={4} value={value ?? ""} onChange={e => onChange(e.target.value)} style={{ maxWidth: 420, fontFamily: "monospace" }} />
+    : t.type === "number" ? <input type="number" value={value ?? ""} onChange={e => onChange(e.target.value === "" ? undefined : Number(e.target.value))} style={{ maxWidth: 320 }} />
+    : t.type.endsWith("[]") ? <input value={listText(value)} placeholder="comma separated" onChange={e => onChange(e.target.value.split(",").map(s => s.trim()).filter(Boolean).map(s => t.type === "number[]" ? Number(s) : s))} style={{ maxWidth: 320 }} />
+    : <input value={value ?? ""} onChange={e => onChange(e.target.value)} style={{ maxWidth: 320 }} />;
+  return <label style={lab}>{title}{input}{clear}</label>;
+}
+
+// Free JSON for components without a props schema; applied only when it parses.
+function JsonProps({ value, onChange }) {
+  const [txt, setTxt] = useState(JSON.stringify(value ?? {}, null, 2)), [bad, setBad] = useState(false);
+  return <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, marginBottom: 12 }}>props (JSON)
+    <textarea rows={6} value={txt} style={{ maxWidth: 420, fontFamily: "monospace" }} onChange={e => {
+      setTxt(e.target.value);
+      try { const v = JSON.parse(e.target.value || "{}"); setBad(false); onChange(v); } catch { setBad(true); }
+    }} />{bad && <span style={danger}>not valid JSON</span>}
+  </label>;
+}
+
+// pages/<slug>.yaml: the tree of components, their props, data bindings and grid areas.
+export function PagesTab({ project }) {
+  const pages = project.pages ?? [];
+  const [slug, setSlug] = useState(() => { const p = new URLSearchParams(location.search).get("page"); return pages.includes(p) ? p : pages[0]; });
+  const pick = s => { const q = new URLSearchParams(location.search); q.set("page", s); history.replaceState(null, "", "?" + q); setSlug(s); };
+  if (!slug) return <main style={{ padding: 16 }}>no pages yet, add one in the App tab</main>;
+  return <PageEditor key={slug} slug={slug} pages={pages} pick={pick} project={project} />;
+}
+
+function PageEditor({ slug, pages, pick, project }) {
+  const file = useFileDraft(`pages/${slug}`);
+  const [sel, setSel] = useState([]);
+  const page = file.draft;
+  if (!page) return null;
+  const { registry = {}, catalog = {} } = project;
+  const tree = page.layout;
+  const node = nodeAt(tree, sel) ?? tree;
+  const path = nodeAt(tree, sel) ? sel : [];
+  const errors = tree ? validateTree(tree, { registry, catalog }) : [{ path: "root", message: "page has no layout" }];
+  const edit = fn => file.update(d => { d.layout = updateAt(d.layout, path, fn); });
+  const [name] = splitRef(node?.ref ?? "");
+  const entry = registry[name], schema = entry?.props;
+  const refs = refOptions(registry);
+
+  const setRef = ref => edit(n => {
+    const [nn, v] = splitRef(ref), next = registry[nn];
+    if (nn === name) { n.ref = ref; return; }
+    const fresh = newNode(nn, v, next), props = { ...(fresh.props ?? {}), ...migrateProps(n.props, schema, next?.props) };
+    n.ref = ref;
+    if (Object.keys(props).length) n.props = props; else delete n.props;
+    if (next?.container) { delete n.data; if (!n.children) n.children = fresh.children; }
+    else { delete n.children; if (n.data && !acceptedSources(catalog, next).includes(n.data.source)) delete n.data; }
+  });
+  const setProp = (k, v) => edit(n => { n.props = { ...(n.props ?? {}) }; if (v === undefined) delete n.props[k]; else n.props[k] = v; if (!Object.keys(n.props).length) delete n.props; });
+  const removeNode = () => {
+    const parentPath = path.slice(0, -1), k = path.at(-1);
+    file.update(d => { d.layout = updateAt(d.layout, parentPath, p => {
+      if (Array.isArray(p.children)) p.children.splice(k, 1);
+      else { delete p.children[k]; if (p.props?.areas !== undefined) p.props.areas = removeAreaName(p.props.areas, k); }
+    }); });
+    setSel(parentPath);
+  };
+  const named = node?.children && !Array.isArray(node.children);
+  const sources = acceptedSources(catalog, entry), src = catalog[node?.data?.source];
+  const newRef = r => { const [n, v] = splitRef(r); return newNode(n, v, registry[n]); };
+
+  return <div style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 90px)" }}>
+    <main style={{ padding: 16, maxWidth: 1000, width: "100%", boxSizing: "border-box", margin: "0 auto", flex: 1 }}>
+      <Select label="page" value={slug} options={pages} onChange={pick} />
+      <div style={{ display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
+        <div style={{ ...section, flex: "1 1 300px" }}>
+          <h3 style={h}>Tree</h3>
+          <Tree node={tree} path={[]} sel={path} onSel={setSel} />
+          {errors.length > 0 && <ul style={{ ...danger, fontSize: 12, paddingLeft: 16 }}>{errors.map((e, i) => <li key={i}>{e.path}: {e.message}</li>)}</ul>}
+        </div>
+        {node && <div style={{ ...section, flex: "1 1 360px" }}>
+          <h3 style={h}>Node {path.length ? path.join(" / ") : "(root)"}</h3>
+          <Select label="component" value={node.ref} options={refs.includes(node.ref) ? refs : [node.ref, ...refs]} onChange={setRef} />
+          {schema ? Object.entries(schema).map(([k, s]) => <PropInput key={pathKey(path) + k} k={k} t={notationToProp(s)} value={node.props?.[k]} onChange={v => setProp(k, v)} />)
+            : <JsonProps key={pathKey(path) + node.ref} value={node.props} onChange={v => edit(n => { if (v && Object.keys(v).length) n.props = v; else delete n.props; })} />}
+          {entry?.accepts && !entry.container && <>
+            <Select label={`data (${entry.accepts})`} value={node.data?.source} options={sources} empty="(none)"
+              onChange={s => edit(n => { if (s) n.data = { source: s }; else delete n.data; })} />
+            {src && Object.entries(src.params ?? {}).map(([k, allowed]) => {
+              const v = node.data.params?.[k];
+              const set = val => edit(n => { n.data.params = { ...(n.data.params ?? {}) }; if (val === "" || val === undefined) delete n.data.params[k]; else n.data.params[k] = val; if (!Object.keys(n.data.params).length) delete n.data.params; });
+              return Array.isArray(allowed) ? <Select key={k} label={`param ${k}`} value={v} options={allowed.map(String)} empty="(default)" onChange={set} />
+                : <label key={k} style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, marginBottom: 12 }}>param {k}<input value={v ?? ""} onChange={e => set(e.target.value)} style={{ maxWidth: 320 }} /></label>;
+            })}
+          </>}
+          {named && <NamedChildren node={node} refs={refs} edit={edit} newRef={newRef} />}
+          {Array.isArray(node.children) && <div style={{ marginBottom: 12 }}>
+            <span style={{ fontSize: 13 }}>children</span>
+            <ListEditor items={node.children} onRemove={i => edit(n => { n.children.splice(i, 1); })}
+              render={(c, i) => <>
+                <span style={{ flex: 1 }}>{c.ref}</span>
+                <button disabled={i === 0} onClick={() => edit(n => { [n.children[i - 1], n.children[i]] = [n.children[i], n.children[i - 1]]; })}>↑</button>
+                <button disabled={i === node.children.length - 1} onClick={() => edit(n => { [n.children[i + 1], n.children[i]] = [n.children[i], n.children[i + 1]]; })}>↓</button>
+              </>} />
+            <select value="" onChange={e => e.target.value && edit(n => { n.children.push(newRef(e.target.value)); })} style={{ marginTop: 8 }}>
+              <option value="">+ child…</option>{refs.map(r => <option key={r}>{r}</option>)}
+            </select>
+          </div>}
+          {path.length > 0 && <button onClick={removeNode} style={danger}>remove node</button>}
+        </div>}
+      </div>
+    </main>
+    <div style={{ position: "sticky", bottom: 0, background: "var(--pt-color-background)" }}>
+      <SaveBar file={file} />
+      <YamlPane name={slug} value={page} />
+    </div>
+  </div>;
+}
+
+// Children placed by name (grid areas): rename, remove, add with a new full-width row.
+function NamedChildren({ node, refs, edit, newRef }) {
+  const [nm, setNm] = useState(""), [ref, setRef] = useState(""), [note, setNote] = useState(null);
+  const names = Object.keys(node.children), hasAreas = node.props?.areas !== undefined;
+  const ok = n => /^[A-Za-z_][\w-]*$/.test(n) && !names.includes(n);
+  const rename = (from, to) => {
+    if (!ok(to)) { setNote(`"${to}": not a valid or free name`); return; }
+    setNote(null);
+    edit(n => { n.children = Object.fromEntries(Object.entries(n.children).map(([k, c]) => [k === from ? to : k, c])); if (hasAreas) n.props.areas = renameAreaName(n.props.areas, from, to); });
+  };
+  const add = e => {
+    e.preventDefault();
+    if (!ok(nm)) { setNote(`"${nm}": not a valid or free name`); return; }
+    if (!ref) { setNote("choose a component"); return; }
+    setNote(null);
+    edit(n => { n.children[nm] = newRef(ref); n.props = { ...(n.props ?? {}), areas: appendAreaRow(n.props?.areas, nm) }; });
+    setNm(""); setRef("");
+  };
+  return <div style={{ marginBottom: 12 }}>
+    <span style={{ fontSize: 13 }}>children by name</span>
+    {note && <p style={{ ...danger, fontSize: 12 }}>{note}</p>}
+    <ListEditor items={names} onRemove={i => edit(n => { delete n.children[names[i]]; if (hasAreas) n.props.areas = removeAreaName(n.props.areas, names[i]); })}
+      render={k => <><strong style={{ minWidth: 80 }}>{k}</strong><span style={{ flex: 1 }}>{node.children[k].ref}</span>
+        <button onClick={() => { const to = prompt("New name", k); if (to && to !== k) rename(k, to); }}>rename</button></>} />
+    <form onSubmit={add} style={{ display: "flex", gap: 6, marginTop: 8 }}>
+      <input value={nm} placeholder="name" onChange={e => setNm(e.target.value)} style={{ width: 100 }} />
+      <select value={ref} onChange={e => setRef(e.target.value)}><option value="">component…</option>{refs.map(r => <option key={r}>{r}</option>)}</select>
+      <button type="submit">+ child</button>
+    </form>
+  </div>;
+}

package/src/studio/tabs/PeopleTab.jsx

@@ -0,0 +1,211 @@
+import { useEffect, useState } from "react";
+import { Field, Select, ListEditor, YamlPane, SaveBar, useFileDraft, api, errorText, danger, section, h } from "../ui.jsx";
+
+const SLUG = /^[a-z0-9-]+$/;
+export const OPS = ["set-areas", "set-props", "set-data", "replace", "remove", "insert", "move"];
+const FIELDS = {
+  "set-areas": ["target", "areas"], "set-props": ["target", "props"], "set-data": ["target", "data"],
+  replace: ["target", "with"], remove: ["target"], insert: ["target", "name", "node", "before", "area"], move: ["target", "to"],
+};
+const JSON_FIELDS = ["props", "data", "with", "node"];
+
+// The fields a patch with this op needs, in display order.
+export const patchFields = op => FIELDS[op] ?? ["target"];
+
+// "set-areas layout/grid, remove kpi"
+export const summarizePatches = patches => (patches ?? []).map(p => [p.op, p.target].filter(Boolean).join(" ")).join(", ");
+
+// Child names and component names (ref without @version) found in a page tree, sorted and unique.
+export function collectTargets(tree) {
+  const out = new Set();
+  const walk = node => {
+    if (!node || typeof node !== "object") return;
+    if (typeof node.ref === "string") out.add(node.ref.split("@")[0]);
+    const kids = node.children;
+    if (Array.isArray(kids)) kids.forEach(walk);
+    else if (kids && typeof kids === "object") for (const [k, v] of Object.entries(kids)) { out.add(k); walk(v); }
+  };
+  walk(tree?.layout ?? tree);
+  return [...out].sort();
+}
+
+const overrideNames = project => {
+  const o = project?.overrides ?? [];
+  return (Array.isArray(o) ? o.map(x => typeof x === "string" ? x : x.name) : Object.keys(o)).filter(Boolean).sort();
+};
+const small = { fontSize: 12, fontFamily: "monospace" };
+const cell = { padding: "4px 6px", borderBottom: "1px solid var(--pt-color-border)", textAlign: "left", verticalAlign: "top" };
+
+function JsonBox({ value, onChange }) {
+  const [text, setText] = useState(JSON.stringify(value ?? {}));
+  const [bad, setBad] = useState(false);
+  useEffect(() => { setText(JSON.stringify(value ?? {})); setBad(false); }, [JSON.stringify(value)]);
+  return <textarea rows={2} cols={40} value={text} style={{ ...small, borderColor: bad ? "var(--pt-color-danger)" : undefined }}
+    onChange={e => { setText(e.target.value); try { onChange(JSON.parse(e.target.value)); setBad(false); } catch { setBad(true); } }} />;
+}
+
+function PatchRow({ patch, onChange, listId }) {
+  const set = (k, v) => onChange({ ...patch, [k]: v });
+  const changeOp = op => { const keep = patchFields(op); onChange(Object.fromEntries([["op", op], ...Object.entries(patch).filter(([k]) => keep.includes(k))])); };
+  return <>
+    <select value={patch.op} onChange={e => changeOp(e.target.value)}>{OPS.map(o => <option key={o}>{o}</option>)}</select>
+    {patchFields(patch.op).map(f => <label key={f} style={{ display: "inline-flex", gap: 4, alignItems: "center" }}>
+      <span style={{ color: "var(--pt-color-muted)" }}>{f}</span>
+      {f === "areas" ? <textarea rows={3} cols={30} value={patch.areas ?? ""} onChange={e => set("areas", e.target.value)} style={small} />
+        : JSON_FIELDS.includes(f) ? <JsonBox value={patch[f]} onChange={v => set(f, v)} />
+        : f === "to" ? <input type="number" value={patch.to ?? 0} onChange={e => set("to", Number(e.target.value))} style={{ width: 60 }} />
+        : <input value={patch[f] ?? ""} list={f === "target" || f === "before" ? listId : undefined} style={{ width: 120 }}
+            onChange={e => { const v = e.target.value; if (v || f === "target") set(f, v); else { const n = { ...patch }; delete n[f]; onChange(n); } }} />}
+    </label>)}
+  </>;
+}
+
+function OverrideEditor({ name, project, reload, onRemoved }) {
+  const file = useFileDraft(`overrides/${name}`);
+  const [targets, setTargets] = useState([]);
+  const [note, setNote] = useState(null);
+  const o = file.draft;
+  const ext = o?.extends;
+  useEffect(() => {
+    if (!ext) { setTargets([]); return; }
+    api(`/api/files/pages/${ext}`).then(r => setTargets(collectTargets(r.value))).catch(() => setTargets([]));
+  }, [ext]);
+  if (!o) return null;
+  const patches = o.patches ?? [];
+  const listId = `pt-targets-${name}`;
+  const remove = async () => {
+    if (!confirm(`Delete override "${name}"?`)) return;
+    const r = await api(`/api/files/overrides/${name}`, "DELETE");
+    if (!r.ok) { setNote(errorText(r)); return; }
+    reload(); onRemoved();
+  };
+  return <div style={{ display: "flex", flexDirection: "column" }}>
+    <div style={section}>
+      <h3 style={h}>{name} <button onClick={remove} style={{ marginLeft: 8 }}>remove</button></h3>
+      <Select label="extends" value={o.extends} options={project.manifest?.pages ?? []} onChange={v => file.update(d => { d.extends = v; })} />
+      <Field label="why" value={o.why} onChange={v => file.update(d => { d.why = v; })} />
+      {note && <p style={{ ...danger, fontSize: 13 }}>{note}</p>}
+      <datalist id={listId}>{targets.map(t => <option key={t} value={t} />)}</datalist>
+      <ListEditor items={patches} addLabel="+ patch"
+        onAdd={() => file.update(d => { d.patches = [...(d.patches ?? []), { op: "remove", target: "" }]; })}
+        onRemove={i => file.update(d => { d.patches.splice(i, 1); if (!d.patches.length) delete d.patches; })}
+        render={(p, i) => <PatchRow patch={p} listId={listId} onChange={np => file.update(d => { d.patches[i] = np; })} />} />
+    </div>
+    <SaveBar file={file} />
+    <YamlPane name={`overrides/${name}`} value={o} />
+  </div>;
+}
+
+function OverridesPanel({ project, reload, selected, setSelected }) {
+  const names = overrideNames(project);
+  const roles = project.manifest?.roles ?? [];
+  const [adding, setAdding] = useState(false), [kind, setKind] = useState("role"), [who, setWho] = useState("");
+  const [note, setNote] = useState(null);
+  const create = async () => {
+    const id = kind === "role" ? who : who.trim();
+    if (!id || !SLUG.test(id)) { setNote(`"${id}": use lowercase letters, digits and dashes`); return; }
+    const name = `${kind}-${id}`;
+    if (names.includes(name)) { setNote(`override "${name}" already exists`); return; }
+    const r = await api(`/api/files/overrides/${name}`, "PUT", { value: { extends: project.manifest?.home ?? "home" }, why: `new override ${name}` });
+    if (!r.ok) { setNote(errorText(r)); return; }
+    setNote(null); setAdding(false); setWho(""); reload(); setSelected(name);
+  };
+  const group = (title, prefix) => <div style={{ marginBottom: 8 }}>
+    <div style={{ color: "var(--pt-color-muted)", fontSize: 12 }}>{title}</div>
+    {names.filter(n => n.startsWith(prefix)).map(n => <div key={n}>
+      <button onClick={() => setSelected(n)} style={{ border: "none", background: "none", cursor: "pointer", fontWeight: n === selected ? 700 : 400, padding: "2px 0" }}>{n}</button>
+    </div>)}
+  </div>;
+  return <div style={section}>
+    <h3 style={h}>Overrides</h3>
+    <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
+      <div style={{ minWidth: 160, fontSize: 13 }}>
+        {group("roles", "role-")}
+        {group("users", "user-")}
+        {!adding ? <button onClick={() => setAdding(true)}>+ override</button> : <div>
+          <Select label="kind" value={kind} options={["role", "user"]} onChange={v => { setKind(v); setWho(""); }} />
+          {kind === "role" ? <Select label="role" value={who} options={roles} empty="choose…" onChange={setWho} /> : <Field label="user" value={who} onChange={setWho} />}
+          <button onClick={create}>create</button> <button onClick={() => { setAdding(false); setNote(null); }}>cancel</button>
+        </div>}
+        {note && <p style={{ ...danger, fontSize: 13 }}>{note}</p>}
+      </div>
+      <div style={{ flex: 1 }}>
+        {selected && names.includes(selected)
+          ? <OverrideEditor key={selected} name={selected} project={project} reload={reload} onRemoved={() => setSelected(null)} />
+          : <p style={{ color: "var(--pt-color-muted)", fontSize: 13 }}>select an override</p>}
+      </div>
+    </div>
+  </div>;
+}
+
+function PendingPanel({ reload }) {
+  const params = typeof location !== "undefined" ? new URLSearchParams(location.search) : new URLSearchParams();
+  const [user, setUser] = useState(params.get("user") || "admin"), [role, setRole] = useState(params.get("role") || "admin");
+  const [rows, setRows] = useState([]), [note, setNote] = useState(null);
+  const load = () => api("/api/pending").then(r => setRows(Array.isArray(r) ? r : [])).catch(() => setRows([]));
+  useEffect(() => { load(); }, []);
+  const act = async (e, kind) => {
+    const body = { name: e.name, version: e.version, approver: user, approverRole: role };
+    if (kind === "reject") { const reason = prompt("Reason for rejecting?"); if (reason === null) return; body.reason = reason; }
+    const r = await api(`/api/${kind}`, "POST", body);
+    setNote(r.ok ? { ok: true, text: `${kind === "approve" ? "approved" : "rejected"} ${e.name} v${e.version}` } : { ok: false, text: errorText(r) });
+    load(); reload();
+  };
+  return <div style={section}>
+    <h3 style={h}>Pending proposals</h3>
+    <div style={{ display: "flex", gap: 12 }}>
+      <Field label="acting as user" value={user} onChange={setUser} />
+      <Field label="role" value={role} onChange={setRole} />
+    </div>
+    {note && <p style={{ ...(note.ok ? {} : danger), fontSize: 13 }}>{note.text}</p>}
+    {rows.length === 0 ? <p style={{ color: "var(--pt-color-muted)", fontSize: 13 }}>nothing pending</p> :
+      <table style={{ borderCollapse: "collapse", fontSize: 13, width: "100%" }}>
+        <thead><tr>{["name", "version", "author", "why", "at", "patches", ""].map(c => <th key={c} style={cell}>{c}</th>)}</tr></thead>
+        <tbody>{rows.map(e => <tr key={`${e.name}-${e.version}`}>
+          <td style={cell}>{e.name}</td><td style={cell}>{e.version}</td><td style={cell}>{e.author}</td>
+          <td style={cell}>{e.override?.why ?? e.why}</td><td style={cell}>{e.at}</td>
+          <td style={cell}>{summarizePatches(e.override?.patches)}</td>
+          <td style={{ ...cell, whiteSpace: "nowrap" }}><button onClick={() => act(e, "approve")}>Approve</button> <button onClick={() => act(e, "reject")}>Reject</button></td>
+        </tr>)}</tbody>
+      </table>}
+  </div>;
+}
+
+function HistoryPanel({ project, reload }) {
+  const names = overrideNames(project);
+  const [name, setName] = useState(""), [rows, setRows] = useState([]), [note, setNote] = useState(null);
+  const load = n => n ? api(`/api/history/${n}`).then(r => setRows(Array.isArray(r) ? [...r].sort((a, b) => b.version - a.version) : [])) : setRows([]);
+  useEffect(() => { load(name); }, [name]);
+  const roll = async v => {
+    const r = await api("/api/rollback", "POST", { name, version: v });
+    setNote(r.ok === false ? { ok: false, text: errorText(r) } : { ok: true, text: `rolled ${name} back to v${v}` });
+    load(name); reload(); window.dispatchEvent(new Event("pt:files-changed"));
+  };
+  return <div style={section}>
+    <h3 style={h}>History</h3>
+    <Select label="override" value={name} options={names} empty="choose…" onChange={setName} />
+    {note && <p style={{ ...(note.ok ? {} : danger), fontSize: 13 }}>{note.text}</p>}
+    {name && (rows.length === 0 ? <p style={{ color: "var(--pt-color-muted)", fontSize: 13 }}>no history</p> :
+      <table style={{ borderCollapse: "collapse", fontSize: 13, width: "100%" }}>
+        <thead><tr>{["version", "at", "author", "status", "why", "approvedFrom", ""].map(c => <th key={c} style={cell}>{c}</th>)}</tr></thead>
+        <tbody>{rows.map(e => <tr key={e.version}>
+          <td style={cell}>{e.version}</td><td style={cell}>{e.at}</td><td style={cell}>{e.author}</td>
+          <td style={cell}>{e.status ?? "applied"}</td><td style={cell}>{e.override?.why ?? e.why}</td><td style={cell}>{e.approvedFrom ?? ""}</td>
+          <td style={cell}>{(e.status ?? "applied") === "applied" && <button onClick={() => roll(e.version)}>Roll back to this</button>}</td>
+        </tr>)}</tbody>
+      </table>)}
+  </div>;
+}
+
+// Overrides per role and user, proposals waiting for approval, and the history of each override.
+export function PeopleTab({ project, reload }) {
+  const [selected, setSelected] = useState(null);
+  if (!project) return null;
+  return <div style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 90px)" }}>
+    <main style={{ padding: 16, maxWidth: 1000, width: "100%", boxSizing: "border-box", margin: "0 auto", flex: 1 }}>
+      <OverridesPanel project={project} reload={reload} selected={selected} setSelected={setSelected} />
+      <PendingPanel reload={reload} />
+      <HistoryPanel project={project} reload={reload} />
+    </main>
+  </div>;
+}

package/src/studio/tabs/TokensTab.jsx

@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import { Field, ListEditor, YamlPane, SaveBar, useFileDraft, section, h } from "../ui.jsx";
+import { tokensToCss } from "../../tokens.js";
+
+const NAME = /^[a-z0-9-]+$/;
+const FONT_STACKS = [
+  "Inter, system-ui, sans-serif",
+  "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+  "Helvetica Neue, Arial, sans-serif",
+  "Georgia, Cambria, Times New Roman, serif",
+  "ui-monospace, SFMono-Regular, Menlo, monospace",
+];
+
+export const isHex = s => typeof s === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(s);
+
+// Immutable set: returns a copy of obj with value at path ("a.b" or ["a","b"]).
+export function setPath(obj, path, value) {
+  const keys = Array.isArray(path) ? path : String(path).split(".");
+  if (!keys.length) return value;
+  const [k, ...rest] = keys;
+  const base = obj && typeof obj === "object" ? obj : {};
+  return { ...base, [k]: rest.length ? setPath(base[k], rest, value) : value };
+}
+
+// #abc -> #aabbcc, so <input type="color"> accepts it
+const fullHex = s => isHex(s) ? (s.length === 4 ? "#" + [...s.slice(1)].map(c => c + c).join("") : s) : "#000000";
+
+// tokens.yaml: colors, spacing, radius and font, previewed live on the whole Studio.
+export function TokensTab() {
+  const file = useFileDraft("tokens");
+  const t = file.draft;
+
+  useEffect(() => {
+    if (!t) return;
+    let el = document.getElementById("pt-tokens-draft");
+    if (!el) { el = document.createElement("style"); el.id = "pt-tokens-draft"; document.head.appendChild(el); }
+    el.textContent = tokensToCss(t);
+  }, [t]);
+  useEffect(() => () => document.getElementById("pt-tokens-draft")?.remove(), []);
+
+  if (!t) return null;
+  const colors = Object.keys(t.color ?? {}), spacing = Object.keys(t.spacing ?? {});
+  const set = (path, v) => file.setDraft(d => setPath(d, path, v));
+  const drop = (group, key) => file.update(d => { delete d[group][key]; });
+  const add = (group, initial) => name => {
+    if (!NAME.test(name) || (t[group] ?? {})[name] !== undefined) return false;
+    set([group, name], initial);
+  };
+
+  return <div style={{ display: "flex", flexDirection: "column", minHeight: "calc(100vh - 90px)" }}>
+    <main style={{ padding: 16, maxWidth: 800, width: "100%", boxSizing: "border-box", margin: "0 auto", flex: 1 }}>
+      <div style={{ ...section, display: "flex", gap: 8, flexWrap: "wrap" }}>
+        {colors.map(c => <div key={c} style={{ textAlign: "center", fontSize: 11 }}>
+          <div style={{ width: 48, height: 32, background: t.color[c], border: "1px solid var(--pt-color-border)", borderRadius: 4 }} />{c}
+        </div>)}
+      </div>
+      <div style={{ ...section, background: "var(--pt-color-surface)", border: "1px solid var(--pt-color-border)", borderRadius: "var(--pt-radius)", padding: "var(--pt-spacing-md)", fontFamily: "var(--pt-font-base)", fontSize: "var(--pt-font-size)", color: "var(--pt-color-text)", maxWidth: 360 }}>
+        <strong>Sample card</strong>
+        <p style={{ color: "var(--pt-color-muted)", margin: "var(--pt-spacing-sm) 0" }}>A muted line of secondary text.</p>
+        <button style={{ background: "var(--pt-color-primary)", color: "#fff", border: "none", borderRadius: "var(--pt-radius)", padding: "var(--pt-spacing-sm) var(--pt-spacing-md)" }}>Primary</button>
+      </div>
+      <div style={section}>
+        <h3 style={h}>Colors</h3>
+        <ListEditor items={colors} addLabel="+ color" addPlaceholder="name" onAdd={add("color", "#000000")} onRemove={i => drop("color", colors[i])}
+          render={c => <>
+            <strong style={{ minWidth: 120 }}>{c}</strong>
+            <input type="color" value={fullHex(t.color[c])} onChange={e => set(["color", c], e.target.value)} />
+            <input value={t.color[c] ?? ""} onChange={e => set(["color", c], e.target.value)} style={{ width: 100, ...(isHex(t.color[c]) ? {} : { borderColor: "var(--pt-color-danger)" }) }} />
+          </>} />
+      </div>
+      <div style={section}>
+        <h3 style={h}>Spacing</h3>
+        <ListEditor items={spacing} addLabel="+ spacing" addPlaceholder="name" onAdd={add("spacing", 8)} onRemove={i => drop("spacing", spacing[i])}
+          render={s => <>
+            <strong style={{ minWidth: 120 }}>{s}</strong>
+            <input type="number" min={0} value={t.spacing[s]} onChange={e => set(["spacing", s], Number(e.target.value))} style={{ width: 80 }} /> px
+          </>} />
+      </div>
+      <div style={section}>
+        <h3 style={h}>Radius</h3>
+        <Field label="radius (px)" type="number" value={t.radius} onChange={v => set(["radius"], v)} />
+      </div>
+      <div style={section}>
+        <h3 style={h}>Font</h3>
+        <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, marginBottom: 12 }}>base family
+          <input list="pt-font-stacks" value={t.font?.base ?? ""} onChange={e => set(["font", "base"], e.target.value)} style={{ maxWidth: 320 }} />
+          <datalist id="pt-font-stacks">{FONT_STACKS.map(f => <option key={f} value={f} />)}</datalist>
+        </label>
+        <Field label="size (px)" type="number" value={t.font?.size} onChange={v => set(["font", "size"], v)} />
+      </div>
+    </main>
+    <div style={{ position: "sticky", bottom: 0, background: "var(--pt-color-background)" }}>
+      <SaveBar file={file} />
+      <YamlPane name="tokens" value={t} />
+    </div>
+  </div>;
+}