@petrarca/sonnet-schema-designer 0.4.2

package/dist/index.js

@@ -0,0 +1,2826 @@
+// src/model/paths.ts
+function pathKey(path) {
+  return path.join(".");
+}
+function samePath(a, b) {
+  if (a === null || b === null) return a === b;
+  return a.length === b.length && a.every((seg, i) => seg === b[i]);
+}
+function childContainer(prop) {
+  if (prop.type === "object" && prop.properties) return prop.properties;
+  if (prop.type === "array" && prop.items?.type === "object") {
+    return prop.items.properties;
+  }
+  return void 0;
+}
+function getProperty(schema, path) {
+  if (path.length === 0) return void 0;
+  let container = schema.properties;
+  let prop;
+  for (const seg of path) {
+    if (!container) return void 0;
+    prop = container[seg];
+    if (!prop) return void 0;
+    container = childContainer(prop);
+  }
+  return prop;
+}
+function isContainer(prop) {
+  return childContainer(prop) !== void 0;
+}
+function childrenOf(prop) {
+  return childContainer(prop) ?? {};
+}
+
+// src/model/view.ts
+function propertyKind(prop) {
+  if (prop.type === "object" && prop.properties) return "object";
+  if (prop.type === "array") return "array";
+  if (Array.isArray(prop.enum) && prop.enum.length > 0) return "enum";
+  return "scalar";
+}
+function arrayCardinality(min, max) {
+  if (min == null && max == null) return "";
+  if (min != null && min === max) return `${min}`;
+  return `${min ?? ""}..${max ?? ""}`;
+}
+function typeLabelOf(prop) {
+  if (prop.type === "array") {
+    const itemType = prop.items?.type ?? "any";
+    return `${itemType}[${arrayCardinality(prop.minItems, prop.maxItems)}]`;
+  }
+  return prop.type ?? "any";
+}
+function orderedKeys(properties, order) {
+  const keys = Object.keys(properties);
+  if (!order || order.length === 0) return keys;
+  const inOrder = order.filter((k) => k in properties);
+  const rest = keys.filter((k) => !inOrder.includes(k));
+  return [...inOrder, ...rest];
+}
+function buildNode(key, prop, parentPath, requiredKeys) {
+  const path = [...parentPath, key];
+  const widget = typeof prop["x-ui-widget"] === "string" ? prop["x-ui-widget"] : void 0;
+  const node = {
+    path,
+    key,
+    property: prop,
+    kind: propertyKind(prop),
+    required: !!requiredKeys?.includes(key),
+    typeLabel: typeLabelOf(prop),
+    widget,
+    children: []
+  };
+  if (isContainer(prop)) {
+    const kids = childrenOf(prop);
+    const childRequired = prop.type === "object" ? prop.required : prop.items?.required;
+    const childOrder = prop.type === "object" ? prop["x-ui-order"] : prop.items?.["x-ui-order"];
+    node.children = orderedKeys(kids, childOrder).map(
+      (k) => buildNode(k, kids[k], path, childRequired)
+    );
+  }
+  return node;
+}
+function buildPropertyTree(schema) {
+  return orderedKeys(schema.properties, schema["x-ui-order"]).map(
+    (key) => buildNode(key, schema.properties[key], [], schema.required)
+  );
+}
+function layoutScopes(schema) {
+  const scopes = [{ path: [], label: "Form (root)" }];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (node.kind === "object" || node.kind === "array") {
+        const suffix = node.kind === "array" ? " (items)" : "";
+        scopes.push({
+          path: node.path,
+          label: node.path.join(" \u203A ") + suffix
+        });
+        walk(node.children);
+      }
+    }
+  };
+  walk(buildPropertyTree(schema));
+  return scopes;
+}
+
+// src/model/mutate.ts
+function clone(v) {
+  return structuredClone(v);
+}
+function newProperty(kind) {
+  switch (kind) {
+    case "object":
+      return { type: "object", properties: {} };
+    case "array":
+      return { type: "array", items: { type: "object", properties: {} } };
+    default:
+      return { type: "string" };
+  }
+}
+function resolveContainer(schema, parentPath) {
+  if (parentPath.length === 0) {
+    return {
+      properties: schema.properties,
+      getOrder: () => schema["x-ui-order"],
+      setOrder: (o) => {
+        if (o) schema["x-ui-order"] = o;
+        else delete schema["x-ui-order"];
+      },
+      getRequired: () => schema.required,
+      setRequired: (r) => {
+        if (r && r.length) schema.required = r;
+        else delete schema.required;
+      }
+    };
+  }
+  const owner = getProperty(schema, parentPath);
+  if (!owner) return null;
+  const properties = childContainer(owner);
+  if (!properties) return null;
+  const target = owner.type === "array" ? owner.items : owner;
+  return {
+    properties,
+    getOrder: () => target["x-ui-order"],
+    setOrder: (o) => {
+      if (o) target["x-ui-order"] = o;
+      else delete target["x-ui-order"];
+    },
+    getRequired: () => target.required,
+    setRequired: (r) => {
+      if (r && r.length) target.required = r;
+      else delete target.required;
+    }
+  };
+}
+function uniqueKey(base, properties) {
+  if (!(base in properties)) return base;
+  let i = 2;
+  while (`${base}_${i}` in properties) i++;
+  return `${base}_${i}`;
+}
+function addProperty(model, parentPath, kind) {
+  const schema = clone(model.schema);
+  const container = resolveContainer(schema, parentPath);
+  if (!container) return { model, path: parentPath };
+  const key = uniqueKey("property", container.properties);
+  container.properties[key] = newProperty(kind);
+  const order = container.getOrder();
+  if (order) container.setOrder([...order, key]);
+  return {
+    model: { schema, uiSchema: model.uiSchema },
+    path: [...parentPath, key]
+  };
+}
+function deleteProperty(model, path) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const parentPath = path.slice(0, -1);
+  const key = path[path.length - 1];
+  const container = resolveContainer(schema, parentPath);
+  if (!container || !(key in container.properties)) return model;
+  delete container.properties[key];
+  const order = container.getOrder();
+  if (order) container.setOrder(order.filter((k) => k !== key));
+  const required = container.getRequired();
+  if (required) container.setRequired(required.filter((k) => k !== key));
+  let uiSchema = model.uiSchema;
+  if (parentPath.length === 0 && key in uiSchema) {
+    uiSchema = { ...uiSchema };
+    delete uiSchema[key];
+  }
+  return { schema, uiSchema };
+}
+function renameKeyInPlace(properties, prevKey, nextKey) {
+  const rebuilt = {};
+  for (const [k, v] of Object.entries(properties)) {
+    rebuilt[k === prevKey ? nextKey : k] = v;
+  }
+  for (const k of Object.keys(properties)) delete properties[k];
+  Object.assign(properties, rebuilt);
+}
+function renameUiEntry(uiSchema, parentPath, prevKey, nextKey) {
+  if (parentPath.length !== 0 || !(prevKey in uiSchema)) return uiSchema;
+  const next = { ...uiSchema };
+  next[nextKey] = next[prevKey];
+  delete next[prevKey];
+  return next;
+}
+function renameProperty(model, path, nextKey) {
+  if (path.length === 0) return { model, path };
+  const parentPath = path.slice(0, -1);
+  const prevKey = path[path.length - 1];
+  if (nextKey === prevKey || !nextKey) return { model, path };
+  const schema = clone(model.schema);
+  const container = resolveContainer(schema, parentPath);
+  if (!container || !(prevKey in container.properties)) return { model, path };
+  if (nextKey in container.properties) return { model, path };
+  renameKeyInPlace(container.properties, prevKey, nextKey);
+  const rename = (k) => k === prevKey ? nextKey : k;
+  const order = container.getOrder();
+  if (order) container.setOrder(order.map(rename));
+  const required = container.getRequired();
+  if (required) container.setRequired(required.map(rename));
+  const uiSchema = renameUiEntry(model.uiSchema, parentPath, prevKey, nextKey);
+  return {
+    model: { schema, uiSchema },
+    path: [...parentPath, nextKey]
+  };
+}
+function moveProperty(model, path, direction) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const parentPath = path.slice(0, -1);
+  const key = path[path.length - 1];
+  const container = resolveContainer(schema, parentPath);
+  if (!container) return model;
+  const keys = Object.keys(container.properties);
+  const order = container.getOrder() ?? keys;
+  const full = [...order.filter((k) => keys.includes(k))];
+  for (const k of keys) if (!full.includes(k)) full.push(k);
+  const idx = full.indexOf(key);
+  const swap = idx + direction;
+  if (idx < 0 || swap < 0 || swap >= full.length) return model;
+  [full[idx], full[swap]] = [full[swap], full[idx]];
+  container.setOrder(full);
+  return { schema, uiSchema: model.uiSchema };
+}
+function setRequired(model, path, required) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const parentPath = path.slice(0, -1);
+  const key = path[path.length - 1];
+  const container = resolveContainer(schema, parentPath);
+  if (!container) return model;
+  const current = new Set(container.getRequired() ?? []);
+  if (required) current.add(key);
+  else current.delete(key);
+  container.setRequired([...current]);
+  return { schema, uiSchema: model.uiSchema };
+}
+function updateProperty(model, path, patch) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, path);
+  if (!prop) return model;
+  Object.assign(prop, patch);
+  return { schema, uiSchema: model.uiSchema };
+}
+function changePropertyType(model, path, nextType) {
+  if (path.length === 0 || !nextType) return model;
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, path);
+  if (!prop || prop.type === nextType) return model;
+  delete prop.properties;
+  delete prop.items;
+  delete prop.enum;
+  delete prop.minLength;
+  delete prop.maxLength;
+  delete prop.pattern;
+  delete prop.format;
+  delete prop.minimum;
+  delete prop.maximum;
+  delete prop.minItems;
+  delete prop.maxItems;
+  prop.type = nextType;
+  if (nextType === "object") prop.properties = {};
+  if (nextType === "array") prop.items = { type: "string" };
+  return { schema, uiSchema: model.uiSchema };
+}
+function normalizeChoices(choices) {
+  const seen = /* @__PURE__ */ new Set();
+  const clean = [];
+  for (const c of choices) {
+    const value = c.value.trim();
+    if (!value || seen.has(value)) continue;
+    seen.add(value);
+    clean.push({ value, label: c.label?.trim() || void 0 });
+  }
+  return clean;
+}
+function withEnumNames(entry, choices) {
+  const enumNames = {};
+  for (const c of choices) if (c.label) enumNames[c.value] = c.label;
+  const next = { ...entry ?? {} };
+  const options = {
+    ...next["x-ui-options"] ?? {}
+  };
+  if (Object.keys(enumNames).length) options.enumNames = enumNames;
+  else delete options.enumNames;
+  if (Object.keys(options).length) next["x-ui-options"] = options;
+  else delete next["x-ui-options"];
+  return Object.keys(next).length ? next : void 0;
+}
+function setEnum(model, path, choices) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, path);
+  if (!prop) return model;
+  const clean = normalizeChoices(choices);
+  if (clean.length === 0) delete prop.enum;
+  else prop.enum = clean.map((c) => c.value);
+  const nextEntry = withEnumNames(
+    getUiEntryAtPath(model.uiSchema, path),
+    clean
+  );
+  const uiSchema = setEntryIn(model.uiSchema, path, nextEntry);
+  return { schema, uiSchema };
+}
+function readEnumChoices(prop, uiEntry) {
+  if (!Array.isArray(prop.enum)) return [];
+  const enumNames = uiEntry?.["x-ui-options"]?.enumNames ?? {};
+  return prop.enum.map((v) => {
+    const value = String(v);
+    return { value, label: enumNames[value] };
+  });
+}
+function setTableHints(model, path, hints) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, path);
+  if (!prop) return model;
+  if (hints.cell) prop["x-ui-cell"] = hints.cell;
+  else delete prop["x-ui-cell"];
+  if (hints.cellOptions && Object.keys(hints.cellOptions).length > 0) {
+    prop["x-ui-cell-options"] = hints.cellOptions;
+  } else {
+    delete prop["x-ui-cell-options"];
+  }
+  if (hints.column && Object.keys(hints.column).length > 0) {
+    prop["x-ui-column"] = hints.column;
+  } else {
+    delete prop["x-ui-column"];
+  }
+  return { schema, uiSchema: model.uiSchema };
+}
+function readTableHints(prop) {
+  return {
+    cell: typeof prop["x-ui-cell"] === "string" ? prop["x-ui-cell"] : void 0,
+    cellOptions: prop["x-ui-cell-options"],
+    column: prop["x-ui-column"]
+  };
+}
+function getUiEntryAtPath(uiSchema, path) {
+  if (path.length === 0) return void 0;
+  let entry = uiSchema[path[0]];
+  for (let i = 1; i < path.length && entry; i++) {
+    const fields = entry["x-ui-fields"];
+    entry = fields?.[path[i]];
+  }
+  return entry;
+}
+function setEntryIn(map, path, entry) {
+  const [head, ...rest] = path;
+  const next = { ...map };
+  if (rest.length === 0) {
+    if (entry && Object.keys(entry).length > 0) next[head] = entry;
+    else delete next[head];
+    return next;
+  }
+  const current = { ...next[head] ?? {} };
+  const childFields = current["x-ui-fields"] ?? {};
+  const updatedFields = setEntryIn(childFields, rest, entry);
+  if (Object.keys(updatedFields).length > 0) {
+    current["x-ui-fields"] = updatedFields;
+  } else {
+    delete current["x-ui-fields"];
+  }
+  if (Object.keys(current).length > 0) next[head] = current;
+  else delete next[head];
+  return next;
+}
+function setUiEntry(model, path, entry) {
+  if (path.length === 0) return model;
+  const uiSchema = setEntryIn(model.uiSchema, path, entry);
+  return { schema: model.schema, uiSchema };
+}
+function setPropertyLayout(model, path, layout) {
+  if (path.length === 0) return model;
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, path);
+  if (!prop) return model;
+  const target = prop.type === "array" ? prop.items : prop;
+  if (!target) return model;
+  if (layout) target["x-ui-layout"] = layout;
+  else delete target["x-ui-layout"];
+  return { schema, uiSchema: model.uiSchema };
+}
+function setRootLayout(model, layout) {
+  const uiSchema = { ...model.uiSchema };
+  if (layout) uiSchema["x-ui-layout"] = layout;
+  else delete uiSchema["x-ui-layout"];
+  return { schema: model.schema, uiSchema };
+}
+function setRootLayoutRows(model, rows) {
+  const uiSchema = { ...model.uiSchema };
+  const layout = { ...uiSchema["x-ui-layout"] ?? {} };
+  if (rows && rows.length > 0) layout.rows = rows;
+  else delete layout.rows;
+  if (Object.keys(layout).length > 0) uiSchema["x-ui-layout"] = layout;
+  else delete uiSchema["x-ui-layout"];
+  return { schema: model.schema, uiSchema };
+}
+function setScopedLayoutRows(model, scopePath, rows) {
+  if (scopePath.length === 0) return setRootLayoutRows(model, rows);
+  const schema = clone(model.schema);
+  const prop = getProperty(schema, scopePath);
+  if (!prop) return model;
+  const target = prop.type === "array" ? prop.items : prop;
+  if (!target) return model;
+  const layout = { ...target["x-ui-layout"] ?? {} };
+  if (rows && rows.length > 0) layout.rows = rows;
+  else delete layout.rows;
+  if (Object.keys(layout).length > 0) target["x-ui-layout"] = layout;
+  else delete target["x-ui-layout"];
+  return { schema, uiSchema: model.uiSchema };
+}
+function getScopedLayout(schema, uiSchema, scopePath) {
+  if (scopePath.length === 0) {
+    return uiSchema["x-ui-layout"];
+  }
+  const prop = getProperty(schema, scopePath);
+  const target = prop?.type === "array" ? prop.items : prop;
+  return target?.["x-ui-layout"];
+}
+function setScopedLayoutOptions(model, scopePath, options) {
+  const current = getScopedLayout(model.schema, model.uiSchema, scopePath) ?? {};
+  const merged = { ...current };
+  for (const key of ["direction", "gap", "labels", "compact"]) {
+    const v = options[key];
+    if (v === void 0 || typeof v === "number" && Number.isNaN(v))
+      delete merged[key];
+    else merged[key] = v;
+  }
+  const layout = Object.keys(merged).length > 0 ? merged : void 0;
+  if (scopePath.length === 0) return setRootLayout(model, layout);
+  return setPropertyLayout(model, scopePath, layout);
+}
+function setGlobalOptions(model, options) {
+  const uiSchema = { ...model.uiSchema };
+  if (options) uiSchema["x-ui-globalOptions"] = options;
+  else delete uiSchema["x-ui-globalOptions"];
+  return { schema: model.schema, uiSchema };
+}
+
+// src/model/compatibleWidgets.ts
+var AUTO = { value: null, label: "Auto (resolve from schema)" };
+var STRING_WIDGETS = [
+  { value: "text", label: "Text input" },
+  { value: "textarea", label: "Textarea" },
+  { value: "select", label: "Select" },
+  { value: "tags", label: "Tags" },
+  { value: "entity-select", label: "Entity select" },
+  { value: "json-editor", label: "JSON editor" }
+];
+var NUMBER_WIDGETS = [
+  { value: "number", label: "Number" },
+  { value: "select", label: "Select" },
+  { value: "quantity", label: "Quantity" }
+];
+var BOOLEAN_WIDGETS = [
+  { value: "checkbox", label: "Checkbox" }
+];
+var OBJECT_WIDGETS = [
+  { value: "object", label: "Object (sub-form)" },
+  { value: "json-editor", label: "JSON editor" }
+];
+var ARRAY_WIDGETS = [
+  { value: "array", label: "Array (repeatable)" },
+  { value: "select", label: "Multi-select" },
+  { value: "tags", label: "Tags" }
+];
+function compatibleWidgets(prop) {
+  switch (prop.type) {
+    case "string":
+      return [AUTO, ...STRING_WIDGETS];
+    case "number":
+    case "integer":
+      return [AUTO, ...NUMBER_WIDGETS];
+    case "boolean":
+      return [AUTO, ...BOOLEAN_WIDGETS];
+    case "object":
+      return [AUTO, ...OBJECT_WIDGETS];
+    case "array":
+      return [AUTO, ...ARRAY_WIDGETS];
+    default:
+      return [AUTO];
+  }
+}
+
+// src/model/embed.ts
+var EMBEDDABLE_KEYS = [
+  "x-ui-widget",
+  "x-ui-options",
+  "x-ui-title",
+  "x-ui-placeholder",
+  "x-ui-description"
+];
+function embedUiSchema(schema, uiSchema) {
+  const next = structuredClone(schema);
+  for (const [fieldName, entry] of Object.entries(uiSchema)) {
+    const prop = next.properties[fieldName];
+    if (!prop || !entry) continue;
+    for (const key of EMBEDDABLE_KEYS) {
+      if (entry[key] !== void 0) {
+        prop[key] = entry[key];
+      }
+    }
+  }
+  return next;
+}
+
+// src/hooks/useDesignerState.ts
+import { useCallback, useMemo, useRef, useState } from "react";
+
+// src/capabilities.ts
+import { z } from "zod";
+import { warnLog } from "@petrarca/sonnet-core";
+var capabilitiesSchema = z.object({
+  mode: z.enum(["data", "full"]).default("full").meta({
+    description: "What the designer authors. 'full' (default): JSON Schema + uiSchema (form presentation hints). 'data': JSON Schema only -- the UI Schema tab, Combined tab, and the inspector's per-field UI tab are hidden (pure data schemas: audit events, terminology)."
+  }),
+  previews: z.array(z.enum(["form", "table", "json", "capabilities"])).optional().meta({
+    description: "Which tabs the center pane offers, in order. 'form'/'table'/'json' preview the schema; 'capabilities' is a JSON editor for this profile (opt-in, never in a default). When omitted, defaults to ['form','table','json'] in 'full' mode and ['json'] in 'data' mode. An empty list hides the center pane entirely."
+  }),
+  editablePaths: z.array(z.string()).optional().meta({
+    description: "Scoped editing. When set, the passed-in schema is fixed EVERYWHERE except the children of these JSON Pointer (RFC 6901) paths, which the user may add / delete / edit. Absent = fully editable. readOnly overrides this to fully locked."
+  })
+}).meta({
+  id: "SchemaDesignerCapabilities",
+  title: "SchemaDesignerCapabilities",
+  description: "Capability profile for SchemaDesigner. Gates what a consumer can author. Every field is optional and defaults to the most permissive value (forward-compatible). Passing readOnly to the designer overrides this object to a fully-locked profile."
+});
+function defaultPreviews(mode) {
+  return mode === "data" ? ["json"] : ["form", "table", "json"];
+}
+function resolveCapabilities(capabilities, readOnly) {
+  const parsed = capabilitiesSchema.safeParse(capabilities ?? {});
+  const value = parsed.success ? parsed.data : capabilitiesSchema.parse({});
+  if (!parsed.success) {
+    warnLog(
+      "[SchemaDesigner] Invalid capabilities \u2014 falling back to defaults.",
+      parsed.error.issues
+    );
+  }
+  const mode = value.mode;
+  const previews = value.previews ?? defaultPreviews(mode);
+  const editablePaths = value.editablePaths ?? [];
+  return {
+    mode,
+    previews,
+    editablePaths,
+    locked: !!readOnly,
+    scoped: !readOnly && editablePaths.length > 0,
+    showCapabilities: previews.includes("capabilities"),
+    showPreview: previews.length > 0
+  };
+}
+function validateCapabilities(input) {
+  const parsed = capabilitiesSchema.safeParse(input);
+  if (parsed.success) return { ok: true, value: parsed.data };
+  const errors = parsed.error.issues.map((i) => {
+    const path = i.path.length ? i.path.join(".") : "(root)";
+    return `${path}: ${i.message}`;
+  });
+  return { ok: false, errors };
+}
+
+// src/model/scoping.ts
+function escapeToken(token) {
+  return token.replace(/~/g, "~0").replace(/\//g, "~1");
+}
+function parentContainerPointer(schema, path) {
+  if (path.length === 0) return void 0;
+  let container = schema.properties;
+  let pointer = "/properties";
+  for (let i = 0; i < path.length; i++) {
+    if (!container) return void 0;
+    const seg = path[i];
+    const prop = container[seg];
+    if (!prop) return void 0;
+    if (i === path.length - 1) return pointer;
+    const next = childContainer(prop);
+    if (!next) return void 0;
+    pointer = prop.type === "array" ? `${pointer}/${escapeToken(seg)}/items/properties` : `${pointer}/${escapeToken(seg)}/properties`;
+    container = next;
+  }
+  return pointer;
+}
+function isPropertyEditable(schema, path, editablePaths) {
+  if (editablePaths.length === 0) return true;
+  const parent = parentContainerPointer(schema, path);
+  if (parent === void 0) return false;
+  return editablePaths.includes(parent);
+}
+function canAddChildTo(schema, path, editablePaths) {
+  if (editablePaths.length === 0) return true;
+  if (path.length === 0) return editablePaths.includes("/properties");
+  const own = ownChildContainerPointer(schema, path);
+  return own !== void 0 && editablePaths.includes(own);
+}
+function ownChildContainerPointer(schema, path) {
+  const parent = parentContainerPointer(schema, path);
+  if (parent === void 0) return void 0;
+  let container = schema.properties;
+  for (let i = 0; i < path.length; i++) {
+    const prop = container?.[path[i]];
+    if (!prop) return void 0;
+    if (i === path.length - 1) {
+      const seg = escapeToken(path[i]);
+      return prop.type === "array" ? `${parent}/${seg}/items/properties` : `${parent}/${seg}/properties`;
+    }
+    container = childContainer(prop);
+  }
+  return void 0;
+}
+
+// src/hooks/useDesignerState.ts
+var EMPTY_SCHEMA = {
+  title: "",
+  type: "object",
+  properties: {}
+};
+function useDesignerState(args) {
+  const { onChange, readOnly = false } = args;
+  const controlled = args.schema !== void 0;
+  const [internal, setInternal] = useState(() => ({
+    schema: args.initialSchema ?? EMPTY_SCHEMA,
+    uiSchema: args.initialUiSchema ?? {}
+  }));
+  const [selection, setSelection] = useState(null);
+  const model = controlled ? { schema: args.schema, uiSchema: args.uiSchema ?? {} } : internal;
+  const modelRef = useRef(model);
+  modelRef.current = model;
+  const commit = useCallback(
+    (next) => {
+      if (!controlled) setInternal(next);
+      onChange?.(next.schema, next.uiSchema);
+    },
+    [controlled, onChange]
+  );
+  const select = useCallback((path) => {
+    setSelection((prev) => samePath(prev, path) ? prev : path);
+  }, []);
+  const capabilities = useMemo(
+    () => resolveCapabilities(args.capabilities, readOnly),
+    [args.capabilities, readOnly]
+  );
+  const canEditProperty = useCallback(
+    (path) => {
+      if (capabilities.locked) return false;
+      return isPropertyEditable(
+        modelRef.current.schema,
+        path,
+        capabilities.editablePaths
+      );
+    },
+    [capabilities.locked, capabilities.editablePaths]
+  );
+  const canAddChild = useCallback(
+    (path) => {
+      if (capabilities.locked) return false;
+      return canAddChildTo(
+        modelRef.current.schema,
+        path,
+        capabilities.editablePaths
+      );
+    },
+    [capabilities.locked, capabilities.editablePaths]
+  );
+  const ops = useMemo(
+    () => ({
+      addProperty(parentPath, kind) {
+        if (!canAddChild(parentPath)) return;
+        const res = addProperty(modelRef.current, parentPath, kind);
+        commit(res.model);
+        setSelection(res.path);
+      },
+      deleteProperty(path) {
+        if (!canEditProperty(path)) return;
+        commit(deleteProperty(modelRef.current, path));
+        setSelection((prev) => samePath(prev, path) ? null : prev);
+      },
+      renameProperty(path, nextKey) {
+        if (!canEditProperty(path)) return;
+        const res = renameProperty(modelRef.current, path, nextKey);
+        commit(res.model);
+        setSelection(res.path);
+      },
+      moveProperty(path, direction) {
+        if (!canEditProperty(path)) return;
+        commit(moveProperty(modelRef.current, path, direction));
+      },
+      setRequired(path, required) {
+        if (!canEditProperty(path)) return;
+        commit(setRequired(modelRef.current, path, required));
+      },
+      updateProperty(path, patch) {
+        if (!canEditProperty(path)) return;
+        commit(updateProperty(modelRef.current, path, patch));
+      },
+      changePropertyType(path, nextType) {
+        if (!canEditProperty(path)) return;
+        commit(changePropertyType(modelRef.current, path, nextType));
+      },
+      setEnum(path, choices) {
+        if (!canEditProperty(path)) return;
+        commit(setEnum(modelRef.current, path, choices));
+      },
+      // UI-schema / presentation ops use `readOnly` (not `capabilities.locked`)
+      // because they are not subject to scoped-path gating: presentation hints
+      // are always either fully editable or fully locked.
+      setUiEntry(path, entry) {
+        if (readOnly) return;
+        commit(setUiEntry(modelRef.current, path, entry));
+      },
+      setTableHints(path, hints) {
+        if (readOnly) return;
+        commit(setTableHints(modelRef.current, path, hints));
+      },
+      setPropertyLayout(path, layout) {
+        if (readOnly) return;
+        commit(setPropertyLayout(modelRef.current, path, layout));
+      },
+      setRootLayout(layout) {
+        if (readOnly) return;
+        commit(setRootLayout(modelRef.current, layout));
+      },
+      setRootLayoutRows(rows) {
+        if (readOnly) return;
+        commit(setRootLayoutRows(modelRef.current, rows));
+      },
+      setScopedLayoutRows(scopePath, rows) {
+        if (readOnly) return;
+        commit(setScopedLayoutRows(modelRef.current, scopePath, rows));
+      },
+      setScopedLayoutOptions(scopePath, options) {
+        if (readOnly) return;
+        commit(setScopedLayoutOptions(modelRef.current, scopePath, options));
+      },
+      setGlobalOptions(options) {
+        if (readOnly) return;
+        commit(setGlobalOptions(modelRef.current, options));
+      }
+    }),
+    [commit, readOnly, canEditProperty, canAddChild]
+  );
+  return {
+    schema: model.schema,
+    uiSchema: model.uiSchema,
+    selection,
+    readOnly,
+    capabilities,
+    canEditProperty,
+    canAddChild,
+    select,
+    ...ops
+  };
+}
+
+// src/SchemaDesigner.tsx
+import { useEffect as useEffect5, useState as useState8 } from "react";
+import { ResizeHandle, IconButton as IconButton5 } from "@petrarca/sonnet-ui";
+import { useResizablePanel } from "@petrarca/sonnet-core/hooks";
+import {
+  Settings,
+  PanelRightClose,
+  PanelRightOpen,
+  PanelLeftOpen
+} from "lucide-react";
+
+// src/FormSettingsSheet.tsx
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetBody,
+  SheetTitle,
+  SheetDescription
+} from "@petrarca/sonnet-ui";
+import { JsonSchemaFormRenderer, FormSelect } from "@petrarca/sonnet-forms";
+
+// src/inspector/layoutMetaSchemas.ts
+function buildLayoutMetaSchema() {
+  return {
+    title: "",
+    type: "object",
+    properties: {
+      direction: {
+        type: "string",
+        title: "Direction",
+        enum: ["vertical", "horizontal"],
+        description: "Stack fields vertically or lay them out horizontally."
+      },
+      gap: {
+        type: "integer",
+        title: "Gap (px)",
+        minimum: 0,
+        description: "Space between fields."
+      },
+      labels: {
+        type: "boolean",
+        title: "Show labels"
+      },
+      compact: {
+        type: "boolean",
+        title: "Compact",
+        description: "Smaller control sizing."
+      }
+    }
+  };
+}
+function layoutToValues(layout) {
+  return {
+    direction: layout?.direction,
+    gap: layout?.gap,
+    labels: layout?.labels,
+    compact: layout?.compact
+  };
+}
+function valuesToLayout(values, existing) {
+  const next = { ...existing ?? {} };
+  if (values.direction === "vertical" || values.direction === "horizontal") {
+    next.direction = values.direction;
+  } else {
+    delete next.direction;
+  }
+  if (typeof values.gap === "number" && !Number.isNaN(values.gap)) {
+    next.gap = values.gap;
+  } else {
+    delete next.gap;
+  }
+  if (typeof values.labels === "boolean") next.labels = values.labels;
+  else delete next.labels;
+  if (typeof values.compact === "boolean") next.compact = values.compact;
+  else delete next.compact;
+  return Object.keys(next).length > 0 ? next : void 0;
+}
+function buildGlobalOptionsMetaSchema() {
+  return {
+    title: "",
+    type: "object",
+    properties: {
+      disabled: { type: "boolean", title: "Disable all fields" },
+      readonly: { type: "boolean", title: "Read-only all fields" },
+      hideLabels: {
+        type: "boolean",
+        title: "Hide all labels",
+        description: "Sets label: false on every field."
+      },
+      compact: { type: "boolean", title: "Compact all fields" }
+    }
+  };
+}
+function globalOptionsToValues(options) {
+  return {
+    disabled: options?.disabled,
+    readonly: options?.readonly,
+    hideLabels: options?.label === false,
+    compact: options?.compact
+  };
+}
+function valuesToGlobalOptions(values) {
+  const next = {};
+  if (values.disabled) next.disabled = true;
+  if (values.readonly) next.readonly = true;
+  if (values.hideLabels) next.label = false;
+  if (values.compact) next.compact = true;
+  return Object.keys(next).length > 0 ? next : void 0;
+}
+
+// src/FormSettingsSheet.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormSettingsSheet({
+  open,
+  onOpenChange,
+  state
+}) {
+  const globalOptions = state.uiSchema["x-ui-globalOptions"];
+  const optionValues = globalOptionsToValues(globalOptions);
+  const rootLayout = state.uiSchema["x-ui-layout"];
+  const labelPlacement = rootLayout?.labelPlacement ?? "top";
+  const setLabelPlacement = (value) => {
+    const next = { ...rootLayout ?? {} };
+    if (value === "start") next.labelPlacement = "start";
+    else delete next.labelPlacement;
+    state.setRootLayout(Object.keys(next).length ? next : void 0);
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: "Form settings" }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: "Options applied to every field in the form." })
+    ] }),
+    /* @__PURE__ */ jsxs(SheetBody, { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "heading-meta", children: "Layout" }),
+        /* @__PURE__ */ jsx(
+          FormSelect,
+          {
+            id: "root-labelPlacement",
+            name: "labelPlacement",
+            label: "Label placement",
+            value: labelPlacement,
+            options: [
+              { value: "top", label: "Above" },
+              { value: "start", label: "Inline (start)" }
+            ],
+            onChange: (v) => setLabelPlacement(v === "start" ? "start" : "top"),
+            disabled: state.readOnly,
+            clearable: false
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "heading-meta", children: "Global options" }),
+        /* @__PURE__ */ jsx(
+          JsonSchemaFormRenderer,
+          {
+            schema: buildGlobalOptionsMetaSchema(),
+            data: optionValues,
+            onChange: (data) => state.setGlobalOptions(
+              valuesToGlobalOptions(data)
+            ),
+            showActions: false,
+            showExtraProperties: false,
+            readOnly: state.readOnly
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/tree/PropertyTree.tsx
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { cn } from "@petrarca/sonnet-core";
+import { IconButton, Input } from "@petrarca/sonnet-ui";
+import {
+  Plus,
+  Trash2,
+  ChevronUp,
+  ChevronDown,
+  PanelLeftClose,
+  Lock
+} from "lucide-react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PropertyTree({
+  state,
+  onCollapse
+}) {
+  const nodes = buildPropertyTree(state.schema);
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2("span", { className: "heading-meta", children: "Properties" }),
+      /* @__PURE__ */ jsxs2("span", { className: "ml-auto flex gap-1", children: [
+        state.canAddChild([]) && /* @__PURE__ */ jsx2(
+          IconButton,
+          {
+            label: "Add property",
+            onClick: () => state.addProperty([], "scalar"),
+            children: /* @__PURE__ */ jsx2(Plus, {})
+          }
+        ),
+        onCollapse && /* @__PURE__ */ jsx2(IconButton, { label: "Collapse properties", onClick: onCollapse, children: /* @__PURE__ */ jsx2(PanelLeftClose, {}) })
+      ] })
+    ] }),
+    nodes.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "No properties yet." }) : /* @__PURE__ */ jsx2("div", { className: "rounded-lg border divide-y", children: nodes.map((node) => /* @__PURE__ */ jsx2(
+      PropertyRow,
+      {
+        node,
+        state,
+        depth: 0
+      },
+      pathKey(node.path)
+    )) })
+  ] });
+}
+function NameEditor({
+  initial,
+  onCommit,
+  onCancel
+}) {
+  const [value, setValue] = useState2(initial);
+  const ref = useRef2(null);
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const commit = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== initial) onCommit(trimmed);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsx2(
+    Input,
+    {
+      ref,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onClick: (e) => e.stopPropagation(),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      },
+      className: "h-6 text-sm py-0"
+    }
+  );
+}
+function RowLabel({
+  node,
+  editable,
+  onStartRename
+}) {
+  const title = editable ? `${node.key}${node.required ? " (required)" : ""} -- double-click to rename` : `${node.key} -- fixed (not editable)`;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        className: "flex-1 min-w-0 truncate text-sm font-medium",
+        onDoubleClick: onStartRename,
+        title,
+        children: [
+          node.key,
+          node.required && /* @__PURE__ */ jsx2("span", { className: "ml-0.5 text-destructive", "aria-label": "required", children: "*" })
+        ]
+      }
+    ),
+    !editable && /* @__PURE__ */ jsx2(
+      Lock,
+      {
+        className: "h-3 w-3 shrink-0 text-muted-foreground/50",
+        "aria-label": "fixed"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "shrink-0 max-w-[45%] truncate font-mono text-[11px] text-muted-foreground/70 group-hover/row:hidden",
+        title: node.typeLabel,
+        children: node.typeLabel
+      }
+    )
+  ] });
+}
+function RowActions({
+  node,
+  state,
+  editable,
+  canAddHere
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    editable && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          label: "Move up",
+          revealOnHover: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            state.moveProperty(node.path, -1);
+          },
+          children: /* @__PURE__ */ jsx2(ChevronUp, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          label: "Move down",
+          revealOnHover: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            state.moveProperty(node.path, 1);
+          },
+          children: /* @__PURE__ */ jsx2(ChevronDown, {})
+        }
+      )
+    ] }),
+    canAddHere && /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        label: "Add child property",
+        revealOnHover: true,
+        onClick: (e) => {
+          e.stopPropagation();
+          state.addProperty(node.path, "scalar");
+        },
+        children: /* @__PURE__ */ jsx2(Plus, {})
+      }
+    ),
+    editable && /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        label: "Delete property",
+        tone: "destructive",
+        revealOnHover: true,
+        onClick: (e) => {
+          e.stopPropagation();
+          state.deleteProperty(node.path);
+        },
+        children: /* @__PURE__ */ jsx2(Trash2, {})
+      }
+    )
+  ] });
+}
+function PropertyRow({
+  node,
+  state,
+  depth
+}) {
+  const selected = samePath(state.selection, node.path);
+  const [editing, setEditing] = useState2(false);
+  const editable = state.canEditProperty(node.path);
+  const canAddHere = (node.kind === "object" || node.kind === "array") && state.canAddChild(node.path);
+  const showActions = editable || canAddHere;
+  const startRename = (e) => {
+    e.stopPropagation();
+    if (editable) setEditing(true);
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "group/row relative flex items-center gap-2 px-3 py-2 cursor-pointer",
+          selected && "bg-accent"
+        ),
+        style: { paddingLeft: 12 + depth * 16 },
+        onClick: () => state.select(node.path),
+        children: [
+          editing ? /* @__PURE__ */ jsx2(
+            NameEditor,
+            {
+              initial: node.key,
+              onCommit: (next) => {
+                setEditing(false);
+                state.renameProperty(node.path, next);
+              },
+              onCancel: () => setEditing(false)
+            }
+          ) : /* @__PURE__ */ jsx2(
+            RowLabel,
+            {
+              node,
+              editable,
+              onStartRename: startRename
+            }
+          ),
+          showActions && !editing && // Absolutely positioned so the buttons do not reserve row width at
+          // rest -- the name/type use the full row. The actions overlay the
+          // right edge; each button reveals on hover via revealOnHover. The
+          // background is applied only on hover so it does not cover the type
+          // label at rest (accent for the selected row, background otherwise).
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "absolute right-2 flex gap-0.5 rounded-md pl-2",
+                selected ? "group-hover/row:bg-accent" : "group-hover/row:bg-background"
+              ),
+              children: /* @__PURE__ */ jsx2(
+                RowActions,
+                {
+                  node,
+                  state,
+                  editable,
+                  canAddHere
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    node.children.map((child) => /* @__PURE__ */ jsx2(
+      PropertyRow,
+      {
+        node: child,
+        state,
+        depth: depth + 1
+      },
+      pathKey(child.path)
+    ))
+  ] });
+}
+
+// src/preview/PreviewPane.tsx
+import { useMemo as useMemo4, useState as useState5 } from "react";
+import { Check, Copy } from "lucide-react";
+import {
+  Button as Button3,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsSeparator
+} from "@petrarca/sonnet-ui";
+import { JsonEditor as JsonEditor2 } from "@petrarca/sonnet-ui/json-editor";
+import { JsonSchemaFormRenderer as JsonSchemaFormRenderer3 } from "@petrarca/sonnet-forms";
+import { extractSchemaDefaults } from "@petrarca/sonnet-core/schema";
+import { copyTextToClipboard } from "@petrarca/sonnet-core";
+
+// src/preview/TablePreview.tsx
+import { useMemo as useMemo2 } from "react";
+import { EntityTable } from "@petrarca/sonnet-ui";
+import { toPageResult } from "@petrarca/sonnet-core";
+
+// src/preview/sampleRows.ts
+function sampleString(prop, key, i) {
+  switch (prop.format) {
+    case "email":
+      return `user${i + 1}@example.com`;
+    case "date":
+      return `2024-0${i % 9 + 1}-15`;
+    case "date-time":
+      return `2024-0${i % 9 + 1}-15T09:30:00Z`;
+    case "uri":
+    case "url":
+      return `https://example.com/${key}/${i + 1}`;
+    case "uuid":
+      return `00000000-0000-4000-8000-00000000000${i + 1}`;
+    default:
+      return `${titleCase(key)} ${i + 1}`;
+  }
+}
+function titleCase(key) {
+  const s = key.replace(/[_-]+/g, " ").trim();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function sampleValue(prop, key, i) {
+  if (Array.isArray(prop.enum) && prop.enum.length > 0) {
+    return prop.enum[i % prop.enum.length];
+  }
+  switch (prop.type) {
+    case "string":
+      return sampleString(prop, key, i);
+    case "number":
+      return Math.round((i + 1) * 1.5 * 100) / 100;
+    case "integer":
+      return i + 1;
+    case "boolean":
+      return i % 2 === 0;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    default:
+      return null;
+  }
+}
+function sampleRows(schema, count = 3) {
+  const entries = Object.entries(schema.properties);
+  return Array.from({ length: count }, (_, i) => {
+    const row = {};
+    for (const [key, prop] of entries) {
+      row[key] = sampleValue(prop, key, i);
+    }
+    return row;
+  });
+}
+
+// src/preview/TablePreview.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TablePreview({
+  schema,
+  uiSchema
+}) {
+  const data = useMemo2(() => toPageResult(sampleRows(schema)), [schema]);
+  return /* @__PURE__ */ jsx3(
+    EntityTable,
+    {
+      schema,
+      uiSchema,
+      data,
+      isLoading: false,
+      isError: false,
+      entityLabel: "rows"
+    }
+  );
+}
+
+// src/designers/FormLayoutDesigner.tsx
+import { useMemo as useMemo3, useState as useState3 } from "react";
+import { Input as Input2, IconButton as IconButton2, Button } from "@petrarca/sonnet-ui";
+import { FormSelect as FormSelect2, JsonSchemaFormRenderer as JsonSchemaFormRenderer2 } from "@petrarca/sonnet-forms";
+import {
+  Plus as Plus2,
+  Trash2 as Trash22,
+  ChevronUp as ChevronUp2,
+  ChevronDown as ChevronDown2,
+  GripVertical
+} from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DRAG_MIME = "application/x-sonnet-property";
+function orderedKeysOf(properties, order) {
+  const keys = Object.keys(properties);
+  if (!order || order.length === 0) return keys;
+  const inOrder = order.filter((k) => k in properties);
+  return [...inOrder, ...keys.filter((k) => !inOrder.includes(k))];
+}
+function scopeTarget(schema, scopePath) {
+  const prop = getProperty(schema, scopePath);
+  if (!prop) return void 0;
+  return prop.type === "array" ? prop.items : prop;
+}
+function resolveScope(schema, uiSchema, scopePath) {
+  const container = scopePath.length === 0 ? schema : scopeTarget(schema, scopePath);
+  const layout = scopePath.length === 0 ? uiSchema["x-ui-layout"] : container?.["x-ui-layout"];
+  const isArray = scopeIsArray(schema, scopePath);
+  return {
+    keys: orderedKeysOf(container?.properties ?? {}, container?.["x-ui-order"]),
+    rows: layout?.rows ?? [],
+    layout,
+    isArray
+  };
+}
+function scopeIsArray(schema, scopePath) {
+  if (scopePath.length === 0) return false;
+  return getProperty(schema, scopePath)?.type === "array";
+}
+var SCALAR_META_SCHEMA = buildLayoutMetaSchema();
+var SCALAR_UI_SCHEMA = {
+  "x-ui-layout": {
+    labelPlacement: "start",
+    // Flow row: controls sit left-to-right at their natural width (label hugs
+    // control via horizontal labelPlacement), wrapping as needed.
+    rows: [
+      {
+        fields: ["direction", "gap", "labels", "compact"],
+        arrange: "flow",
+        gap: 16
+      }
+    ],
+    compact: true
+  },
+  // Per-field widths for the toolbar. Top-level fields take their per-field
+  // uiSchema directly under the field name. Direction (a select) gets more
+  // room; the numeric Gap input stays narrow.
+  direction: { "x-ui-width": "lg" },
+  gap: { "x-ui-width": "sm" }
+};
+function scalarsFrom(values) {
+  const full = valuesToLayout(values, void 0) ?? {};
+  return {
+    direction: full.direction,
+    gap: full.gap,
+    labels: full.labels,
+    compact: full.compact
+  };
+}
+function ArrayItemLayoutBar({
+  layout,
+  readOnly,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "shrink-0 rounded-lg border p-3", children: [
+    /* @__PURE__ */ jsx4("p", { className: "heading-meta mb-2", children: "Array item layout" }),
+    /* @__PURE__ */ jsx4(
+      JsonSchemaFormRenderer2,
+      {
+        schema: SCALAR_META_SCHEMA,
+        uiSchema: SCALAR_UI_SCHEMA,
+        data: layoutToValues(layout),
+        onChange: (data) => onChange(scalarsFrom(data)),
+        showActions: false,
+        showExtraProperties: false,
+        readOnly
+      }
+    )
+  ] });
+}
+function FormLayoutDesigner({
+  state
+}) {
+  const scopes = useMemo3(() => layoutScopes(state.schema), [state.schema]);
+  const [scopePath, setScopePath] = useState3([]);
+  const scopeKey = scopePath.join(".");
+  const activeScope = scopes.find((s) => s.path.join(".") === scopeKey) ?? scopes[0];
+  const effectivePath = activeScope.path;
+  const {
+    keys: allKeys,
+    rows,
+    layout,
+    isArray
+  } = resolveScope(state.schema, state.uiSchema, effectivePath);
+  const assigned = new Set(rows.flatMap((r) => r.fields));
+  const available = allKeys.filter((k) => !assigned.has(k));
+  const [dragKey, setDragKey] = useState3(null);
+  const commit = (next) => state.setScopedLayoutRows(effectivePath, next);
+  const place = (key, rowIndex) => {
+    if (!key) return;
+    const next = rows.map((r) => ({
+      ...r,
+      fields: r.fields.filter((f) => f !== key)
+    }));
+    if (rowIndex !== null && next[rowIndex]) {
+      next[rowIndex] = {
+        ...next[rowIndex],
+        fields: [...next[rowIndex].fields, key]
+      };
+    }
+    commit(next);
+  };
+  const addRow = () => commit([...rows, { fields: [] }]);
+  const removeRow = (i) => commit(rows.filter((_, idx) => idx !== i));
+  const moveRow = (i, dir) => {
+    const j = i + dir;
+    if (j < 0 || j >= rows.length) return;
+    const next = [...rows];
+    [next[i], next[j]] = [next[j], next[i]];
+    commit(next);
+  };
+  const setColumns = (i, columns) => {
+    const next = rows.map(
+      (r, idx) => idx === i ? { ...r, columns: columns.trim() ? columns : void 0 } : r
+    );
+    commit(next);
+  };
+  const setGroup = (i, group) => {
+    const next = rows.map(
+      (r, idx) => idx === i ? { ...r, group: group.trim() ? group : void 0 } : r
+    );
+    commit(next);
+  };
+  const setArrange = (i, arrange) => {
+    const next = rows.map(
+      (r, idx) => (
+        // "grid" is the default -- omit it to keep the config clean.
+        idx === i ? { ...r, arrange: arrange === "flow" ? "flow" : void 0 } : r
+      )
+    );
+    commit(next);
+  };
+  const setWidth = (i, cell, width) => {
+    const next = rows.map((r, idx) => {
+      if (idx !== i) return r;
+      const widths = [...r.widths ?? []];
+      while (widths.length < r.fields.length) widths.push("full");
+      widths[cell] = width;
+      const allFull = widths.every((w) => w === "full");
+      return { ...r, widths: allFull ? void 0 : widths };
+    });
+    commit(next);
+  };
+  const readOnly = state.readOnly;
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-3 h-full min-h-0", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsx4("label", { className: "heading-meta", children: "Scope" }),
+      /* @__PURE__ */ jsx4("div", { className: "w-64", children: /* @__PURE__ */ jsx4(
+        FormSelect2,
+        {
+          id: "layout-scope",
+          name: "scope",
+          value: effectivePath.join("."),
+          options: scopes.map((s) => ({
+            value: s.path.join("."),
+            label: s.label
+          })),
+          onChange: (v) => setScopePath(v ? v.split(".").filter(Boolean) : []),
+          clearable: false
+        }
+      ) })
+    ] }),
+    isArray && /* @__PURE__ */ jsx4(
+      ArrayItemLayoutBar,
+      {
+        layout,
+        readOnly,
+        onChange: (opts) => state.setScopedLayoutOptions(effectivePath, opts)
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-4 flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "w-56 shrink-0 flex flex-col min-h-0", children: [
+        /* @__PURE__ */ jsx4("p", { className: "heading-meta mb-2", children: "Available" }),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "flex-1 min-h-0 overflow-auto rounded-lg border p-2 space-y-1 bg-muted/20",
+            onDragOver: (e) => {
+              if (dragKey) e.preventDefault();
+            },
+            onDrop: (e) => {
+              const key = e.dataTransfer.getData(DRAG_MIME) || dragKey;
+              if (key) place(key, null);
+            },
+            children: available.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-muted-foreground p-1", children: "All properties are placed in rows." }) : available.map((key) => /* @__PURE__ */ jsx4(
+              Chip,
+              {
+                label: key,
+                readOnly,
+                onDragStart: () => setDragKey(key),
+                onDragEnd: () => setDragKey(null)
+              },
+              key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx4("p", { className: "text-xs text-muted-foreground mt-2", children: "Unplaced properties render stacked below the rows." })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4("p", { className: "heading-meta", children: "Rows" }),
+          !readOnly && /* @__PURE__ */ jsx4("span", { className: "ml-auto", children: /* @__PURE__ */ jsxs3(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              className: "gap-1.5",
+              onClick: addRow,
+              children: [
+                /* @__PURE__ */ jsx4(Plus2, { className: "h-4 w-4" }),
+                "Add row"
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "flex-1 min-h-0 overflow-auto space-y-3", children: rows.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground", children: "No rows yet. Add a row, then drag properties into it." }) : rows.map((row, i) => /* @__PURE__ */ jsx4(
+          RowCard,
+          {
+            row,
+            index: i,
+            total: rows.length,
+            readOnly,
+            dragActive: !!dragKey,
+            onDropKey: (key) => place(key ?? dragKey ?? "", i),
+            onRemoveKey: (key) => place(key, null),
+            onDragStartKey: (key) => setDragKey(key),
+            onDragEndKey: () => setDragKey(null),
+            onMoveUp: () => moveRow(i, -1),
+            onMoveDown: () => moveRow(i, 1),
+            onDelete: () => removeRow(i),
+            onColumns: (v) => setColumns(i, v),
+            onGroup: (v) => setGroup(i, v),
+            onWidth: (cell, w) => setWidth(i, cell, w),
+            onArrange: (a) => setArrange(i, a)
+          },
+          i
+        )) })
+      ] })
+    ] })
+  ] });
+}
+var WIDTH_LABELS = {
+  full: "Full",
+  sm: "Small",
+  md: "Medium",
+  lg: "Large"
+};
+var WIDTH_SHORT = {
+  full: "F",
+  sm: "S",
+  md: "M",
+  lg: "L"
+};
+function Chip({
+  label,
+  readOnly,
+  onRemove,
+  onDragStart,
+  onDragEnd,
+  width,
+  onWidth,
+  widthDisabled
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      draggable: !readOnly,
+      onDragStart: (e) => {
+        e.dataTransfer.setData(DRAG_MIME, label);
+        e.dataTransfer.effectAllowed = "move";
+        onDragStart();
+      },
+      onDragEnd,
+      className: "group/chip flex items-center gap-1 rounded-md border bg-background px-2 py-1 text-sm cursor-grab active:cursor-grabbing",
+      children: [
+        /* @__PURE__ */ jsx4(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground/60 shrink-0" }),
+        /* @__PURE__ */ jsx4("span", { className: "truncate", children: label }),
+        onWidth && /* @__PURE__ */ jsx4(
+          "select",
+          {
+            value: width ?? "full",
+            onChange: (e) => onWidth(e.target.value),
+            disabled: readOnly || widthDisabled,
+            title: widthDisabled ? "Overridden by raw CSS columns" : "Column width",
+            className: "h-6 rounded border bg-background px-1 text-xs text-muted-foreground disabled:opacity-50",
+            children: ["full", "sm", "md", "lg"].map((w) => /* @__PURE__ */ jsx4("option", { value: w, title: WIDTH_LABELS[w], children: WIDTH_SHORT[w] }, w))
+          }
+        ),
+        onRemove && !readOnly && /* @__PURE__ */ jsx4(IconButton2, { label: "Remove from row", onClick: onRemove, children: /* @__PURE__ */ jsx4(Trash22, {}) })
+      ]
+    }
+  );
+}
+function RowCard({
+  row,
+  index,
+  total,
+  readOnly,
+  dragActive,
+  onDropKey,
+  onRemoveKey,
+  onDragStartKey,
+  onDragEndKey,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  onColumns,
+  onGroup,
+  onWidth,
+  onArrange
+}) {
+  const [over, setOver] = useState3(false);
+  const isFlow = row.arrange === "flow";
+  return /* @__PURE__ */ jsxs3("div", { className: "rounded-lg border p-3", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "heading-meta", children: [
+        "Row ",
+        index + 1
+      ] }),
+      !readOnly && /* @__PURE__ */ jsxs3("span", { className: "ml-auto flex gap-0.5", children: [
+        /* @__PURE__ */ jsx4(
+          IconButton2,
+          {
+            label: "Move row up",
+            disabled: index === 0,
+            onClick: onMoveUp,
+            children: /* @__PURE__ */ jsx4(ChevronUp2, {})
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          IconButton2,
+          {
+            label: "Move row down",
+            disabled: index === total - 1,
+            onClick: onMoveDown,
+            children: /* @__PURE__ */ jsx4(ChevronDown2, {})
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          IconButton2,
+          {
+            label: "Delete row",
+            tone: "destructive",
+            onClick: onDelete,
+            children: /* @__PURE__ */ jsx4(Trash22, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("label", { className: "text-xs text-muted-foreground w-16", children: "Group" }),
+      /* @__PURE__ */ jsx4(
+        Input2,
+        {
+          value: row.group ?? "",
+          onChange: (e) => onGroup(e.target.value),
+          placeholder: "Section title (optional)",
+          disabled: readOnly,
+          className: "h-7 text-sm flex-1"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("label", { className: "text-xs text-muted-foreground w-16", children: "Arrange" }),
+      /* @__PURE__ */ jsxs3(
+        "select",
+        {
+          value: isFlow ? "flow" : "grid",
+          onChange: (e) => onArrange(e.target.value),
+          disabled: readOnly,
+          title: "Grid: sized columns. Inline: fields at natural width, wrapping.",
+          className: "h-7 rounded-md border bg-background px-2 text-sm text-foreground disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "grid", children: "Grid (columns)" }),
+            /* @__PURE__ */ jsx4("option", { value: "flow", children: "Inline (natural width)" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `min-h-10 rounded-md border border-dashed p-2 flex flex-wrap gap-1 ${over && dragActive ? "border-primary bg-accent" : "border-border"}`,
+        onDragOver: (e) => {
+          if (dragActive) {
+            e.preventDefault();
+            setOver(true);
+          }
+        },
+        onDragLeave: () => setOver(false),
+        onDrop: (e) => {
+          setOver(false);
+          onDropKey(e.dataTransfer.getData(DRAG_MIME) || null);
+        },
+        children: row.fields.length === 0 ? /* @__PURE__ */ jsx4("span", { className: "text-xs text-muted-foreground p-1", children: "Drop properties here" }) : row.fields.map((key, cell) => /* @__PURE__ */ jsx4(
+          Chip,
+          {
+            label: key,
+            readOnly,
+            onRemove: () => onRemoveKey(key),
+            onDragStart: () => onDragStartKey(key),
+            onDragEnd: onDragEndKey,
+            width: row.widths?.[cell] ?? "full",
+            onWidth: isFlow ? void 0 : (w) => onWidth(cell, w),
+            widthDisabled: !!row.columns
+          },
+          key
+        ))
+      }
+    ),
+    !isFlow && /* @__PURE__ */ jsxs3("details", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx4("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Advanced: raw CSS columns" }),
+      /* @__PURE__ */ jsxs3("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx4("label", { className: "text-xs text-muted-foreground w-16", children: "Columns" }),
+        /* @__PURE__ */ jsx4(
+          Input2,
+          {
+            value: row.columns ?? "",
+            onChange: (e) => onColumns(e.target.value),
+            placeholder: "e.g. 1fr 1fr",
+            disabled: readOnly,
+            className: "h-7 text-sm flex-1"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { className: "mt-1 pl-[4.5rem] text-xs text-muted-foreground", children: [
+        "Raw ",
+        /* @__PURE__ */ jsx4("span", { className: "font-mono", children: "grid-template-columns" }),
+        ". When set, it overrides the per-property widths. Blank = use widths."
+      ] })
+    ] })
+  ] });
+}
+
+// src/preview/CapabilitiesPanel.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import { Button as Button2 } from "@petrarca/sonnet-ui";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CapabilitiesPanel({
+  capabilities,
+  onApply
+}) {
+  const [text, setText] = useState4(
+    () => JSON.stringify(capabilities ?? {}, null, 2)
+  );
+  const [error, setError] = useState4(null);
+  useEffect2(() => {
+    setText(JSON.stringify(capabilities ?? {}, null, 2));
+  }, [capabilities]);
+  const handleApply = () => {
+    let parsed;
+    try {
+      parsed = JSON.parse(text || "{}");
+    } catch {
+      setError("Invalid JSON.");
+      return;
+    }
+    const result = validateCapabilities(parsed);
+    if (!result.ok) {
+      setError(result.errors.join("; "));
+      return;
+    }
+    setError(null);
+    onApply?.(result.value);
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Edit the capability profile and apply it live." }),
+      /* @__PURE__ */ jsx5(
+        Button2,
+        {
+          type: "button",
+          size: "sm",
+          onClick: handleApply,
+          className: "ml-auto",
+          children: "Apply"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-destructive", children: error }),
+    /* @__PURE__ */ jsx5("div", { className: "relative flex-1 min-h-0 rounded-md border overflow-hidden", children: /* @__PURE__ */ jsx5(
+      JsonEditor,
+      {
+        value: text,
+        editablePaths: ["/"],
+        fillContainer: true,
+        onChange: setText
+      }
+    ) })
+  ] });
+}
+
+// src/preview/PreviewPane.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ReadonlyJson({ value }) {
+  const [copied, setCopied] = useState5(false);
+  const handleCopy = () => {
+    void copyTextToClipboard(value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "absolute inset-0 rounded-md border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs5(
+      Button3,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: handleCopy,
+        className: "absolute right-2 top-2 z-10 gap-1.5",
+        children: [
+          copied ? /* @__PURE__ */ jsx6(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(Copy, { className: "h-3.5 w-3.5" }),
+          copied ? "Copied" : "Copy"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(JsonEditor2, { value, editablePaths: [], fillContainer: true }, value)
+  ] });
+}
+function PreviewTabList({ flags }) {
+  return /* @__PURE__ */ jsxs5(TabsList, { className: "mb-3", children: [
+    flags.showForm && /* @__PURE__ */ jsx6(TabsTrigger, { value: "form", children: "Form" }),
+    flags.isFull && flags.showForm && /* @__PURE__ */ jsx6(TabsTrigger, { value: "layout", children: "Form Layout" }),
+    flags.showTable && /* @__PURE__ */ jsx6(TabsTrigger, { value: "table", children: "Table" }),
+    /* @__PURE__ */ jsx6(TabsSeparator, {}),
+    flags.showJson && /* @__PURE__ */ jsx6(TabsTrigger, { value: "schema", children: "JSON Schema" }),
+    flags.isFull && /* @__PURE__ */ jsx6(TabsTrigger, { value: "ui", children: "UI Schema" }),
+    flags.isFull && /* @__PURE__ */ jsx6(TabsTrigger, { value: "combined", children: "Combined" }),
+    flags.showCapabilities && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(TabsSeparator, {}),
+      /* @__PURE__ */ jsx6(TabsTrigger, { value: "capabilities", children: "Capabilities" })
+    ] })
+  ] });
+}
+function PreviewPane({
+  state,
+  capabilities,
+  onCapabilitiesChange
+}) {
+  const { schema, uiSchema } = state;
+  const caps = state.capabilities;
+  const flags = {
+    isFull: caps.mode === "full",
+    showForm: caps.previews.includes("form"),
+    showTable: caps.previews.includes("table"),
+    showJson: caps.previews.includes("json"),
+    showCapabilities: caps.showCapabilities
+  };
+  const [data, setData] = useState5(
+    () => extractSchemaDefaults(schema)
+  );
+  const schemaText = useMemo4(() => JSON.stringify(schema, null, 2), [schema]);
+  const uiSchemaText = useMemo4(
+    () => JSON.stringify(uiSchema ?? {}, null, 2),
+    [uiSchema]
+  );
+  const embeddedText = useMemo4(
+    () => JSON.stringify(embedUiSchema(schema, uiSchema ?? {}), null, 2),
+    [schema, uiSchema]
+  );
+  const defaultTab = flags.showForm ? "form" : flags.showTable ? "table" : "schema";
+  return /* @__PURE__ */ jsxs5(Tabs, { defaultValue: defaultTab, className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsx6(PreviewTabList, { flags }),
+    flags.showForm && /* @__PURE__ */ jsx6(TabsContent, { value: "form", className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx6(
+      JsonSchemaFormRenderer3,
+      {
+        schema,
+        data,
+        uiSchema,
+        onChange: setData,
+        showActions: false,
+        showExtraProperties: false
+      }
+    ) }),
+    flags.isFull && flags.showForm && /* @__PURE__ */ jsx6(TabsContent, { value: "layout", className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx6(FormLayoutDesigner, { state }) }),
+    flags.showTable && /* @__PURE__ */ jsx6(TabsContent, { value: "table", className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx6(TablePreview, { schema }) }),
+    /* @__PURE__ */ jsx6(
+      SourceTabPanels,
+      {
+        flags,
+        schemaText,
+        uiSchemaText,
+        embeddedText,
+        capabilities,
+        onCapabilitiesChange
+      }
+    )
+  ] });
+}
+function SourceTabPanels({
+  flags,
+  schemaText,
+  uiSchemaText,
+  embeddedText,
+  capabilities,
+  onCapabilitiesChange
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    flags.showJson && /* @__PURE__ */ jsx6(TabsContent, { value: "schema", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx6(ReadonlyJson, { value: schemaText }) }),
+    flags.isFull && /* @__PURE__ */ jsx6(TabsContent, { value: "ui", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx6(ReadonlyJson, { value: uiSchemaText }) }),
+    flags.isFull && /* @__PURE__ */ jsx6(TabsContent, { value: "combined", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx6(ReadonlyJson, { value: embeddedText }) }),
+    flags.showCapabilities && /* @__PURE__ */ jsx6(TabsContent, { value: "capabilities", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx6(
+      CapabilitiesPanel,
+      {
+        capabilities,
+        onApply: onCapabilitiesChange
+      }
+    ) })
+  ] });
+}
+
+// src/inspector/Inspector.tsx
+import { useEffect as useEffect4, useMemo as useMemo8, useRef as useRef4, useState as useState7 } from "react";
+import {
+  Tabs as Tabs2,
+  TabsList as TabsList2,
+  TabsTrigger as TabsTrigger2,
+  TabsContent as TabsContent2,
+  Input as Input4,
+  IconButton as IconButton4
+} from "@petrarca/sonnet-ui";
+import { Pencil, Check as Check2, X } from "lucide-react";
+
+// src/inspector/DataTab.tsx
+import { useMemo as useMemo5, useRef as useRef3 } from "react";
+import { JsonSchemaFormRenderer as JsonSchemaFormRenderer4 } from "@petrarca/sonnet-forms";
+
+// src/inspector/metaSchemas.ts
+var PROPERTY_TYPES = [
+  "string",
+  "number",
+  "integer",
+  "boolean",
+  "object",
+  "array"
+];
+var STRING_FORMATS = [
+  "",
+  "email",
+  "uri",
+  "url",
+  "date",
+  "date-time",
+  "time",
+  "uuid"
+];
+function validationProps(type) {
+  switch (type) {
+    case "string":
+      return {
+        format: { type: "string", title: "Format", enum: STRING_FORMATS },
+        minLength: { type: "integer", title: "Min length", minimum: 0 },
+        maxLength: { type: "integer", title: "Max length", minimum: 0 },
+        pattern: { type: "string", title: "Pattern (regex)" }
+      };
+    case "number":
+    case "integer":
+      return {
+        minimum: { type: "number", title: "Minimum" },
+        maximum: { type: "number", title: "Maximum" }
+      };
+    case "array":
+      return {
+        minItems: { type: "integer", title: "Min items", minimum: 0 },
+        maxItems: { type: "integer", title: "Max items", minimum: 0 }
+      };
+    default:
+      return {};
+  }
+}
+function buildDataMetaSchema(type) {
+  const isContainer2 = type === "object" || type === "array";
+  const properties = {
+    type: { type: "string", title: "Type", enum: [...PROPERTY_TYPES] },
+    title: { type: "string", title: "Label (title)" },
+    description: {
+      type: "string",
+      title: "Description",
+      "x-ui-widget": "textarea"
+    },
+    required: { type: "boolean", title: "Required" },
+    ...isContainer2 ? {} : { default: { type: "string", title: "Default" } },
+    ...validationProps(type)
+  };
+  return { title: "", type: "object", properties };
+}
+function propertyToDataValues(prop, required) {
+  return {
+    type: prop.type ?? "string",
+    title: prop.title,
+    description: prop.description,
+    default: prop.default,
+    required,
+    minLength: prop.minLength,
+    maxLength: prop.maxLength,
+    pattern: prop.pattern,
+    format: prop.format,
+    minimum: prop.minimum,
+    maximum: prop.maximum,
+    minItems: prop.minItems,
+    maxItems: prop.maxItems
+  };
+}
+function dataValuesToPatch(values) {
+  const patch = {};
+  const setStr = (k, v) => {
+    if (typeof v === "string" && v.length > 0)
+      patch[k] = v;
+    else patch[k] = void 0;
+  };
+  const setNum = (k, v) => {
+    if (typeof v === "number" && !Number.isNaN(v))
+      patch[k] = v;
+    else patch[k] = void 0;
+  };
+  setStr("title", values.title);
+  setStr("description", values.description);
+  setStr("default", values.default);
+  setStr("format", values.format);
+  setStr("pattern", values.pattern);
+  setNum("minLength", values.minLength);
+  setNum("maxLength", values.maxLength);
+  setNum("minimum", values.minimum);
+  setNum("maximum", values.maximum);
+  setNum("minItems", values.minItems);
+  setNum("maxItems", values.maxItems);
+  return patch;
+}
+
+// src/inspector/DataTab.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function DataTab({ node, state }) {
+  const type = node.property.type ?? "string";
+  const schema = useMemo5(() => buildDataMetaSchema(type), [type]);
+  const values = useMemo5(
+    () => propertyToDataValues(node.property, node.required),
+    [node.property, node.required]
+  );
+  const prevRef = useRef3(values);
+  prevRef.current = values;
+  const handleChange = (data) => {
+    const next = data;
+    const prev = prevRef.current;
+    if (next.type !== prev.type) {
+      state.changePropertyType(
+        node.path,
+        next.type
+      );
+      return;
+    }
+    if (next.required !== prev.required) {
+      state.setRequired(node.path, !!next.required);
+      return;
+    }
+    state.updateProperty(node.path, dataValuesToPatch(next));
+  };
+  return /* @__PURE__ */ jsx7(
+    JsonSchemaFormRenderer4,
+    {
+      schema,
+      data: values,
+      onChange: handleChange,
+      showActions: false,
+      showExtraProperties: false,
+      readOnly: state.readOnly
+    },
+    node.path.join(".") + ":" + type
+  );
+}
+
+// src/inspector/UITab.tsx
+import { useMemo as useMemo6 } from "react";
+import { JsonSchemaFormRenderer as JsonSchemaFormRenderer5 } from "@petrarca/sonnet-forms";
+import { JsonEditor as JsonEditor3 } from "@petrarca/sonnet-ui/json-editor";
+import {
+  WIDGET_OPTION_DEFS,
+  optionDefsToSchema
+} from "@petrarca/sonnet-forms/widget-options";
+import { FormSelect as FormSelect3 } from "@petrarca/sonnet-forms";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var PRESENTATION_META_SCHEMA = {
+  title: "",
+  type: "object",
+  properties: {
+    "x-ui-title": {
+      type: "string",
+      title: "Label override",
+      description: "Overrides the property title in the form."
+    },
+    "x-ui-placeholder": { type: "string", title: "Placeholder" },
+    "x-ui-description": {
+      type: "string",
+      title: "Help text",
+      "x-ui-widget": "textarea"
+    },
+    "x-ui-width": {
+      type: "string",
+      title: "Field width",
+      description: "Constrain the field's slot width in the form.",
+      enum: ["full", "sm", "md", "lg"],
+      "x-ui-options": {
+        enumNames: {
+          full: "Full width",
+          sm: "Small",
+          md: "Medium",
+          lg: "Large"
+        }
+      }
+    }
+  }
+};
+function PresentationEditor({
+  fieldName,
+  uiEntry,
+  readOnly,
+  onChange
+}) {
+  const values = {
+    "x-ui-title": typeof uiEntry["x-ui-title"] === "string" ? uiEntry["x-ui-title"] : "",
+    "x-ui-placeholder": uiEntry["x-ui-placeholder"] ?? "",
+    "x-ui-description": uiEntry["x-ui-description"] ?? "",
+    "x-ui-width": uiEntry["x-ui-width"] ?? "full"
+  };
+  const handleChange = (data) => {
+    const next = { ...uiEntry };
+    for (const key of [
+      "x-ui-title",
+      "x-ui-placeholder",
+      "x-ui-description"
+    ]) {
+      const v = data[key];
+      if (typeof v === "string" && v.length > 0) next[key] = v;
+      else delete next[key];
+    }
+    const width = data["x-ui-width"];
+    if (width === "sm" || width === "md" || width === "lg") {
+      next["x-ui-width"] = width;
+    } else {
+      delete next["x-ui-width"];
+    }
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Presentation (form overrides)" }),
+    /* @__PURE__ */ jsx8(
+      JsonSchemaFormRenderer5,
+      {
+        schema: PRESENTATION_META_SCHEMA,
+        data: values,
+        onChange: handleChange,
+        showActions: false,
+        showExtraProperties: false,
+        readOnly
+      },
+      `${fieldName}:text`
+    )
+  ] });
+}
+function OptionsEditor({
+  widget,
+  optionsSchema,
+  currentOptions,
+  readOnly,
+  onChange
+}) {
+  if (optionsSchema) {
+    return /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Options" }),
+      /* @__PURE__ */ jsx8(
+        JsonSchemaFormRenderer5,
+        {
+          schema: optionsSchema,
+          data: currentOptions,
+          onChange,
+          showActions: false,
+          showExtraProperties: false,
+          readOnly
+        },
+        widget
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Options (raw JSON)" }),
+    /* @__PURE__ */ jsx8(
+      JsonEditor3,
+      {
+        value: JSON.stringify(currentOptions ?? {}, null, 2),
+        editablePaths: readOnly ? [] : ["/"],
+        height: "180px",
+        className: "rounded-md border overflow-hidden",
+        onChange: (text) => {
+          try {
+            onChange(JSON.parse(text));
+          } catch {
+          }
+        }
+      }
+    )
+  ] });
+}
+function UITab({
+  node,
+  state,
+  widgetOptions
+}) {
+  const pathKey2 = node.path.join(".");
+  const uiEntry = getUiEntryAtPath(state.uiSchema, node.path) ?? {};
+  const currentWidget = typeof uiEntry["x-ui-widget"] === "string" ? uiEntry["x-ui-widget"] : null;
+  const currentOptions = uiEntry["x-ui-options"] ?? {};
+  const rootLayout = state.uiSchema["x-ui-layout"];
+  const inheritedLabelPlacement = rootLayout?.labelPlacement ?? "top";
+  const widgetChoices = useMemo6(
+    () => compatibleWidgets(node.property),
+    [node.property]
+  );
+  const optionsSchema = useMemo6(() => {
+    if (!currentWidget) return null;
+    const merged = { ...WIDGET_OPTION_DEFS, ...widgetOptions ?? {} };
+    const descriptors = merged[currentWidget];
+    return descriptors && descriptors.length ? optionDefsToSchema(descriptors) : null;
+  }, [currentWidget, widgetOptions]);
+  const setWidget = (value) => {
+    const next = { ...uiEntry };
+    if (value) next["x-ui-widget"] = value;
+    else delete next["x-ui-widget"];
+    state.setUiEntry(node.path, next);
+  };
+  const setOptions = (opts) => {
+    const next = { ...uiEntry };
+    const cleaned = Object.fromEntries(
+      Object.entries(opts).filter(([, v]) => v !== void 0 && v !== "")
+    );
+    if (Object.keys(cleaned).length) next["x-ui-options"] = cleaned;
+    else delete next["x-ui-options"];
+    state.setUiEntry(node.path, next);
+  };
+  const setLabelPlacement = (value) => {
+    const opts = { ...currentOptions };
+    if (value === "top" || value === "start") {
+      opts.labelPlacement = value;
+    } else {
+      delete opts.labelPlacement;
+    }
+    const next = { ...uiEntry };
+    if (Object.keys(opts).length) next["x-ui-options"] = opts;
+    else delete next["x-ui-options"];
+    state.setUiEntry(node.path, next);
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx8(
+      FormSelect3,
+      {
+        id: `${pathKey2}-widget`,
+        name: "widget",
+        label: "Widget",
+        value: currentWidget ?? "__auto__",
+        options: widgetChoices.map((c) => ({
+          value: c.value ?? "__auto__",
+          label: c.label
+        })),
+        onChange: (v) => setWidget(v === "__auto__" ? null : v ?? null),
+        disabled: state.readOnly,
+        clearable: false
+      }
+    ),
+    currentWidget && /* @__PURE__ */ jsx8(
+      OptionsEditor,
+      {
+        widget: `${pathKey2}:${currentWidget}`,
+        optionsSchema,
+        currentOptions,
+        readOnly: state.readOnly,
+        onChange: setOptions
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      PresentationEditor,
+      {
+        fieldName: pathKey2,
+        uiEntry,
+        readOnly: state.readOnly,
+        onChange: (entry) => state.setUiEntry(node.path, entry)
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      FormSelect3,
+      {
+        id: `${pathKey2}-labelPlacement`,
+        name: "labelPlacement",
+        label: "Label placement",
+        value: currentOptions.labelPlacement ?? "__inherit__",
+        options: [
+          {
+            value: "__inherit__",
+            label: `Inherit (${inheritedLabelPlacement === "start" ? "inline" : "above"})`
+          },
+          { value: "top", label: "Above" },
+          { value: "start", label: "Inline (start)" }
+        ],
+        onChange: (v) => setLabelPlacement(v ?? "__inherit__"),
+        disabled: state.readOnly,
+        clearable: false
+      }
+    )
+  ] });
+}
+
+// src/inspector/EnumEditor.tsx
+import { useEffect as useEffect3, useState as useState6 } from "react";
+import { Input as Input3, IconButton as IconButton3, Button as Button4 } from "@petrarca/sonnet-ui";
+import { Plus as Plus3, Trash2 as Trash23 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function EnumEditor({
+  node,
+  state
+}) {
+  const [rows, setRows] = useState6(
+    () => readEnumChoices(node.property, getUiEntryAtPath(state.uiSchema, node.path))
+  );
+  useEffect3(() => {
+    setRows(
+      readEnumChoices(
+        node.property,
+        getUiEntryAtPath(state.uiSchema, node.path)
+      )
+    );
+  }, [node.path.join(".")]);
+  const canEditLabels = true;
+  const commit = (next) => {
+    setRows(next);
+    state.setEnum(node.path, next);
+  };
+  const updateRow = (i, patch) => {
+    commit(rows.map((r, idx) => idx === i ? { ...r, ...patch } : r));
+  };
+  const removeRow = (i) => commit(rows.filter((_, idx) => idx !== i));
+  const addRow = () => setRows([...rows, { value: "", label: "" }]);
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium", children: "Allowed values" }),
+      /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: "Define a fixed set of choices. Leave empty for free input." })
+    ] }),
+    rows.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: "No choices yet." }) : /* @__PURE__ */ jsxs7("div", { className: "space-y-2", children: [
+      canEditLabels && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-1", children: [
+        /* @__PURE__ */ jsx9("span", { className: "heading-meta flex-1", children: "Value" }),
+        /* @__PURE__ */ jsx9("span", { className: "heading-meta flex-1", children: "Label (optional)" }),
+        /* @__PURE__ */ jsx9("span", { className: "w-7" })
+      ] }),
+      rows.map((row, i) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9(
+          Input3,
+          {
+            value: row.value,
+            onChange: (e) => updateRow(i, { value: e.target.value }),
+            placeholder: "value",
+            disabled: state.readOnly,
+            className: "h-8 text-sm flex-1"
+          }
+        ),
+        canEditLabels && /* @__PURE__ */ jsx9(
+          Input3,
+          {
+            value: row.label ?? "",
+            onChange: (e) => updateRow(i, { label: e.target.value }),
+            placeholder: row.value || "label",
+            disabled: state.readOnly,
+            className: "h-8 text-sm flex-1"
+          }
+        ),
+        !state.readOnly && /* @__PURE__ */ jsx9(
+          IconButton3,
+          {
+            label: "Remove value",
+            tone: "destructive",
+            onClick: () => removeRow(i),
+            children: /* @__PURE__ */ jsx9(Trash23, {})
+          }
+        )
+      ] }, i))
+    ] }),
+    !state.readOnly && /* @__PURE__ */ jsxs7(
+      Button4,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "gap-1.5",
+        onClick: addRow,
+        children: [
+          /* @__PURE__ */ jsx9(Plus3, { className: "h-4 w-4" }),
+          "Add value"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/inspector/TableHintsTab.tsx
+import { useMemo as useMemo7 } from "react";
+import { CELL_RENDERERS } from "@petrarca/sonnet-ui";
+import { JsonEditor as JsonEditor4 } from "@petrarca/sonnet-ui/json-editor";
+import { FormSelect as FormSelect4, JsonSchemaFormRenderer as JsonSchemaFormRenderer6 } from "@petrarca/sonnet-forms";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var CELL_NAMES = Object.keys(CELL_RENDERERS);
+var COLUMN_META_SCHEMA = {
+  title: "",
+  type: "object",
+  properties: {
+    hidden: { type: "boolean", title: "Hide column" },
+    order: { type: "integer", title: "Column order" },
+    width: { type: "integer", title: "Width (px)", minimum: 0 },
+    minWidth: { type: "integer", title: "Min width (px)", minimum: 0 }
+  }
+};
+function TableHintsTab({
+  node,
+  state
+}) {
+  const hints = readTableHints(node.property);
+  const cellOptions = useMemo7(
+    () => JSON.stringify(hints.cellOptions ?? {}, null, 2),
+    [hints.cellOptions]
+  );
+  const commit = (patch) => state.setTableHints(node.path, { ...hints, ...patch });
+  const columnValues = {
+    hidden: hints.column?.hidden,
+    order: hints.column?.order,
+    width: hints.column?.width,
+    minWidth: hints.column?.minWidth
+  };
+  const onColumnChange = (data) => {
+    const v = data;
+    const column = {};
+    if (typeof v.hidden === "boolean") column.hidden = v.hidden;
+    if (typeof v.order === "number" && !Number.isNaN(v.order))
+      column.order = v.order;
+    if (typeof v.width === "number" && !Number.isNaN(v.width))
+      column.width = v.width;
+    if (typeof v.minWidth === "number" && !Number.isNaN(v.minWidth))
+      column.minWidth = v.minWidth;
+    commit({ column });
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx10(
+      FormSelect4,
+      {
+        id: `${node.key}-cell`,
+        name: "cell",
+        label: "Cell renderer",
+        value: hints.cell ?? "__auto__",
+        options: [
+          { value: "__auto__", label: "Auto (infer from type)" },
+          ...CELL_NAMES.map((n) => ({ value: n, label: n }))
+        ],
+        onChange: (v) => commit({ cell: !v || v === "__auto__" ? void 0 : v }),
+        disabled: state.readOnly,
+        clearable: false
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx10("p", { className: "heading-meta mb-2", children: "Column" }),
+      /* @__PURE__ */ jsx10(
+        JsonSchemaFormRenderer6,
+        {
+          schema: COLUMN_META_SCHEMA,
+          data: columnValues,
+          onChange: onColumnChange,
+          showActions: false,
+          showExtraProperties: false,
+          readOnly: state.readOnly
+        },
+        node.path.join(".")
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx10("p", { className: "heading-meta mb-2", children: "Cell options (JSON)" }),
+      /* @__PURE__ */ jsx10(
+        JsonEditor4,
+        {
+          value: cellOptions,
+          editablePaths: state.readOnly ? [] : ["/"],
+          height: "160px",
+          className: "rounded-md border overflow-hidden",
+          onChange: (text) => {
+            try {
+              commit({
+                cellOptions: JSON.parse(text)
+              });
+            } catch {
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/inspector/Inspector.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var ENUM_CAPABLE_TYPES = /* @__PURE__ */ new Set(["string", "number", "integer"]);
+function KeyField({
+  fieldKey,
+  onRename,
+  readOnly
+}) {
+  const [editing, setEditing] = useState7(false);
+  const [value, setValue] = useState7(fieldKey);
+  const ref = useRef4(null);
+  useEffect4(() => {
+    setValue(fieldKey);
+    setEditing(false);
+  }, [fieldKey]);
+  useEffect4(() => {
+    if (editing) {
+      ref.current?.focus();
+      ref.current?.select();
+    }
+  }, [editing]);
+  const commit = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== fieldKey) onRename(trimmed);
+    setEditing(false);
+  };
+  const cancel = () => {
+    setValue(fieldKey);
+    setEditing(false);
+  };
+  if (!editing) {
+    return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx11("span", { className: "text-sm font-semibold truncate", children: fieldKey }),
+      !readOnly && /* @__PURE__ */ jsx11(IconButton4, { label: "Rename property", onClick: () => setEditing(true), children: /* @__PURE__ */ jsx11(Pencil, {}) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx11(
+      Input4,
+      {
+        ref,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            cancel();
+          }
+        },
+        className: "h-7 text-sm font-medium"
+      }
+    ),
+    /* @__PURE__ */ jsx11(IconButton4, { label: "Confirm rename", onClick: commit, children: /* @__PURE__ */ jsx11(Check2, {}) }),
+    /* @__PURE__ */ jsx11(IconButton4, { label: "Cancel rename", onClick: cancel, children: /* @__PURE__ */ jsx11(X, {}) })
+  ] });
+}
+function findNode(nodes, path) {
+  for (const node of nodes) {
+    if (samePath(node.path, path)) return node;
+    const inChild = findNode(node.children, path);
+    if (inChild) return inChild;
+  }
+  return void 0;
+}
+function Inspector({
+  state,
+  widgetOptions
+}) {
+  const tree = useMemo8(() => buildPropertyTree(state.schema), [state.schema]);
+  const node = state.selection ? findNode(tree, state.selection) : void 0;
+  if (!node) {
+    return /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: "Select a property to edit." });
+  }
+  const enumCapable = ENUM_CAPABLE_TYPES.has(node.property.type ?? "");
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsxs9("div", { className: "mb-3 space-y-1", children: [
+      /* @__PURE__ */ jsx11(
+        KeyField,
+        {
+          fieldKey: node.key,
+          readOnly: state.readOnly,
+          onRename: (next) => state.renameProperty(node.path, next)
+        },
+        node.path.join(".")
+      ),
+      /* @__PURE__ */ jsx11("p", { className: "font-mono text-xs text-muted-foreground", children: node.typeLabel })
+    ] }),
+    /* @__PURE__ */ jsxs9(Tabs2, { defaultValue: "data", children: [
+      /* @__PURE__ */ jsxs9(TabsList2, { className: "mb-3", children: [
+        /* @__PURE__ */ jsx11(TabsTrigger2, { value: "data", children: "Data" }),
+        enumCapable && /* @__PURE__ */ jsx11(TabsTrigger2, { value: "enum", children: "Enum" }),
+        /* @__PURE__ */ jsx11(TabsTrigger2, { value: "ui", children: "UI" }),
+        /* @__PURE__ */ jsx11(TabsTrigger2, { value: "table", children: "Table" })
+      ] }),
+      /* @__PURE__ */ jsx11(TabsContent2, { value: "data", children: /* @__PURE__ */ jsx11(DataTab, { node, state }) }),
+      enumCapable && /* @__PURE__ */ jsx11(TabsContent2, { value: "enum", children: /* @__PURE__ */ jsx11(EnumEditor, { node, state }) }),
+      /* @__PURE__ */ jsx11(TabsContent2, { value: "ui", children: /* @__PURE__ */ jsx11(UITab, { node, state, widgetOptions }) }),
+      /* @__PURE__ */ jsx11(TabsContent2, { value: "table", children: /* @__PURE__ */ jsx11(TableHintsTab, { node, state }) })
+    ] }, `${node.path.join(".")}:${enumCapable}`)
+  ] });
+}
+
+// src/SchemaDesigner.tsx
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function SchemaDesigner(props) {
+  const [capabilities, setCapabilities] = useState8(props.capabilities);
+  useEffect5(() => {
+    setCapabilities(props.capabilities);
+  }, [props.capabilities]);
+  const state = useDesignerState({ ...props, capabilities });
+  const {
+    panelWidth: inspectorWidth,
+    handlePointerDown: startInspectorResize,
+    handleDoubleClick: resetInspectorWidth,
+    separatorProps: inspectorSepProps
+  } = useResizablePanel({
+    defaultWidth: 360,
+    minWidth: 300,
+    maxWidth: 640,
+    direction: "left-edge"
+  });
+  const {
+    panelWidth: treeWidth,
+    handlePointerDown: startTreeResize,
+    handleDoubleClick: resetTreeWidth,
+    separatorProps: treeSepProps
+  } = useResizablePanel({
+    defaultWidth: 288,
+    minWidth: 220,
+    maxWidth: 520,
+    direction: "right-edge"
+  });
+  const [inspectorCollapsed, setInspectorCollapsed] = useState8(false);
+  const [treeCollapsed, setTreeCollapsed] = useState8(false);
+  const [settingsOpen, setSettingsOpen] = useState8(false);
+  return /* @__PURE__ */ jsxs10("div", { className: "flex w-full h-full overflow-hidden border rounded-lg bg-background", children: [
+    !treeCollapsed && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          style: state.capabilities.showPreview ? { width: treeWidth } : void 0,
+          className: state.capabilities.showPreview ? "shrink-0 overflow-auto p-3" : "flex-1 min-w-0 overflow-auto p-3",
+          children: /* @__PURE__ */ jsx12(
+            PropertyTree,
+            {
+              state,
+              onCollapse: () => setTreeCollapsed(true)
+            }
+          )
+        }
+      ),
+      state.capabilities.showPreview && /* @__PURE__ */ jsx12(
+        ResizeHandle,
+        {
+          orientation: "vertical",
+          ...treeSepProps,
+          onPointerDown: startTreeResize,
+          onDoubleClick: resetTreeWidth
+        }
+      )
+    ] }),
+    treeCollapsed && /* @__PURE__ */ jsx12("div", { className: "shrink-0 border-r flex flex-col items-center gap-1 p-1", children: /* @__PURE__ */ jsx12(
+      IconButton5,
+      {
+        label: "Expand properties",
+        onClick: () => setTreeCollapsed(false),
+        children: /* @__PURE__ */ jsx12(PanelLeftOpen, {})
+      }
+    ) }),
+    state.capabilities.showPreview && /* @__PURE__ */ jsx12("div", { className: "flex-1 min-w-0 overflow-hidden p-4 flex flex-col min-h-0", children: /* @__PURE__ */ jsx12(
+      PreviewPane,
+      {
+        state,
+        capabilities,
+        onCapabilitiesChange: setCapabilities
+      }
+    ) }),
+    !inspectorCollapsed && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      /* @__PURE__ */ jsx12(
+        ResizeHandle,
+        {
+          orientation: "vertical",
+          ...inspectorSepProps,
+          onPointerDown: startInspectorResize,
+          onDoubleClick: resetInspectorWidth
+        }
+      ),
+      /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          style: { width: inspectorWidth },
+          className: "shrink-0 border-l overflow-auto p-4 bg-card",
+          children: [
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 mb-2", children: [
+              /* @__PURE__ */ jsx12("p", { className: "heading-meta", children: "Inspector" }),
+              /* @__PURE__ */ jsxs10("span", { className: "ml-auto flex gap-0.5", children: [
+                /* @__PURE__ */ jsx12(
+                  IconButton5,
+                  {
+                    label: "Form settings",
+                    onClick: () => setSettingsOpen(true),
+                    children: /* @__PURE__ */ jsx12(Settings, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  IconButton5,
+                  {
+                    label: "Collapse inspector",
+                    onClick: () => setInspectorCollapsed(true),
+                    children: /* @__PURE__ */ jsx12(PanelRightClose, {})
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx12(Inspector, { state, widgetOptions: props.widgetOptions })
+          ]
+        }
+      )
+    ] }),
+    inspectorCollapsed && /* @__PURE__ */ jsxs10("div", { className: "shrink-0 border-l flex flex-col items-center gap-1 p-1", children: [
+      /* @__PURE__ */ jsx12(
+        IconButton5,
+        {
+          label: "Expand inspector",
+          onClick: () => setInspectorCollapsed(false),
+          children: /* @__PURE__ */ jsx12(PanelRightOpen, {})
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        IconButton5,
+        {
+          label: "Form settings",
+          onClick: () => setSettingsOpen(true),
+          children: /* @__PURE__ */ jsx12(Settings, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx12(
+      FormSettingsSheet,
+      {
+        open: settingsOpen,
+        onOpenChange: setSettingsOpen,
+        state
+      }
+    )
+  ] });
+}
+export {
+  DataTab,
+  EnumEditor,
+  FormLayoutDesigner,
+  FormSettingsSheet,
+  Inspector,
+  PreviewPane,
+  PropertyTree,
+  SchemaDesigner,
+  TableHintsTab,
+  TablePreview,
+  UITab,
+  addProperty,
+  buildPropertyTree,
+  capabilitiesSchema,
+  changePropertyType,
+  childContainer,
+  childrenOf,
+  compatibleWidgets,
+  deleteProperty,
+  embedUiSchema,
+  getProperty,
+  getScopedLayout,
+  getUiEntryAtPath,
+  isContainer,
+  layoutScopes,
+  moveProperty,
+  newProperty,
+  orderedKeys,
+  pathKey,
+  propertyKind,
+  readEnumChoices,
+  readTableHints,
+  renameProperty,
+  resolveCapabilities,
+  samePath,
+  sampleRows,
+  setEnum,
+  setGlobalOptions,
+  setPropertyLayout,
+  setRequired,
+  setRootLayout,
+  setRootLayoutRows,
+  setScopedLayoutOptions,
+  setScopedLayoutRows,
+  setTableHints,
+  setUiEntry,
+  updateProperty,
+  useDesignerState,
+  validateCapabilities
+};
+//# sourceMappingURL=index.js.map