@petrarca/sonnet-schema-designer 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,42 +1,258 @@
 // src/model/paths.ts
+import {
+  isOneOf,
+  getDiscriminator,
+  getBranchLabel
+} from "@petrarca/sonnet-core/schema";
+function isReservedKey(key) {
+  return /^#(branch|condition|def|slot):/.test(key);
+}
+function prop(key) {
+  return { kind: "prop", key };
+}
+function branch(index) {
+  return { kind: "branch", index };
+}
+function condition(index, combinator = "allOf") {
+  return { kind: "condition", combinator, index };
+}
+function slot(name) {
+  return { kind: "slot", slot: name };
+}
+function def(name) {
+  return { kind: "def", name };
+}
+var SEP = "/";
+function escapeToken(raw) {
+  return raw.replace(/\\/g, "\\\\").replace(/\//g, "\\/");
+}
+function unescapeToken(raw) {
+  return raw.replace(/\\\//g, "/").replace(/\\\\/g, "\\");
+}
+function encodeSegment(seg) {
+  switch (seg.kind) {
+    case "prop":
+      return escapeToken(seg.key);
+    case "branch":
+      return `#branch:${seg.index}`;
+    case "condition":
+      return `#condition:${seg.combinator}:${seg.index}`;
+    case "slot":
+      return `#slot:${seg.slot}`;
+    case "def":
+      return `#def:${escapeToken(seg.name)}`;
+  }
+}
+var VALID_SLOTS = ["then", "else", "items"];
+function safeIndex(raw) {
+  const n = Number(raw);
+  return Number.isInteger(n) && n >= 0 ? n : 0;
+}
+function decodeCondition(rest) {
+  const sep = rest.indexOf(":");
+  const combinatorRaw = sep >= 0 ? rest.slice(0, sep) : "allOf";
+  const combinator = combinatorRaw === "anyOf" ? "anyOf" : "allOf";
+  const index = safeIndex(sep >= 0 ? rest.slice(sep + 1) : rest);
+  return { kind: "condition", combinator, index };
+}
+function decodeSegment(token) {
+  if (token.startsWith("#branch:")) {
+    return { kind: "branch", index: safeIndex(token.slice("#branch:".length)) };
+  }
+  if (token.startsWith("#condition:")) {
+    return decodeCondition(token.slice("#condition:".length));
+  }
+  if (token.startsWith("#slot:")) {
+    const s = token.slice("#slot:".length);
+    return { kind: "slot", slot: VALID_SLOTS.includes(s) ? s : "items" };
+  }
+  if (token.startsWith("#def:")) {
+    return { kind: "def", name: unescapeToken(token.slice("#def:".length)) };
+  }
+  return { kind: "prop", key: unescapeToken(token) };
+}
+function splitTokens(key) {
+  const tokens = [];
+  let current = "";
+  for (let i = 0; i < key.length; i++) {
+    const ch = key[i];
+    if (ch === "\\" && i + 1 < key.length) {
+      current += ch + key[i + 1];
+      i++;
+    } else if (ch === SEP) {
+      tokens.push(current);
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+  tokens.push(current);
+  return tokens;
+}
 function pathKey(path) {
-  return path.join(".");
+  return path.map(encodeSegment).join(SEP);
+}
+function parsePathKey(key) {
+  if (key === "") return [];
+  return splitTokens(key).map(decodeSegment);
+}
+function segmentIdentity(seg) {
+  switch (seg.kind) {
+    case "prop":
+      return `prop:${seg.key}`;
+    case "branch":
+      return `branch:${seg.index}`;
+    case "condition":
+      return `condition:${seg.combinator}:${seg.index}`;
+    case "slot":
+      return `slot:${seg.slot}`;
+    case "def":
+      return `def:${seg.name}`;
+  }
+}
+function sameSegment(a, b) {
+  return segmentIdentity(a) === segmentIdentity(b);
 }
 function samePath(a, b) {
   if (a === null || b === null) return a === b;
-  return a.length === b.length && a.every((seg, i) => seg === b[i]);
+  return a.length === b.length && a.every((seg, i) => sameSegment(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;
+function childContainer(prop2) {
+  const typeIsObjectLike = prop2.type === "object" || prop2.type === void 0;
+  if (typeIsObjectLike && prop2.properties && !prop2.oneOf)
+    return prop2.properties;
+  if (prop2.type === "array" && prop2.items?.type === "object") {
+    return prop2.items.properties;
   }
   return void 0;
 }
+function isConditionalMember(member) {
+  return !!member.if;
+}
+function membersOfCombinator(property, combinator) {
+  const arr = property[combinator];
+  if (!Array.isArray(arr)) return [];
+  return arr.map((member, index) => ({ member, combinator, index })).filter(({ member }) => isConditionalMember(member));
+}
+function conditionalMembers(property) {
+  return [
+    ...membersOfCombinator(property, "allOf"),
+    ...membersOfCombinator(property, "anyOf")
+  ];
+}
+function conditionLabel(member) {
+  const field = Object.keys(member.if?.properties ?? {})[0] ?? member.if?.required?.[0];
+  return field ? `if ${field}` : "if ...";
+}
+function conditionalSlots(member) {
+  const slots = [];
+  const add = (name, sub) => {
+    if (sub) {
+      slots.push({
+        segment: slot(name),
+        label: name,
+        property: sub,
+        kind: "conditional",
+        removable: false,
+        reorderable: false
+      });
+    }
+  };
+  add("then", member.then);
+  add("else", member.else);
+  return slots;
+}
+function definitionsOf(property) {
+  return property.$defs ?? property.definitions;
+}
+function definitionSlots(property) {
+  const defs = definitionsOf(property);
+  if (!defs) return [];
+  return Object.keys(defs).map((name) => ({
+    segment: def(name),
+    label: name,
+    property: defs[name],
+    kind: "definition",
+    removable: true,
+    reorderable: false
+  }));
+}
+function childSlots(property) {
+  if (isConditionalMember(property)) return conditionalSlots(property);
+  if (isOneOf(property)) {
+    const discriminator = getDiscriminator(property);
+    return (property.oneOf ?? []).map((b, index) => ({
+      segment: branch(index),
+      label: getBranchLabel(b, discriminator, index),
+      property: b,
+      kind: "branch",
+      removable: true,
+      reorderable: true
+    }));
+  }
+  const container = childContainer(property);
+  const propertySlots = container ? Object.keys(container).map((key) => ({
+    segment: prop(key),
+    label: key,
+    property: container[key],
+    kind: "property",
+    removable: true,
+    reorderable: true
+  })) : [];
+  const conditionSlots = conditionalMembers(property).map(
+    ({ member, combinator, index }) => ({
+      segment: condition(index, combinator),
+      label: conditionLabel(member),
+      property: member,
+      kind: "conditional",
+      removable: true,
+      reorderable: false
+    })
+  );
+  return [...propertySlots, ...conditionSlots, ...definitionSlots(property)];
+}
+function stepInto(parent, seg) {
+  if (seg.kind === "prop") return childContainer(parent)?.[seg.key];
+  if (seg.kind === "branch") return parent.oneOf?.[seg.index];
+  if (seg.kind === "condition") return parent[seg.combinator]?.[seg.index];
+  if (seg.kind === "def") return definitionsOf(parent)?.[seg.name];
+  if (seg.slot === "items") return parent.items;
+  return parent[seg.slot];
+}
+function schemaAsRootProp(schema) {
+  return {
+    type: "object",
+    properties: schema.properties,
+    required: schema.required,
+    "x-ui-order": schema["x-ui-order"],
+    allOf: schema.allOf,
+    anyOf: schema.anyOf,
+    $defs: schema.$defs,
+    definitions: schema.definitions
+  };
+}
 function getProperty(schema, path) {
   if (path.length === 0) return void 0;
-  let container = schema.properties;
-  let prop;
+  const root = schemaAsRootProp(schema);
+  let current = root;
   for (const seg of path) {
-    if (!container) return void 0;
-    prop = container[seg];
-    if (!prop) return void 0;
-    container = childContainer(prop);
+    if (!current) return void 0;
+    current = stepInto(current, seg);
   }
-  return prop;
-}
-function isContainer(prop) {
-  return childContainer(prop) !== void 0;
+  return current;
 }
-function childrenOf(prop) {
-  return childContainer(prop) ?? {};
+function isContainer(prop2) {
+  return childSlots(prop2).length > 0 || childContainer(prop2) !== void 0;
 }
 
 // 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";
+import { isOneOf as isOneOf2 } from "@petrarca/sonnet-core/schema";
+function propertyKind(prop2) {
+  if (prop2.if) return "conditional";
+  if (isOneOf2(prop2)) return "oneOf";
+  if (prop2.type === "object" && prop2.properties) return "object";
+  if (prop2.type === "array") return "array";
+  if (Array.isArray(prop2.enum) && prop2.enum.length > 0) return "enum";
   return "scalar";
 }
 function arrayCardinality(min, max) {
@@ -44,12 +260,14 @@ function arrayCardinality(min, max) {
   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)}]`;
+function typeLabelOf(prop2) {
+  if (prop2.if) return "if/then/else";
+  if (isOneOf2(prop2)) return "oneOf";
+  if (prop2.type === "array") {
+    const itemType = prop2.items?.type ?? "any";
+    return `${itemType}[${arrayCardinality(prop2.minItems, prop2.maxItems)}]`;
   }
-  return prop.type ?? "any";
+  return prop2.type ?? "any";
 }
 function orderedKeys(properties, order) {
   const keys = Object.keys(properties);
@@ -58,53 +276,165 @@ function orderedKeys(properties, order) {
   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;
+function requiredOf(prop2) {
+  if (prop2.type === "object") return prop2.required;
+  if (prop2.type === "array") return prop2.items?.required;
+  return void 0;
+}
+function orderOf(prop2) {
+  if (prop2.type === "array") return prop2.items?.["x-ui-order"];
+  return prop2["x-ui-order"];
+}
+function nodeKind(slot2, prop2) {
+  if (slot2.kind === "branch") return "object";
+  if (slot2.segment.kind === "def") return "definition";
+  if (slot2.segment.kind === "slot") return "object";
+  return propertyKind(prop2);
+}
+function requiredForChildren(prop2, isSlot) {
+  return isSlot ? prop2.required : requiredOf(prop2);
+}
+function resolveRefTarget(prop2, resolve) {
+  if (!prop2.$ref || !resolve) return void 0;
+  const target = resolve(prop2.$ref);
+  if (!target) return void 0;
+  const { $ref: _drop, ...overrides } = prop2;
+  return { ...target, ...overrides };
+}
+function refShapeOf(slot2, prop2, resolve) {
+  const refTarget = resolveRefTarget(prop2, resolve);
+  if (refTarget) {
+    return {
+      kind: "reference",
+      typeLabel: refLabel(prop2.$ref),
+      reference: prop2.$ref,
+      container: refTarget,
+      childrenFromRef: true
+    };
+  }
+  if (prop2.type === "array" && prop2.items?.$ref) {
+    const itemTarget = resolveRefTarget(prop2.items, resolve);
+    if (itemTarget) {
+      return {
+        kind: "array",
+        typeLabel: arrayItemLabel(prop2.items.$ref, prop2),
+        reference: prop2.items.$ref,
+        container: itemTarget,
+        childrenFromRef: true
+      };
+    }
+  }
+  return {
+    kind: nodeKind(slot2, prop2),
+    typeLabel: typeLabelOf(prop2),
+    container: prop2,
+    childrenFromRef: false
+  };
+}
+function buildNode(slot2, parentPath, required, resolve, inRef) {
+  const path = [...parentPath, slot2.segment];
+  const prop2 = slot2.property;
+  const widget = typeof prop2["x-ui-widget"] === "string" ? prop2["x-ui-widget"] : void 0;
+  const ref = refShapeOf(slot2, prop2, resolve);
   const node = {
     path,
-    key,
-    property: prop,
-    kind: propertyKind(prop),
-    required: !!requiredKeys?.includes(key),
-    typeLabel: typeLabelOf(prop),
+    key: slot2.label,
+    property: prop2,
+    kind: ref.kind,
+    slotKind: slot2.kind,
+    required,
+    typeLabel: ref.typeLabel,
     widget,
+    reference: ref.reference,
+    readOnly: inRef || void 0,
     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)
+  if (isContainer(ref.container)) {
+    const isSlot = slot2.segment.kind === "slot";
+    const req = requiredForChildren(ref.container, isSlot);
+    const childrenInRef = inRef || ref.childrenFromRef;
+    node.children = orderedSlots(ref.container).map(
+      (child) => buildNode(
+        child,
+        path,
+        child.kind === "property" ? !!req?.includes(child.label) : false,
+        resolve,
+        childrenInRef
+      )
     );
   }
   return node;
 }
-function buildPropertyTree(schema) {
-  return orderedKeys(schema.properties, schema["x-ui-order"]).map(
-    (key) => buildNode(key, schema.properties[key], [], schema.required)
+function refName(ref) {
+  const local = ref.match(/^#\/(?:\$defs|definitions)\/(.+)$/);
+  return local ? local[1] : ref.split("/").pop() || ref;
+}
+function refLabel(ref) {
+  return `\u2192 ${refName(ref)}`;
+}
+function arrayItemLabel(ref, prop2) {
+  return `${refName(ref)}[${arrayCardinality(prop2.minItems, prop2.maxItems)}]`;
+}
+function orderedSlots(prop2) {
+  const slots = childSlots(prop2);
+  const propertySlots = slots.filter((s) => s.kind === "property");
+  const otherSlots = slots.filter((s) => s.kind !== "property");
+  const order = orderOf(prop2);
+  if (propertySlots.length === 0 || !order || order.length === 0) return slots;
+  const byLabel = new Map(propertySlots.map((s) => [s.label, s]));
+  const inOrder = order.filter((k) => byLabel.has(k)).map((k) => byLabel.get(k));
+  const rest = propertySlots.filter((s) => !order.includes(s.label));
+  return [...inOrder, ...rest, ...otherSlots];
+}
+function buildPropertyTree(schema, resolve) {
+  const effective = withInDocumentFallback(schema, resolve);
+  const rootProp = schemaAsRootProp(schema);
+  return orderedSlots(rootProp).map(
+    (slot2) => buildNode(
+      slot2,
+      [],
+      !!schema.required?.includes(slot2.label),
+      effective,
+      false
+    )
   );
 }
+function withInDocumentFallback(schema, resolve) {
+  const defs = schema.$defs ?? schema.definitions;
+  if (!defs) return resolve;
+  const local = (ref) => {
+    const m = ref.match(/^#\/(?:\$defs|definitions)\/(.+)$/);
+    return m ? defs[m[1]] : void 0;
+  };
+  return resolve ? (ref) => resolve(ref) ?? local(ref) : local;
+}
 function layoutScopes(schema) {
   const scopes = [{ path: [], label: "Form (root)" }];
-  const walk = (nodes) => {
+  const walk = (nodes, labelPrefix) => {
     for (const node of nodes) {
-      if (node.kind === "object" || node.kind === "array") {
+      const allProps = node.path.every((s) => s.kind === "prop");
+      if (allProps && (node.kind === "object" || node.kind === "array")) {
+        const labels = [...labelPrefix, node.key];
         const suffix = node.kind === "array" ? " (items)" : "";
         scopes.push({
           path: node.path,
-          label: node.path.join(" \u203A ") + suffix
+          label: labels.join(" \u203A ") + suffix
         });
-        walk(node.children);
+        walk(node.children, labels);
       }
     }
   };
-  walk(buildPropertyTree(schema));
+  walk(buildPropertyTree(schema), []);
   return scopes;
 }
 
 // src/model/mutate.ts
+function segKey(seg) {
+  return seg && seg.kind === "prop" ? seg.key : void 0;
+}
+function propKeys(path) {
+  return path.flatMap((s) => s.kind === "prop" ? [s.key] : []);
+}
 function clone(v) {
   return structuredClone(v);
 }
@@ -114,10 +444,22 @@ function newProperty(kind) {
       return { type: "object", properties: {} };
     case "array":
       return { type: "array", items: { type: "object", properties: {} } };
+    case "oneOf":
+      return {
+        type: "object",
+        discriminator: { propertyName: "kind" },
+        oneOf: [newBranch("option_1"), newBranch("option_2")]
+      };
     default:
       return { type: "string" };
   }
 }
+function newBranch(value) {
+  return {
+    title: value,
+    properties: { kind: { const: value } }
+  };
+}
 function resolveContainer(schema, parentPath) {
   if (parentPath.length === 0) {
     return {
@@ -136,9 +478,11 @@ function resolveContainer(schema, parentPath) {
   }
   const owner = getProperty(schema, parentPath);
   if (!owner) return null;
-  const properties = childContainer(owner);
-  if (!properties) return null;
+  if (owner.oneOf) return null;
   const target = owner.type === "array" ? owner.items : owner;
+  if (!target) return null;
+  if (!target.properties) target.properties = {};
+  const properties = target.properties;
   return {
     properties,
     getOrder: () => target["x-ui-order"],
@@ -169,14 +513,135 @@ function addProperty(model, parentPath, kind) {
   if (order) container.setOrder([...order, key]);
   return {
     model: { schema, uiSchema: model.uiSchema },
-    path: [...parentPath, key]
+    path: [...parentPath, prop(key)]
+  };
+}
+function uniqueBranchValue(oneOf) {
+  const existing = new Set(oneOf.map((b) => b.title).filter(Boolean));
+  let i = 1;
+  while (existing.has(`option_${i}`)) i++;
+  return `option_${i}`;
+}
+function addBranch(model, path) {
+  const schema = clone(model.schema);
+  const owner = getProperty(schema, path);
+  if (!owner || !owner.oneOf) return { model, path };
+  const index = owner.oneOf.length;
+  owner.oneOf.push(newBranch(uniqueBranchValue(owner.oneOf)));
+  return {
+    model: { schema, uiSchema: model.uiSchema },
+    path: [...path, branch(index)]
+  };
+}
+function removeBranch(model, path) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "branch") return model;
+  const schema = clone(model.schema);
+  const owner = getProperty(schema, path.slice(0, -1));
+  if (!owner?.oneOf) return model;
+  owner.oneOf.splice(last.index, 1);
+  return { schema, uiSchema: model.uiSchema };
+}
+function moveBranch(model, path, direction) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "branch") return model;
+  const schema = clone(model.schema);
+  const owner = getProperty(schema, path.slice(0, -1));
+  if (!owner?.oneOf) return model;
+  const from = last.index;
+  const to = from + direction;
+  if (to < 0 || to >= owner.oneOf.length) return model;
+  const [moved] = owner.oneOf.splice(from, 1);
+  owner.oneOf.splice(to, 0, moved);
+  return { schema, uiSchema: model.uiSchema };
+}
+function newCondition() {
+  return { if: { properties: {} }, then: { properties: {} } };
+}
+function addConditional(model, objectPath, combinator = "allOf") {
+  const schema = clone(model.schema);
+  const owner = conditionalOwner(schema, objectPath);
+  if (!owner) return { model, path: objectPath };
+  if (!Array.isArray(owner[combinator])) owner[combinator] = [];
+  const arr = owner[combinator];
+  const index = arr.length;
+  arr.push(newCondition());
+  return {
+    model: { schema, uiSchema: model.uiSchema },
+    path: [...objectPath, condition(index, combinator)]
   };
 }
+function conditionalOwner(schema, objectPath) {
+  if (objectPath.length === 0) return schema;
+  const owner = getProperty(schema, objectPath);
+  if (!owner) return null;
+  const objectLike = owner.type === "object" || owner.type === void 0;
+  if (!objectLike || owner.oneOf) return null;
+  return owner;
+}
+function removeConditional(model, path) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "condition") return model;
+  const schema = clone(model.schema);
+  const owner = conditionalOwner(schema, path.slice(0, -1));
+  const arr = owner?.[last.combinator];
+  if (!arr) return model;
+  arr.splice(last.index, 1);
+  if (arr.length === 0) delete owner[last.combinator];
+  return { schema, uiSchema: model.uiSchema };
+}
+function setCondition(model, path, ifSchema) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "condition") return model;
+  const schema = clone(model.schema);
+  const member = getProperty(schema, path);
+  if (!member) return model;
+  member.if = ifSchema;
+  if (!member.then) member.then = { properties: {} };
+  return { schema, uiSchema: model.uiSchema };
+}
+function addElse(model, path) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "condition") return model;
+  const schema = clone(model.schema);
+  const member = getProperty(schema, path);
+  if (!member || member.else) return model;
+  member.else = { properties: {} };
+  return { schema, uiSchema: model.uiSchema };
+}
+function removeElse(model, path) {
+  const last = path[path.length - 1];
+  if (!last || last.kind !== "condition") return model;
+  const schema = clone(model.schema);
+  const member = getProperty(schema, path);
+  if (!member || !member.else) return model;
+  delete member.else;
+  return { schema, uiSchema: model.uiSchema };
+}
+function otherCombinator(c) {
+  return c === "allOf" ? "anyOf" : "allOf";
+}
+function setConditionalBehavior(model, objectPath, next) {
+  const schema = clone(model.schema);
+  const owner = conditionalOwner(schema, objectPath);
+  if (!owner) return model;
+  const from = otherCombinator(next);
+  const source = owner[from];
+  if (!Array.isArray(source)) return model;
+  const conditionals = source.filter((m) => !!m.if);
+  if (conditionals.length === 0) return model;
+  const rest = source.filter((m) => !m.if);
+  if (rest.length > 0) owner[from] = rest;
+  else delete owner[from];
+  owner[next] = [...owner[next] ?? [], ...conditionals];
+  return { schema, uiSchema: model.uiSchema };
+}
 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 key = segKey(path[path.length - 1]);
+  if (key === void 0) return model;
   const container = resolveContainer(schema, parentPath);
   if (!container || !(key in container.properties)) return model;
   delete container.properties[key];
@@ -206,32 +671,38 @@ function renameUiEntry(uiSchema, parentPath, prevKey, nextKey) {
   delete next[prevKey];
   return next;
 }
+function updateContainerRefs(container, 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));
+}
 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 prevKey = segKey(path[path.length - 1]);
+  if (prevKey === void 0) return { model, path };
+  if (nextKey === prevKey || !nextKey || isReservedKey(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));
+  updateContainerRefs(container, prevKey, nextKey);
   const uiSchema = renameUiEntry(model.uiSchema, parentPath, prevKey, nextKey);
   return {
     model: { schema, uiSchema },
-    path: [...parentPath, nextKey]
+    path: [...parentPath, prop(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 key = segKey(path[path.length - 1]);
+  if (key === void 0) return model;
   const container = resolveContainer(schema, parentPath);
   if (!container) return model;
   const keys = Object.keys(container.properties);
@@ -249,7 +720,8 @@ 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 key = segKey(path[path.length - 1]);
+  if (key === void 0) return model;
   const container = resolveContainer(schema, parentPath);
   if (!container) return model;
   const current = new Set(container.getRequired() ?? []);
@@ -261,32 +733,159 @@ function setRequired(model, path, required) {
 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);
+  const prop2 = getProperty(schema, path);
+  if (!prop2) return model;
+  for (const [k, v] of Object.entries(patch)) {
+    if (v === void 0) delete prop2[k];
+    else prop2[k] = v;
+  }
+  return { schema, uiSchema: model.uiSchema };
+}
+function currentTypeChoice(prop2) {
+  return prop2.oneOf ? "oneOf" : prop2.type ?? "string";
+}
+function changePropertyType(model, path, next) {
+  if (path.length === 0 || !next) return model;
+  const schema = clone(model.schema);
+  const prop2 = getProperty(schema, path);
+  if (!prop2 || !prop2.$ref && currentTypeChoice(prop2) === next) return model;
+  delete prop2.properties;
+  delete prop2.items;
+  delete prop2.enum;
+  delete prop2.oneOf;
+  delete prop2.discriminator;
+  delete prop2.const;
+  delete prop2.$ref;
+  if (next !== "object") {
+    delete prop2.allOf;
+    delete prop2.anyOf;
+  }
+  delete prop2.minLength;
+  delete prop2.maxLength;
+  delete prop2.pattern;
+  delete prop2.format;
+  delete prop2.minimum;
+  delete prop2.maximum;
+  delete prop2.minItems;
+  delete prop2.maxItems;
+  if (next === "oneOf") {
+    const seed = newProperty("oneOf");
+    prop2.type = seed.type;
+    prop2.discriminator = seed.discriminator;
+    prop2.oneOf = seed.oneOf;
+  } else {
+    prop2.type = next;
+    if (next === "object") prop2.properties = {};
+    if (next === "array") prop2.items = { type: "string" };
+  }
   return { schema, uiSchema: model.uiSchema };
 }
-function changePropertyType(model, path, nextType) {
-  if (path.length === 0 || !nextType) return model;
+function defPointer(name) {
+  return `#/$defs/${name}`;
+}
+function setReference(model, path, name) {
+  if (path.length === 0 || !name) return model;
+  const schema = clone(model.schema);
+  const prop2 = getProperty(schema, path);
+  if (!prop2) return model;
+  const defs = schema.$defs ?? schema.definitions;
+  if (!defs || !(name in defs)) return model;
+  if (prop2.type === "array") {
+    prop2.items = { $ref: defPointer(name) };
+    return { schema, uiSchema: model.uiSchema };
+  }
+  makeReference(prop2, name);
+  return { schema, uiSchema: model.uiSchema };
+}
+function makeReference(prop2, name) {
+  delete prop2.properties;
+  delete prop2.items;
+  delete prop2.enum;
+  delete prop2.oneOf;
+  delete prop2.discriminator;
+  delete prop2.const;
+  delete prop2.allOf;
+  delete prop2.anyOf;
+  delete prop2.type;
+  delete prop2.minLength;
+  delete prop2.maxLength;
+  delete prop2.pattern;
+  delete prop2.format;
+  delete prop2.minimum;
+  delete prop2.maximum;
+  delete prop2.minItems;
+  delete prop2.maxItems;
+  prop2.$ref = defPointer(name);
+}
+function walkSchemaNodes(node, visitor, parentKey) {
+  if (Array.isArray(node)) {
+    for (const item of node) walkSchemaNodes(item, visitor, parentKey);
+    return;
+  }
+  if (!node || typeof node !== "object") return;
+  const obj = node;
+  visitor(obj, parentKey);
+  for (const key of Object.keys(obj)) {
+    walkSchemaNodes(obj[key], visitor, key);
+  }
+}
+function rewriteRefs(node, from, to) {
+  walkSchemaNodes(node, (obj, key) => {
+    if (key !== "$ref" && obj.$ref === from) obj.$ref = to;
+  });
+}
+function countRefUsages(schema, name) {
+  let count = 0;
+  const pointers = /* @__PURE__ */ new Set([`#/$defs/${name}`, `#/definitions/${name}`]);
+  walkSchemaNodes(schema, (obj) => {
+    if (typeof obj.$ref === "string" && pointers.has(obj.$ref)) count++;
+  });
+  return count;
+}
+function addDefinition(model, name) {
+  const schema = clone(model.schema);
+  if (!schema.$defs) schema.$defs = {};
+  const key = uniqueKey(name ?? "Definition", schema.$defs);
+  schema.$defs[key] = { type: "object", properties: {} };
+  return {
+    model: { schema, uiSchema: model.uiSchema },
+    path: [def(key)]
+  };
+}
+function renameDefinition(model, oldName, newName) {
+  const path = [def(oldName)];
+  if (!newName || newName === oldName || isReservedKey(newName))
+    return { model, path };
+  const schema = clone(model.schema);
+  const defs = schema.$defs ?? schema.definitions;
+  if (!defs || !(oldName in defs) || newName in defs) return { model, path };
+  renameKeyInPlace(defs, oldName, newName);
+  rewriteRefs(schema, `#/$defs/${oldName}`, `#/$defs/${newName}`);
+  rewriteRefs(schema, `#/definitions/${oldName}`, `#/$defs/${newName}`);
+  return {
+    model: { schema, uiSchema: model.uiSchema },
+    path: [def(newName)]
+  };
+}
+function removeDefinition(model, name) {
   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" };
+  const inDefs = schema.$defs && name in schema.$defs;
+  const inDefs7 = schema.definitions && name in schema.definitions;
+  if (!inDefs && !inDefs7) return model;
+  if (countRefUsages(schema, name) > 0) return model;
+  if (inDefs) {
+    delete schema.$defs[name];
+    if (Object.keys(schema.$defs).length === 0) delete schema.$defs;
+  } else {
+    delete schema.definitions[name];
+    if (Object.keys(schema.definitions).length === 0)
+      delete schema.definitions;
+  }
   return { schema, uiSchema: model.uiSchema };
 }
+function definitionUsageCount(schema, name) {
+  return countRefUsages(schema, name);
+}
 function normalizeChoices(choices) {
   const seen = /* @__PURE__ */ new Set();
   const clean = [];
@@ -314,22 +913,22 @@ function withEnumNames(entry, choices) {
 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 prop2 = getProperty(schema, path);
+  if (!prop2) return model;
   const clean = normalizeChoices(choices);
-  if (clean.length === 0) delete prop.enum;
-  else prop.enum = clean.map((c) => c.value);
+  if (clean.length === 0) delete prop2.enum;
+  else prop2.enum = clean.map((c) => c.value);
   const nextEntry = withEnumNames(
     getUiEntryAtPath(model.uiSchema, path),
     clean
   );
-  const uiSchema = setEntryIn(model.uiSchema, path, nextEntry);
+  const uiSchema = setEntryIn(model.uiSchema, propKeys(path), nextEntry);
   return { schema, uiSchema };
 }
-function readEnumChoices(prop, uiEntry) {
-  if (!Array.isArray(prop.enum)) return [];
+function readEnumChoices(prop2, uiEntry) {
+  if (!Array.isArray(prop2.enum)) return [];
   const enumNames = uiEntry?.["x-ui-options"]?.enumNames ?? {};
-  return prop.enum.map((v) => {
+  return prop2.enum.map((v) => {
     const value = String(v);
     return { value, label: enumNames[value] };
   });
@@ -337,40 +936,41 @@ function readEnumChoices(prop, uiEntry) {
 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"];
+  const prop2 = getProperty(schema, path);
+  if (!prop2) return model;
+  if (hints.cell) prop2["x-ui-cell"] = hints.cell;
+  else delete prop2["x-ui-cell"];
   if (hints.cellOptions && Object.keys(hints.cellOptions).length > 0) {
-    prop["x-ui-cell-options"] = hints.cellOptions;
+    prop2["x-ui-cell-options"] = hints.cellOptions;
   } else {
-    delete prop["x-ui-cell-options"];
+    delete prop2["x-ui-cell-options"];
   }
   if (hints.column && Object.keys(hints.column).length > 0) {
-    prop["x-ui-column"] = hints.column;
+    prop2["x-ui-column"] = hints.column;
   } else {
-    delete prop["x-ui-column"];
+    delete prop2["x-ui-column"];
   }
   return { schema, uiSchema: model.uiSchema };
 }
-function readTableHints(prop) {
+function readTableHints(prop2) {
   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"]
+    cell: typeof prop2["x-ui-cell"] === "string" ? prop2["x-ui-cell"] : void 0,
+    cellOptions: prop2["x-ui-cell-options"],
+    column: prop2["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 keys = propKeys(path);
+  if (keys.length === 0) return void 0;
+  let entry = uiSchema[keys[0]];
+  for (let i = 1; i < keys.length && entry; i++) {
     const fields = entry["x-ui-fields"];
-    entry = fields?.[path[i]];
+    entry = fields?.[keys[i]];
   }
   return entry;
 }
-function setEntryIn(map, path, entry) {
-  const [head, ...rest] = path;
+function setEntryIn(map, keys, entry) {
+  const [head, ...rest] = keys;
   const next = { ...map };
   if (rest.length === 0) {
     if (entry && Object.keys(entry).length > 0) next[head] = entry;
@@ -391,15 +991,15 @@ function setEntryIn(map, path, entry) {
 }
 function setUiEntry(model, path, entry) {
   if (path.length === 0) return model;
-  const uiSchema = setEntryIn(model.uiSchema, path, entry);
+  const uiSchema = setEntryIn(model.uiSchema, propKeys(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;
+  const prop2 = getProperty(schema, path);
+  if (!prop2) return model;
+  const target = prop2.type === "array" ? prop2.items : prop2;
   if (!target) return model;
   if (layout) target["x-ui-layout"] = layout;
   else delete target["x-ui-layout"];
@@ -423,9 +1023,9 @@ function setRootLayoutRows(model, rows) {
 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;
+  const prop2 = getProperty(schema, scopePath);
+  if (!prop2) return model;
+  const target = prop2.type === "array" ? prop2.items : prop2;
   if (!target) return model;
   const layout = { ...target["x-ui-layout"] ?? {} };
   if (rows && rows.length > 0) layout.rows = rows;
@@ -438,8 +1038,8 @@ 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;
+  const prop2 = getProperty(schema, scopePath);
+  const target = prop2?.type === "array" ? prop2.items : prop2;
   return target?.["x-ui-layout"];
 }
 function setScopedLayoutOptions(model, scopePath, options) {
@@ -455,6 +1055,120 @@ function setScopedLayoutOptions(model, scopePath, options) {
   if (scopePath.length === 0) return setRootLayout(model, layout);
   return setPropertyLayout(model, scopePath, layout);
 }
+function setScopedLayoutGroups(model, scopePath, groups) {
+  const current = getScopedLayout(model.schema, model.uiSchema, scopePath) ?? {};
+  const merged = { ...current };
+  if (groups && groups.length > 0) {
+    merged.groups = groups;
+    delete merged.rows;
+  } else {
+    delete merged.groups;
+  }
+  const layout = Object.keys(merged).length > 0 ? merged : void 0;
+  if (scopePath.length === 0) return setRootLayout(model, layout);
+  return setPropertyLayout(model, scopePath, layout);
+}
+function groupsOf(model, scopePath) {
+  return getScopedLayout(model.schema, model.uiSchema, scopePath)?.groups ?? [];
+}
+function addLayoutGroup(model, scopePath, label) {
+  const groups = groupsOf(model, scopePath);
+  const next = { label: label ?? `Group ${groups.length + 1}`, rows: [] };
+  return setScopedLayoutGroups(model, scopePath, [...groups, next]);
+}
+function renameLayoutGroup(model, scopePath, groupIndex, label) {
+  const groups = groupsOf(model, scopePath);
+  if (!groups[groupIndex] || !label.trim()) return model;
+  return setScopedLayoutGroups(
+    model,
+    scopePath,
+    groups.map((group, i) => i === groupIndex ? { ...group, label } : group)
+  );
+}
+function placeFieldInGroup(model, scopePath, key, target) {
+  const groups = groupsOf(model, scopePath);
+  if (!key || groups.length === 0) return model;
+  const stripped = groups.map((group) => ({
+    ...group,
+    rows: group.rows.map((row2) => ({
+      ...row2,
+      fields: row2.fields.filter((f) => f !== key)
+    }))
+  }));
+  if (!target) return setScopedLayoutGroups(model, scopePath, stripped);
+  const { groupIndex, rowIndex } = target;
+  const row = stripped[groupIndex]?.rows[rowIndex];
+  if (!row) return setScopedLayoutGroups(model, scopePath, stripped);
+  stripped[groupIndex].rows = stripped[groupIndex].rows.map(
+    (r, i) => i === rowIndex ? { ...r, fields: [...r.fields, key] } : r
+  );
+  return setScopedLayoutGroups(model, scopePath, stripped);
+}
+function moveLayoutGroup(model, scopePath, groupIndex, direction) {
+  const groups = groupsOf(model, scopePath);
+  const target = groupIndex + direction;
+  if (!groups[groupIndex] || target < 0 || target >= groups.length)
+    return model;
+  const next = [...groups];
+  [next[groupIndex], next[target]] = [next[target], next[groupIndex]];
+  return setScopedLayoutGroups(model, scopePath, next);
+}
+function setLayoutGroupRule(model, scopePath, groupIndex, rule) {
+  const groups = groupsOf(model, scopePath);
+  if (!groups[groupIndex]) return model;
+  const next = groups.map((group, i) => {
+    if (i !== groupIndex) return group;
+    const { rule: _drop, ...rest } = group;
+    return rule ? { ...rest, rule } : rest;
+  });
+  return setScopedLayoutGroups(model, scopePath, next);
+}
+function setScopedLayoutVariant(model, scopePath, variant) {
+  const current = getScopedLayout(model.schema, model.uiSchema, scopePath) ?? {};
+  const merged = { ...current };
+  if (variant && variant !== "groups") merged.variant = variant;
+  else delete merged.variant;
+  const layout = Object.keys(merged).length > 0 ? merged : void 0;
+  if (scopePath.length === 0) return setRootLayout(model, layout);
+  return setPropertyLayout(model, scopePath, layout);
+}
+function removeLayoutGroup(model, scopePath, groupIndex) {
+  const groups = groupsOf(model, scopePath);
+  if (!groups[groupIndex]) return model;
+  const remaining = groups.filter((_, i) => i !== groupIndex);
+  if (remaining.length > 0) {
+    return setScopedLayoutGroups(model, scopePath, remaining);
+  }
+  const cleared = setScopedLayoutGroups(model, scopePath, []);
+  return setScopedLayoutRows(cleared, scopePath, groups[groupIndex].rows);
+}
+function setScopedGroupRows(model, scopePath, groupIndex, rows) {
+  const groups = getScopedLayout(
+    model.schema,
+    model.uiSchema,
+    scopePath
+  )?.groups;
+  if (!groups?.[groupIndex]) return model;
+  const next = groups.map(
+    (group, i) => i === groupIndex ? { ...group, rows } : group
+  );
+  return setScopedLayoutGroups(model, scopePath, next);
+}
+function setScopedLayoutMode(model, scopePath, mode) {
+  const layout = getScopedLayout(model.schema, model.uiSchema, scopePath) ?? {};
+  const groups = layout.groups ?? [];
+  const rows = layout.rows ?? [];
+  if (mode === "groups") {
+    if (groups.length > 0) return model;
+    return setScopedLayoutGroups(model, scopePath, [
+      { label: "Group 1", rows }
+    ]);
+  }
+  if (groups.length === 0) return model;
+  const flattened = [...rows, ...groups.flatMap((group) => group.rows)];
+  const cleared = setScopedLayoutGroups(model, scopePath, []);
+  return setScopedLayoutRows(cleared, scopePath, flattened);
+}
 function setGlobalOptions(model, options) {
   const uiSchema = { ...model.uiSchema };
   if (options) uiSchema["x-ui-globalOptions"] = options;
@@ -468,6 +1182,9 @@ var STRING_WIDGETS = [
   { value: "text", label: "Text input" },
   { value: "textarea", label: "Textarea" },
   { value: "select", label: "Select" },
+  { value: "date", label: "Date" },
+  { value: "date-time", label: "Date & time" },
+  { value: "time", label: "Time" },
   { value: "tags", label: "Tags" },
   { value: "entity-select", label: "Entity select" },
   { value: "json-editor", label: "JSON editor" }
@@ -489,8 +1206,15 @@ var ARRAY_WIDGETS = [
   { value: "select", label: "Multi-select" },
   { value: "tags", label: "Tags" }
 ];
-function compatibleWidgets(prop) {
-  switch (prop.type) {
+var NULL_WIDGETS = [{ value: "display", label: "Display" }];
+var ONEOF_WIDGETS = [
+  { value: "one-of", label: "One of (variant)" }
+];
+function compatibleWidgets(prop2) {
+  if (Array.isArray(prop2.oneOf) && prop2.oneOf.length > 0) {
+    return [AUTO, ...ONEOF_WIDGETS];
+  }
+  switch (prop2.type) {
     case "string":
       return [AUTO, ...STRING_WIDGETS];
     case "number":
@@ -502,6 +1226,8 @@ function compatibleWidgets(prop) {
       return [AUTO, ...OBJECT_WIDGETS];
     case "array":
       return [AUTO, ...ARRAY_WIDGETS];
+    case "null":
+      return [AUTO, ...NULL_WIDGETS];
     default:
       return [AUTO];
   }
@@ -518,11 +1244,11 @@ var EMBEDDABLE_KEYS = [
 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;
+    const prop2 = next.properties[fieldName];
+    if (!prop2 || !entry) continue;
     for (const key of EMBEDDABLE_KEYS) {
       if (entry[key] !== void 0) {
-        prop[key] = entry[key];
+        prop2[key] = entry[key];
       }
     }
   }
@@ -586,7 +1312,7 @@ function validateCapabilities(input) {
 }
 
 // src/model/scoping.ts
-function escapeToken(token) {
+function escapeToken2(token) {
   return token.replace(/~/g, "~0").replace(/\//g, "~1");
 }
 function parentContainerPointer(schema, path) {
@@ -595,20 +1321,27 @@ function parentContainerPointer(schema, path) {
   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;
+    const segment = path[i];
+    if (segment.kind !== "prop") return void 0;
+    const key = segment.key;
+    const prop2 = container[key];
+    if (!prop2) return void 0;
     if (i === path.length - 1) return pointer;
-    const next = childContainer(prop);
+    const next = childContainer(prop2);
     if (!next) return void 0;
-    pointer = prop.type === "array" ? `${pointer}/${escapeToken(seg)}/items/properties` : `${pointer}/${escapeToken(seg)}/properties`;
+    pointer = prop2.type === "array" ? `${pointer}/${escapeToken2(key)}/items/properties` : `${pointer}/${escapeToken2(key)}/properties`;
     container = next;
   }
   return pointer;
 }
 function isPropertyEditable(schema, path, editablePaths) {
   if (editablePaths.length === 0) return true;
-  const parent = parentContainerPointer(schema, path);
+  const allPropPrefix = path.slice(
+    0,
+    path.findIndex((s) => s.kind !== "prop") + 1 || path.length
+  );
+  const effectivePath = allPropPrefix.length < path.length ? allPropPrefix : path;
+  const parent = parentContainerPointer(schema, effectivePath);
   if (parent === void 0) return false;
   return editablePaths.includes(parent);
 }
@@ -623,18 +1356,89 @@ function ownChildContainerPointer(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;
+    const segment = path[i];
+    if (segment.kind !== "prop") return void 0;
+    const prop2 = container?.[segment.key];
+    if (!prop2) return void 0;
     if (i === path.length - 1) {
-      const seg = escapeToken(path[i]);
-      return prop.type === "array" ? `${parent}/${seg}/items/properties` : `${parent}/${seg}/properties`;
+      const seg = escapeToken2(segment.key);
+      return prop2.type === "array" ? `${parent}/${seg}/items/properties` : `${parent}/${seg}/properties`;
     }
-    container = childContainer(prop);
+    container = childContainer(prop2);
   }
   return void 0;
 }
 
 // src/hooks/useDesignerState.ts
+function pathStartsWith(p, prefix) {
+  if (p.length < prefix.length) return false;
+  return prefix.every((seg, i) => sameSegment(seg, p[i]));
+}
+function sharesParentPrefix(p, removed) {
+  if (p.length < removed.length) return false;
+  const parentLen = removed.length - 1;
+  for (let i = 0; i < parentLen; i++) {
+    if (!sameSegment(p[i], removed[i])) return false;
+  }
+  return true;
+}
+function sameIndexedArray(a, b) {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === "branch" && b.kind === "branch") return true;
+  if (a.kind === "condition" && b.kind === "condition")
+    return a.combinator === b.combinator;
+  return false;
+}
+function affectedSibling(prev, removed, kind) {
+  const last = removed[removed.length - 1];
+  if (!last || last.kind !== kind) return null;
+  if (!sharesParentPrefix(prev, removed)) return null;
+  const at = removed.length - 1;
+  const seg = prev[at];
+  if (!seg || !sameIndexedArray(seg, last) || !("index" in seg)) return null;
+  return { at, seg };
+}
+function adjustIndexedSelection(prev, removed, kind) {
+  if (!prev) return null;
+  const hit = affectedSibling(prev, removed, kind);
+  if (!hit) return prev;
+  const removedIndex = removed[removed.length - 1].index;
+  if (hit.seg.index === removedIndex) return null;
+  if (hit.seg.index < removedIndex) return prev;
+  const shifted = { ...hit.seg, index: hit.seg.index - 1 };
+  return [...prev.slice(0, hit.at), shifted, ...prev.slice(hit.at + 1)];
+}
+function adjustBranchSelection(prev, removed) {
+  return adjustIndexedSelection(prev, removed, "branch");
+}
+function countConditionals(arr) {
+  return Array.isArray(arr) ? arr.filter((m) => !!m.if).length : 0;
+}
+function selectedConditionInCombinator(prev, objectPath, from) {
+  if (!prev) return null;
+  const at = objectPath.length;
+  const seg = prev[at];
+  if (!seg || seg.kind !== "condition" || seg.combinator !== from) return null;
+  if (!samePath(prev.slice(0, at), objectPath)) return null;
+  return { at, index: seg.index };
+}
+function remapConditionSelection(before, prev, objectPath, next) {
+  const from = next === "allOf" ? "anyOf" : "allOf";
+  const hit = selectedConditionInCombinator(prev, objectPath, from);
+  if (!hit || !prev) return prev;
+  const owner = objectPath.length === 0 ? { allOf: before.schema.allOf, anyOf: before.schema.anyOf } : getProperty(before.schema, objectPath);
+  const sourceArr = owner?.[from];
+  if (!Array.isArray(sourceArr)) return prev;
+  const posAmongSource = countConditionals(sourceArr.slice(0, hit.index));
+  const targetOffset = countConditionals(
+    owner?.[next]
+  );
+  return [
+    ...prev.slice(0, hit.at),
+    condition(targetOffset + posAmongSource, next),
+    ...prev.slice(hit.at + 1)
+  ];
+}
 var EMPTY_SCHEMA = {
   title: "",
   type: "object",
@@ -695,6 +1499,56 @@ function useDesignerState(args) {
         commit(res.model);
         setSelection(res.path);
       },
+      addBranch(path) {
+        if (!canEditProperty(path)) return;
+        const res = addBranch(modelRef.current, path);
+        commit(res.model);
+        setSelection(res.path);
+      },
+      removeBranch(path) {
+        if (!canEditProperty(path)) return;
+        commit(removeBranch(modelRef.current, path));
+        setSelection((prev) => adjustBranchSelection(prev, path));
+      },
+      moveBranch(path, direction) {
+        if (!canEditProperty(path)) return;
+        commit(moveBranch(modelRef.current, path, direction));
+      },
+      addConditional(objectPath, combinator = "allOf") {
+        if (!canAddChild(objectPath)) return;
+        const res = addConditional(modelRef.current, objectPath, combinator);
+        commit(res.model);
+        setSelection(res.path);
+      },
+      setConditionalBehavior(objectPath, combinator) {
+        if (!canAddChild(objectPath)) return;
+        const before = modelRef.current;
+        commit(setConditionalBehavior(before, objectPath, combinator));
+        setSelection(
+          (prev) => remapConditionSelection(before, prev, objectPath, combinator)
+        );
+      },
+      removeConditional(path) {
+        if (!canAddChild(path.slice(0, -1))) return;
+        commit(removeConditional(modelRef.current, path));
+        setSelection((prev) => adjustIndexedSelection(prev, path, "condition"));
+      },
+      setCondition(path, ifSchema) {
+        if (!canAddChild(path.slice(0, -1))) return;
+        commit(setCondition(modelRef.current, path, ifSchema));
+      },
+      addElse(path) {
+        if (!canAddChild(path.slice(0, -1))) return;
+        commit(addElse(modelRef.current, path));
+      },
+      removeElse(path) {
+        if (!canAddChild(path.slice(0, -1))) return;
+        commit(removeElse(modelRef.current, path));
+        const elsePath = [...path, slot("else")];
+        setSelection(
+          (prev) => prev && pathStartsWith(prev, elsePath) ? null : prev
+        );
+      },
       deleteProperty(path) {
         if (!canEditProperty(path)) return;
         commit(deleteProperty(modelRef.current, path));
@@ -718,9 +1572,48 @@ function useDesignerState(args) {
         if (!canEditProperty(path)) return;
         commit(updateProperty(modelRef.current, path, patch));
       },
-      changePropertyType(path, nextType) {
+      changePropertyType(path, next) {
         if (!canEditProperty(path)) return;
-        commit(changePropertyType(modelRef.current, path, nextType));
+        commit(changePropertyType(modelRef.current, path, next));
+      },
+      setReference(path, name) {
+        if (!canEditProperty(path)) return;
+        commit(setReference(modelRef.current, path, name));
+      },
+      // Definitions are document-level, not path-scoped: gate on lock only.
+      addDefinition(name) {
+        if (capabilities.locked) return;
+        const res = addDefinition(modelRef.current, name);
+        commit(res.model);
+        setSelection(res.path);
+      },
+      renameDefinition(oldName, newName) {
+        if (capabilities.locked) return;
+        const res = renameDefinition(modelRef.current, oldName, newName);
+        commit(res.model);
+        setSelection(
+          (prev) => prev && samePath(prev, [def(oldName)]) ? res.path : prev
+        );
+      },
+      removeDefinition(name) {
+        if (capabilities.locked) return;
+        commit(removeDefinition(modelRef.current, name));
+        setSelection(
+          (prev) => prev && pathStartsWith(prev, [def(name)]) ? null : prev
+        );
+      },
+      // Replace the whole JSON Schema (from the editable JSON Schema tab).
+      // The uiSchema is preserved. Gated by capabilities.locked only -- a
+      // wholesale replace is not subject to per-path scoping.
+      replaceSchema(schema) {
+        if (capabilities.locked) return;
+        commit({ schema, uiSchema: modelRef.current.uiSchema });
+        setSelection(null);
+      },
+      // Replace the whole UI Schema map (from the editable UI Schema tab).
+      replaceUiSchema(uiSchema) {
+        if (readOnly) return;
+        commit({ schema: modelRef.current.schema, uiSchema });
       },
       setEnum(path, choices) {
         if (!canEditProperty(path)) return;
@@ -757,18 +1650,67 @@ function useDesignerState(args) {
         if (readOnly) return;
         commit(setScopedLayoutOptions(modelRef.current, scopePath, options));
       },
+      setScopedLayoutGroups(scopePath, groups) {
+        if (readOnly) return;
+        commit(setScopedLayoutGroups(modelRef.current, scopePath, groups));
+      },
+      setScopedGroupRows(scopePath, groupIndex, rows) {
+        if (readOnly) return;
+        commit(
+          setScopedGroupRows(modelRef.current, scopePath, groupIndex, rows)
+        );
+      },
+      setScopedLayoutMode(scopePath, mode) {
+        if (readOnly) return;
+        commit(setScopedLayoutMode(modelRef.current, scopePath, mode));
+      },
+      addLayoutGroup(scopePath, label) {
+        if (readOnly) return;
+        commit(addLayoutGroup(modelRef.current, scopePath, label));
+      },
+      renameLayoutGroup(scopePath, groupIndex, label) {
+        if (readOnly) return;
+        commit(
+          renameLayoutGroup(modelRef.current, scopePath, groupIndex, label)
+        );
+      },
+      removeLayoutGroup(scopePath, groupIndex) {
+        if (readOnly) return;
+        commit(removeLayoutGroup(modelRef.current, scopePath, groupIndex));
+      },
+      moveLayoutGroup(scopePath, groupIndex, direction) {
+        if (readOnly) return;
+        commit(
+          moveLayoutGroup(modelRef.current, scopePath, groupIndex, direction)
+        );
+      },
+      setLayoutGroupRule(scopePath, groupIndex, rule) {
+        if (readOnly) return;
+        commit(
+          setLayoutGroupRule(modelRef.current, scopePath, groupIndex, rule)
+        );
+      },
+      setScopedLayoutVariant(scopePath, variant) {
+        if (readOnly) return;
+        commit(setScopedLayoutVariant(modelRef.current, scopePath, variant));
+      },
+      placeFieldInGroup(scopePath, key, target) {
+        if (readOnly) return;
+        commit(placeFieldInGroup(modelRef.current, scopePath, key, target));
+      },
       setGlobalOptions(options) {
         if (readOnly) return;
         commit(setGlobalOptions(modelRef.current, options));
       }
     }),
-    [commit, readOnly, canEditProperty, canAddChild]
+    [commit, readOnly, capabilities.locked, canEditProperty, canAddChild]
   );
   return {
     schema: model.schema,
     uiSchema: model.uiSchema,
     selection,
     readOnly,
+    refResolver: args.refResolver,
     capabilities,
     canEditProperty,
     canAddChild,
@@ -778,7 +1720,7 @@ function useDesignerState(args) {
 }
 
 // src/SchemaDesigner.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState9 } from "react";
 import { ResizeHandle, IconButton as IconButton5 } from "@petrarca/sonnet-ui";
 import { useResizablePanel } from "@petrarca/sonnet-core/hooks";
 import {
@@ -951,7 +1893,7 @@ function FormSettingsSheet({
 }
 
 // src/tree/PropertyTree.tsx
-import { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { cn } from "@petrarca/sonnet-core";
 import { IconButton, Input } from "@petrarca/sonnet-ui";
 import {
@@ -960,30 +1902,90 @@ import {
   ChevronUp,
   ChevronDown,
   PanelLeftClose,
-  Lock
+  Lock,
+  GitBranch,
+  SplitSquareHorizontal,
+  Eye,
+  Braces,
+  Brackets,
+  GitFork,
+  CornerDownRight,
+  Type,
+  List,
+  ToggleLeft,
+  Hash,
+  Link2,
+  Puzzle,
+  ChevronRight
 } from "lucide-react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function buildInUseDefs(schema, names) {
+  return new Set(names.filter((n) => definitionUsageCount(schema, n) > 0));
+}
 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" }),
+  const nodes = useMemo2(
+    () => buildPropertyTree(state.schema, state.refResolver),
+    [state.schema, state.refResolver]
+  );
+  const propertyNodes = useMemo2(
+    () => nodes.filter((n) => n.kind !== "definition"),
+    [nodes]
+  );
+  const definitionNodes = useMemo2(
+    () => nodes.filter((n) => n.kind === "definition"),
+    [nodes]
+  );
+  const canEditDefs = !state.capabilities.locked;
+  const [propsOpen, setPropsOpen] = useState2(true);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col min-h-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-1 heading-meta",
+          onClick: () => setPropsOpen((v) => !v),
+          children: [
+            propsOpen ? /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx2(ChevronRight, { className: "h-3 w-3" }),
+            "Properties",
+            propertyNodes.length > 0 && /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground/60", children: [
+              "(",
+              propertyNodes.length,
+              ")"
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs2("span", { className: "ml-auto flex gap-1", children: [
         state.canAddChild([]) && /* @__PURE__ */ jsx2(
           IconButton,
           {
             label: "Add property",
-            onClick: () => state.addProperty([], "scalar"),
+            onClick: () => {
+              setPropsOpen(true);
+              state.addProperty([], "scalar");
+            },
             children: /* @__PURE__ */ jsx2(Plus, {})
           }
         ),
+        state.canAddChild([]) && /* @__PURE__ */ jsx2(
+          IconButton,
+          {
+            label: "Add condition",
+            onClick: () => {
+              setPropsOpen(true);
+              state.addConditional([]);
+            },
+            children: /* @__PURE__ */ jsx2(GitBranch, {})
+          }
+        ),
         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(
+    propsOpen && (propertyNodes.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "No properties yet." }) : /* @__PURE__ */ jsx2("div", { className: "flex-1 min-h-0 overflow-auto rounded-lg border divide-y", children: propertyNodes.map((node) => /* @__PURE__ */ jsx2(
       PropertyRow,
       {
         node,
@@ -991,7 +1993,72 @@ function PropertyTree({
         depth: 0
       },
       pathKey(node.path)
-    )) })
+    )) })),
+    /* @__PURE__ */ jsx2(
+      DefinitionsRegion,
+      {
+        nodes: definitionNodes,
+        state,
+        canEdit: canEditDefs
+      }
+    )
+  ] });
+}
+function DefinitionsRegion({
+  nodes,
+  state,
+  canEdit
+}) {
+  const [open, setOpen] = useState2(false);
+  const inUseDefs = useMemo2(
+    () => buildInUseDefs(
+      state.schema,
+      nodes.map((n) => n.key)
+    ),
+    [state.schema, nodes]
+  );
+  if (nodes.length === 0 && !canEdit) return null;
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-3 shrink-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-1 heading-meta",
+          onClick: () => setOpen((v) => !v),
+          children: [
+            open ? /* @__PURE__ */ jsx2(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx2(ChevronRight, { className: "h-3 w-3" }),
+            "Definitions",
+            nodes.length > 0 && /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground/60", children: [
+              "(",
+              nodes.length,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      canEdit && /* @__PURE__ */ jsx2("span", { className: "ml-auto flex gap-1", children: /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          label: "Add definition",
+          onClick: () => {
+            setOpen(true);
+            state.addDefinition();
+          },
+          children: /* @__PURE__ */ jsx2(Plus, {})
+        }
+      ) })
+    ] }),
+    open && (nodes.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "No definitions yet." }) : /* @__PURE__ */ jsx2("div", { className: "max-h-64 overflow-auto rounded-lg border divide-y", children: nodes.map((node) => /* @__PURE__ */ jsx2(
+      PropertyRow,
+      {
+        node,
+        state,
+        depth: 0,
+        inUseDefs
+      },
+      pathKey(node.path)
+    )) }))
   ] });
 }
 function NameEditor({
@@ -1031,23 +2098,82 @@ function NameEditor({
     }
   );
 }
+var KIND_ICONS = {
+  reference: { Icon: Link2, label: "reference" },
+  definition: { Icon: Puzzle, label: "definition" },
+  conditional: { Icon: GitBranch, label: "condition" },
+  object: { Icon: Braces, label: "object" },
+  array: { Icon: Brackets, label: "array" },
+  oneOf: { Icon: GitFork, label: "one of" },
+  enum: { Icon: List, label: "choice" }
+};
+function kindIconFor(node) {
+  const last = node.path[node.path.length - 1];
+  if (last?.kind === "slot") return { Icon: CornerDownRight, label: "branch" };
+  if (node.slotKind === "branch") return { Icon: GitFork, label: "variant" };
+  return KIND_ICONS[node.kind] ?? scalarIcon(node.property.type);
+}
+function scalarIcon(type) {
+  if (type === "number" || type === "integer")
+    return { Icon: Hash, label: "number" };
+  if (type === "boolean") return { Icon: ToggleLeft, label: "boolean" };
+  return { Icon: Type, label: "text" };
+}
+function KindIcon({ node }) {
+  const { Icon, label } = kindIconFor(node);
+  return /* @__PURE__ */ jsx2(
+    Icon,
+    {
+      className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60",
+      "aria-label": label
+    }
+  );
+}
+function Markers({ node }) {
+  const rule = node.property["x-ui-rule"];
+  if (!node.required && !rule) return null;
+  const scopeField = rule?.condition.scope.replace(/^\//, "");
+  const ruleTip = rule ? `${rule.effect} when ${scopeField || rule.condition.scope}` : "";
+  return /* @__PURE__ */ jsxs2("span", { className: "shrink-0 flex items-center gap-1 group-hover/row:hidden", children: [
+    node.required && /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "text-destructive text-xs leading-none",
+        title: "required",
+        "aria-label": "required",
+        children: "*"
+      }
+    ),
+    rule && /* @__PURE__ */ jsx2("span", { title: ruleTip, "aria-label": ruleTip, className: "flex", children: /* @__PURE__ */ jsx2(Eye, { className: "h-3 w-3 text-primary" }) })
+  ] });
+}
+function canAddChildHere(node, state, isConditional) {
+  if (!acceptsChildren(node)) return false;
+  return node.kind === "oneOf" || isConditional ? state.canEditProperty(node.path) : state.canAddChild(node.path);
+}
+function isRuleStyled(node) {
+  const last = node.path[node.path.length - 1];
+  return node.kind === "conditional" || last?.kind === "slot";
+}
 function RowLabel({
   node,
   editable,
   onStartRename
 }) {
   const title = editable ? `${node.key}${node.required ? " (required)" : ""} -- double-click to rename` : `${node.key} -- fixed (not editable)`;
+  const ruleStyled = isRuleStyled(node);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx2(KindIcon, { node }),
+    /* @__PURE__ */ jsx2(
       "span",
       {
-        className: "flex-1 min-w-0 truncate text-sm font-medium",
+        className: cn(
+          "flex-1 min-w-0 truncate text-sm",
+          ruleStyled ? "font-mono text-xs uppercase tracking-wide text-muted-foreground" : "font-medium"
+        ),
         onDoubleClick: onStartRename,
         title,
-        children: [
-          node.key,
-          node.required && /* @__PURE__ */ jsx2("span", { className: "ml-0.5 text-destructive", "aria-label": "required", children: "*" })
-        ]
+        children: node.key
       }
     ),
     !editable && /* @__PURE__ */ jsx2(
@@ -1057,89 +2183,192 @@ function RowLabel({
         "aria-label": "fixed"
       }
     ),
+    /* @__PURE__ */ jsx2(Markers, { node }),
     /* @__PURE__ */ jsx2(
       "span",
       {
-        className: "shrink-0 max-w-[45%] truncate font-mono text-[11px] text-muted-foreground/70 group-hover/row:hidden",
+        className: "shrink-0 max-w-[40%] truncate font-mono text-[11px] text-muted-foreground/70 group-hover/row:hidden",
         title: node.typeLabel,
         children: node.typeLabel
       }
     )
   ] });
 }
-function RowActions({
+function isConditionalMember2(node) {
+  return node.kind === "conditional";
+}
+function isConditionalSlot(node) {
+  const last = node.path[node.path.length - 1];
+  return node.slotKind === "conditional" && last?.kind === "slot";
+}
+function acceptsChildren(node) {
+  return node.kind === "object" || node.kind === "array" || node.kind === "oneOf" || node.kind === "definition" || node.slotKind === "branch" || isConditionalSlot(node);
+}
+function acceptsConditions(node) {
+  return node.kind === "object" || isConditionalSlot(node);
+}
+function ActionButton({
+  label,
+  tone,
+  disabled,
+  onAct,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(
+    IconButton,
+    {
+      label,
+      tone,
+      disabled,
+      revealOnHover: true,
+      onClick: (e) => {
+        e.stopPropagation();
+        onAct();
+      },
+      children
+    }
+  );
+}
+function MoveActions({
+  node,
+  state
+}) {
+  const isBranch = node.slotKind === "branch";
+  const move = (dir) => isBranch ? state.moveBranch(node.path, dir) : state.moveProperty(node.path, dir);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(ActionButton, { label: "Move up", onAct: () => move(-1), children: /* @__PURE__ */ jsx2(ChevronUp, {}) }),
+    /* @__PURE__ */ jsx2(ActionButton, { label: "Move down", onAct: () => move(1), children: /* @__PURE__ */ jsx2(ChevronDown, {}) })
+  ] });
+}
+function AddActions({
   node,
   state,
   editable,
   canAddHere
 }) {
+  const isOneOf3 = node.kind === "oneOf";
+  const addChild = () => isOneOf3 ? state.addBranch(node.path) : state.addProperty(node.path, "scalar");
+  const condMember = isConditionalMember2(node) && editable;
+  const hasElse = !!node.property.else;
   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,
+      ActionButton,
       {
-        label: "Add child property",
-        revealOnHover: true,
-        onClick: (e) => {
-          e.stopPropagation();
-          state.addProperty(node.path, "scalar");
-        },
+        label: isOneOf3 ? "Add branch" : "Add child property",
+        onAct: addChild,
         children: /* @__PURE__ */ jsx2(Plus, {})
       }
     ),
-    editable && /* @__PURE__ */ jsx2(
-      IconButton,
+    editable && acceptsConditions(node) && /* @__PURE__ */ jsx2(
+      ActionButton,
       {
-        label: "Delete property",
-        tone: "destructive",
-        revealOnHover: true,
-        onClick: (e) => {
-          e.stopPropagation();
-          state.deleteProperty(node.path);
-        },
-        children: /* @__PURE__ */ jsx2(Trash2, {})
+        label: "Add condition",
+        onAct: () => state.addConditional(node.path),
+        children: /* @__PURE__ */ jsx2(GitBranch, {})
       }
-    )
+    ),
+    condMember && !hasElse && /* @__PURE__ */ jsx2(ActionButton, { label: "Add else", onAct: () => state.addElse(node.path), children: /* @__PURE__ */ jsx2(SplitSquareHorizontal, {}) })
+  ] });
+}
+function lastSegment(node) {
+  return node.path[node.path.length - 1];
+}
+function removeDescriptor(node, state, inUseDefs) {
+  const last = lastSegment(node);
+  const slotName = last?.kind === "slot" ? last.slot : void 0;
+  if (slotName === "then") return null;
+  if (node.slotKind === "branch") {
+    return simpleRemove("Remove branch", () => state.removeBranch(node.path));
+  }
+  if (isConditionalMember2(node)) {
+    return simpleRemove(
+      "Remove condition",
+      () => state.removeConditional(node.path)
+    );
+  }
+  if (node.kind === "definition") {
+    const inUse = inUseDefs.has(node.key);
+    return {
+      label: inUse ? "In use -- remove references first" : "Delete definition",
+      disabled: inUse,
+      remove: () => state.removeDefinition(node.key)
+    };
+  }
+  if (slotName === "else") {
+    return simpleRemove(
+      "Remove else",
+      () => state.removeElse(node.path.slice(0, -1))
+    );
+  }
+  return simpleRemove("Delete property", () => state.deleteProperty(node.path));
+}
+function simpleRemove(label, remove) {
+  return { label, disabled: false, remove };
+}
+function RemoveAction({
+  node,
+  state,
+  inUseDefs
+}) {
+  const desc = removeDescriptor(node, state, inUseDefs);
+  if (!desc) return null;
+  return /* @__PURE__ */ jsx2(
+    ActionButton,
+    {
+      label: desc.label,
+      tone: "destructive",
+      disabled: desc.disabled,
+      onAct: desc.remove,
+      children: /* @__PURE__ */ jsx2(Trash2, {})
+    }
+  );
+}
+var EMPTY_SET = /* @__PURE__ */ new Set();
+function RowActions({
+  node,
+  state,
+  editable,
+  canAddHere,
+  inUseDefs = EMPTY_SET
+}) {
+  const reorderable = editable && node.slotKind !== "conditional" && node.slotKind !== "definition";
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    reorderable && /* @__PURE__ */ jsx2(MoveActions, { node, state }),
+    /* @__PURE__ */ jsx2(
+      AddActions,
+      {
+        node,
+        state,
+        editable,
+        canAddHere
+      }
+    ),
+    editable && /* @__PURE__ */ jsx2(RemoveAction, { node, state, inUseDefs })
   ] });
 }
 function PropertyRow({
   node,
   state,
-  depth
+  depth,
+  inUseDefs = EMPTY_SET
 }) {
   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 editable = !node.readOnly && state.canEditProperty(node.path);
+  const isBranch = node.slotKind === "branch";
+  const isConditional = node.slotKind === "conditional";
+  const isDefinition = node.kind === "definition";
+  const editableName = isDefinition ? !state.capabilities.locked : editable;
+  const canAddHere = canAddChildHere(node, state, isConditional);
+  const showActions = editableName || canAddHere;
   const startRename = (e) => {
     e.stopPropagation();
-    if (editable) setEditing(true);
+    if (editableName && !isBranch && !isConditional) setEditing(true);
+  };
+  const commitRename = (next) => {
+    setEditing(false);
+    if (isDefinition) state.renameDefinition(node.key, next);
+    else state.renameProperty(node.path, next);
   };
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsxs2(
@@ -1156,17 +2385,14 @@ function PropertyRow({
             NameEditor,
             {
               initial: node.key,
-              onCommit: (next) => {
-                setEditing(false);
-                state.renameProperty(node.path, next);
-              },
+              onCommit: commitRename,
               onCancel: () => setEditing(false)
             }
           ) : /* @__PURE__ */ jsx2(
             RowLabel,
             {
               node,
-              editable,
+              editable: editableName,
               onStartRename: startRename
             }
           ),
@@ -1187,8 +2413,9 @@ function PropertyRow({
                 {
                   node,
                   state,
-                  editable,
-                  canAddHere
+                  editable: editableName,
+                  canAddHere,
+                  inUseDefs
                 }
               )
             }
@@ -1201,7 +2428,8 @@ function PropertyRow({
       {
         node: child,
         state,
-        depth: depth + 1
+        depth: depth + 1,
+        inUseDefs
       },
       pathKey(child.path)
     ))
@@ -1209,29 +2437,27 @@ function PropertyRow({
 }
 
 // src/preview/PreviewPane.tsx
-import { useMemo as useMemo4, useState as useState5 } from "react";
-import { Check, Copy } from "lucide-react";
+import { useMemo as useMemo7, useState as useState6 } from "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";
+import {
+  extractSchemaDefaults
+} from "@petrarca/sonnet-core/schema";
 
 // src/preview/TablePreview.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } 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) {
+function sampleString(prop2, key, i) {
+  switch (prop2.format) {
     case "email":
       return `user${i + 1}@example.com`;
     case "date":
@@ -1251,13 +2477,13 @@ 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];
+function sampleValue(prop2, key, i) {
+  if (Array.isArray(prop2.enum) && prop2.enum.length > 0) {
+    return prop2.enum[i % prop2.enum.length];
   }
-  switch (prop.type) {
+  switch (prop2.type) {
     case "string":
-      return sampleString(prop, key, i);
+      return sampleString(prop2, key, i);
     case "number":
       return Math.round((i + 1) * 1.5 * 100) / 100;
     case "integer":
@@ -1276,8 +2502,8 @@ 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);
+    for (const [key, prop2] of entries) {
+      row[key] = sampleValue(prop2, key, i);
     }
     return row;
   });
@@ -1289,7 +2515,7 @@ function TablePreview({
   schema,
   uiSchema
 }) {
-  const data = useMemo2(() => toPageResult(sampleRows(schema)), [schema]);
+  const data = useMemo3(() => toPageResult(sampleRows(schema)), [schema]);
   return /* @__PURE__ */ jsx3(
     EntityTable,
     {
@@ -1304,17 +2530,282 @@ function TablePreview({
 }
 
 // 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 { useMemo as useMemo5, useState as useState4 } from "react";
+import { cn as cn2 } from "@petrarca/sonnet-core";
+import { Input as Input3, IconButton as IconButton2, Button } from "@petrarca/sonnet-ui";
+import { FormSelect as FormSelect3, JsonSchemaFormRenderer as JsonSchemaFormRenderer2 } from "@petrarca/sonnet-forms";
 import {
   Plus as Plus2,
   Trash2 as Trash22,
   ChevronUp as ChevronUp2,
   ChevronDown as ChevronDown2,
+  ChevronLeft,
+  ChevronRight as ChevronRight2,
   GripVertical
 } from "lucide-react";
+
+// src/inspector/RuleFields.tsx
+import { useEffect as useEffect2, useMemo as useMemo4, useState as useState3 } from "react";
+import { FormSelect as FormSelect2 } from "@petrarca/sonnet-forms";
+
+// src/model/conditions.ts
+var CONDITION_OPERATORS = [
+  "=",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+  "exists"
+];
+var CONDITION_OPERATOR_LABELS = {
+  "=": "equals",
+  "!=": "not equals",
+  ">": "greater than",
+  ">=": "greater or equal",
+  "<": "less than",
+  "<=": "less or equal",
+  exists: "exists"
+};
+var OPERATOR_OPTIONS = CONDITION_OPERATORS.map((op) => ({
+  value: op,
+  label: CONDITION_OPERATOR_LABELS[op]
+}));
+var NUMERIC_OPS = /* @__PURE__ */ new Set([
+  ">",
+  ">=",
+  "<",
+  "<="
+]);
+function coerceValue(value) {
+  if (value.trim() === "") return value;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : value;
+}
+function coerceForScope(value, operator, type) {
+  if (NUMERIC_OPS.has(operator)) return coerceValue(value);
+  if (type === "boolean") return value === "true";
+  if (type === "number" || type === "integer") return coerceValue(value);
+  return value;
+}
+function operatorToConstraint(operator, value, type) {
+  const v = coerceForScope(value, operator, type);
+  switch (operator) {
+    case "=":
+      return { const: v };
+    case "!=":
+      return { not: { const: v } };
+    case ">":
+      return { exclusiveMinimum: v };
+    case ">=":
+      return { minimum: v };
+    case "<":
+      return { exclusiveMaximum: v };
+    case "<=":
+      return { maximum: v };
+    case "exists":
+      return {};
+  }
+}
+function conditionToIf(condition2, type) {
+  const { field, operator } = condition2;
+  if (!field) return void 0;
+  if (operator === "exists") {
+    return { required: [field] };
+  }
+  return {
+    properties: {
+      [field]: operatorToConstraint(operator, condition2.value, type)
+    },
+    required: [field]
+  };
+}
+function constraintToOperator(c) {
+  if (c.not && "const" in c.not)
+    return { operator: "!=", value: String(c.not.const) };
+  if (c.exclusiveMinimum !== void 0)
+    return { operator: ">", value: String(c.exclusiveMinimum) };
+  if (c.minimum !== void 0)
+    return { operator: ">=", value: String(c.minimum) };
+  if (c.exclusiveMaximum !== void 0)
+    return { operator: "<", value: String(c.exclusiveMaximum) };
+  if (c.maximum !== void 0)
+    return { operator: "<=", value: String(c.maximum) };
+  if ("const" in c) return { operator: "=", value: String(c.const) };
+  return { operator: "exists", value: "" };
+}
+function ifToCondition(ifSchema) {
+  const empty = { field: "", operator: "=", value: "" };
+  if (!ifSchema) return empty;
+  const props = ifSchema.properties ?? {};
+  const field = Object.keys(props)[0] ?? ifSchema.required?.[0] ?? "";
+  if (!field) return empty;
+  const constraint = props[field];
+  if (!constraint) return { field, operator: "exists", value: "" };
+  const { operator, value } = constraintToOperator(constraint);
+  return { field, operator, value };
+}
+
+// src/inspector/OperatorValueInput.tsx
+import { Input as Input2 } from "@petrarca/sonnet-ui";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function OperatorValueInput({
+  id,
+  cacheKey,
+  value,
+  onCommit,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx4("label", { htmlFor: id, className: "text-sm font-medium", children: "Value" }),
+    /* @__PURE__ */ jsx4(
+      Input2,
+      {
+        id,
+        defaultValue: value,
+        onBlur: (e) => onCommit(e.target.value),
+        disabled,
+        placeholder: "Value to compare"
+      },
+      cacheKey
+    )
+  ] });
+}
+
+// src/inspector/RuleFields.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ruleToForm(rule) {
+  if (!rule) return { effect: "", scope: "", operator: "=", value: "" };
+  const { operator, value } = constraintToOperator(rule.condition.schema);
+  return { effect: rule.effect, scope: rule.condition.scope, operator, value };
+}
+function formToRule(form, scopeType) {
+  if (!form.effect || !form.scope) return void 0;
+  return {
+    effect: form.effect,
+    condition: {
+      scope: form.scope,
+      schema: operatorToConstraint(form.operator, form.value, scopeType)
+    }
+  };
+}
+var BOOLEAN_VALUE_OPTIONS = [
+  { value: "true", label: "true" },
+  { value: "false", label: "false" }
+];
+function RuleFields({
+  rule,
+  scopes,
+  effects,
+  idPrefix,
+  disabled = false,
+  onChange
+}) {
+  const [form, setForm] = useState3(() => ruleToForm(rule));
+  const seed = JSON.stringify(rule ?? null);
+  useEffect2(() => {
+    setForm(ruleToForm(JSON.parse(seed) ?? void 0));
+  }, [seed]);
+  const scopeType = useMemo4(
+    () => scopes.find((s) => s.pointer === form.scope)?.type,
+    [scopes, form.scope]
+  );
+  const commit = (next) => {
+    setForm(next);
+    const nextType = scopes.find((s) => s.pointer === next.scope)?.type;
+    const built = formToRule(next, nextType);
+    if (built || next.effect === "") onChange(built);
+  };
+  const scopeOptions = useMemo4(
+    () => scopes.map((s) => ({ value: s.pointer, label: s.pointer.slice(1) })),
+    [scopes]
+  );
+  const needsValue = form.operator !== "exists";
+  const isBoolean = scopeType === "boolean";
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx5(
+      FormSelect2,
+      {
+        id: `${idPrefix}-effect`,
+        name: "effect",
+        label: "Effect",
+        options: effects,
+        value: form.effect,
+        onChange: (v) => commit({ ...form, effect: v ?? "" }),
+        clearable: false,
+        disabled
+      }
+    ),
+    form.effect !== "" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        FormSelect2,
+        {
+          id: `${idPrefix}-scope`,
+          name: "scope",
+          label: "When field",
+          options: scopeOptions,
+          value: form.scope || null,
+          onChange: (v) => commit({ ...form, scope: v ?? "" }),
+          placeholder: "Select a field...",
+          clearable: false,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        FormSelect2,
+        {
+          id: `${idPrefix}-operator`,
+          name: "operator",
+          label: "Operator",
+          options: OPERATOR_OPTIONS,
+          value: form.operator,
+          onChange: (v) => commit({ ...form, operator: v ?? "=" }),
+          clearable: false,
+          disabled
+        }
+      ),
+      needsValue && (isBoolean ? /* @__PURE__ */ jsx5(
+        FormSelect2,
+        {
+          id: `${idPrefix}-value`,
+          name: "value",
+          label: "Value",
+          options: BOOLEAN_VALUE_OPTIONS,
+          value: form.value === "true" ? "true" : "false",
+          onChange: (v) => commit({ ...form, value: v ?? "false" }),
+          clearable: false,
+          disabled: disabled || !form.scope
+        }
+      ) : /* @__PURE__ */ jsx5(
+        OperatorValueInput,
+        {
+          id: `${idPrefix}-value`,
+          cacheKey: `${form.scope}:${form.operator}`,
+          value: form.value,
+          onCommit: (v) => commit({ ...form, value: v }),
+          disabled: disabled || !form.scope
+        }
+      ))
+    ] })
+  ] });
+}
+
+// src/inspector/ruleEffects.ts
+var VISIBILITY_EFFECT_OPTIONS = [
+  { value: "", label: "None (always shown)" },
+  { value: "show", label: "Show when" },
+  { value: "hide", label: "Hide when" }
+];
+var FIELD_EFFECT_OPTIONS = [
+  { value: "", label: "None (always visible)" },
+  { value: "show", label: "Show when" },
+  { value: "hide", label: "Hide when" },
+  { value: "enable", label: "Enable when" },
+  { value: "disable", label: "Disable when" }
+];
+
+// src/designers/FormLayoutDesigner.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var DRAG_MIME = "application/x-sonnet-property";
 function orderedKeysOf(properties, order) {
   const keys = Object.keys(properties);
@@ -1323,21 +2814,43 @@ function orderedKeysOf(properties, order) {
   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;
+  const prop2 = getProperty(schema, scopePath);
+  if (!prop2) return void 0;
+  return prop2.type === "array" ? prop2.items : prop2;
+}
+function scopeContainer(schema, uiSchema, scopePath) {
+  if (scopePath.length === 0) {
+    return {
+      container: schema,
+      layout: uiSchema["x-ui-layout"]
+    };
+  }
+  const container = scopeTarget(schema, scopePath);
+  return {
+    container,
+    layout: container?.["x-ui-layout"]
+  };
 }
 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);
+  const { container, layout } = scopeContainer(schema, uiSchema, scopePath);
+  const props = container?.properties ?? {};
   return {
-    keys: orderedKeysOf(container?.properties ?? {}, container?.["x-ui-order"]),
+    keys: orderedKeysOf(props, container?.["x-ui-order"]),
+    props,
     rows: layout?.rows ?? [],
+    groups: layout?.groups ?? [],
     layout,
-    isArray
+    isArray: scopeIsArray(schema, scopePath)
   };
 }
+function ownsField(rows, key) {
+  return rows.some((r) => r.fields.includes(key));
+}
+function rowTarget(grouped, groups, groupIndex, flatRows) {
+  const rows = grouped ? groups[groupIndex]?.rows ?? [] : flatRows;
+  const all = grouped ? groups.flatMap((t) => t.rows) : flatRows;
+  return { rows, assigned: new Set(all.flatMap((r) => r.fields)) };
+}
 function scopeIsArray(schema, scopePath) {
   if (scopePath.length === 0) return false;
   return getProperty(schema, scopePath)?.type === "array";
@@ -1377,9 +2890,9 @@ function ArrayItemLayoutBar({
   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(
+  return /* @__PURE__ */ jsxs5("div", { className: "shrink-0 rounded-lg border p-3", children: [
+    /* @__PURE__ */ jsx6("p", { className: "heading-meta mb-2", children: "Array item layout" }),
+    /* @__PURE__ */ jsx6(
       JsonSchemaFormRenderer2,
       {
         schema: SCALAR_META_SCHEMA,
@@ -1396,23 +2909,37 @@ function ArrayItemLayoutBar({
 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 scopes = useMemo5(() => layoutScopes(state.schema), [state.schema]);
+  const [scopePath, setScopePath] = useState4([]);
+  const scopeKey = pathKey(scopePath);
+  const activeScope = scopes.find((s) => pathKey(s.path) === scopeKey) ?? scopes[0];
   const effectivePath = activeScope.path;
   const {
     keys: allKeys,
-    rows,
+    props: scopeProps,
+    rows: flatRows,
+    groups,
     layout,
     isArray
   } = resolveScope(state.schema, state.uiSchema, effectivePath);
-  const assigned = new Set(rows.flatMap((r) => r.fields));
+  const grouped = groups.length > 0;
+  const [activeGroup, setActiveGroup] = useState4(0);
+  const groupIndex = grouped ? Math.min(activeGroup, groups.length - 1) : 0;
+  const { rows, assigned } = rowTarget(grouped, groups, groupIndex, flatRows);
   const available = allKeys.filter((k) => !assigned.has(k));
-  const [dragKey, setDragKey] = useState3(null);
-  const commit = (next) => state.setScopedLayoutRows(effectivePath, next);
+  const inOtherGroups = grouped ? allKeys.filter((k) => assigned.has(k) && !ownsField(rows, k)) : [];
+  const [dragKey, setDragKey] = useState4(null);
+  const commit = makeCommitRows(state, effectivePath, grouped, groupIndex);
   const place = (key, rowIndex) => {
     if (!key) return;
+    if (grouped) {
+      state.placeFieldInGroup(
+        effectivePath,
+        key,
+        rowIndex === null ? null : { groupIndex, rowIndex }
+      );
+      return;
+    }
     const next = rows.map((r) => ({
       ...r,
       fields: r.fields.filter((f) => f !== key)
@@ -1466,26 +2993,57 @@ function FormLayoutDesigner({
     });
     commit(next);
   };
+  const scopeOptions = allKeys.map((k) => ({
+    pointer: `/${k}`,
+    type: scopeProps[k]?.type
+  }));
+  const groupOps = makeGroupOps(
+    state,
+    effectivePath,
+    groups.length,
+    groupIndex,
+    setActiveGroup
+  );
   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,
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3 h-full min-h-0", children: [
+    /* @__PURE__ */ jsx6(
+      LayoutToolbar,
+      {
+        scopes,
+        scopePath: effectivePath,
+        onScope: setScopePath,
+        grouped,
+        variant: layout?.variant,
+        readOnly,
+        onMode: groupOps.setMode,
+        onVariant: (v) => state.setScopedLayoutVariant(effectivePath, v)
+      }
+    ),
+    grouped && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx6(
+        GroupBar,
         {
-          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
+          groups,
+          activeIndex: groupIndex,
+          readOnly,
+          onSelect: setActiveGroup,
+          onAdd: groupOps.add,
+          onRename: groupOps.rename,
+          onRemove: groupOps.remove,
+          onMove: groupOps.move
         }
-      ) })
+      ),
+      /* @__PURE__ */ jsx6(
+        GroupSettings,
+        {
+          group: groups[groupIndex],
+          scopes: scopeOptions,
+          readOnly,
+          onRule: (rule) => state.setLayoutGroupRule(effectivePath, groupIndex, rule)
+        }
+      )
     ] }),
-    isArray && /* @__PURE__ */ jsx4(
+    isArray && /* @__PURE__ */ jsx6(
       ArrayItemLayoutBar,
       {
         layout,
@@ -1493,38 +3051,24 @@ function FormLayoutDesigner({
         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(
+    /* @__PURE__ */ jsxs5("div", { className: "flex gap-4 flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx6(
+        AvailablePool,
+        {
+          available,
+          inOtherGroups,
+          grouped,
+          readOnly,
+          dragActive: !!dragKey,
+          onDropToPool: (key) => place(key, null),
+          onDragStartKey: setDragKey,
+          onDragEndKey: () => setDragKey(null)
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-w-0 flex flex-col min-h-0", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx6("p", { className: "heading-meta", children: rowsHeading(grouped, groups, groupIndex) }),
+          !readOnly && /* @__PURE__ */ jsx6("span", { className: "ml-auto", children: /* @__PURE__ */ jsxs5(
             Button,
             {
               size: "sm",
@@ -1532,13 +3076,13 @@ function FormLayoutDesigner({
               className: "gap-1.5",
               onClick: addRow,
               children: [
-                /* @__PURE__ */ jsx4(Plus2, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx6(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(
+        /* @__PURE__ */ jsx6("div", { className: "flex-1 min-h-0 overflow-auto space-y-3", children: rows.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "No rows yet. Add a row, then drag properties into it." }) : rows.map((row, i) => /* @__PURE__ */ jsx6(
           RowCard,
           {
             row,
@@ -1564,6 +3108,352 @@ function FormLayoutDesigner({
     ] })
   ] });
 }
+function makeCommitRows(state, scopePath, grouped, groupIndex) {
+  if (grouped) {
+    return (rows) => state.setScopedGroupRows(scopePath, groupIndex, rows);
+  }
+  return (rows) => state.setScopedLayoutRows(scopePath, rows);
+}
+function rowsHeading(grouped, groups, groupIndex) {
+  if (!grouped) return "Rows";
+  return `Rows in ${groups[groupIndex]?.label ?? ""}`;
+}
+var VARIANT_OPTIONS = [
+  { value: "tabs", label: "Tabs" },
+  { value: "stepper", label: "Stepper" },
+  { value: "sections", label: "Sections" }
+];
+function makeGroupOps(state, scopePath, groupCount, activeIndex, setActiveGroup) {
+  return {
+    add: () => {
+      state.addLayoutGroup(scopePath);
+      setActiveGroup(groupCount);
+    },
+    rename: (index, label) => state.renameLayoutGroup(scopePath, index, label),
+    move: (index, direction) => {
+      state.moveLayoutGroup(scopePath, index, direction);
+      if (index === activeIndex) setActiveGroup(activeIndex + direction);
+    },
+    remove: (index) => {
+      state.removeLayoutGroup(scopePath, index);
+      if (index <= activeIndex && activeIndex > 0)
+        setActiveGroup(activeIndex - 1);
+    },
+    setMode: (mode) => {
+      state.setScopedLayoutMode(scopePath, mode);
+      setActiveGroup(0);
+    }
+  };
+}
+function AvailablePool({
+  available,
+  inOtherGroups,
+  grouped,
+  readOnly,
+  dragActive,
+  onDropToPool,
+  onDragStartKey,
+  onDragEndKey
+}) {
+  const empty = available.length === 0 && inOtherGroups.length === 0;
+  return /* @__PURE__ */ jsxs5("div", { className: "w-56 shrink-0 flex flex-col min-h-0", children: [
+    /* @__PURE__ */ jsx6("p", { className: "heading-meta mb-2", children: "Available" }),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "flex-1 min-h-0 overflow-auto rounded-lg border p-2 space-y-1 bg-muted/20",
+        onDragOver: (e) => {
+          if (dragActive) e.preventDefault();
+        },
+        onDrop: (e) => {
+          const key = e.dataTransfer.getData(DRAG_MIME);
+          if (key) onDropToPool(key);
+        },
+        children: [
+          empty ? /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground p-1", children: grouped ? "All properties are placed in groups." : "All properties are placed in rows." }) : available.map((key) => /* @__PURE__ */ jsx6(
+            Chip,
+            {
+              label: key,
+              readOnly,
+              onDragStart: () => onDragStartKey(key),
+              onDragEnd: onDragEndKey
+            },
+            key
+          )),
+          inOtherGroups.length > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx6("p", { className: "pt-2 pb-1 text-[11px] uppercase tracking-wide text-muted-foreground/70", children: "In other groups" }),
+            inOtherGroups.map((key) => /* @__PURE__ */ jsx6(
+              Chip,
+              {
+                label: key,
+                readOnly,
+                muted: true,
+                onDragStart: () => onDragStartKey(key),
+                onDragEnd: onDragEndKey
+              },
+              key
+            ))
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground mt-2", children: grouped ? "Drag from \u201CIn other groups\u201D to move a property here. Unplaced properties render below the groups." : "Unplaced properties render stacked below the rows." })
+  ] });
+}
+function LayoutToolbar({
+  scopes,
+  scopePath,
+  onScope,
+  grouped,
+  variant,
+  readOnly,
+  onMode,
+  onVariant
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 shrink-0", children: [
+    /* @__PURE__ */ jsx6("label", { className: "heading-meta", children: "Scope" }),
+    /* @__PURE__ */ jsx6("div", { className: "w-64", children: /* @__PURE__ */ jsx6(
+      FormSelect3,
+      {
+        id: "layout-scope",
+        name: "scope",
+        value: pathKey(scopePath),
+        options: scopes.map((s) => ({
+          value: pathKey(s.path),
+          label: s.label
+        })),
+        onChange: (v) => onScope(v ? parsePathKey(v) : []),
+        clearable: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx6("label", { className: "heading-meta ml-4", children: "Group by" }),
+    /* @__PURE__ */ jsx6(
+      ModeToggle,
+      {
+        mode: grouped ? "groups" : "rows",
+        readOnly,
+        onChange: onMode
+      }
+    ),
+    grouped && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("label", { className: "heading-meta ml-4", children: "Show as" }),
+      /* @__PURE__ */ jsx6("div", { className: "w-36", children: /* @__PURE__ */ jsx6(
+        FormSelect3,
+        {
+          id: "layout-variant",
+          name: "variant",
+          value: variant ?? "tabs",
+          options: VARIANT_OPTIONS,
+          onChange: (v) => onVariant(v ?? "tabs"),
+          clearable: false,
+          disabled: readOnly
+        }
+      ) })
+    ] })
+  ] });
+}
+function ModeToggle({
+  mode,
+  readOnly,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx6("div", { className: "inline-flex rounded-md border p-0.5", "aria-label": "Group by", children: ["rows", "groups"].map((m) => /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      disabled: readOnly,
+      "aria-pressed": mode === m,
+      onClick: () => onChange(m),
+      className: cn2(
+        "rounded px-2 py-0.5 text-xs capitalize disabled:opacity-50",
+        mode === m ? "bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:text-foreground"
+      ),
+      children: m
+    },
+    m
+  )) });
+}
+function GroupSettings({
+  group,
+  scopes,
+  readOnly,
+  onRule
+}) {
+  const [open, setOpen] = useState4(false);
+  if (!group) return null;
+  const hasRule = !!group.rule;
+  return /* @__PURE__ */ jsxs5("div", { className: "shrink-0 rounded-lg border px-3 py-2", children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center gap-1 heading-meta",
+        onClick: () => setOpen((v) => !v),
+        "aria-expanded": open,
+        children: [
+          open ? /* @__PURE__ */ jsx6(ChevronDown2, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx6(ChevronRight2, { className: "h-3 w-3" }),
+          "Visibility of ",
+          group.label,
+          /* @__PURE__ */ jsx6("span", { className: "ml-1 normal-case text-muted-foreground/70", children: hasRule ? "conditional" : "always shown" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx6("div", { className: "mt-3 max-w-sm", children: /* @__PURE__ */ jsx6(
+      RuleFields,
+      {
+        rule: group.rule,
+        scopes,
+        effects: VISIBILITY_EFFECT_OPTIONS,
+        idPrefix: "group-rule",
+        disabled: readOnly,
+        onChange: (rule) => onRule(rule)
+      }
+    ) })
+  ] });
+}
+function GroupBar({
+  groups,
+  activeIndex,
+  readOnly,
+  onSelect,
+  onAdd,
+  onRename,
+  onRemove,
+  onMove
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "Layout groups",
+      className: "shrink-0 flex items-center gap-1 rounded-lg border p-1.5 overflow-x-auto",
+      children: [
+        groups.map((group, i) => /* @__PURE__ */ jsx6(
+          GroupChip,
+          {
+            group,
+            active: i === activeIndex,
+            readOnly,
+            onSelect: () => onSelect(i),
+            onRename: (label) => onRename(i, label),
+            onRemove: () => onRemove(i),
+            onMoveLeft: i > 0 ? () => onMove(i, -1) : void 0,
+            onMoveRight: i < groups.length - 1 ? () => onMove(i, 1) : void 0
+          },
+          `${i}:${group.label}`
+        )),
+        !readOnly && /* @__PURE__ */ jsxs5(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            className: "gap-1.5 shrink-0",
+            onClick: onAdd,
+            children: [
+              /* @__PURE__ */ jsx6(Plus2, { className: "h-4 w-4" }),
+              "Add group"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function GroupChip({
+  group,
+  active,
+  readOnly,
+  onSelect,
+  onRename,
+  onRemove,
+  onMoveLeft,
+  onMoveRight
+}) {
+  const [editing, setEditing] = useState4(false);
+  if (editing) {
+    return /* @__PURE__ */ jsx6(
+      Input3,
+      {
+        autoFocus: true,
+        defaultValue: group.label,
+        className: "h-7 w-32 text-sm",
+        onBlur: (e) => {
+          const next = e.target.value.trim();
+          if (next && next !== group.label) onRename(next);
+          setEditing(false);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") e.currentTarget.blur();
+          if (e.key === "Escape") setEditing(false);
+        }
+      }
+    );
+  }
+  const fieldCount = group.rows.reduce((n, r) => n + r.fields.length, 0);
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: cn2(
+        "group/group inline-flex shrink-0 items-center gap-1 rounded-md border pl-2 pr-1 py-0.5 text-sm",
+        active ? "bg-accent border-accent-foreground/20" : "hover:bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            role: "group",
+            "aria-selected": active,
+            className: "inline-flex items-center gap-1 py-0.5",
+            onClick: onSelect,
+            onDoubleClick: () => !readOnly && setEditing(true),
+            onKeyDown: (e) => {
+              if (e.key === "F2" && !readOnly) {
+                e.preventDefault();
+                setEditing(true);
+              }
+            },
+            title: readOnly ? group.label : `${group.label} -- F2 to rename`,
+            children: [
+              group.label,
+              /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: fieldCount })
+            ]
+          }
+        ),
+        !readOnly && /* @__PURE__ */ jsxs5("span", { className: "flex items-center opacity-0 group-hover/group:opacity-100 focus-within:opacity-100", children: [
+          onMoveLeft && /* @__PURE__ */ jsx6(
+            IconButton2,
+            {
+              label: `Move ${group.label} left`,
+              revealOnHover: true,
+              onClick: onMoveLeft,
+              children: /* @__PURE__ */ jsx6(ChevronLeft, {})
+            }
+          ),
+          onMoveRight && /* @__PURE__ */ jsx6(
+            IconButton2,
+            {
+              label: `Move ${group.label} right`,
+              revealOnHover: true,
+              onClick: onMoveRight,
+              children: /* @__PURE__ */ jsx6(ChevronRight2, {})
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            IconButton2,
+            {
+              label: `Remove ${group.label}`,
+              tone: "destructive",
+              revealOnHover: true,
+              onClick: onRemove,
+              children: /* @__PURE__ */ jsx6(Trash22, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 var WIDTH_LABELS = {
   full: "Full",
   sm: "Small",
@@ -1584,9 +3474,10 @@ function Chip({
   onDragEnd,
   width,
   onWidth,
-  widthDisabled
+  widthDisabled,
+  muted = false
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       draggable: !readOnly,
@@ -1596,11 +3487,14 @@ function Chip({
         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",
+      className: cn2(
+        "group/chip flex items-center gap-1 rounded-md border bg-background px-2 py-1 text-sm cursor-grab active:cursor-grabbing",
+        muted && "border-dashed text-muted-foreground"
+      ),
       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(
+        /* @__PURE__ */ jsx6(GripVertical, { className: "h-3.5 w-3.5 text-muted-foreground/60 shrink-0" }),
+        /* @__PURE__ */ jsx6("span", { className: "truncate", children: label }),
+        onWidth && /* @__PURE__ */ jsx6(
           "select",
           {
             value: width ?? "full",
@@ -1608,10 +3502,10 @@ function Chip({
             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))
+            children: ["full", "sm", "md", "lg"].map((w) => /* @__PURE__ */ jsx6("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, {}) })
+        onRemove && !readOnly && /* @__PURE__ */ jsx6(IconButton2, { label: "Remove from row", onClick: onRemove, children: /* @__PURE__ */ jsx6(Trash22, {}) })
       ]
     }
   );
@@ -1634,48 +3528,48 @@ function RowCard({
   onWidth,
   onArrange
 }) {
-  const [over, setOver] = useState3(false);
+  const [over, setOver] = useState4(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: [
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border p-3", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "heading-meta", children: [
         "Row ",
         index + 1
       ] }),
-      !readOnly && /* @__PURE__ */ jsxs3("span", { className: "ml-auto flex gap-0.5", children: [
-        /* @__PURE__ */ jsx4(
+      !readOnly && /* @__PURE__ */ jsxs5("span", { className: "ml-auto flex gap-0.5", children: [
+        /* @__PURE__ */ jsx6(
           IconButton2,
           {
             label: "Move row up",
             disabled: index === 0,
             onClick: onMoveUp,
-            children: /* @__PURE__ */ jsx4(ChevronUp2, {})
+            children: /* @__PURE__ */ jsx6(ChevronUp2, {})
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           IconButton2,
           {
             label: "Move row down",
             disabled: index === total - 1,
             onClick: onMoveDown,
-            children: /* @__PURE__ */ jsx4(ChevronDown2, {})
+            children: /* @__PURE__ */ jsx6(ChevronDown2, {})
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(
           IconButton2,
           {
             label: "Delete row",
             tone: "destructive",
             onClick: onDelete,
-            children: /* @__PURE__ */ jsx4(Trash22, {})
+            children: /* @__PURE__ */ jsx6(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,
+    /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx6("label", { className: "text-xs text-muted-foreground w-16", children: "Group" }),
+      /* @__PURE__ */ jsx6(
+        Input3,
         {
           value: row.group ?? "",
           onChange: (e) => onGroup(e.target.value),
@@ -1685,9 +3579,9 @@ function RowCard({
         }
       )
     ] }),
-    /* @__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(
+    /* @__PURE__ */ jsxs5("div", { className: "mb-2 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx6("label", { className: "text-xs text-muted-foreground w-16", children: "Arrange" }),
+      /* @__PURE__ */ jsxs5(
         "select",
         {
           value: isFlow ? "flow" : "grid",
@@ -1696,13 +3590,13 @@ function RowCard({
           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__ */ jsx6("option", { value: "grid", children: "Grid (columns)" }),
+            /* @__PURE__ */ jsx6("option", { value: "flow", children: "Inline (natural width)" })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       "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"}`,
@@ -1717,7 +3611,7 @@ function RowCard({
           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(
+        children: row.fields.length === 0 ? /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground p-1", children: "Drop properties here" }) : row.fields.map((key, cell) => /* @__PURE__ */ jsx6(
           Chip,
           {
             label: key,
@@ -1733,12 +3627,12 @@ function RowCard({
         ))
       }
     ),
-    !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,
+    !isFlow && /* @__PURE__ */ jsxs5("details", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Advanced: raw CSS columns" }),
+      /* @__PURE__ */ jsxs5("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("label", { className: "text-xs text-muted-foreground w-16", children: "Columns" }),
+        /* @__PURE__ */ jsx6(
+          Input3,
           {
             value: row.columns ?? "",
             onChange: (e) => onColumns(e.target.value),
@@ -1748,9 +3642,9 @@ function RowCard({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs3("p", { className: "mt-1 pl-[4.5rem] text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs5("p", { className: "mt-1 pl-[4.5rem] text-xs text-muted-foreground", children: [
         "Raw ",
-        /* @__PURE__ */ jsx4("span", { className: "font-mono", children: "grid-template-columns" }),
+        /* @__PURE__ */ jsx6("span", { className: "font-mono", children: "grid-template-columns" }),
         ". When set, it overrides the per-property widths. Blank = use widths."
       ] })
     ] })
@@ -1758,21 +3652,44 @@ function RowCard({
 }
 
 // src/preview/CapabilitiesPanel.tsx
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useMemo as useMemo6 } from "react";
+
+// src/preview/SchemaSourcePanel.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { Check, Copy } from "lucide-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
+import { copyTextToClipboard } from "@petrarca/sonnet-core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function SchemaSourcePanel({
+  value,
+  editable,
+  onApply,
+  validate
 }) {
-  const [text, setText] = useState4(
-    () => JSON.stringify(capabilities ?? {}, null, 2)
-  );
-  const [error, setError] = useState4(null);
-  useEffect2(() => {
-    setText(JSON.stringify(capabilities ?? {}, null, 2));
-  }, [capabilities]);
+  const [text, setText] = useState5(value);
+  const [error, setError] = useState5(null);
+  const [copied, setCopied] = useState5(false);
+  const [dirty, setDirty] = useState5(false);
+  const lastValueRef = useRef3(value);
+  useEffect3(() => {
+    if (value === lastValueRef.current) return;
+    if (!dirty) {
+      lastValueRef.current = value;
+      setText(value);
+      setError(null);
+    }
+  }, [value, dirty]);
+  const handleEditorChange = (next) => {
+    setText(next);
+    setDirty(next !== value);
+  };
+  const handleCopy = () => {
+    void copyTextToClipboard(editable ? text : value).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
   const handleApply = () => {
     let parsed;
     try {
@@ -1781,81 +3698,121 @@ function CapabilitiesPanel({
       setError("Invalid JSON.");
       return;
     }
-    const result = validateCapabilities(parsed);
-    if (!result.ok) {
-      setError(result.errors.join("; "));
+    const validationError = validate?.(parsed);
+    if (validationError) {
+      setError(validationError);
       return;
     }
     setError(null);
-    onApply?.(result.value);
+    setDirty(false);
+    onApply(parsed);
   };
-  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(
+  return /* @__PURE__ */ jsxs6("div", { className: "absolute inset-0 rounded-md border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2", children: [
+      error && /* @__PURE__ */ jsx7("span", { className: "rounded bg-destructive px-2 py-1 text-xs font-medium text-destructive-foreground", children: error }),
+      editable && /* @__PURE__ */ jsx7(
         Button2,
         {
           type: "button",
           size: "sm",
           onClick: handleApply,
-          className: "ml-auto",
+          disabled: !dirty,
           children: "Apply"
         }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Button2,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleCopy,
+          className: "gap-1.5",
+          children: [
+            copied ? /* @__PURE__ */ jsx7(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(Copy, { className: "h-3.5 w-3.5" }),
+            copied ? "Copied" : "Copy"
+          ]
+        }
       )
     ] }),
-    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(
+    editable ? /* @__PURE__ */ jsx7(
       JsonEditor,
       {
         value: text,
         editablePaths: ["/"],
         fillContainer: true,
-        onChange: setText
+        onChange: handleEditorChange
       }
-    ) })
+    ) : /* @__PURE__ */ jsx7(
+      JsonEditor,
+      {
+        value,
+        editablePaths: [],
+        fillContainer: true
+      },
+      value
+    )
   ] });
 }
 
-// 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"
-        ]
+// src/preview/CapabilitiesPanel.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function CapabilitiesPanel({
+  capabilities,
+  onApply
+}) {
+  const value = useMemo6(
+    () => JSON.stringify(capabilities ?? {}, null, 2),
+    [capabilities]
+  );
+  return /* @__PURE__ */ jsx8(
+    SchemaSourcePanel,
+    {
+      value,
+      editable: true,
+      validate: (parsed) => {
+        const result = validateCapabilities(parsed);
+        return result.ok ? null : result.errors.join("; ");
+      },
+      onApply: (parsed) => {
+        const result = validateCapabilities(parsed);
+        if (result.ok) onApply?.(result.value);
       }
-    ),
-    /* @__PURE__ */ jsx6(JsonEditor2, { value, editablePaths: [], fillContainer: true }, value)
-  ] });
+    }
+  );
+}
+
+// src/preview/PreviewPane.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function validateRootSchema(parsed) {
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return "Schema must be a JSON object.";
+  }
+  const s = parsed;
+  if (s.type !== "object") return 'Root schema must have type: "object".';
+  if (typeof s.properties !== "object" || s.properties === null) {
+    return "Root schema must have a properties object.";
+  }
+  return null;
+}
+function validateUiSchema(parsed) {
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return "UI Schema must be a JSON object.";
+  }
+  return null;
 }
 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" })
+  return /* @__PURE__ */ jsxs7(TabsList, { className: "mb-3", children: [
+    flags.showForm && /* @__PURE__ */ jsx9(TabsTrigger, { value: "form", children: "Form" }),
+    flags.isFull && flags.showForm && /* @__PURE__ */ jsx9(TabsTrigger, { value: "layout", children: "Form Layout" }),
+    flags.showTable && /* @__PURE__ */ jsx9(TabsTrigger, { value: "table", children: "Table" }),
+    /* @__PURE__ */ jsx9(TabsSeparator, {}),
+    flags.showJson && /* @__PURE__ */ jsx9(TabsTrigger, { value: "schema", children: "JSON Schema" }),
+    flags.isFull && /* @__PURE__ */ jsx9(TabsTrigger, { value: "ui", children: "UI Schema" }),
+    flags.isFull && /* @__PURE__ */ jsx9(TabsTrigger, { value: "combined", children: "Combined" }),
+    flags.showCapabilities && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+      /* @__PURE__ */ jsx9(TabsSeparator, {}),
+      /* @__PURE__ */ jsx9(TabsTrigger, { value: "capabilities", children: "Capabilities" })
     ] })
   ] });
 }
@@ -1873,22 +3830,22 @@ function PreviewPane({
     showJson: caps.previews.includes("json"),
     showCapabilities: caps.showCapabilities
   };
-  const [data, setData] = useState5(
+  const [data, setData] = useState6(
     () => extractSchemaDefaults(schema)
   );
-  const schemaText = useMemo4(() => JSON.stringify(schema, null, 2), [schema]);
-  const uiSchemaText = useMemo4(
+  const schemaText = useMemo7(() => JSON.stringify(schema, null, 2), [schema]);
+  const uiSchemaText = useMemo7(
     () => JSON.stringify(uiSchema ?? {}, null, 2),
     [uiSchema]
   );
-  const embeddedText = useMemo4(
+  const embeddedText = useMemo7(
     () => 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(
+  return /* @__PURE__ */ jsxs7(Tabs, { defaultValue: defaultTab, className: "flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsx9(PreviewTabList, { flags }),
+    flags.showForm && /* @__PURE__ */ jsx9(TabsContent, { value: "form", className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx9(
       JsonSchemaFormRenderer3,
       {
         schema,
@@ -1899,11 +3856,12 @@ function PreviewPane({
         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(
+    flags.isFull && flags.showForm && /* @__PURE__ */ jsx9(TabsContent, { value: "layout", className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx9(FormLayoutDesigner, { state }) }),
+    flags.showTable && /* @__PURE__ */ jsx9(TabsContent, { value: "table", className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsx9(TablePreview, { schema }) }),
+    /* @__PURE__ */ jsx9(
       SourceTabPanels,
       {
+        state,
         flags,
         schemaText,
         uiSchemaText,
@@ -1915,6 +3873,7 @@ function PreviewPane({
   ] });
 }
 function SourceTabPanels({
+  state,
   flags,
   schemaText,
   uiSchemaText,
@@ -1922,11 +3881,36 @@ function SourceTabPanels({
   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(
+  const canEditSource = !state.capabilities.locked && !state.capabilities.scoped;
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    flags.showJson && /* @__PURE__ */ jsx9(TabsContent, { value: "schema", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx9(
+      SchemaSourcePanel,
+      {
+        value: schemaText,
+        editable: canEditSource,
+        validate: validateRootSchema,
+        onApply: (parsed) => state.replaceSchema(parsed)
+      }
+    ) }),
+    flags.isFull && /* @__PURE__ */ jsx9(TabsContent, { value: "ui", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx9(
+      SchemaSourcePanel,
+      {
+        value: uiSchemaText,
+        editable: canEditSource,
+        validate: validateUiSchema,
+        onApply: (parsed) => state.replaceUiSchema(parsed)
+      }
+    ) }),
+    flags.isFull && /* @__PURE__ */ jsx9(TabsContent, { value: "combined", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx9(
+      SchemaSourcePanel,
+      {
+        value: embeddedText,
+        editable: false,
+        onApply: () => {
+        }
+      }
+    ) }),
+    flags.showCapabilities && /* @__PURE__ */ jsx9(TabsContent, { value: "capabilities", className: "flex-1 min-h-0 relative", children: /* @__PURE__ */ jsx9(
       CapabilitiesPanel,
       {
         capabilities,
@@ -1937,20 +3921,27 @@ function SourceTabPanels({
 }
 
 // src/inspector/Inspector.tsx
-import { useEffect as useEffect4, useMemo as useMemo8, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo14, useRef as useRef6, useState as useState8 } from "react";
 import {
   Tabs as Tabs2,
   TabsList as TabsList2,
   TabsTrigger as TabsTrigger2,
   TabsContent as TabsContent2,
-  Input as Input4,
+  Input as Input5,
   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 { useMemo as useMemo8, useRef as useRef4 } from "react";
 import { JsonSchemaFormRenderer as JsonSchemaFormRenderer4 } from "@petrarca/sonnet-forms";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from "@petrarca/sonnet-ui";
 
 // src/inspector/metaSchemas.ts
 var PROPERTY_TYPES = [
@@ -1959,8 +3950,20 @@ var PROPERTY_TYPES = [
   "integer",
   "boolean",
   "object",
-  "array"
+  "array",
+  "null"
 ];
+var PROPERTY_TYPE_CHOICES = [...PROPERTY_TYPES, "oneOf"];
+var PROPERTY_TYPE_NAMES = {
+  string: "String",
+  number: "Number",
+  integer: "Integer",
+  boolean: "Boolean",
+  object: "Object",
+  array: "Array",
+  null: "Display (text only)",
+  oneOf: "One of (variant)"
+};
 var STRING_FORMATS = [
   "",
   "email",
@@ -1995,37 +3998,100 @@ function validationProps(type) {
       return {};
   }
 }
-function buildDataMetaSchema(type) {
+var BRANCH_META_TYPE = "branch";
+function typeTraits(type) {
+  const isDisplay = type === "null";
+  const isOneOf3 = type === "oneOf";
   const isContainer2 = type === "object" || type === "array";
+  return {
+    isDisplay,
+    isOneOf: isOneOf3,
+    // Containers, display (null), and oneOf have no meaningful default value.
+    noDefault: isContainer2 || isDisplay || isOneOf3,
+    // Display notes and oneOf unions are never "required" on their own.
+    noRequired: isDisplay || isOneOf3,
+    // A fixed value (const) is only meaningful on scalar properties.
+    isScalar: type === "string" || type === "number" || type === "integer" || type === "boolean"
+  };
+}
+function buildReferenceMetaSchema() {
+  return {
+    title: "",
+    type: "object",
+    properties: {
+      title: { type: "string", title: "Label (title)" },
+      description: {
+        type: "string",
+        title: "Description",
+        "x-ui-widget": "textarea"
+      },
+      required: { type: "boolean", title: "Required" },
+      default: { type: "string", title: "Default" }
+    }
+  };
+}
+function buildDataMetaSchema(type) {
+  if (type === BRANCH_META_TYPE) {
+    return {
+      title: "",
+      type: "object",
+      properties: {
+        title: { type: "string", title: "Branch label (title)" }
+      }
+    };
+  }
+  const { isDisplay, noDefault, noRequired, isScalar, isOneOf: isOneOf3 } = typeTraits(type);
   const properties = {
-    type: { type: "string", title: "Type", enum: [...PROPERTY_TYPES] },
-    title: { type: "string", title: "Label (title)" },
+    type: {
+      type: "string",
+      title: "Type",
+      enum: [...PROPERTY_TYPE_CHOICES],
+      "x-ui-options": { enumNames: PROPERTY_TYPE_NAMES }
+    },
+    title: { type: "string", title: isDisplay ? "Text" : "Label (title)" },
     description: {
       type: "string",
       title: "Description",
       "x-ui-widget": "textarea"
     },
-    required: { type: "boolean", title: "Required" },
-    ...isContainer2 ? {} : { default: { type: "string", title: "Default" } },
+    ...isOneOf3 ? {
+      discriminator: {
+        type: "string",
+        title: "Discriminator property",
+        "x-ui-description": "Shared property whose const value tags each branch. Auto-detected when blank."
+      }
+    } : {},
+    ...noRequired ? {} : { required: { type: "boolean", title: "Required" } },
+    ...noDefault ? {} : { default: { type: "string", title: "Default" } },
+    ...isScalar ? {
+      const: {
+        type: "string",
+        title: "Const (fixed value)",
+        "x-ui-description": "Fixed value this property must equal. Leave blank for none."
+      }
+    } : {},
     ...validationProps(type)
   };
   return { title: "", type: "object", properties };
 }
-function propertyToDataValues(prop, required) {
+function propertyToDataValues(prop2, required) {
   return {
-    type: prop.type ?? "string",
-    title: prop.title,
-    description: prop.description,
-    default: prop.default,
+    type: prop2.oneOf ? "oneOf" : prop2.type ?? "string",
+    title: prop2.title,
+    description: prop2.description,
+    default: prop2.default,
+    // const may be any JSON type; the Data-tab field edits it as a string.
+    const: prop2.const == null ? void 0 : String(prop2.const),
     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
+    minLength: prop2.minLength,
+    maxLength: prop2.maxLength,
+    pattern: prop2.pattern,
+    format: prop2.format,
+    minimum: prop2.minimum,
+    maximum: prop2.maximum,
+    minItems: prop2.minItems,
+    maxItems: prop2.maxItems,
+    discriminator: prop2.discriminator?.propertyName
   };
 }
 function dataValuesToPatch(values) {
@@ -2043,6 +4109,7 @@ function dataValuesToPatch(values) {
   setStr("title", values.title);
   setStr("description", values.description);
   setStr("default", values.default);
+  setStr("const", values.const);
   setStr("format", values.format);
   setStr("pattern", values.pattern);
   setNum("minLength", values.minLength);
@@ -2051,28 +4118,31 @@ function dataValuesToPatch(values) {
   setNum("maximum", values.maximum);
   setNum("minItems", values.minItems);
   setNum("maxItems", values.maxItems);
+  if (typeof values.discriminator === "string" && values.discriminator.length) {
+    patch.discriminator = { propertyName: values.discriminator };
+  } else {
+    patch.discriminator = void 0;
+  }
   return patch;
 }
 
 // src/inspector/DataTab.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function DataTab({ node, state }) {
-  const type = node.property.type ?? "string";
-  const schema = useMemo5(() => buildDataMetaSchema(type), [type]);
-  const values = useMemo5(
+  const isBranch = node.slotKind === "branch";
+  const type = isBranch ? BRANCH_META_TYPE : node.property.oneOf ? "oneOf" : node.property.type ?? "string";
+  const schema = useMemo8(() => buildDataMetaSchema(type), [type]);
+  const values = useMemo8(
     () => propertyToDataValues(node.property, node.required),
     [node.property, node.required]
   );
-  const prevRef = useRef3(values);
+  const prevRef = useRef4(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
-      );
+    if (!isBranch && next.type !== prev.type) {
+      state.changePropertyType(node.path, next.type);
       return;
     }
     if (next.required !== prev.required) {
@@ -2081,30 +4151,66 @@ function DataTab({ node, state }) {
     }
     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
-  );
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
+    !isBranch && /* @__PURE__ */ jsx10(ReferencePicker, { node, state, disabled: state.readOnly }),
+    /* @__PURE__ */ jsx10(
+      JsonSchemaFormRenderer4,
+      {
+        schema,
+        data: values,
+        onChange: handleChange,
+        deferStateUpdates: true,
+        showActions: false,
+        showExtraProperties: false,
+        readOnly: state.readOnly
+      },
+      pathKey(node.path) + ":" + type
+    )
+  ] });
+}
+function availableDefinitions(state, node) {
+  const defs = state.schema.$defs ?? state.schema.definitions;
+  if (!defs) return [];
+  const selfName = node.path.length === 1 && node.path[0].kind === "def" ? node.path[0].name : void 0;
+  return Object.keys(defs).filter((name) => name !== selfName);
+}
+function ReferencePicker({
+  node,
+  state,
+  disabled
+}) {
+  const names = availableDefinitions(state, node);
+  if (names.length === 0) return null;
+  const isArray = node.property.type === "array";
+  const label = isArray ? "Reference a definition (array items)" : "Reference a definition";
+  const placeholder = isArray ? "Make items reuse a shared definition..." : "Reuse a shared definition...";
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx10("label", { className: "text-xs font-medium text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs8(
+      Select,
+      {
+        value: "",
+        onValueChange: (name) => state.setReference(node.path, name),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx10(SelectTrigger, { className: "h-8 text-sm", children: /* @__PURE__ */ jsx10(SelectValue, { placeholder }) }),
+          /* @__PURE__ */ jsx10(SelectContent, { children: names.map((name) => /* @__PURE__ */ jsx10(SelectItem, { value: name, children: name }, name)) })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/inspector/UITab.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { JsonSchemaFormRenderer as JsonSchemaFormRenderer5 } from "@petrarca/sonnet-forms";
-import { JsonEditor as JsonEditor3 } from "@petrarca/sonnet-ui/json-editor";
+import { JsonEditor as JsonEditor2 } 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";
+import { FormSelect as FormSelect4 } from "@petrarca/sonnet-forms";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var PRESENTATION_META_SCHEMA = {
   title: "",
   type: "object",
@@ -2167,14 +4273,15 @@ function PresentationEditor({
     }
     onChange(next);
   };
-  return /* @__PURE__ */ jsxs6("div", { children: [
-    /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Presentation (form overrides)" }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsx11("p", { className: "heading-meta mb-2", children: "Presentation (form overrides)" }),
+    /* @__PURE__ */ jsx11(
       JsonSchemaFormRenderer5,
       {
         schema: PRESENTATION_META_SCHEMA,
         data: values,
         onChange: handleChange,
+        deferStateUpdates: true,
         showActions: false,
         showExtraProperties: false,
         readOnly
@@ -2191,14 +4298,15 @@ function OptionsEditor({
   onChange
 }) {
   if (optionsSchema) {
-    return /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Options" }),
-      /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx11("p", { className: "heading-meta mb-2", children: "Options" }),
+      /* @__PURE__ */ jsx11(
         JsonSchemaFormRenderer5,
         {
           schema: optionsSchema,
           data: currentOptions,
           onChange,
+          deferStateUpdates: true,
           showActions: false,
           showExtraProperties: false,
           readOnly
@@ -2207,10 +4315,10 @@ function OptionsEditor({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs6("div", { children: [
-    /* @__PURE__ */ jsx8("p", { className: "heading-meta mb-2", children: "Options (raw JSON)" }),
-    /* @__PURE__ */ jsx8(
-      JsonEditor3,
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsx11("p", { className: "heading-meta mb-2", children: "Options (raw JSON)" }),
+    /* @__PURE__ */ jsx11(
+      JsonEditor2,
       {
         value: JSON.stringify(currentOptions ?? {}, null, 2),
         editablePaths: readOnly ? [] : ["/"],
@@ -2231,17 +4339,17 @@ function UITab({
   state,
   widgetOptions
 }) {
-  const pathKey2 = node.path.join(".");
+  const idBase = pathKey(node.path);
   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(
+  const widgetChoices = useMemo9(
     () => compatibleWidgets(node.property),
     [node.property]
   );
-  const optionsSchema = useMemo6(() => {
+  const optionsSchema = useMemo9(() => {
     if (!currentWidget) return null;
     const merged = { ...WIDGET_OPTION_DEFS, ...widgetOptions ?? {} };
     const descriptors = merged[currentWidget];
@@ -2274,11 +4382,11 @@ function UITab({
     else delete next["x-ui-options"];
     state.setUiEntry(node.path, next);
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx8(
-      FormSelect3,
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx11(
+      FormSelect4,
       {
-        id: `${pathKey2}-widget`,
+        id: `${idBase}-widget`,
         name: "widget",
         label: "Widget",
         value: currentWidget ?? "__auto__",
@@ -2291,29 +4399,29 @@ function UITab({
         clearable: false
       }
     ),
-    currentWidget && /* @__PURE__ */ jsx8(
+    currentWidget && /* @__PURE__ */ jsx11(
       OptionsEditor,
       {
-        widget: `${pathKey2}:${currentWidget}`,
+        widget: `${idBase}:${currentWidget}`,
         optionsSchema,
         currentOptions,
         readOnly: state.readOnly,
         onChange: setOptions
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       PresentationEditor,
       {
-        fieldName: pathKey2,
+        fieldName: idBase,
         uiEntry,
         readOnly: state.readOnly,
         onChange: (entry) => state.setUiEntry(node.path, entry)
       }
     ),
-    /* @__PURE__ */ jsx8(
-      FormSelect3,
+    /* @__PURE__ */ jsx11(
+      FormSelect4,
       {
-        id: `${pathKey2}-labelPlacement`,
+        id: `${idBase}-labelPlacement`,
         name: "labelPlacement",
         label: "Label placement",
         value: currentOptions.labelPlacement ?? "__inherit__",
@@ -2334,25 +4442,25 @@ function UITab({
 }
 
 // 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 { useEffect as useEffect4, useState as useState7 } from "react";
+import { Input as Input4, IconButton as IconButton3, Button as Button3 } 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";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function EnumEditor({
   node,
   state
 }) {
-  const [rows, setRows] = useState6(
+  const [rows, setRows] = useState7(
     () => readEnumChoices(node.property, getUiEntryAtPath(state.uiSchema, node.path))
   );
-  useEffect3(() => {
+  useEffect4(() => {
     setRows(
       readEnumChoices(
         node.property,
         getUiEntryAtPath(state.uiSchema, node.path)
       )
     );
-  }, [node.path.join(".")]);
+  }, [pathKey(node.path)]);
   const canEditLabels = true;
   const commit = (next) => {
     setRows(next);
@@ -2363,20 +4471,20 @@ function EnumEditor({
   };
   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." })
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium", children: "Allowed values" }),
+      /* @__PURE__ */ jsx12("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.length === 0 ? /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: "No choices yet." }) : /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
+      canEditLabels && /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 px-1", children: [
+        /* @__PURE__ */ jsx12("span", { className: "heading-meta flex-1", children: "Value" }),
+        /* @__PURE__ */ jsx12("span", { className: "heading-meta flex-1", children: "Label (optional)" }),
+        /* @__PURE__ */ jsx12("span", { className: "w-7" })
       ] }),
-      rows.map((row, i) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx9(
-          Input3,
+      rows.map((row, i) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx12(
+          Input4,
           {
             value: row.value,
             onChange: (e) => updateRow(i, { value: e.target.value }),
@@ -2385,8 +4493,8 @@ function EnumEditor({
             className: "h-8 text-sm flex-1"
           }
         ),
-        canEditLabels && /* @__PURE__ */ jsx9(
-          Input3,
+        canEditLabels && /* @__PURE__ */ jsx12(
+          Input4,
           {
             value: row.label ?? "",
             onChange: (e) => updateRow(i, { label: e.target.value }),
@@ -2395,26 +4503,26 @@ function EnumEditor({
             className: "h-8 text-sm flex-1"
           }
         ),
-        !state.readOnly && /* @__PURE__ */ jsx9(
+        !state.readOnly && /* @__PURE__ */ jsx12(
           IconButton3,
           {
             label: "Remove value",
             tone: "destructive",
             onClick: () => removeRow(i),
-            children: /* @__PURE__ */ jsx9(Trash23, {})
+            children: /* @__PURE__ */ jsx12(Trash23, {})
           }
         )
       ] }, i))
     ] }),
-    !state.readOnly && /* @__PURE__ */ jsxs7(
-      Button4,
+    !state.readOnly && /* @__PURE__ */ jsxs10(
+      Button3,
       {
         variant: "outline",
         size: "sm",
         className: "gap-1.5",
         onClick: addRow,
         children: [
-          /* @__PURE__ */ jsx9(Plus3, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx12(Plus3, { className: "h-4 w-4" }),
           "Add value"
         ]
       }
@@ -2423,11 +4531,11 @@ function EnumEditor({
 }
 
 // src/inspector/TableHintsTab.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo10 } 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";
+import { JsonEditor as JsonEditor3 } from "@petrarca/sonnet-ui/json-editor";
+import { FormSelect as FormSelect5, JsonSchemaFormRenderer as JsonSchemaFormRenderer6 } from "@petrarca/sonnet-forms";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var CELL_NAMES = Object.keys(CELL_RENDERERS);
 var COLUMN_META_SCHEMA = {
   title: "",
@@ -2444,7 +4552,7 @@ function TableHintsTab({
   state
 }) {
   const hints = readTableHints(node.property);
-  const cellOptions = useMemo7(
+  const cellOptions = useMemo10(
     () => JSON.stringify(hints.cellOptions ?? {}, null, 2),
     [hints.cellOptions]
   );
@@ -2467,9 +4575,9 @@ function TableHintsTab({
       column.minWidth = v.minWidth;
     commit({ column });
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx10(
-      FormSelect4,
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx13(
+      FormSelect5,
       {
         id: `${node.key}-cell`,
         name: "cell",
@@ -2484,25 +4592,26 @@ function TableHintsTab({
         clearable: false
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx10("p", { className: "heading-meta mb-2", children: "Column" }),
-      /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx13("p", { className: "heading-meta mb-2", children: "Column" }),
+      /* @__PURE__ */ jsx13(
         JsonSchemaFormRenderer6,
         {
           schema: COLUMN_META_SCHEMA,
           data: columnValues,
           onChange: onColumnChange,
+          deferStateUpdates: true,
           showActions: false,
           showExtraProperties: false,
           readOnly: state.readOnly
         },
-        node.path.join(".")
+        pathKey(node.path)
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx10("p", { className: "heading-meta mb-2", children: "Cell options (JSON)" }),
-      /* @__PURE__ */ jsx10(
-        JsonEditor4,
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx13("p", { className: "heading-meta mb-2", children: "Cell options (JSON)" }),
+      /* @__PURE__ */ jsx13(
+        JsonEditor3,
         {
           value: cellOptions,
           editablePaths: state.readOnly ? [] : ["/"],
@@ -2522,22 +4631,236 @@ function TableHintsTab({
   ] });
 }
 
+// src/inspector/ConditionEditor.tsx
+import { useMemo as useMemo11 } from "react";
+import { FormSelect as FormSelect6 } from "@petrarca/sonnet-forms";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function siblingFields(state, node) {
+  const objectPath = node.path.slice(0, -1);
+  const owner = objectPath.length === 0 ? { properties: state.schema.properties } : getProperty(state.schema, objectPath);
+  return owner?.properties ?? {};
+}
+function ConditionEditor({
+  node,
+  state
+}) {
+  const condition2 = useMemo11(
+    () => ifToCondition(node.property.if),
+    [node.property.if]
+  );
+  const fieldProps = useMemo11(() => siblingFields(state, node), [state, node]);
+  const fields = useMemo11(() => Object.keys(fieldProps), [fieldProps]);
+  const disabled = state.readOnly;
+  const lastSeg = node.path[node.path.length - 1];
+  const combinator = lastSeg?.kind === "condition" ? lastSeg.combinator : "allOf";
+  const objectPath = node.path.slice(0, -1);
+  const commit = (next) => {
+    const ifSchema = conditionToIf(next, fieldProps[next.field]?.type);
+    if (ifSchema) state.setCondition(node.path, ifSchema);
+  };
+  const fieldOptions = fields.map((f) => ({ value: f, label: f }));
+  const needsValue = condition2.operator !== "exists";
+  return /* @__PURE__ */ jsxs12("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs12("p", { className: "text-xs text-muted-foreground", children: [
+      "Show the ",
+      /* @__PURE__ */ jsx14("span", { className: "font-medium", children: "then" }),
+      " fields when this condition holds (otherwise the ",
+      /* @__PURE__ */ jsx14("span", { className: "font-medium", children: "else" }),
+      " ",
+      "fields, if any)."
+    ] }),
+    /* @__PURE__ */ jsx14(
+      FormSelect6,
+      {
+        id: "condition-match",
+        name: "match",
+        label: "Match (all conditions on this object)",
+        options: [
+          { value: "allOf", label: "All (AND)" },
+          { value: "anyOf", label: "Any (OR)" }
+        ],
+        value: combinator,
+        onChange: (v) => state.setConditionalBehavior(
+          objectPath,
+          v === "anyOf" ? "anyOf" : "allOf"
+        ),
+        clearable: false,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      FormSelect6,
+      {
+        id: "condition-field",
+        name: "field",
+        label: "When property",
+        options: fieldOptions,
+        value: condition2.field || null,
+        onChange: (v) => commit({ ...condition2, field: v ?? "" }),
+        placeholder: "Select a property...",
+        clearable: false,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      FormSelect6,
+      {
+        id: "condition-operator",
+        name: "operator",
+        label: "Operator",
+        options: OPERATOR_OPTIONS,
+        value: condition2.operator,
+        onChange: (v) => commit({ ...condition2, operator: v ?? "=" }),
+        clearable: false,
+        disabled
+      }
+    ),
+    needsValue && /* @__PURE__ */ jsx14(
+      OperatorValueInput,
+      {
+        id: "condition-value",
+        cacheKey: `${node.path.length}:${condition2.field}:${condition2.operator}`,
+        value: condition2.value,
+        onCommit: (v) => commit({ ...condition2, value: v }),
+        disabled: disabled || !condition2.field
+      }
+    )
+  ] });
+}
+
+// src/inspector/RuleEditor.tsx
+import { useMemo as useMemo12 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function siblingPointers(state, node) {
+  const parentProps = node.path.length <= 1 ? state.schema.properties : findParentProperties(state, node);
+  const self = node.key;
+  return Object.entries(parentProps ?? {}).filter(([k]) => k !== self).map(([k, prop2]) => ({ pointer: `/${k}`, type: prop2.type }));
+}
+function findParentProperties(state, node) {
+  let props = state.schema.properties;
+  for (let i = 0; i < node.path.length - 1; i++) {
+    const seg = node.path[i];
+    if (seg.kind !== "prop" || !props) return void 0;
+    const next = props[seg.key];
+    props = next?.type === "array" ? next.items?.properties : next?.properties;
+    if (!props) return void 0;
+  }
+  return props;
+}
+function RuleEditor({
+  node,
+  state
+}) {
+  const scopes = useMemo12(() => siblingPointers(state, node), [state, node]);
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: "Toggle this field's visibility (or enabled state) based on another field's value. The field keeps its position in the form." }),
+    /* @__PURE__ */ jsx15(
+      RuleFields,
+      {
+        rule: node.property["x-ui-rule"],
+        scopes,
+        effects: FIELD_EFFECT_OPTIONS,
+        idPrefix: "rule",
+        disabled: state.readOnly,
+        onChange: (rule) => state.updateProperty(node.path, { "x-ui-rule": rule })
+      }
+    )
+  ] });
+}
+
+// src/inspector/ReferenceTab.tsx
+import { useMemo as useMemo13, useRef as useRef5 } from "react";
+import { JsonSchemaFormRenderer as JsonSchemaFormRenderer7 } from "@petrarca/sonnet-forms";
+import { Button as Button4 } from "@petrarca/sonnet-ui";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function toOverrides(prop2, required) {
+  return {
+    title: prop2.title,
+    description: prop2.description,
+    // Coerce to string for the text field; non-string defaults (number, boolean)
+    // are serialised and written back as strings -- v1 limitation.
+    default: prop2.default == null ? void 0 : String(prop2.default),
+    required
+  };
+}
+function toPatch(values) {
+  const str = (v) => typeof v === "string" && v.length > 0 ? v : void 0;
+  return {
+    title: str(values.title),
+    description: str(values.description),
+    default: str(values.default)
+  };
+}
+function ReferenceTab({
+  node,
+  state
+}) {
+  const schema = useMemo13(() => buildReferenceMetaSchema(), []);
+  const values = useMemo13(
+    () => toOverrides(node.property, node.required),
+    [node.property, node.required]
+  );
+  const prevRef = useRef5(values);
+  prevRef.current = values;
+  const handleChange = (data) => {
+    const next = data;
+    const prev = prevRef.current;
+    if (next.required !== prev.required) {
+      state.setRequired(node.path, !!next.required);
+      return;
+    }
+    state.updateProperty(node.path, toPatch(next));
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs14("p", { className: "text-sm text-muted-foreground", children: [
+      "References ",
+      /* @__PURE__ */ jsx16("span", { className: "font-medium", children: node.reference }),
+      ". Its fields come from a shared definition (read-only here -- edit the definition to change all usages). The values below override the label, help text, and default for this usage only."
+    ] }),
+    /* @__PURE__ */ jsx16(
+      JsonSchemaFormRenderer7,
+      {
+        schema,
+        data: values,
+        onChange: handleChange,
+        deferStateUpdates: true,
+        showActions: false,
+        showExtraProperties: false,
+        readOnly: state.readOnly
+      },
+      pathKey(node.path)
+    ),
+    !state.readOnly && state.canEditProperty(node.path) && /* @__PURE__ */ jsxs14("div", { className: "border-t pt-3", children: [
+      /* @__PURE__ */ jsx16(
+        Button4,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => state.changePropertyType(node.path, "string"),
+          children: "Stop referencing"
+        }
+      ),
+      /* @__PURE__ */ jsx16("p", { className: "mt-1 text-xs text-muted-foreground", children: "Removes the reference and turns this into an editable property." })
+    ] })
+  ] });
+}
+
 // src/inspector/Inspector.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } 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(() => {
+  const [editing, setEditing] = useState8(false);
+  const [value, setValue] = useState8(fieldKey);
+  const ref = useRef6(null);
+  useEffect5(() => {
     setValue(fieldKey);
     setEditing(false);
   }, [fieldKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (editing) {
       ref.current?.focus();
       ref.current?.select();
@@ -2553,14 +4876,14 @@ function KeyField({
     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__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold truncate", children: fieldKey }),
+      !readOnly && /* @__PURE__ */ jsx17(IconButton4, { label: "Rename property", onClick: () => setEditing(true), children: /* @__PURE__ */ jsx17(Pencil, {}) })
     ] });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx11(
-      Input4,
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx17(
+      Input5,
       {
         ref,
         value,
@@ -2577,8 +4900,8 @@ function KeyField({
         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, {}) })
+    /* @__PURE__ */ jsx17(IconButton4, { label: "Confirm rename", onClick: commit, children: /* @__PURE__ */ jsx17(Check2, {}) }),
+    /* @__PURE__ */ jsx17(IconButton4, { label: "Cancel rename", onClick: cancel, children: /* @__PURE__ */ jsx17(X, {}) })
   ] });
 }
 function findNode(nodes, path) {
@@ -2589,49 +4912,109 @@ function findNode(nodes, path) {
   }
   return void 0;
 }
+function InspectorHeader({
+  node,
+  state
+}) {
+  const isDefinition = node.kind === "definition";
+  const noRename = isDefinition ? state.capabilities.locked : state.readOnly || node.slotKind === "branch" || node.slotKind === "conditional";
+  const onRename = (next) => isDefinition ? state.renameDefinition(node.key, next) : state.renameProperty(node.path, next);
+  return /* @__PURE__ */ jsxs15("div", { className: "mb-3 space-y-1", children: [
+    /* @__PURE__ */ jsx17(
+      KeyField,
+      {
+        fieldKey: node.key,
+        readOnly: noRename,
+        onRename
+      },
+      pathKey(node.path)
+    ),
+    /* @__PURE__ */ jsx17("p", { className: "font-mono text-xs text-muted-foreground", children: isDefinition ? "definition" : node.typeLabel })
+  ] });
+}
+function PropertyTabs({
+  node,
+  state,
+  widgetOptions
+}) {
+  const enumCapable = ENUM_CAPABLE_TYPES.has(node.property.type ?? "");
+  const ruleUnsupported = node.path.some(
+    (s) => s.kind === "branch" || s.kind === "condition" || s.kind === "slot"
+  );
+  const uiUnsupported = node.path.some((s) => s.kind !== "prop");
+  return /* @__PURE__ */ jsxs15(Tabs2, { defaultValue: "data", children: [
+    /* @__PURE__ */ jsxs15(TabsList2, { className: "mb-3", children: [
+      /* @__PURE__ */ jsx17(TabsTrigger2, { value: "data", children: "Data" }),
+      enumCapable && /* @__PURE__ */ jsx17(TabsTrigger2, { value: "enum", children: "Enum" }),
+      /* @__PURE__ */ jsx17(TabsTrigger2, { value: "ui", children: "UI" }),
+      !ruleUnsupported && /* @__PURE__ */ jsx17(TabsTrigger2, { value: "rule", children: "Rule" }),
+      /* @__PURE__ */ jsx17(TabsTrigger2, { value: "table", children: "Table" })
+    ] }),
+    /* @__PURE__ */ jsx17(TabsContent2, { value: "data", children: /* @__PURE__ */ jsx17(DataTab, { node, state }) }),
+    enumCapable && /* @__PURE__ */ jsx17(TabsContent2, { value: "enum", children: /* @__PURE__ */ jsx17(EnumEditor, { node, state }) }),
+    !ruleUnsupported && /* @__PURE__ */ jsx17(TabsContent2, { value: "rule", children: /* @__PURE__ */ jsx17(RuleEditor, { node, state }) }),
+    /* @__PURE__ */ jsx17(TabsContent2, { value: "ui", children: uiUnsupported ? /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground p-2", children: "Widget hints for properties inside a variant branch or definition are not yet editable here. Author them in the JSON Schema or UI Schema tab." }) : /* @__PURE__ */ jsx17(UITab, { node, state, widgetOptions }) }),
+    /* @__PURE__ */ jsx17(TabsContent2, { value: "table", children: /* @__PURE__ */ jsx17(TableHintsTab, { node, state }) })
+  ] }, `${pathKey(node.path)}:${enumCapable}`);
+}
+function InspectorBody({
+  node,
+  state,
+  widgetOptions
+}) {
+  const lastSeg = node.path[node.path.length - 1];
+  if (node.kind === "reference") {
+    return /* @__PURE__ */ jsx17(ReferenceTab, { node, state });
+  }
+  if (node.readOnly) {
+    return /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground p-2", children: "This field comes from a shared definition and is read-only here. Edit the definition in the JSON Schema tab to change it." });
+  }
+  if (node.kind === "definition") {
+    return /* @__PURE__ */ jsxs15("p", { className: "text-sm text-muted-foreground p-2", children: [
+      "Reusable definition ",
+      /* @__PURE__ */ jsx17("span", { className: "font-medium", children: node.key }),
+      ". Add or edit its fields in the tree; reference it from a property to reuse its shape. Renaming it here updates every reference."
+    ] });
+  }
+  if (node.kind === "conditional") {
+    return /* @__PURE__ */ jsx17(ConditionEditor, { node, state });
+  }
+  if (node.slotKind === "conditional" && lastSeg?.kind === "slot") {
+    return /* @__PURE__ */ jsxs15("p", { className: "text-sm text-muted-foreground p-2", children: [
+      "Add fields to this ",
+      /* @__PURE__ */ jsx17("span", { className: "font-medium", children: node.key }),
+      " ",
+      "branch from the tree. They apply when the condition",
+      " ",
+      node.key === "then" ? "holds" : "does not hold",
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsx17(PropertyTabs, { node, state, widgetOptions });
+}
 function Inspector({
   state,
   widgetOptions
 }) {
-  const tree = useMemo8(() => buildPropertyTree(state.schema), [state.schema]);
+  const tree = useMemo14(
+    () => buildPropertyTree(state.schema, state.refResolver),
+    [state.schema, state.refResolver]
+  );
   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." });
+    return /* @__PURE__ */ jsx17("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}`)
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx17(InspectorHeader, { node, state }),
+    /* @__PURE__ */ jsx17(InspectorBody, { node, state, widgetOptions })
   ] });
 }
 
 // src/SchemaDesigner.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function SchemaDesigner(props) {
-  const [capabilities, setCapabilities] = useState8(props.capabilities);
-  useEffect5(() => {
+  const [capabilities, setCapabilities] = useState9(props.capabilities);
+  useEffect6(() => {
     setCapabilities(props.capabilities);
   }, [props.capabilities]);
   const state = useDesignerState({ ...props, capabilities });
@@ -2657,17 +5040,17 @@ function SchemaDesigner(props) {
     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(
+  const [inspectorCollapsed, setInspectorCollapsed] = useState9(false);
+  const [treeCollapsed, setTreeCollapsed] = useState9(false);
+  const [settingsOpen, setSettingsOpen] = useState9(false);
+  return /* @__PURE__ */ jsxs16("div", { className: "flex w-full h-full overflow-hidden border rounded-lg bg-background", children: [
+    !treeCollapsed && /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      /* @__PURE__ */ jsx18(
         "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(
+          className: state.capabilities.showPreview ? "shrink-0 overflow-hidden p-3 flex flex-col min-h-0" : "flex-1 min-w-0 overflow-hidden p-3 flex flex-col min-h-0",
+          children: /* @__PURE__ */ jsx18(
             PropertyTree,
             {
               state,
@@ -2676,7 +5059,7 @@ function SchemaDesigner(props) {
           )
         }
       ),
-      state.capabilities.showPreview && /* @__PURE__ */ jsx12(
+      state.capabilities.showPreview && /* @__PURE__ */ jsx18(
         ResizeHandle,
         {
           orientation: "vertical",
@@ -2686,15 +5069,15 @@ function SchemaDesigner(props) {
         }
       )
     ] }),
-    treeCollapsed && /* @__PURE__ */ jsx12("div", { className: "shrink-0 border-r flex flex-col items-center gap-1 p-1", children: /* @__PURE__ */ jsx12(
+    treeCollapsed && /* @__PURE__ */ jsx18("div", { className: "shrink-0 border-r flex flex-col items-center gap-1 p-1", children: /* @__PURE__ */ jsx18(
       IconButton5,
       {
         label: "Expand properties",
         onClick: () => setTreeCollapsed(false),
-        children: /* @__PURE__ */ jsx12(PanelLeftOpen, {})
+        children: /* @__PURE__ */ jsx18(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(
+    state.capabilities.showPreview && /* @__PURE__ */ jsx18("div", { className: "flex-1 min-w-0 overflow-hidden p-4 flex flex-col min-h-0", children: /* @__PURE__ */ jsx18(
       PreviewPane,
       {
         state,
@@ -2702,8 +5085,8 @@ function SchemaDesigner(props) {
         onCapabilitiesChange: setCapabilities
       }
     ) }),
-    !inspectorCollapsed && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx12(
+    !inspectorCollapsed && /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      /* @__PURE__ */ jsx18(
         ResizeHandle,
         {
           orientation: "vertical",
@@ -2712,57 +5095,57 @@ function SchemaDesigner(props) {
           onDoubleClick: resetInspectorWidth
         }
       ),
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs16(
         "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(
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1 mb-2", children: [
+              /* @__PURE__ */ jsx18("p", { className: "heading-meta", children: "Inspector" }),
+              /* @__PURE__ */ jsxs16("span", { className: "ml-auto flex gap-0.5", children: [
+                /* @__PURE__ */ jsx18(
                   IconButton5,
                   {
                     label: "Form settings",
                     onClick: () => setSettingsOpen(true),
-                    children: /* @__PURE__ */ jsx12(Settings, {})
+                    children: /* @__PURE__ */ jsx18(Settings, {})
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx18(
                   IconButton5,
                   {
                     label: "Collapse inspector",
                     onClick: () => setInspectorCollapsed(true),
-                    children: /* @__PURE__ */ jsx12(PanelRightClose, {})
+                    children: /* @__PURE__ */ jsx18(PanelRightClose, {})
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx12(Inspector, { state, widgetOptions: props.widgetOptions })
+            /* @__PURE__ */ jsx18(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(
+    inspectorCollapsed && /* @__PURE__ */ jsxs16("div", { className: "shrink-0 border-l flex flex-col items-center gap-1 p-1", children: [
+      /* @__PURE__ */ jsx18(
         IconButton5,
         {
           label: "Expand inspector",
           onClick: () => setInspectorCollapsed(false),
-          children: /* @__PURE__ */ jsx12(PanelRightOpen, {})
+          children: /* @__PURE__ */ jsx18(PanelRightOpen, {})
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx18(
         IconButton5,
         {
           label: "Form settings",
           onClick: () => setSettingsOpen(true),
-          children: /* @__PURE__ */ jsx12(Settings, {})
+          children: /* @__PURE__ */ jsx18(Settings, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx18(
       FormSettingsSheet,
       {
         open: settingsOpen,
@@ -2784,41 +5167,77 @@ export {
   TableHintsTab,
   TablePreview,
   UITab,
+  addBranch,
+  addConditional,
+  addDefinition,
+  addElse,
+  addLayoutGroup,
   addProperty,
+  branch,
   buildPropertyTree,
   capabilitiesSchema,
   changePropertyType,
   childContainer,
-  childrenOf,
+  childSlots,
   compatibleWidgets,
+  condition,
+  def,
+  definitionUsageCount,
+  definitionsOf,
   deleteProperty,
   embedUiSchema,
   getProperty,
   getScopedLayout,
   getUiEntryAtPath,
   isContainer,
+  isReservedKey,
   layoutScopes,
+  moveBranch,
+  moveLayoutGroup,
   moveProperty,
+  newBranch,
+  newCondition,
   newProperty,
   orderedKeys,
+  parsePathKey,
   pathKey,
+  placeFieldInGroup,
+  prop,
   propertyKind,
   readEnumChoices,
   readTableHints,
+  removeBranch,
+  removeConditional,
+  removeDefinition,
+  removeElse,
+  removeLayoutGroup,
+  renameDefinition,
+  renameLayoutGroup,
   renameProperty,
   resolveCapabilities,
   samePath,
+  sameSegment,
   sampleRows,
+  schemaAsRootProp,
+  setCondition,
+  setConditionalBehavior,
   setEnum,
   setGlobalOptions,
+  setLayoutGroupRule,
   setPropertyLayout,
+  setReference,
   setRequired,
   setRootLayout,
   setRootLayoutRows,
+  setScopedGroupRows,
+  setScopedLayoutGroups,
+  setScopedLayoutMode,
   setScopedLayoutOptions,
   setScopedLayoutRows,
+  setScopedLayoutVariant,
   setTableHints,
   setUiEntry,
+  slot,
   updateProperty,
   useDesignerState,
   validateCapabilities