@continuum-dev/react 0.1.2 → 0.1.3

package/README.md

@@ -311,6 +311,8 @@ Tracks non-data state (focus, expansion, scroll, zoom, offsets) inside the sessi
 const [viewport, setViewport] = useContinuumViewport('table');
 ```
 
+If this hook is called from inside a collection-item scope, Continuum logs a development warning because viewport state is not currently scoped per collection item.
+
 #### `useContinuumSession()`
 
 Returns the active session for full session API access.
@@ -327,6 +329,8 @@ Subscribes to the full current `ContinuitySnapshot`.
 const snapshot = useContinuumSnapshot();
 ```
 
+Snapshots are delivered as immutable top-level copies so consumer code cannot accidentally mutate session internals.
+
 #### `useContinuumHydrated()`
 
 Indicates whether provider initialization came from persisted storage.
@@ -351,6 +355,8 @@ Handles action dispatch with built-in loading and result state.
 const { dispatch, isDispatching, lastResult } = useContinuumAction('submit_form');
 ```
 
+When multiple dispatches overlap, `isDispatching` and `lastResult` reflect the latest in-flight dispatch.
+
 Example action component:
 
 ```tsx
@@ -471,14 +477,15 @@ function UndoButton() {
 - scoped item state storage
 - default template values
 - canonical nested ids for collection children
+- headless control wiring through your own collection components
 
-Rendered collection controls include attributes like:
+Collection controls are now passed as props to your mapped components:
 
-- `data-continuum-collection-add`
-- `data-continuum-collection-remove`
-- `data-continuum-collection-item`
+- collection root components receive `onAdd`, `canAdd`, `onRemove`, and `canRemove`
+- template root components receive `itemIndex`, `onRemove`, and `canRemove`
+- no renderer-owned wrapper elements or `data-continuum-*` control attributes are injected
 
-You get practical collection behavior out of the box while still controlling the visual wrapper component.
+This keeps collection behavior built in while letting your design system fully own the markup and styles.
 
 ---
 
@@ -505,6 +512,7 @@ The fallback renders:
 Every rendered node is wrapped in `NodeErrorBoundary`.
 
 If one component crashes while rendering a dynamic node, sibling regions can keep working.
+When a later rerender provides recoverable children, the boundary resets and the node can render again.
 
 ---
 

package/lib/error-boundary.d.ts

@@ -13,6 +13,7 @@ interface NodeErrorBoundaryState {
 export declare class NodeErrorBoundary extends Component<NodeErrorBoundaryProps, NodeErrorBoundaryState> {
     state: NodeErrorBoundaryState;
     static getDerivedStateFromError(error: unknown): NodeErrorBoundaryState;
+    componentDidUpdate(prevProps: NodeErrorBoundaryProps): void;
     render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/lib/error-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,SAAS,CAC9C,sBAAsB,EACtB,sBAAsB,CACvB;IACU,KAAK,EAAE,sBAAsB,CAGpC;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,OAAO,GAAG,sBAAsB;IAO9D,MAAM;CAUhB"}
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,UAAU,sBAAsB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,SAAS,CAC9C,sBAAsB,EACtB,sBAAsB,CACvB;IACU,KAAK,EAAE,sBAAsB,CAGpC;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,OAAO,GAAG,sBAAsB;IAO9D,kBAAkB,CAAC,SAAS,EAAE,sBAAsB;IASpD,MAAM;CAUhB"}

package/lib/error-boundary.js

@@ -14,6 +14,14 @@ export class NodeErrorBoundary extends Component {
             message: error instanceof Error ? error.message : String(error),
         };
     }
+    componentDidUpdate(prevProps) {
+        if (this.state.hasError && prevProps.children !== this.props.children) {
+            this.setState({
+                hasError: false,
+                message: '',
+            });
+        }
+    }
     render() {
         if (this.state.hasError) {
             return (_jsxs("div", { "data-continuum-render-error": this.props.nodeId, children: ["Node render failed: ", this.props.nodeId, " (", this.state.message, ")"] }));

package/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAwDrH,UAAU,cAAc;IACtB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,gDAA6C,CAAC;AAEhF;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAQ7C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GACb,CAAC,SAAS,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,CAiDrD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,kBAAkB,GAAG,IAAI,CAiDhE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,GACb,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC,CAkC7D;AAED;;GAEG;AACH,wBAAgB,uBAAuB;YAS3B,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;WACjC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACzB,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;iBACrC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAmCrD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAQ9C;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG;IACpD,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAsCA;AAED;;GAEG;AACH,wBAAgB,uBAAuB,IAAI;IACzC,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAgEA;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG;IACpD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,YAAY,GAAG,IAAI,CAAC;CACjC,CA0BA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAwDrH,UAAU,cAAc;IACtB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACpE,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1D;AAED;;;GAGG;AACH,eAAO,MAAM,qBAAqB,gDAA6C,CAAC;AAEhF;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAQ7C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,MAAM,GACb,CAAC,SAAS,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC,CAiDrD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,kBAAkB,GAAG,IAAI,CAiDhE;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,MAAM,GACb,CAAC,aAAa,GAAG,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC,CA4C7D;AAED;;GAEG;AACH,wBAAgB,uBAAuB;YAS3B,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;WACjC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;iBACzB,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;iBACrC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;EAmCrD;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAQ9C;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG;IACpD,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,aAAa,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAsCA;AAED;;GAEG;AACH,wBAAgB,uBAAuB,IAAI;IACzC,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAgEA;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG;IACpD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IACpD,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,YAAY,GAAG,IAAI,CAAC;CACjC,CAgCA"}

package/lib/hooks.js

@@ -82,7 +82,7 @@ export function useContinuumState(nodeId) {
         }
         valueCacheRef.current = nextValue;
         return nextValue;
-    }, [store, nodeId]);
+    }, [scope, store, nodeId]);
     const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     const setValue = useCallback((next) => {
         if (scope) {
@@ -136,9 +136,15 @@ export function useContinuumSnapshot() {
  */
 export function useContinuumViewport(nodeId) {
     const ctx = useContext(ContinuumContext);
+    const scope = useContext(NodeStateScopeContext);
     if (!ctx) {
         throw new Error('useContinuumViewport must be used within a <ContinuumProvider>');
     }
+    if (scope
+        && typeof process !== 'undefined'
+        && process.env.NODE_ENV !== 'production') {
+        console.warn(`useContinuumViewport("${nodeId}") called inside a collection scope. Viewport state is not supported for collection item nodes.`);
+    }
     const { session, store } = ctx;
     const viewportCacheRef = useRef(undefined);
     const subscribe = useCallback((onStoreChange) => store.subscribeNode(nodeId, onStoreChange), [store, nodeId]);
@@ -307,15 +313,21 @@ export function useContinuumAction(intentId) {
     const { session } = ctx;
     const [isDispatching, setIsDispatching] = useState(false);
     const [lastResult, setLastResult] = useState(null);
+    const dispatchIdRef = useRef(0);
     const dispatch = useCallback(async (nodeId) => {
+        const dispatchId = ++dispatchIdRef.current;
         setIsDispatching(true);
         try {
             const result = await session.dispatchAction(intentId, nodeId);
-            setLastResult(result);
+            if (dispatchIdRef.current === dispatchId) {
+                setLastResult(result);
+            }
             return result;
         }
         finally {
-            setIsDispatching(false);
+            if (dispatchIdRef.current === dispatchId) {
+                setIsDispatching(false);
+            }
         }
     }, [session, intentId]);
     return { dispatch, isDispatching, lastResult };

package/lib/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/renderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,qBAAqB,CAAC;AA+W7B;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CAQnE"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/lib/renderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,qBAAqB,CAAC;AAkZ7B;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,2CAQnE"}

package/lib/renderer.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useContext, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useContext, useMemo } from 'react';
 import { getChildNodes } from '@continuum-dev/contract';
 import { ContinuumContext } from './context.js';
 import { NodeStateScopeContext, useContinuumState } from './hooks.js';
@@ -83,68 +83,90 @@ function collectTemplateDefaults(node, parentPath = '') {
     }
     return values;
 }
-const StatefulNodeRenderer = memo(function StatefulNodeRenderer({ definition, parentPath }) {
+const StatefulNodeRenderer = memo(function StatefulNodeRenderer({ definition, parentPath, mappedProps, }) {
     const Component = useResolvedComponent(definition);
     const canonicalId = toCanonicalId(definition.id, parentPath);
     const [value, setValue] = useContinuumState(canonicalId);
     if (definition.hidden) {
         return null;
     }
-    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: value, onChange: setValue, definition: definition, nodeId: canonicalId }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: value, onChange: setValue, definition: definition, nodeId: canonicalId, ...mappedProps }) }) }));
 });
-const ContainerNodeRenderer = memo(function ContainerNodeRenderer({ definition, parentPath }) {
+const ContainerNodeRenderer = memo(function ContainerNodeRenderer({ definition, parentPath, mappedProps, }) {
     const Component = useResolvedComponent(definition);
     if (definition.hidden) {
         return null;
     }
     const canonicalId = toCanonicalId(definition.id, parentPath);
-    const childNodes = getChildNodes(definition).map((child) => (_jsx(NodeRenderer, { definition: child, parentPath: canonicalId }, child.id)));
-    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: undefined, onChange: noopOnChange, definition: definition, nodeId: canonicalId, children: childNodes }) }) }));
+    const childNodes = getChildNodes(definition).map((child) => (_jsx(NodeRenderer, { definition: child, parentPath: canonicalId, mappedProps: mappedProps }, child.id)));
+    return (_jsx(_Fragment, { children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: undefined, onChange: noopOnChange, definition: definition, nodeId: canonicalId, ...mappedProps, children: childNodes }) }) }));
 });
 const CollectionItemRenderer = memo(function CollectionItemRenderer({ collectionCanonicalId, itemIndex, template, templateDefaults, canRemove, onRemove, }) {
     const ctx = useContext(ContinuumContext);
+    const parentScope = useContext(NodeStateScopeContext);
     if (!ctx) {
         throw new Error('ContinuumRenderer must be used within a <ContinuumProvider>');
     }
     const { session, store } = ctx;
-    const scope = useMemo(() => ({
-        subscribeNode: (_nodeId, listener) => store.subscribeNode(collectionCanonicalId, listener),
-        getNodeValue: (nodeId) => {
-            const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
-            if (!relativeId) {
-                return undefined;
-            }
-            const collectionValue = normalizeCollectionNodeValue(store.getNodeValue(collectionCanonicalId));
-            return (collectionValue.value.items[itemIndex]?.values?.[relativeId] ??
-                templateDefaults[relativeId]);
-        },
-        setNodeValue: (nodeId, nextValue) => {
-            const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
-            if (!relativeId) {
-                return;
-            }
-            const collectionValue = normalizeCollectionNodeValue(store.getNodeValue(collectionCanonicalId));
-            const items = collectionValue.value.items.map((item) => ({
-                values: { ...item.values },
-            }));
-            while (items.length <= itemIndex) {
-                items.push({ values: {} });
-            }
-            items[itemIndex] = {
-                values: {
-                    ...items[itemIndex].values,
-                    [relativeId]: nextValue,
-                },
-            };
-            session.updateState(collectionCanonicalId, {
-                ...collectionValue,
-                value: { items },
-            });
-        },
-    }), [collectionCanonicalId, itemIndex, session, store, templateDefaults]);
-    return (_jsx(NodeStateScopeContext.Provider, { value: scope, children: _jsxs("div", { "data-continuum-collection-item": `${collectionCanonicalId}:${itemIndex}`, className: "continuum-collection-item", children: [_jsx(NodeRenderer, { definition: template, parentPath: collectionCanonicalId }), canRemove ? (_jsx("div", { className: "continuum-collection-item-actions", children: _jsx("button", { type: "button", "data-continuum-collection-remove": `${collectionCanonicalId}:${itemIndex}`, onClick: () => onRemove(itemIndex), className: "continuum-collection-remove", children: "\u00D7" }) })) : null] }) }));
+    const scope = useMemo(() => {
+        const readCollectionValue = parentScope
+            ? () => normalizeCollectionNodeValue(parentScope.getNodeValue(collectionCanonicalId))
+            : () => normalizeCollectionNodeValue(store.getNodeValue(collectionCanonicalId));
+        const writeCollectionValue = parentScope
+            ? (next) => parentScope.setNodeValue(collectionCanonicalId, next)
+            : (next) => session.updateState(collectionCanonicalId, next);
+        const subscribeToCollection = parentScope
+            ? (listener) => parentScope.subscribeNode(collectionCanonicalId, listener)
+            : (listener) => store.subscribeNode(collectionCanonicalId, listener);
+        return {
+            subscribeNode: (_nodeId, listener) => subscribeToCollection(listener),
+            getNodeValue: (nodeId) => {
+                const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
+                if (!relativeId) {
+                    return undefined;
+                }
+                const collectionValue = readCollectionValue();
+                return (collectionValue.value.items[itemIndex]?.values?.[relativeId] ??
+                    templateDefaults[relativeId]);
+            },
+            setNodeValue: (nodeId, nextValue) => {
+                const relativeId = toRelativeNodeId(collectionCanonicalId, nodeId);
+                if (!relativeId) {
+                    return;
+                }
+                const collectionValue = readCollectionValue();
+                const items = collectionValue.value.items.map((item) => ({
+                    values: { ...item.values },
+                }));
+                while (items.length <= itemIndex) {
+                    items.push({ values: {} });
+                }
+                items[itemIndex] = {
+                    values: {
+                        ...items[itemIndex].values,
+                        [relativeId]: nextValue,
+                    },
+                };
+                writeCollectionValue({
+                    ...collectionValue,
+                    value: { items },
+                });
+            },
+        };
+    }, [collectionCanonicalId, itemIndex, session, store, templateDefaults, parentScope]);
+    return (_jsx(NodeStateScopeContext.Provider, { value: scope, children: _jsx(NodeRenderer, { definition: template, parentPath: collectionCanonicalId, mappedProps: {
+                itemIndex,
+                canRemove,
+                onRemove: () => onRemove(itemIndex),
+            } }) }));
 });
 const CollectionNodeRenderer = memo(function CollectionNodeRenderer({ definition, parentPath, }) {
+    const ctx = useContext(ContinuumContext);
+    const parentScope = useContext(NodeStateScopeContext);
+    if (!ctx) {
+        throw new Error('ContinuumRenderer must be used within a <ContinuumProvider>');
+    }
+    const { store } = ctx;
     const Component = useResolvedComponent(definition);
     const canonicalId = toCanonicalId(definition.id, parentPath);
     const [collectionValue, setCollectionValue] = useContinuumState(canonicalId);
@@ -158,52 +180,57 @@ const CollectionNodeRenderer = memo(function CollectionNodeRenderer({ definition
     if (definition.hidden) {
         return null;
     }
-    const addItem = () => {
-        if (!canAdd) {
+    const readCollectionValue = useCallback(() => normalizeCollectionNodeValue(parentScope
+        ? parentScope.getNodeValue(canonicalId)
+        : store.getNodeValue(canonicalId)), [canonicalId, parentScope, store]);
+    const addItem = useCallback(() => {
+        const current = readCollectionValue();
+        if (maxItems !== undefined && current.value.items.length >= maxItems) {
             return;
         }
         const items = [
-            ...normalizedCollection.value.items.map((item) => ({
+            ...current.value.items.map((item) => ({
                 values: { ...item.values },
             })),
             { values: { ...templateDefaults } },
         ];
         setCollectionValue({
-            ...normalizedCollection,
+            ...current,
             value: { items },
         });
-    };
-    const removeItem = (index) => {
-        if (!canRemove) {
+    }, [maxItems, readCollectionValue, setCollectionValue, templateDefaults]);
+    const removeItem = useCallback((index) => {
+        const current = readCollectionValue();
+        if (current.value.items.length <= minItems) {
             return;
         }
-        const items = normalizedCollection.value.items
+        const items = current.value.items
             .map((item) => ({ values: { ...item.values } }))
             .filter((_, itemIndex) => itemIndex !== index);
         if (items.length < minItems) {
             return;
         }
         setCollectionValue({
-            ...normalizedCollection,
+            ...current,
             value: { items },
         });
-    };
+    }, [minItems, readCollectionValue, setCollectionValue]);
     const renderedItems = normalizedCollection.value.items.map((_, index) => (_jsx(CollectionItemRenderer, { collectionCanonicalId: canonicalId, itemIndex: index, template: definition.template, templateDefaults: templateDefaults, canRemove: canRemove, onRemove: removeItem }, index)));
-    return (_jsx("div", { "data-continuum-id": definition.id, children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsxs(Component, { value: collectionValue, onChange: setCollectionValue, definition: definition, nodeId: canonicalId, children: [renderedItems, _jsx("div", { className: "continuum-collection-add-container", children: _jsx("button", { type: "button", "data-continuum-collection-add": canonicalId, onClick: addItem, disabled: !canAdd, className: "continuum-collection-add", children: "+ Add item" }) })] }) }) }));
+    return (_jsx(_Fragment, { children: _jsx(NodeErrorBoundary, { nodeId: definition.id, children: _jsx(Component, { value: collectionValue, onChange: setCollectionValue, definition: definition, nodeId: canonicalId, canAdd: canAdd, canRemove: canRemove, onAdd: addItem, onRemove: removeItem, children: renderedItems }) }) }));
 });
-const NodeRenderer = memo(function NodeRenderer({ definition, parentPath }) {
+const NodeRenderer = memo(function NodeRenderer({ definition, parentPath, mappedProps, }) {
     if (definition.type === 'collection') {
         return _jsx(CollectionNodeRenderer, { definition: definition, parentPath: parentPath });
     }
     const childNodes = getChildNodes(definition);
     if (childNodes.length > 0) {
-        return _jsx(ContainerNodeRenderer, { definition: definition, parentPath: parentPath });
+        return _jsx(ContainerNodeRenderer, { definition: definition, parentPath: parentPath, mappedProps: mappedProps });
     }
-    return _jsx(StatefulNodeRenderer, { definition: definition, parentPath: parentPath });
+    return _jsx(StatefulNodeRenderer, { definition: definition, parentPath: parentPath, mappedProps: mappedProps });
 });
 /**
  * Renders a `ViewDefinition` tree using components registered in `ContinuumProvider`.
  */
 export function ContinuumRenderer({ view }) {
-    return (_jsx("div", { "data-continuum-view": view.viewId, children: (view.nodes ?? []).map((node) => (_jsx(NodeRenderer, { definition: node, parentPath: "" }, node.id))) }));
+    return (_jsx(_Fragment, { children: (view.nodes ?? []).map((node) => (_jsx(NodeRenderer, { definition: node, parentPath: "" }, node.id))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@continuum-dev/react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "publishConfig": {
     "access": "public"
   },
@@ -44,7 +44,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@continuum-dev/contract": "^0.1.2",
-    "@continuum-dev/session": "^0.1.2"
+    "@continuum-dev/contract": "^0.1.3",
+    "@continuum-dev/session": "^0.1.3"
   }
 }