sibujs 4.5.0 → 4.7.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.7.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -682,6 +772,14 @@ var getSubscriberCount2 = API.getSubscriberCount;
 var getSubscriberDeps2 = API.getSubscriberDeps;
 var forEachSubscriber2 = API.forEachSubscriber;
 
+// src/core/devtoolsHook.ts
+function emitDevtools(hook, event, payload) {
+  try {
+    hook.emit(event, payload);
+  } catch {
+  }
+}
+
 // src/core/ssr-context.ts
 var SSR_KEY = /* @__PURE__ */ Symbol.for("sibujs.ssr.v1");
 function detectSSRShared() {
@@ -836,12 +934,17 @@ function effect(effectFn, options) {
   try {
     retrack2(ctx.bodyFn, ctx.subscriber);
     if (ctx.rerunPending) drainReruns(ctx);
+  } catch (err) {
+    ctx.disposed = true;
+    if (ctx.userCleanups.length > 0) flushUserCleanups(ctx);
+    cleanup2(ctx.subscriber);
+    throw err;
   } finally {
     ctx.running = false;
     ctx.rerunPending = false;
   }
   const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  if (hook) hook.emit("effect:create", { effectFn });
+  if (hook) emitDevtools(hook, "effect:create", { effectFn });
   return () => disposeEffect(ctx);
 }
 
@@ -928,7 +1031,7 @@ function signal(initial, options) {
       state2.__v++;
       if (DEV) {
         const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-        if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+        if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       }
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
@@ -942,7 +1045,7 @@ function signal(initial, options) {
       state2.value = newValue;
       state2.__v++;
       const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook) hook.emit("signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
+      if (hook) emitDevtools(hook, "signal:update", { signal: state2, name: debugName, oldValue: prev, newValue });
       if (!enqueueBatchedSignal(state2)) {
         notifySubscribers2(state2);
       }
@@ -961,11 +1064,32 @@ function signal(initial, options) {
   }
   if (DEV) {
     const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (hook) hook.emit("signal:create", { signal: state2, name: debugName, getter: get, initial });
+    if (hook) emitDevtools(hook, "signal:create", { signal: state2, name: debugName, getter: get, initial });
   }
   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 +1097,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 +1255,8 @@ function createPluginRegistry() {
       }
     },
     reset() {
+      generation++;
+      pendingInstalls.clear();
       installedPlugins.clear();
       hooks.init.length = 0;
       hooks.mount.length = 0;
@@ -1131,17 +1347,17 @@ function derived(getter, options) {
     cs._d = false;
     cs._init = true;
   };
-  track2(() => {
-    let threw = true;
-    try {
+  try {
+    track2(() => {
       cs._v = getter();
       cs._d = false;
       cs._init = true;
-      threw = false;
-    } finally {
-      if (threw) cs._d = true;
-    }
-  }, markDirty);
+    }, markDirty);
+  } catch (err) {
+    disposed = true;
+    cleanup2(markDirty);
+    throw err;
+  }
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   const validate = () => {
     if (!cs._d || disposed || pendingError !== void 0) return;
@@ -1160,7 +1376,7 @@ function derived(getter, options) {
       if (disposed) cleanup2(markDirty);
     }
     if (hook && !disposed && !Object.is(oldValue, cs._v)) {
-      hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
+      emitDevtools(hook, "computed:update", { signal: cs, oldValue, newValue: cs._v });
     }
   };
   cs._validate = validate;
@@ -1211,7 +1427,7 @@ function derived(getter, options) {
       }
     }
   };
-  if (hook) hook.emit("computed:create", { signal: cs, name: debugName, getter: computedGetter });
+  if (hook) emitDevtools(hook, "computed:create", { signal: cs, name: debugName, getter: computedGetter });
   return computedGetter;
 }
 
@@ -1581,70 +1797,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", ""]);
@@ -1844,8 +1996,34 @@ function toKebab(prop) {
 }
 function applyStyle(el, style) {
   if (typeof style === "function") {
+    const getter = style;
+    let written = [];
+    let wroteString = false;
     const teardown = reactiveBinding2(() => {
-      el.setAttribute("style", sanitizeStyleAttribute(String(style()), { element: el }));
+      const value = getter();
+      if (value === null || typeof value !== "object") {
+        written = [];
+        wroteString = true;
+        el.setAttribute("style", sanitizeStyleAttribute(String(value), { element: el }));
+        return;
+      }
+      const decl = el.style;
+      if (wroteString) {
+        el.removeAttribute("style");
+        wroteString = false;
+      }
+      const next = [];
+      for (const prop in value) {
+        const val = value[prop];
+        if (val == null) continue;
+        const name = toKebab(prop);
+        next.push(name);
+        decl.setProperty(name, sanitizeCSSValue(String(val), { property: name, element: el }));
+      }
+      for (let i = 0; i < written.length; i++) {
+        if (next.indexOf(written[i]) === -1) decl.removeProperty(written[i]);
+      }
+      written = next;
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -1876,7 +2054,9 @@ function applyClass(el, cls) {
   }
   if (typeof cls === "function") {
     const teardown = reactiveBinding2(() => {
-      el.setAttribute("class", cls());
+      const value = cls();
+      if (value == null || value === false) el.removeAttribute("class");
+      else el.setAttribute("class", value);
     }, el);
     registerDisposer(el, teardown);
     return;
@@ -1958,7 +2138,7 @@ function appendChildren(el, nodes) {
     }
   }
 }
-var tagFactory = (tag, ns) => {
+function tagFactory(tag, ns) {
   const blocked = isBlockedTag(tag);
   return (first, second) => {
     if (blocked) {
@@ -2007,7 +2187,9 @@ var tagFactory = (tag, ns) => {
     const pClass = props.class;
     if (pClass != null) applyClass(el, pClass);
     const pId = props.id;
-    if (pId != null) {
+    if (typeof pId === "function") {
+      registerDisposer(el, bindAttribute(el, "id", pId));
+    } else if (pId != null) {
       if (DEV && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
         devWarn(
           `tagFactory: element id="${pId}" matches a common global and may cause DOM clobbering. Avoid setting ids from untrusted input.`
@@ -2057,61 +2239,125 @@ var tagFactory = (tag, ns) => {
         }
       }
     }
-    if (props.onElement && typeof props.onElement === "function") {
-      props.onElement(el);
-    }
+    if (typeof props.onElement === "function") props.onElement(el);
     return el;
   };
-};
+}
 
 // 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 };