sibujs 4.5.0 → 4.7.0

package/dist/{chunk-4PMLNECI.js → chunk-3QWBSL5R.js}

@@ -1,19 +1,22 @@
 import {
   createPlugin
-} from "./chunk-WWV3SJ3L.js";
+} from "./chunk-J6FW5TV6.js";
 import {
   tagFactory
-} from "./chunk-KEISJXBU.js";
+} from "./chunk-UOL2ECCS.js";
 import {
   derived
-} from "./chunk-RBTPLM32.js";
+} from "./chunk-RUSSKG6G.js";
+import {
+  globalSingleton
+} from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-RIXRAYIU.js";
+} from "./chunk-WEQ3DMVL.js";
 import {
   batch,
   signal
-} from "./chunk-XZZOBQAY.js";
+} from "./chunk-FQRUXCEE.js";
 
 // src/ecosystem/adapters/mobx.ts
 function mobXAdapter(options) {
@@ -111,53 +114,119 @@ function zustandAdapter(options) {
 }
 
 // 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 };