@webiny/react-properties 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/createConfigurableComponent.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { Property } from "./index.js";
+export interface WithConfigProps {
+    children: React.ReactNode;
+    onProperties?(properties: Property[]): void;
+}
+export interface ConfigProps {
+    children: React.ReactNode;
+    priority?: "primary" | "secondary";
+}
+export declare function createConfigurableComponent<TConfig>(name: string): {
+    WithConfig: ({ onProperties, children }: WithConfigProps) => React.JSX.Element;
+    Config: ({ priority, children }: ConfigProps) => React.JSX.Element;
+    useConfig: <TExtra extends object>() => TConfig & TExtra;
+};

package/createConfigurableComponent.js

@@ -0,0 +1,67 @@
+import react, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Compose, makeDecoratable } from "@webiny/react-composition";
+import { Properties, toObject } from "./index.js";
+import { useDebugConfig } from "./useDebugConfig.js";
+import { PropertyPriorityProvider } from "./PropertyPriority.js";
+const createHOC = (newChildren)=>(BaseComponent)=>function({ children }) {
+            return /*#__PURE__*/ react.createElement(BaseComponent, null, newChildren, children);
+        };
+function createConfigurableComponent(name) {
+    const ConfigApplyPrimary = makeDecoratable(`${name}ConfigApply<Primary>`, ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children));
+    const ConfigApplySecondary = makeDecoratable(`${name}ConfigApply<Secondary>`, ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children));
+    const Config = ({ priority = "primary", children })=>{
+        if ("primary" === priority) return /*#__PURE__*/ react.createElement(Compose, {
+            component: ConfigApplyPrimary,
+            with: createHOC(children)
+        });
+        return /*#__PURE__*/ react.createElement(Compose, {
+            component: ConfigApplySecondary,
+            with: createHOC(children)
+        });
+    };
+    const defaultContext = {
+        properties: []
+    };
+    const ViewContext = /*#__PURE__*/ react.createContext(defaultContext);
+    const ConfigApplyTree = /*#__PURE__*/ react.memo(function() {
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ConfigApplyPrimary, null), /*#__PURE__*/ react.createElement(PropertyPriorityProvider, {
+            priority: 1
+        }, /*#__PURE__*/ react.createElement(ConfigApplySecondary, null)));
+    });
+    const WithConfig = ({ onProperties, children })=>{
+        const [properties, setProperties] = useState(null);
+        const resolvedProperties = properties ?? [];
+        useDebugConfig(name, resolvedProperties);
+        const context = {
+            properties: resolvedProperties
+        };
+        useEffect(()=>{
+            if (null !== properties && "function" == typeof onProperties) onProperties(properties);
+        }, [
+            properties
+        ]);
+        const stateUpdater = useCallback((properties)=>{
+            setProperties(properties);
+        }, []);
+        return /*#__PURE__*/ react.createElement(ViewContext.Provider, {
+            value: context
+        }, /*#__PURE__*/ react.createElement(Properties, {
+            name: name,
+            onChange: stateUpdater
+        }, /*#__PURE__*/ react.createElement(ConfigApplyTree, null)), null !== properties ? children : null);
+    };
+    function useConfig() {
+        const { properties } = useContext(ViewContext);
+        return useMemo(()=>toObject(properties), [
+            properties
+        ]);
+    }
+    return {
+        WithConfig,
+        Config,
+        useConfig
+    };
+}
+export { createConfigurableComponent };
+
+//# sourceMappingURL=createConfigurableComponent.js.map

package/createConfigurableComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createConfigurableComponent.js","sources":["../src/createConfigurableComponent.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport type { Decorator } from \"@webiny/react-composition\";\nimport { Compose, makeDecoratable } from \"@webiny/react-composition\";\nimport type { GenericComponent } from \"@webiny/react-composition/types.js\";\nimport type { Property } from \"~/index.js\";\nimport { Properties, toObject } from \"~/index.js\";\nimport { useDebugConfig } from \"./useDebugConfig.js\";\nimport { PropertyPriorityProvider } from \"./PropertyPriority.js\";\n\n/**\n * Each `<Config>` call composes a new HOC around the previous one via `Compose`.\n * The last composed HOC is the outermost wrapper. By placing `{newChildren}`\n * (this HOC's addition) before `{children}` (all previously composed configs),\n * the final render order matches declaration order:\n *\n *   <Config>A</Config>  →  renders first  (outermost HOC, its newChildren rendered first)\n *   <Config>B</Config>  →  renders second\n *   <Config>C</Config>  →  renders third  (innermost, rendered last via children chain)\n *\n * This is important because Property components register in mount order,\n * so declaration order = mount order = predictable config resolution.\n */\nconst createHOC =\n    (newChildren: React.ReactNode): Decorator<GenericComponent<{ children?: React.ReactNode }>> =>\n    BaseComponent => {\n        return function ConfigHOC({ children }) {\n            return (\n                <BaseComponent>\n                    {newChildren}\n                    {children}\n                </BaseComponent>\n            );\n        };\n    };\n\nexport interface WithConfigProps {\n    children: React.ReactNode;\n    onProperties?(properties: Property[]): void;\n}\n\ninterface ConfigApplyProps {\n    children?: React.ReactNode;\n}\n\nexport interface ConfigProps {\n    children: React.ReactNode;\n    priority?: \"primary\" | \"secondary\";\n}\n\nexport function createConfigurableComponent<TConfig>(name: string) {\n    const ConfigApplyPrimary = makeDecoratable(\n        `${name}ConfigApply<Primary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const ConfigApplySecondary = makeDecoratable(\n        `${name}ConfigApply<Secondary>`,\n        ({ children }: ConfigApplyProps) => {\n            return <>{children}</>;\n        }\n    );\n\n    const Config = ({ priority = \"primary\", children }: ConfigProps) => {\n        if (priority === \"primary\") {\n            return <Compose component={ConfigApplyPrimary} with={createHOC(children)} />;\n        }\n        return <Compose component={ConfigApplySecondary} with={createHOC(children)} />;\n    };\n\n    interface ViewContext {\n        properties: Property[];\n    }\n\n    const defaultContext = { properties: [] };\n\n    const ViewContext = React.createContext<ViewContext>(defaultContext);\n\n    /**\n     * Memoized config subtree — ConfigApply components don't depend on WithConfig\n     * props, so they must not remount when the parent re-renders. Without this,\n     * every parent re-render causes Property components inside HOCs to unmount\n     * and remount, corrupting the config object.\n     */\n    const ConfigApplyTree = React.memo(function ConfigApplyTree() {\n        return (\n            <>\n                <ConfigApplyPrimary />\n                <PropertyPriorityProvider priority={1}>\n                    <ConfigApplySecondary />\n                </PropertyPriorityProvider>\n            </>\n        );\n    });\n\n    const WithConfig = ({ onProperties, children }: WithConfigProps) => {\n        // `null` = config not yet collected; `[]` = collected but empty.\n        // This distinction is critical: children must NOT render until the\n        // PropertyStore debounce has flushed and delivered the initial config.\n        // Rendering children with partial/empty config causes errors in\n        // consumers like LexicalEditor that require a complete config on mount.\n        const [properties, setProperties] = useState<Property[] | null>(null);\n        const resolvedProperties = properties ?? [];\n        useDebugConfig(name, resolvedProperties);\n        const context = { properties: resolvedProperties };\n\n        useEffect(() => {\n            if (properties !== null && typeof onProperties === \"function\") {\n                onProperties(properties);\n            }\n        }, [properties]);\n\n        const stateUpdater = useCallback((properties: Property[]) => {\n            setProperties(properties);\n        }, []);\n\n        return (\n            <ViewContext.Provider value={context}>\n                {/* ConfigApplyTree always renders so Property components inside\n                    composed HOCs can mount and register with the PropertyStore.\n                    It lives outside the children gate below. */}\n                <Properties name={name} onChange={stateUpdater}>\n                    <ConfigApplyTree />\n                </Properties>\n                {/* Gate: only render children once the PropertyStore has flushed\n                    its first batch (properties !== null). This guarantees that\n                    useConfig() returns a complete config object on first render. */}\n                {properties !== null ? children : null}\n            </ViewContext.Provider>\n        );\n    };\n\n    function useConfig<TExtra extends object>(): TConfig & TExtra {\n        const { properties } = useContext(ViewContext);\n        return useMemo(() => toObject<TConfig & TExtra>(properties), [properties]);\n    }\n\n    return {\n        WithConfig,\n        Config,\n        useConfig\n    };\n}\n"],"names":["createHOC","newChildren","BaseComponent","children","createConfigurableComponent","name","ConfigApplyPrimary","makeDecoratable","ConfigApplySecondary","Config","priority","Compose","defaultContext","ViewContext","React","ConfigApplyTree","PropertyPriorityProvider","WithConfig","onProperties","properties","setProperties","useState","resolvedProperties","useDebugConfig","context","useEffect","stateUpdater","useCallback","Properties","useConfig","useContext","useMemo","toObject"],"mappings":";;;;;AAsBA,MAAMA,YACF,CAACC,cACDC,CAAAA,gBACW,SAAmB,EAAEC,QAAQ,EAAE;YAClC,OAAO,WAAP,GACI,oBAACD,eAAAA,MACID,aACAE;QAGb;AAiBD,SAASC,4BAAqCC,IAAY;IAC7D,MAAMC,qBAAqBC,gBACvB,GAAGF,KAAK,oBAAoB,CAAC,EAC7B,CAAC,EAAEF,QAAQ,EAAoB,GACpB,WAAP,GAAO,0CAAGA;IAIlB,MAAMK,uBAAuBD,gBACzB,GAAGF,KAAK,sBAAsB,CAAC,EAC/B,CAAC,EAAEF,QAAQ,EAAoB,GACpB,WAAP,GAAO,0CAAGA;IAIlB,MAAMM,SAAS,CAAC,EAAEC,WAAW,SAAS,EAAEP,QAAQ,EAAe;QAC3D,IAAIO,AAAa,cAAbA,UACA,OAAO,WAAP,GAAO,oBAACC,SAAOA;YAAC,WAAWL;YAAoB,MAAMN,UAAUG;;QAEnE,OAAO,WAAP,GAAO,oBAACQ,SAAOA;YAAC,WAAWH;YAAsB,MAAMR,UAAUG;;IACrE;IAMA,MAAMS,iBAAiB;QAAE,YAAY,EAAE;IAAC;IAExC,MAAMC,cAAc,WAAdA,GAAcC,MAAAA,aAAmB,CAAcF;IAQrD,MAAMG,kBAAkB,WAAlBA,GAAkBD,MAAAA,IAAU,CAAC;QAC/B,OAAO,WAAP,GACI,wDACI,oBAACR,oBAAAA,OAAAA,WAAAA,GACD,oBAACU,0BAAwBA;YAAC,UAAU;yBAChC,oBAACR,sBAAAA;IAIjB;IAEA,MAAMS,aAAa,CAAC,EAAEC,YAAY,EAAEf,QAAQ,EAAmB;QAM3D,MAAM,CAACgB,YAAYC,cAAc,GAAGC,SAA4B;QAChE,MAAMC,qBAAqBH,cAAc,EAAE;QAC3CI,eAAelB,MAAMiB;QACrB,MAAME,UAAU;YAAE,YAAYF;QAAmB;QAEjDG,UAAU;YACN,IAAIN,AAAe,SAAfA,cAAuB,AAAwB,cAAxB,OAAOD,cAC9BA,aAAaC;QAErB,GAAG;YAACA;SAAW;QAEf,MAAMO,eAAeC,YAAY,CAACR;YAC9BC,cAAcD;QAClB,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACN,YAAY,QAAQ;YAAC,OAAOW;yBAIzB,oBAACI,YAAUA;YAAC,MAAMvB;YAAM,UAAUqB;yBAC9B,oBAACX,iBAAAA,QAKJI,AAAe,SAAfA,aAAsBhB,WAAW;IAG9C;IAEA,SAAS0B;QACL,MAAM,EAAEV,UAAU,EAAE,GAAGW,WAAWjB;QAClC,OAAOkB,QAAQ,IAAMC,SAA2Bb,aAAa;YAACA;SAAW;IAC7E;IAEA,OAAO;QACHF;QACAR;QACAoB;IACJ;AACJ"}

package/domain/PropertyStore.d.ts

@@ -0,0 +1,51 @@
+import type { Property } from "../Properties.js";
+interface AddPropertyOptions {
+    after?: string;
+    before?: string;
+    priority?: number;
+}
+type Listener = (properties: Property[]) => void;
+export declare class PropertyStore {
+    private map;
+    private order;
+    private queue;
+    private listeners;
+    private priorities;
+    /** Properties that were explicitly positioned via before/after. */
+    private positioned;
+    /**
+     * Synchronous lookup map — written immediately on addProperty (before debounce),
+     * so useAncestor can find properties during render.
+     */
+    private lookup;
+    private scheduleFlush;
+    get allProperties(): Property[];
+    subscribe(listener: Listener): () => void;
+    /**
+     * Returns properties that are children of the given parent ID.
+     * Reads from the synchronous lookup map, so it works during render
+     * before the debounced queue has flushed.
+     */
+    getChildrenOf(parentId: string): Property[];
+    /**
+     * Find a property by ID from the synchronous lookup map.
+     */
+    getById(id: string): Property | undefined;
+    /**
+     * Register a property in the synchronous lookup map during render,
+     * so useAncestor can find it before the debounced queue flushes.
+     */
+    registerLookup(property: Property): void;
+    addProperty(property: Property, options?: AddPropertyOptions): void;
+    removeProperty(id: string): void;
+    replaceProperty(oldId: string, newProperty: Property): void;
+    private processQueue;
+    private executeAdd;
+    private executeRemove;
+    private executeReplace;
+    private insertBefore;
+    private insertAfter;
+    private reposition;
+    private removeDescendants;
+}
+export {};

package/domain/PropertyStore.js

@@ -0,0 +1,154 @@
+import debounce from "lodash/debounce.js";
+class PropertyStore {
+    get allProperties() {
+        return this.order.filter((id)=>this.map.has(id)).map((id)=>this.map.get(id));
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return ()=>{
+            this.listeners.delete(listener);
+        };
+    }
+    getChildrenOf(parentId) {
+        return Array.from(this.lookup.values()).filter((p)=>p.parent === parentId);
+    }
+    getById(id) {
+        return this.lookup.get(id);
+    }
+    registerLookup(property) {
+        if (this.lookup.has(property.id)) {
+            const existing = this.lookup.get(property.id);
+            this.lookup.set(property.id, {
+                ...existing,
+                ...property
+            });
+        } else this.lookup.set(property.id, property);
+    }
+    addProperty(property, options = {}) {
+        this.registerLookup(property);
+        this.queue.push({
+            type: "add",
+            property,
+            options
+        });
+        this.scheduleFlush();
+    }
+    removeProperty(id) {
+        this.lookup.delete(id);
+        this.queue.push({
+            type: "remove",
+            id
+        });
+        this.scheduleFlush();
+    }
+    replaceProperty(oldId, newProperty) {
+        this.lookup.delete(oldId);
+        this.lookup.set(newProperty.id, newProperty);
+        this.queue.push({
+            type: "replace",
+            oldId,
+            newProperty
+        });
+        this.scheduleFlush();
+    }
+    processQueue() {
+        if (0 === this.queue.length) return;
+        const ops = this.queue.splice(0);
+        ops.sort((a, b)=>{
+            const pa = "add" === a.type ? a.options.priority ?? 0 : 0;
+            const pb = "add" === b.type ? b.options.priority ?? 0 : 0;
+            return pa - pb;
+        });
+        for (const op of ops)switch(op.type){
+            case "add":
+                this.executeAdd(op.property, op.options);
+                break;
+            case "remove":
+                this.executeRemove(op.id);
+                break;
+            case "replace":
+                this.executeReplace(op.oldId, op.newProperty);
+                break;
+        }
+        this.order.sort((a, b)=>{
+            if (this.positioned.has(a) || this.positioned.has(b)) return 0;
+            return (this.priorities.get(a) ?? 0) - (this.priorities.get(b) ?? 0);
+        });
+        const properties = this.allProperties;
+        for (const listener of this.listeners)listener(properties);
+    }
+    executeAdd(property, options) {
+        if (options.after || options.before) this.positioned.add(property.id);
+        const exists = this.map.has(property.id);
+        if (exists) {
+            const existing = this.map.get(property.id);
+            this.map.set(property.id, {
+                ...existing,
+                ...property
+            });
+            if (options.after) this.reposition(property.id, options.after, "after");
+            else if (options.before) this.reposition(property.id, options.before, "before");
+            return;
+        }
+        this.map.set(property.id, property);
+        this.priorities.set(property.id, options.priority ?? 0);
+        if (options.after) this.insertAfter(property.id, options.after);
+        else if (options.before) this.insertBefore(property.id, options.before);
+        else this.order.push(property.id);
+    }
+    executeRemove(id) {
+        if (!this.map.has(id)) return;
+        this.map.delete(id);
+        this.priorities.delete(id);
+        this.positioned.delete(id);
+        this.order = this.order.filter((oid)=>oid !== id);
+    }
+    executeReplace(oldId, newProperty) {
+        const idx = this.order.indexOf(oldId);
+        if (-1 === idx) return;
+        this.map.delete(oldId);
+        this.map.set(newProperty.id, newProperty);
+        this.order[idx] = newProperty.id;
+        this.removeDescendants(oldId);
+    }
+    insertBefore(id, before) {
+        if (before.endsWith("$first")) return void this.order.unshift(id);
+        const targetIdx = this.order.indexOf(before);
+        if (-1 === targetIdx) return void this.order.push(id);
+        this.order.splice(targetIdx, 0, id);
+    }
+    insertAfter(id, after) {
+        if (after.endsWith("$last")) return void this.order.push(id);
+        const targetIdx = this.order.indexOf(after);
+        if (-1 === targetIdx) return void this.order.push(id);
+        this.order.splice(targetIdx + 1, 0, id);
+    }
+    reposition(id, targetId, position) {
+        this.order = this.order.filter((oid)=>oid !== id);
+        if ("before" === position) this.insertBefore(id, targetId);
+        else this.insertAfter(id, targetId);
+    }
+    removeDescendants(parentId) {
+        const children = Array.from(this.map.values()).filter((p)=>p.parent === parentId);
+        for (const child of children){
+            this.map.delete(child.id);
+            this.order = this.order.filter((oid)=>oid !== child.id);
+            this.removeDescendants(child.id);
+        }
+    }
+    constructor(){
+        this.map = new Map();
+        this.order = [];
+        this.queue = [];
+        this.listeners = new Set();
+        this.priorities = new Map();
+        this.positioned = new Set();
+        this.lookup = new Map();
+        this.scheduleFlush = debounce(()=>{
+            this.processQueue();
+        }, 0);
+    }
+}
+export { PropertyStore };
+
+//# sourceMappingURL=PropertyStore.js.map

package/domain/PropertyStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domain/PropertyStore.js","sources":["../../src/domain/PropertyStore.ts"],"sourcesContent":["import debounce from \"lodash/debounce.js\";\nimport type { Property } from \"../Properties.js\";\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n    priority?: number;\n}\n\ntype Operation =\n    | { type: \"add\"; property: Property; options: AddPropertyOptions }\n    | { type: \"remove\"; id: string }\n    | { type: \"replace\"; oldId: string; newProperty: Property };\n\ntype Listener = (properties: Property[]) => void;\n\nexport class PropertyStore {\n    private map = new Map<string, Property>();\n    private order: string[] = [];\n    private queue: Operation[] = [];\n    private listeners = new Set<Listener>();\n    private priorities = new Map<string, number>();\n    /** Properties that were explicitly positioned via before/after. */\n    private positioned = new Set<string>();\n\n    /**\n     * Synchronous lookup map — written immediately on addProperty (before debounce),\n     * so useAncestor can find properties during render.\n     */\n    private lookup = new Map<string, Property>();\n\n    private scheduleFlush = debounce(() => {\n        this.processQueue();\n    }, 0);\n\n    get allProperties(): Property[] {\n        return this.order.filter(id => this.map.has(id)).map(id => this.map.get(id)!);\n    }\n\n    subscribe(listener: Listener): () => void {\n        this.listeners.add(listener);\n        return () => {\n            this.listeners.delete(listener);\n        };\n    }\n\n    /**\n     * Returns properties that are children of the given parent ID.\n     * Reads from the synchronous lookup map, so it works during render\n     * before the debounced queue has flushed.\n     */\n    getChildrenOf(parentId: string): Property[] {\n        return Array.from(this.lookup.values()).filter(p => p.parent === parentId);\n    }\n\n    /**\n     * Find a property by ID from the synchronous lookup map.\n     */\n    getById(id: string): Property | undefined {\n        return this.lookup.get(id);\n    }\n\n    /**\n     * Register a property in the synchronous lookup map during render,\n     * so useAncestor can find it before the debounced queue flushes.\n     */\n    registerLookup(property: Property): void {\n        if (this.lookup.has(property.id)) {\n            const existing = this.lookup.get(property.id)!;\n            this.lookup.set(property.id, { ...existing, ...property });\n        } else {\n            this.lookup.set(property.id, property);\n        }\n    }\n\n    addProperty(property: Property, options: AddPropertyOptions = {}): void {\n        this.registerLookup(property);\n        this.queue.push({ type: \"add\", property, options });\n        this.scheduleFlush();\n    }\n\n    removeProperty(id: string): void {\n        this.lookup.delete(id);\n        this.queue.push({ type: \"remove\", id });\n        this.scheduleFlush();\n    }\n\n    replaceProperty(oldId: string, newProperty: Property): void {\n        this.lookup.delete(oldId);\n        this.lookup.set(newProperty.id, newProperty);\n        this.queue.push({ type: \"replace\", oldId, newProperty });\n        this.scheduleFlush();\n    }\n\n    private processQueue(): void {\n        if (this.queue.length === 0) {\n            return;\n        }\n\n        const ops = this.queue.splice(0);\n\n        // Stable-sort operations so that \"add\" ops with lower priority numbers\n        // are processed first. Non-add operations and adds with default priority (0)\n        // keep their original order.\n        ops.sort((a, b) => {\n            const pa = a.type === \"add\" ? (a.options.priority ?? 0) : 0;\n            const pb = b.type === \"add\" ? (b.options.priority ?? 0) : 0;\n            return pa - pb;\n        });\n\n        for (const op of ops) {\n            switch (op.type) {\n                case \"add\":\n                    this.executeAdd(op.property, op.options);\n                    break;\n                case \"remove\":\n                    this.executeRemove(op.id);\n                    break;\n                case \"replace\":\n                    this.executeReplace(op.oldId, op.newProperty);\n                    break;\n            }\n        }\n\n        // Stable-sort the order array by priority, but only for properties\n        // that were NOT explicitly positioned via before/after. Explicitly\n        // positioned properties keep their placement.\n        this.order.sort((a, b) => {\n            if (this.positioned.has(a) || this.positioned.has(b)) {\n                return 0;\n            }\n            return (this.priorities.get(a) ?? 0) - (this.priorities.get(b) ?? 0);\n        });\n\n        const properties = this.allProperties;\n        for (const listener of this.listeners) {\n            listener(properties);\n        }\n    }\n\n    private executeAdd(property: Property, options: AddPropertyOptions): void {\n        if (options.after || options.before) {\n            this.positioned.add(property.id);\n        }\n\n        const exists = this.map.has(property.id);\n\n        if (exists) {\n            // Merge into existing property. Keep the original priority so\n            // that a secondary config overriding a primary property doesn't\n            // cause the re-sort to move it after all primary properties.\n            const existing = this.map.get(property.id)!;\n            this.map.set(property.id, { ...existing, ...property });\n\n            if (options.after) {\n                this.reposition(property.id, options.after, \"after\");\n            } else if (options.before) {\n                this.reposition(property.id, options.before, \"before\");\n            }\n            return;\n        }\n\n        this.map.set(property.id, property);\n        // Set priority only for new properties — not merges (handled above).\n        this.priorities.set(property.id, options.priority ?? 0);\n\n        if (options.after) {\n            this.insertAfter(property.id, options.after);\n        } else if (options.before) {\n            this.insertBefore(property.id, options.before);\n        } else {\n            this.order.push(property.id);\n        }\n    }\n\n    private executeRemove(id: string): void {\n        if (!this.map.has(id)) {\n            return;\n        }\n        this.map.delete(id);\n        this.priorities.delete(id);\n        this.positioned.delete(id);\n        this.order = this.order.filter(oid => oid !== id);\n        // Note: we intentionally do NOT call removeDescendants here.\n        // React's component lifecycle ensures that when a parent Property\n        // unmounts, all child Properties unmount too — each triggering its\n        // own removeProperty call. Calling removeDescendants would wipe\n        // children that belong to OTHER still-mounted configs sharing the\n        // same parent ID (e.g., id=\"pageSettings\" used by both primary\n        // and secondary configs).\n    }\n\n    private executeReplace(oldId: string, newProperty: Property): void {\n        const idx = this.order.indexOf(oldId);\n        if (idx === -1) {\n            return;\n        }\n\n        this.map.delete(oldId);\n        this.map.set(newProperty.id, newProperty);\n        this.order[idx] = newProperty.id;\n        this.removeDescendants(oldId);\n    }\n\n    private insertBefore(id: string, before: string): void {\n        if (before.endsWith(\"$first\")) {\n            this.order.unshift(id);\n            return;\n        }\n        const targetIdx = this.order.indexOf(before);\n        if (targetIdx === -1) {\n            this.order.push(id);\n            return;\n        }\n        this.order.splice(targetIdx, 0, id);\n    }\n\n    private insertAfter(id: string, after: string): void {\n        if (after.endsWith(\"$last\")) {\n            this.order.push(id);\n            return;\n        }\n        const targetIdx = this.order.indexOf(after);\n        if (targetIdx === -1) {\n            this.order.push(id);\n            return;\n        }\n        this.order.splice(targetIdx + 1, 0, id);\n    }\n\n    private reposition(id: string, targetId: string, position: \"before\" | \"after\"): void {\n        this.order = this.order.filter(oid => oid !== id);\n\n        if (position === \"before\") {\n            this.insertBefore(id, targetId);\n        } else {\n            this.insertAfter(id, targetId);\n        }\n    }\n\n    private removeDescendants(parentId: string): void {\n        const children = Array.from(this.map.values()).filter(p => p.parent === parentId);\n        for (const child of children) {\n            this.map.delete(child.id);\n            this.order = this.order.filter(oid => oid !== child.id);\n            this.removeDescendants(child.id);\n        }\n    }\n}\n"],"names":["PropertyStore","id","listener","parentId","Array","p","property","existing","options","oldId","newProperty","ops","a","b","pa","pb","op","properties","exists","oid","idx","before","targetIdx","after","targetId","position","children","child","Map","Set","debounce"],"mappings":"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"}

package/domain/index.d.ts

@@ -0,0 +1 @@
+export { PropertyStore } from "./PropertyStore.js";

package/domain/index.js

@@ -0,0 +1 @@
+export { PropertyStore } from "./PropertyStore.js";

package/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";
+export * from "./domain/index.js";
+export { DevToolsSection } from "./DevToolsSection.js";

package/index.js

@@ -1,31 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _utils = require("./utils");
-
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _utils[key];
-    }
-  });
-});
-
-var _Properties = require("./Properties");
-
-Object.keys(_Properties).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Properties[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Properties[key];
-    }
-  });
-});
+export * from "./utils.js";
+export * from "./Properties.js";
+export * from "./useDebugConfig.js";
+export * from "./useIdGenerator.js";
+export * from "./createConfigurableComponent.js";
+export * from "./domain/index.js";
+export { DevToolsSection } from "./DevToolsSection.js";

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "@webiny/react-properties",
-	"version": "0.0.0-unstable.78f581c1d2",
-	"main": "index.js",
+	"version": "0.0.0-unstable.7be00a75a9",
+	"type": "module",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -10,24 +14,22 @@
 	"author": "Webiny Ltd",
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.19.0",
-		"@types/react": "17.0.39",
-		"nanoid": "3.3.4",
-		"react": "17.0.2"
+		"@types/react": "18.3.29",
+		"@webiny/react-composition": "0.0.0-unstable.7be00a75a9",
+		"lodash": "4.18.1",
+		"nanoid": "5.1.11",
+		"react": "18.3.1"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^12.1.5",
-		"@webiny/cli": "^0.0.0-unstable.78f581c1d2",
-		"@webiny/project-utils": "^0.0.0-unstable.78f581c1d2",
-		"@webiny/react-composition": "^0.0.0-unstable.78f581c1d2"
+		"@testing-library/react": "16.3.2",
+		"@webiny/build-tools": "0.0.0-unstable.7be00a75a9",
+		"oxfmt": "0.51.0",
+		"vitest": "4.1.7"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
-	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+		"access": "public"
 	},
-	"gitHead": "78f581c1d2e5e6936aa11b9452a66d2a3652a1b2"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/useDebugConfig.d.ts

@@ -0,0 +1,32 @@
+import type { Property } from "./Properties.js";
+interface WebinyDevtoolsConfig {
+    properties: Array<{
+        id: string;
+        parent: string;
+        name: string;
+        value?: unknown;
+        array?: boolean;
+    }>;
+    config: unknown;
+    updatedAt: number;
+}
+interface WebinyDevtoolsSection {
+    data: unknown;
+    group: string;
+    views: string[];
+    updatedAt: number;
+}
+interface WebinyDevtoolsHook {
+    revision: number;
+    configs: Record<string, WebinyDevtoolsConfig>;
+    sections: Record<string, WebinyDevtoolsSection>;
+}
+declare global {
+    interface Window {
+        __debugConfigs: Record<string, () => void>;
+        __WEBINY_DEVTOOLS_HOOK__?: WebinyDevtoolsHook;
+    }
+}
+export declare function getHook(): WebinyDevtoolsHook;
+export declare function useDebugConfig(name: string, properties: Property[]): void;
+export {};

package/useDebugConfig.js

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+import { toObject } from "./utils.js";
+function getHook() {
+    if (!window.__WEBINY_DEVTOOLS_HOOK__) window.__WEBINY_DEVTOOLS_HOOK__ = {
+        revision: 0,
+        configs: {},
+        sections: {}
+    };
+    return window.__WEBINY_DEVTOOLS_HOOK__;
+}
+function useDebugConfig(name, properties) {
+    useEffect(()=>{
+        if ("development" !== process.env.NODE_ENV) return;
+        const configs = window.__debugConfigs ?? {};
+        configs[name] = ()=>console.log(toObject(properties));
+        window.__debugConfigs = configs;
+        const hook = getHook();
+        hook.configs[name] = {
+            properties: properties.map((p)=>({
+                    id: p.id,
+                    parent: p.parent,
+                    name: p.name,
+                    value: p.value,
+                    array: p.array
+                })),
+            config: toObject(properties),
+            updatedAt: Date.now()
+        };
+        hook.revision++;
+        return ()=>{
+            const configs = window.__debugConfigs ?? {};
+            delete configs[name];
+            window.__debugConfigs = configs;
+            if (window.__WEBINY_DEVTOOLS_HOOK__) {
+                delete window.__WEBINY_DEVTOOLS_HOOK__.configs[name];
+                window.__WEBINY_DEVTOOLS_HOOK__.revision++;
+            }
+        };
+    }, [
+        properties
+    ]);
+}
+export { getHook, useDebugConfig };
+
+//# sourceMappingURL=useDebugConfig.js.map

package/useDebugConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebugConfig.js","sources":["../src/useDebugConfig.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Property } from \"./Properties.js\";\nimport { toObject } from \"./utils.js\";\n\ninterface WebinyDevtoolsConfig {\n    properties: Array<{\n        id: string;\n        parent: string;\n        name: string;\n        value?: unknown;\n        array?: boolean;\n    }>;\n    config: unknown;\n    updatedAt: number;\n}\n\ninterface WebinyDevtoolsSection {\n    data: unknown;\n    group: string;\n    views: string[];\n    updatedAt: number;\n}\n\ninterface WebinyDevtoolsHook {\n    revision: number;\n    configs: Record<string, WebinyDevtoolsConfig>;\n    sections: Record<string, WebinyDevtoolsSection>;\n}\n\ndeclare global {\n    interface Window {\n        __debugConfigs: Record<string, () => void>;\n        __WEBINY_DEVTOOLS_HOOK__?: WebinyDevtoolsHook;\n    }\n}\n\nexport function getHook(): WebinyDevtoolsHook {\n    if (!window.__WEBINY_DEVTOOLS_HOOK__) {\n        window.__WEBINY_DEVTOOLS_HOOK__ = { revision: 0, configs: {}, sections: {} };\n    }\n    return window.__WEBINY_DEVTOOLS_HOOK__;\n}\n\nexport function useDebugConfig(name: string, properties: Property[]) {\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"development\") {\n            return;\n        }\n\n        // Legacy console.log support\n        const configs = window.__debugConfigs ?? {};\n        configs[name] = () => console.log(toObject(properties));\n        window.__debugConfigs = configs;\n\n        // DevTools hook: structured data for the Chrome extension\n        const hook = getHook();\n        hook.configs[name] = {\n            properties: properties.map(p => ({\n                id: p.id,\n                parent: p.parent,\n                name: p.name,\n                value: p.value,\n                array: p.array\n            })),\n            config: toObject(properties),\n            updatedAt: Date.now()\n        };\n        hook.revision++;\n\n        return () => {\n            // Legacy cleanup\n            const configs = window.__debugConfigs ?? {};\n            delete configs[name];\n            window.__debugConfigs = configs;\n\n            // DevTools hook cleanup\n            if (window.__WEBINY_DEVTOOLS_HOOK__) {\n                delete window.__WEBINY_DEVTOOLS_HOOK__.configs[name];\n                window.__WEBINY_DEVTOOLS_HOOK__.revision++;\n            }\n        };\n    }, [properties]);\n}\n"],"names":["getHook","window","useDebugConfig","name","properties","useEffect","process","configs","console","toObject","hook","p","Date"],"mappings":";;AAoCO,SAASA;IACZ,IAAI,CAACC,OAAO,wBAAwB,EAChCA,OAAO,wBAAwB,GAAG;QAAE,UAAU;QAAG,SAAS,CAAC;QAAG,UAAU,CAAC;IAAE;IAE/E,OAAOA,OAAO,wBAAwB;AAC1C;AAEO,SAASC,eAAeC,IAAY,EAAEC,UAAsB;IAC/DC,UAAU;QACN,IAAIC,AAAyB,kBAAzBA,QAAQ,GAAG,CAAC,QAAQ,EACpB;QAIJ,MAAMC,UAAUN,OAAO,cAAc,IAAI,CAAC;QAC1CM,OAAO,CAACJ,KAAK,GAAG,IAAMK,QAAQ,GAAG,CAACC,SAASL;QAC3CH,OAAO,cAAc,GAAGM;QAGxB,MAAMG,OAAOV;QACbU,KAAK,OAAO,CAACP,KAAK,GAAG;YACjB,YAAYC,WAAW,GAAG,CAACO,CAAAA,IAAM;oBAC7B,IAAIA,EAAE,EAAE;oBACR,QAAQA,EAAE,MAAM;oBAChB,MAAMA,EAAE,IAAI;oBACZ,OAAOA,EAAE,KAAK;oBACd,OAAOA,EAAE,KAAK;gBAClB;YACA,QAAQF,SAASL;YACjB,WAAWQ,KAAK,GAAG;QACvB;QACAF,KAAK,QAAQ;QAEb,OAAO;YAEH,MAAMH,UAAUN,OAAO,cAAc,IAAI,CAAC;YAC1C,OAAOM,OAAO,CAACJ,KAAK;YACpBF,OAAO,cAAc,GAAGM;YAGxB,IAAIN,OAAO,wBAAwB,EAAE;gBACjC,OAAOA,OAAO,wBAAwB,CAAC,OAAO,CAACE,KAAK;gBACpDF,OAAO,wBAAwB,CAAC,QAAQ;YAC5C;QACJ;IACJ,GAAG;QAACG;KAAW;AACnB"}

package/useIdGenerator.d.ts

@@ -0,0 +1 @@
+export declare function useIdGenerator(name: string): (...parts: string[]) => string;

package/useIdGenerator.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+import { useParentProperty } from "./Properties.js";
+const keywords = [
+    "$first",
+    "$last"
+];
+function useIdGenerator(name) {
+    const parentProperty = useParentProperty();
+    return useCallback((...parts)=>{
+        if (keywords.includes(parts[0])) return parts[0];
+        return [
+            parentProperty?.id,
+            name,
+            ...parts
+        ].filter(Boolean).join(":");
+    }, [
+        name,
+        parentProperty
+    ]);
+}
+export { useIdGenerator };
+
+//# sourceMappingURL=useIdGenerator.js.map

package/useIdGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIdGenerator.js","sources":["../src/useIdGenerator.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useParentProperty } from \"~/Properties.js\";\n\nconst keywords = [\"$first\", \"$last\"];\n\nexport function useIdGenerator(name: string) {\n    const parentProperty = useParentProperty();\n\n    return useCallback(\n        (...parts: string[]) => {\n            if (keywords.includes(parts[0])) {\n                return parts[0];\n            }\n            return [parentProperty?.id, name, ...parts].filter(Boolean).join(\":\");\n        },\n        [name, parentProperty]\n    );\n}\n"],"names":["keywords","useIdGenerator","name","parentProperty","useParentProperty","useCallback","parts","Boolean"],"mappings":";;AAGA,MAAMA,WAAW;IAAC;IAAU;CAAQ;AAE7B,SAASC,eAAeC,IAAY;IACvC,MAAMC,iBAAiBC;IAEvB,OAAOC,YACH,CAAC,GAAGC;QACA,IAAIN,SAAS,QAAQ,CAACM,KAAK,CAAC,EAAE,GAC1B,OAAOA,KAAK,CAAC,EAAE;QAEnB,OAAO;YAACH,gBAAgB;YAAID;eAASI;SAAM,CAAC,MAAM,CAACC,SAAS,IAAI,CAAC;IACrE,GACA;QAACL;QAAMC;KAAe;AAE9B"}

package/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Property } from "./Properties.js";
+export declare function toObject<T = unknown>(properties: Property[]): T;
+export declare function getUniqueId(length?: number): string;