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

package/dist/components/generative/formScope.js

@@ -0,0 +1,135 @@
+"use client";
+import React__default from 'react';
+import { isEmptyValue } from './fieldBinding.js';
+
+const REQUIRED_MESSAGE = "This field is required.";
+/**
+ * Defense in depth for the values/errors bags below. `validate()` is the
+ * primary boundary (it rejects any field `name` that collides with
+ * `Object.prototype` before a spec ever reaches this scope), but a bag keyed
+ * by arbitrary field names is still one bad path away from resolving
+ * "toString"/"hasOwnProperty"/etc. to an INHERITED function instead of
+ * `undefined` for a key nobody ever set. A null-prototype object has no such
+ * chain — an unset key is always exactly `undefined`. Every bag update below
+ * goes through this rather than an object spread (`{ ...prev }` recreates a
+ * normal-prototype object, silently undoing the protection).
+ */
+function nullProtoBag(...sources) {
+    return Object.assign(Object.create(null), ...sources);
+}
+const FormScopeContext = React__default.createContext(undefined);
+/** Nearest enclosing form scope, or undefined outside a Form. */
+function useFormScope() {
+    return React__default.useContext(FormScopeContext);
+}
+/**
+ * The form state machine. Controlled when `values` is passed; otherwise it owns
+ * state seeded from `defaultValues`. Mode is derived per render and never
+ * stored (CLAUDE.md §9).
+ */
+function useFormScopeState({ formId, values, defaultValues, onValuesChange, onSubmit, onInvalid, }) {
+    const isControlled = values !== undefined;
+    const [internal, setInternal] = React__default.useState(() => nullProtoBag(defaultValues));
+    const [errors, setErrors] = React__default.useState(() => nullProtoBag());
+    const fields = React__default.useRef(new Map());
+    if (process.env.NODE_ENV !== "production") {
+        if (values !== undefined && defaultValues !== undefined) {
+            console.warn("[GenerativeView]: both `values` and `defaultValues` were provided — `values` wins.");
+        }
+        if (values !== undefined && !onValuesChange) {
+            console.warn("[GenerativeView]: `values` was provided without `onValuesChange` — fields will not update.");
+        }
+    }
+    // In controlled mode `values` is adopted VERBATIM — the consumer's own
+    // object, trusted as-given, never copied or re-prototyped. Copying it every
+    // render to null-proto it would break the referential equality the
+    // controlled contract depends on (a consumer diffing `values` between
+    // renders). `nullProtoBag` below therefore only ever touches the
+    // UNCONTROLLED bag this scope itself builds (`internal`/`errors`); it is
+    // NOT a defense against a hostile key in a controlled `values` object.
+    // `validate()` is the only boundary standing between a spec's field
+    // `name`s and a controlled consumer's bag — see CLAUDE.md §22 / the
+    // "limits of the defense-in-depth layer" note in the Task 6 report.
+    const current = isControlled ? values : internal;
+    // `current` is read during render; keep a ref so the stable callbacks below
+    // always see the latest bag without re-creating themselves every keystroke.
+    const currentRef = React__default.useRef(current);
+    currentRef.current = current;
+    const getValue = React__default.useCallback((name) => currentRef.current[name], []);
+    const getLabel = React__default.useCallback((name) => { var _a; return (_a = fields.current.get(name)) === null || _a === void 0 ? void 0 : _a.label; }, []);
+    const setValue = React__default.useCallback((name, value) => {
+        const next = nullProtoBag(currentRef.current, { [name]: value });
+        if (!isControlled) {
+            // Update the ref immediately (not just on the next render): React
+            // batches the setInternal below, so a second setValue call in the
+            // same synchronous block (e.g. two fields committed in one `act`)
+            // would otherwise read the pre-update snapshot and clobber this one.
+            currentRef.current = next;
+            setInternal(next);
+        }
+        onValuesChange === null || onValuesChange === void 0 ? void 0 : onValuesChange(next);
+        setErrors((prev) => {
+            if (prev[name] === undefined)
+                return prev;
+            const nextErrors = nullProtoBag();
+            for (const [k, v] of Object.entries(prev)) {
+                if (k !== name)
+                    nextErrors[k] = v;
+            }
+            return nextErrors;
+        });
+    }, [isControlled, onValuesChange]);
+    const register = React__default.useCallback((name, opts) => {
+        fields.current.set(name, opts);
+        // Commit the seed directly into internal state — never through
+        // `setValue` — so an untouched field still contributes to the
+        // submitted bag without ever notifying the consumer at mount. In
+        // controlled mode the consumer owns the complete bag already (or
+        // doesn't; either way it isn't this scope's place to inject a default
+        // behind their back), so this is a no-op there: `currentRef.current`
+        // is overwritten from `values` again on the very next render.
+        if (!isControlled && opts.seed !== undefined && currentRef.current[name] === undefined) {
+            const next = nullProtoBag(currentRef.current, { [name]: opts.seed });
+            currentRef.current = next;
+            setInternal(next);
+        }
+    }, [isControlled]);
+    const unregister = React__default.useCallback((name) => {
+        fields.current.delete(name);
+    }, []);
+    const submit = React__default.useCallback(() => {
+        const bag = nullProtoBag();
+        const nextErrors = nullProtoBag();
+        const invalid = [];
+        for (const [name, reg] of fields.current) {
+            const value = currentRef.current[name];
+            if (reg.required && isEmptyValue(reg.binding, value)) {
+                nextErrors[name] = REQUIRED_MESSAGE;
+                invalid.push(name);
+                continue;
+            }
+            if (value !== undefined)
+                bag[name] = value;
+        }
+        setErrors(nextErrors);
+        if (invalid.length) {
+            onInvalid === null || onInvalid === void 0 ? void 0 : onInvalid(invalid);
+            return;
+        }
+        onSubmit(bag);
+    }, [onSubmit, onInvalid]);
+    return React__default.useMemo(
+    // `current` is otherwise not a dependency of any memoized callback below
+    // (they all close over `currentRef`, not `current` itself), so without
+    // it here the returned object's identity never changes on a plain value
+    // update — and an unchanged Context value never re-renders consumers,
+    // regardless of how many times this component itself re-renders. Every
+    // field's own `NodeRenderer` reads the scope's value at render time via
+    // `getValue`; it needs a reason to be asked to render again, and this is
+    // that reason.
+    () => ({ formId, getValue, setValue, getLabel, register, unregister, errors, submit }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formId, getValue, setValue, getLabel, register, unregister, errors, submit, current]);
+}
+
+export { FormScopeContext, REQUIRED_MESSAGE, useFormScope, useFormScopeState };

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

@@ -9,3 +9,7 @@ export { bindActionProps, extractActionData, type ActionContext, type ActionHand
 export { buildToolDefinition, GENERATIVE_TOOL, type GenerativeToolDefinition } from "./tools";
 export { GENERATIVE_SCHEMA } from "./schema.generated";
 export type { GenerativeSchemaDoc, ComponentSchema, SchemaProp, SchemaPropKind } from "./schemaTypes";
+export { toToolResult, type GenerativeToolResult } from "./toToolResult";
+export { FormShell, type FormShellProps } from "./FormShell";
+export { useFormScope, REQUIRED_MESSAGE, type FormValues, type GenerativeValues, type FormScopeValue, } from "./formScope";
+export { FIELD_BINDINGS, getFieldBinding, type FieldBinding } from "./fieldBinding";

package/dist/components/generative/index.js

@@ -7,3 +7,7 @@ export { useGenerativeStream } from './useGenerativeStream.js';
 export { bindActionProps, extractActionData } from './actions.js';
 export { GENERATIVE_TOOL, buildToolDefinition } from './tools.js';
 export { GENERATIVE_SCHEMA } from './schema.generated.js';
+export { toToolResult } from './toToolResult.js';
+export { FormShell } from './FormShell.js';
+export { REQUIRED_MESSAGE, useFormScope } from './formScope.js';
+export { FIELD_BINDINGS, getFieldBinding } from './fieldBinding.js';

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

@@ -12,6 +12,8 @@ export interface RegistryEntry {
     render?: (props: Record<string, unknown>, children?: React.ReactNode) => React.ReactNode;
     /** Map spec action keys to component callback props, e.g. { click: "onClick" }. */
     actionProps?: Record<string, string>;
+    /** Marks the container that hosts a FormScope. Only `Form` sets this. */
+    isForm?: boolean;
 }
 export interface GenerativeRegistry {
     components: Record<string, RegistryEntry>;

package/dist/components/generative/registry.js

@@ -9,7 +9,6 @@ import { Badge } from '../core/Badge/Badge.js';
 import { Breadcrumbs } from '../core/Breadcrumbs/Breadcrumbs.js';
 import '../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
 import { ButtonGroup } from '../core/ButtonGroup/ButtonGroup.js';
 import '../core/ButtonGroup/ButtonGroupSeparator.js';
 import '../core/ButtonGroup/ButtonGroupText.js';
@@ -19,6 +18,7 @@ import { Card } from '../core/Card/Card.js';
 import { CommandPalette } from '../core/CommandPalette/CommandPalette.js';
 import { DotSeparator } from '../core/DotSeparator/DotSeparator.js';
 import { Empty } from '../core/Empty/Empty.js';
+import { FormShell } from './FormShell.js';
 import { HeroCard } from '../core/HeroCard/HeroCard.js';
 import { Icon } from '../core/Icon/Icon.js';
 import { Kbd } from '../core/Kbd/Kbd.js';
@@ -28,6 +28,7 @@ import { Message } from '../core/Message/Message.js';
 import '../core/Message/TypeWriter.js';
 import '../core/Message/MessageBody.js';
 import { cn } from '../../utils/cn.js';
+import 'react';
 import '@phosphor-icons/react';
 import { MenuItem } from '../core/MenuItem/MenuItem.js';
 import { PageHeading } from '../core/PageHeading/PageHeading.js';
@@ -81,6 +82,7 @@ import '../forms/Slider/Slider.theme.js';
 import '../forms/Signature/Signature.js';
 import '../forms/Signature/Signature.theme.js';
 import '../forms/RichTextEditor/RichTextEditor.js';
+import '../forms/RichTextEditor/RichTextToolbar.js';
 import '../forms/RichTextEditor/RichTextEditor.theme.js';
 import { InputOTP } from '../forms/InputOTP/InputOTP.js';
 import '../forms/InputOTP/InputOTP.theme.js';
@@ -116,8 +118,6 @@ import { defaultResolvers, DEFAULT_ICONS } from './resolvers.js';
 import { Heatmap } from '../charts/Heatmap/Heatmap.js';
 import '../charts/Heatmap/HeatmapCell.js';
 import { ActivityRings } from '../charts/ActivityRings/ActivityRings.js';
-import { FunnelChart } from '../charts/FunnelChart/FunnelChart.js';
-import { ScatterPlot } from '../charts/ScatterPlot/ScatterPlot.js';
 import { RadarChart } from '../charts/RadarChart/RadarChart.js';
 import { DonutChart } from '../charts/DonutChart/DonutChart.js';
 import { ChartContainer } from '../charts/ChartContainer.js';
@@ -157,6 +157,12 @@ const DEFAULT_COMPONENTS = {
     Grid: { component: Grid, kind: "container" },
     Stack: { component: Stack, kind: "container" },
     Section: { component: Section, kind: "container" },
+    Form: {
+        component: FormShell,
+        kind: "container",
+        isForm: true,
+        actionProps: { submit: "onSubmit" },
+    },
     Card: {
         component: Card,
         kind: "container",
@@ -175,7 +181,7 @@ const DEFAULT_COMPONENTS = {
     Progress: { component: Progress },
     Separator: { component: Separator },
     Empty: { component: Empty },
-    Rating: { component: Rating },
+    Rating: { component: Rating, actionProps: { change: "onChange" } },
     Pill: { component: Pill },
     Tag: { component: Tag },
     PageHeading: { component: PageHeading },
@@ -291,12 +297,6 @@ const DEFAULT_COMPONENTS = {
     // Charts (Wave 3) — bespoke prop systems, not BaseChartProps-shaped, so no
     // ChartContainer wrap via chartEntry() (that helper is data/config-specific).
     RadarChart: { component: RadarChart, needsShell: true },
-    ScatterPlot: { component: ScatterPlot, needsShell: true },
-    FunnelChart: {
-        component: FunnelChart,
-        needsShell: true,
-        actionProps: { stageClick: "onStageClick" },
-    },
     ActivityRings: { component: ActivityRings, needsShell: true },
     Heatmap: {
         component: Heatmap,