claude-artifact-framework 0.2.0 → 0.3.0

package/dist/index.esm.js

@@ -100,10 +100,785 @@ function createSharedStore(key, initialState, { pollMs = 2e3, debounceMs = 300 }
   const timer = setInterval(poll, pollMs);
   return { ...store, ready, stop: () => clearInterval(timer) };
 }
+
+// src/react-runtime.js
+var React = typeof globalThis !== "undefined" ? globalThis.React : void 0;
+function useReact(instance) {
+  React = instance;
+  return instance;
+}
+function hasReact() {
+  return Boolean(React);
+}
+function getReact() {
+  return required();
+}
+function required() {
+  if (!React) {
+    throw new Error(
+      'claude-artifact-framework: React not found. Hand it over once, before createApp:\n\n  import React from "react";\n  ArtifactKit.useReact(React);\n'
+    );
+  }
+  return React;
+}
+var createElement = (...args) => required().createElement(...args);
+var useState = (...args) => required().useState(...args);
+var useEffect = (...args) => required().useEffect(...args);
+var Component = React && React.Component || class ReactMissing {
+  render() {
+    return required();
+  }
+};
+
+// src/appState.js
+var DATA_KEY = "caf:data";
+var VIEW_KEY = "caf:view";
+var EMPTY_VIEW = { screen: null, arg: null, stack: [], step: 0, selected: null };
+function isPlainObject(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+function mergeDefaults(defaults, stored) {
+  if (!isPlainObject(defaults) || !isPlainObject(stored)) {
+    return stored === void 0 ? defaults : stored;
+  }
+  const out = { ...defaults };
+  for (const key of Object.keys(stored)) {
+    out[key] = isPlainObject(defaults[key]) ? mergeDefaults(defaults[key], stored[key]) : stored[key];
+  }
+  return out;
+}
+function debounce2(fn, ms) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+function createAppState(defaults, { debounceMs = 400 } = {}) {
+  let data = structuredCloneish(defaults);
+  let view = { ...EMPTY_VIEW };
+  let hydrated = false;
+  const listeners = /* @__PURE__ */ new Set();
+  let queued = false;
+  function notify() {
+    if (queued) return;
+    queued = true;
+    Promise.resolve().then(() => {
+      queued = false;
+      for (const fn of listeners) fn();
+    });
+  }
+  const persistData = debounce2(() => storage.set(DATA_KEY, data), debounceMs);
+  const persistView = debounce2(() => storage.set(VIEW_KEY, view), debounceMs);
+  const ready = (async () => {
+    const [storedData, storedView] = await Promise.all([
+      storage.get(DATA_KEY, void 0),
+      storage.get(VIEW_KEY, void 0)
+    ]);
+    if (storedData !== void 0) data = mergeDefaults(defaults, storedData);
+    if (storedView !== void 0) view = { ...EMPTY_VIEW, ...storedView };
+    hydrated = true;
+    notify();
+  })();
+  function update(fn) {
+    const result = fn(data);
+    if (result !== void 0) data = result;
+    data = { ...data };
+    persistData();
+    notify();
+  }
+  function setView(patch) {
+    view = { ...view, ...patch };
+    persistView();
+    notify();
+  }
+  return {
+    ready,
+    isHydrated: () => hydrated,
+    getData: () => data,
+    getView: () => view,
+    update,
+    setView,
+    go(screen, arg) {
+      setView({ stack: [...view.stack, { screen: view.screen, arg: view.arg }], screen, arg });
+    },
+    back() {
+      const stack = view.stack.slice();
+      const previous = stack.pop() || { screen: null, arg: null };
+      setView({ stack, screen: previous.screen, arg: previous.arg });
+    },
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    }
+  };
+}
+function structuredCloneish(value) {
+  if (Array.isArray(value)) return value.map(structuredCloneish);
+  if (isPlainObject(value)) {
+    const out = {};
+    for (const k of Object.keys(value)) out[k] = structuredCloneish(value[k]);
+    return out;
+  }
+  return value;
+}
+
+// src/theme.js
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
+function hexToRgb(hex) {
+  let h = String(hex).replace("#", "").trim();
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  const n = parseInt(h, 16);
+  if (!Number.isFinite(n)) return [59, 110, 246];
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function rgbToHex(rgb) {
+  return "#" + rgb.map((v) => clamp(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("");
+}
+function rgbToHsl([r, g, b]) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  if (d) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h /= 6;
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToRgb(h, s, l) {
+  h = (h % 360 + 360) % 360 / 360;
+  s = clamp(s, 0, 100) / 100;
+  l = clamp(l, 0, 100) / 100;
+  if (!s) return [l * 255, l * 255, l * 255];
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const channel = (t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  return [channel(h + 1 / 3) * 255, channel(h) * 255, channel(h - 1 / 3) * 255];
+}
+function hsl(h, s, l) {
+  return rgbToHex(hslToRgb(h, s, l));
+}
+function luminance(rgb) {
+  const a = rgb.map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+}
+function contrast(a, b) {
+  const la = luminance(hexToRgb(a));
+  const lb = luminance(hexToRgb(b));
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function accentAt(h, s, against, min, from, step) {
+  for (let l = from; l >= 4 && l <= 96; l += step) {
+    const candidate = hsl(h, s, l);
+    if (contrast(candidate, against) >= min) return candidate;
+  }
+  return hsl(h, s, step < 0 ? 24 : 82);
+}
+function palette(seed = "#3b6ef6") {
+  const [h, rawSat] = rgbToHsl(hexToRgb(seed));
+  const sat = clamp(rawSat, 30, 88);
+  const tint = clamp(sat * 0.1, 3, 9);
+  const lightSurface = hsl(h, tint * 0.4, 100);
+  const darkSurface = hsl(h, tint * 1.4, 13);
+  return {
+    light: {
+      bg: hsl(h, tint, 96.5),
+      surface: lightSurface,
+      sunken: hsl(h, tint, 93),
+      border: hsl(h, tint, 86),
+      text: hsl(h, tint * 1.6, 11),
+      muted: hsl(h, tint * 1.2, 41),
+      accent: accentAt(h, sat, "#ffffff", 4.5, 54, -2),
+      accentText: "#ffffff",
+      danger: accentAt(2, 68, "#ffffff", 4.5, 54, -2),
+      ok: accentAt(148, 62, "#ffffff", 4.5, 44, -2),
+      warn: accentAt(38, 88, "#ffffff", 4.5, 44, -2)
+    },
+    dark: {
+      bg: hsl(h, tint * 1.5, 9),
+      surface: darkSurface,
+      sunken: hsl(h, tint * 1.5, 7),
+      border: hsl(h, tint * 1.3, 24),
+      text: hsl(h, tint * 0.6, 95),
+      muted: hsl(h, tint * 0.8, 66),
+      accent: accentAt(h, clamp(sat, 40, 80), darkSurface, 4.5, 62, 2),
+      accentText: hsl(h, tint * 2, 8),
+      danger: accentAt(2, 70, darkSurface, 4.5, 62, 2),
+      ok: accentAt(148, 55, darkSurface, 4.5, 62, 2),
+      warn: accentAt(38, 80, darkSurface, 4.5, 62, 2)
+    }
+  };
+}
+function vars(scheme) {
+  return Object.entries(scheme).map(([k, v]) => `--caf-${k}: ${v};`).join("");
+}
+function themeCss(seed) {
+  const p = palette(seed);
+  return `
+:root { ${vars(p.light)} }
+@media (prefers-color-scheme: dark) { :root { ${vars(p.dark)} } }
+:root[data-theme="dark"] { ${vars(p.dark)} }
+:root[data-theme="light"] { ${vars(p.light)} }
+`;
+}
+
+// src/blocks.js
+function formatValue(value, format) {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  const n = Number(value);
+  switch (format) {
+    case "money":
+      return Number.isFinite(n) ? n.toLocaleString(void 0, { style: "currency", currency: "USD", maximumFractionDigits: 2 }) : String(value);
+    case "percent":
+      return Number.isFinite(n) ? `${n.toLocaleString(void 0, { maximumFractionDigits: 2 })}%` : String(value);
+    case "number":
+      return Number.isFinite(n) ? n.toLocaleString(void 0, { maximumFractionDigits: 2 }) : String(value);
+    case "date":
+      return value instanceof Date ? value.toLocaleDateString() : String(value);
+    default:
+      return String(value);
+  }
+}
+function validateField(field, value) {
+  if (field.required && (value === "" || value === null || value === void 0)) {
+    return "Required";
+  }
+  if (value === "" || value === null || value === void 0) return null;
+  if (field.type === "number" || field.type === "money" || field.type === "percent") {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return "Must be a number";
+    if (field.min !== void 0 && n < field.min) return `Must be at least ${field.min}`;
+    if (field.max !== void 0 && n > field.max) return `Must be at most ${field.max}`;
+  }
+  return null;
+}
+function Field({ field, value, onChange }) {
+  const error = validateField(field, value);
+  const id = `caf-f-${field.key}`;
+  const numeric = field.type === "number" || field.type === "money" || field.type === "percent";
+  if (field.type === "check") {
+    return createElement(
+      "label",
+      { className: "caf-check" },
+      createElement("input", {
+        id,
+        type: "checkbox",
+        checked: Boolean(value),
+        onChange: (e) => onChange(e.target.checked)
+      }),
+      createElement("span", null, field.label || field.key)
+    );
+  }
+  const common = {
+    id,
+    value: value === null || value === void 0 ? "" : value,
+    "aria-invalid": error ? "true" : void 0,
+    onChange: (e) => onChange(numeric ? toNumber(e.target.value) : e.target.value)
+  };
+  let control;
+  if (field.type === "textarea") {
+    control = createElement("textarea", { ...common, rows: field.rows || 3 });
+  } else if (field.type === "select") {
+    control = createElement(
+      "select",
+      common,
+      createElement("option", { value: "" }, field.placeholder || "Select\u2026"),
+      (field.options || []).map((opt) => {
+        const val = typeof opt === "string" ? opt : opt.value;
+        const label = typeof opt === "string" ? opt : opt.label;
+        return createElement("option", { key: val, value: val }, label);
+      })
+    );
+  } else {
+    control = createElement("input", {
+      ...common,
+      type: field.type === "date" ? "date" : numeric ? "number" : "text",
+      min: field.min,
+      max: field.max,
+      step: field.step || (field.type === "money" || field.type === "percent" ? "any" : void 0),
+      placeholder: field.placeholder
+    });
+  }
+  return createElement(
+    "div",
+    { className: "caf-field" },
+    createElement("label", { htmlFor: id }, field.label || field.key),
+    control,
+    field.hint && !error ? createElement("small", { className: "caf-hint" }, field.hint) : null,
+    error ? createElement("small", { className: "caf-error" }, error) : null
+  );
+}
+function toNumber(raw) {
+  if (raw === "") return "";
+  const n = Number(raw);
+  return Number.isFinite(n) ? n : raw;
+}
+function FieldsBlock({ spec, ctx }) {
+  const fields = spec.fields || [];
+  return createElement(
+    "div",
+    { className: "caf-block caf-fields" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    fields.map(
+      (field) => createElement(Field, {
+        key: field.key,
+        field,
+        value: ctx.data[field.key],
+        onChange: (v) => ctx.update((d) => {
+          d[field.key] = v;
+        })
+      })
+    )
+  );
+}
+function OutputBlock({ spec, ctx }) {
+  const items = typeof spec.output === "function" ? spec.output(ctx.data) : spec.output || [];
+  if (!items.length) {
+    return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing to show yet.");
+  }
+  return createElement(
+    "div",
+    { className: "caf-block caf-output" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    createElement(
+      "div",
+      { className: "caf-output-grid" },
+      items.map(
+        (item, i) => createElement(
+          "div",
+          { key: item.label || i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
+          createElement("span", { className: "caf-stat-label" }, item.label),
+          createElement("span", { className: "caf-stat-value" }, formatValue(item.value, item.format)),
+          item.hint ? createElement("small", { className: "caf-hint" }, item.hint) : null
+        )
+      )
+    )
+  );
+}
+function TextBlock({ spec }) {
+  const body = typeof spec.text === "function" ? spec.text() : spec.text;
+  return createElement(
+    "div",
+    { className: "caf-block caf-text" },
+    spec.title ? createElement("h2", { className: "caf-block-title" }, spec.title) : null,
+    createElement("p", null, body)
+  );
+}
+function ListBlock({ spec, ctx }) {
+  const rows = (typeof spec.list === "function" ? spec.list(ctx.data) : spec.list) || [];
+  if (!rows.length) {
+    return createElement("div", { className: "caf-block caf-empty" }, spec.empty || "Nothing here yet.");
+  }
+  const title = spec.title || ((r) => r.title ?? r.name ?? r.label ?? String(r));
+  return createElement(
+    "div",
+    { className: "caf-block caf-list" },
+    rows.map(
+      (row, i) => createElement(
+        "button",
+        {
+          key: row.id ?? i,
+          className: "caf-row",
+          type: "button",
+          onClick: spec.onSelect ? () => spec.onSelect(row, ctx) : void 0
+        },
+        createElement("span", { className: "caf-row-title" }, title(row)),
+        spec.subtitle ? createElement("span", { className: "caf-row-sub" }, spec.subtitle(row)) : null
+      )
+    )
+  );
+}
+function CustomBlock({ spec, ctx }) {
+  const rendered = spec.custom(ctx);
+  if (typeof rendered === "string") {
+    return createElement("div", { className: "caf-block", dangerouslySetInnerHTML: { __html: rendered } });
+  }
+  return createElement("div", { className: "caf-block" }, rendered);
+}
+var BLOCKS = {
+  fields: FieldsBlock,
+  output: OutputBlock,
+  text: TextBlock,
+  list: ListBlock,
+  custom: CustomBlock
+};
+var BLOCK_NAMES = Object.keys(BLOCKS);
+
+// src/records.js
+function recordDefaults(fields) {
+  const rec = {};
+  for (const f of fields) {
+    rec[f.key] = f.value !== void 0 ? f.value : f.type === "check" ? false : "";
+  }
+  return rec;
+}
+function makeId() {
+  return "r" + Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+}
+function rowTitle(spec, rec) {
+  if (spec.title) return spec.title(rec);
+  const f = spec.fields.find((f2) => !f2.type || f2.type === "text" || f2.type === "textarea" || f2.type === "select");
+  const v = f && rec[f.key];
+  return v === "" || v === void 0 || v === null ? "(untitled)" : String(v);
+}
+function Summary({ spec, records }) {
+  if (!spec.summary) return null;
+  const items = spec.summary(records) || [];
+  if (!items.length) return null;
+  return createElement(
+    "div",
+    { className: "caf-block caf-output" },
+    createElement(
+      "div",
+      { className: "caf-output-grid" },
+      items.map(
+        (item, i) => createElement(
+          "div",
+          { key: item.label || i, className: item.big ? "caf-stat caf-stat-big" : "caf-stat" },
+          createElement("span", { className: "caf-stat-label" }, item.label),
+          createElement("span", { className: "caf-stat-value" }, formatValue(item.value, item.format))
+        )
+      )
+    )
+  );
+}
+function ListScreen({ spec, ctx }) {
+  const label = spec.label || "item";
+  let records = ctx.data.records;
+  if (spec.sort) records = records.slice().sort(spec.sort);
+  function add() {
+    const rec = { id: makeId(), ...recordDefaults(spec.fields) };
+    ctx.update((d) => {
+      d.records = [...d.records, rec];
+    });
+    ctx.go("record", rec.id);
+  }
+  return createElement(
+    "div",
+    { className: "caf-block caf-list" },
+    createElement(
+      "div",
+      { className: "caf-toolbar" },
+      createElement("span", { className: "caf-count" }, `${records.length} ${label}${records.length === 1 ? "" : "s"}`),
+      createElement("button", { type: "button", className: "caf-btn caf-btn-primary", onClick: add }, `Add ${label}`)
+    ),
+    records.length === 0 ? createElement("div", { className: "caf-empty" }, spec.empty || `No ${label}s yet. Add the first one.`) : records.map(
+      (rec) => createElement(
+        "button",
+        {
+          key: rec.id,
+          type: "button",
+          className: "caf-row",
+          onClick: () => ctx.go("record", rec.id)
+        },
+        createElement("span", { className: "caf-row-title" }, rowTitle(spec, rec)),
+        spec.subtitle ? createElement("span", { className: "caf-row-sub" }, spec.subtitle(rec)) : null
+      )
+    )
+  );
+}
+function DetailScreen({ spec, ctx, record }) {
+  const label = spec.label || "item";
+  function remove() {
+    ctx.update((d) => {
+      d.records = d.records.filter((r) => r.id !== record.id);
+    });
+    ctx.back();
+  }
+  return createElement(
+    "div",
+    { className: "caf-block caf-fields" },
+    createElement(
+      "div",
+      { className: "caf-toolbar" },
+      createElement("button", { type: "button", className: "caf-btn", onClick: ctx.back }, "\u2039 Back"),
+      createElement("button", { type: "button", className: "caf-btn caf-btn-danger", onClick: remove }, `Delete ${label}`)
+    ),
+    spec.fields.map(
+      (field) => createElement(Field, {
+        key: field.key,
+        field,
+        value: record[field.key],
+        onChange: (v) => ctx.update((d) => {
+          const rec = d.records.find((r) => r.id === record.id);
+          if (rec) rec[field.key] = v;
+        })
+      })
+    )
+  );
+}
+function RecordsLayout({ spec, ctx }) {
+  const rspec = spec.records;
+  if (ctx.view.screen === "record") {
+    const record = ctx.data.records.find((r) => r.id === ctx.view.arg);
+    if (record) {
+      return createElement("div", { className: "caf-panel caf-panel-single" }, createElement(DetailScreen, { spec: rspec, ctx, record }));
+    }
+  }
+  return createElement(
+    "div",
+    { className: "caf-panel caf-panel-single" },
+    createElement(Summary, { spec: rspec, records: ctx.data.records }),
+    createElement(ListScreen, { spec: rspec, ctx })
+  );
+}
+
+// src/app.js
+var LAYOUTS = ["panel", "records"];
+var RESERVED = ["title", "empty", "wide", "onSelect", "subtitle"];
+function validate(spec) {
+  const layout = spec.layout || "panel";
+  if (!LAYOUTS.includes(layout)) {
+    throw new Error(
+      `claude-artifact-framework: unknown layout "${layout}". Valid layouts: ${LAYOUTS.join(", ")}.`
+    );
+  }
+  if (layout === "records") {
+    const r = spec.records;
+    if (!r || !Array.isArray(r.fields) || r.fields.length === 0) {
+      throw new Error(
+        'claude-artifact-framework: layout "records" needs `records: { fields: [...] }` \u2014 the same field declarations the fields block uses.'
+      );
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const f of r.fields) {
+      if (!f || !f.key) throw new Error("claude-artifact-framework: every records field needs a `key`.");
+      if (f.key === "id") throw new Error('claude-artifact-framework: "id" is reserved on records \u2014 the framework assigns it.');
+      if (seen.has(f.key)) throw new Error(`claude-artifact-framework: duplicate records field key "${f.key}".`);
+      seen.add(f.key);
+    }
+    return layout;
+  }
+  const blocks = spec.blocks || [];
+  if (!Array.isArray(blocks)) {
+    throw new Error("claude-artifact-framework: `blocks` must be an array.");
+  }
+  blocks.forEach((block, i) => {
+    if (!block || typeof block !== "object") {
+      throw new Error(`claude-artifact-framework: blocks[${i}] must be an object like { fields: [...] }.`);
+    }
+    const keys = Object.keys(block).filter((k) => !RESERVED.includes(k));
+    const known = keys.filter((k) => BLOCK_NAMES.includes(k));
+    if (known.length === 0) {
+      throw new Error(
+        `claude-artifact-framework: blocks[${i}] has no recognised block type (found: ${keys.join(", ") || "nothing"}). Valid block types: ${BLOCK_NAMES.join(", ")}.`
+      );
+    }
+    if (known.length > 1) {
+      throw new Error(
+        `claude-artifact-framework: blocks[${i}] declares more than one block type (${known.join(
+          ", "
+        )}). Split them into separate entries of \`blocks\`.`
+      );
+    }
+  });
+  return layout;
+}
+function defaultsFrom(spec) {
+  const data = { ...spec.data || {} };
+  if ((spec.layout || "panel") === "records" && !Array.isArray(data.records)) {
+    data.records = [];
+  }
+  for (const block of spec.blocks || []) {
+    for (const field of block.fields || []) {
+      if (field && field.key !== void 0 && !(field.key in data)) {
+        data[field.key] = field.value !== void 0 ? field.value : field.type === "check" ? false : "";
+      }
+    }
+  }
+  return data;
+}
+var BlockBoundary = null;
+function boundary(React2) {
+  if (!BlockBoundary) {
+    BlockBoundary = class extends React2.Component {
+      constructor(props) {
+        super(props);
+        this.state = { error: null };
+      }
+      static getDerivedStateFromError(error) {
+        return { error };
+      }
+      render() {
+        if (this.state.error) {
+          return createElement(
+            "div",
+            { className: "caf-block caf-block-error" },
+            createElement("strong", null, "This section failed to render"),
+            createElement("code", null, String(this.state.error.message || this.state.error))
+          );
+        }
+        return this.props.children;
+      }
+    };
+  }
+  return BlockBoundary;
+}
+function Block({ block, ctx }) {
+  const name = Object.keys(block).find((k) => BLOCK_NAMES.includes(k));
+  const Component2 = BLOCKS[name];
+  return createElement(boundary(ctx.React), null, createElement(Component2, { spec: block, ctx }));
+}
+function Panel({ spec, ctx }) {
+  return createElement(
+    "div",
+    { className: "caf-panel" },
+    (spec.blocks || []).map(
+      (block, i) => createElement(
+        "section",
+        { key: i, className: block.wide ? "caf-slot caf-slot-wide" : "caf-slot" },
+        createElement(Block, { block, ctx })
+      )
+    )
+  );
+}
+var LAYOUT_COMPONENTS = { panel: Panel, records: RecordsLayout };
+function createApp(spec = {}) {
+  const layout = validate(spec);
+  const state = createAppState(defaultsFrom(spec));
+  const css = themeCss(spec.theme && spec.theme.seed) + BASE_CSS;
+  return function App() {
+    if (!hasReact()) {
+      throw new Error(
+        'claude-artifact-framework: React not found. Hand it over once, before rendering:\n\n  import React from "react";\n  ArtifactKit.useReact(React);\n'
+      );
+    }
+    const [, force] = useState(0);
+    useEffect(() => {
+      const unsubscribe = state.subscribe(() => force((n) => n + 1));
+      if (state.isHydrated()) force((n) => n + 1);
+      return unsubscribe;
+    }, []);
+    const ctx = {
+      React: getReact(),
+      data: state.getData(),
+      view: state.getView(),
+      update: state.update,
+      go: state.go,
+      back: state.back
+    };
+    const Layout = LAYOUT_COMPONENTS[layout];
+    return createElement(
+      "div",
+      { className: "caf-root" },
+      createElement("style", { dangerouslySetInnerHTML: { __html: css } }),
+      createElement(
+        "header",
+        { className: "caf-header" },
+        spec.title ? createElement("h1", null, spec.title) : null,
+        spec.subtitle ? createElement("p", null, spec.subtitle) : null
+      ),
+      state.isHydrated() ? createElement(Layout, { spec, ctx }) : createElement("div", { className: "caf-block caf-loading" }, "Loading\u2026")
+    );
+  };
+}
+var BASE_CSS = `
+.caf-root {
+  --caf-radius: 10px;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 2rem 1.25rem 4rem;
+  background: var(--caf-bg);
+  color: var(--caf-text);
+  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.caf-root *, .caf-root *::before, .caf-root *::after { box-sizing: inherit; }
+.caf-header { max-width: 760px; margin: 0 auto 1.5rem; }
+.caf-header h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
+.caf-header p { margin: 0.4rem 0 0; color: var(--caf-muted); font-size: 0.95rem; line-height: 1.5; }
+.caf-panel { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.caf-slot { grid-column: span 2; min-width: 0; }
+@media (min-width: 720px) { .caf-slot { grid-column: span 1; } .caf-slot-wide { grid-column: span 2; } }
+.caf-block {
+  background: var(--caf-surface);
+  border: 1px solid var(--caf-border);
+  border-radius: var(--caf-radius);
+  padding: 1.1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  height: 100%;
+}
+.caf-block-title { margin: 0; font-size: 0.95rem; font-weight: 650; }
+.caf-field { display: flex; flex-direction: column; gap: 0.3rem; }
+.caf-field label { font-size: 0.78rem; font-weight: 600; color: var(--caf-muted); letter-spacing: 0.02em; }
+.caf-field input, .caf-field select, .caf-field textarea {
+  font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem;
+  border-radius: 7px; border: 1px solid var(--caf-border);
+  background: var(--caf-sunken); color: var(--caf-text); width: 100%;
+}
+.caf-field input:focus-visible, .caf-field select:focus-visible, .caf-field textarea:focus-visible,
+.caf-row:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
+.caf-field input[aria-invalid="true"] { border-color: var(--caf-danger); }
+.caf-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
+.caf-hint { color: var(--caf-muted); font-size: 0.75rem; }
+.caf-error { color: var(--caf-danger); font-size: 0.75rem; font-weight: 600; }
+.caf-output-grid { display: flex; flex-direction: column; gap: 0.7rem; }
+.caf-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
+.caf-stat-label { color: var(--caf-muted); font-size: 0.82rem; }
+.caf-stat-value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.caf-stat-big { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--caf-border); }
+.caf-stat-big .caf-stat-value { font-size: 1.9rem; font-weight: 680; letter-spacing: -0.02em; color: var(--caf-accent); }
+.caf-list { padding: 0.4rem; gap: 0; }
+.caf-row {
+  font: inherit; text-align: left; cursor: pointer;
+  display: flex; flex-direction: column; gap: 0.15rem;
+  padding: 0.65rem 0.7rem; border: none; border-radius: 7px;
+  background: transparent; color: inherit; width: 100%;
+}
+.caf-row:hover { background: var(--caf-sunken); }
+.caf-row-title { font-size: 0.92rem; font-weight: 550; }
+.caf-row-sub { font-size: 0.78rem; color: var(--caf-muted); }
+.caf-panel-single { grid-template-columns: 1fr; }
+.caf-panel-single .caf-slot, .caf-panel-single > * { grid-column: span 1; }
+.caf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.3rem 0.5rem; }
+.caf-count { font-size: 0.8rem; color: var(--caf-muted); font-variant-numeric: tabular-nums; }
+.caf-btn {
+  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
+  padding: 0.45rem 0.8rem; border-radius: 7px;
+  border: 1px solid var(--caf-border); background: var(--caf-sunken); color: var(--caf-text);
+}
+.caf-btn:hover { filter: brightness(0.97); }
+.caf-btn:focus-visible { outline: 2px solid var(--caf-accent); outline-offset: 1px; }
+.caf-btn-primary { background: var(--caf-accent); border-color: var(--caf-accent); color: var(--caf-accentText); }
+.caf-btn-danger { background: transparent; border-color: var(--caf-danger); color: var(--caf-danger); }
+.caf-empty, .caf-loading { color: var(--caf-muted); font-size: 0.9rem; text-align: center; padding: 1.6rem 1rem; }
+.caf-block-error { border-color: var(--caf-danger); gap: 0.4rem; }
+.caf-block-error strong { font-size: 0.9rem; color: var(--caf-danger); }
+.caf-block-error code { font-size: 0.78rem; color: var(--caf-muted); word-break: break-word; }
+`;
 export {
+  contrast,
+  createApp,
   createPersistedStore,
   createSharedStore,
   createStore,
-  storage
+  hasReact,
+  palette,
+  storage,
+  themeCss,
+  useReact
 };
 //# sourceMappingURL=index.esm.js.map