sp2react 0.1.0__py3-none-any.whl

sp2react/scaffold/templates/backend/tests/conftest.py

@@ -0,0 +1,10 @@
+import os
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+sys.path.insert(0, str(ROOT))
+os.environ.setdefault("DB_PATH", str(ROOT / "data" / "test.db"))
+db = Path(os.environ["DB_PATH"])
+if db.exists():
+    db.unlink()

sp2react/scaffold/templates/backend/tests/test_rule_vectors.py

@@ -0,0 +1,38 @@
+"""The server rule engine must agree with the browser engine on every shared vector."""
+import json
+from datetime import date
+from pathlib import Path
+
+import pytest
+
+from app import rules as R
+
+VECTORS = json.loads((Path(__file__).resolve().parents[2] / "shared" / "rule_vectors.json").read_text())
+
+
+@pytest.mark.parametrize("v", VECTORS, ids=[v["name"] for v in VECTORS])
+def test_vector(v):
+    t = v["type"]
+    if t == "evaluate":
+        got = R.evaluate(v["cond"], v["ctx"])
+    elif t == "validate":
+        got = [[e["field"], e["message"], e["rule"]] for e in R.validate(v["fields"], v["rules"], v["ctx"])]
+    elif t == "field_state":
+        s = R.field_state(v["field"], v["rules"], v["ctx"])
+        got = {"visible": s["visible"], "readonly": s["readonly"], "required": s["required"]}
+    elif t == "lock":
+        r = R.lock(v["rules"], v["ctx"])
+        got = r["id"] if r else None
+        if r and v.get("message"):
+            assert R.fill_template(r["message"], v["ctx"]["values"]) == v["message"]
+    elif t == "set_on_save":
+        got = R.set_on_save(v["rules"], v["ctx"])
+    elif t == "banners":
+        got = [R.fill_template(b["message"], v["ctx"]["values"]) for b in R.banners(v["rules"], v["ctx"])]
+    elif t == "defaults":
+        got = R.defaults(v["fields"], v["rules"], v["user"], date.fromisoformat(v["today"]))
+    elif t == "fill":
+        got = R.fill_template(v["text"], v["values"])
+    elif t == "clear_hidden":
+        got = R.clear_hidden(v["fields"], v["rules"], v["ctx"])
+    assert got == v["expected"]

sp2react/scaffold/templates/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__SITE_TITLE__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

sp2react/scaffold/templates/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "converted-sharepoint-app",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}

sp2react/scaffold/templates/frontend/scripts/check-rules.ts

@@ -0,0 +1,23 @@
+// Runs shared/rule_vectors.json against the browser rule engine (node >= 22.18 strips the types).
+// The backend runs the same vectors in backend/tests/test_rule_vectors.py.
+import { readFileSync } from "node:fs";
+import * as R from "../src/runtime/rules.ts";
+
+const vectors = JSON.parse(readFileSync(new URL("../../shared/rule_vectors.json", import.meta.url), "utf8"));
+let failed = 0;
+const eq = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b);
+for (const v of vectors) {
+  let got: unknown;
+  if (v.type === "evaluate") got = R.evaluate(v.cond, v.ctx);
+  else if (v.type === "validate") got = R.validate(v.fields, v.rules, v.ctx).map((e) => [e.field, e.message, e.rule]);
+  else if (v.type === "field_state") { const s = R.fieldState(v.field, v.rules, v.ctx); got = { visible: s.visible, readonly: s.readonly, required: s.required }; }
+  else if (v.type === "lock") { const r = R.lock(v.rules, v.ctx); got = r ? r.id : null; if (r && v.message && R.fillTemplate(r.message ?? "", v.ctx.values) !== v.message) got = "bad message"; }
+  else if (v.type === "set_on_save") got = R.setOnSave(v.rules, v.ctx);
+  else if (v.type === "banners") got = R.banners(v.rules, v.ctx).map((b) => R.fillTemplate(b.message ?? "", v.ctx.values));
+  else if (v.type === "defaults") got = R.defaults(v.fields, v.rules, v.user, v.today);
+  else if (v.type === "fill") got = R.fillTemplate(v.text, v.values);
+  else if (v.type === "clear_hidden") got = R.clearHidden(v.fields, v.rules, v.ctx);
+  if (!eq(got, v.expected)) { failed++; console.error(`FAIL ${v.name}: expected ${JSON.stringify(v.expected)} got ${JSON.stringify(got)}`); }
+}
+console.log(`${vectors.length - failed}/${vectors.length} rule vectors pass (TypeScript engine)`);
+process.exit(failed ? 1 : 0);

sp2react/scaffold/templates/frontend/src/api.ts

@@ -0,0 +1,88 @@
+// Client for the generated FastAPI backend. The OData-style query options are the same ones the
+// legacy jQuery sent to /_api, so legacy queries carry over almost verbatim.
+import type { User, Values } from "./runtime/spec";
+
+export class ApiError extends Error {
+  constructor(public status: number, public body: any) {
+    super(body?.message ?? body?.detail ?? `HTTP ${status}`);
+  }
+}
+
+export interface QueryOptions {
+  filter?: string;
+  orderby?: string;
+  top?: number;
+  skip?: number;
+  select?: string;
+}
+
+const DEV_USER_KEY = "sp2react.devUser";
+
+export function devUser(): string | null {
+  try {
+    return localStorage.getItem(DEV_USER_KEY);
+  } catch {
+    return null;
+  }
+}
+
+export function setDevUser(login: string | null) {
+  try {
+    if (login) localStorage.setItem(DEV_USER_KEY, login);
+    else localStorage.removeItem(DEV_USER_KEY);
+  } catch {
+    /* storage unavailable */
+  }
+}
+
+async function request<T>(method: string, url: string, body?: unknown, headers: Record<string, string> = {}): Promise<T> {
+  const h: Record<string, string> = { Accept: "application/json", ...headers };
+  if (body !== undefined) h["Content-Type"] = "application/json";
+  const du = devUser();
+  if (du) h["X-User"] = du;
+  const r = await fetch(url, { method, headers: h, body: body === undefined ? undefined : JSON.stringify(body), credentials: "include" });
+  const text = await r.text();
+  const data = text ? JSON.parse(text) : null;
+  if (!r.ok) throw new ApiError(r.status, data);
+  return data as T;
+}
+
+const enc = encodeURIComponent;
+
+export const api = {
+  me: () => request<User>("GET", "/api/me"),
+  users: (search: string) => request<{ id: number; login: string; title: string; email?: string }[]>("GET", `/api/users?search=${enc(search)}`),
+  spec: (screenId: string) => request<any>("GET", `/api/specs/${enc(screenId)}`),
+
+  query: (list: string, o: QueryOptions = {}) => {
+    const qs = Object.entries(o)
+      .filter(([, v]) => v !== undefined && v !== null && v !== "")
+      .map(([k, v]) => `$${k}=${enc(String(v))}`)
+      .join("&");
+    return request<{ value: Values[]; count: number }>("GET", `/api/lists/${list}/items${qs ? "?" + qs : ""}`);
+  },
+  get: (list: string, id: number | string) => request<Values>("GET", `/api/lists/${list}/items/${id}`),
+  state: (list: string, id: number | string, mode = "edit") =>
+    request<{ locked: boolean; message: string | null; redirect: string | null; banners: string[] }>("GET", `/api/lists/${list}/items/${id}/state?mode=${mode}`),
+  create: (list: string, values: Values) => request<Values>("POST", `/api/lists/${list}/items`, { values }),
+  update: (list: string, id: number | string, values: Values, etag?: string) =>
+    request<Values>("PATCH", `/api/lists/${list}/items/${id}`, { values }, etag ? { "If-Match": etag } : {}),
+  remove: (list: string, id: number | string) => request<null>("DELETE", `/api/lists/${list}/items/${id}`),
+  lookup: (list: string, field: string, parent?: number | null, q = "") =>
+    request<{ id: number; title: string; [k: string]: any }[]>(
+      "GET",
+      `/api/lists/${list}/lookup/${field}?q=${enc(q)}${parent !== undefined && parent !== null ? `&parent=${parent}` : ""}`
+    ),
+  unique: (list: string, field: string, value: string, exclude = 0) =>
+    request<{ duplicate_id: number | null }>("GET", `/api/lists/${list}/unique/${field}?value=${enc(value)}&exclude=${exclude}`),
+  attachmentUrl: (list: string, id: number | string, name: string) => `/api/lists/${list}/items/${id}/attachments/${enc(name)}`,
+  uploadAttachment: async (list: string, id: number | string, file: File) => {
+    const buf = new Uint8Array(await file.arrayBuffer());
+    let bin = "";
+    for (let i = 0; i < buf.length; i += 0x8000) bin += String.fromCharCode(...buf.subarray(i, i + 0x8000));
+    return request("POST", `/api/lists/${list}/items/${id}/attachments`, { name: file.name, content_base64: btoa(bin) });
+  },
+  deleteAttachment: (list: string, id: number | string, name: string) => request("DELETE", `/api/lists/${list}/items/${id}/attachments/${enc(name)}`),
+};
+
+export type Api = typeof api;

sp2react/scaffold/templates/frontend/src/components/sp/Banner.tsx

@@ -0,0 +1,4 @@
+export function Banner({ text, tone = "error" }: { text: string; tone?: "error" | "info" }) {
+  if (!text) return null;
+  return <div className={tone === "error" ? "sp-banner sp-banner-error" : "sp-banner sp-banner-info"} role="status">{text}</div>;
+}

sp2react/scaffold/templates/frontend/src/components/sp/DataTable.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+export interface Column<T> {
+  key: string;
+  header: ReactNode;
+  render?: (row: T) => ReactNode;
+  className?: string;
+}
+
+export function DataTable<T extends Record<string, any>>({ columns, rows, empty, className = "db-table", id, loading }: {
+  columns: Column<T>[];
+  rows: T[] | null;
+  empty: ReactNode;
+  className?: string;
+  id?: string;
+  loading?: ReactNode;
+}) {
+  return (
+    <table className={className} id={id}>
+      <thead>
+        <tr>{columns.map((c) => <th key={c.key} className={c.className}>{c.header}</th>)}</tr>
+      </thead>
+      <tbody>
+        {rows === null ? (
+          <tr><td colSpan={columns.length}>{loading ?? "Loading..."}</td></tr>
+        ) : rows.length === 0 ? (
+          <tr><td colSpan={columns.length}>{empty}</td></tr>
+        ) : (
+          rows.map((r, i) => (
+            <tr key={(r.ID as number) ?? i}>
+              {columns.map((c) => <td key={c.key} className={c.className}>{c.render ? c.render(r) : String(r[c.key] ?? "")}</td>)}
+            </tr>
+          ))
+        )}
+      </tbody>
+    </table>
+  );
+}

sp2react/scaffold/templates/frontend/src/components/sp/Form.tsx

@@ -0,0 +1,252 @@
+// Generic SharePoint list form (NewForm / EditForm / DispForm) driven by the screen spec.
+// All behaviour that used to live in jQuery comes from spec rules evaluated by runtime/rules.ts;
+// the API enforces the same rules again on save.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { api, ApiError } from "../../api";
+import { HANDLERS } from "../../custom";
+import { formatValue } from "../../runtime/format";
+import * as R from "../../runtime/rules";
+import { rulesForList, type Field, type Mode, type Spec, type Values } from "../../runtime/spec";
+import { useUser } from "../../runtime/user";
+import { Banner } from "./Banner";
+import { FieldControl, type Option } from "./fields";
+import { LegacyHtml } from "./LegacyHtml";
+
+interface Props {
+  spec: Spec;
+  mode: Mode;
+  id?: string;
+}
+
+export function ListForm({ spec, mode, id }: Props) {
+  const list = spec.screen.list as string;
+  const lst = spec.lists[list];
+  const fields: Field[] = lst.fields;
+  const rules = useMemo(() => rulesForList(spec, list), [spec, list]);
+  const { user } = useUser();
+  const nav = useNavigate();
+  const [params] = useSearchParams();
+  const source = params.get("Source");
+  const [values, setValues] = useState<Values>({});
+  const [original, setOriginal] = useState<Values>({});
+  const [options, setOptions] = useState<Record<string, Option[]>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [files, setFiles] = useState<File[]>([]);
+  const etag = useRef<string | undefined>(undefined);
+  const route = spec.screen.route;
+
+  const ctx: R.Ctx = { mode, values, original, user };
+  const states = useMemo(() => Object.fromEntries(fields.map((f) => [f.name, R.fieldState(f, rules, ctx)])), [fields, rules, values, original, user, mode]);
+  const banners = useMemo(() => R.banners(rules, ctx), [rules, values, original, user, mode]);
+
+  const goBack = useCallback(() => {
+    if (source && source.startsWith("/")) nav(source);
+    else nav(route);
+  }, [nav, source, route]);
+
+  const loadOptions = useCallback(async (field: Field, current: Values) => {
+    const cascade = rules.find((r) => r.kind === "cascade" && r.field === field.name);
+    const parentVal = cascade ? current[cascade.params!.parent] : undefined;
+    const parentId = parentVal && typeof parentVal === "object" ? parentVal.id : parentVal;
+    if (cascade && !parentId) return [];
+    return api.lookup(list, field.name, cascade ? parentId : undefined);
+  }, [rules, list]);
+
+  // ------------------------------------------------------------------ load
+  useEffect(() => {
+    if (!user) return;
+    let cancelled = false;
+    (async () => {
+      let v: Values;
+      if (mode === "new") {
+        v = R.defaults(fields, rules, user);
+      } else {
+        const item = await api.get(list, id as string);
+        etag.current = item._etag;
+        setOriginal(item);
+        v = item;
+        if (mode === "edit") {
+          const locked = R.lock(rules, { mode, values: item, original: item, user });
+          if (locked) {
+            window.alert(R.fillTemplate(locked.message ?? "", item));
+            const to = (locked.params?.redirect ?? "display") === "display" ? `${route}/display/${id}` : route;
+            nav(`${to}${source ? `?Source=${encodeURIComponent(source)}` : ""}`, { replace: true });
+            return;
+          }
+        }
+      }
+      for (const h of Object.values(HANDLERS)) h.onLoad?.({ mode, values: v, original: mode === "new" ? {} : v, user }, api);
+      if (cancelled) return;
+      setValues(v);
+      if (mode !== "display") {
+        const opts: Record<string, Option[]> = {};
+        for (const f of fields.filter((x) => x.type === "lookup")) opts[f.name] = await loadOptions(f, v);
+        if (!cancelled) setOptions(opts);
+      }
+      setLoaded(true);
+    })().catch((e) => window.alert(e.message));
+    return () => { cancelled = true; };
+  }, [user, mode, id]);
+
+  // --------------------------------------------------------------- change
+  const change = async (field: Field, v: any) => {
+    let next = { ...values, [field.name]: v };
+    setErrors((e) => ({ ...e, [field.name]: "" }));
+    // cascades: children of this field get new options and lose a value that no longer fits
+    for (const r of rules.filter((x) => x.kind === "cascade" && x.params?.parent === field.name)) {
+      const child = fields.find((f) => f.name === r.field)!;
+      const opts = await loadOptions(child, next);
+      setOptions((o) => ({ ...o, [child.name]: opts }));
+      const cur = next[child.name];
+      if (cur && !opts.some((o) => o.id === (typeof cur === "object" ? cur.id : cur))) next = { ...next, [child.name]: null };
+    }
+    // derived values: copy a column from the selected lookup item
+    for (const r of R.rulesFor(rules, "derive", null, mode).filter((x) => x.params?.from_field === field.name)) {
+      const opt = (options[field.name] ?? []).find((o) => o.id === (v && typeof v === "object" ? v.id : v));
+      next = { ...next, [r.field as string]: opt ? opt[r.params!.column] ?? null : null };
+    }
+    next = { ...next, ...R.clearHidden(fields, rules, { mode, values: next, original, user }) };
+    for (const h of Object.values(HANDLERS)) {
+      const patch = h.onChange?.(field.name, { mode, values: next, original, user });
+      if (patch) next = { ...next, ...patch };
+    }
+    setValues(next);
+  };
+
+  const blur = async (field: Field) => {
+    const r = R.rulesFor(rules, "unique", field.name, mode)[0];
+    const v = values[field.name];
+    if (!r || R.isEmpty(v)) return;
+    const res = await api.unique(list, field.name, String(v), mode === "edit" ? Number(id) : 0);
+    setErrors((e) => ({ ...e, [field.name]: res.duplicate_id ? R.fillTemplate(r.message ?? "", { ...values, duplicate_id: res.duplicate_id, id: res.duplicate_id }) : "" }));
+  };
+
+  // ----------------------------------------------------------------- save
+  const showErrors = (list_: R.RuleError[]) => {
+    const alertErr = list_.find((e) => e.presentation === "alert");
+    if (alertErr) { window.alert(alertErr.message); return; }
+    const inline: Record<string, string> = {};
+    for (const e of list_) if (e.field) inline[e.field] = inline[e.field] || e.message;
+    setErrors(inline);
+    const firstMsg = list_.find((e) => !e.field);
+    if (firstMsg) window.alert(firstMsg.message);
+  };
+
+  const save = async () => {
+    const pending = Object.entries(errors).find(([, m]) => m);
+    const errs = R.validate(fields, rules, ctx);
+    for (const h of Object.values(HANDLERS)) errs.push(...(h.validate?.(ctx) ?? []));
+    if (pending) {
+      const r = R.rulesFor(rules, "unique", pending[0], mode)[0];
+      if (r) errs.unshift({ field: pending[0], message: pending[1], presentation: r.presentation ?? "inline", rule: r.id });
+    }
+    if (errs.length) return showErrors(errs);
+    for (const c of R.rulesFor(rules, "confirm", null, mode).filter((x) => (x.params?.action ?? "save") === "save" && R.evaluate(x.when, ctx)))
+      if (!window.confirm(R.fillTemplate(c.message ?? "", values))) return;
+    const payload: Values = { ...values, ...R.setOnSave(rules, ctx) };
+    for (const k of ["ID", "Created", "Modified", "Author", "Editor", "_etag", "_version", "Attachments"]) delete payload[k];
+    setBusy(true);
+    try {
+      const saved = mode === "new" ? await api.create(list, payload) : await api.update(list, id as string, payload, etag.current);
+      for (const f of files) await api.uploadAttachment(list, saved.ID, f);
+      goBack();
+    } catch (e) {
+      if (e instanceof ApiError && e.status === 422) showErrors(e.body.errors);
+      else if (e instanceof ApiError && e.status === 423) { window.alert(e.body.message); nav(`${route}/display/${id}`); }
+      else window.alert((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // --------------------------------------------------------------- render
+  const around = (where: "before" | "after") =>
+    spec.screen.components
+      .filter((c) => c.kind !== "form" && (c.region ?? "before") === where && (!c.props?.modes || c.props.modes.includes(mode)))
+      .filter((c) => !c.roles?.length || c.roles.some((g) => user?.groups.includes(g)))
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((c) => c.kind === "banner"
+        ? <Banner key={c.id} text={c.props?.text ?? ""} tone={c.props?.tone ?? "info"} />
+        : c.kind === "html" ? <LegacyHtml key={c.id} html={c.props?.legacy_html ?? ""} /> : null);
+
+  const toolbar = mode === "display" ? (
+    <div className="sp-toolbar">
+      <button type="button" className="ms-ButtonHeightWidth" onClick={() => nav(`${route}/edit/${id}${source ? `?Source=${encodeURIComponent(source)}` : ""}`)}>Edit Item</button>
+      <button type="button" className="ms-ButtonHeightWidth" onClick={goBack}>Close</button>
+    </div>
+  ) : (
+    <div className="sp-toolbar">
+      <button type="button" className="ms-ButtonHeightWidth" disabled={busy || !loaded} onClick={save}>Save</button>
+      <button type="button" className="ms-ButtonHeightWidth" disabled={busy} onClick={goBack}>Cancel</button>
+    </div>
+  );
+
+  if (!loaded) return <div className="sp-loading">Loading...</div>;
+  return (
+    <div className="sp-listform">
+      {around("before")}
+      {banners.map((b) => <Banner key={b.id} text={R.fillTemplate(b.message ?? "", values)} />)}
+      <table className="ms-formtable" role="presentation">
+        <tbody>
+          {fields.map((f) => {
+            const st = states[f.name];
+            if (!st.visible) return null;
+            return (
+              <tr key={f.name} id={`row-${f.name}`}>
+                <td className="ms-formlabel">
+                  <h3 className="ms-standardheader">
+                    <span className="nobr">{f.label}{st.required && mode !== "display" && <span className="ms-accentText" title="This is a required field."> *</span>}</span>
+                  </h3>
+                </td>
+                <td className="ms-formbody">
+                  {mode === "display" ? (
+                    <span className="sp-value">{formatValue(f, values[f.name])}</span>
+                  ) : (
+                    <FieldControl field={f} value={values[f.name]} options={options[f.name]} disabled={st.readonly} required={st.required}
+                                  onChange={(v) => change(f, v)} onBlur={() => blur(f)} />
+                  )}
+                  {f.description && mode !== "display" && <div className="ms-metadata">{f.description}</div>}
+                  {errors[f.name] && <span className="ms-formvalidation" role="alert"><br />{errors[f.name]}</span>}
+                </td>
+              </tr>
+            );
+          })}
+          {lst.attachments && (
+            <tr id="row-Attachments">
+              <td className="ms-formlabel"><h3 className="ms-standardheader"><span className="nobr">Attachments</span></h3></td>
+              <td className="ms-formbody">
+                {(original.Attachments ?? []).map((n: string) => (
+                  <div key={n}>
+                    <a href={api.attachmentUrl(list, id as string, n)}>{n}</a>
+                    {mode === "edit" && <button type="button" className="sp-link" onClick={async () => {
+                      await api.deleteAttachment(list, id as string, n);
+                      setOriginal((o) => ({ ...o, Attachments: (o.Attachments ?? []).filter((x: string) => x !== n) }));
+                    }}>Delete</button>}
+                  </div>
+                ))}
+                {mode !== "display" && (
+                  <>
+                    {files.map((f) => <div key={f.name}>{f.name}</div>)}
+                    <input type="file" aria-label="Attach file" onChange={(e) => e.target.files && setFiles((x) => [...x, ...Array.from(e.target.files!)])} />
+                  </>
+                )}
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      {mode !== "new" && original.ID && (
+        <div className="sp-itemmeta">
+          Created at {formatValue({ name: "Created", label: "Created", type: "datetime" }, original.Created)} by {original.Author?.title ?? ""}
+          <br />
+          Last modified at {formatValue({ name: "Modified", label: "Modified", type: "datetime" }, original.Modified)} by {original.Editor?.title ?? ""}
+        </div>
+      )}
+      {toolbar}
+      {around("after")}
+    </div>
+  );
+}

sp2react/scaffold/templates/frontend/src/components/sp/GenericPage.tsx

@@ -0,0 +1,28 @@
+// Fallback renderer for a page screen before (or without) an agent-written Page.tsx:
+// shows the authored HTML fragments, list views and banners from the spec in region order.
+import { Layout } from "./Layout";
+import { LegacyHtml } from "./LegacyHtml";
+import { ListView, parseViewXml } from "./ListView";
+import { Banner } from "./Banner";
+import type { Spec } from "../../runtime/spec";
+
+export function GenericPage({ spec }: { spec: Spec }) {
+  const comps = [...spec.screen.components].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  return (
+    <Layout title={spec.screen.title}>
+      {comps.map((c) => {
+        if (c.kind === "html") return <LegacyHtml key={c.id} html={c.props?.legacy_html ?? ""} />;
+        if (c.kind === "banner") return <Banner key={c.id} text={c.props?.text ?? ""} tone={c.props?.tone ?? "info"} />;
+        if (c.kind === "list_view") {
+          const list = c.props?.list as string;
+          const lst = spec.lists[list];
+          if (!lst) return null;
+          const v = parseViewXml(c.props?.view_xml);
+          return <ListView key={c.id} list={list} fields={lst.fields} title={c.title} showNew={false}
+                           view={{ fields: v.fields ?? lst.fields.slice(0, 4).map((f) => f.name), orderby: v.orderby, top: v.top }} />;
+        }
+        return null;
+      })}
+    </Layout>
+  );
+}

sp2react/scaffold/templates/frontend/src/components/sp/Layout.tsx

@@ -0,0 +1,54 @@
+// SharePoint 2013/2016 chrome: suite bar, site title, quick launch, page title area.
+import { useEffect, useState, type ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { api, devUser, setDevUser } from "../../api";
+import { useUser } from "../../runtime/user";
+import { site } from "../../site";
+
+function DevUserSwitch() {
+  const { user, reload } = useUser();
+  const [users, setUsers] = useState<{ login: string; title: string }[]>([]);
+  useEffect(() => { api.users("").then(setUsers).catch(() => setUsers([])); }, []);
+  if (!import.meta.env.DEV) return null;
+  return (
+    <label className="sp-devuser" title="Development only: act as another seeded user to test roles">
+      Acting as{" "}
+      <select value={devUser() ?? user?.login ?? ""} onChange={(e) => { setDevUser(e.target.value); reload(); window.location.reload(); }}>
+        {users.map((u) => <option key={u.login} value={u.login}>{u.title}</option>)}
+      </select>
+    </label>
+  );
+}
+
+export function Layout({ title, children }: { title: string; children: ReactNode }) {
+  const { user, error } = useUser();
+  const loc = useLocation();
+  useEffect(() => { document.title = `${title} - ${site.title}`; }, [title]);
+  return (
+    <div className="sp-page">
+      <div className="sp-suitebar">
+        <span className="sp-brand">SharePoint</span>
+        <span className="sp-suite-right">
+          <DevUserSwitch />
+          <span className="sp-username">{user?.title ?? (error ? "Not signed in" : "")}</span>
+        </span>
+      </div>
+      <div className="sp-titlerow">
+        <div className="sp-sitetitle"><Link to="/">{site.title}</Link></div>
+        <h1 className="sp-pagetitle" id="pageTitle">{title}</h1>
+      </div>
+      <div className="sp-body">
+        <nav className="sp-quicklaunch" aria-label="Quick launch">
+          <ul>
+            {site.quickLaunch.map((q) => (
+              <li key={q.title} className={loc.pathname === q.href ? "selected" : ""}>
+                {q.external ? <a href={q.href}>{q.title}</a> : <Link to={q.href}>{q.title}</Link>}
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <main className="sp-content">{error ? <div className="ms-formvalidation">{error}</div> : children}</main>
+      </div>
+    </div>
+  );
+}

sp2react/scaffold/templates/frontend/src/components/sp/LegacyHtml.tsx

@@ -0,0 +1,9 @@
+// Static markup authored in Script Editor / Content Editor web parts (help text, instructions).
+// Scripts were removed during analysis; event handlers and javascript: URLs are stripped here too.
+export function LegacyHtml({ html, className }: { html: string; className?: string }) {
+  const safe = html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+    .replace(/(href|src)\s*=\s*(["'])\s*javascript:[^"']*\2/gi, "");
+  return <div className={className} dangerouslySetInnerHTML={{ __html: safe }} />;
+}

sp2react/scaffold/templates/frontend/src/components/sp/ListView.tsx

@@ -0,0 +1,59 @@
+// A list view (AllItems.aspx / list view web part): same columns, order and row limit as the legacy view.
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api } from "../../api";
+import { formatValue } from "../../runtime/format";
+import type { Field } from "../../runtime/spec";
+
+export interface ViewDef {
+  fields: string[];
+  orderby?: string;
+  top?: number;
+}
+
+export function parseViewXml(xml?: string | null): Partial<ViewDef> {
+  if (!xml) return {};
+  const fields = Array.from(xml.matchAll(/<ViewFields>([\s\S]*?)<\/ViewFields>/g)).flatMap((m) =>
+    Array.from(m[1].matchAll(/FieldRef\s+Name="([^"]+)"/g)).map((x) => x[1].replace(/^LinkTitle(NoMenu)?$/, "Title")));
+  const ob = xml.match(/<OrderBy>([\s\S]*?)<\/OrderBy>/);
+  const orderby = ob ? Array.from(ob[1].matchAll(/FieldRef\s+Name="([^"]+)"(?:\s+Ascending="(\w+)")?/g))
+    .map((x) => `${x[1]}${x[2] && x[2].toUpperCase() === "FALSE" ? " desc" : ""}`).join(",") : undefined;
+  const rl = xml.match(/<RowLimit[^>]*>(\d+)<\/RowLimit>/);
+  return { fields: fields.length ? fields : undefined, orderby, top: rl ? Number(rl[1]) : undefined };
+}
+
+export function ListView({ list, fields, view, route, showNew = true, title }: {
+  list: string; fields: Field[]; view: ViewDef; route?: string; showNew?: boolean; title?: string | null;
+}) {
+  const [rows, setRows] = useState<any[] | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  useEffect(() => {
+    api.query(list, { orderby: view.orderby, top: view.top ?? 30 }).then((r) => setRows(r.value)).catch((e) => setErr(e.message));
+  }, [list, view.orderby, view.top]);
+  const byName = Object.fromEntries(fields.map((f) => [f.name, f]));
+  const sysLabel: Record<string, string> = { Created: "Created", Modified: "Modified", Author: "Created By", Editor: "Modified By", ID: "ID" };
+  return (
+    <div className="sp-listview">
+      {title && <h2 className="ms-webpart-titleText">{title}</h2>}
+      {showNew && route && <div className="sp-newitem"><Link to={`${route}/new`}>+ new item</Link></div>}
+      {err && <div className="ms-formvalidation">{err}</div>}
+      <table className="ms-listviewtable">
+        <thead><tr>{view.fields.map((n) => <th key={n}>{byName[n]?.label ?? sysLabel[n] ?? n}</th>)}</tr></thead>
+        <tbody>
+          {rows === null ? <tr><td colSpan={view.fields.length}>Loading...</td></tr> :
+            rows.length === 0 ? <tr><td colSpan={view.fields.length}>There are no items to show in this view.</td></tr> :
+              rows.map((r) => (
+                <tr key={r.ID}>
+                  {view.fields.map((n) => (
+                    <td key={n}>
+                      {n === "Title" && route ? <Link to={`${route}/display/${r.ID}`}>{r.Title}</Link> :
+                        formatValue(byName[n] ?? (n === "Created" || n === "Modified" ? { name: n, label: n, type: "datetime" } : undefined), r[n])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}