@webiny/react-properties 0.0.0-unstable.7c9e8fbfd6 → 0.0.0-unstable.81ae05e56b

package/DevToolsSection.d.ts

@@ -0,0 +1,40 @@
+type DevToolsView = "browse" | "raw";
+interface DevToolsSectionProps {
+    name: string;
+    data: unknown;
+    /**
+     * Group name for the sidebar. Items with the same group appear
+     * under the same header. Defaults to "Sections".
+     *
+     * @example
+     * ```tsx
+     * <DevToolsSection name="Article" group="CMS" data={model} />
+     * <DevToolsSection name="Author" group="CMS" data={author} />
+     * ```
+     */
+    group?: string;
+    /**
+     * Which views to show in the detail panel.
+     * - `"browse"` — split view with root keys on the left, value tree on the right
+     * - `"raw"` — full JSON tree view
+     *
+     * Accepts a single view or an array. First item is the default tab.
+     * @default ["browse", "raw"]
+     */
+    views?: DevToolsView | DevToolsView[];
+}
+/**
+ * Registers a named section in the Webiny DevTools extension.
+ * Renders nothing — purely a data registration side-effect.
+ *
+ * When the component unmounts (e.g., route change), the section
+ * is automatically removed from DevTools.
+ *
+ * @example
+ * ```tsx
+ * <DevToolsSection name="CMS Model" data={model} />
+ * <DevToolsSection name="Article" group="CMS" data={model} views="raw" />
+ * ```
+ */
+export declare function DevToolsSection({ name, data, group, views }: DevToolsSectionProps): null;
+export {};

package/DevToolsSection.js

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import { getHook } from "./useDebugConfig.js";
+/**
+ * Registers a named section in the Webiny DevTools extension.
+ * Renders nothing — purely a data registration side-effect.
+ *
+ * When the component unmounts (e.g., route change), the section
+ * is automatically removed from DevTools.
+ *
+ * @example
+ * ```tsx
+ * <DevToolsSection name="CMS Model" data={model} />
+ * <DevToolsSection name="Article" group="CMS" data={model} views="raw" />
+ * ```
+ */
+export function DevToolsSection({
+  name,
+  data,
+  group,
+  views
+}) {
+  // Snapshot the data on every render to get a stable, plain value.
+  // This also ensures that if data is a MobX observable, we capture
+  // the current state as a plain object (no proxies on the hook).
+  const dataKey = safeStringify(data);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") {
+      return;
+    }
+    const normalizedViews = views ? Array.isArray(views) ? views : [views] : ["browse", "raw"];
+    let plainData;
+    try {
+      plainData = JSON.parse(dataKey);
+    } catch {
+      plainData = data;
+    }
+    const hook = getHook();
+    hook.sections[name] = {
+      data: plainData,
+      group: group || "Sections",
+      views: normalizedViews,
+      updatedAt: Date.now()
+    };
+    hook.revision++;
+    return () => {
+      if (window.__WEBINY_DEVTOOLS_HOOK__) {
+        delete window.__WEBINY_DEVTOOLS_HOOK__.sections[name];
+        window.__WEBINY_DEVTOOLS_HOOK__.revision++;
+      }
+    };
+  }, [name, dataKey, group, Array.isArray(views) ? views.join(",") : views]);
+  return null;
+}
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, (_key, v) => {
+      if (typeof v === "function") {
+        return `[Function: ${v.name || "anonymous"}]`;
+      }
+      if (typeof v === "undefined") {
+        return "[undefined]";
+      }
+      return v;
+    });
+  } catch {
+    return String(value);
+  }
+}
+
+//# sourceMappingURL=DevToolsSection.js.map

package/DevToolsSection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","getHook","DevToolsSection","name","data","group","views","dataKey","safeStringify","process","env","NODE_ENV","normalizedViews","Array","isArray","plainData","JSON","parse","hook","sections","updatedAt","Date","now","revision","window","__WEBINY_DEVTOOLS_HOOK__","join","value","stringify","_key","v","String"],"sources":["DevToolsSection.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { getHook } from \"./useDebugConfig.js\";\n\ntype DevToolsView = \"browse\" | \"raw\";\n\ninterface DevToolsSectionProps {\n    name: string;\n    data: unknown;\n    /**\n     * Group name for the sidebar. Items with the same group appear\n     * under the same header. Defaults to \"Sections\".\n     *\n     * @example\n     * ```tsx\n     * <DevToolsSection name=\"Article\" group=\"CMS\" data={model} />\n     * <DevToolsSection name=\"Author\" group=\"CMS\" data={author} />\n     * ```\n     */\n    group?: string;\n    /**\n     * Which views to show in the detail panel.\n     * - `\"browse\"` — split view with root keys on the left, value tree on the right\n     * - `\"raw\"` — full JSON tree view\n     *\n     * Accepts a single view or an array. First item is the default tab.\n     * @default [\"browse\", \"raw\"]\n     */\n    views?: DevToolsView | DevToolsView[];\n}\n\n/**\n * Registers a named section in the Webiny DevTools extension.\n * Renders nothing — purely a data registration side-effect.\n *\n * When the component unmounts (e.g., route change), the section\n * is automatically removed from DevTools.\n *\n * @example\n * ```tsx\n * <DevToolsSection name=\"CMS Model\" data={model} />\n * <DevToolsSection name=\"Article\" group=\"CMS\" data={model} views=\"raw\" />\n * ```\n */\nexport function DevToolsSection({ name, data, group, views }: DevToolsSectionProps) {\n    // Snapshot the data on every render to get a stable, plain value.\n    // This also ensures that if data is a MobX observable, we capture\n    // the current state as a plain object (no proxies on the hook).\n    const dataKey = safeStringify(data);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"development\") {\n            return;\n        }\n\n        const normalizedViews: DevToolsView[] = views\n            ? Array.isArray(views)\n                ? views\n                : [views]\n            : [\"browse\", \"raw\"];\n\n        let plainData: unknown;\n        try {\n            plainData = JSON.parse(dataKey);\n        } catch {\n            plainData = data;\n        }\n\n        const hook = getHook();\n        hook.sections[name] = {\n            data: plainData,\n            group: group || \"Sections\",\n            views: normalizedViews,\n            updatedAt: Date.now()\n        };\n        hook.revision++;\n\n        return () => {\n            if (window.__WEBINY_DEVTOOLS_HOOK__) {\n                delete window.__WEBINY_DEVTOOLS_HOOK__.sections[name];\n                window.__WEBINY_DEVTOOLS_HOOK__.revision++;\n            }\n        };\n    }, [name, dataKey, group, Array.isArray(views) ? views.join(\",\") : views]);\n\n    return null;\n}\n\nfunction safeStringify(value: unknown): string {\n    try {\n        return JSON.stringify(value, (_key, v) => {\n            if (typeof v === \"function\") {\n                return `[Function: ${v.name || \"anonymous\"}]`;\n            }\n            if (typeof v === \"undefined\") {\n                return \"[undefined]\";\n            }\n            return v;\n        });\n    } catch {\n        return String(value);\n    }\n}\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,OAAO;AA6BhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAAEC,IAAI;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAA4B,CAAC,EAAE;EAChF;EACA;EACA;EACA,MAAMC,OAAO,GAAGC,aAAa,CAACJ,IAAI,CAAC;EAEnCJ,SAAS,CAAC,MAAM;IACZ,IAAIS,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;MACxC;IACJ;IAEA,MAAMC,eAA+B,GAAGN,KAAK,GACvCO,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,GAChBA,KAAK,GACL,CAACA,KAAK,CAAC,GACX,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEvB,IAAIS,SAAkB;IACtB,IAAI;MACAA,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACV,OAAO,CAAC;IACnC,CAAC,CAAC,MAAM;MACJQ,SAAS,GAAGX,IAAI;IACpB;IAEA,MAAMc,IAAI,GAAGjB,OAAO,CAAC,CAAC;IACtBiB,IAAI,CAACC,QAAQ,CAAChB,IAAI,CAAC,GAAG;MAClBC,IAAI,EAAEW,SAAS;MACfV,KAAK,EAAEA,KAAK,IAAI,UAAU;MAC1BC,KAAK,EAAEM,eAAe;MACtBQ,SAAS,EAAEC,IAAI,CAACC,GAAG,CAAC;IACxB,CAAC;IACDJ,IAAI,CAACK,QAAQ,EAAE;IAEf,OAAO,MAAM;MACT,IAAIC,MAAM,CAACC,wBAAwB,EAAE;QACjC,OAAOD,MAAM,CAACC,wBAAwB,CAACN,QAAQ,CAAChB,IAAI,CAAC;QACrDqB,MAAM,CAACC,wBAAwB,CAACF,QAAQ,EAAE;MAC9C;IACJ,CAAC;EACL,CAAC,EAAE,CAACpB,IAAI,EAAEI,OAAO,EAAEF,KAAK,EAAEQ,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,GAAGA,KAAK,CAACoB,IAAI,CAAC,GAAG,CAAC,GAAGpB,KAAK,CAAC,CAAC;EAE1E,OAAO,IAAI;AACf;AAEA,SAASE,aAAaA,CAACmB,KAAc,EAAU;EAC3C,IAAI;IACA,OAAOX,IAAI,CAACY,SAAS,CAACD,KAAK,EAAE,CAACE,IAAI,EAAEC,CAAC,KAAK;MACtC,IAAI,OAAOA,CAAC,KAAK,UAAU,EAAE;QACzB,OAAO,cAAcA,CAAC,CAAC3B,IAAI,IAAI,WAAW,GAAG;MACjD;MACA,IAAI,OAAO2B,CAAC,KAAK,WAAW,EAAE;QAC1B,OAAO,aAAa;MACxB;MACA,OAAOA,CAAC;IACZ,CAAC,CAAC;EACN,CAAC,CAAC,MAAM;IACJ,OAAOC,MAAM,CAACJ,KAAK,CAAC;EACxB;AACJ","ignoreList":[]}

package/Properties.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { PropertyStore } from "./domain/index.js";
 export interface ConnectToPropertiesProps {
     name: string;
     children: React.ReactNode;
@@ -16,10 +17,11 @@ export interface Property {
 interface AddPropertyOptions {
     after?: string;
     before?: string;
+    priority?: number;
 }
 interface PropertiesContext {
     name?: string;
-    properties: Property[];
+    store: PropertyStore;
     getAncestor(name: string): PropertiesContext | undefined;
     getObject<T = unknown>(): T;
     addProperty(property: Property, options?: AddPropertyOptions): void;
@@ -34,6 +36,7 @@ interface PropertiesProps {
 }
 export declare const Properties: ({ name, onChange, children }: PropertiesProps) => React.JSX.Element;
 export declare function useProperties(): PropertiesContext;
+export declare function useMaybeProperties(): PropertiesContext | undefined;
 export declare function useAncestorByName(name: string | undefined): PropertiesContext | undefined;
 interface PropertyProps {
     id?: string;

package/Properties.js

@@ -1,5 +1,7 @@
-import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
-import { getUniqueId, toObject } from "./utils";
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { getUniqueId, toObject } from "./utils.js";
+import { PropertyStore } from "./domain/index.js";
+import { usePropertyPriority } from "./PropertyPriority.js";
 const PropertiesTargetContext = /*#__PURE__*/createContext(undefined);
 export const ConnectToProperties = ({
   name,
@@ -9,49 +11,17 @@ export const ConnectToProperties = ({
     value: name
   }, children);
 };
-function removeByParent(id, properties) {
-  return properties.filter(prop => prop.parent === id).reduce((acc, item) => {
-    return removeByParent(item.id, acc.filter(prop => prop.id !== item.id));
-  }, properties);
-}
-function putPropertyBefore(properties, property, before) {
-  const existingIndex = properties.findIndex(prop => prop.id === property.id);
-  if (existingIndex > -1) {
-    const existingProperty = properties[existingIndex];
-    const newProperties = properties.filter(p => p.id !== property.id);
-    const targetIndex = before.endsWith("$first") ? 0 : newProperties.findIndex(prop => prop.id === before);
-    return [...newProperties.slice(0, targetIndex), existingProperty, ...newProperties.slice(targetIndex)];
-  }
-  const targetIndex = properties.findIndex(prop => prop.id === before);
-  return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];
-}
-function putPropertyAfter(properties, property, after) {
-  const existingIndex = properties.findIndex(prop => prop.id === property.id);
-  if (existingIndex > -1) {
-    const [removedProperty] = properties.splice(existingIndex, 1);
-    const targetIndex = after.endsWith("$last") ? properties.length - 1 : properties.findIndex(prop => prop.id === after);
-    return [...properties.slice(0, targetIndex + 1), removedProperty, ...properties.slice(targetIndex + 1)];
-  }
-  const targetIndex = properties.findIndex(prop => prop.id === after);
-  return [...properties.slice(0, targetIndex + 1), property, ...properties.slice(targetIndex + 1)];
-}
-function mergeProperty(properties, property) {
-  const index = properties.findIndex(prop => prop.id === property.id);
-  if (index > -1) {
-    return [...properties.slice(0, index), {
-      ...properties[index],
-      ...property
-    }, ...properties.slice(index + 1)];
-  }
-  return properties;
-}
 const PropertiesContext = /*#__PURE__*/createContext(undefined);
 export const Properties = ({
   name,
   onChange,
   children
 }) => {
-  const [properties, setProperties] = useState([]);
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new PropertyStore();
+  }
+  const store = storeRef.current;
   let parent;
   try {
     parent = useProperties();
@@ -59,13 +29,19 @@ export const Properties = ({
     // Do nothing, if there's no parent.
   }
   useEffect(() => {
-    if (onChange) {
-      onChange(properties);
+    if (!onChange) {
+      return;
     }
-  }, [properties]);
+    return store.subscribe(properties => {
+      onChange(properties);
+    });
+  }, [store, onChange]);
+
+  // Context value is stable — it never changes after mount.
+  // Children never re-render due to context changes.
   const context = useMemo(() => ({
     name,
-    properties,
+    store,
     getAncestor(ancestorName) {
       if (!parent) {
         return undefined;
@@ -73,61 +49,36 @@ export const Properties = ({
       return parent && parent.name === ancestorName ? parent : parent.getAncestor(ancestorName);
     },
     getObject() {
-      return toObject(properties);
+      return toObject(store.allProperties);
     },
     addProperty(property, options = {}) {
-      setProperties(properties => {
-        const index = properties.findIndex(prop => prop.id === property.id);
-        if (index > -1) {
-          const newProperties = mergeProperty(properties, property);
-          if (options.after) {
-            return putPropertyAfter(newProperties, property, options.after);
-          }
-          if (options.before) {
-            return putPropertyBefore(newProperties, property, options.before);
-          }
-          return newProperties;
-        }
-        if (options.after) {
-          return putPropertyAfter(properties, property, options.after);
-        }
-        if (options.before) {
-          return putPropertyBefore(properties, property, options.before);
-        }
-        return [...properties, property];
-      });
+      store.addProperty(property, options);
     },
     removeProperty(id) {
-      setProperties(properties => {
-        return removeByParent(id, properties.filter(prop => prop.id !== id));
-      });
+      store.removeProperty(id);
     },
     replaceProperty(id, property) {
-      setProperties(properties => {
-        const toReplace = properties.findIndex(prop => prop.id === id);
-        if (toReplace > -1) {
-          // Replace the property and remove all remaining child properties.
-          return removeByParent(id, [...properties.slice(0, toReplace), property, ...properties.slice(toReplace + 1)]);
-        }
-        return properties;
-      });
+      store.replaceProperty(id, property);
     }
-  }), [properties]);
+  }), [store]);
   return /*#__PURE__*/React.createElement(PropertiesContext.Provider, {
     value: context
   }, children);
 };
 export function useProperties() {
-  const properties = useContext(PropertiesContext);
-  if (!properties) {
+  const context = useContext(PropertiesContext);
+  if (!context) {
     throw Error("Properties context provider is missing!");
   }
-  return properties;
+  return context;
+}
+export function useMaybeProperties() {
+  return useContext(PropertiesContext);
 }
 export function useAncestorByName(name) {
-  const parent = useProperties();
+  const parent = useMaybeProperties();
   return useMemo(() => {
-    if (!name) {
+    if (!name || !parent) {
       return undefined;
     }
     if (parent.name === name) {
@@ -143,14 +94,15 @@ export function useParentProperty() {
 export function useAncestor(params) {
   const property = useParentProperty();
   const {
-    properties
+    store
   } = useProperties();
   const matchOrGetAncestor = (property, params) => {
-    const matchedProps = properties.filter(prop => prop.parent === property.id).filter(prop => prop.name in params && prop.value === params[prop.name]);
+    const children = store.getChildrenOf(property.id);
+    const matchedProps = children.filter(prop => prop.name in params && prop.value === params[prop.name]);
     if (matchedProps.length === Object.keys(params).length) {
       return property;
     }
-    const newParent = property.parent ? properties.find(prop => prop.id === property.parent) : undefined;
+    const newParent = property.parent ? store.getById(property.parent) : undefined;
     return newParent ? matchOrGetAncestor(newParent, params) : undefined;
   };
   return property ? matchOrGetAncestor(property, params) : undefined;
@@ -173,14 +125,17 @@ export const Property = ({
   const parentProperty = useParentProperty();
   const immediateProperties = useProperties();
   const ancestorByName = useAncestorByName(targetName);
-  const properties = targetName ? ancestorByName : immediateProperties;
+  const previousValue = useRef(value);
+  const priority = usePropertyPriority();
+  const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;
   if (!properties) {
     throw Error("<Properties> provider is missing higher in the hierarchy!");
   }
   const {
     addProperty,
     removeProperty,
-    replaceProperty
+    replaceProperty,
+    store: propertyStore
   } = properties;
   const parentId = parent ? parent : root ? "" : parentProperty?.id || "";
   const property = {
@@ -190,6 +145,11 @@ export const Property = ({
     parent: parentId,
     array
   };
+
+  // Register in the synchronous lookup during render so useAncestor can find this property.
+  if (!remove) {
+    propertyStore.registerLookup(property);
+  }
   useEffect(() => {
     if (remove) {
       removeProperty(uniqueId);
@@ -207,12 +167,21 @@ export const Property = ({
       $isLast
     }, {
       after,
-      before
+      before,
+      priority
     });
     return () => {
       removeProperty(uniqueId);
     };
   }, []);
+  useEffect(() => {
+    if (previousValue.current !== value) {
+      previousValue.current = value;
+      if (!remove && !replace) {
+        replaceProperty(uniqueId, property);
+      }
+    }
+  }, [value]);
   if (children) {
     return /*#__PURE__*/React.createElement(PropertyContext.Provider, {
       value: property

package/Properties.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useState","getUniqueId","toObject","PropertiesTargetContext","undefined","ConnectToProperties","name","children","createElement","Provider","value","removeByParent","id","properties","filter","prop","parent","reduce","acc","item","putPropertyBefore","property","before","existingIndex","findIndex","existingProperty","newProperties","p","targetIndex","endsWith","slice","putPropertyAfter","after","removedProperty","splice","length","mergeProperty","index","PropertiesContext","Properties","onChange","setProperties","useProperties","context","getAncestor","ancestorName","getObject","addProperty","options","removeProperty","replaceProperty","toReplace","Error","useAncestorByName","PropertyContext","useParentProperty","useAncestor","params","matchOrGetAncestor","matchedProps","Object","keys","newParent","find","Property","replace","remove","array","root","targetName","uniqueId","parentProperty","immediateProperties","ancestorByName","parentId","$isFirst","$isLast"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { getUniqueId, toObject } from \"./utils\";\n\nconst PropertiesTargetContext = createContext<string | undefined>(undefined);\n\nexport interface ConnectToPropertiesProps {\n    name: string;\n    children: React.ReactNode;\n}\n\nexport const ConnectToProperties = ({ name, children }: ConnectToPropertiesProps) => {\n    return (\n        <PropertiesTargetContext.Provider value={name}>{children}</PropertiesTargetContext.Provider>\n    );\n};\n\nexport interface Property {\n    id: string;\n    parent: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    $isFirst?: boolean;\n    $isLast?: boolean;\n}\n\nfunction removeByParent(id: string, properties: Property[]): Property[] {\n    return properties\n        .filter(prop => prop.parent === id)\n        .reduce((acc, item) => {\n            return removeByParent(\n                item.id,\n                acc.filter(prop => prop.id !== item.id)\n            );\n        }, properties);\n}\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n}\n\ninterface PropertiesContext {\n    name?: string;\n    properties: Property[];\n    getAncestor(name: string): PropertiesContext | undefined;\n    getObject<T = unknown>(): T;\n    addProperty(property: Property, options?: AddPropertyOptions): void;\n    removeProperty(id: string): void;\n    replaceProperty(id: string, property: Property): void;\n}\n\nfunction putPropertyBefore(properties: Property[], property: Property, before: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n    if (existingIndex > -1) {\n        const existingProperty = properties[existingIndex];\n        const newProperties = properties.filter(p => p.id !== property.id);\n        const targetIndex = before.endsWith(\"$first\")\n            ? 0\n            : newProperties.findIndex(prop => prop.id === before);\n        return [\n            ...newProperties.slice(0, targetIndex),\n            existingProperty,\n            ...newProperties.slice(targetIndex)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === before);\n\n    return [...properties.slice(0, targetIndex), property, ...properties.slice(targetIndex)];\n}\n\nfunction putPropertyAfter(properties: Property[], property: Property, after: string) {\n    const existingIndex = properties.findIndex(prop => prop.id === property.id);\n\n    if (existingIndex > -1) {\n        const [removedProperty] = properties.splice(existingIndex, 1);\n        const targetIndex = after.endsWith(\"$last\")\n            ? properties.length - 1\n            : properties.findIndex(prop => prop.id === after);\n        return [\n            ...properties.slice(0, targetIndex + 1),\n            removedProperty,\n            ...properties.slice(targetIndex + 1)\n        ];\n    }\n\n    const targetIndex = properties.findIndex(prop => prop.id === after);\n\n    return [\n        ...properties.slice(0, targetIndex + 1),\n        property,\n        ...properties.slice(targetIndex + 1)\n    ];\n}\n\nfunction mergeProperty(properties: Property[], property: Property) {\n    const index = properties.findIndex(prop => prop.id === property.id);\n    if (index > -1) {\n        return [\n            ...properties.slice(0, index),\n            { ...properties[index], ...property },\n            ...properties.slice(index + 1)\n        ];\n    }\n    return properties;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n    name?: string;\n    onChange?(properties: Property[]): void;\n    children: React.ReactNode;\n}\n\nexport const Properties = ({ name, onChange, children }: PropertiesProps) => {\n    const [properties, setProperties] = useState<Property[]>([]);\n    let parent: PropertiesContext;\n\n    try {\n        parent = useProperties();\n    } catch {\n        // Do nothing, if there's no parent.\n    }\n\n    useEffect(() => {\n        if (onChange) {\n            onChange(properties);\n        }\n    }, [properties]);\n\n    const context: PropertiesContext = useMemo(\n        () => ({\n            name,\n            properties,\n            getAncestor(ancestorName: string) {\n                if (!parent) {\n                    return undefined;\n                }\n\n                return parent && parent.name === ancestorName\n                    ? parent\n                    : parent.getAncestor(ancestorName);\n            },\n            getObject<T>() {\n                return toObject(properties) as T;\n            },\n            addProperty(property, options = {}) {\n                setProperties(properties => {\n                    const index = properties.findIndex(prop => prop.id === property.id);\n\n                    if (index > -1) {\n                        const newProperties = mergeProperty(properties, property);\n                        if (options.after) {\n                            return putPropertyAfter(newProperties, property, options.after);\n                        }\n                        if (options.before) {\n                            return putPropertyBefore(newProperties, property, options.before);\n                        }\n\n                        return newProperties;\n                    }\n\n                    if (options.after) {\n                        return putPropertyAfter(properties, property, options.after);\n                    }\n\n                    if (options.before) {\n                        return putPropertyBefore(properties, property, options.before);\n                    }\n\n                    return [...properties, property];\n                });\n            },\n            removeProperty(id) {\n                setProperties(properties => {\n                    return removeByParent(\n                        id,\n                        properties.filter(prop => prop.id !== id)\n                    );\n                });\n            },\n            replaceProperty(id, property) {\n                setProperties(properties => {\n                    const toReplace = properties.findIndex(prop => prop.id === id);\n\n                    if (toReplace > -1) {\n                        // Replace the property and remove all remaining child properties.\n                        return removeByParent(id, [\n                            ...properties.slice(0, toReplace),\n                            property,\n                            ...properties.slice(toReplace + 1)\n                        ]);\n                    }\n                    return properties;\n                });\n            }\n        }),\n        [properties]\n    );\n\n    return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n    const properties = useContext(PropertiesContext);\n    if (!properties) {\n        throw Error(\"Properties context provider is missing!\");\n    }\n\n    return properties;\n}\n\nexport function useAncestorByName(name: string | undefined) {\n    const parent = useProperties();\n\n    return useMemo(() => {\n        if (!name) {\n            return undefined;\n        }\n\n        if (parent.name === name) {\n            return parent;\n        }\n\n        return parent.getAncestor(name);\n    }, [name]);\n}\n\ninterface PropertyProps {\n    id?: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    after?: string;\n    before?: string;\n    replace?: string;\n    remove?: boolean;\n    parent?: string;\n    root?: boolean;\n    children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n    return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n    [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n    const property = useParentProperty();\n    const { properties } = useProperties();\n\n    const matchOrGetAncestor = (\n        property: Property,\n        params: AncestorMatch\n    ): Property | undefined => {\n        const matchedProps = properties\n            .filter(prop => prop.parent === property.id)\n            .filter(prop => prop.name in params && prop.value === params[prop.name]);\n\n        if (matchedProps.length === Object.keys(params).length) {\n            return property;\n        }\n\n        const newParent = property.parent\n            ? properties.find(prop => prop.id === property.parent)\n            : undefined;\n\n        return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n    };\n\n    return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n    id,\n    name,\n    value,\n    children,\n    after = undefined,\n    before = undefined,\n    replace = undefined,\n    remove = false,\n    array = false,\n    root = false,\n    parent = undefined\n}: PropertyProps) => {\n    const targetName = useContext(PropertiesTargetContext);\n    const uniqueId = useMemo(() => id || getUniqueId(), []);\n    const parentProperty = useParentProperty();\n    const immediateProperties = useProperties();\n    const ancestorByName = useAncestorByName(targetName);\n\n    const properties = targetName ? ancestorByName : immediateProperties;\n\n    if (!properties) {\n        throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n    }\n\n    const { addProperty, removeProperty, replaceProperty } = properties;\n    const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n    const property = { id: uniqueId, name, value, parent: parentId, array };\n\n    useEffect(() => {\n        if (remove) {\n            removeProperty(uniqueId);\n            return;\n        }\n\n        if (replace) {\n            replaceProperty(replace, property);\n            return;\n        }\n\n        const $isFirst = before === \"$first\";\n        const $isLast = after === \"$last\";\n\n        addProperty({ ...property, $isFirst, $isLast }, { after, before });\n\n        return () => {\n            removeProperty(uniqueId);\n        };\n    }, []);\n\n    if (children) {\n        return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n    }\n\n    return null;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","getUniqueId","toObject","PropertyStore","usePropertyPriority","PropertiesTargetContext","undefined","ConnectToProperties","name","children","createElement","Provider","value","PropertiesContext","Properties","onChange","storeRef","current","store","parent","useProperties","subscribe","properties","context","getAncestor","ancestorName","getObject","allProperties","addProperty","property","options","removeProperty","id","replaceProperty","Error","useMaybeProperties","useAncestorByName","PropertyContext","useParentProperty","useAncestor","params","matchOrGetAncestor","getChildrenOf","matchedProps","filter","prop","length","Object","keys","newParent","getById","Property","after","before","replace","remove","array","root","targetName","uniqueId","parentProperty","immediateProperties","ancestorByName","previousValue","priority","propertyStore","parentId","registerLookup","$isFirst","$isLast"],"sources":["Properties.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { getUniqueId, toObject } from \"./utils.js\";\nimport { PropertyStore } from \"./domain/index.js\";\nimport { usePropertyPriority } from \"./PropertyPriority.js\";\n\nconst PropertiesTargetContext = createContext<string | undefined>(undefined);\n\nexport interface ConnectToPropertiesProps {\n    name: string;\n    children: React.ReactNode;\n}\n\nexport const ConnectToProperties = ({ name, children }: ConnectToPropertiesProps) => {\n    return (\n        <PropertiesTargetContext.Provider value={name}>{children}</PropertiesTargetContext.Provider>\n    );\n};\n\nexport interface Property {\n    id: string;\n    parent: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    $isFirst?: boolean;\n    $isLast?: boolean;\n}\n\ninterface AddPropertyOptions {\n    after?: string;\n    before?: string;\n    priority?: number;\n}\n\ninterface PropertiesContext {\n    name?: string;\n    store: PropertyStore;\n    getAncestor(name: string): PropertiesContext | undefined;\n    getObject<T = unknown>(): T;\n    addProperty(property: Property, options?: AddPropertyOptions): void;\n    removeProperty(id: string): void;\n    replaceProperty(id: string, property: Property): void;\n}\n\nconst PropertiesContext = createContext<PropertiesContext | undefined>(undefined);\n\ninterface PropertiesProps {\n    name?: string;\n    onChange?(properties: Property[]): void;\n    children: React.ReactNode;\n}\n\nexport const Properties = ({ name, onChange, children }: PropertiesProps) => {\n    const storeRef = useRef<PropertyStore | null>(null);\n    if (!storeRef.current) {\n        storeRef.current = new PropertyStore();\n    }\n    const store = storeRef.current;\n\n    let parent: PropertiesContext;\n\n    try {\n        parent = useProperties();\n    } catch {\n        // Do nothing, if there's no parent.\n    }\n\n    useEffect(() => {\n        if (!onChange) {\n            return;\n        }\n\n        return store.subscribe(properties => {\n            onChange(properties);\n        });\n    }, [store, onChange]);\n\n    // Context value is stable — it never changes after mount.\n    // Children never re-render due to context changes.\n    const context: PropertiesContext = useMemo(\n        () => ({\n            name,\n            store,\n            getAncestor(ancestorName: string) {\n                if (!parent) {\n                    return undefined;\n                }\n\n                return parent && parent.name === ancestorName\n                    ? parent\n                    : parent.getAncestor(ancestorName);\n            },\n            getObject<T>() {\n                return toObject(store.allProperties) as T;\n            },\n            addProperty(property, options = {}) {\n                store.addProperty(property, options);\n            },\n            removeProperty(id) {\n                store.removeProperty(id);\n            },\n            replaceProperty(id, property) {\n                store.replaceProperty(id, property);\n            }\n        }),\n        [store]\n    );\n\n    return <PropertiesContext.Provider value={context}>{children}</PropertiesContext.Provider>;\n};\n\nexport function useProperties() {\n    const context = useContext(PropertiesContext);\n    if (!context) {\n        throw Error(\"Properties context provider is missing!\");\n    }\n\n    return context;\n}\n\nexport function useMaybeProperties() {\n    return useContext(PropertiesContext);\n}\n\nexport function useAncestorByName(name: string | undefined) {\n    const parent = useMaybeProperties();\n\n    return useMemo(() => {\n        if (!name || !parent) {\n            return undefined;\n        }\n\n        if (parent.name === name) {\n            return parent;\n        }\n\n        return parent.getAncestor(name);\n    }, [name]);\n}\n\ninterface PropertyProps {\n    id?: string;\n    name: string;\n    value?: unknown;\n    array?: boolean;\n    after?: string;\n    before?: string;\n    replace?: string;\n    remove?: boolean;\n    parent?: string;\n    root?: boolean;\n    children?: React.ReactNode;\n}\n\nconst PropertyContext = createContext<Property | undefined>(undefined);\n\nexport function useParentProperty() {\n    return useContext(PropertyContext);\n}\n\ninterface AncestorMatch {\n    [key: string]: string | boolean | number | null | undefined;\n}\n\nexport function useAncestor(params: AncestorMatch) {\n    const property = useParentProperty();\n    const { store } = useProperties();\n\n    const matchOrGetAncestor = (\n        property: Property,\n        params: AncestorMatch\n    ): Property | undefined => {\n        const children = store.getChildrenOf(property.id);\n        const matchedProps = children.filter(\n            prop => prop.name in params && prop.value === params[prop.name]\n        );\n\n        if (matchedProps.length === Object.keys(params).length) {\n            return property;\n        }\n\n        const newParent = property.parent ? store.getById(property.parent) : undefined;\n\n        return newParent ? matchOrGetAncestor(newParent, params) : undefined;\n    };\n\n    return property ? matchOrGetAncestor(property, params) : undefined;\n}\n\nexport const Property = ({\n    id,\n    name,\n    value,\n    children,\n    after = undefined,\n    before = undefined,\n    replace = undefined,\n    remove = false,\n    array = false,\n    root = false,\n    parent = undefined\n}: PropertyProps) => {\n    const targetName = useContext(PropertiesTargetContext);\n    const uniqueId = useMemo(() => id || getUniqueId(), []);\n    const parentProperty = useParentProperty();\n    const immediateProperties = useProperties();\n    const ancestorByName = useAncestorByName(targetName);\n    const previousValue = useRef(value);\n    const priority = usePropertyPriority();\n\n    const properties = targetName && ancestorByName ? ancestorByName : immediateProperties;\n\n    if (!properties) {\n        throw Error(\"<Properties> provider is missing higher in the hierarchy!\");\n    }\n\n    const { addProperty, removeProperty, replaceProperty, store: propertyStore } = properties;\n    const parentId = parent ? parent : root ? \"\" : parentProperty?.id || \"\";\n    const property = { id: uniqueId, name, value, parent: parentId, array };\n\n    // Register in the synchronous lookup during render so useAncestor can find this property.\n    if (!remove) {\n        propertyStore.registerLookup(property);\n    }\n\n    useEffect(() => {\n        if (remove) {\n            removeProperty(uniqueId);\n            return;\n        }\n\n        if (replace) {\n            replaceProperty(replace, property);\n            return;\n        }\n\n        const $isFirst = before === \"$first\";\n        const $isLast = after === \"$last\";\n\n        addProperty({ ...property, $isFirst, $isLast }, { after, before, priority });\n\n        return () => {\n            removeProperty(uniqueId);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (previousValue.current !== value) {\n            previousValue.current = value;\n            if (!remove && !replace) {\n                replaceProperty(uniqueId, property);\n            }\n        }\n    }, [value]);\n\n    if (children) {\n        return <PropertyContext.Provider value={property}>{children}</PropertyContext.Provider>;\n    }\n\n    return null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACpF,SAASC,WAAW,EAAEC,QAAQ;AAC9B,SAASC,aAAa;AACtB,SAASC,mBAAmB;AAE5B,MAAMC,uBAAuB,gBAAGT,aAAa,CAAqBU,SAAS,CAAC;AAO5E,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAmC,CAAC,KAAK;EACjF,oBACId,KAAA,CAAAe,aAAA,CAACL,uBAAuB,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAK,GAAEC,QAA2C,CAAC;AAEpG,CAAC;AA4BD,MAAMI,iBAAiB,gBAAGjB,aAAa,CAAgCU,SAAS,CAAC;AAQjF,OAAO,MAAMQ,UAAU,GAAGA,CAAC;EAAEN,IAAI;EAAEO,QAAQ;EAAEN;AAA0B,CAAC,KAAK;EACzE,MAAMO,QAAQ,GAAGhB,MAAM,CAAuB,IAAI,CAAC;EACnD,IAAI,CAACgB,QAAQ,CAACC,OAAO,EAAE;IACnBD,QAAQ,CAACC,OAAO,GAAG,IAAId,aAAa,CAAC,CAAC;EAC1C;EACA,MAAMe,KAAK,GAAGF,QAAQ,CAACC,OAAO;EAE9B,IAAIE,MAAyB;EAE7B,IAAI;IACAA,MAAM,GAAGC,aAAa,CAAC,CAAC;EAC5B,CAAC,CAAC,MAAM;IACJ;EAAA;EAGJtB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACiB,QAAQ,EAAE;MACX;IACJ;IAEA,OAAOG,KAAK,CAACG,SAAS,CAACC,UAAU,IAAI;MACjCP,QAAQ,CAACO,UAAU,CAAC;IACxB,CAAC,CAAC;EACN,CAAC,EAAE,CAACJ,KAAK,EAAEH,QAAQ,CAAC,CAAC;;EAErB;EACA;EACA,MAAMQ,OAA0B,GAAGxB,OAAO,CACtC,OAAO;IACHS,IAAI;IACJU,KAAK;IACLM,WAAWA,CAACC,YAAoB,EAAE;MAC9B,IAAI,CAACN,MAAM,EAAE;QACT,OAAOb,SAAS;MACpB;MAEA,OAAOa,MAAM,IAAIA,MAAM,CAACX,IAAI,KAAKiB,YAAY,GACvCN,MAAM,GACNA,MAAM,CAACK,WAAW,CAACC,YAAY,CAAC;IAC1C,CAAC;IACDC,SAASA,CAAA,EAAM;MACX,OAAOxB,QAAQ,CAACgB,KAAK,CAACS,aAAa,CAAC;IACxC,CAAC;IACDC,WAAWA,CAACC,QAAQ,EAAEC,OAAO,GAAG,CAAC,CAAC,EAAE;MAChCZ,KAAK,CAACU,WAAW,CAACC,QAAQ,EAAEC,OAAO,CAAC;IACxC,CAAC;IACDC,cAAcA,CAACC,EAAE,EAAE;MACfd,KAAK,CAACa,cAAc,CAACC,EAAE,CAAC;IAC5B,CAAC;IACDC,eAAeA,CAACD,EAAE,EAAEH,QAAQ,EAAE;MAC1BX,KAAK,CAACe,eAAe,CAACD,EAAE,EAAEH,QAAQ,CAAC;IACvC;EACJ,CAAC,CAAC,EACF,CAACX,KAAK,CACV,CAAC;EAED,oBAAOvB,KAAA,CAAAe,aAAA,CAACG,iBAAiB,CAACF,QAAQ;IAACC,KAAK,EAAEW;EAAQ,GAAEd,QAAqC,CAAC;AAC9F,CAAC;AAED,OAAO,SAASW,aAAaA,CAAA,EAAG;EAC5B,MAAMG,OAAO,GAAG1B,UAAU,CAACgB,iBAAiB,CAAC;EAC7C,IAAI,CAACU,OAAO,EAAE;IACV,MAAMW,KAAK,CAAC,yCAAyC,CAAC;EAC1D;EAEA,OAAOX,OAAO;AAClB;AAEA,OAAO,SAASY,kBAAkBA,CAAA,EAAG;EACjC,OAAOtC,UAAU,CAACgB,iBAAiB,CAAC;AACxC;AAEA,OAAO,SAASuB,iBAAiBA,CAAC5B,IAAwB,EAAE;EACxD,MAAMW,MAAM,GAAGgB,kBAAkB,CAAC,CAAC;EAEnC,OAAOpC,OAAO,CAAC,MAAM;IACjB,IAAI,CAACS,IAAI,IAAI,CAACW,MAAM,EAAE;MAClB,OAAOb,SAAS;IACpB;IAEA,IAAIa,MAAM,CAACX,IAAI,KAAKA,IAAI,EAAE;MACtB,OAAOW,MAAM;IACjB;IAEA,OAAOA,MAAM,CAACK,WAAW,CAAChB,IAAI,CAAC;EACnC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;AACd;AAgBA,MAAM6B,eAAe,gBAAGzC,aAAa,CAAuBU,SAAS,CAAC;AAEtE,OAAO,SAASgC,iBAAiBA,CAAA,EAAG;EAChC,OAAOzC,UAAU,CAACwC,eAAe,CAAC;AACtC;AAMA,OAAO,SAASE,WAAWA,CAACC,MAAqB,EAAE;EAC/C,MAAMX,QAAQ,GAAGS,iBAAiB,CAAC,CAAC;EACpC,MAAM;IAAEpB;EAAM,CAAC,GAAGE,aAAa,CAAC,CAAC;EAEjC,MAAMqB,kBAAkB,GAAGA,CACvBZ,QAAkB,EAClBW,MAAqB,KACE;IACvB,MAAM/B,QAAQ,GAAGS,KAAK,CAACwB,aAAa,CAACb,QAAQ,CAACG,EAAE,CAAC;IACjD,MAAMW,YAAY,GAAGlC,QAAQ,CAACmC,MAAM,CAChCC,IAAI,IAAIA,IAAI,CAACrC,IAAI,IAAIgC,MAAM,IAAIK,IAAI,CAACjC,KAAK,KAAK4B,MAAM,CAACK,IAAI,CAACrC,IAAI,CAClE,CAAC;IAED,IAAImC,YAAY,CAACG,MAAM,KAAKC,MAAM,CAACC,IAAI,CAACR,MAAM,CAAC,CAACM,MAAM,EAAE;MACpD,OAAOjB,QAAQ;IACnB;IAEA,MAAMoB,SAAS,GAAGpB,QAAQ,CAACV,MAAM,GAAGD,KAAK,CAACgC,OAAO,CAACrB,QAAQ,CAACV,MAAM,CAAC,GAAGb,SAAS;IAE9E,OAAO2C,SAAS,GAAGR,kBAAkB,CAACQ,SAAS,EAAET,MAAM,CAAC,GAAGlC,SAAS;EACxE,CAAC;EAED,OAAOuB,QAAQ,GAAGY,kBAAkB,CAACZ,QAAQ,EAAEW,MAAM,CAAC,GAAGlC,SAAS;AACtE;AAEA,OAAO,MAAM6C,QAAQ,GAAGA,CAAC;EACrBnB,EAAE;EACFxB,IAAI;EACJI,KAAK;EACLH,QAAQ;EACR2C,KAAK,GAAG9C,SAAS;EACjB+C,MAAM,GAAG/C,SAAS;EAClBgD,OAAO,GAAGhD,SAAS;EACnBiD,MAAM,GAAG,KAAK;EACdC,KAAK,GAAG,KAAK;EACbC,IAAI,GAAG,KAAK;EACZtC,MAAM,GAAGb;AACE,CAAC,KAAK;EACjB,MAAMoD,UAAU,GAAG7D,UAAU,CAACQ,uBAAuB,CAAC;EACtD,MAAMsD,QAAQ,GAAG5D,OAAO,CAAC,MAAMiC,EAAE,IAAI/B,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC;EACvD,MAAM2D,cAAc,GAAGtB,iBAAiB,CAAC,CAAC;EAC1C,MAAMuB,mBAAmB,GAAGzC,aAAa,CAAC,CAAC;EAC3C,MAAM0C,cAAc,GAAG1B,iBAAiB,CAACsB,UAAU,CAAC;EACpD,MAAMK,aAAa,GAAG/D,MAAM,CAACY,KAAK,CAAC;EACnC,MAAMoD,QAAQ,GAAG5D,mBAAmB,CAAC,CAAC;EAEtC,MAAMkB,UAAU,GAAGoC,UAAU,IAAII,cAAc,GAAGA,cAAc,GAAGD,mBAAmB;EAEtF,IAAI,CAACvC,UAAU,EAAE;IACb,MAAMY,KAAK,CAAC,2DAA2D,CAAC;EAC5E;EAEA,MAAM;IAAEN,WAAW;IAAEG,cAAc;IAAEE,eAAe;IAAEf,KAAK,EAAE+C;EAAc,CAAC,GAAG3C,UAAU;EACzF,MAAM4C,QAAQ,GAAG/C,MAAM,GAAGA,MAAM,GAAGsC,IAAI,GAAG,EAAE,GAAGG,cAAc,EAAE5B,EAAE,IAAI,EAAE;EACvE,MAAMH,QAAQ,GAAG;IAAEG,EAAE,EAAE2B,QAAQ;IAAEnD,IAAI;IAAEI,KAAK;IAAEO,MAAM,EAAE+C,QAAQ;IAAEV;EAAM,CAAC;;EAEvE;EACA,IAAI,CAACD,MAAM,EAAE;IACTU,aAAa,CAACE,cAAc,CAACtC,QAAQ,CAAC;EAC1C;EAEA/B,SAAS,CAAC,MAAM;IACZ,IAAIyD,MAAM,EAAE;MACRxB,cAAc,CAAC4B,QAAQ,CAAC;MACxB;IACJ;IAEA,IAAIL,OAAO,EAAE;MACTrB,eAAe,CAACqB,OAAO,EAAEzB,QAAQ,CAAC;MAClC;IACJ;IAEA,MAAMuC,QAAQ,GAAGf,MAAM,KAAK,QAAQ;IACpC,MAAMgB,OAAO,GAAGjB,KAAK,KAAK,OAAO;IAEjCxB,WAAW,CAAC;MAAE,GAAGC,QAAQ;MAAEuC,QAAQ;MAAEC;IAAQ,CAAC,EAAE;MAAEjB,KAAK;MAAEC,MAAM;MAAEW;IAAS,CAAC,CAAC;IAE5E,OAAO,MAAM;MACTjC,cAAc,CAAC4B,QAAQ,CAAC;IAC5B,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN7D,SAAS,CAAC,MAAM;IACZ,IAAIiE,aAAa,CAAC9C,OAAO,KAAKL,KAAK,EAAE;MACjCmD,aAAa,CAAC9C,OAAO,GAAGL,KAAK;MAC7B,IAAI,CAAC2C,MAAM,IAAI,CAACD,OAAO,EAAE;QACrBrB,eAAe,CAAC0B,QAAQ,EAAE9B,QAAQ,CAAC;MACvC;IACJ;EACJ,CAAC,EAAE,CAACjB,KAAK,CAAC,CAAC;EAEX,IAAIH,QAAQ,EAAE;IACV,oBAAOd,KAAA,CAAAe,aAAA,CAAC2B,eAAe,CAAC1B,QAAQ;MAACC,KAAK,EAAEiB;IAAS,GAAEpB,QAAmC,CAAC;EAC3F;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/PropertyPriority.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface PropertyPriorityProviderProps {
+    priority: number;
+    children: React.ReactNode;
+}
+export declare const PropertyPriorityProvider: ({ priority, children }: PropertyPriorityProviderProps) => React.JSX.Element;
+export declare function usePropertyPriority(): number;
+export {};

package/PropertyPriority.js

@@ -0,0 +1,15 @@
+import React, { createContext, useContext } from "react";
+const PropertyPriorityContext = /*#__PURE__*/createContext(0);
+export const PropertyPriorityProvider = ({
+  priority,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(PropertyPriorityContext.Provider, {
+    value: priority
+  }, children);
+};
+export function usePropertyPriority() {
+  return useContext(PropertyPriorityContext);
+}
+
+//# sourceMappingURL=PropertyPriority.js.map

package/PropertyPriority.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","PropertyPriorityContext","PropertyPriorityProvider","priority","children","createElement","Provider","value","usePropertyPriority"],"sources":["PropertyPriority.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\n\nconst PropertyPriorityContext = createContext(0);\n\ninterface PropertyPriorityProviderProps {\n    priority: number;\n    children: React.ReactNode;\n}\n\nexport const PropertyPriorityProvider = ({ priority, children }: PropertyPriorityProviderProps) => {\n    return (\n        <PropertyPriorityContext.Provider value={priority}>\n            {children}\n        </PropertyPriorityContext.Provider>\n    );\n};\n\nexport function usePropertyPriority(): number {\n    return useContext(PropertyPriorityContext);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAExD,MAAMC,uBAAuB,gBAAGF,aAAa,CAAC,CAAC,CAAC;AAOhD,OAAO,MAAMG,wBAAwB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAwC,CAAC,KAAK;EAC/F,oBACIN,KAAA,CAAAO,aAAA,CAACJ,uBAAuB,CAACK,QAAQ;IAACC,KAAK,EAAEJ;EAAS,GAC7CC,QAC6B,CAAC;AAE3C,CAAC;AAED,OAAO,SAASI,mBAAmBA,CAAA,EAAW;EAC1C,OAAOR,UAAU,CAACC,uBAAuB,CAAC;AAC9C","ignoreList":[]}

package/README.md

@@ -1,65 +1,11 @@
-# React Properties
+# @webiny/react-properties
 
-[![](https://img.shields.io/npm/dw/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
-[![](https://img.shields.io/npm/v/@webiny/react-properties.svg)](https://www.npmjs.com/package/@webiny/react-properties)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-A tiny React properties framework, to build dynamic data objects using React components, which can be customized after initial creation. The usage is very similar to how you write XML data structures, but in this case you're using actual React.
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-## Basic Example
+---
 
-```jsx
-import React, { useCallback } from "react";
-import { Properties, Property, toObject } from "@webiny/react-properties";
-
-const View = () => {
-  const onChange = useCallback(properties => {
-    console.log(toObject(properties));
-  }, []);
-
-  return (
-    <Properties onChange={onChange}>
-      <Property name={"group"}>
-        <Property name={"name"} value={"layout"} />
-        <Property name={"label"} value={"Layout"} />
-        <Property name={"toolbar"}>
-          <Property name={"name"} value={"basic"} />
-        </Property>
-      </Property>
-      <Property name={"group"}>
-        <Property name={"name"} value={"heroes"} />
-        <Property name={"label"} value={"Heroes"} />
-        <Property name={"toolbar"}>
-          <Property name={"name"} value={"heroes"} />
-        </Property>
-      </Property>
-    </Properties>
-  );
-};
-```
-
-Output:
-
-```json
-{
-  "group": [
-    {
-      "name": "layout",
-      "label": "Layout",
-      "toolbar": {
-        "name": "basic"
-      }
-    },
-    {
-      "name": "heroes",
-      "label": "Heroes",
-      "toolbar": {
-        "name": "heroes"
-      }
-    }
-  ]
-}
-```
-
-For more examples, check out the test files.
+_This README file is automatically generated during the publish process._

package/createConfigurableComponent.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { Property } from "./index";
+import type { Property } from "./index.js";
 export interface WithConfigProps {
     children: React.ReactNode;
     onProperties?(properties: Property[]): void;