@rokkit/forms 1.3.1 → 1.3.3

package/dist/lib/builder.svelte.d.ts

@@ -31,6 +31,12 @@ export class FormBuilder {
     /**
      * Set the schema
      * @param {Object} value - New schema object
+     *
+     * When the caller explicitly provides a schema, that schema is the source
+     * of truth for which fields exist — the layout may have been derived
+     * earlier from empty/partial data and would silently hide those fields.
+     * Re-derive the layout from the new schema so the two stay consistent,
+     * unless the caller has already installed an explicit non-empty layout.
      */
     set schema(value: Object);
     /**

package/dist/lib/layout.d.ts

@@ -5,3 +5,15 @@
  * @returns {import('../types').DataLayout}
  */
 export function deriveLayoutFromValue(value: any, scope?: string): import("../types").DataLayout;
+/**
+ * Derive a layout directly from a JSON-Schema definition. Used when a schema
+ * is supplied but no explicit layout is — one element per top-level property
+ * in declaration order. This is the correct fallback when a schema is
+ * present: the schema is the source of truth for which fields exist, not the
+ * (possibly-empty) initial data.
+ *
+ * @param {Object} schema  JSON-Schema fragment (object type with `properties`)
+ * @param {string} scope   Base scope pointer (defaults to root)
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromSchema(schema: Object, scope?: string): import("../types").DataLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/forms",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Form building components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/lib/builder.svelte.js

@@ -1,6 +1,6 @@
 import { SvelteMap, SvelteSet } from 'svelte/reactivity'
 import { deriveSchemaFromValue } from './schema.js'
-import { deriveLayoutFromValue } from './layout.js'
+import { deriveLayoutFromValue, deriveLayoutFromSchema } from './layout.js'
 import { getSchemaWithLayout } from './fields.js'
 import { createLookupManager } from './lookup.svelte.js'
 import { evaluateCondition } from './conditions.js'
@@ -169,9 +169,20 @@ export class FormBuilder {
 	/**
 	 * Set the schema
 	 * @param {Object} value - New schema object
+	 *
+	 * When the caller explicitly provides a schema, that schema is the source
+	 * of truth for which fields exist — the layout may have been derived
+	 * earlier from empty/partial data and would silently hide those fields.
+	 * Re-derive the layout from the new schema so the two stay consistent,
+	 * unless the caller has already installed an explicit non-empty layout.
 	 */
 	set schema(value) {
 		this.#schema = value ?? deriveSchemaFromValue(this.#data)
+		const layout = this.#layout
+		const hasExplicitLayout = layout && Array.isArray(layout.elements) && layout.elements.length > 0
+		if (!hasExplicitLayout) {
+			this.#layout = deriveLayoutFromSchema(this.#schema)
+		}
 	}
 
 	/**
@@ -187,7 +198,21 @@ export class FormBuilder {
 	 * @param {Object} value - New layout object
 	 */
 	set layout(value) {
-		this.#layout = value ?? deriveLayoutFromValue(this.#data)
+		if (value) {
+			this.#layout = value
+			return
+		}
+		// No explicit layout — prefer schema-derived over data-derived so
+		// declared fields render even when initial data is `{}` (a common
+		// pattern for LLM-generated forms and reset forms).
+		const schema = this.#schema
+		const hasSchemaProperties =
+			schema && typeof schema === 'object' && schema.properties &&
+			typeof schema.properties === 'object' &&
+			Object.keys(schema.properties).length > 0
+		this.#layout = hasSchemaProperties
+			? deriveLayoutFromSchema(schema)
+			: deriveLayoutFromValue(this.#data)
 	}
 
 	/**

package/src/lib/layout.js

@@ -60,3 +60,47 @@ export function deriveLayoutFromValue(value, scope = '#') {
 	}
 	return { type: 'vertical', elements: [{ scope }] }
 }
+
+/**
+ * Build an inner element from a JSON-Schema property. Objects recurse into a
+ * nested {title, scope, type:'vertical', elements:[...]} group; primitives
+ * yield a scoped leaf. Mirrors `deriveElementLayout` but reads the shape from
+ * schema's `properties` rather than from the data value.
+ *
+ * @param {Object} propSchema
+ * @param {string} scope
+ * @param {string} label
+ * @returns {import('../types').LayoutElement}
+ */
+function deriveElementFromSchema(propSchema, scope, label) {
+	const path = `${scope}/${label}`
+	if (propSchema && propSchema.type === 'object' && isObject(propSchema.properties)) {
+		return {
+			title: label,
+			scope: path,
+			...deriveLayoutFromSchema(propSchema, path)
+		}
+	}
+	return { label, scope: path }
+}
+
+/**
+ * Derive a layout directly from a JSON-Schema definition. Used when a schema
+ * is supplied but no explicit layout is — one element per top-level property
+ * in declaration order. This is the correct fallback when a schema is
+ * present: the schema is the source of truth for which fields exist, not the
+ * (possibly-empty) initial data.
+ *
+ * @param {Object} schema  JSON-Schema fragment (object type with `properties`)
+ * @param {string} scope   Base scope pointer (defaults to root)
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromSchema(schema, scope = '#') {
+	if (!isObject(schema) || !isObject(schema.properties)) {
+		return { type: 'vertical', elements: [] }
+	}
+	const elements = Object.entries(schema.properties).map(([label, propSchema]) =>
+		deriveElementFromSchema(propSchema, scope, label)
+	)
+	return { type: 'vertical', elements }
+}