@pure-ds/core 0.4.18 → 0.4.20

package/public/assets/pds/components/{pds-jsonform.js → pds-form.js}

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing, ifDefined, ref } from "#pds/lit";
+import { LitElement, html, nothing, ifDefined, ref, keyed } from "#pds/lit";
 
 function getStep(value) {
   if (typeof value === "number") {
@@ -8,7 +8,7 @@ function getStep(value) {
   return "1"; // Default step for integers
 }
 
-// Default options for pds-jsonform
+// Default options for pds-form
 const DEFAULT_OPTIONS = {
   widgets: {
     booleans: "toggle", // 'toggle' | 'checkbox'
@@ -31,33 +31,33 @@ const DEFAULT_OPTIONS = {
 };
 
 /**
- * <pds-jsonform>
+ * <pds-form>
  *
  * Form Actions:
  * By default, the form includes Submit and Reset buttons inside the <form> element.
  *
  * Usage options:
  * 1. Default buttons:
- *    <pds-jsonform .jsonSchema=${schema}></pds-jsonform>
+ *    <pds-form .jsonSchema=${schema}></pds-form>
  *
  * 2. Customize labels:
- *    <pds-jsonform .jsonSchema=${schema} submit-label="Save" reset-label="Clear"></pds-jsonform>
+ *    <pds-form .jsonSchema=${schema} submit-label="Save" reset-label="Clear"></pds-form>
  *
  * 3. Hide reset button:
- *    <pds-jsonform .jsonSchema=${schema} hide-reset></pds-jsonform>
+ *    <pds-form .jsonSchema=${schema} hide-reset></pds-form>
  *
  * 4. Add extra buttons (slot):
- *    <pds-jsonform .jsonSchema=${schema}>
+ *    <pds-form .jsonSchema=${schema}>
  *      <button type="button" slot="actions" @click=${...}>Cancel</button>
- *    </pds-jsonform>
+ *    </pds-form>
  *
  * 5. Completely custom actions (hides default buttons):
- *    <pds-jsonform .jsonSchema=${schema} hide-actions>
+ *    <pds-form .jsonSchema=${schema} hide-actions>
  *      <div slot="actions" class="flex gap-md">
  *        <button type="submit" class="btn btn-primary">Custom Submit</button>
  *        <button type="button" class="btn">Custom Action</button>
  *      </div>
- *    </pds-jsonform>
+ *    </pds-form>
  */
 export class SchemaForm extends LitElement {
   static properties = {
@@ -89,6 +89,9 @@ export class SchemaForm extends LitElement {
   #idBase = `sf-${Math.random().toString(36).slice(2)}`;
   #mergedOptions = null;
   #slottedActions = [];
+  #dependencies = new Map(); // targetPath → Set of sourcePaths that affect it
+  #resetKey = 0; // Incremented on reset to force Lit to recreate DOM elements
+  #slottedContent = new Map(); // slot name → element for ui:before/ui:after slot references
 
   constructor() {
     super();
@@ -156,12 +159,26 @@ export class SchemaForm extends LitElement {
     return this.#onSubmit(new Event("submit", { cancelable: true }));
   }
 
+  reset() {
+    const form = this.renderRoot?.querySelector("form");
+    if (form) form.reset(); // Triggers native reset which calls #onReset
+    else this.#onReset(new Event("reset")); // Manual fallback
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    // Capture slotted actions before first render (Light DOM doesn't support native slots)
+    // Capture slotted elements before first render (Light DOM doesn't support native slots)
     this.#slottedActions = Array.from(
       this.querySelectorAll('[slot="actions"]')
     );
+    // Capture all named slots for ui:before/ui:after references
+    this.#slottedContent = new Map();
+    this.querySelectorAll('[slot]').forEach((el) => {
+      const slotName = el.getAttribute('slot');
+      if (slotName && slotName !== 'actions') {
+        this.#slottedContent.set(slotName, el);
+      }
+    });
   }
 
   // ===== Lit lifecycle =====
@@ -234,6 +251,212 @@ export class SchemaForm extends LitElement {
     return current !== undefined ? current : defaultValue;
   }
 
+  // ===== Condition Evaluation =====
+  /**
+   * Evaluate a condition object against current form data.
+   * Supports:
+   *   - Simple equality: { "/path": "value" }
+   *   - Operators: { "/path": { "$eq": "value" } }
+   *   - Multiple conditions (implicit AND): { "/a": "x", "/b": "y" }
+   *   - Explicit logical: { "$and": [...] }, { "$or": [...] }, { "$not": {...} }
+   *
+   * Operators: $eq, $ne, $in, $nin, $gt, $gte, $lt, $lte, $exists, $regex
+   */
+  #evaluateCondition(condition) {
+    if (!condition || typeof condition !== "object") return true;
+
+    // Handle logical operators
+    if ("$and" in condition) {
+      return condition.$and.every((c) => this.#evaluateCondition(c));
+    }
+    if ("$or" in condition) {
+      return condition.$or.some((c) => this.#evaluateCondition(c));
+    }
+    if ("$not" in condition) {
+      return !this.#evaluateCondition(condition.$not);
+    }
+
+    // Multiple path conditions = implicit AND
+    for (const [key, expected] of Object.entries(condition)) {
+      if (key.startsWith("$")) continue; // Skip operators at root
+      const actualValue = this.#getByPath(this.#data, key);
+      if (!this.#matchValue(actualValue, expected)) return false;
+    }
+    return true;
+  }
+
+  #matchValue(actual, expected) {
+    // Simple equality shorthand
+    if (expected === null || typeof expected !== "object" || Array.isArray(expected)) {
+      return actual === expected;
+    }
+
+    // Operator object
+    for (const [op, operand] of Object.entries(expected)) {
+      switch (op) {
+        case "$eq":
+          if (actual !== operand) return false;
+          break;
+        case "$ne":
+          if (actual === operand) return false;
+          break;
+        case "$in":
+          if (!Array.isArray(operand) || !operand.includes(actual)) return false;
+          break;
+        case "$nin":
+          if (Array.isArray(operand) && operand.includes(actual)) return false;
+          break;
+        case "$gt":
+          if (!(actual > operand)) return false;
+          break;
+        case "$gte":
+          if (!(actual >= operand)) return false;
+          break;
+        case "$lt":
+          if (!(actual < operand)) return false;
+          break;
+        case "$lte":
+          if (!(actual <= operand)) return false;
+          break;
+        case "$exists":
+          if (operand && actual === undefined) return false;
+          if (!operand && actual !== undefined) return false;
+          break;
+        case "$regex": {
+          const regex = operand instanceof RegExp ? operand : new RegExp(operand);
+          if (!regex.test(String(actual ?? ""))) return false;
+          break;
+        }
+        default:
+          // Unknown operator, ignore
+          break;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Evaluate a calculate expression to compute a derived value.
+   * Supports:
+   *   - Path reference: "/path" → returns value at path
+   *   - Concatenation: { "$concat": ["/firstName", " ", "/lastName"] }
+   *   - Math: { "$sum": ["/a", "/b"] }, { "$multiply": ["/a", 2] }
+   *   - Conditional: { "$if": { "cond": {...}, "then": expr, "else": expr } }
+   */
+  #evaluateCalculation(expr) {
+    if (expr === null || expr === undefined) return undefined;
+
+    // String path reference
+    if (typeof expr === "string") {
+      if (expr.startsWith("/")) {
+        return this.#getByPath(this.#data, expr);
+      }
+      return expr; // Literal string
+    }
+
+    // Number or boolean literal
+    if (typeof expr !== "object") return expr;
+
+    // Array = literal array
+    if (Array.isArray(expr)) {
+      return expr.map((e) => this.#evaluateCalculation(e));
+    }
+
+    // Operators
+    if ("$concat" in expr) {
+      return expr.$concat
+        .map((e) => this.#evaluateCalculation(e) ?? "")
+        .join("");
+    }
+    if ("$sum" in expr) {
+      return expr.$sum.reduce(
+        (acc, e) => acc + (Number(this.#evaluateCalculation(e)) || 0),
+        0
+      );
+    }
+    if ("$multiply" in expr) {
+      return expr.$multiply.reduce(
+        (acc, e) => acc * (Number(this.#evaluateCalculation(e)) || 0),
+        1
+      );
+    }
+    if ("$subtract" in expr) {
+      const [a, b] = expr.$subtract;
+      return (Number(this.#evaluateCalculation(a)) || 0) - (Number(this.#evaluateCalculation(b)) || 0);
+    }
+    if ("$divide" in expr) {
+      const [a, b] = expr.$divide;
+      const divisor = Number(this.#evaluateCalculation(b)) || 1;
+      return (Number(this.#evaluateCalculation(a)) || 0) / divisor;
+    }
+    if ("$if" in expr) {
+      const { cond, then: thenExpr, else: elseExpr } = expr.$if;
+      return this.#evaluateCondition(cond)
+        ? this.#evaluateCalculation(thenExpr)
+        : this.#evaluateCalculation(elseExpr);
+    }
+    if ("$coalesce" in expr) {
+      for (const e of expr.$coalesce) {
+        const val = this.#evaluateCalculation(e);
+        if (val !== null && val !== undefined && val !== "") return val;
+      }
+      return null;
+    }
+
+    // Unknown object, return as-is
+    return expr;
+  }
+
+  /**
+   * Extract all path dependencies from a condition or calculation expression.
+   */
+  #extractDependencies(expr, deps = new Set()) {
+    if (!expr) return deps;
+
+    if (typeof expr === "string" && expr.startsWith("/")) {
+      deps.add(expr);
+      return deps;
+    }
+
+    if (Array.isArray(expr)) {
+      for (const e of expr) this.#extractDependencies(e, deps);
+      return deps;
+    }
+
+    if (typeof expr === "object") {
+      for (const [key, value] of Object.entries(expr)) {
+        if (key.startsWith("/")) {
+          deps.add(key);
+        }
+        this.#extractDependencies(value, deps);
+      }
+    }
+
+    return deps;
+  }
+
+  /**
+   * Register dependencies for a target path based on its UI conditions.
+   */
+  #registerDependencies(targetPath, ui) {
+    const deps = new Set();
+
+    // Extract from all condition properties
+    for (const prop of ["ui:visibleWhen", "ui:disabledWhen", "ui:requiredWhen", "ui:calculate"]) {
+      if (ui?.[prop]) {
+        this.#extractDependencies(ui[prop], deps);
+      }
+    }
+
+    // Register reverse mapping: when source changes, target needs update
+    for (const sourcePath of deps) {
+      if (!this.#dependencies.has(sourcePath)) {
+        this.#dependencies.set(sourcePath, new Set());
+      }
+      this.#dependencies.get(sourcePath).add(targetPath);
+    }
+  }
+
   // ===== Schema compilation =====
   #compile() {
     const root = this.jsonSchema;
@@ -241,6 +464,9 @@ export class SchemaForm extends LitElement {
       this.#compiled = null;
       return;
     }
+    // Clear dependency graph for fresh build
+    this.#dependencies.clear();
+
     const resolved =
       this.#emitCancelable("pw:schema-resolve", { schema: root })?.schema ||
       root;
@@ -252,6 +478,12 @@ export class SchemaForm extends LitElement {
   #compileNode(schema, path) {
     const title = schema.title ?? this.#titleFromPath(path);
     const ui = this.#uiFor(path);
+
+    // Register dependencies for conditional rendering
+    if (ui) {
+      this.#registerDependencies(path, ui);
+    }
+
     const custom = this.#emitCancelable("pw:compile-node", {
       path,
       schema,
@@ -259,7 +491,16 @@ export class SchemaForm extends LitElement {
     });
     if (custom?.node) return custom.node;
 
+    // Check if oneOf/anyOf is used for enum-like selections (all have const)
+    // If so, treat as a field with enum options, not as a complex choice
     if (schema.oneOf || schema.anyOf) {
+      const { values } = this.#extractEnumOptions(schema);
+      // If all options have const values, treat as enum field
+      if (values.length > 0) {
+        const widgetKey = this.#decideWidget(schema, ui, path);
+        return { kind: "field", path, title, schema, ui, widgetKey };
+      }
+      // Otherwise, treat as complex choice (for actual oneOf/anyOf schemas)
       const choices = (schema.oneOf || schema.anyOf).map((s, i) => ({
         kind: "choice-option",
         index: i,
@@ -288,8 +529,9 @@ export class SchemaForm extends LitElement {
           ? { type: "object", properties: {} }
           : schema.items || {};
 
-        // Special case: array with enum items → checkbox-group
-        if (itemSchema.enum && Array.isArray(itemSchema.enum)) {
+        // Special case: array with enum/oneOf/anyOf items → checkbox-group
+        const { values } = this.#extractEnumOptions(itemSchema);
+        if (values.length > 0) {
           return {
             kind: "field",
             path,
@@ -327,6 +569,49 @@ export class SchemaForm extends LitElement {
     return ordered;
   }
 
+  // Helper to extract enum values and labels from enum, oneOf, or anyOf
+  #extractEnumOptions(schema) {
+    // Support standard enum array
+    if (schema.enum && Array.isArray(schema.enum)) {
+      return {
+        values: schema.enum,
+        labels: schema.enum.map(String)
+      };
+    }
+
+    // Support oneOf pattern: [{ const: value, title: label }, ...]
+    if (schema.oneOf && Array.isArray(schema.oneOf)) {
+      const values = [];
+      const labels = [];
+      for (const option of schema.oneOf) {
+        if (option.const !== undefined) {
+          values.push(option.const);
+          labels.push(option.title ?? String(option.const));
+        }
+      }
+      if (values.length > 0) {
+        return { values, labels };
+      }
+    }
+
+    // Support anyOf pattern: [{ const: value, title: label }, ...]
+    if (schema.anyOf && Array.isArray(schema.anyOf)) {
+      const values = [];
+      const labels = [];
+      for (const option of schema.anyOf) {
+        if (option.const !== undefined) {
+          values.push(option.const);
+          labels.push(option.title ?? String(option.const));
+        }
+      }
+      if (values.length > 0) {
+        return { values, labels };
+      }
+    }
+
+    return { values: [], labels: [] };
+  }
+
   #decideWidget(schema, ui, path) {
     const picked = this.#emitCancelable("pw:choose-widget", {
       path,
@@ -337,7 +622,8 @@ export class SchemaForm extends LitElement {
     if (picked?.widget) return picked.widget;
     // Honor explicit uiSchema widget hints
     if (ui?.["ui:widget"]) return ui["ui:widget"];
-    if (schema.enum) return schema.enum.length <= 5 ? "radio" : "select";
+    const { values } = this.#extractEnumOptions(schema);
+    if (values.length > 0) return values.length <= 5 ? "radio" : "select";
     if (schema.const !== undefined) return "const";
     if (schema.type === "string") {
       // Check for binary/upload content via JSON Schema contentMediaType
@@ -432,9 +718,12 @@ export class SchemaForm extends LitElement {
         method=${m}
         action=${this.action ?? nothing}
         @submit=${this.#onSubmit}
+        @reset=${this.#onReset}
         ?disabled=${this.disabled}
       >
-        ${tree ? this.#renderNode(tree) : html`<slot></slot>`}
+        ${keyed(this.#resetKey, html`
+          ${tree ? this.#renderNode(tree) : html`<slot></slot>`}
+        `)}
         ${!this.hideActions
           ? html`
               <div class="form-actions">
@@ -457,6 +746,16 @@ export class SchemaForm extends LitElement {
   }
 
   #renderNode(node, context = {}) {
+    // Check visibility condition
+    const ui = node.ui || this.#uiFor(node.path);
+    if (ui?.["ui:visibleWhen"] && !this.#evaluateCondition(ui["ui:visibleWhen"])) {
+      return nothing;
+    }
+    // Also check static ui:hidden
+    if (ui?.["ui:hidden"]) {
+      return nothing;
+    }
+
     switch (node.kind) {
       case "fieldset":
         return this.#renderFieldset(node, context);
@@ -543,15 +842,24 @@ export class SchemaForm extends LitElement {
     `;
 
     // Wrap in surface if specified
+    let result = fieldsetContent;
     if (surface) {
       const surfaceClass =
         surface === "card" || surface === "elevated" || surface === "dialog"
           ? `surface ${surface}`
           : "surface";
-      return html`<div class=${surfaceClass}>${fieldsetContent}</div>`;
+      result = html`<div class=${surfaceClass}>${fieldsetContent}</div>`;
     }
 
-    return fieldsetContent;
+    // Apply ui:before and ui:after for fieldsets
+    const renderContext = { path: node.path, schema: node.schema, ui, node, host: this };
+    const before = this.#renderCustomContent(ui?.["ui:before"], renderContext);
+    const after = this.#renderCustomContent(ui?.["ui:after"], renderContext);
+    
+    if (before || after) {
+      return html`${before}${result}${after}`;
+    }
+    return result;
   }
 
   #renderFieldsetTabs(node, legend, ui) {
@@ -635,14 +943,14 @@ export class SchemaForm extends LitElement {
       try {
         // Use PDS.ask to show dialog with form - it returns FormData when useForm: true
         const formData = await window.PDS.ask(
-          html`<pds-jsonform
+          html`<pds-form
             .jsonSchema=${dialogSchema}
             .values=${currentValue}
             .uiSchema=${this.uiSchema}
             .options=${this.options}
             hide-actions
             hide-legend
-          ></pds-jsonform>`,
+          ></pds-form>`,
           {
             title: dialogTitle,
             type: "custom",
@@ -808,6 +1116,7 @@ export class SchemaForm extends LitElement {
       this.#deleteByPathPrefix(this.#data, path + "/");
       this.requestUpdate();
       this.#emit("pw:value-change", {
+        path,
         name: path,
         value: i,
         validity: { valid: true },
@@ -1045,10 +1354,30 @@ export class SchemaForm extends LitElement {
     const path = node.path;
     const id = this.#idFromPath(path);
     const label = node.title ?? this.#titleFromPath(path);
-    const value = this.#getByPath(this.#data, path);
-    const required = this.#isRequired(path);
+    let value = this.#getByPath(this.#data, path);
     const ui = node.ui || this.#uiFor(path);
 
+    // Evaluate calculated value if present
+    if (ui?.["ui:calculate"]) {
+      const calculatedValue = this.#evaluateCalculation(ui["ui:calculate"]);
+      // Apply calculated value if field is empty or override not allowed
+      if (value === undefined || value === null || !ui["ui:calculateOverride"]) {
+        value = calculatedValue;
+        // Also update internal data to keep in sync
+        if (this.#getByPath(this.#data, path) !== calculatedValue) {
+          this.#setByPath(this.#data, path, calculatedValue);
+        }
+      }
+    }
+
+    // Evaluate conditional states
+    const isDisabled = ui?.["ui:disabled"] ||
+      (ui?.["ui:disabledWhen"] && this.#evaluateCondition(ui["ui:disabledWhen"]));
+    const isRequired = this.#isRequired(path) ||
+      (ui?.["ui:requiredWhen"] && this.#evaluateCondition(ui["ui:requiredWhen"]));
+    const isReadonly = ui?.["ui:readonly"] ||
+      (ui?.["ui:calculate"] && !ui["ui:calculateOverride"]);
+
     // Override hook before default field render
     {
       const override = this.#emitCancelable("pw:before-render-field", {
@@ -1061,23 +1390,45 @@ export class SchemaForm extends LitElement {
       if (override?.render) return override.render();
     }
 
+    // Build attributes including conditional states
+    const attrs = {
+      ...this.#nativeConstraints(path, node.schema),
+      disabled: isDisabled,
+      required: isRequired,
+      readOnly: isReadonly,
+    };
+
+    // Build base render context (shared by ui:render, renderers, and ui:wrapper)
+    const baseContext = {
+      id,
+      path,
+      label,
+      value,
+      required: isRequired,
+      ui,
+      schema: node.schema,
+      get: (p) => this.#getByPath(this.#data, p ?? path),
+      set: (val, p) => this.#assignValue(p ?? path, val),
+      attrs,
+      host: this,
+    };
+
+    // Check for ui:render - completely custom inline renderer (same context as defineRenderer)
+    if (ui?.["ui:render"] && typeof ui["ui:render"] === "function") {
+      const customTpl = ui["ui:render"](baseContext);
+      const before = this.#renderCustomContent(ui?.["ui:before"], baseContext);
+      const after = this.#renderCustomContent(ui?.["ui:after"], baseContext);
+      queueMicrotask(() =>
+        this.#emit("pw:after-render-field", { path, schema: node.schema })
+      );
+      return html`${before}${customTpl}${after}`;
+    }
+
     // Default renderer lookup: returns ONLY the control markup
     const renderer =
       this.#renderers.get(node.widgetKey) || this.#renderers.get("*");
     let controlTpl = renderer
-      ? renderer({
-          id,
-          path,
-          label,
-          value,
-          required,
-          ui,
-          schema: node.schema,
-          get: (p) => this.#getByPath(this.#data, p ?? path),
-          set: (val, p) => this.#assignValue(p ?? path, val),
-          attrs: this.#nativeConstraints(path, node.schema),
-          host: this,
-        })
+      ? renderer(baseContext)
       : nothing;
 
     // Post-creation tweak
@@ -1153,12 +1504,47 @@ export class SchemaForm extends LitElement {
       return html`<span data-label>${label}</span> ${controlTpl}`;
     };
 
-    return html`
+    // Build render context for custom content
+    const renderContext = {
+      id,
+      path,
+      label,
+      value,
+      required: isRequired,
+      ui,
+      schema: node.schema,
+      get: (p) => this.#getByPath(this.#data, p ?? path),
+      set: (val, p) => this.#assignValue(p ?? path, val),
+      attrs,
+      host: this,
+      // Additional context for ui:wrapper
+      control: controlTpl,
+      help: help ? html`<div data-help>${help}</div>` : nothing,
+    };
+
+    // Check for ui:wrapper - custom wrapper replaces the entire label structure
+    if (ui?.["ui:wrapper"] && typeof ui["ui:wrapper"] === "function") {
+      const wrapped = ui["ui:wrapper"](renderContext);
+      const before = this.#renderCustomContent(ui?.["ui:before"], renderContext);
+      const after = this.#renderCustomContent(ui?.["ui:after"], renderContext);
+      return html`${before}${wrapped}${after}`;
+    }
+
+    // Standard label wrapper with ui:before/ui:after
+    const before = this.#renderCustomContent(ui?.["ui:before"], renderContext);
+    const after = this.#renderCustomContent(ui?.["ui:after"], renderContext);
+
+    const labelTpl = html`
       <label for=${id} ?data-toggle=${isToggle} class=${ifDefined(labelClass)}>
         ${renderControlAndLabel(isToggle)}
         ${help ? html`<div data-help>${help}</div>` : nothing}
       </label>
     `;
+
+    if (before || after) {
+      return html`${before}${labelTpl}${after}`;
+    }
+    return labelTpl;
   }
 
   // ===== Default renderers: controls only (no spread arrays) =====
@@ -1177,6 +1563,7 @@ export class SchemaForm extends LitElement {
           maxlength=${ifDefined(attrs.maxLength)}
           pattern=${ifDefined(attrs.pattern)}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           autocomplete=${ifDefined(attrs.autocomplete)}
           @input=${(e) => set(e.target.value)}
@@ -1197,6 +1584,7 @@ export class SchemaForm extends LitElement {
           maxlength=${ifDefined(attrs.maxLength)}
           pattern=${ifDefined(attrs.pattern)}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           autocomplete=${ifDefined(attrs.autocomplete)}
           list=${ifDefined(ui?.["ui:datalist"] ? `${id}-datalist` : attrs.list)}
@@ -1226,6 +1614,7 @@ export class SchemaForm extends LitElement {
           minlength=${ifDefined(attrs.minLength)}
           maxlength=${ifDefined(attrs.maxLength)}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         ></textarea>
@@ -1247,6 +1636,7 @@ export class SchemaForm extends LitElement {
             max=${ifDefined(attrs.max)}
             step=${ifDefined(step)}
             ?readonly=${!!attrs.readOnly}
+            ?disabled=${!!attrs.disabled}
             ?required=${!!attrs.required}
             @input=${(e) => {
               const v = e.target.value;
@@ -1294,6 +1684,7 @@ export class SchemaForm extends LitElement {
               max=${max}
               step=${step}
               .value=${value ?? min}
+              ?disabled=${!!attrs.disabled}
               @input=${(e) => set(Number(e.target.value))}
             />
             <div class="range-bubble" aria-hidden="true">${value ?? min}</div>
@@ -1312,6 +1703,7 @@ export class SchemaForm extends LitElement {
           type="email"
           .value=${value ?? ""}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           autocomplete=${ifDefined(attrs.autocomplete)}
           @input=${(e) => set(e.target.value)}
@@ -1336,6 +1728,7 @@ export class SchemaForm extends LitElement {
             minlength=${ifDefined(attrs.minLength)}
             maxlength=${ifDefined(attrs.maxLength)}
             ?readonly=${!!attrs.readOnly}
+            ?disabled=${!!attrs.disabled}
             ?required=${!!attrs.required}
             autocomplete=${autocomplete}
             @input=${(e) => set(e.target.value)}
@@ -1354,6 +1747,7 @@ export class SchemaForm extends LitElement {
           type="url"
           .value=${value ?? ""}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         />
@@ -1372,6 +1766,7 @@ export class SchemaForm extends LitElement {
           min=${ifDefined(attrs.min)}
           max=${ifDefined(attrs.max)}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         />
@@ -1388,6 +1783,7 @@ export class SchemaForm extends LitElement {
           type="time"
           .value=${value ?? ""}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         />
@@ -1404,6 +1800,7 @@ export class SchemaForm extends LitElement {
           type="color"
           .value=${value ?? ""}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         />
@@ -1420,6 +1817,7 @@ export class SchemaForm extends LitElement {
           type="datetime-local"
           .value=${value ?? ""}
           ?readonly=${!!attrs.readOnly}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @input=${(e) => set(e.target.value)}
         />
@@ -1434,6 +1832,7 @@ export class SchemaForm extends LitElement {
           name=${path}
           type="checkbox"
           .checked=${!!value}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @change=${(e) => set(!!e.target.checked)}
         />
@@ -1449,6 +1848,7 @@ export class SchemaForm extends LitElement {
           name=${path}
           type="checkbox"
           .checked=${!!value}
+          ?disabled=${!!attrs.disabled}
           ?required=${!!attrs.required}
           @change=${(e) => set(!!e.target.checked)}
         />
@@ -1461,13 +1861,12 @@ export class SchemaForm extends LitElement {
         const useDropdown =
           host.#getOption("widgets.selects", "standard") === "dropdown" ||
           ui?.["ui:dropdown"] === true;
-        const enumValues = schema.enum || [];
-        const enumLabels = schema.enumNames || enumValues;
+        const { values: enumValues, labels: enumLabels } = host.#extractEnumOptions(schema);
         return html`
           <select
             id=${id}
             name=${path}
-            .value=${value ?? ""}
+            ?disabled=${!!attrs.disabled}
             ?required=${!!attrs.required}
             ?data-dropdown=${useDropdown}
             @change=${(e) => set(e.target.value)}
@@ -1475,7 +1874,7 @@ export class SchemaForm extends LitElement {
             <option value="" ?selected=${value == null}>—</option>
             ${enumValues.map(
               (v, i) =>
-                html`<option value=${String(v)}>
+                html`<option value=${String(v)} ?selected=${String(value) === String(v)}>
                   ${String(enumLabels[i])}
                 </option>`
             )}
@@ -1486,9 +1885,8 @@ export class SchemaForm extends LitElement {
 
     // Radio group: returns ONLY the labeled inputs
     // Matches PDS pattern: input hidden, label styled as button
-    this.defineRenderer("radio", ({ id, path, value, attrs, set, schema }) => {
-      const enumValues = schema.enum || [];
-      const enumLabels = schema.enumNames || enumValues;
+    this.defineRenderer("radio", ({ id, path, value, attrs, set, schema, host }) => {
+      const { values: enumValues, labels: enumLabels } = host.#extractEnumOptions(schema);
       return html`
         ${enumValues.map((v, i) => {
           const rid = `${id}-${i}`;
@@ -1516,11 +1914,11 @@ export class SchemaForm extends LitElement {
     // Shows actual checkboxes (not button-style like radios)
     this.defineRenderer(
       "checkbox-group",
-      ({ id, path, value, attrs, set, schema }) => {
+      ({ id, path, value, attrs, set, schema, host }) => {
         const selected = Array.isArray(value) ? value : [];
-        const options = schema.items?.enum || schema.enum || [];
-        const optionLabels =
-          schema.items?.enumNames || schema.enumNames || options;
+        // For array items, check items schema first, then fallback to root schema
+        const itemSchema = schema.items || schema;
+        const { values: options, labels: optionLabels } = host.#extractEnumOptions(itemSchema);
 
         return html`
           ${options.map((v, i) => {
@@ -1631,6 +2029,44 @@ export class SchemaForm extends LitElement {
     return final;
   }
 
+  // ===== Form reset =====
+  #onReset(e) {
+    // Prevent native reset - we'll handle everything ourselves
+    // Native reset clears DOM inputs but doesn't sync with Lit's reactive state
+    e.preventDefault();
+    
+    // Reset internal data to initial values (or empty if no initial values)
+    if (this.values) {
+      const v = this.values;
+      const newData = {};
+      for (const [key, value] of Object.entries(v)) {
+        if (key.startsWith("/")) {
+          this.#setByPath(newData, key, value);
+        } else {
+          newData[key] = value;
+        }
+      }
+      this.#data = newData;
+    } else {
+      this.#data = {};
+    }
+    
+    // Recompile form - this rebuilds the tree, re-applies defaults, 
+    // and rebuilds dependency graph
+    this.#compile();
+    
+    // Re-apply calculated values after compile
+    this.#applyCalculatedValues();
+    
+    // Emit reset event
+    this.#emit("pw:reset", { data: structuredClone(this.#data) });
+    
+    // Increment reset key to force Lit to recreate all DOM elements
+    // This ensures .value bindings properly reflect reset values
+    this.#resetKey++;
+    this.requestUpdate();
+  }
+
   // ===== Utilities =====
   #uiFor(path) {
     if (!this.uiSchema) return undefined;
@@ -1656,17 +2092,28 @@ export class SchemaForm extends LitElement {
     const withoutSlash = path.startsWith("/") ? path.substring(1) : path;
     if (this.uiSchema[withoutSlash]) return this.uiSchema[withoutSlash];
 
-    // Try nested navigation (e.g., userProfile/settings/preferences/theme)
+    // Try nested navigation (e.g., /accountType/companyName)
     // Skip array indices (numeric parts and wildcard *) when navigating UI schema
     const parts = path.replace(/^\//, "").split("/");
     let current = this.uiSchema;
-    for (const part of parts) {
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
       // Skip numeric array indices and wildcard in UI schema navigation
       if (/^\d+$/.test(part) || part === "*") continue;
 
+      // Try both with and without leading slash for each segment
       if (current && typeof current === "object" && part in current) {
         current = current[part];
+      } else if (current && typeof current === "object" && ("/" + part) in current) {
+        current = current["/" + part];
       } else {
+        // If this is the first segment, try looking up the full path from root
+        if (i === 0) {
+          const fullPath = "/" + parts.join("/");
+          if (this.uiSchema[fullPath]) {
+            return this.uiSchema[fullPath];
+          }
+        }
         return undefined;
       }
     }
@@ -1789,9 +2236,47 @@ export class SchemaForm extends LitElement {
 
   #assignValue(path, val) {
     this.#setByPath(this.#data, path, val);
-    this.requestUpdate();
+
+    // Apply calculated values for any dependent fields
+    // This will call requestUpdate() if there are dependents
+    const hadDependents = this.#applyCalculatedValues(path);
+
+    // Only request update here if there were no dependents
+    // (to avoid double render)
+    if (!hadDependents) {
+      this.requestUpdate();
+    }
+
     const validity = { valid: true };
-    this.#emit("pw:value-change", { name: path, value: val, validity });
+    this.#emit("pw:value-change", { path, name: path, value: val, validity });
+  }
+
+  #applyCalculatedValues(changedPath) {
+    // Find fields that depend on the changed path
+    const dependents = this.#dependencies.get(changedPath);
+    if (!dependents || dependents.size === 0) return false;
+
+    for (const targetPath of dependents) {
+      const ui = this.#uiFor(targetPath);
+      if (ui?.["ui:calculate"]) {
+        // Check if override is allowed and user has modified the field
+        const allowOverride = ui["ui:calculateOverride"] === true;
+        const currentValue = this.#getByPath(this.#data, targetPath);
+        const calculatedValue = this.#evaluateCalculation(ui["ui:calculate"]);
+
+        // Only update if:
+        // 1. Override is not allowed, OR
+        // 2. Override is allowed but field hasn't been manually modified (still matches previous calc)
+        if (!allowOverride || currentValue === undefined || currentValue === null) {
+          this.#setByPath(this.#data, targetPath, calculatedValue);
+        }
+      }
+    }
+    
+    // Force re-render since there were dependents
+    // This ensures ui:visibleWhen, ui:requiredWhen, ui:disabledWhen get re-evaluated
+    this.requestUpdate();
+    return true; // Indicate that we triggered a re-render
   }
 
   #getByPath(obj, path) {
@@ -1846,6 +2331,34 @@ export class SchemaForm extends LitElement {
     return key === "radio" || key === "checkbox-group";
   }
 
+  /**
+   * Render custom content from ui:before, ui:after values.
+   * Supports:
+   * - Function: (context) => html`...` - called with render context
+   * - String starting with "slot:": looks up slotted element by name
+   * - null/undefined: returns nothing
+   * @param {Function|string|undefined} content - The content definition
+   * @param {object} context - Render context with path, schema, value, etc.
+   * @returns {TemplateResult|Element|typeof nothing}
+   */
+  #renderCustomContent(content, context) {
+    if (!content) return nothing;
+    
+    // Function: call with context
+    if (typeof content === "function") {
+      return content(context);
+    }
+    
+    // String: slot reference (e.g., "slot:myHeader")
+    if (typeof content === "string" && content.startsWith("slot:")) {
+      const slotName = content.slice(5); // Remove "slot:" prefix
+      const slotEl = this.#slottedContent.get(slotName);
+      return slotEl ? slotEl : nothing;
+    }
+    
+    return nothing;
+  }
+
   // ===== Event helpers =====
   #emit(name, detail) {
     this.dispatchEvent(
@@ -1871,4 +2384,4 @@ export class SchemaForm extends LitElement {
   }
 }
 
-customElements.define("pds-jsonform", SchemaForm);
+customElements.define("pds-form", SchemaForm);