@epoch32/visage 0.0.0-stage → 0.0.0

package/dist/src/template/index.js

@@ -0,0 +1,1149 @@
+// src/signals/types.ts
+var SubscriberState;
+((SubscriberState) => {
+  SubscriberState[SubscriberState["CLEAN"] = 0] = "CLEAN";
+  SubscriberState[SubscriberState["CHECK_DIRTY"] = 1] = "CHECK_DIRTY";
+  SubscriberState[SubscriberState["DIRTY"] = 2] = "DIRTY";
+  SubscriberState[SubscriberState["DISPOSED"] = 3] = "DISPOSED";
+})(SubscriberState ||= {});
+var SIGNAL_BRAND = Symbol("visage.signal");
+var COMPUTED_BRAND = Symbol("visage.computed");
+function isSignal(value) {
+  return typeof value === "function" && ((SIGNAL_BRAND in value) || (COMPUTED_BRAND in value));
+}
+
+// src/signals/system.ts
+var currentSubscriber = null;
+var currentScope = null;
+var batchDepth = 0;
+var pendingEffects = new Set;
+var warnedCyclicSubscribers = new WeakSet;
+var isFlushing = false;
+function setCurrentSubscriber(sub) {
+  currentSubscriber = sub;
+}
+function setCurrentScope(scope) {
+  currentScope = scope;
+}
+function getCurrentScope() {
+  return currentScope;
+}
+function addPendingEffect(eff) {
+  pendingEffects.add(eff);
+}
+function removePendingEffect(eff) {
+  pendingEffects.delete(eff);
+}
+var MAX_FLUSH_COUNT = 100;
+function flushEffects() {
+  if (isFlushing || batchDepth > 0)
+    return;
+  isFlushing = true;
+  let iterations = 0;
+  try {
+    while (pendingEffects.size > 0) {
+      if (++iterations > MAX_FLUSH_COUNT) {
+        pendingEffects.clear();
+        throw new Error(`[Visage Reactivity] Maximum update depth exceeded (${MAX_FLUSH_COUNT} cycles). ` + `An effect continuously triggered state mutations (infinite loop detected). ` + `Ensure effects that modify signals do not unconditionally depend on them, or use untrack() to read state.`);
+      }
+      const effectsToRun = Array.from(pendingEffects);
+      pendingEffects.clear();
+      for (const eff of effectsToRun) {
+        if (eff.state === 2 /* DIRTY */ || eff.state === 1 /* CHECK_DIRTY */) {
+          eff.run();
+        }
+      }
+    }
+  } finally {
+    isFlushing = false;
+  }
+}
+function batch(fn) {
+  batchDepth++;
+  try {
+    return fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      flushEffects();
+    }
+  }
+}
+function untrack(fn) {
+  const prev = currentSubscriber;
+  currentSubscriber = null;
+  try {
+    return fn();
+  } finally {
+    currentSubscriber = prev;
+  }
+}
+
+// src/signals/computed.ts
+class Computed {
+  [COMPUTED_BRAND] = true;
+  _fn;
+  _value;
+  _subscribers = new Set;
+  sources = new Set;
+  sourceVersions = new Map;
+  state = 2 /* DIRTY */;
+  scope;
+  version = 0;
+  constructor(fn) {
+    this._fn = fn;
+    this.scope = currentScope;
+    if (currentScope) {
+      currentScope.addSubscriber(this);
+    }
+  }
+  get() {
+    if (this.state === 3 /* DISPOSED */) {
+      return this._fn();
+    }
+    if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
+      this._subscribers.add(currentSubscriber);
+      currentSubscriber.sources.add(this);
+      currentSubscriber.sourceVersions.set(this, this.version);
+    }
+    if (this.state === 2 /* DIRTY */ || this.state === 1 /* CHECK_DIRTY */) {
+      this.updateIfNecessary();
+    }
+    return this._value;
+  }
+  get value() {
+    return this.get();
+  }
+  removeSubscriber(sub) {
+    this._subscribers.delete(sub);
+  }
+  markDirty(targetState = 1 /* CHECK_DIRTY */) {
+    if (this.state >= targetState || this.state === 3 /* DISPOSED */) {
+      return;
+    }
+    this.state = targetState;
+    for (const sub of this._subscribers) {
+      sub.markDirty(1 /* CHECK_DIRTY */);
+    }
+  }
+  updateIfNecessary() {
+    if (this.state === 2 /* DIRTY */) {
+      const prev = this._value;
+      this.recompute();
+      return !Object.is(prev, this._value);
+    }
+    if (this.state === 1 /* CHECK_DIRTY */) {
+      let anyChanged = false;
+      for (const source of this.sources) {
+        if (source instanceof Computed) {
+          source.updateIfNecessary();
+        }
+        const lastVersion = this.sourceVersions.get(source);
+        if (lastVersion !== undefined && lastVersion !== source.version) {
+          anyChanged = true;
+        }
+      }
+      if (anyChanged) {
+        const prev = this._value;
+        this.recompute();
+        return !Object.is(prev, this._value);
+      }
+      this.state = 0 /* CLEAN */;
+      return false;
+    }
+    return false;
+  }
+  recompute() {
+    this.cleanupSources();
+    const prevSubscriber = currentSubscriber;
+    setCurrentSubscriber(this);
+    const prevScope = currentScope;
+    setCurrentScope(this.scope);
+    try {
+      const next = this._fn();
+      if (!Object.is(this._value, next)) {
+        this._value = next;
+        this.version++;
+      }
+      this.state = 0 /* CLEAN */;
+    } finally {
+      setCurrentSubscriber(prevSubscriber);
+      setCurrentScope(prevScope);
+    }
+  }
+  cleanupSources() {
+    for (const source of this.sources) {
+      source.removeSubscriber(this);
+    }
+    this.sources.clear();
+    this.sourceVersions.clear();
+  }
+  dispose() {
+    if (this.state === 3 /* DISPOSED */)
+      return;
+    this.state = 3 /* DISPOSED */;
+    this.cleanupSources();
+    this._subscribers.clear();
+  }
+}
+function computed(fn, options) {
+  const isInternal = options?.internal ?? false;
+  const customName = options?.name;
+  const c = new Computed(fn);
+  const accessor = () => c.get();
+  Object.defineProperties(accessor, {
+    [COMPUTED_BRAND]: { value: true },
+    get: { value: () => c.get() },
+    value: { get: () => c.get() }
+  });
+  if (!isInternal && typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
+    const devtools = window.__VISAGE_DEVTOOLS__;
+    const sigId = devtools.registerSignal({
+      name: customName,
+      type: "computed",
+      getValue: () => c.get(),
+      version: () => c.version,
+      subscribersCount: () => c._subscribers?.size ?? 0,
+      dependencies: () => Array.from(c.sources ?? []).map((src) => src._devId).filter(Boolean),
+      dependents: () => Array.from(c._subscribers ?? []).map((sub) => sub._devId).filter(Boolean)
+    });
+    c._devId = sigId;
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        devtools.unregisterSignal(sigId);
+      });
+    }
+  }
+  return accessor;
+}
+var createMemo = computed;
+// src/signals/scope.ts
+class Scope {
+  subscribers = new Set;
+  cleanups = [];
+  parent = null;
+  isDisposed = false;
+  context;
+  constructor(parent = currentScope) {
+    this.parent = parent;
+    if (parent && !parent.isDisposed) {
+      parent.cleanups.push(() => this.dispose());
+      if (parent.context) {
+        this.context = new Map(parent.context);
+      }
+    }
+  }
+  addSubscriber(sub) {
+    if (this.isDisposed)
+      return;
+    this.subscribers.add(sub);
+  }
+  addCleanup(fn) {
+    if (this.isDisposed) {
+      fn();
+      return;
+    }
+    this.cleanups.push(fn);
+  }
+  dispose() {
+    if (this.isDisposed)
+      return;
+    this.isDisposed = true;
+    for (const sub of this.subscribers) {
+      sub.dispose();
+    }
+    this.subscribers.clear();
+    for (let i = this.cleanups.length - 1;i >= 0; i--) {
+      try {
+        this.cleanups[i]();
+      } catch (err) {
+        console.error("Error during cleanup:", err);
+      }
+    }
+    this.cleanups = [];
+  }
+}
+function onCleanup(fn) {
+  if (currentSubscriber && "addCleanup" in currentSubscriber) {
+    currentSubscriber.addCleanup(fn);
+  } else if (currentScope) {
+    currentScope.addCleanup(fn);
+  }
+}
+function createRoot(fn) {
+  const prevScope = currentScope;
+  const scope = new Scope(null);
+  setCurrentScope(scope);
+  try {
+    return fn(() => scope.dispose());
+  } finally {
+    setCurrentScope(prevScope);
+  }
+}
+function runInScope(scope, fn) {
+  const prevScope = currentScope;
+  setCurrentScope(scope);
+  try {
+    return fn();
+  } finally {
+    setCurrentScope(prevScope);
+  }
+}
+function getActiveScope() {
+  return getCurrentScope();
+}
+
+// src/signals/context.ts
+function createContext(defaultValue) {
+  const id = Symbol("visage.context");
+  const context = {
+    id,
+    defaultValue,
+    Provider: (props) => {
+      const parentScope = getActiveScope();
+      const scope = new Scope(parentScope);
+      if (!scope.context) {
+        scope.context = new Map(parentScope?.context);
+      }
+      scope.context.set(id, props.value);
+      return runInScope(scope, () => {
+        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
+        if (typeof document !== "undefined") {
+          const frag = document.createDocumentFragment();
+          insertChild(frag, content);
+          return frag;
+        }
+        return content;
+      });
+    }
+  };
+  return context;
+}
+function useContext(context) {
+  let scope = getActiveScope();
+  while (scope) {
+    if (scope.context?.has(context.id)) {
+      return scope.context.get(context.id);
+    }
+    scope = scope.parent;
+  }
+  return context.defaultValue;
+}
+// src/signals/effect.ts
+class Effect {
+  _fn;
+  sources = new Set;
+  sourceVersions = new Map;
+  cleanups = [];
+  state = 2 /* DIRTY */;
+  scope;
+  constructor(fn) {
+    this._fn = fn;
+    this.scope = currentScope;
+    if (currentScope) {
+      currentScope.addSubscriber(this);
+    }
+    this.run();
+  }
+  addCleanup(fn) {
+    this.cleanups.push(fn);
+  }
+  runCleanups() {
+    for (let i = this.cleanups.length - 1;i >= 0; i--) {
+      try {
+        this.cleanups[i]();
+      } catch (e) {
+        console.error("Error in effect cleanup:", e);
+      }
+    }
+    this.cleanups = [];
+  }
+  markDirty(targetState = 2 /* DIRTY */) {
+    if (this.state >= targetState || this.state === 3 /* DISPOSED */) {
+      return;
+    }
+    this.state = targetState;
+    addPendingEffect(this);
+    if (batchDepth === 0) {
+      flushEffects();
+    }
+  }
+  run() {
+    if (this.state === 3 /* DISPOSED */)
+      return;
+    if (this.state === 1 /* CHECK_DIRTY */) {
+      let isDirty = false;
+      for (const source of this.sources) {
+        if (source instanceof Computed) {
+          source.updateIfNecessary();
+        }
+        const lastVersion = this.sourceVersions.get(source);
+        if (lastVersion !== undefined && lastVersion !== source.version) {
+          isDirty = true;
+        }
+      }
+      if (!isDirty) {
+        this.state = 0 /* CLEAN */;
+        return;
+      }
+    }
+    this.runCleanups();
+    this.cleanupSources();
+    const prevSubscriber = currentSubscriber;
+    setCurrentSubscriber(this);
+    const prevScope = currentScope;
+    setCurrentScope(this.scope);
+    try {
+      this.state = 0 /* CLEAN */;
+      const res = this._fn();
+      if (typeof res === "function") {
+        this.cleanups.push(res);
+      }
+    } finally {
+      setCurrentSubscriber(prevSubscriber);
+      setCurrentScope(prevScope);
+    }
+  }
+  cleanupSources() {
+    for (const source of this.sources) {
+      source.removeSubscriber(this);
+    }
+    this.sources.clear();
+    this.sourceVersions.clear();
+  }
+  dispose() {
+    if (this.state === 3 /* DISPOSED */)
+      return;
+    this.state = 3 /* DISPOSED */;
+    this.runCleanups();
+    this.cleanupSources();
+    removePendingEffect(this);
+  }
+}
+function effect(fn) {
+  const eff = new Effect(fn);
+  return () => eff.dispose();
+}
+var createEffect = effect;
+// src/signals/signal.ts
+class Signal {
+  [SIGNAL_BRAND] = true;
+  _value;
+  _subscribers = new Set;
+  _equals;
+  version = 0;
+  constructor(initialValue, equals) {
+    this._value = initialValue;
+    this._equals = equals ?? Object.is;
+  }
+  get() {
+    if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
+      this._subscribers.add(currentSubscriber);
+      currentSubscriber.sources.add(this);
+      currentSubscriber.sourceVersions.set(this, this.version);
+    }
+    return this._value;
+  }
+  set(newValue) {
+    if (this._equals(this._value, newValue)) {
+      return;
+    }
+    if (currentSubscriber !== null && this._subscribers.has(currentSubscriber)) {
+      if (!warnedCyclicSubscribers.has(currentSubscriber)) {
+        warnedCyclicSubscribers.add(currentSubscriber);
+        if (typeof console !== "undefined" && typeof console.warn === "function") {
+          console.warn(`[Visage Reactivity] Cyclic update detected: An active subscriber modified a signal that it depends on. ` + `To read a signal inside an effect/computed without creating a circular dependency, wrap the read in untrack():
+` + `  untrack(() => signal())`);
+        }
+      }
+    }
+    this._value = newValue;
+    this.version++;
+    batch(() => {
+      this.notify();
+    });
+  }
+  update(fn) {
+    this.set(fn(this._value));
+  }
+  get value() {
+    return this.get();
+  }
+  set value(val) {
+    this.set(val);
+  }
+  removeSubscriber(sub) {
+    this._subscribers.delete(sub);
+  }
+  notify() {
+    if (this._subscribers.size === 0)
+      return;
+    const subs = Array.from(this._subscribers);
+    for (const sub of subs) {
+      sub.markDirty(2 /* DIRTY */);
+    }
+  }
+}
+function signal(initialValue, optionsOrEquals) {
+  const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
+  const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
+  const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
+  const s = new Signal(initialValue, equals);
+  const accessor = (...args) => {
+    if (args.length === 0) {
+      return s.get();
+    }
+    s.set(args[0]);
+    return args[0];
+  };
+  Object.defineProperties(accessor, {
+    [SIGNAL_BRAND]: { value: true },
+    get: { value: () => s.get() },
+    set: { value: (v) => s.set(v) },
+    update: { value: (fn) => s.update(fn) },
+    value: {
+      get: () => s.get(),
+      set: (v) => s.set(v)
+    }
+  });
+  if (!isInternal && typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
+    const devtools = window.__VISAGE_DEVTOOLS__;
+    const sigId = devtools.registerSignal({
+      name: customName,
+      type: "signal",
+      getValue: () => s.get(),
+      version: () => s.version,
+      subscribersCount: () => s._subscribers?.size ?? 0,
+      dependents: () => Array.from(s._subscribers ?? []).map((sub) => sub._devId).filter(Boolean)
+    });
+    s._devId = sigId;
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        devtools.unregisterSignal(sigId);
+      });
+    }
+  }
+  return accessor;
+}
+function createSignal(initialValue, optionsOrEquals) {
+  const s = signal(initialValue, optionsOrEquals);
+  const setter = (value) => {
+    if (typeof value === "function") {
+      s.update(value);
+    } else {
+      s.set(value);
+    }
+  };
+  return [s, setter];
+}
+// src/signals/store.ts
+var STORE_RAW = Symbol("visage.store.raw");
+var STORE_SIGNALS = Symbol("visage.store.signals");
+var STORE_PROXY = Symbol("visage.store.proxy");
+function isObject(val) {
+  return typeof val === "object" && val !== null && (typeof Node === "undefined" || !(val instanceof Node)) && !isSignal(val);
+}
+function getOrCreatePropertySignal(target, prop) {
+  let signalsMap = target[STORE_SIGNALS];
+  if (!signalsMap) {
+    signalsMap = new Map;
+    Object.defineProperty(target, STORE_SIGNALS, {
+      value: signalsMap,
+      enumerable: false,
+      writable: true
+    });
+  }
+  let sig = signalsMap.get(prop);
+  if (!sig) {
+    sig = new Signal(target[prop]);
+    signalsMap.set(prop, sig);
+  }
+  return sig;
+}
+function createStoreProxy(target) {
+  if (!isObject(target))
+    return target;
+  if (target[STORE_PROXY])
+    return target[STORE_PROXY];
+  const proxy = new Proxy(target, {
+    get(target, prop, receiver) {
+      if (prop === STORE_RAW)
+        return target;
+      if (prop === STORE_PROXY)
+        return proxy;
+      if (typeof prop === "string" || typeof prop === "symbol") {
+        const sig = getOrCreatePropertySignal(target, prop);
+        sig.get();
+      }
+      const value = Reflect.get(target, prop, receiver);
+      if (isObject(value)) {
+        return createStoreProxy(value);
+      }
+      return value;
+    },
+    set(target, prop, value, receiver) {
+      const prevValue = Reflect.get(target, prop, receiver);
+      if (Object.is(prevValue, value)) {
+        return true;
+      }
+      const success = Reflect.set(target, prop, value, receiver);
+      if (success) {
+        const sig = getOrCreatePropertySignal(target, prop);
+        sig.set(value);
+        if (Array.isArray(target) && prop !== "length") {
+          const lenSig = getOrCreatePropertySignal(target, "length");
+          lenSig.set(target.length);
+        }
+      }
+      return success;
+    },
+    deleteProperty(target, prop) {
+      const hadProp = Reflect.has(target, prop);
+      const success = Reflect.deleteProperty(target, prop);
+      if (hadProp && success) {
+        const sig = getOrCreatePropertySignal(target, prop);
+        sig.set(undefined);
+      }
+      return success;
+    }
+  });
+  Object.defineProperty(target, STORE_PROXY, {
+    value: proxy,
+    enumerable: false,
+    writable: true
+  });
+  return proxy;
+}
+function createStore(initialState) {
+  if (!isObject(initialState)) {
+    throw new Error("createStore requires an object or array as initial state");
+  }
+  return createStoreProxy(initialState);
+}
+function mutateStore(store, mutator) {
+  batch(() => {
+    mutator(store);
+  });
+}
+function unwrapStore(store) {
+  if (isObject(store) && store[STORE_RAW]) {
+    return store[STORE_RAW];
+  }
+  return store;
+}
+// src/style/cx.ts
+function hasReactiveClass(val) {
+  if (typeof val === "function")
+    return true;
+  if (Array.isArray(val)) {
+    for (let i = 0;i < val.length; i++) {
+      if (hasReactiveClass(val[i]))
+        return true;
+    }
+    return false;
+  }
+  if (typeof val === "object" && val !== null) {
+    for (const k in val) {
+      if (typeof val[k] === "function")
+        return true;
+    }
+  }
+  return false;
+}
+function normalizeClass(val) {
+  if (!val)
+    return "";
+  if (typeof val === "function")
+    return normalizeClass(val());
+  if (typeof val === "string")
+    return val.trim();
+  if (typeof val === "number")
+    return String(val);
+  if (Array.isArray(val)) {
+    let res = "";
+    for (let i = 0;i < val.length; i++) {
+      const item = typeof val[i] === "function" ? val[i]() : val[i];
+      const itemStr = normalizeClass(item);
+      if (itemStr) {
+        res = res ? `${res} ${itemStr}` : itemStr;
+      }
+    }
+    return res;
+  }
+  if (typeof val === "object") {
+    let res = "";
+    for (const key in val) {
+      const condition = typeof val[key] === "function" ? val[key]() : val[key];
+      if (condition) {
+        res = res ? `${res} ${key}` : key;
+      }
+    }
+    return res;
+  }
+  return "";
+}
+function cx(...args) {
+  return normalizeClass(args);
+}
+
+// src/style/scale.ts
+var UNITLESS_PROPERTIES = new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageSlice",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexOrder",
+  "fontWeight",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "strokeOpacity"
+]);
+var DIMENSION_KEYWORDS = {
+  screen: "100dvh",
+  "screen-h": "100dvh",
+  "screen-w": "100dvw",
+  full: "100%",
+  half: "50%",
+  third: "33.333333%",
+  "two-thirds": "66.666667%",
+  quarter: "25%",
+  "three-quarters": "75%",
+  auto: "auto",
+  min: "min-content",
+  max: "max-content",
+  fit: "fit-content"
+};
+function space(val) {
+  if (val === undefined || val === null || val === "")
+    return "";
+  if (typeof val === "number") {
+    if (val === 0)
+      return "0px";
+    return `${val * 4}px`;
+  }
+  const str = String(val).trim();
+  if (str in DIMENSION_KEYWORDS) {
+    return DIMENSION_KEYWORDS[str];
+  }
+  return str;
+}
+function resolveDimension(val) {
+  if (val === undefined || val === null || val === "")
+    return "";
+  if (typeof val === "number") {
+    if (val === 0)
+      return "0px";
+    if (val > 48)
+      return `${val}px`;
+    return `${val * 4}px`;
+  }
+  const str = String(val).trim();
+  if (str in DIMENSION_KEYWORDS) {
+    return DIMENSION_KEYWORDS[str];
+  }
+  return str;
+}
+function px(val) {
+  return `${val}px`;
+}
+function rem(val) {
+  return `${val}rem`;
+}
+function em(val) {
+  return `${val}em`;
+}
+function fluid(minPx, maxPx, options) {
+  const minVw = options?.minVw ?? 375;
+  const maxVw = options?.maxVw ?? 1280;
+  const slope = (maxPx - minPx) / (maxVw - minVw);
+  const yIntercept = -minVw * slope + minPx;
+  const slopeVw = slope * 100;
+  const preferred = `${yIntercept.toFixed(2)}px + ${slopeVw.toFixed(2)}vw`;
+  const min = Math.min(minPx, maxPx);
+  const max = Math.max(minPx, maxPx);
+  return `clamp(${min}px, ${preferred}, ${max}px)`;
+}
+var SHADOW_PRESETS = {
+  none: "none",
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  soft: "0 8px 30px rgba(0, 0, 0, 0.06)",
+  glow: "0 0 24px rgba(168, 85, 247, 0.35)",
+  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
+};
+function shadow(variant) {
+  if (variant in SHADOW_PRESETS) {
+    return SHADOW_PRESETS[variant];
+  }
+  return variant;
+}
+var RADIUS_PRESETS = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "20px",
+  "3xl": "24px",
+  full: "9999px"
+};
+function radius(variant) {
+  if (typeof variant === "number") {
+    return `${variant}px`;
+  }
+  if (variant in RADIUS_PRESETS) {
+    return RADIUS_PRESETS[variant];
+  }
+  return String(variant);
+}
+function glass(options = {}) {
+  const blurVal = typeof options.blur === "number" ? `${options.blur}px` : options.blur ?? "20px";
+  const tintVal = options.tint ?? "rgba(255, 255, 255, 0.65)";
+  const borderVal = options.border ?? "1px solid rgba(255, 255, 255, 0.75)";
+  return {
+    backdropFilter: `blur(${blurVal})`,
+    WebkitBackdropFilter: `blur(${blurVal})`,
+    backgroundColor: tintVal,
+    border: borderVal
+  };
+}
+function formatStyleProp(prop, val) {
+  if (val === null || val === undefined || val === "")
+    return "";
+  if (typeof val === "number") {
+    if (val === 0 || UNITLESS_PROPERTIES.has(prop)) {
+      return String(val);
+    }
+    return `${val}px`;
+  }
+  const str = String(val).trim();
+  if (str in DIMENSION_KEYWORDS) {
+    const lowerProp = prop.toLowerCase();
+    if (str === "screen") {
+      if (lowerProp.includes("width"))
+        return "100dvw";
+      return "100dvh";
+    }
+    return DIMENSION_KEYWORDS[str];
+  }
+  return str;
+}
+
+// src/dom/render.ts
+function isReactive(value) {
+  return isSignal(value) || typeof value === "function";
+}
+function resolveValue(val) {
+  if (typeof val === "function") {
+    return val();
+  }
+  return val;
+}
+function render(fn, container) {
+  return createRoot((dispose) => {
+    container.textContent = "";
+    const node = insertChild(container, fn());
+    onCleanup(() => {
+      if (node && node instanceof Node && node.parentNode === container) {
+        container.removeChild(node);
+      }
+    });
+    return dispose;
+  });
+}
+function setAttribute(el, key, value) {
+  if (key.startsWith("on") && typeof value === "function") {
+    const eventName = key.startsWith("onCapture") ? key.slice(9).toLowerCase() : key.slice(2).toLowerCase();
+    const useCapture = key.startsWith("onCapture");
+    el.addEventListener(eventName, value, useCapture);
+    onCleanup(() => {
+      el.removeEventListener(eventName, value, useCapture);
+    });
+    return;
+  }
+  if (key === "ref" && typeof value === "function") {
+    value(el);
+    return;
+  }
+  if (key === "class" || key === "className") {
+    if (hasReactiveClass(value)) {
+      effect(() => {
+        const cls = normalizeClass(value);
+        if (cls)
+          el.setAttribute("class", cls);
+        else
+          el.removeAttribute("class");
+      });
+    } else {
+      const cls = normalizeClass(value);
+      if (cls)
+        el.setAttribute("class", cls);
+      else
+        el.removeAttribute("class");
+    }
+    return;
+  }
+  if (isReactive(value)) {
+    effect(() => {
+      const resolved = resolveValue(value);
+      applyProp(el, key, resolved);
+    });
+  } else {
+    applyProp(el, key, value);
+  }
+}
+function setStyleProperty(el, prop, val) {
+  const formatted = formatStyleProp(prop, val);
+  if (prop.startsWith("--") || prop.includes("-")) {
+    if (formatted === "") {
+      el.style.removeProperty(prop);
+    } else {
+      el.style.setProperty(prop, formatted);
+    }
+  } else {
+    el.style[prop] = formatted;
+  }
+}
+function applyProp(el, key, value) {
+  if (value === null || value === undefined || value === false && !key.startsWith("aria-") && !key.startsWith("data-")) {
+    if (key === "className" || key === "class") {
+      el.removeAttribute("class");
+    } else if (key === "style" && typeof value === "string") {
+      el.removeAttribute("style");
+    } else if (key in el && !(el instanceof SVGElement)) {
+      try {
+        el[key] = typeof el[key] === "boolean" ? false : "";
+      } catch {
+        el.removeAttribute(key);
+      }
+    } else {
+      el.removeAttribute(key);
+    }
+    return;
+  }
+  if (key === "className" || key === "class") {
+    const cls = normalizeClass(value);
+    if (cls) {
+      el.setAttribute("class", cls);
+    } else {
+      el.removeAttribute("class");
+    }
+  } else if (key === "style") {
+    if (typeof value === "string") {
+      el.setAttribute("style", value);
+    } else if (typeof value === "object" && value !== null) {
+      for (const styleKey in value) {
+        const styleVal = value[styleKey];
+        if (isReactive(styleVal)) {
+          effect(() => {
+            setStyleProperty(el, styleKey, resolveValue(styleVal));
+          });
+        } else {
+          setStyleProperty(el, styleKey, styleVal);
+        }
+      }
+    }
+  } else if (key === "dangerouslySetInnerHTML" && value && typeof value.__html === "string") {
+    el.innerHTML = value.__html;
+  } else if (key in el && !(el instanceof SVGElement) && key !== "list" && key !== "form") {
+    try {
+      el[key] = value;
+    } catch {
+      el.setAttribute(key, String(value));
+    }
+  } else {
+    if (key.startsWith("aria-") || key.startsWith("data-")) {
+      el.setAttribute(key, String(value));
+    } else if (value === true) {
+      el.setAttribute(key, "");
+    } else {
+      el.setAttribute(key, String(value));
+    }
+  }
+}
+function insertChild(parent, child, before = null) {
+  if (child === null || child === undefined || child === false || child === true) {
+    return null;
+  }
+  if (child instanceof Node) {
+    parent.insertBefore(child, before);
+    return child;
+  }
+  if (Array.isArray(child)) {
+    const fragment = document.createDocumentFragment();
+    for (const item of child) {
+      insertChild(fragment, item);
+    }
+    parent.insertBefore(fragment, before);
+    return fragment;
+  }
+  if (isReactive(child)) {
+    const marker = document.createTextNode("");
+    parent.insertBefore(marker, before);
+    let childScope = null;
+    let currentNodes = [];
+    effect(() => {
+      const resolved = resolveValue(child);
+      if ((typeof resolved === "string" || typeof resolved === "number") && currentNodes.length === 1 && currentNodes[0].nodeType === Node.TEXT_NODE) {
+        currentNodes[0].data = String(resolved);
+        return;
+      }
+      if (childScope) {
+        childScope.dispose();
+      }
+      childScope = new Scope(getActiveScope());
+      runInScope(childScope, () => {
+        for (const node of currentNodes) {
+          if (node.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+        }
+        currentNodes = [];
+        if (resolved === null || resolved === undefined || resolved === false) {
+          return;
+        }
+        const frag = document.createDocumentFragment();
+        if (typeof resolved === "string" || typeof resolved === "number" || typeof resolved === "boolean") {
+          frag.appendChild(document.createTextNode(String(resolved)));
+        } else {
+          insertChild(frag, resolved);
+        }
+        currentNodes = Array.from(frag.childNodes);
+        if (marker.parentNode) {
+          marker.parentNode.insertBefore(frag, marker);
+        }
+      });
+    });
+    onCleanup(() => {
+      if (childScope) {
+        childScope.dispose();
+      }
+      for (const node of currentNodes) {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+      if (marker.parentNode) {
+        marker.parentNode.removeChild(marker);
+      }
+    });
+    return marker;
+  }
+  const textNode = document.createTextNode(String(child));
+  parent.insertBefore(textNode, before);
+  return textNode;
+}
+
+// src/template/template.ts
+var templateCache = new Map;
+function template(htmlString) {
+  let templateEl = templateCache.get(htmlString);
+  if (!templateEl && typeof document !== "undefined") {
+    templateEl = document.createElement("template");
+    templateEl.innerHTML = htmlString.trim();
+    templateCache.set(htmlString, templateEl);
+  }
+  return () => {
+    if (!templateEl) {
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = htmlString.trim();
+      return wrapper.firstElementChild;
+    }
+    return templateEl.content.firstElementChild.cloneNode(true);
+  };
+}
+function html(strings, ...values) {
+  const MARKER_PREFIX = "visage-bind-";
+  let htmlString = "";
+  const bindings = [];
+  for (let i = 0;i < strings.length; i++) {
+    htmlString += strings[i];
+    if (i < values.length) {
+      const val = values[i];
+      const markerId = `${MARKER_PREFIX}${i}`;
+      const lastOpeningTag = htmlString.lastIndexOf("<");
+      const lastClosingTag = htmlString.lastIndexOf(">");
+      if (lastOpeningTag > lastClosingTag) {
+        const match = htmlString.match(/([a-zA-Z0-9_-]+)=["']?$/);
+        if (match?.[1]) {
+          const attrName = match[1];
+          bindings.push({ id: markerId, value: val, isAttr: true, attrName });
+          htmlString += `${markerId}`;
+        } else {
+          bindings.push({ id: markerId, value: val, isAttr: true });
+          htmlString += `data-visage-prop-${i}="${markerId}"`;
+        }
+      } else {
+        bindings.push({ id: markerId, value: val, isAttr: false });
+        htmlString += `<!--${markerId}-->`;
+      }
+    }
+  }
+  const clone = template(htmlString);
+  const root = clone();
+  for (const bind of bindings) {
+    if (bind.isAttr && bind.attrName) {
+      const targetEl = findElementWithAttributeValue(root, bind.attrName, bind.id);
+      if (targetEl) {
+        targetEl.removeAttribute(bind.attrName);
+        setAttribute(targetEl, bind.attrName, bind.value);
+      }
+    } else if (!bind.isAttr) {
+      const commentNode = findCommentNode(root, bind.id);
+      if (commentNode?.parentNode) {
+        insertChild(commentNode.parentNode, bind.value, commentNode);
+        commentNode.parentNode.removeChild(commentNode);
+      }
+    }
+  }
+  return root;
+}
+function findElementWithAttributeValue(root, attrName, value) {
+  if (root.getAttribute(attrName) === value) {
+    return root;
+  }
+  return root.querySelector(`[${attrName}="${value}"]`);
+}
+function findCommentNode(root, text) {
+  const iterator = typeof document !== "undefined" && document.createNodeIterator ? document.createNodeIterator(root, 128) : null;
+  if (iterator) {
+    let node = iterator.nextNode();
+    while (node) {
+      if (node.nodeValue === text) {
+        return node;
+      }
+      node = iterator.nextNode();
+    }
+    return null;
+  }
+  const traverse = (node) => {
+    for (const child of node.childNodes || []) {
+      if (child.nodeType === 8 && child.data === text) {
+        return child;
+      }
+      const res = traverse(child);
+      if (res)
+        return res;
+    }
+    return null;
+  };
+  return traverse(root);
+}
+export {
+  html,
+  template
+};