sibujs 1.2.0 → 1.4.0

package/dist/chunk-BGN5ZMP4.js

@@ -0,0 +1,26 @@
+import {
+  signal
+} from "./chunk-WZSPOOER.js";
+
+// src/core/rendering/context.ts
+function context(defaultValue) {
+  const [getValue, setValue] = signal(defaultValue);
+  return {
+    provide(value) {
+      setValue(value);
+    },
+    use() {
+      return getValue;
+    },
+    get() {
+      return getValue();
+    },
+    set(value) {
+      setValue(value);
+    }
+  };
+}
+
+export {
+  context
+};

package/dist/chunk-BTU3TJDS.js

@@ -0,0 +1,365 @@
+import {
+  createPlugin
+} from "./chunk-K5ZUMYVS.js";
+import {
+  tagFactory
+} from "./chunk-F3FA4F32.js";
+import {
+  derived
+} from "./chunk-NEKUBFPT.js";
+import {
+  effect
+} from "./chunk-CHF5OHIA.js";
+import {
+  batch,
+  signal
+} from "./chunk-WZSPOOER.js";
+
+// src/ecosystem/adapters/mobx.ts
+function mobXAdapter(options) {
+  return createPlugin("sibu-mobx", (ctx) => {
+    const { autorun } = options;
+    const disposers = [];
+    function fromMobX(expression) {
+      const [getValue, setValue] = signal(expression());
+      const disposer = autorun(() => {
+        const newValue = expression();
+        batch(() => {
+          setValue(newValue);
+        });
+      });
+      disposers.push(disposer);
+      return getValue;
+    }
+    function toMobX(sibuGetter, callback) {
+      return effect(() => {
+        callback(sibuGetter());
+      });
+    }
+    function destroy() {
+      for (const disposer of disposers) {
+        disposer();
+      }
+      disposers.length = 0;
+    }
+    const api = { fromMobX, toMobX, destroy };
+    ctx.provide("mobx", api);
+  });
+}
+
+// src/ecosystem/adapters/redux.ts
+function reduxAdapter(options) {
+  return createPlugin("sibu-redux", (ctx) => {
+    const { store } = options;
+    const [getState, setState] = signal(store.getState());
+    const unsubscribe = store.subscribe(() => {
+      batch(() => {
+        setState(store.getState());
+      });
+    });
+    function useSelector(selector) {
+      return derived(() => selector(getState()));
+    }
+    const api = {
+      getState,
+      useSelector,
+      dispatch: store.dispatch.bind(store),
+      destroy: unsubscribe
+    };
+    ctx.provide("redux", api);
+  });
+}
+
+// src/ecosystem/adapters/zustand.ts
+function zustandAdapter(options) {
+  return createPlugin("sibu-zustand", (ctx) => {
+    const { store } = options;
+    const [getState, setSibuState] = signal(store.getState());
+    const unsubscribe = store.subscribe((state) => {
+      batch(() => {
+        setSibuState(state);
+      });
+    });
+    function useSelector(selector) {
+      return derived(() => selector(getState()));
+    }
+    const api = {
+      getState,
+      useSelector,
+      setState: store.setState.bind(store),
+      destroy() {
+        unsubscribe();
+        store.destroy();
+      }
+    };
+    ctx.provide("zustand", api);
+  });
+}
+
+// src/ecosystem/ui/componentAdapter.ts
+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 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 componentAdapter(config) {
+  const theme = createTheme({ prefix: config.prefix });
+  const components = {};
+  for (const [name, mapping] of Object.entries(config.components)) {
+    const factory = tagFactory(mapping.tag || "div");
+    components[name] = (props = {}) => {
+      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 mergedProps = {
+        ...mapping.defaultProps,
+        ...rest,
+        class: finalClass
+      };
+      return factory(mergedProps);
+    };
+  }
+  return { name: config.name, components, theme };
+}
+
+// src/ecosystem/ui/antd.ts
+var antdConfig = {
+  name: "antd",
+  prefix: "ant",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "ant-btn",
+      variants: {
+        primary: "ant-btn-primary",
+        dashed: "ant-btn-dashed",
+        text: "ant-btn-text",
+        link: "ant-btn-link",
+        default: "ant-btn-default",
+        danger: "ant-btn-dangerous"
+      },
+      sizes: {
+        sm: "ant-btn-sm",
+        lg: "ant-btn-lg"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "input",
+      baseClass: "ant-input",
+      sizes: {
+        sm: "ant-input-sm",
+        lg: "ant-input-lg"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "ant-card",
+      variants: {
+        bordered: "ant-card-bordered"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "ant-modal"
+    },
+    Tag: {
+      tag: "span",
+      baseClass: "ant-tag",
+      variants: {
+        success: "ant-tag-success",
+        error: "ant-tag-error",
+        warning: "ant-tag-warning",
+        processing: "ant-tag-processing"
+      }
+    },
+    Badge: {
+      tag: "span",
+      baseClass: "ant-badge"
+    },
+    Avatar: {
+      tag: "span",
+      baseClass: "ant-avatar",
+      sizes: {
+        sm: "ant-avatar-sm",
+        lg: "ant-avatar-lg"
+      }
+    }
+  }
+};
+var antdAdapter = componentAdapter(antdConfig);
+
+// src/ecosystem/ui/chakra.ts
+var chakraConfig = {
+  name: "chakra",
+  prefix: "chakra",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "chakra-button",
+      variants: {
+        solid: "chakra-button--solid",
+        outline: "chakra-button--outline",
+        ghost: "chakra-button--ghost",
+        link: "chakra-button--link"
+      },
+      sizes: {
+        xs: "chakra-button--xs",
+        sm: "chakra-button--sm",
+        md: "chakra-button--md",
+        lg: "chakra-button--lg"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "input",
+      baseClass: "chakra-input",
+      variants: {
+        outline: "chakra-input--outline",
+        filled: "chakra-input--filled",
+        flushed: "chakra-input--flushed",
+        unstyled: "chakra-input--unstyled"
+      },
+      sizes: {
+        xs: "chakra-input--xs",
+        sm: "chakra-input--sm",
+        md: "chakra-input--md",
+        lg: "chakra-input--lg"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "chakra-card",
+      variants: {
+        elevated: "chakra-card--elevated",
+        outline: "chakra-card--outline",
+        filled: "chakra-card--filled",
+        unstyled: "chakra-card--unstyled"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "chakra-modal__content"
+    },
+    Badge: {
+      tag: "span",
+      baseClass: "chakra-badge",
+      variants: {
+        solid: "chakra-badge--solid",
+        subtle: "chakra-badge--subtle",
+        outline: "chakra-badge--outline"
+      }
+    },
+    Stack: {
+      tag: "div",
+      baseClass: "chakra-stack",
+      variants: {
+        horizontal: "chakra-stack--horizontal",
+        vertical: "chakra-stack--vertical"
+      }
+    }
+  }
+};
+var chakraAdapter = componentAdapter(chakraConfig);
+
+// src/ecosystem/ui/material.ts
+var materialConfig = {
+  name: "material",
+  prefix: "mdc",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "mdc-button",
+      variants: {
+        raised: "mdc-button--raised",
+        outlined: "mdc-button--outlined",
+        text: "mdc-button--text",
+        unelevated: "mdc-button--unelevated"
+      },
+      sizes: {
+        sm: "mdc-button--dense"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "div",
+      baseClass: "mdc-text-field",
+      variants: {
+        outlined: "mdc-text-field--outlined",
+        filled: "mdc-text-field--filled"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "mdc-card",
+      variants: {
+        outlined: "mdc-card--outlined",
+        elevated: "mdc-card--elevated"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "mdc-dialog",
+      variants: {
+        fullscreen: "mdc-dialog--fullscreen"
+      }
+    },
+    Chip: {
+      tag: "span",
+      baseClass: "mdc-chip",
+      variants: {
+        outlined: "mdc-chip--outlined"
+      }
+    },
+    List: {
+      tag: "ul",
+      baseClass: "mdc-list",
+      variants: {
+        dense: "mdc-list--dense"
+      }
+    },
+    ListItem: {
+      tag: "li",
+      baseClass: "mdc-list-item"
+    }
+  }
+};
+var materialAdapter = componentAdapter(materialConfig);
+
+export {
+  mobXAdapter,
+  reduxAdapter,
+  zustandAdapter,
+  createTheme,
+  componentAdapter,
+  antdAdapter,
+  chakraAdapter,
+  materialAdapter
+};

package/dist/chunk-CHF5OHIA.js

@@ -0,0 +1,61 @@
+import {
+  isSSR
+} from "./chunk-EUZND3CB.js";
+import {
+  track,
+  untracked
+} from "./chunk-ZD6OAMTH.js";
+import {
+  devAssert
+} from "./chunk-5X6PP2UK.js";
+
+// src/core/signals/effect.ts
+var _g = globalThis;
+function on(deps, handler) {
+  let prev;
+  let first = true;
+  return () => {
+    const value = deps();
+    if (first) {
+      first = false;
+      prev = value;
+      untracked(() => handler(value, void 0));
+    } else {
+      const p = prev;
+      prev = value;
+      untracked(() => handler(value, p));
+    }
+  };
+}
+function effect(effectFn, options) {
+  devAssert(typeof effectFn === "function", "effect: argument must be a function.");
+  if (isSSR()) return () => {
+  };
+  const onError = options?.onError;
+  const wrappedFn = onError ? () => {
+    try {
+      effectFn();
+    } catch (err) {
+      onError(err);
+    }
+  } : effectFn;
+  let cleanupHandle = () => {
+  };
+  const subscriber = () => {
+    cleanupHandle();
+    cleanupHandle = track(wrappedFn, subscriber);
+  };
+  cleanupHandle = track(wrappedFn, subscriber);
+  const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  if (hook) hook.emit("effect:create", { effectFn });
+  return () => {
+    const h = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (h) h.emit("effect:destroy", { effectFn });
+    cleanupHandle();
+  };
+}
+
+export {
+  on,
+  effect
+};

package/dist/chunk-CMBFNA7L.js

@@ -0,0 +1,27 @@
+// src/utils/sanitize.ts
+function sanitizeUrl(url) {
+  const trimmed = url.replace(/[\x00-\x20\x7f-\x9f]+/g, "").trim();
+  if (!trimmed) return "";
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("javascript:") || lower.startsWith("data:") || lower.startsWith("vbscript:") || lower.startsWith("blob:")) {
+    return "";
+  }
+  return trimmed;
+}
+function sanitizeCSSValue(value) {
+  const lower = value.toLowerCase().replace(/\s+/g, "");
+  if (lower.includes("url(") || lower.includes("expression(") || lower.includes("javascript:") || lower.includes("-moz-binding")) {
+    return "";
+  }
+  return value;
+}
+var URL_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "cite", "poster", "background", "srcset"]);
+function isUrlAttribute(attr) {
+  return URL_ATTRIBUTES.has(attr);
+}
+
+export {
+  sanitizeUrl,
+  sanitizeCSSValue,
+  isUrlAttribute
+};

package/dist/chunk-CNZ35WI2.js

@@ -0,0 +1,178 @@
+// src/patterns/hoc.ts
+function withWrapper(WrappedComponent, wrapper) {
+  return (props) => wrapper(WrappedComponent, props);
+}
+function withDefaults(component, defaults) {
+  return (props) => component({ ...defaults, ...props });
+}
+function compose(...wrappers) {
+  return (component) => wrappers.reduceRight((comp, wrapper) => wrapper(comp), component);
+}
+
+// src/patterns/composable.ts
+function RenderProp(props) {
+  return props.render(props.data());
+}
+function withBoundary(name, component) {
+  return (props) => {
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-sibu-boundary", name);
+    try {
+      const el = component(props);
+      wrapper.appendChild(el);
+    } catch (error) {
+      const errorEl = document.createElement("div");
+      errorEl.setAttribute("data-sibu-boundary-error", name);
+      errorEl.style.cssText = "color: red; border: 1px solid red; padding: 8px; margin: 4px;";
+      errorEl.textContent = `[${name}] ${error instanceof Error ? error.message : String(error)}`;
+      wrapper.appendChild(errorEl);
+    }
+    return wrapper;
+  };
+}
+function createSlots(slots) {
+  return {
+    renderSlot(name, fallback) {
+      const slotFn = slots[name];
+      if (slotFn) {
+        const result = slotFn();
+        if (Array.isArray(result)) {
+          const fragment = document.createElement("div");
+          fragment.style.display = "contents";
+          for (const el of result) fragment.appendChild(el);
+          return fragment;
+        }
+        return result;
+      }
+      return fallback ? fallback() : null;
+    },
+    hasSlot(name) {
+      return name in slots;
+    }
+  };
+}
+
+// src/patterns/componentProps.ts
+function defineComponent(config) {
+  const { defaults, setup } = config;
+  return (props) => {
+    const merged = defaults ? { ...defaults, ...props } : props;
+    return setup(merged);
+  };
+}
+function defineSlottedComponent(config) {
+  const { defaults, setup } = config;
+  return (props) => {
+    const merged = defaults ? { ...defaults, ...props } : props;
+    return setup(merged);
+  };
+}
+function withProps(component, mapProps) {
+  return (props) => component(mapProps(props));
+}
+
+// src/patterns/contracts.ts
+var validators = {
+  string: ((value, name) => typeof value === "string" || `${name} must be a string, got ${typeof value}`),
+  number: ((value, name) => typeof value === "number" || `${name} must be a number, got ${typeof value}`),
+  boolean: ((value, name) => typeof value === "boolean" || `${name} must be a boolean, got ${typeof value}`),
+  function: ((value, name) => typeof value === "function" || `${name} must be a function, got ${typeof value}`),
+  object: ((value, name) => typeof value === "object" && value !== null || `${name} must be an object`),
+  array: ((value, name) => Array.isArray(value) || `${name} must be an array`),
+  required: ((value, name) => value != null || `${name} is required`),
+  oneOf: (...values) => (value, name) => values.includes(value) || `${name} must be one of: ${values.join(", ")}`,
+  instanceOf: (ctor) => (value, name) => value instanceof ctor || `${name} must be an instance of ${ctor.name}`,
+  arrayOf: (itemValidator) => (value, name) => {
+    if (!Array.isArray(value)) return `${name} must be an array`;
+    for (let i = 0; i < value.length; i++) {
+      const result = itemValidator(value[i], `${name}[${i}]`);
+      if (result !== true) return result;
+    }
+    return true;
+  },
+  shape: (schema) => (value, name) => {
+    if (typeof value !== "object" || value === null) return `${name} must be an object`;
+    for (const [key, validator] of Object.entries(schema)) {
+      const result = validator(value[key], `${name}.${key}`);
+      if (result !== true) return result;
+    }
+    return true;
+  },
+  optional: (validator) => (value, name) => {
+    if (value == null) return true;
+    return validator(value, name);
+  },
+  range: (min, max) => (value, name) => {
+    if (typeof value !== "number") return `${name} must be a number`;
+    return value >= min && value <= max || `${name} must be between ${min} and ${max}`;
+  },
+  pattern: (regex) => (value, name) => {
+    if (typeof value !== "string") return `${name} must be a string`;
+    return regex.test(value) || `${name} must match pattern ${regex}`;
+  }
+};
+function validateProps(props, schema) {
+  const result = { ...props };
+  const errors = [];
+  const isDev = typeof process === "undefined" || process?.env?.NODE_ENV !== "production";
+  for (const [key, def] of Object.entries(schema)) {
+    const propDef = typeof def === "function" ? { type: def } : def;
+    if (result[key] == null && propDef.default !== void 0) {
+      result[key] = typeof propDef.default === "function" ? propDef.default() : propDef.default;
+    }
+    if (!isDev) continue;
+    if (propDef.required && result[key] == null) {
+      errors.push(`Prop '${key}' is required`);
+      continue;
+    }
+    if (result[key] == null) continue;
+    if (propDef.type) {
+      const typeResult = propDef.type(result[key], key);
+      if (typeResult !== true) errors.push(typeResult);
+    }
+    if (propDef.validator) {
+      const validResult = propDef.validator(result[key], key);
+      if (validResult !== true) errors.push(validResult);
+    }
+  }
+  if (errors.length > 0 && isDev) {
+    console.warn(`[SibuJS] Prop validation errors:
+${errors.map((e) => `  - ${e}`).join("\n")}`);
+  }
+  return result;
+}
+function defineStrictComponent(config) {
+  return (props) => {
+    const validated = validateProps(props, config.props);
+    return config.setup(validated);
+  };
+}
+function assertType(value, validator, label) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  const result = validator(value, label || "value");
+  if (result !== true) {
+    throw new TypeError(`[SibuJS Contract] ${result}`);
+  }
+}
+function createGuard(validator) {
+  return (value) => {
+    return validator(value, "value") === true;
+  };
+}
+
+export {
+  withWrapper,
+  withDefaults,
+  compose,
+  RenderProp,
+  withBoundary,
+  createSlots,
+  defineComponent,
+  defineSlottedComponent,
+  withProps,
+  validators,
+  validateProps,
+  defineStrictComponent,
+  assertType,
+  createGuard
+};