sibujs 4.5.0 → 4.6.0

package/dist/ecosystem.cjs

@@ -141,6 +141,90 @@ function reportError(error, context) {
   });
 }
 
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var MAX_DRAIN_TEARDOWNS = 1e4;
+function reportDrainRunaway(label, executed, remaining) {
+  if (typeof console === "undefined") return;
+  console.error(
+    `[SibuJS ${label}] runaway cleanup: stopped after running ${executed} teardowns with ${remaining} still queued. Cleanup production did not stabilize before the teardown safety ceiling was reached \u2014 the remaining work was NOT run.`,
+    { executed, remaining }
+  );
+}
+var activeBindingCount = 0;
+function resolveCapture(capture) {
+  let frame = capture;
+  while (frame?.closed) frame = frame.forwardTo;
+  return frame ?? null;
+}
+var registrationCaptures = [];
+function currentDisposerCapture() {
+  return resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+}
+function beginDisposerCapture(capture) {
+  if (capture === null && registrationCaptures.length === 0) return false;
+  registrationCaptures.push(resolveCapture(capture));
+  return true;
+}
+function endDisposerCapture() {
+  registrationCaptures.pop();
+}
+function registerDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  if (DEV) activeBindingCount++;
+  const capture = resolveCapture(registrationCaptures[registrationCaptures.length - 1]);
+  if (capture) capture.entries.push([node, teardown]);
+}
+function dispose(node) {
+  const stack = [node];
+  const order = [];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    order.push(current);
+    const children = Array.from(current.childNodes);
+    for (let i = 0; i < children.length; i++) {
+      stack.push(children[i]);
+    }
+  }
+  for (let i = order.length - 1; i >= 0; i--) {
+    disposeNodeOwn(order[i]);
+  }
+}
+function disposeNodeOwn(node) {
+  if (!elementDisposers.has(node)) return;
+  let executed = 0;
+  let runaway = false;
+  while (!runaway) {
+    const pending = elementDisposers.get(node);
+    if (!pending || pending.length === 0) break;
+    const snapshot = pending.slice();
+    elementDisposers.delete(node);
+    if (DEV) activeBindingCount -= snapshot.length;
+    for (let i = 0; i < snapshot.length; i++) {
+      if (executed >= MAX_DRAIN_TEARDOWNS) {
+        const rest = snapshot.slice(i);
+        const added = elementDisposers.get(node);
+        elementDisposers.set(node, added ? rest.concat(added) : rest);
+        if (DEV) activeBindingCount += rest.length;
+        reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
+        runaway = true;
+        break;
+      }
+      executed++;
+      try {
+        snapshot[i]();
+      } catch (err) {
+        reportError(err, { phase: "cleanup", name: "disposer" });
+      }
+    }
+  }
+}
+
 // src/reactivity/track-core.ts
 var POOL_MAX = 4096;
 var nodePool = [];
@@ -299,6 +383,7 @@ function retrack(effectFn, subscriber) {
   }
   currentSubscriber = subscriber;
   const sub = subscriber;
+  if (sub._cap === void 0) sub._cap = currentDisposerCapture();
   const epoch = ++subscriberEpochCounter;
   sub._epoch = epoch;
   sub._structDirty = false;
@@ -490,7 +575,12 @@ function drainQueue() {
       quarantined.add(sub);
       continue;
     }
-    safeInvoke(sub);
+    const pushed = beginDisposerCapture(sub._cap ?? null);
+    try {
+      safeInvoke(sub);
+    } finally {
+      if (pushed) endDisposerCapture();
+    }
   }
 }
 function drainNotificationQueue() {
@@ -626,7 +716,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.5.0" : "dev";
+var _runtimeVersion = true ? "4.6.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -966,6 +1056,27 @@ function signal(initial, options) {
   return [get, set];
 }
 
+// src/utils/adoptThenable.ts
+function adoptThenable(value) {
+  if (value === null || typeof value !== "object" && typeof value !== "function") return null;
+  let then;
+  try {
+    then = value.then;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+  if (typeof then !== "function") return null;
+  return new Promise((resolve, reject) => {
+    queueMicrotask(() => {
+      try {
+        Reflect.apply(then, value, [resolve, reject]);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  });
+}
+
 // src/utils/globalSingleton.ts
 function globalSingleton(key, create) {
   const g = globalThis;
@@ -973,37 +1084,127 @@ function globalSingleton(key, create) {
 }
 
 // src/plugins/plugin.ts
+var CANCELLED_BRAND = /* @__PURE__ */ Symbol.for("sibujs.plugins.installCancelled.v1");
+var _a;
+var PluginInstallCancelledError = class extends Error {
+  constructor(pluginName) {
+    super(`[Plugin] Installation of "${pluginName}" was cancelled before it was committed (registry reset).`);
+    /**
+     * Brand, not identity: the default registry is shared across duplicate copies
+     * of this module, so the error a caller receives may come from another copy's
+     * constructor. `instanceof` is taught to recognise the brand instead.
+     */
+    this[_a] = true;
+    this.name = "PluginInstallCancelledError";
+    this.pluginName = pluginName;
+  }
+  static [(_a = CANCELLED_BRAND, Symbol.hasInstance)](value) {
+    return isPluginInstallCancelledError(value);
+  }
+};
+function isPluginInstallCancelledError(value) {
+  return typeof value === "object" && value !== null && value[CANCELLED_BRAND] === true;
+}
 function createPluginRegistry() {
   const installedPlugins = /* @__PURE__ */ new Set();
   const hooks = { init: [], mount: [], unmount: [], error: [] };
   const provided = /* @__PURE__ */ new Map();
+  const installStack = /* @__PURE__ */ new Set();
+  const pendingInstalls = /* @__PURE__ */ new Map();
+  let generation = 0;
   const registry = {
     installedPlugins,
     hooks,
     provided,
+    /**
+     * Install a plugin as a transaction.
+     *
+     * Hooks and providers registered through `ctx` are staged and committed
+     * only if `install()` returns; a throwing install leaves the registry
+     * exactly as it found it (and can simply be retried). The plugin is marked
+     * installed at commit, before its init hooks run.
+     *
+     * Each `plugin()` call is its own transaction: a dependency installed by a
+     * nested `plugin()` call commits on its own and stays installed even if the
+     * outer installation later fails.
+     */
     plugin(p, options) {
       if (installedPlugins.has(p.name)) {
         console.warn(`[Plugin] "${p.name}" is already installed.`);
         return;
       }
+      if (installStack.has(p.name)) {
+        throw new Error(`[Plugin] "${p.name}" is already being installed (recursive installation).`);
+      }
+      if (pendingInstalls.has(p.name)) {
+        throw new Error(`[Plugin] "${p.name}" is already being installed (asynchronous installation in flight).`);
+      }
+      const staged = { init: [], mount: [], unmount: [], error: [] };
+      const stagedProvided = /* @__PURE__ */ new Map();
+      let committed = false;
+      const myGeneration = generation;
+      const stale = () => {
+        if (myGeneration === generation) return false;
+        if (DEV) devWarn(`plugin: "${p.name}" registered after the registry was reset; the registration was ignored.`);
+        return true;
+      };
+      const target = () => stale() ? null : committed ? hooks : staged;
       const ctx = {
-        onInit: (cb) => hooks.init.push(cb),
-        onMount: (cb) => hooks.mount.push(cb),
-        onUnmount: (cb) => hooks.unmount.push(cb),
-        onError: (cb) => hooks.error.push(cb),
-        provide: (key, value) => provided.set(key, value)
+        onInit: (cb) => void target()?.init.push(cb),
+        onMount: (cb) => void target()?.mount.push(cb),
+        onUnmount: (cb) => void target()?.unmount.push(cb),
+        onError: (cb) => void target()?.error.push(cb),
+        provide: (key, value) => {
+          if (stale()) return;
+          (committed ? provided : stagedProvided).set(key, value);
+        }
       };
-      const initHooksBefore = hooks.init.length;
-      p.install(ctx, options);
-      installedPlugins.add(p.name);
-      const justAdded = hooks.init.slice(initHooksBefore);
-      for (const cb of justAdded) {
-        try {
-          cb();
-        } catch (e) {
-          console.error(`[Plugin] "${p.name}" init error:`, e);
+      const commit = () => {
+        if (myGeneration !== generation) return false;
+        hooks.init.push(...staged.init);
+        hooks.mount.push(...staged.mount);
+        hooks.unmount.push(...staged.unmount);
+        hooks.error.push(...staged.error);
+        for (const [key, value] of stagedProvided) provided.set(key, value);
+        installedPlugins.add(p.name);
+        committed = true;
+        if (pendingInstalls.get(p.name) === myGeneration) pendingInstalls.delete(p.name);
+        for (const cb of staged.init.slice()) {
+          try {
+            cb();
+          } catch (e) {
+            console.error(`[Plugin] "${p.name}" init error:`, e);
+          }
         }
+        return true;
+      };
+      installStack.add(p.name);
+      let pending;
+      try {
+        pending = adoptThenable(p.install(ctx, options));
+      } finally {
+        installStack.delete(p.name);
       }
+      if (!pending) {
+        if (!commit()) throw new PluginInstallCancelledError(p.name);
+        return;
+      }
+      if (myGeneration === generation) pendingInstalls.set(p.name, myGeneration);
+      const settled = pending.then(
+        () => {
+          if (commit()) return;
+          if (pendingInstalls.get(p.name) === myGeneration) pendingInstalls.delete(p.name);
+          throw new PluginInstallCancelledError(p.name);
+        },
+        (err) => {
+          if (pendingInstalls.get(p.name) === myGeneration) pendingInstalls.delete(p.name);
+          reportError(err, { phase: "async", name: `plugin(${p.name})` });
+          throw err;
+        }
+      );
+      settled.catch(() => {
+      });
+      return settled;
     },
     inject(key, defaultValue) {
       if (provided.has(key)) return provided.get(key);
@@ -1041,6 +1242,8 @@ function createPluginRegistry() {
       }
     },
     reset() {
+      generation++;
+      pendingInstalls.clear();
       installedPlugins.clear();
       hooks.init.length = 0;
       hooks.mount.length = 0;
@@ -1581,70 +1784,6 @@ function bindAttribute(el, attr, getter) {
   return reactiveBinding2(commit, el);
 }
 
-// src/core/rendering/dispose.ts
-var elementDisposers = /* @__PURE__ */ new WeakMap();
-var MAX_DRAIN_TEARDOWNS = 1e4;
-function reportDrainRunaway(label, executed, remaining) {
-  if (typeof console === "undefined") return;
-  console.error(
-    `[SibuJS ${label}] runaway cleanup: stopped after running ${executed} teardowns with ${remaining} still queued. Cleanup production did not stabilize before the teardown safety ceiling was reached \u2014 the remaining work was NOT run.`,
-    { executed, remaining }
-  );
-}
-var activeBindingCount = 0;
-function registerDisposer(node, teardown) {
-  let disposers = elementDisposers.get(node);
-  if (!disposers) {
-    disposers = [];
-    elementDisposers.set(node, disposers);
-  }
-  disposers.push(teardown);
-  if (DEV) activeBindingCount++;
-}
-function dispose(node) {
-  const stack = [node];
-  const order = [];
-  while (stack.length > 0) {
-    const current = stack.pop();
-    order.push(current);
-    const children = Array.from(current.childNodes);
-    for (let i = 0; i < children.length; i++) {
-      stack.push(children[i]);
-    }
-  }
-  for (let i = order.length - 1; i >= 0; i--) {
-    const current = order[i];
-    if (elementDisposers.has(current)) {
-      let executed = 0;
-      let runaway = false;
-      while (!runaway) {
-        const pending = elementDisposers.get(current);
-        if (!pending || pending.length === 0) break;
-        const snapshot = pending.slice();
-        elementDisposers.delete(current);
-        if (DEV) activeBindingCount -= snapshot.length;
-        for (let i2 = 0; i2 < snapshot.length; i2++) {
-          if (executed >= MAX_DRAIN_TEARDOWNS) {
-            const rest = snapshot.slice(i2);
-            const added = elementDisposers.get(current);
-            elementDisposers.set(current, added ? rest.concat(added) : rest);
-            if (DEV) activeBindingCount += rest.length;
-            reportDrainRunaway("dispose", executed, rest.length + (added?.length ?? 0));
-            runaway = true;
-            break;
-          }
-          executed++;
-          try {
-            snapshot[i2]();
-          } catch (err) {
-            reportError(err, { phase: "cleanup", name: "disposer" });
-          }
-        }
-      }
-    }
-  }
-}
-
 // src/core/rendering/focusPreservation.ts
 var IDENTITY_ATTRS = ["data-focus-key", "id", "name"];
 var SELECTABLE_TYPES = /* @__PURE__ */ new Set(["text", "search", "url", "tel", "password", ""]);
@@ -2065,53 +2204,119 @@ var tagFactory = (tag, ns) => {
 };
 
 // src/ecosystem/ui/componentAdapter.ts
+var _themeLayers = globalSingleton(
+  /* @__PURE__ */ Symbol.for("sibujs.themeLayers.v1"),
+  () => /* @__PURE__ */ new WeakMap()
+);
+function commitThemeProperty(root, name, record) {
+  const top = record.layers[record.layers.length - 1];
+  if (top) {
+    root.style.setProperty(name, top.value);
+    return;
+  }
+  _themeLayers.get(root)?.delete(name);
+  if (record.original.value === "") root.style.removeProperty(name);
+  else root.style.setProperty(name, record.original.value, record.original.priority);
+}
+function setThemeLayer(root, name, handle, value) {
+  let properties = _themeLayers.get(root);
+  if (!properties) _themeLayers.set(root, properties = /* @__PURE__ */ new Map());
+  let record = properties.get(name);
+  if (!record) {
+    record = {
+      original: { value: root.style.getPropertyValue(name), priority: root.style.getPropertyPriority(name) },
+      layers: []
+    };
+    properties.set(name, record);
+  }
+  const layer = record.layers.find((l) => l.handle === handle);
+  if (layer) layer.value = value;
+  else record.layers.push({ handle, value });
+  commitThemeProperty(root, name, record);
+}
+function removeThemeLayer(root, name, handle) {
+  const record = _themeLayers.get(root)?.get(name);
+  if (!record) return;
+  const index = record.layers.findIndex((l) => l.handle === handle);
+  if (index === -1) return;
+  record.layers.splice(index, 1);
+  commitThemeProperty(root, name, record);
+}
+function ownString(map, key) {
+  if (!map || key === void 0 || !Object.hasOwn(map, key)) return void 0;
+  const value = map[key];
+  return typeof value === "string" ? value : void 0;
+}
 function createTheme(initial) {
   const [getConfig, setConfig] = signal(initial);
   function resolveClass(component, variant) {
     const config = getConfig();
     const overrideKey = variant ? `${component}-${variant}` : component;
-    if (config.classOverrides?.[overrideKey]) {
-      return config.classOverrides[overrideKey];
-    }
+    const override = ownString(config.classOverrides, overrideKey);
+    if (override) return override;
     const base = `${config.prefix}-${component}`;
     return variant ? `${base} ${config.prefix}-${component}--${variant}` : base;
   }
   function setTheme(partial) {
     setConfig((prev) => ({ ...prev, ...partial }));
   }
-  return { config: getConfig, setTheme, resolveClass };
+  function applyTo(root) {
+    const handle = {};
+    let applied = /* @__PURE__ */ new Set();
+    const stop = effect(() => {
+      const variables = getConfig().variables ?? {};
+      const next = new Set(Object.keys(variables));
+      for (const name of applied) {
+        if (!next.has(name)) removeThemeLayer(root, name, handle);
+      }
+      for (const [name, value] of Object.entries(variables)) setThemeLayer(root, name, handle, value);
+      applied = next;
+    });
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      stop();
+      for (const name of applied) removeThemeLayer(root, name, handle);
+      applied.clear();
+    };
+  }
+  return { config: getConfig, setTheme, resolveClass, applyTo };
 }
 function componentAdapter(config) {
   const theme = createTheme({ prefix: config.prefix });
+  const reprefix = (cls, prefix) => prefix !== config.prefix && cls.startsWith(`${config.prefix}-`) ? `${prefix}-${cls.slice(config.prefix.length + 1)}` : cls;
   const components = {};
   for (const [name, mapping] of Object.entries(config.components)) {
     const factory = tagFactory(mapping.tag || "div");
-    components[name] = (props = {}) => {
+    components[name] = (props = {}, children) => {
       const { variant, size, class: userClass, ...rest } = props;
-      const classes = [mapping.baseClass];
-      if (variant && mapping.variants?.[variant]) {
-        classes.push(mapping.variants[variant]);
-      }
-      if (size && mapping.sizes?.[size]) {
-        classes.push(mapping.sizes[size]);
-      }
-      let finalClass;
-      if (typeof userClass === "function") {
-        finalClass = () => {
-          const extra = userClass();
-          return extra ? `${classes.join(" ")} ${extra}` : classes.join(" ");
-        };
-      } else if (typeof userClass === "string" && userClass) {
-        finalClass = `${classes.join(" ")} ${userClass}`;
-      } else {
-        finalClass = classes.join(" ");
-      }
+      const themeClasses = () => {
+        const current = theme.config();
+        const overrides = current.classOverrides ?? {};
+        const pick = (key, fallback) => Object.hasOwn(overrides, key) ? overrides[key] : reprefix(fallback, current.prefix);
+        const classes = [pick(name, mapping.baseClass)];
+        const variantClass = ownString(mapping.variants, variant);
+        if (variant && variantClass) {
+          classes.push(pick(`${name}-${variant}`, variantClass));
+        }
+        const sizeClass = ownString(mapping.sizes, size);
+        if (size && sizeClass) {
+          classes.push(pick(`${name}-${size}`, sizeClass));
+        }
+        return classes.filter(Boolean).join(" ");
+      };
+      const finalClass = () => {
+        const base = themeClasses();
+        const extra = typeof userClass === "function" ? userClass() : userClass;
+        return typeof extra === "string" && extra ? `${base} ${extra}` : base;
+      };
       const mergedProps = {
         ...mapping.defaultProps,
         ...rest,
         class: finalClass
       };
-      return factory(mergedProps);
+      return children === void 0 ? factory(mergedProps) : factory(mergedProps, children);
     };
   }
   return { name: config.name, components, theme };

package/dist/ecosystem.d.cts

@@ -1,5 +1,6 @@
-import { S as SibuPlugin } from './plugin-D30wlGW5.cjs';
-import { D as DerivedAccessor, T as TagProps } from './tagFactory-DVoDpHye.cjs';
+import { S as SibuPlugin } from './plugin-DVgSnTfK.cjs';
+import { D as DerivedAccessor, T as TagProps, a as NodeChildren } from './tagFactory-DFstCLQV.cjs';
+import './signal-EotCj4hS.cjs';
 
 /** MobX autorun disposer function type. */
 type MobXReactionDisposer = () => void;
@@ -163,6 +164,16 @@ interface ThemeAPI {
     setTheme: (config: Partial<ThemeConfig>) => void;
     /** Resolve a component class name using prefix and overrides */
     resolveClass: (component: string, variant?: string) => string;
+    /**
+     * Install the theme's CSS variables on `root` (the theme root — typically the
+     * app container) and keep them in sync: variables added, changed or removed by
+     * `setTheme()` are reflected, and custom properties the theme never set are left
+     * alone. Handles may overlap on one root and be released in any order: the
+     * most recently applied live handle's value wins, and when no handle sets a
+     * property any more, the value and priority it had before are restored.
+     * Returns a function that stops syncing and releases this handle.
+     */
+    applyTo: (root: HTMLElement) => () => void;
 }
 /**
  * Creates a reactive theme for a UI component library adapter.
@@ -194,7 +205,12 @@ interface AdaptedComponentProps extends TagProps {
     /** Component size (e.g., "sm", "md", "lg") */
     size?: string;
 }
-type AdaptedComponent = (props?: AdaptedComponentProps) => Element;
+/**
+ * A component produced by {@link componentAdapter}. Children may be passed
+ * positionally, exactly like a tag factory: `Button({ variant: "primary" }, "Save")`.
+ * Positional children take precedence over a `nodes` prop.
+ */
+type AdaptedComponent = (props?: AdaptedComponentProps, children?: NodeChildren) => Element;
 /**
  * Creates a set of SibuJS components from a CSS framework's class mappings.
  *

package/dist/ecosystem.d.ts

@@ -1,5 +1,6 @@
-import { S as SibuPlugin } from './plugin-D30wlGW5.js';
-import { D as DerivedAccessor, T as TagProps } from './tagFactory-DVoDpHye.js';
+import { S as SibuPlugin } from './plugin-DVgSnTfK.js';
+import { D as DerivedAccessor, T as TagProps, a as NodeChildren } from './tagFactory-DkaNVUNV.js';
+import './signal-EotCj4hS.js';
 
 /** MobX autorun disposer function type. */
 type MobXReactionDisposer = () => void;
@@ -163,6 +164,16 @@ interface ThemeAPI {
     setTheme: (config: Partial<ThemeConfig>) => void;
     /** Resolve a component class name using prefix and overrides */
     resolveClass: (component: string, variant?: string) => string;
+    /**
+     * Install the theme's CSS variables on `root` (the theme root — typically the
+     * app container) and keep them in sync: variables added, changed or removed by
+     * `setTheme()` are reflected, and custom properties the theme never set are left
+     * alone. Handles may overlap on one root and be released in any order: the
+     * most recently applied live handle's value wins, and when no handle sets a
+     * property any more, the value and priority it had before are restored.
+     * Returns a function that stops syncing and releases this handle.
+     */
+    applyTo: (root: HTMLElement) => () => void;
 }
 /**
  * Creates a reactive theme for a UI component library adapter.
@@ -194,7 +205,12 @@ interface AdaptedComponentProps extends TagProps {
     /** Component size (e.g., "sm", "md", "lg") */
     size?: string;
 }
-type AdaptedComponent = (props?: AdaptedComponentProps) => Element;
+/**
+ * A component produced by {@link componentAdapter}. Children may be passed
+ * positionally, exactly like a tag factory: `Button({ variant: "primary" }, "Save")`.
+ * Positional children take precedence over a `nodes` prop.
+ */
+type AdaptedComponent = (props?: AdaptedComponentProps, children?: NodeChildren) => Element;
 /**
  * Creates a set of SibuJS components from a CSS framework's class mappings.
  *

package/dist/ecosystem.js

@@ -7,19 +7,19 @@ import {
   mobXAdapter,
   reduxAdapter,
   zustandAdapter
-} from "./chunk-4PMLNECI.js";
-import "./chunk-WWV3SJ3L.js";
-import "./chunk-KEISJXBU.js";
-import "./chunk-ONOHFDLG.js";
-import "./chunk-RBTPLM32.js";
-import "./chunk-IXKSNWV5.js";
+} from "./chunk-BAAG6ZTI.js";
+import "./chunk-J6FW5TV6.js";
+import "./chunk-VVWPJ543.js";
+import "./chunk-47M47FOM.js";
+import "./chunk-QE4TTDU3.js";
+import "./chunk-2INLLLMZ.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-RIXRAYIU.js";
-import "./chunk-5DXA2J44.js";
-import "./chunk-QKRPLZ2V.js";
-import "./chunk-XZZOBQAY.js";
-import "./chunk-UGRX3S57.js";
-import "./chunk-2WLZ6757.js";
+import "./chunk-XC4MEKGA.js";
+import "./chunk-7XHATCIH.js";
+import "./chunk-5HZXGZ6T.js";
+import "./chunk-D33YTSX5.js";
+import "./chunk-5Q4R7HCL.js";
+import "./chunk-NYNYSPK7.js";
 export {
   antdAdapter,
   chakraAdapter,