fractostate 4.2.1 → 4.3.2

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var store = require('./src/store.js');
 var proxy = require('./src/proxy.js');
 
@@ -55,6 +55,62 @@ function defineDerived(source, selector, derivedKey) {
 function defineFlow(key, initial, options) {
     return { key, initial, options: options };
 }
+/**
+ * Non-hook version of useFlow.
+ * Useful for accessing and interacting with flows outside React components (e.g., axios interceptors).
+ */
+function getFlow(def) {
+    const { key, initial, options: flowOptions } = def;
+    const state = store.store.get(key, initial, flowOptions);
+    const boundActions = {};
+    const defaultOps = {
+        get self() {
+            return proxy.createDeepProxy(key, [], store.store.get(key, initial), {
+                ...flowOptions,
+                actions: boundActions,
+                actor: flowOptions?.actor,
+            });
+        },
+        get state() {
+            return store.store.get(key, initial);
+        },
+    };
+    const actions = def?.options?.actions || flowOptions?.actions;
+    if (actions) {
+        for (const [name, fn] of Object.entries(actions)) {
+            boundActions[name] = (...args) => fn(...args)(defaultOps);
+        }
+    }
+    const toolbox = {
+        ops: defaultOps,
+        actions: boundActions,
+        _undo: () => store.store.undo(key),
+        _redo: () => store.store.redo(key),
+        history: store.store.getHistory(key),
+        _canUndo: store.store.getHistory(key).length > 1,
+        _canRedo: store.store.getRedoStack(key).length > 0,
+        _set: (val) => {
+            const next = typeof val === "function" ? val(store.store.get(key)) : val;
+            store.store.set(key, next, {
+                ...flowOptions,
+                force: true,
+                actor: flowOptions?.actor,
+            });
+        },
+        _patch: (val) => {
+            const next = typeof val === "function" ? val(store.store.get(key)) : val;
+            store.store.set(key, next, {
+                ...flowOptions,
+                force: false,
+                actor: flowOptions?.actor,
+            });
+        },
+        _reset: () => store.store.reset(key),
+        cf: flowOptions || {},
+        isHydrating: !!store.store.__hydrating__?.has(key),
+    };
+    return [state, toolbox];
+}
 function useFlow(keyOrDef, initial, options) {
     const isDerived = typeof keyOrDef === "object" && "selector" in keyOrDef;
     const isDef = typeof keyOrDef === "object" && "key" in keyOrDef && !isDerived;
@@ -73,17 +129,17 @@ function useFlow(keyOrDef, initial, options) {
         : isDerived
             ? keyOrDef.source.options
             : options;
-    const [state, setState] = react.useState(() => {
+    const [state, setState] = React.useState(() => {
         const raw = store.store.get(key, initialVal, flowOptions);
         return isDerived ? keyOrDef.selector(raw) : raw;
     });
-    react.useEffect(() => {
+    React.useEffect(() => {
         return store.store.subscribe(key, () => {
             const raw = store.store.get(key, initialVal);
             setState(isDerived ? keyOrDef.selector(raw) : raw);
         }, flowOptions?.name || flowOptions?.actor);
     }, [key, isDerived, flowOptions?.name, flowOptions?.actor]);
-    const toolbox = react.useMemo(() => {
+    const toolbox = React.useMemo(() => {
         if (isDerived)
             return {};
         const boundActions = {};
@@ -139,6 +195,7 @@ function useFlow(keyOrDef, initial, options) {
 
 exports.defineDerived = defineDerived;
 exports.defineFlow = defineFlow;
+exports.getFlow = getFlow;
 exports.initFlow = initFlow;
 exports.useFlow = useFlow;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["/* *****************************************************************************\n * FractoSate\n *\n * ACCESS RESTRICTIONS:\n * - This software is exclusively for use by Authorized Personnel of NEHONIX\n * - Intended for Internal Use only within NEHONIX operations\n * - No rights granted to unauthorized individuals or entities\n * - All modifications are works made for hire assigned to NEHONIX\n *\n * PROHIBITED ACTIVITIES:\n * - Copying, distributing, or sublicensing without written permission\n * - Reverse engineering, decompiling, or disassembling\n * - Creating derivative works without explicit authorization\n * - External use or commercial distribution outside NEHONIX\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n * For questions or permissions, contact:\n * NEHONIX Legal Department\n * Email: legal@nehonix.com\n * Website: www.nehonix.com\n ***************************************************************************** */\n\nimport { useState, useEffect, useMemo } from \"react\";\nimport type {\n  FlowOperations,\n  FlowDefinition,\n  DerivedFlowDefinition,\n  FlowOptions,\n  UseFlowOptions,\n  FlowOpsObject,\n} from \"./types\";\nimport { store } from \"./store\";\nimport { createDeepProxy } from \"./proxy\";\n\n// Connect proxy creator to store for internal effects\nstore.setProxyCreator(createDeepProxy);\n\nexport * from \"./types\";\n\n/**\n * Manually initializes a flow to ensure its effects run immediately.\n * This is useful for flows that need to start working before any component subscribes to them.\n */\nexport function initFlow<T, A>(flow: FlowDefinition<T, A>) {\n  store.get(flow.key, flow.initial, flow.options);\n}\n\n/**\n * Defines a derived flow that reacts to changes in a source flow.\n * Use this for computed values that shouldn't be manually modified.\n */\nexport function defineDerived<T, R>(\n  source: FlowDefinition<T, any>,\n  selector: (state: T) => R,\n  derivedKey?: string,\n): DerivedFlowDefinition<T, R> {\n  return {\n    key: derivedKey || `${source.key}_derived_${Date.now()}`,\n    source,\n    selector,\n  };\n}\n\nexport function defineFlow<\n  T,\n  A extends Record<\n    string,\n    (...args: any[]) => (ops: FlowOpsObject<T, A>) => any\n  >,\n>(\n  key: string,\n  initial: T,\n  options: FlowOptions<NoInfer<T>, A> & {\n    actions: A;\n  },\n): FlowDefinition<T, A>;\nexport function defineFlow<T>(\n  key: string,\n  initial: T,\n  options?: FlowOptions<NoInfer<T>, {}>,\n): FlowDefinition<T, {}>;\nexport function defineFlow<T, A>(\n  key: string,\n  initial: T,\n  options?: FlowOptions<T> & { actions?: A },\n): FlowDefinition<T, A> {\n  return { key, initial, options: options as any };\n}\n\n/**\n * Main hook to consume and interact with a FractoState flow.\n * Returns a tuple containing the current [State, Toolbox].\n */\nexport function useFlow<K extends string, T = any>(\n  key: K,\n  initial?: T,\n  options?: UseFlowOptions<T>,\n): [T, FlowOperations<T, {}>];\n\nexport function useFlow<T, A>(\n  def: FlowDefinition<T, A>,\n  options?: UseFlowOptions<T>,\n): [T, FlowOperations<T, A>];\n\nexport function useFlow<T, R>(def: DerivedFlowDefinition<T, R>): [R, {}];\n\nexport function useFlow(\n  keyOrDef: any,\n  initial?: any,\n  options?: any,\n): [any, any] {\n  const isDerived = typeof keyOrDef === \"object\" && \"selector\" in keyOrDef;\n  const isDef = typeof keyOrDef === \"object\" && \"key\" in keyOrDef && !isDerived;\n\n  const key = isDef\n    ? (keyOrDef as any).key\n    : isDerived\n      ? (keyOrDef as any).source.key\n      : (keyOrDef as string);\n  const initialVal = isDef\n    ? (keyOrDef as any).initial\n    : isDerived\n      ? (keyOrDef as any).source.initial\n      : initial;\n  const flowOptions = isDef\n    ? { ...((keyOrDef as any).options || {}), ...(initial || {}) }\n    : isDerived\n      ? (keyOrDef as any).source.options\n      : options;\n\n  const [state, setState] = useState(() => {\n    const raw = store.get(key, initialVal, flowOptions);\n    return isDerived ? (keyOrDef as any).selector(raw) : raw;\n  });\n\n  useEffect(() => {\n    return store.subscribe(\n      key,\n      () => {\n        const raw = store.get(key, initialVal);\n        setState(isDerived ? (keyOrDef as any).selector(raw) : raw);\n      },\n      flowOptions?.name || flowOptions?.actor,\n    );\n  }, [key, isDerived, flowOptions?.name, flowOptions?.actor]);\n\n  const toolbox = useMemo(() => {\n    if (isDerived) return {};\n\n    const boundActions = {} as any;\n    const defaultOps = {\n      get self() {\n        return createDeepProxy(key, [], store.get(key, initialVal), {\n          ...flowOptions,\n          actions: boundActions,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      get state() {\n        return store.get(key, initialVal);\n      },\n    };\n\n    const actions = (keyOrDef as any)?.options?.actions || flowOptions?.actions;\n\n    if (actions) {\n      for (const [name, fn] of Object.entries(actions)) {\n        boundActions[name] = (...args: any[]) =>\n          (fn as Function)(...args)(defaultOps);\n      }\n    }\n\n    return {\n      ops: defaultOps,\n      actions: boundActions,\n      _undo: () => store.undo(key),\n      _redo: () => store.redo(key),\n      history: store.getHistory(key),\n      _canUndo: store.getHistory(key).length > 1,\n      _canRedo: store.getRedoStack(key).length > 0,\n      _set: (val: any) => {\n        const next = typeof val === \"function\" ? val(store.get(key)) : val;\n        store.set(key, next, {\n          ...flowOptions,\n          force: true,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      _patch: (val: any) => {\n        const next = typeof val === \"function\" ? val(store.get(key)) : val;\n        store.set(key, next, {\n          ...flowOptions,\n          force: false,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      _reset: () => store.reset(key),\n      cf: flowOptions || {},\n      isHydrating: !!store.__hydrating__?.has(key),\n    };\n  }, [key, isDerived, state, flowOptions]);\n\n  return [state, toolbox] as any;\n}\n"],"names":["store","createDeepProxy","useState","useEffect","useMemo"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["/* *****************************************************************************\n * FractoSate\n *\n * ACCESS RESTRICTIONS:\n * - This software is exclusively for use by Authorized Personnel of NEHONIX\n * - Intended for Internal Use only within NEHONIX operations\n * - No rights granted to unauthorized individuals or entities\n * - All modifications are works made for hire assigned to NEHONIX\n *\n * PROHIBITED ACTIVITIES:\n * - Copying, distributing, or sublicensing without written permission\n * - Reverse engineering, decompiling, or disassembling\n * - Creating derivative works without explicit authorization\n * - External use or commercial distribution outside NEHONIX\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n * For questions or permissions, contact:\n * NEHONIX Legal Department\n * Email: legal@nehonix.com\n * Website: www.nehonix.com\n ***************************************************************************** */\n\nimport { useState, useEffect, useMemo } from \"react\";\nimport type {\n  FlowOperations,\n  FlowDefinition,\n  DerivedFlowDefinition,\n  FlowOptions,\n  UseFlowOptions,\n  FlowOpsObject,\n} from \"./types\";\nimport { store } from \"./store\";\nimport { createDeepProxy } from \"./proxy\";\n\n// Connect proxy creator to store for internal effects\nstore.setProxyCreator(createDeepProxy);\n\nexport * from \"./types\";\n\n/**\n * Manually initializes a flow to ensure its effects run immediately.\n * This is useful for flows that need to start working before any component subscribes to them.\n */\nexport function initFlow<T, A>(flow: FlowDefinition<T, A>) {\n  store.get(flow.key, flow.initial, flow.options);\n}\n\n/**\n * Defines a derived flow that reacts to changes in a source flow.\n * Use this for computed values that shouldn't be manually modified.\n */\nexport function defineDerived<T, R>(\n  source: FlowDefinition<T, any>,\n  selector: (state: T) => R,\n  derivedKey?: string,\n): DerivedFlowDefinition<T, R> {\n  return {\n    key: derivedKey || `${source.key}_derived_${Date.now()}`,\n    source,\n    selector,\n  };\n}\n\nexport function defineFlow<\n  T,\n  A extends Record<\n    string,\n    (...args: any[]) => (ops: FlowOpsObject<T, A>) => any\n  >,\n>(\n  key: string,\n  initial: T,\n  options: FlowOptions<NoInfer<T>, A> & {\n    actions: A;\n  },\n): FlowDefinition<T, A>;\nexport function defineFlow<T>(\n  key: string,\n  initial: T,\n  options?: FlowOptions<NoInfer<T>, {}>,\n): FlowDefinition<T, {}>;\nexport function defineFlow<T, A>(\n  key: string,\n  initial: T,\n  options?: FlowOptions<T> & { actions?: A },\n): FlowDefinition<T, A> {\n  return { key, initial, options: options as any };\n}\n\n/**\n * Non-hook version of useFlow.\n * Useful for accessing and interacting with flows outside React components (e.g., axios interceptors).\n */\nexport function getFlow<T, A>(\n  def: FlowDefinition<T, A>,\n): [T, FlowOperations<T, A>] {\n  const { key, initial, options: flowOptions } = def;\n  const state = store.get(key, initial, flowOptions);\n\n  const boundActions = {} as any;\n  const defaultOps: FlowOpsObject<T, A> = {\n    get self() {\n      return createDeepProxy<T, A>(key, [], store.get(key, initial), {\n        ...flowOptions,\n        actions: boundActions,\n        actor: flowOptions?.actor,\n      });\n    },\n    get state() {\n      return store.get(key, initial);\n    },\n  };\n\n  const actions = (def as any)?.options?.actions || flowOptions?.actions;\n\n  if (actions) {\n    for (const [name, fn] of Object.entries(actions)) {\n      boundActions[name] = (...args: any[]) =>\n        (fn as Function)(...args)(defaultOps);\n    }\n  }\n\n  const toolbox: FlowOperations<T, A> = {\n    ops: defaultOps,\n    actions: boundActions,\n    _undo: () => store.undo(key),\n    _redo: () => store.redo(key),\n    history: store.getHistory(key),\n    _canUndo: store.getHistory(key).length > 1,\n    _canRedo: store.getRedoStack(key).length > 0,\n    _set: (val: any) => {\n      const next = typeof val === \"function\" ? val(store.get(key)) : val;\n      store.set(key, next, {\n        ...flowOptions,\n        force: true,\n        actor: flowOptions?.actor,\n      });\n    },\n    _patch: (val: any) => {\n      const next = typeof val === \"function\" ? val(store.get(key)) : val;\n      store.set(key, next, {\n        ...flowOptions,\n        force: false,\n        actor: flowOptions?.actor,\n      });\n    },\n    _reset: () => store.reset(key),\n    cf: flowOptions || {},\n    isHydrating: !!store.__hydrating__?.has(key),\n  };\n\n  return [state, toolbox];\n}\n\n/**\n * Main hook to consume and interact with a FractoState flow.\n * Returns a tuple containing the current [State, Toolbox].\n */\nexport function useFlow<K extends string, T = any>(\n  key: K,\n  initial?: T,\n  options?: UseFlowOptions<T>,\n): [T, FlowOperations<T, {}>];\n\nexport function useFlow<T, A>(\n  def: FlowDefinition<T, A>,\n  options?: UseFlowOptions<T>,\n): [T, FlowOperations<T, A>];\n\nexport function useFlow<T, R>(def: DerivedFlowDefinition<T, R>): [R, {}];\n\nexport function useFlow(\n  keyOrDef: any,\n  initial?: any,\n  options?: any,\n): [any, any] {\n  const isDerived = typeof keyOrDef === \"object\" && \"selector\" in keyOrDef;\n  const isDef = typeof keyOrDef === \"object\" && \"key\" in keyOrDef && !isDerived;\n\n  const key = isDef\n    ? (keyOrDef as any).key\n    : isDerived\n      ? (keyOrDef as any).source.key\n      : (keyOrDef as string);\n  const initialVal = isDef\n    ? (keyOrDef as any).initial\n    : isDerived\n      ? (keyOrDef as any).source.initial\n      : initial;\n  const flowOptions = isDef\n    ? { ...((keyOrDef as any).options || {}), ...(initial || {}) }\n    : isDerived\n      ? (keyOrDef as any).source.options\n      : options;\n\n  const [state, setState] = useState(() => {\n    const raw = store.get(key, initialVal, flowOptions);\n    return isDerived ? (keyOrDef as any).selector(raw) : raw;\n  });\n\n  useEffect(() => {\n    return store.subscribe(\n      key,\n      () => {\n        const raw = store.get(key, initialVal);\n        setState(isDerived ? (keyOrDef as any).selector(raw) : raw);\n      },\n      flowOptions?.name || flowOptions?.actor,\n    );\n  }, [key, isDerived, flowOptions?.name, flowOptions?.actor]);\n\n  const toolbox = useMemo(() => {\n    if (isDerived) return {};\n\n    const boundActions = {} as any;\n    const defaultOps: FlowOpsObject<any, any> = {\n      get self() {\n        return createDeepProxy<any, any>(key, [], store.get(key, initialVal), {\n          ...flowOptions,\n          actions: boundActions,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      get state() {\n        return store.get(key, initialVal);\n      },\n    };\n\n    const actions = (keyOrDef as any)?.options?.actions || flowOptions?.actions;\n\n    if (actions) {\n      for (const [name, fn] of Object.entries(actions)) {\n        boundActions[name] = (...args: any[]) =>\n          (fn as Function)(...args)(defaultOps);\n      }\n    }\n\n    return {\n      ops: defaultOps,\n      actions: boundActions,\n      _undo: () => store.undo(key),\n      _redo: () => store.redo(key),\n      history: store.getHistory(key),\n      _canUndo: store.getHistory(key).length > 1,\n      _canRedo: store.getRedoStack(key).length > 0,\n      _set: (val: any) => {\n        const next = typeof val === \"function\" ? val(store.get(key)) : val;\n        store.set(key, next, {\n          ...flowOptions,\n          force: true,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      _patch: (val: any) => {\n        const next = typeof val === \"function\" ? val(store.get(key)) : val;\n        store.set(key, next, {\n          ...flowOptions,\n          force: false,\n          actor: flowOptions?.name || flowOptions?.actor,\n        });\n      },\n      _reset: () => store.reset(key),\n      cf: flowOptions || {},\n      isHydrating: !!store.__hydrating__?.has(key),\n    };\n  }, [key, isDerived, state, flowOptions]);\n\n  return [state, toolbox] as any;\n}\n"],"names":["store","createDeepProxy","useState","useEffect","useMemo"],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BiF;AAcjF;AACAA,WAAK,CAAC,eAAe,CAACC,qBAAe,CAAC;AAItC;;;AAGG;AACG,SAAU,QAAQ,CAAO,IAA0B,EAAA;AACvD,IAAAD,WAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;AACjD;AAEA;;;AAGG;SACa,aAAa,CAC3B,MAA8B,EAC9B,QAAyB,EACzB,UAAmB,EAAA;IAEnB,OAAO;AACL,QAAA,GAAG,EAAE,UAAU,IAAI,CAAA,EAAG,MAAM,CAAC,GAAG,CAAA,SAAA,EAAY,IAAI,CAAC,GAAG,EAAE,CAAA,CAAE;QACxD,MAAM;QACN,QAAQ;KACT;AACH;SAoBgB,UAAU,CACxB,GAAW,EACX,OAAU,EACV,OAA0C,EAAA;IAE1C,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAc,EAAE;AAClD;AAEA;;;AAGG;AACG,SAAU,OAAO,CACrB,GAAyB,EAAA;IAEzB,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,GAAG;AAClD,IAAA,MAAM,KAAK,GAAGA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,WAAW,CAAC;IAElD,MAAM,YAAY,GAAG,EAAS;AAC9B,IAAA,MAAM,UAAU,GAAwB;AACtC,QAAA,IAAI,IAAI,GAAA;AACN,YAAA,OAAOC,qBAAe,CAAO,GAAG,EAAE,EAAE,EAAED,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE;AAC7D,gBAAA,GAAG,WAAW;AACd,gBAAA,OAAO,EAAE,YAAY;gBACrB,KAAK,EAAE,WAAW,EAAE,KAAK;AAC1B,aAAA,CAAC;QACJ,CAAC;AACD,QAAA,IAAI,KAAK,GAAA;YACP,OAAOA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC;QAChC,CAAC;KACF;IAED,MAAM,OAAO,GAAI,GAAW,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,OAAO;IAEtE,IAAI,OAAO,EAAE;AACX,QAAA,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AAChD,YAAA,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAW,KACjC,EAAe,CAAC,GAAG,IAAI,CAAC,CAAC,UAAU,CAAC;QACzC;IACF;AAEA,IAAA,MAAM,OAAO,GAAyB;AACpC,QAAA,GAAG,EAAE,UAAU;AACf,QAAA,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,MAAMA,WAAK,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5B,KAAK,EAAE,MAAMA,WAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AAC5B,QAAA,OAAO,EAAEA,WAAK,CAAC,UAAU,CAAC,GAAG,CAAC;QAC9B,QAAQ,EAAEA,WAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;QAC1C,QAAQ,EAAEA,WAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;AAC5C,QAAA,IAAI,EAAE,CAAC,GAAQ,KAAI;YACjB,MAAM,IAAI,GAAG,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,CAACA,WAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG;AAClE,YAAAA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,EAAE,IAAI;gBACX,KAAK,EAAE,WAAW,EAAE,KAAK;AAC1B,aAAA,CAAC;QACJ,CAAC;AACD,QAAA,MAAM,EAAE,CAAC,GAAQ,KAAI;YACnB,MAAM,IAAI,GAAG,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,CAACA,WAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG;AAClE,YAAAA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,EAAE,KAAK;gBACZ,KAAK,EAAE,WAAW,EAAE,KAAK;AAC1B,aAAA,CAAC;QACJ,CAAC;QACD,MAAM,EAAE,MAAMA,WAAK,CAAC,KAAK,CAAC,GAAG,CAAC;QAC9B,EAAE,EAAE,WAAW,IAAI,EAAE;QACrB,WAAW,EAAE,CAAC,CAACA,WAAK,CAAC,aAAa,EAAE,GAAG,CAAC,GAAG,CAAC;KAC7C;AAED,IAAA,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC;AACzB;SAmBgB,OAAO,CACrB,QAAa,EACb,OAAa,EACb,OAAa,EAAA;IAEb,MAAM,SAAS,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,UAAU,IAAI,QAAQ;AACxE,IAAA,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,KAAK,IAAI,QAAQ,IAAI,CAAC,SAAS;IAE7E,MAAM,GAAG,GAAG;UACP,QAAgB,CAAC;AACpB,UAAE;AACA,cAAG,QAAgB,CAAC,MAAM,CAAC;cACxB,QAAmB;IAC1B,MAAM,UAAU,GAAG;UACd,QAAgB,CAAC;AACpB,UAAE;AACA,cAAG,QAAgB,CAAC,MAAM,CAAC;cACzB,OAAO;IACb,MAAM,WAAW,GAAG;AAClB,UAAE,EAAE,IAAK,QAAgB,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,IAAI,OAAO,IAAI,EAAE,CAAC;AAC5D,UAAE;AACA,cAAG,QAAgB,CAAC,MAAM,CAAC;cACzB,OAAO;IAEb,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGE,cAAQ,CAAC,MAAK;AACtC,QAAA,MAAM,GAAG,GAAGF,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,WAAW,CAAC;AACnD,QAAA,OAAO,SAAS,GAAI,QAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG;AAC1D,IAAA,CAAC,CAAC;IAEFG,eAAS,CAAC,MAAK;AACb,QAAA,OAAOH,WAAK,CAAC,SAAS,CACpB,GAAG,EACH,MAAK;YACH,MAAM,GAAG,GAAGA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC;AACtC,YAAA,QAAQ,CAAC,SAAS,GAAI,QAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAC7D,CAAC,EACD,WAAW,EAAE,IAAI,IAAI,WAAW,EAAE,KAAK,CACxC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AAE3D,IAAA,MAAM,OAAO,GAAGI,aAAO,CAAC,MAAK;AAC3B,QAAA,IAAI,SAAS;AAAE,YAAA,OAAO,EAAE;QAExB,MAAM,YAAY,GAAG,EAAS;AAC9B,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,IAAI,IAAI,GAAA;AACN,gBAAA,OAAOH,qBAAe,CAAW,GAAG,EAAE,EAAE,EAAED,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,EAAE;AACpE,oBAAA,GAAG,WAAW;AACd,oBAAA,OAAO,EAAE,YAAY;AACrB,oBAAA,KAAK,EAAE,WAAW,EAAE,IAAI,IAAI,WAAW,EAAE,KAAK;AAC/C,iBAAA,CAAC;YACJ,CAAC;AACD,YAAA,IAAI,KAAK,GAAA;gBACP,OAAOA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC;YACnC,CAAC;SACF;QAED,MAAM,OAAO,GAAI,QAAgB,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,OAAO;QAE3E,IAAI,OAAO,EAAE;AACX,YAAA,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AAChD,gBAAA,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAW,KACjC,EAAe,CAAC,GAAG,IAAI,CAAC,CAAC,UAAU,CAAC;YACzC;QACF;QAEA,OAAO;AACL,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,YAAY;YACrB,KAAK,EAAE,MAAMA,WAAK,CAAC,IAAI,CAAC,GAAG,CAAC;YAC5B,KAAK,EAAE,MAAMA,WAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AAC5B,YAAA,OAAO,EAAEA,WAAK,CAAC,UAAU,CAAC,GAAG,CAAC;YAC9B,QAAQ,EAAEA,WAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;YAC1C,QAAQ,EAAEA,WAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC;AAC5C,YAAA,IAAI,EAAE,CAAC,GAAQ,KAAI;gBACjB,MAAM,IAAI,GAAG,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,CAACA,WAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG;AAClE,gBAAAA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE;AACnB,oBAAA,GAAG,WAAW;AACd,oBAAA,KAAK,EAAE,IAAI;AACX,oBAAA,KAAK,EAAE,WAAW,EAAE,IAAI,IAAI,WAAW,EAAE,KAAK;AAC/C,iBAAA,CAAC;YACJ,CAAC;AACD,YAAA,MAAM,EAAE,CAAC,GAAQ,KAAI;gBACnB,MAAM,IAAI,GAAG,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,CAACA,WAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG;AAClE,gBAAAA,WAAK,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE;AACnB,oBAAA,GAAG,WAAW;AACd,oBAAA,KAAK,EAAE,KAAK;AACZ,oBAAA,KAAK,EAAE,WAAW,EAAE,IAAI,IAAI,WAAW,EAAE,KAAK;AAC/C,iBAAA,CAAC;YACJ,CAAC;YACD,MAAM,EAAE,MAAMA,WAAK,CAAC,KAAK,CAAC,GAAG,CAAC;YAC9B,EAAE,EAAE,WAAW,IAAI,EAAE;YACrB,WAAW,EAAE,CAAC,CAACA,WAAK,CAAC,aAAa,EAAE,GAAG,CAAC,GAAG,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;AAExC,IAAA,OAAO,CAAC,KAAK,EAAE,OAAO,CAAQ;AAChC;;;;;;;;"}

package/dist/cjs/src/devtools/FractoDevTools.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".fracto-devtools-button{align-items:center;backdrop-filter:blur(10px);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(0,212,255,.4);border-radius:16px;bottom:20px;box-shadow:0 8px 32px rgba(0,212,255,.3),inset 0 0 20px rgba(0,212,255,.2);color:#fff;cursor:pointer;display:flex;font-family:system-ui,-apple-system,sans-serif;font-size:28px;font-weight:700;height:56px;justify-content:center;position:fixed;transition:all .3s cubic-bezier(.4,0,.2,1);width:56px;z-index:9999}.fracto-devtools-button:hover{border-color:rgba(0,212,255,.7);box-shadow:0 12px 48px rgba(0,212,255,.5),inset 0 0 30px rgba(0,212,255,.3);transform:scale(1.1) rotate(5deg)}.fracto-devtools-button.position-right{right:20px}.fracto-devtools-button.position-left{left:20px}.fracto-devtools-panel{backdrop-filter:blur(20px);background:linear-gradient(145deg,rgba(10,10,15,.98),rgba(15,15,25,.98));border:1px solid rgba(0,212,255,.3);border-radius:20px;bottom:20px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 1px rgba(0,212,255,.5);color:#e0e0e0;display:flex;flex-direction:column;font-family:system-ui,-apple-system,monospace;height:600px;overflow:hidden;position:fixed;width:420px;z-index:9999}.fracto-devtools-panel.position-right{right:20px}.fracto-devtools-panel.position-left{left:20px}.fracto-devtools-header{align-items:center;background:linear-gradient(135deg,rgba(0,168,255,.1),rgba(0,212,255,.05));border-bottom:1px solid rgba(0,212,255,.2);display:flex;justify-content:space-between;padding:16px 20px}.fracto-devtools-dot{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:12px;justify-content:center;position:relative;transition:all .2s;width:12px}.fracto-devtools-dot.red{background:#ff5f57;border:1px solid #e0443e}.fracto-devtools-dot.yellow{background:#ffbd2e;border:1px solid #dea123}.fracto-devtools-dot.green{background:#28c940;border:1px solid #1aab29}.fracto-devtools-dot.blue{background:#00d4ff;border:1px solid #00a8ff}.fracto-devtools-dot:hover{filter:brightness(1.1);transform:scale(1.1)}.fracto-devtools-header.mode-indicators{flex-direction:row}.fracto-devtools-header.mode-controls.controls-right{flex-direction:row-reverse}.fracto-devtools-header.mode-controls.controls-right .fracto-devtools-window-controls{margin-left:12px;margin-right:0}.fracto-devtools-header.mode-indicators.controls-left{flex-direction:row-reverse}.fracto-devtools-header.mode-indicators.controls-right{flex-direction:row}.fracto-devtools-window-controls{display:flex;gap:8px;margin-right:12px}.fracto-devtools-window-indicators{align-items:center;display:flex;gap:8px}.mode-indicators .fracto-devtools-dot{opacity:.3;transform:scale(.9);transition:all .2s}.mode-indicators .fracto-devtools-dot.active{animation:ledFlash .2s ease-out;filter:brightness(1.5);opacity:1}.mode-indicators .fracto-devtools-dot.green.active{animation:ledHeartbeat 2s ease-in-out infinite;filter:brightness(1.2);opacity:1}.mode-controls .fracto-devtools-dot{animation:none!important;filter:none;opacity:1;transform:none}@keyframes ledFlash{0%{box-shadow:0 0 0 hsla(0,0%,100%,0);transform:scale(1)}50%{box-shadow:0 0 20px currentColor;transform:scale(1.4)}to{box-shadow:0 0 5px currentColor;transform:scale(1)}}@keyframes ledHeartbeat{0%{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}15%{box-shadow:0 0 10px rgba(40,201,64,.6);opacity:1;transform:scale(1.2)}30%{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}45%{box-shadow:0 0 10px rgba(40,201,64,.6);opacity:1;transform:scale(1.2)}to{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}}.fracto-devtools-dot.red.active{color:#ff5f57}.fracto-devtools-dot.yellow.active{color:#ffbd2e}.fracto-devtools-dot.green.active{color:#28c940}.fracto-devtools-dot.blue.active{color:#00d4ff}.fracto-devtools-close-minimal{background:none;border:none;color:#555;cursor:pointer;font-size:18px;margin-left:8px;padding:0 4px;transition:color .2s}.fracto-devtools-close-minimal:hover{color:#ff5f57}.fracto-devtools-dot:after{color:rgba(0,0,0,.5);content:\"\";font-size:8px;font-weight:700;opacity:0;transition:opacity .2s}.fracto-devtools-dot.red:hover:after{content:\"×\";opacity:1}.fracto-devtools-dot.yellow:hover:after{content:\"−\";opacity:1}.fracto-devtools-dot.green:hover:after{content:\"+\";opacity:1}.fracto-devtools-dot.blue:hover:after{content:\"↗\";font-size:10px;line-height:1;opacity:1}.fracto-devtools-logo.pulse{animation:logoPulse .4s cubic-bezier(.4,0,.2,1)}@keyframes logoPulse{0%{box-shadow:0 4px 12px rgba(0,212,255,.3);transform:scale(1)}50%{box-shadow:0 0 20px rgba(0,212,255,.6);transform:scale(1.1)}to{box-shadow:0 4px 12px rgba(0,212,255,.3);transform:scale(1)}}.fracto-devtools-header-content{align-items:center;display:flex;gap:10px}.fracto-devtools-logo{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(0,212,255,.4);border-radius:8px;box-shadow:0 4px 12px rgba(0,212,255,.3),inset 0 0 15px rgba(0,212,255,.2);color:#fff;display:flex;font-size:18px;font-weight:700;height:32px;justify-content:center;transition:all .3s;width:32px}.fracto-devtools-title{color:#fff;font-size:16px;font-weight:700;line-height:1.2}.fracto-devtools-title-state{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text}.fracto-devtools-subtitle{color:#888;font-size:10px;margin-top:2px}.fracto-devtools-toolbar{background:rgba(0,0,0,.2);border-bottom:1px solid rgba(0,212,255,.15);display:flex;flex-direction:column;gap:10px;padding:12px 16px}.fracto-devtools-search-container{align-items:center;display:flex;position:relative}.fracto-devtools-search-icon{color:#666;font-size:14px;left:12px;pointer-events:none;position:absolute}.fracto-devtools-search{background:rgba(0,0,0,.4);border:1px solid rgba(0,212,255,.2);border-radius:8px;color:#fff;font-family:inherit;font-size:12px;outline:none;padding:8px 12px 8px 36px;transition:all .2s;width:100%}.fracto-devtools-search::placeholder{color:#666}.fracto-devtools-search:focus{background:rgba(0,0,0,.6);border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.1)}.fracto-devtools-clear-search{background:rgba(0,212,255,.1);border:none;border-radius:4px;color:#00d4ff;cursor:pointer;font-size:12px;padding:4px 8px;position:absolute;right:8px;transition:all .2s}.fracto-devtools-clear-search:hover{background:rgba(0,212,255,.2)}.fracto-devtools-filters{align-items:center;display:flex;gap:8px}.fracto-devtools-filter-label{color:#888;font-size:11px}.fracto-devtools-filter-buttons{display:flex;flex-wrap:wrap;gap:6px}.fracto-devtools-filter-button{background:rgba(0,0,0,.4);border:1px solid rgba(0,212,255,.2);border-radius:6px;color:#999;cursor:pointer;font-size:11px;padding:4px 10px;transition:all .2s}.fracto-devtools-filter-button:hover{border-color:rgba(0,212,255,.4);color:#bbb}.fracto-devtools-filter-button.active{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.5);color:#00d4ff}.fracto-devtools-stats{color:#666;display:flex;font-size:10px;gap:12px}.fracto-devtools-stat{align-items:center;display:flex;gap:4px}.fracto-devtools-stat-value{color:#00d4ff;font-weight:700}.fracto-devtools-content{flex:1;overflow:auto;padding:16px}.fracto-devtools-content::-webkit-scrollbar{width:8px}.fracto-devtools-content::-webkit-scrollbar-track{background:hsla(0,0%,100%,.02);border-radius:4px}.fracto-devtools-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#00d4ff,#00a8ff);border-radius:4px}.fracto-devtools-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#00e4ff,#00b8ff)}.fracto-devtools-empty{align-items:center;color:#666;display:flex;flex-direction:column;gap:12px;padding:40px 20px;text-align:center}.fracto-devtools-empty-icon{align-items:center;background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,168,255,.05));border:1px solid rgba(0,212,255,.2);border-radius:16px;display:flex;font-size:32px;height:64px;justify-content:center;opacity:.5;width:64px}.fracto-devtools-empty-title{font-size:14px;font-weight:500}.fracto-devtools-empty-subtitle{color:#555;font-size:12px}.fracto-devtools-flow{background:rgba(0,0,0,.3);border:1px solid rgba(0,212,255,.2);border-radius:10px;margin-bottom:12px;overflow:hidden;transition:all .2s}.fracto-devtools-flow:hover{border-color:rgba(0,212,255,.5);box-shadow:0 4px 16px rgba(0,212,255,.2)}.fracto-devtools-flow.collapsed .fracto-devtools-flow-content{display:none}.fracto-devtools-flow-header{align-items:center;background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,168,255,.05));border-bottom:1px solid rgba(0,212,255,.2);cursor:pointer;display:flex;justify-content:space-between;padding:10px 14px;user-select:none}.fracto-devtools-flow.collapsed .fracto-devtools-flow-header{border-bottom:none}.fracto-devtools-flow-header-left{align-items:center;display:flex;flex:1;gap:8px;min-width:0}.fracto-devtools-flow-collapse-icon{color:#00d4ff;flex-shrink:0;font-size:12px;transition:transform .2s}.fracto-devtools-flow.collapsed .fracto-devtools-flow-collapse-icon{transform:rotate(-90deg)}.fracto-devtools-flow-key{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text;font-size:13px;font-weight:700;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fracto-devtools-flow-actions{align-items:center;display:flex;gap:6px}.fracto-devtools-flow-badge{background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);border-radius:4px;color:#00d4ff;font-size:10px;padding:2px 8px}.fracto-devtools-flow-action{align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(0,212,255,.2);border-radius:4px;color:#666;cursor:pointer;display:flex;font-size:12px;height:24px;justify-content:center;transition:all .2s;width:24px}.fracto-devtools-flow-action:hover{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.4);color:#00d4ff}.fracto-devtools-flow-content{background-color:rgba(0,0,0,.5);color:#ddd;font-size:11px;line-height:1.6;margin:0;max-height:300px;overflow-x:auto;overflow-y:auto;padding:12px 14px}.fracto-devtools-flow-content::-webkit-scrollbar{height:6px;width:6px}.fracto-devtools-flow-content::-webkit-scrollbar-track{background:hsla(0,0%,100%,.02)}.fracto-devtools-flow-content::-webkit-scrollbar-thumb{background:rgba(0,212,255,.3);border-radius:3px}.fracto-devtools-flow-content::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.5)}.fracto-devtools-footer{align-items:center;background:rgba(0,0,0,.3);border-top:1px solid rgba(0,212,255,.2);color:#666;display:flex;font-size:10px;justify-content:space-between;padding:10px 20px}.fracto-devtools-footer-count{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text;font-weight:700}.fracto-devtools-no-results{color:#666;padding:40px 20px;text-align:center}.fracto-devtools-no-results-icon{font-size:48px;margin-bottom:12px;opacity:.3}.fracto-devtools-no-results-title{font-size:14px;font-weight:500;margin-bottom:6px}.fracto-devtools-no-results-subtitle{color:#555;font-size:12px}.fracto-devtools-meta-tag{animation:pulse 1.5s infinite;background:rgba(0,212,255,.2);border-radius:4px;color:#00d4ff;font-size:10px;margin-left:8px;padding:1px 4px}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.fracto-devtools-flow-expanded{background:rgba(0,0,0,.2);border-top:1px solid rgba(0,212,255,.1)}.fracto-devtools-meta-grid{background:rgba(0,212,255,.1);border-bottom:1px solid rgba(0,212,255,.1);display:grid;gap:1px;grid-template-columns:repeat(3,1fr)}.fracto-devtools-meta-item{align-items:center;background:#0a0a0f;display:flex;flex-direction:column;padding:6px 12px}.fracto-devtools-meta-item .label{color:#666;font-size:9px;letter-spacing:.5px;text-transform:uppercase}.fracto-devtools-meta-item .value{color:#00d4ff;font-size:12px;font-weight:700}.fracto-devtools-copy-toast{animation:slideDown .2s ease-out;background:#4caf50;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;position:absolute;right:14px;top:40px;z-index:10}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.fracto-devtools-flow-action.copied{background:rgba(76,175,80,.1);border-color:rgba(76,175,80,.5);color:#4caf50}.fracto-devtools-badge-count{align-items:center;animation:badgePop .3s cubic-bezier(.175,.885,.32,1.275);background:#f05;border:2px solid #0a0a0f;border-radius:9px;box-shadow:0 4px 8px rgba(255,0,85,.4);color:#fff;display:flex;font-size:10px;font-weight:900;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-5px;top:-5px}@keyframes badgePop{0%{transform:scale(0)}to{transform:scale(1)}}.fracto-devtools-button{cursor:grab;user-select:none}.fracto-devtools-button:active{cursor:grabbing}.fracto-devtools-actions{display:flex;gap:4px;margin-left:auto}.fracto-devtools-action-btn{align-items:center;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);border-radius:4px;color:#00d4ff;cursor:pointer;display:flex;font-size:14px;height:24px;justify-content:center;transition:all .2s;width:24px}.fracto-devtools-action-btn:hover{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.5)}.fracto-devtools-action-btn.is-dirty,.fracto-devtools-flow-action.is-dirty{background:rgba(74,222,128,.1)!important;border-color:rgba(74,222,128,.5)!important;box-shadow:0 0 10px rgba(74,222,128,.2);color:#4ade80!important}.fracto-devtools-action-btn.danger.is-dirty{background:rgba(255,77,77,.15)!important;border-color:rgba(255,77,77,.6)!important;box-shadow:0 0 12px rgba(255,77,77,.3);color:#ff4d4d!important}.fracto-devtools-action-btn.danger{background:rgba(255,77,77,.05);border-color:rgba(255,77,77,.1);color:#666}.fracto-devtools-action-btn.danger:hover{background:rgba(255,77,77,.2);border-color:rgba(255,77,77,.5)}.fracto-devtools-panel.is-maximized{border-radius:24px;bottom:20px!important;height:calc(100vh - 40px)!important;left:20px!important;right:20px!important;top:20px!important;width:calc(100vw - 40px)!important}:fullscreen .fracto-devtools-panel.is-maximized{border-radius:0;bottom:0!important;height:100vh!important;left:0!important;right:0!important;top:0!important;width:100vw!important}.fracto-devtools-max-minimal{align-items:center;background:none;border:none;color:#555;cursor:pointer;display:flex;font-size:14px;justify-content:center;margin-left:8px;padding:0 4px;transition:all .2s}.fracto-devtools-max-minimal:hover{color:#00d4ff}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinning{animation:spin 2s linear infinite}";
+var css_248z = ".fracto-devtools-button{align-items:center;backdrop-filter:blur(10px);background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid rgba(0,212,255,.4);border-radius:16px;bottom:20px;box-shadow:0 8px 32px rgba(0,212,255,.3),inset 0 0 20px rgba(0,212,255,.2);color:#fff;cursor:pointer;display:flex;font-family:system-ui,-apple-system,sans-serif;font-size:28px;font-weight:700;height:56px;justify-content:center;position:fixed;transition:all .3s cubic-bezier(.4,0,.2,1);width:56px;z-index:9999}.fracto-devtools-button:hover{border-color:rgba(0,212,255,.7);box-shadow:0 12px 48px rgba(0,212,255,.5),inset 0 0 30px rgba(0,212,255,.3);transform:scale(1.1) rotate(5deg)}.fracto-devtools-button.position-right{right:20px}.fracto-devtools-button.position-left{left:20px}.fracto-devtools-panel{backdrop-filter:blur(20px);background:linear-gradient(145deg,rgba(10,10,15,.98),rgba(15,15,25,.98));border:1px solid rgba(0,212,255,.3);border-radius:20px;bottom:20px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 0 1px rgba(0,212,255,.5);color:#e0e0e0;display:flex;flex-direction:column;font-family:system-ui,-apple-system,monospace;height:600px;overflow:hidden;position:fixed;width:420px;z-index:9999}.fracto-devtools-panel.position-right{right:20px}.fracto-devtools-panel.position-left{left:20px}.fracto-devtools-header{align-items:center;background:linear-gradient(135deg,rgba(0,168,255,.1),rgba(0,212,255,.05));border-bottom:1px solid rgba(0,212,255,.2);display:flex;justify-content:space-between;padding:16px 20px}.fracto-devtools-dot{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;height:12px;justify-content:center;position:relative;transition:all .2s;width:12px}.fracto-devtools-dot.red{background:#ff5f57;border:1px solid #e0443e}.fracto-devtools-dot.yellow{background:#ffbd2e;border:1px solid #dea123}.fracto-devtools-dot.green{background:#28c940;border:1px solid #1aab29}.fracto-devtools-dot.blue{background:#00d4ff;border:1px solid #00a8ff}.fracto-devtools-dot:hover{filter:brightness(1.1);transform:scale(1.1)}.fracto-devtools-header.mode-indicators{flex-direction:row}.fracto-devtools-header.mode-controls.controls-right{flex-direction:row-reverse}.fracto-devtools-header.mode-controls.controls-right .fracto-devtools-window-controls{margin-left:12px;margin-right:0}.fracto-devtools-header.mode-indicators.controls-left{flex-direction:row-reverse}.fracto-devtools-header.mode-indicators.controls-right{flex-direction:row}.fracto-devtools-window-controls{display:flex;gap:8px;margin-right:12px}.fracto-devtools-window-indicators{align-items:center;display:flex;gap:8px}.mode-indicators .fracto-devtools-dot{opacity:.3;transform:scale(.9);transition:all .2s}.mode-indicators .fracto-devtools-dot.active{animation:ledFlash .2s ease-out;filter:brightness(1.5);opacity:1}.mode-indicators .fracto-devtools-dot.green.active{animation:ledHeartbeat 2s ease-in-out infinite;filter:brightness(1.2);opacity:1}.mode-controls .fracto-devtools-dot{animation:none!important;filter:none;opacity:1;transform:none}@keyframes ledFlash{0%{box-shadow:0 0 0 hsla(0,0%,100%,0);transform:scale(1)}50%{box-shadow:0 0 20px currentColor;transform:scale(1.4)}to{box-shadow:0 0 5px currentColor;transform:scale(1)}}@keyframes ledHeartbeat{0%{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}15%{box-shadow:0 0 10px rgba(40,201,64,.6);opacity:1;transform:scale(1.2)}30%{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}45%{box-shadow:0 0 10px rgba(40,201,64,.6);opacity:1;transform:scale(1.2)}to{box-shadow:0 0 0 rgba(40,201,64,0);opacity:.6;transform:scale(1)}}.fracto-devtools-dot.red.active{color:#ff5f57}.fracto-devtools-dot.yellow.active{color:#ffbd2e}.fracto-devtools-dot.green.active{color:#28c940}.fracto-devtools-dot.blue.active{color:#00d4ff}.fracto-devtools-close-minimal{background:none;border:none;color:#555;cursor:pointer;font-size:18px;margin-left:8px;padding:0 4px;transition:color .2s}.fracto-devtools-close-minimal:hover{color:#ff5f57}.fracto-devtools-dot:after{color:rgba(0,0,0,.5);content:\"\";font-size:8px;font-weight:700;opacity:0;transition:opacity .2s}.fracto-devtools-dot.red:hover:after{content:\"×\";opacity:1}.fracto-devtools-dot.yellow:hover:after{content:\"−\";opacity:1}.fracto-devtools-dot.green:hover:after{content:\"+\";opacity:1}.fracto-devtools-dot.blue:hover:after{content:\"↗\";font-size:10px;line-height:1;opacity:1}.fracto-devtools-logo.pulse{animation:logoPulse .4s cubic-bezier(.4,0,.2,1)}@keyframes logoPulse{0%{box-shadow:0 4px 12px rgba(0,212,255,.3);transform:scale(1)}50%{box-shadow:0 0 20px rgba(0,212,255,.6);transform:scale(1.1)}to{box-shadow:0 4px 12px rgba(0,212,255,.3);transform:scale(1)}}.fracto-devtools-header-content{align-items:center;display:flex;gap:10px}.fracto-devtools-logo{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(0,212,255,.4);border-radius:8px;box-shadow:0 4px 12px rgba(0,212,255,.3),inset 0 0 15px rgba(0,212,255,.2);color:#fff;display:flex;font-size:18px;font-weight:700;height:32px;justify-content:center;transition:all .3s;width:32px}.fracto-devtools-title{color:#fff;font-size:16px;font-weight:700;line-height:1.2}.fracto-devtools-title-state{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text}.fracto-devtools-subtitle{color:#888;font-size:10px;margin-top:2px}.fracto-devtools-toolbar{background:rgba(0,0,0,.2);border-bottom:1px solid rgba(0,212,255,.15);display:flex;flex-direction:column;gap:10px;padding:12px 16px}.fracto-devtools-search-container{align-items:center;display:flex;position:relative}.fracto-devtools-search-icon{color:#666;font-size:14px;left:12px;pointer-events:none;position:absolute}.fracto-devtools-search{background:rgba(0,0,0,.4);border:1px solid rgba(0,212,255,.2);border-radius:8px;color:#fff;font-family:inherit;font-size:12px;outline:none;padding:8px 12px 8px 36px;transition:all .2s;width:100%}.fracto-devtools-search::placeholder{color:#666}.fracto-devtools-search:focus{background:rgba(0,0,0,.6);border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.1)}.fracto-devtools-clear-search{background:rgba(0,212,255,.1);border:none;border-radius:4px;color:#00d4ff;cursor:pointer;font-size:12px;padding:4px 8px;position:absolute;right:8px;transition:all .2s}.fracto-devtools-clear-search:hover{background:rgba(0,212,255,.2)}.fracto-devtools-filters{align-items:center;display:flex;gap:8px}.fracto-devtools-filter-label{color:#888;font-size:11px}.fracto-devtools-filter-buttons{display:flex;flex-wrap:wrap;gap:6px}.fracto-devtools-filter-button{background:rgba(0,0,0,.4);border:1px solid rgba(0,212,255,.2);border-radius:6px;color:#999;cursor:pointer;font-size:11px;padding:4px 10px;transition:all .2s}.fracto-devtools-filter-button:hover{border-color:rgba(0,212,255,.4);color:#bbb}.fracto-devtools-filter-button.active{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.5);color:#00d4ff}.fracto-devtools-stats{color:#666;display:flex;font-size:10px;gap:12px}.fracto-devtools-stat{align-items:center;display:flex;gap:4px}.fracto-devtools-stat-value{color:#00d4ff;font-weight:700}.fracto-devtools-content{flex:1;overflow:auto;padding:16px}.fracto-devtools-content::-webkit-scrollbar{width:8px}.fracto-devtools-content::-webkit-scrollbar-track{background:hsla(0,0%,100%,.02);border-radius:4px}.fracto-devtools-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#00d4ff,#00a8ff);border-radius:4px}.fracto-devtools-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#00e4ff,#00b8ff)}.fracto-devtools-empty{align-items:center;color:#666;display:flex;flex-direction:column;gap:12px;padding:40px 20px;text-align:center}.fracto-devtools-empty-icon{align-items:center;background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,168,255,.05));border:1px solid rgba(0,212,255,.2);border-radius:16px;display:flex;font-size:32px;height:64px;justify-content:center;opacity:.5;width:64px}.fracto-devtools-empty-title{font-size:14px;font-weight:500}.fracto-devtools-empty-subtitle{color:#555;font-size:12px}.fracto-devtools-flow{background:rgba(0,0,0,.3);border:1px solid rgba(0,212,255,.2);border-radius:10px;margin-bottom:12px;overflow:hidden;transition:all .2s}.fracto-devtools-flow:hover{border-color:rgba(0,212,255,.5);box-shadow:0 4px 16px rgba(0,212,255,.2)}.fracto-devtools-flow.collapsed .fracto-devtools-flow-content{display:none}.fracto-devtools-flow-header{align-items:center;background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,168,255,.05));border-bottom:1px solid rgba(0,212,255,.2);cursor:pointer;display:flex;justify-content:space-between;padding:10px 14px;user-select:none}.fracto-devtools-flow.collapsed .fracto-devtools-flow-header{border-bottom:none}.fracto-devtools-flow-header-left{align-items:center;display:flex;flex:1;gap:8px;min-width:0}.fracto-devtools-flow-collapse-icon{color:#00d4ff;flex-shrink:0;font-size:12px;transition:transform .2s}.fracto-devtools-flow.collapsed .fracto-devtools-flow-collapse-icon{transform:rotate(-90deg)}.fracto-devtools-flow-key{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text;font-size:13px;font-weight:700;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fracto-devtools-flow-actions{align-items:center;display:flex;gap:6px}.fracto-devtools-flow-badge{background:rgba(0,212,255,.15);border:1px solid rgba(0,212,255,.3);border-radius:4px;color:#00d4ff;font-size:10px;padding:2px 8px}.fracto-devtools-flow-action{align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(0,212,255,.2);border-radius:4px;color:#666;cursor:pointer;display:flex;font-size:12px;height:24px;justify-content:center;transition:all .2s;width:24px}.fracto-devtools-flow-action:hover{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.4);color:#00d4ff}.fracto-devtools-flow-content{background-color:rgba(0,0,0,.5);color:#ddd;font-size:11px;line-height:1.6;margin:0;max-height:300px;overflow-x:auto;overflow-y:auto;padding:12px 14px}.fracto-devtools-flow-content::-webkit-scrollbar{height:6px;width:6px}.fracto-devtools-flow-content::-webkit-scrollbar-track{background:hsla(0,0%,100%,.02)}.fracto-devtools-flow-content::-webkit-scrollbar-thumb{background:rgba(0,212,255,.3);border-radius:3px}.fracto-devtools-flow-content::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.5)}.fracto-devtools-footer{align-items:center;background:rgba(0,0,0,.3);border-top:1px solid rgba(0,212,255,.2);color:#666;display:flex;font-size:10px;justify-content:space-between;padding:10px 20px}.fracto-devtools-footer-count{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#00d4ff,#00a8ff);-webkit-background-clip:text;background-clip:text;font-weight:700}.fracto-devtools-no-results{color:#666;padding:40px 20px;text-align:center}.fracto-devtools-no-results-icon{font-size:48px;margin-bottom:12px;opacity:.3}.fracto-devtools-no-results-title{font-size:14px;font-weight:500;margin-bottom:6px}.fracto-devtools-no-results-subtitle{color:#555;font-size:12px}.fracto-devtools-meta-tag{animation:pulse 1.5s infinite;background:rgba(0,212,255,.2);border-radius:4px;color:#00d4ff;font-size:10px;margin-left:8px;padding:1px 4px}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.fracto-devtools-flow-expanded{background:rgba(0,0,0,.2);border-top:1px solid rgba(0,212,255,.1)}.fracto-devtools-meta-grid{background:rgba(0,212,255,.1);border-bottom:1px solid rgba(0,212,255,.1);display:grid;gap:1px;grid-template-columns:repeat(3,1fr)}.fracto-devtools-meta-item{align-items:center;background:#0a0a0f;display:flex;flex-direction:column;padding:6px 12px}.fracto-devtools-meta-item .label{color:#666;font-size:9px;letter-spacing:.5px;text-transform:uppercase}.fracto-devtools-meta-item .value{color:#00d4ff;font-size:12px;font-weight:700}.fracto-devtools-copy-toast{animation:slideDown .2s ease-out;background:#4caf50;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;position:absolute;right:14px;top:40px;z-index:10}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.fracto-devtools-flow-action.copied{background:rgba(76,175,80,.1);border-color:rgba(76,175,80,.5);color:#4caf50}.fracto-devtools-badge-count{align-items:center;animation:badgePop .3s cubic-bezier(.175,.885,.32,1.275);background:#f05;border:2px solid #0a0a0f;border-radius:9px;box-shadow:0 4px 8px rgba(255,0,85,.4);color:#fff;display:flex;font-size:10px;font-weight:900;height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-5px;top:-5px}@keyframes badgePop{0%{transform:scale(0)}to{transform:scale(1)}}.fracto-devtools-button{cursor:grab;user-select:none}.fracto-devtools-button:active{cursor:grabbing}.fracto-devtools-actions{display:flex;gap:4px;margin-left:auto}.fracto-devtools-action-btn{align-items:center;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.3);border-radius:4px;color:#00d4ff;cursor:pointer;display:flex;font-size:14px;height:24px;justify-content:center;transition:all .2s;width:24px}.fracto-devtools-action-btn:hover{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.5)}.fracto-devtools-action-btn.is-dirty,.fracto-devtools-flow-action.is-dirty{background:rgba(74,222,128,.1)!important;border-color:rgba(74,222,128,.5)!important;box-shadow:0 0 10px rgba(74,222,128,.2);color:#4ade80!important}.fracto-devtools-action-btn.danger.is-dirty{background:rgba(255,77,77,.15)!important;border-color:rgba(255,77,77,.6)!important;box-shadow:0 0 12px rgba(255,77,77,.3);color:#ff4d4d!important}.fracto-devtools-action-btn.danger{background:rgba(255,77,77,.05);border-color:rgba(255,77,77,.1);color:#666}.fracto-devtools-action-btn.danger:hover{background:rgba(255,77,77,.2);border-color:rgba(255,77,77,.5)}.fracto-devtools-panel.is-maximized{border-radius:24px;bottom:20px!important;height:calc(100vh - 40px)!important;left:20px!important;right:20px!important;top:20px!important;width:calc(100vw - 40px)!important}:fullscreen .fracto-devtools-panel.is-maximized{border-radius:0;bottom:0!important;height:100vh!important;left:0!important;right:0!important;top:0!important;width:100vw!important}.fracto-devtools-max-minimal{align-items:center;background:none;border:none;color:#555;cursor:pointer;display:flex;font-size:14px;justify-content:center;margin-left:8px;padding:0 4px;transition:all .2s}.fracto-devtools-max-minimal:hover{color:#00d4ff}.fracto-devtools-plugins-section{background:rgba(0,212,255,.03);border-top:1px solid rgba(0,212,255,.1);padding:12px 14px}.fracto-devtools-plugins-header{align-items:center;color:#666;display:flex;font-size:10px;gap:6px;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.fracto-devtools-plugins-list{display:flex;flex-direction:column;gap:8px}.fracto-devtools-plugin-item{align-items:center;background:rgba(0,0,0,.3);border:1px solid rgba(0,212,255,.1);border-radius:6px;display:flex;justify-content:space-between;padding:6px 10px}.fracto-devtools-plugin-name{align-items:center;color:#00d4ff;display:flex;font-size:11px;font-weight:500;gap:6px}.fracto-devtools-plugin-controls{display:flex;gap:4px}.fracto-devtools-plugin-controls button{align-items:center;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);border-radius:4px;color:#00d4ff;cursor:pointer;display:flex;height:24px;justify-content:center;transition:all .2s;width:24px}.fracto-devtools-plugin-controls button:hover{background:rgba(0,212,255,.2);border-color:rgba(0,212,255,.4);transform:translateY(-1px)}.fracto-devtools-plugin-controls button.danger{background:rgba(255,95,87,.05);border-color:rgba(255,95,87,.2);color:#ff5f57}.fracto-devtools-plugin-controls button.danger:hover{background:rgba(255,95,87,.15);border-color:rgba(255,95,87,.4)}.spinning{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
           if (typeof document !== 'undefined') {
             var style = document.createElement('style');
             style.setAttribute('type', 'text/css');

package/dist/cjs/src/devtools/FractoDevTools.js

@@ -1,41 +1,43 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var reactDom = require('react-dom');
 var store = require('../store.js');
 require('./FractoDevTools.css.js');
 require('./MentalMap.css.js');
 var MentalMap = require('./MentalMap.js');
+var PluginManager = require('./PluginManager.js');
 var lucideReact = require('lucide-react');
 
 const FractoDevTools = ({ position = "left", initialOpen = false, expanded = false, trafficLightsMode = "indicators", controlsPosition = "right", maximizeMode = "overlay", }) => {
-    const [isOpen, setIsOpen] = react.useState(initialOpen);
-    const [isMaximized, setIsMaximized] = react.useState(false);
-    const [showMentalMap, setShowMentalMap] = react.useState(false);
-    const [snapshot, setSnapshot] = react.useState({});
-    const [isInitialized, setIsInitialized] = react.useState(false);
-    const [lastUpdate, setLastUpdate] = react.useState(0);
-    const [searchQuery, setSearchQuery] = react.useState("");
-    const [viewMode, setViewMode] = react.useState("all");
-    const [collapsedFlows, setCollapsedFlows] = react.useState(new Set());
-    const [copiedKey, setCopiedKey] = react.useState(null);
-    const [flowCount, setFlowCount] = react.useState(0);
-    const [mentalMapSide, setMentalMapSide] = react.useState(position);
+    const [isOpen, setIsOpen] = React.useState(initialOpen);
+    const [isMaximized, setIsMaximized] = React.useState(false);
+    const [showMentalMap, setShowMentalMap] = React.useState(false);
+    const [showPluginManager, setShowPluginManager] = React.useState(false);
+    const [snapshot, setSnapshot] = React.useState({});
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    const [lastUpdate, setLastUpdate] = React.useState(0);
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [viewMode, setViewMode] = React.useState("all");
+    const [collapsedFlows, setCollapsedFlows] = React.useState(new Set());
+    const [copiedKey, setCopiedKey] = React.useState(null);
+    const [flowCount, setFlowCount] = React.useState(0);
+    const [mentalMapSide, setMentalMapSide] = React.useState(position);
     // Dragging state
-    const [coords, setCoords] = react.useState({ x: 20, y: 20 });
-    const [isDragging, setIsDragging] = react.useState(false);
+    const [coords, setCoords] = React.useState({ x: 20, y: 20 });
+    const [isDragging, setIsDragging] = React.useState(false);
     // Indicators state
-    const [activeIndicators, setActiveIndicators] = react.useState({
+    const [activeIndicators, setActiveIndicators] = React.useState({
         red: false,
         yellow: false,
         green: false,
     });
     // Refs to manage pending indicator updates
-    const indicatorTimeoutsRef = react.useRef(new Map());
-    const isMountedRef = react.useRef(true);
+    const indicatorTimeoutsRef = React.useRef(new Map());
+    const isMountedRef = React.useRef(true);
     // Cleanup on unmount
-    react.useEffect(() => {
+    React.useEffect(() => {
         isMountedRef.current = true;
         return () => {
             isMountedRef.current = false;
@@ -44,7 +46,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
             indicatorTimeoutsRef.current.clear();
         };
     }, []);
-    react.useEffect(() => {
+    React.useEffect(() => {
         const updateCount = () => {
             if (!isMountedRef.current)
                 return;
@@ -53,8 +55,8 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
         updateCount();
         return store.store.subscribeGlobal(updateCount);
     }, []);
-    react.useEffect(() => {
-        if (!isOpen && !showMentalMap)
+    React.useEffect(() => {
+        if (!isOpen && !showMentalMap && !showPluginManager)
             return;
         setSnapshot(store.store.getDebugSnapshot());
         const unsub = store.store.subscribeGlobal(() => {
@@ -64,8 +66,8 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
             setLastUpdate(Date.now());
         });
         return unsub;
-    }, [isOpen, showMentalMap]);
-    react.useEffect(() => {
+    }, [isOpen, showMentalMap, showPluginManager]);
+    React.useEffect(() => {
         if (!isInitialized && Object.keys(snapshot).length > 0) {
             if (!expanded) {
                 setCollapsedFlows(new Set(Object.keys(snapshot)));
@@ -74,7 +76,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
         }
     }, [snapshot, expanded, isInitialized]);
     // Optimized indicator effect - prevents setState during render
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (trafficLightsMode !== "indicators")
             return;
         const unsub = store.store.subscribeEvents((event) => {
@@ -137,13 +139,13 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
             setIsMaximized(!isMaximized);
         }
     };
-    react.useEffect(() => {
+    React.useEffect(() => {
         const handleFsChange = () => setIsMaximized(!!document.fullscreenElement);
         document.addEventListener("fullscreenchange", handleFsChange);
         return () => document.removeEventListener("fullscreenchange", handleFsChange);
     }, []);
     // Escape key handler
-    react.useEffect(() => {
+    React.useEffect(() => {
         const handleEsc = (e) => {
             if (e.key === "Escape") {
                 if (showMentalMap) {
@@ -163,7 +165,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
         window.addEventListener("keydown", handleEsc);
         return () => window.removeEventListener("keydown", handleEsc);
     }, [isMaximized, showMentalMap]);
-    const filteredEntries = react.useMemo(() => {
+    const filteredEntries = React.useMemo(() => {
         let entries = Object.entries(snapshot);
         if (searchQuery.trim()) {
             const query = searchQuery.toLowerCase();
@@ -192,7 +194,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
         }
         return entries;
     }, [snapshot, searchQuery, viewMode]);
-    const stats = react.useMemo(() => {
+    const stats = React.useMemo(() => {
         const entries = Object.values(snapshot);
         return {
             total: entries.length,
@@ -203,7 +205,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
             primitives: entries.filter((d) => typeof d.value !== "object" || d.value === null).length,
         };
     }, [snapshot]);
-    const isGlobalDirty = react.useMemo(() => {
+    const isGlobalDirty = React.useMemo(() => {
         return Object.values(snapshot).some((d) => d.meta.isDirty);
     }, [snapshot]);
     const toggleCollapse = (key) => {
@@ -286,7 +288,7 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
     };
     // Stable handler for minimize change.
     // We ensure the main panel stays closed when Mental Map is active/minimized.
-    const handleMinimizeChange = react.useCallback((_min) => {
+    const handleMinimizeChange = React.useCallback((_min) => {
         setIsOpen(false);
     }, []);
     const mentalMapPortal = showMentalMap &&
@@ -302,7 +304,14 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
                                             : "All flows are at initial state", children: jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16 }) }), jsxRuntime.jsx("button", { onClick: () => setMentalMapSide((prev) => (prev === "left" ? "right" : "left")), className: "fracto-devtools-action-btn", title: `Map Logo default: ${mentalMapSide}`, children: mentalMapSide === "left" ? (jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })) : (jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })) }), jsxRuntime.jsx("button", { onClick: () => {
                                             setShowMentalMap(true);
                                             setIsOpen(false);
-                                        }, className: "fracto-devtools-action-btn", style: { fontSize: "16px" }, title: "Mental Map & Traces", children: jsxRuntime.jsx(lucideReact.Activity, { size: 18 }) }), jsxRuntime.jsx("button", { onClick: collapseAll, className: "fracto-devtools-action-btn", title: "Collapse All", children: jsxRuntime.jsx(lucideReact.ArrowDownToLine, { size: 16 }) }), jsxRuntime.jsx("button", { onClick: expandAll, className: "fracto-devtools-action-btn", title: "Expand All", children: jsxRuntime.jsx(lucideReact.ArrowUpToLine, { size: 16 }) })] })] })] }), jsxRuntime.jsx("div", { className: "fracto-devtools-content", children: filteredEntries.length === 0 ? (jsxRuntime.jsx("div", { className: "fracto-devtools-empty", children: "No flows detected" })) : (filteredEntries.map(([key, data]) => (jsxRuntime.jsxs("div", { className: `fracto-devtools-flow ${collapsedFlows.has(key) ? "collapsed" : ""}`, children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-header", onClick: () => toggleCollapse(key), children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-header-left", children: [jsxRuntime.jsx("span", { className: "fracto-devtools-flow-collapse-icon", children: collapsedFlows.has(key) ? (jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })) : (jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 })) }), jsxRuntime.jsx("div", { className: "fracto-devtools-flow-key", children: key }), data.meta.isDebouncing && (jsxRuntime.jsx("span", { className: "fracto-devtools-meta-tag", title: "Sync pending", children: jsxRuntime.jsx(lucideReact.History, { size: 12, className: "spinning" }) }))] }), jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-actions", children: [jsxRuntime.jsx("span", { className: "fracto-devtools-flow-badge", children: getValueType(data.value) }), jsxRuntime.jsx("button", { className: `fracto-devtools-flow-action ${data.meta.isDirty ? "is-dirty" : ""}`, onClick: (e) => {
+                                        }, className: "fracto-devtools-action-btn", style: { fontSize: "16px" }, title: "Mental Map & Traces", children: jsxRuntime.jsx(lucideReact.Activity, { size: 18 }) }), jsxRuntime.jsx("button", { onClick: () => {
+                                            setShowPluginManager(true);
+                                            setIsOpen(false);
+                                        }, className: "fracto-devtools-action-btn", style: { fontSize: "16px" }, title: "Plugin Architect", children: jsxRuntime.jsx(lucideReact.Database, { size: 18 }) }), jsxRuntime.jsx("button", { onClick: collapseAll, className: "fracto-devtools-action-btn", title: "Collapse All", children: jsxRuntime.jsx(lucideReact.ArrowDownToLine, { size: 16 }) }), jsxRuntime.jsx("button", { onClick: expandAll, className: "fracto-devtools-action-btn", title: "Expand All", children: jsxRuntime.jsx(lucideReact.ArrowUpToLine, { size: 16 }) })] })] })] }), jsxRuntime.jsx("div", { className: "fracto-devtools-content", children: filteredEntries.length === 0 ? (jsxRuntime.jsx("div", { className: "fracto-devtools-empty", children: "No flows detected" })) : (filteredEntries.map(([key, data]) => (jsxRuntime.jsxs("div", { className: `fracto-devtools-flow ${collapsedFlows.has(key) ? "collapsed" : ""}`, children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-header", onClick: () => toggleCollapse(key), children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-header-left", children: [jsxRuntime.jsx("span", { className: "fracto-devtools-flow-collapse-icon", children: collapsedFlows.has(key) ? (jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })) : (jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 })) }), jsxRuntime.jsx("div", { className: "fracto-devtools-flow-key", children: key }), data.meta.plugins && data.meta.plugins.length > 0 && (jsxRuntime.jsx("span", { className: "fracto-devtools-meta-tag", style: {
+                                                background: "rgba(255, 215, 0, 0.1)",
+                                                color: "#ffd700",
+                                                animation: "none",
+                                            }, title: `${data.meta.plugins.length} active plugins`, children: jsxRuntime.jsx(lucideReact.Zap, { size: 10 }) })), data.meta.isDebouncing && (jsxRuntime.jsx("span", { className: "fracto-devtools-meta-tag", title: "Sync pending", children: jsxRuntime.jsx(lucideReact.History, { size: 12, className: "spinning" }) }))] }), jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-actions", children: [jsxRuntime.jsx("span", { className: "fracto-devtools-flow-badge", children: getValueType(data.value) }), jsxRuntime.jsx("button", { className: `fracto-devtools-flow-action ${data.meta.isDirty ? "is-dirty" : ""}`, onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleResetFlow(key, data.meta.isDirty);
                                             }, title: data.meta.isDirty
@@ -311,7 +320,16 @@ const FractoDevTools = ({ position = "left", initialOpen = false, expanded = fal
                                                 e.stopPropagation();
                                                 handleCopy(key, data.value);
                                             }, children: copiedKey === key ? (jsxRuntime.jsx(lucideReact.Zap, { size: 14 })) : (jsxRuntime.jsx(lucideReact.Monitor, { size: 14 })) })] })] }), !collapsedFlows.has(key) && (jsxRuntime.jsxs("div", { className: "fracto-devtools-flow-expanded", children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-meta-grid", children: [jsxRuntime.jsxs("div", { className: "fracto-devtools-meta-item", children: [jsxRuntime.jsx("span", { className: "label", children: "Listeners:" }), jsxRuntime.jsx("span", { className: "value", children: data.meta.listeners })] }), jsxRuntime.jsxs("div", { className: "fracto-devtools-meta-item", children: [jsxRuntime.jsx("span", { className: "label", children: "History:" }), jsxRuntime.jsx("span", { className: "value", children: data.meta.historySize })] }), jsxRuntime.jsxs("div", { className: "fracto-devtools-meta-item", children: [jsxRuntime.jsx("span", { className: "label", children: "Redo:" }), jsxRuntime.jsx("span", { className: "value", children: data.meta.redoSize })] })] }), jsxRuntime.jsx("pre", { className: "fracto-devtools-flow-content", children: JSON.stringify(data.value, null, 2) })] })), copiedKey === key && (jsxRuntime.jsx("div", { className: "fracto-devtools-copy-toast", children: "Copied!" }))] }, key)))) }), jsxRuntime.jsxs("div", { className: "fracto-devtools-footer", children: [jsxRuntime.jsx("span", { children: "FractoState Engine v5" }), jsxRuntime.jsxs("span", { className: "fracto-devtools-footer-count", children: [filteredEntries.length, " items"] })] })] }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen ? panelContent : showMentalMap ? null : buttonContent, mentalMapPortal] }));
+    const pluginManagerPortal = showPluginManager &&
+        reactDom.createPortal(jsxRuntime.jsx(PluginManager.PluginManager, { snapshot: snapshot, onClose: () => {
+                setShowPluginManager(false);
+                setIsOpen(true);
+            } }), document.body);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isOpen
+                ? panelContent
+                : showMentalMap || showPluginManager
+                    ? null
+                    : buttonContent, mentalMapPortal, pluginManagerPortal] }));
 };
 
 exports.FractoDevTools = FractoDevTools;