@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/generative/toToolResult.d.ts

@@ -0,0 +1,21 @@
+import { ActionContext } from "./actions";
+import { ActionDescriptor, JSONValue } from "./types";
+/**
+ * The compact, provider-neutral payload a model reads after a user interacts
+ * with generated UI.
+ *
+ * Deliberately NOT an Anthropic or OpenAI tool-result envelope — those shapes
+ * differ, and baking one in would make the core quietly provider-specific.
+ * Wrap this in your provider's envelope at the call site (or use the
+ * `@flikk/ui/generative/ai-sdk` adapter, which does it for you).
+ */
+export interface GenerativeToolResult {
+    action: string;
+    component: string;
+    nodeId?: string;
+    payload?: JSONValue;
+    values?: Record<string, JSONValue>;
+    data?: JSONValue;
+}
+/** Shape an action dispatch into a payload a model can consume. */
+export declare function toToolResult(action: ActionDescriptor, ctx: ActionContext): GenerativeToolResult;

package/dist/components/generative/toToolResult.js

@@ -0,0 +1,15 @@
+/** Shape an action dispatch into a payload a model can consume. */
+function toToolResult(action, ctx) {
+    return {
+        action: action.type,
+        component: ctx.component,
+        ...(ctx.nodeId !== undefined ? { nodeId: ctx.nodeId } : {}),
+        ...(action.payload !== undefined ? { payload: action.payload } : {}),
+        // Spread into a plain object: the values bag has a null prototype, which
+        // some serializers and equality checks treat differently.
+        ...(ctx.values !== undefined ? { values: { ...ctx.values } } : {}),
+        ...(ctx.data !== undefined ? { data: ctx.data } : {}),
+    };
+}
+
+export { toToolResult };

package/dist/components/generative/toToolResult.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/generative/validate.d.ts

@@ -3,7 +3,7 @@ import { GenerativeSchemaDoc } from "./schemaTypes";
 export interface ValidationIssue {
     /** JSONPath-ish locator, e.g. `$.children[2].props.color`. */
     path: string;
-    code: "invalid-node" | "unknown-component" | "blocked-prop" | "unknown-prop" | "invalid-enum" | "coerced-value" | "invalid-value" | "invalid-shape" | "missing-required" | "applied-default" | "children-ignored" | "invalid-action" | "max-depth-exceeded";
+    code: "invalid-node" | "unknown-component" | "blocked-prop" | "unknown-prop" | "invalid-enum" | "coerced-value" | "invalid-value" | "invalid-shape" | "missing-required" | "applied-default" | "children-ignored" | "invalid-action" | "max-depth-exceeded" | "form-nested" | "field-name-invalid" | "field-unnamed" | "field-name-duplicate" | "invalid-id";
     message: string;
     severity: "error" | "warning";
 }
@@ -15,6 +15,15 @@ export interface ValidateResult {
     spec: UISpec;
     issues: ValidationIssue[];
 }
+/**
+ * Components whose value participates in a Form. Mirrors FIELD_BINDINGS.
+ *
+ * 🔴 A missing row here SKIPS the field-name safety check entirely for that
+ * component — i.e. it re-opens the prototype-pollution / unsafe-identifier
+ * hole that `field-name-invalid` exists to close. Exported solely so
+ * `fieldBinding.test.ts` can pin it against the other copies of this set.
+ */
+export declare const FIELD_COMPONENTS: Set<string>;
 /**
  * Validate + repair a model-emitted spec against the generated schema.
  * Never throws; never mutates the input. Every repair is recorded in `issues`.

package/dist/components/generative/validate.js

@@ -22,6 +22,34 @@ const PROTO_POLLUTION_KEYS = new Set(["__proto__", "constructor", "prototype"]);
 const isHandler = (key) => /^on[a-z]/i.test(key);
 /** Recursion guard for both the node tree and nested structured prop values. */
 const MAX_DEPTH = 100;
+/** Conventional field-name grammar — mirrors an HTML name attribute. */
+const FIELD_NAME_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+/**
+ * Is this a safe string to use as a key in a plain-object map rebuilt from
+ * spec input? Shared by `props.name` and `node.id` — both end up as object
+ * keys, so both owe the same three checks: a real string, no assignment-target
+ * hijack (`PROTO_POLLUTION_KEYS`), and no INHERITED `Object.prototype` member
+ * (`Reflect.has`, which walks the chain and so catches "toString",
+ * "hasOwnProperty", "valueOf", … in one go), plus a conservative grammar.
+ */
+function isSafeSpecIdentifier(value) {
+    return (typeof value === "string" &&
+        !PROTO_POLLUTION_KEYS.has(value) &&
+        !Reflect.has(Object.prototype, value) &&
+        FIELD_NAME_RE.test(value));
+}
+/**
+ * Components whose value participates in a Form. Mirrors FIELD_BINDINGS.
+ *
+ * 🔴 A missing row here SKIPS the field-name safety check entirely for that
+ * component — i.e. it re-opens the prototype-pollution / unsafe-identifier
+ * hole that `field-name-invalid` exists to close. Exported solely so
+ * `fieldBinding.test.ts` can pin it against the other copies of this set.
+ */
+const FIELD_COMPONENTS = new Set([
+    "Input", "Textarea", "Select", "Combobox", "Checkbox", "Switch", "Slider",
+    "InputOTP", "TimePicker", "InputDate", "InputCounter", "InputTag", "Rating",
+]);
 /**
  * Safe lookup on a plain object used as a string-keyed map. Guards against
  * Object.prototype-colliding keys ("constructor", "toString", "__proto__",
@@ -95,11 +123,11 @@ function validate(spec, options = {}) {
     const schema = (_a = options.schema) !== null && _a !== void 0 ? _a : GENERATIVE_SCHEMA;
     const issues = [];
     if (Array.isArray(spec)) {
-        return { spec: spec.map((n, i) => validateNode(n, schema, `$[${i}]`, issues, 0)), issues };
+        return { spec: spec.map((n, i) => validateNode(n, schema, `$[${i}]`, issues, 0, false)), issues };
     }
-    return { spec: validateNode(spec, schema, "$", issues, 0), issues };
+    return { spec: validateNode(spec, schema, "$", issues, 0, false), issues };
 }
-function validateNode(node, schema, path, issues, depth) {
+function validateNode(node, schema, path, issues, depth, inForm = false, seenFieldNames) {
     if (depth > MAX_DEPTH) {
         issues.push({
             path,
@@ -114,17 +142,98 @@ function validateNode(node, schema, path, issues, depth) {
         return { component: "__invalid__" };
     }
     const raw = node;
-    const comp = safeLookup(schema.components, raw.component);
+    // `node.id` is model-chosen and reaches the runtime as an OBJECT KEY, not
+    // just a React key: `GenerativeView` keys the per-form values bag by it
+    // (`values[formId]`). Left unchecked, `id: "__proto__"` on a Form made the
+    // shell believe it was controlled by an unfillable bag — the user typed and
+    // submit delivered `{}`, silently destroying their input. So the id gets
+    // exactly the treatment `props.name` already gets, and is dropped (never
+    // repaired) on failure — an id is an optional identity hint, so losing it
+    // costs only streaming-patch stability, whereas keeping a hostile one costs
+    // correctness. Applies to EVERY node, not just Form: ids are also React
+    // keys and streaming-patch targets, and there is no reason for the safe
+    // grammar to differ by component.
+    let id;
+    if (raw.id !== undefined) {
+        if (isSafeSpecIdentifier(raw.id)) {
+            id = raw.id;
+        }
+        else {
+            issues.push({
+                path: `${path}.id`,
+                code: "invalid-id",
+                severity: "warning",
+                message: `Node id ${JSON.stringify(raw.id)} is not a safe identifier — removed; the node still renders`,
+            });
+        }
+    }
+    let componentName = raw.component;
+    if (componentName === "Form" && inForm) {
+        issues.push({
+            path,
+            code: "form-nested",
+            severity: "warning",
+            message: "Nested `Form` is not allowed — downgraded to `Stack`; children preserved",
+        });
+        componentName = "Stack";
+    }
+    const comp = safeLookup(schema.components, componentName);
     if (!comp) {
         issues.push({
             path,
             code: "unknown-component",
             severity: "error",
-            message: `Unknown component "${raw.component}" — props/children stripped; renders as placeholder`,
+            message: `Unknown component "${componentName}" — props/children stripped; renders as placeholder`,
         });
-        return { component: raw.component, ...(raw.id ? { id: raw.id } : {}) };
+        return { component: componentName, ...(id ? { id } : {}) };
     }
     const props = sanitizeProps(raw.props, comp, schema, path, issues);
+    // Field-name checks apply ONLY to components whose value actually
+    // participates in a Form (mirrors FIELD_BINDINGS) — e.g. `Avatar.name` is
+    // a person's display name, not a submission key, and must be left alone.
+    if (FIELD_COMPONENTS.has(componentName)) {
+        if (typeof props.name === "string") {
+            // `isSafeSpecIdentifier` bundles the three checks a submission key owes.
+            // `PROTO_POLLUTION_KEYS` is the write-side guard (assignment-target
+            // hijacks); `Reflect.has(Object.prototype, …)` is the read side — every
+            // OTHER Object.prototype member ("toString", "hasOwnProperty",
+            // "valueOf", "isPrototypeOf", "propertyIsEnumerable", "toLocaleString",
+            // the dunder accessor pairs) which a plain-object values/errors bag
+            // (formScope.tsx) resolves to an inherited function instead of
+            // `undefined` for any untouched key, with no assignment required.
+            if (!isSafeSpecIdentifier(props.name)) {
+                issues.push({
+                    path: `${path}.props.name`,
+                    code: "field-name-invalid",
+                    severity: "warning",
+                    message: `Field name "${props.name}" is not a safe identifier — removed; the field will render but not submit`,
+                });
+                delete props.name;
+            }
+            else if (inForm && seenFieldNames) {
+                if (seenFieldNames.has(props.name)) {
+                    issues.push({
+                        path: `${path}.props.name`,
+                        code: "field-name-duplicate",
+                        severity: "warning",
+                        message: `Field name "${props.name}" is already used elsewhere in this Form — removed; only the first occurrence is submitted`,
+                    });
+                    delete props.name;
+                }
+                else {
+                    seenFieldNames.add(props.name);
+                }
+            }
+        }
+        else if (inForm) {
+            issues.push({
+                path: `${path}.props`,
+                code: "field-unnamed",
+                severity: "warning",
+                message: `"${componentName}" inside a Form has no \`name\` — it renders but its value is not submitted`,
+            });
+        }
+    }
     // Fill required props that have a schema default; flag the rest.
     for (const [name, ps] of Object.entries(comp.props)) {
         if (!ps.required || props[name] !== undefined)
@@ -154,11 +263,17 @@ function validateNode(node, schema, path, issues, depth) {
                 path: `${path}.children`,
                 code: "children-ignored",
                 severity: "warning",
-                message: `"${raw.component}" is not a container — children removed`,
+                message: `"${componentName}" is not a container — children removed`,
             });
         }
         else {
-            children = raw.children.map((c, i) => validateNode(c, schema, `${path}.children[${i}]`, issues, depth + 1));
+            // A fresh dedup scope starts only when entering a NEW top-level Form
+            // (raw.component === "Form" and not already inForm) — a nested Form
+            // is downgraded above and its fields join the SAME outer scope,
+            // matching the single FormScope the runtime actually mounts for it.
+            const childInForm = inForm || raw.component === "Form";
+            const childSeenFieldNames = raw.component === "Form" && !inForm ? new Set() : seenFieldNames;
+            children = raw.children.map((c, i) => validateNode(c, schema, `${path}.children[${i}]`, issues, depth + 1, childInForm, childSeenFieldNames));
         }
     }
     let actions;
@@ -193,8 +308,8 @@ function validateNode(node, schema, path, issues, depth) {
         }
     }
     return {
-        component: raw.component,
-        ...(raw.id ? { id: raw.id } : {}),
+        component: componentName,
+        ...(id ? { id } : {}),
         ...(raw.sizeHint ? { sizeHint: raw.sizeHint } : {}),
         ...(Object.keys(props).length ? { props } : {}),
         ...(children ? { children } : {}),
@@ -348,4 +463,4 @@ function checkValue(key, value, ps, schema, path, issues) {
     }
 }
 
-export { validate };
+export { FIELD_COMPONENTS, validate };

package/dist/components/layout/Grid/Grid.js

@@ -1,3 +1,4 @@
+"use client";
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { gridTheme } from './Grid.theme.js';

package/dist/components/layout/Section/Section.theme.js

@@ -1,7 +1,7 @@
 const sectionTheme = {
     baseStyle: "block",
     header: "flex items-start justify-between gap-4",
-    title: "text-base font-semibold text-[var(--color-text-primary)]",
+    title: "text-[length:var(--section-title-size)]/[var(--section-title-line-height)] font-semibold text-[var(--color-text-primary)]",
     subtitle: "mt-0.5 text-sm text-[var(--color-text-secondary)]",
     actions: "flex shrink-0 items-center gap-2",
     bodyGaps: { 0: "mt-0", 1: "mt-1", 2: "mt-2", 3: "mt-3", 4: "mt-4", 5: "mt-5", 6: "mt-6", 8: "mt-8", 10: "mt-10", 12: "mt-12" },

package/dist/components/layout/Stack/Stack.js

@@ -1,3 +1,4 @@
+"use client";
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { stackTheme } from './Stack.theme.js';