@epoch32/visage 0.0.0-stage → 0.0.0

package/dist/src/ui/index.js

@@ -0,0 +1,4155 @@
+// 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/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/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/dom/control-flow.ts
+function Show(props) {
+  if (typeof document === "undefined") {
+    const condition = resolveValue(props.when);
+    if (condition) {
+      return typeof props.children === "function" && props.children.length > 0 ? props.children(() => resolveValue(props.when)) : typeof props.children === "function" ? props.children() : props.children;
+    }
+    return props.fallback ?? null;
+  }
+  const marker = document.createTextNode("");
+  const initialFrag = document.createDocumentFragment();
+  let currentScope = null;
+  let currentContent = [];
+  let isMounted = false;
+  effect(() => {
+    const condition = resolveValue(props.when);
+    if (currentScope) {
+      currentScope.dispose();
+      currentScope = null;
+    }
+    for (const node of currentContent) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    currentContent = [];
+    const frag = document.createDocumentFragment();
+    if (condition) {
+      currentScope = new Scope(getActiveScope());
+      untrack(() => {
+        runInScope(currentScope, () => {
+          const childRes = typeof props.children === "function" && props.children.length > 0 ? props.children(() => resolveValue(props.when)) : typeof props.children === "function" ? props.children() : props.children;
+          insertChild(frag, childRes);
+        });
+      });
+    } else if (props.fallback !== undefined) {
+      currentScope = new Scope(getActiveScope());
+      untrack(() => {
+        runInScope(currentScope, () => {
+          insertChild(frag, props.fallback);
+        });
+      });
+    }
+    currentContent = Array.from(frag.childNodes);
+    if (marker.parentNode) {
+      marker.parentNode.insertBefore(frag, marker);
+    } else if (!isMounted) {
+      initialFrag.appendChild(frag);
+    }
+  });
+  isMounted = true;
+  initialFrag.appendChild(marker);
+  onCleanup(() => {
+    if (currentScope) {
+      currentScope.dispose();
+    }
+  });
+  return initialFrag;
+}
+function For(props) {
+  if (typeof document === "undefined") {
+    const list = resolveValue(props.each) ?? [];
+    if (list.length === 0) {
+      return props.fallback ?? null;
+    }
+    return list.map((item, idx) => props.children(item, () => idx));
+  }
+  const marker = document.createTextNode("");
+  const initialFrag = document.createDocumentFragment();
+  let items = [];
+  let fallbackScope = null;
+  let fallbackNodes = [];
+  let isMounted = false;
+  effect(() => {
+    const list = resolveValue(props.each) ?? [];
+    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
+    if (list.length === 0) {
+      for (const rec of items) {
+        rec.scope.dispose();
+        for (const node of rec.nodes) {
+          if (node.parentNode)
+            node.parentNode.removeChild(node);
+        }
+      }
+      items = [];
+      if (props.fallback !== undefined && fallbackNodes.length === 0 && parent) {
+        fallbackScope = new Scope(getActiveScope());
+        untrack(() => {
+          runInScope(fallbackScope, () => {
+            const frag = document.createDocumentFragment();
+            insertChild(frag, props.fallback);
+            fallbackNodes = Array.from(frag.childNodes);
+            if (marker.parentNode) {
+              marker.parentNode.insertBefore(frag, marker);
+            } else if (!isMounted) {
+              initialFrag.appendChild(frag);
+            }
+          });
+        });
+      }
+      return;
+    }
+    if (fallbackNodes.length > 0) {
+      if (fallbackScope) {
+        fallbackScope.dispose();
+        fallbackScope = null;
+      }
+      for (const node of fallbackNodes) {
+        if (node.parentNode)
+          node.parentNode.removeChild(node);
+      }
+      fallbackNodes = [];
+    }
+    if (!parent)
+      return;
+    const newItems = [];
+    const prevMap = new Map;
+    for (const rec of items) {
+      prevMap.set(rec.item, rec);
+    }
+    for (let i = 0;i < list.length; i++) {
+      const item = list[i];
+      const existing = prevMap.get(item);
+      if (existing) {
+        existing.indexSignal(i);
+        newItems.push(existing);
+        prevMap.delete(item);
+      } else {
+        let indexVal = i;
+        const indexSubscribers = new Set;
+        const indexSignal = (...args) => {
+          if (args.length > 0 && args[0] !== undefined && args[0] !== indexVal) {
+            indexVal = args[0];
+            for (const sub of Array.from(indexSubscribers))
+              sub();
+          }
+          return indexVal;
+        };
+        const itemScope = new Scope(getActiveScope());
+        let itemNodes = [];
+        untrack(() => {
+          runInScope(itemScope, () => {
+            const frag = document.createDocumentFragment();
+            const child = props.children(item, indexSignal);
+            insertChild(frag, child);
+            itemNodes = Array.from(frag.childNodes);
+          });
+        });
+        newItems.push({
+          item,
+          scope: itemScope,
+          nodes: itemNodes,
+          indexSignal
+        });
+      }
+    }
+    for (const [, removed] of prevMap) {
+      removed.scope.dispose();
+      for (const node of removed.nodes) {
+        if (node.parentNode)
+          node.parentNode.removeChild(node);
+      }
+    }
+    if (marker.parentNode) {
+      let currentMarker = marker;
+      for (let i = newItems.length - 1;i >= 0; i--) {
+        const rec = newItems[i];
+        for (let j = rec.nodes.length - 1;j >= 0; j--) {
+          const node = rec.nodes[j];
+          if (node.nextSibling !== currentMarker) {
+            marker.parentNode.insertBefore(node, currentMarker);
+          }
+          currentMarker = node;
+        }
+      }
+    } else if (!isMounted) {
+      for (const rec of newItems) {
+        for (const node of rec.nodes) {
+          initialFrag.appendChild(node);
+        }
+      }
+    }
+    items = newItems;
+  });
+  isMounted = true;
+  initialFrag.appendChild(marker);
+  onCleanup(() => {
+    for (const rec of items) {
+      rec.scope.dispose();
+    }
+    if (fallbackScope) {
+      fallbackScope.dispose();
+    }
+  });
+  return initialFrag;
+}
+function Portal(props) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const marker = document.createTextNode("");
+  let currentScope = null;
+  let nodes = [];
+  effect(() => {
+    const target = props.mount ?? (typeof document !== "undefined" ? document.body : null);
+    if (!target)
+      return;
+    if (currentScope) {
+      currentScope.dispose();
+      currentScope = null;
+    }
+    for (const node of nodes) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    nodes = [];
+    currentScope = new Scope(getActiveScope());
+    untrack(() => {
+      runInScope(currentScope, () => {
+        const childRes = typeof props.children === "function" ? props.children() : props.children;
+        const frag = document.createDocumentFragment();
+        insertChild(frag, childRes);
+        nodes = Array.from(frag.childNodes);
+        target.appendChild(frag);
+      });
+    });
+  });
+  onCleanup(() => {
+    if (currentScope) {
+      currentScope.dispose();
+      currentScope = null;
+    }
+    for (const node of nodes) {
+      if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+    nodes = [];
+  });
+  return marker;
+}
+
+// src/ui/utils.ts
+var idCounter = 0;
+function createId(prefix = "visage") {
+  return `${prefix}-${++idCounter}`;
+}
+function createControllableSignal(options) {
+  const isControlled = typeof options.value === "function";
+  const internal = signal(options.defaultValue, { internal: true });
+  const getter = computed(() => {
+    if (isControlled) {
+      const externalVal = options.value();
+      if (externalVal !== undefined)
+        return externalVal;
+    }
+    return internal();
+  }, { internal: true });
+  const setter = (next) => {
+    const currentVal = getter();
+    const nextVal = typeof next === "function" ? next(currentVal) : next;
+    if (!isControlled) {
+      internal.set(nextVal);
+    }
+    if (options.onChange && nextVal !== currentVal) {
+      options.onChange(nextVal);
+    }
+  };
+  return [getter, setter];
+}
+function trapFocus(container, event) {
+  if (event.key !== "Tab")
+    return;
+  const focusables = container.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  if (event.shiftKey) {
+    if (document.activeElement === first) {
+      last.focus();
+      event.preventDefault();
+    }
+  } else {
+    if (document.activeElement === last) {
+      first.focus();
+      event.preventDefault();
+    }
+  }
+}
+function onClickOutside(elements, handler) {
+  const listener = (event) => {
+    const target = event.target;
+    if (!target)
+      return;
+    const list = Array.isArray(elements) ? elements : [elements];
+    const isInside = list.some((el) => el?.contains(target));
+    if (!isInside) {
+      handler(event);
+    }
+  };
+  if (typeof document !== "undefined") {
+    document.addEventListener("mousedown", listener, true);
+    document.addEventListener("touchstart", listener, true);
+  }
+  return () => {
+    if (typeof document !== "undefined") {
+      document.removeEventListener("mousedown", listener, true);
+      document.removeEventListener("touchstart", listener, true);
+    }
+  };
+}
+
+// src/dom/resource.ts
+var SuspenseContext = createContext(null);
+function createResource(sourceOrFetcher, maybeFetcher) {
+  const isDirect = typeof maybeFetcher !== "function";
+  const fetcher = isDirect ? sourceOrFetcher : maybeFetcher;
+  const source = isDirect ? null : sourceOrFetcher;
+  const data = signal(undefined);
+  const loading = signal(true);
+  const error = signal(null);
+  let currentPromise = null;
+  let requestId = 0;
+  const load = async (arg) => {
+    const currentReq = ++requestId;
+    loading.set(true);
+    error.set(null);
+    const promise = isDirect ? fetcher() : fetcher(arg);
+    currentPromise = promise;
+    const suspense = useContext(SuspenseContext);
+    if (suspense) {
+      suspense.registerPromise(promise);
+    }
+    try {
+      const res = await promise;
+      if (currentReq === requestId) {
+        data.set(res);
+        loading.set(false);
+        currentPromise = null;
+      }
+      return res;
+    } catch (err) {
+      if (currentReq === requestId) {
+        error.set(err);
+        loading.set(false);
+        currentPromise = null;
+      }
+      throw err;
+    }
+  };
+  if (source) {
+    effect(() => {
+      const sourceVal = resolveValue(source);
+      if (sourceVal !== false && sourceVal !== null && sourceVal !== undefined) {
+        load(sourceVal).catch(() => {});
+      }
+    });
+  } else {
+    load().catch(() => {});
+  }
+  const accessor = () => {
+    if (loading() && currentPromise) {
+      const suspense = useContext(SuspenseContext);
+      if (suspense) {
+        suspense.registerPromise(currentPromise);
+      }
+    }
+    return data();
+  };
+  Object.defineProperties(accessor, {
+    loading: { get: () => loading },
+    error: { get: () => error },
+    mutate: { value: (val) => data.set(val) },
+    refetch: { value: () => source ? load(resolveValue(source)) : load() }
+  });
+  return accessor;
+}
+
+// src/dom/lazy.ts
+function lazy(importer) {
+  let loadedComponent = null;
+  let loadingPromise = null;
+  const preload = () => {
+    if (loadedComponent) {
+      return Promise.resolve(loadedComponent);
+    }
+    if (!loadingPromise) {
+      loadingPromise = importer().then((mod) => {
+        const comp = mod && typeof mod === "object" && "default" in mod ? mod.default : mod;
+        loadedComponent = comp;
+        return comp;
+      }).catch((err) => {
+        loadingPromise = null;
+        throw err;
+      });
+    }
+    return loadingPromise;
+  };
+  const LazyWrapper = (props) => {
+    if (loadedComponent) {
+      return loadedComponent(props);
+    }
+    const promise = preload();
+    const suspense = useContext(SuspenseContext);
+    if (suspense) {
+      suspense.registerPromise(promise);
+    }
+    const res = createResource(() => promise);
+    return () => {
+      const Comp = res();
+      return Comp ? Comp(props) : null;
+    };
+  };
+  LazyWrapper.preload = preload;
+  return LazyWrapper;
+}
+// src/dom/async.ts
+function Suspense(props) {
+  if (typeof document === "undefined") {
+    return typeof props.children === "function" ? props.children() : props.children;
+  }
+  const marker = document.createTextNode("");
+  const initialFrag = document.createDocumentFragment();
+  const pendingCount = signal(0);
+  let currentScope = null;
+  let currentNodes = [];
+  let isMounted = false;
+  const suspenseValue = {
+    registerPromise(p) {
+      pendingCount.update((c) => c + 1);
+      p.finally(() => {
+        pendingCount.update((c) => Math.max(0, c - 1));
+      });
+    }
+  };
+  const renderContent = (content) => {
+    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
+    if (!parent)
+      return;
+    for (const n of currentNodes) {
+      if (n.parentNode)
+        n.parentNode.removeChild(n);
+    }
+    currentNodes = [];
+    const frag = document.createDocumentFragment();
+    insertChild(frag, content);
+    currentNodes = Array.from(frag.childNodes);
+    if (marker.parentNode) {
+      marker.parentNode.insertBefore(frag, marker);
+    } else if (!isMounted) {
+      initialFrag.appendChild(frag);
+    }
+  };
+  effect(() => {
+    if (currentScope) {
+      currentScope.dispose();
+      currentScope = null;
+    }
+    currentScope = new Scope(getActiveScope());
+    runInScope(currentScope, () => {
+      let threwPromise = null;
+      let rendered = null;
+      try {
+        const SuspenseProvider = SuspenseContext.Provider;
+        rendered = SuspenseProvider({
+          value: suspenseValue,
+          children: props.children
+        });
+      } catch (err) {
+        if (err && typeof err.then === "function") {
+          threwPromise = err;
+          suspenseValue.registerPromise(err);
+        } else {
+          throw err;
+        }
+      }
+      if (pendingCount() > 0 || threwPromise) {
+        renderContent(props.fallback);
+      } else {
+        renderContent(rendered);
+      }
+    });
+  });
+  isMounted = true;
+  initialFrag.appendChild(marker);
+  onCleanup(() => {
+    if (currentScope)
+      currentScope.dispose();
+  });
+  return initialFrag;
+}
+function ErrorBoundary(props) {
+  if (typeof document === "undefined") {
+    try {
+      return typeof props.children === "function" ? props.children() : props.children;
+    } catch (err) {
+      return typeof props.fallback === "function" ? props.fallback(err, () => {}) : props.fallback;
+    }
+  }
+  const marker = document.createTextNode("");
+  const initialFrag = document.createDocumentFragment();
+  const currentError = signal(null);
+  let currentScope = null;
+  let currentNodes = [];
+  let isMounted = false;
+  const reset = () => {
+    currentError.set(null);
+  };
+  const renderNodes = (child) => {
+    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
+    if (!parent)
+      return;
+    for (const n of currentNodes) {
+      if (n.parentNode)
+        n.parentNode.removeChild(n);
+    }
+    currentNodes = [];
+    const frag = document.createDocumentFragment();
+    insertChild(frag, child);
+    currentNodes = Array.from(frag.childNodes);
+    if (marker.parentNode) {
+      marker.parentNode.insertBefore(frag, marker);
+    } else if (!isMounted) {
+      initialFrag.appendChild(frag);
+    }
+  };
+  effect(() => {
+    const err = currentError();
+    if (currentScope) {
+      currentScope.dispose();
+      currentScope = null;
+    }
+    currentScope = new Scope(getActiveScope());
+    runInScope(currentScope, () => {
+      if (err !== null) {
+        const fallbackNode = typeof props.fallback === "function" ? props.fallback(err, reset) : props.fallback;
+        renderNodes(fallbackNode);
+      } else {
+        try {
+          const content = typeof props.children === "function" ? props.children() : props.children;
+          renderNodes(content);
+        } catch (catchedErr) {
+          currentError.set(catchedErr);
+        }
+      }
+    });
+  });
+  isMounted = true;
+  initialFrag.appendChild(marker);
+  onCleanup(() => {
+    if (currentScope)
+      currentScope.dispose();
+  });
+  return initialFrag;
+}
+// src/jsx-runtime/index.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_TAGS = new Set([
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "g",
+  "line",
+  "polyline",
+  "polygon",
+  "text",
+  "defs",
+  "clipPath",
+  "linearGradient",
+  "radialGradient",
+  "stop"
+]);
+function Fragment(props) {
+  if (typeof document === "undefined") {
+    return props.children !== undefined ? props.children : [];
+  }
+  const fragment = document.createDocumentFragment();
+  if (props.children !== undefined) {
+    insertChild(fragment, props.children);
+  }
+  return fragment;
+}
+function jsx(type, props = {}, key) {
+  if (typeof type === "function") {
+    return type(props, key);
+  }
+  if (typeof type === "string") {
+    const { children, ...restProps } = props;
+    if (typeof document === "undefined") {
+      const attributes = new Map;
+      for (const propName in restProps) {
+        const val = restProps[propName];
+        if (propName === "className" || propName === "class") {
+          const resolved = typeof val === "function" ? val() : val;
+          if (resolved)
+            attributes.set("class", resolved);
+        } else if (propName === "style") {
+          const val = restProps[propName];
+          const resolved = resolveValue(val);
+          if (typeof resolved === "string") {
+            attributes.set("style", resolved);
+          } else if (typeof resolved === "object" && resolved !== null) {
+            const styleStr = Object.entries(resolved).map(([k, v]) => {
+              const finalVal = resolveValue(v);
+              const formatted = formatStyleProp(k, finalVal);
+              if (!formatted)
+                return "";
+              const kebab = k.startsWith("--") ? k : k.replace(/([A-Z])/g, "-$1").toLowerCase();
+              return `${kebab}: ${formatted}`;
+            }).filter(Boolean).join("; ");
+            if (styleStr)
+              attributes.set("style", styleStr);
+          }
+        } else if (!propName.startsWith("on")) {
+          const resolved = typeof val === "function" ? val() : val;
+          if (resolved === true) {
+            attributes.set(propName, propName);
+          } else if (resolved !== false && resolved !== null && resolved !== undefined) {
+            attributes.set(propName, resolved);
+          }
+        }
+      }
+      const childNodes = children !== undefined ? Array.isArray(children) ? children : [children] : [];
+      return {
+        tagName: type,
+        attributes,
+        childNodes
+      };
+    }
+    const isSvg = SVG_TAGS.has(type);
+    const element = isSvg ? document.createElementNS(SVG_NS, type) : document.createElement(type);
+    for (const propName in restProps) {
+      setAttribute(element, propName, restProps[propName]);
+    }
+    if (children !== undefined) {
+      insertChild(element, children);
+    }
+    return element;
+  }
+  return type;
+}
+var jsxs = jsx;
+var jsxDEV = jsx;
+
+// src/ui/accordion.tsx
+var AccordionContext = createContext(null);
+function useAccordionContext() {
+  return useContext(AccordionContext);
+}
+function AccordionRoot(props) {
+  const isSingle = props.type === "single";
+  const collapsible = props.collapsible ?? !isSingle;
+  const [singleValue, setSingleValue] = createControllableSignal({
+    value: isSingle ? props.value : undefined,
+    defaultValue: isSingle ? props.defaultValue ?? "" : "",
+    onChange: isSingle ? props.onValueChange : undefined
+  });
+  const [multiValue, setMultiValue] = createControllableSignal({
+    value: !isSingle ? props.value : undefined,
+    defaultValue: !isSingle ? props.defaultValue ?? [] : [],
+    onChange: !isSingle ? props.onValueChange : undefined
+  });
+  const isExpanded = (val) => {
+    if (isSingle) {
+      return singleValue() === val;
+    }
+    return multiValue().includes(val);
+  };
+  const toggleItem = (val) => {
+    if (isSingle) {
+      if (singleValue() === val) {
+        if (collapsible) {
+          setSingleValue("");
+        }
+      } else {
+        setSingleValue(val);
+      }
+    } else {
+      const current = multiValue();
+      if (current.includes(val)) {
+        setMultiValue(current.filter((item) => item !== val));
+      } else {
+        setMultiValue([...current, val]);
+      }
+    }
+  };
+  const ctx = {
+    isExpanded,
+    toggleItem,
+    type: props.type,
+    collapsible
+  };
+  const {
+    as: Tag = "div",
+    items,
+    itemClass,
+    triggerClass,
+    contentClass,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return AccordionContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsxs(Tag, {
+      class: className,
+      style,
+      ...rest,
+      children: [
+        items ? items.map((item) => /* @__PURE__ */ jsx(AccordionItem, {
+          value: item.value,
+          disabled: item.disabled,
+          class: itemClass,
+          children: () => /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, {
+                class: triggerClass,
+                children: typeof item.trigger === "function" ? item.trigger() : item.trigger
+              }),
+              /* @__PURE__ */ jsx(AccordionContent, {
+                class: contentClass,
+                children: typeof item.content === "function" ? item.content() : item.content
+              })
+            ]
+          })
+        })) : null,
+        typeof children === "function" ? children() : children
+      ]
+    })
+  });
+}
+var AccordionItemContext = createContext(null);
+function useAccordionItemContext() {
+  return useContext(AccordionItemContext);
+}
+function AccordionItem(props) {
+  const itemId = createId("accordion-item");
+  const ctx = {
+    value: props.value,
+    itemId
+  };
+  const accordion = useContext(AccordionContext);
+  const isOpen = () => accordion ? accordion.isExpanded(props.value) : false;
+  const { value, disabled, as: Tag = "div", children, class: className, style, ...rest } = props;
+  return AccordionItemContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsx(Tag, {
+      "data-state": () => isOpen() ? "open" : "closed",
+      "data-disabled": disabled,
+      class: className,
+      style,
+      ...rest,
+      children: typeof children === "function" ? children() : children
+    })
+  });
+}
+function AccordionTrigger(props) {
+  const accordion = useContext(AccordionContext);
+  const item = useContext(AccordionItemContext);
+  const isOpen = () => accordion && item ? accordion.isExpanded(item.value) : false;
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && accordion && item) {
+      accordion.toggleItem(item.value);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    id: item ? `${item.itemId}-trigger` : undefined,
+    type: Tag === "button" ? "button" : undefined,
+    "aria-expanded": isOpen,
+    "aria-controls": item ? `${item.itemId}-content` : undefined,
+    "data-state": () => isOpen() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function AccordionContent(props) {
+  const accordion = useContext(AccordionContext);
+  const item = useContext(AccordionItemContext);
+  const isOpen = () => accordion && item ? accordion.isExpanded(item.value) : false;
+  const { forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
+  if (forceMount) {
+    return /* @__PURE__ */ jsx(Tag, {
+      id: item ? `${item.itemId}-content` : undefined,
+      role: "region",
+      "aria-labelledby": item ? `${item.itemId}-trigger` : undefined,
+      "data-state": () => isOpen() ? "open" : "closed",
+      hidden: () => !isOpen(),
+      class: className,
+      style,
+      ...rest,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Show, {
+    when: isOpen,
+    children: /* @__PURE__ */ jsx(Tag, {
+      id: item ? `${item.itemId}-content` : undefined,
+      role: "region",
+      "aria-labelledby": item ? `${item.itemId}-trigger` : undefined,
+      "data-state": "open",
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+}
+var Accordion = Object.assign(AccordionRoot, {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+// src/ui/command-dialog.tsx
+function CommandDialog(props) {
+  const [open, setOpen] = createControllableSignal({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const { overlayClass, contentClass, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Portal, {
+    children: /* @__PURE__ */ jsx("div", {
+      style: () => ({
+        display: open() ? "flex" : "none",
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(4px)",
+        alignItems: "flex-start",
+        justifyContent: "center",
+        paddingTop: "15vh",
+        zIndex: 9999
+      }),
+      class: overlayClass,
+      onClick: (e) => {
+        if (e.target === e.currentTarget)
+          setOpen(false);
+      },
+      children: /* @__PURE__ */ jsx("div", {
+        style: { width: "100%", maxWidth: "560px" },
+        class: contentClass,
+        children: /* @__PURE__ */ jsx(CommandRoot, {
+          ...rest
+        })
+      })
+    })
+  });
+}
+
+// src/ui/command.tsx
+var CommandContext = createContext(null);
+function useCommandContext() {
+  return useContext(CommandContext);
+}
+function CommandRoot(props) {
+  const [search, setSearch] = createControllableSignal({
+    value: props.search,
+    defaultValue: "",
+    onChange: props.onSearchChange
+  });
+  const [activeValue, setActiveValue] = createControllableSignal({
+    value: props.value,
+    defaultValue: props.defaultValue ?? "",
+    onChange: props.onValueChange
+  });
+  const commandId = createId("command");
+  const filterMatches = (text, keywords) => {
+    const q = search().toLowerCase().trim();
+    if (!q)
+      return true;
+    if (text.toLowerCase().includes(q))
+      return true;
+    if (keywords?.some((k) => k.toLowerCase().includes(q)))
+      return true;
+    return false;
+  };
+  const ctx = {
+    search,
+    setSearch,
+    activeValue,
+    setActiveValue,
+    filterMatches,
+    commandId
+  };
+  const {
+    as: Tag = "div",
+    placeholder = "Type a command or search...",
+    groups,
+    items,
+    emptyText = "No results found.",
+    class: className,
+    style,
+    inputClass,
+    listClass,
+    itemClass,
+    children,
+    ...rest
+  } = props;
+  if (groups || items) {
+    return CommandContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs(Tag, {
+        class: className,
+        style: { display: "flex", flexDirection: "column", overflow: "hidden", ...style },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(CommandInput, {
+            placeholder,
+            class: inputClass
+          }),
+          /* @__PURE__ */ jsxs(CommandList, {
+            class: listClass,
+            children: [
+              /* @__PURE__ */ jsx(CommandEmpty, {
+                children: emptyText
+              }),
+              groups?.map((grp) => /* @__PURE__ */ jsx(CommandGroup, {
+                heading: grp.heading,
+                children: grp.items.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
+                  value: item.value,
+                  shortcut: item.shortcut,
+                  disabled: item.disabled,
+                  onSelect: item.onSelect,
+                  keywords: item.keywords,
+                  class: item.class ?? itemClass,
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", {
+                      style: { display: "inline-flex", alignItems: "center", marginRight: "8px" },
+                      children: typeof item.icon === "function" ? item.icon() : item.icon
+                    }) : null,
+                    typeof item.label === "function" ? item.label() : item.label
+                  ]
+                }))
+              })),
+              items?.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
+                value: item.value,
+                shortcut: item.shortcut,
+                disabled: item.disabled,
+                onSelect: item.onSelect,
+                keywords: item.keywords,
+                class: item.class ?? itemClass,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", {
+                    style: { display: "inline-flex", alignItems: "center", marginRight: "8px" },
+                    children: typeof item.icon === "function" ? item.icon() : item.icon
+                  }) : null,
+                  typeof item.label === "function" ? item.label() : item.label
+                ]
+              })),
+              typeof children === "function" ? children() : children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return CommandContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsx(Tag, {
+      class: className,
+      style,
+      ...rest,
+      children: typeof children === "function" ? children() : children
+    })
+  });
+}
+function CommandInput(props) {
+  const ctx = useContext(CommandContext);
+  const handleKeyDown = (e) => {
+    const list = e.currentTarget.closest('[role="combobox"], [data-command-root], div')?.querySelector('[role="listbox"]');
+    if (!list)
+      return;
+    const items = Array.from(list.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([style*="display: none"])'));
+    if (items.length === 0)
+      return;
+    const currentActive = items.find((el) => el.getAttribute("aria-selected") === "true") ?? items[0];
+    const index = currentActive ? items.indexOf(currentActive) : 0;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextIndex = (index + 1) % items.length;
+      const nextItem = items[nextIndex];
+      if (nextItem && ctx) {
+        ctx.setActiveValue(nextItem.getAttribute("data-value") ?? "");
+        nextItem.scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevIndex = (index - 1 + items.length) % items.length;
+      const prevItem = items[prevIndex];
+      if (prevItem && ctx) {
+        ctx.setActiveValue(prevItem.getAttribute("data-value") ?? "");
+        prevItem.scrollIntoView({ block: "nearest" });
+      }
+    } else if (e.key === "Enter" && currentActive) {
+      e.preventDefault();
+      currentActive.click();
+    }
+  };
+  const { placeholder = "Type a command...", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx("input", {
+    type: "text",
+    role: "searchbox",
+    placeholder,
+    value: () => ctx?.search() ?? "",
+    onInput: (e) => ctx?.setSearch(e.target.value),
+    onKeyDown: handleKeyDown,
+    class: className,
+    style,
+    ...rest
+  });
+}
+function CommandList(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    role: "listbox",
+    class: className,
+    style: { overflowY: "auto", ...style },
+    ...rest,
+    children
+  });
+}
+function CommandEmpty(props) {
+  const ctx = useContext(CommandContext);
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    class: className,
+    style: () => ({
+      display: ctx && ctx.search().trim().length > 0 ? undefined : "none",
+      textAlign: "center",
+      padding: "16px",
+      color: "#94a3b8",
+      ...style
+    }),
+    ...rest,
+    children
+  });
+}
+function CommandGroup(props) {
+  const { heading, as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Tag, {
+    role: "group",
+    class: className,
+    style,
+    ...rest,
+    children: [
+      heading ? /* @__PURE__ */ jsx("div", {
+        style: {
+          fontSize: "11px",
+          fontWeight: 700,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          color: "#64748b",
+          padding: "6px 10px"
+        },
+        children: heading
+      }) : null,
+      children
+    ]
+  });
+}
+function CommandItem(props) {
+  const ctx = useContext(CommandContext);
+  const itemValue = props.value ?? (typeof props.children === "string" ? props.children : createId("item"));
+  const isVisible = () => {
+    if (!ctx)
+      return true;
+    const text = typeof props.children === "string" ? props.children : itemValue;
+    return ctx.filterMatches(text, props.keywords);
+  };
+  const isSelected = () => ctx ? ctx.activeValue() === itemValue : false;
+  const handleClick = () => {
+    if (props.disabled)
+      return;
+    if (props.onSelect)
+      props.onSelect();
+  };
+  const { as: Tag = "div", shortcut, disabled, children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Tag, {
+    role: "option",
+    "data-value": itemValue,
+    "aria-selected": isSelected,
+    "aria-disabled": disabled,
+    class: className,
+    style: () => ({
+      display: isVisible() ? "flex" : "none",
+      alignItems: "center",
+      justifyContent: "space-between",
+      cursor: disabled ? "not-allowed" : "pointer",
+      ...style
+    }),
+    onClick: handleClick,
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        style: { display: "flex", alignItems: "center" },
+        children
+      }),
+      shortcut ? /* @__PURE__ */ jsx("span", {
+        style: {
+          fontSize: "11px",
+          color: "#64748b",
+          background: "#1e293b",
+          padding: "2px 6px",
+          borderRadius: "4px"
+        },
+        children: shortcut
+      }) : null
+    ]
+  });
+}
+var Command = Object.assign(CommandRoot, {
+  Root: CommandRoot,
+  Dialog: CommandDialog,
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Item: CommandItem
+});
+// src/ui/data-table.tsx
+function DataTable(props) {
+  const [sortState, setSortState] = createControllableSignal({
+    value: props.sort,
+    defaultValue: { column: "", direction: null },
+    onChange: props.onSortChange
+  });
+  const [selectedKeys, setSelectedKeys] = createControllableSignal({
+    value: props.selectedKeys,
+    defaultValue: [],
+    onChange: props.onSelectionChange
+  });
+  const [currentPage, setCurrentPage] = createSignal(0, { internal: true });
+  const pageSize = props.pageSize ?? 10;
+  const selectionMode = props.selection ?? "none";
+  const getRowId = (row, index) => {
+    if (props.getRowId)
+      return props.getRowId(row, index);
+    if (row && typeof row === "object" && "id" in row)
+      return String(row.id);
+    return String(index);
+  };
+  const filteredData = () => {
+    const raw = typeof props.data === "function" ? props.data() : props.data;
+    if (!raw)
+      return [];
+    const filterQuery = props.filter ? (typeof props.filter === "function" ? props.filter() : props.filter)?.toLowerCase().trim() : "";
+    if (!filterQuery)
+      return raw;
+    return raw.filter((row) => Object.values(row).some((val) => String(val).toLowerCase().includes(filterQuery)));
+  };
+  const sortedData = () => {
+    const list = [...filteredData()];
+    const currentSort = sortState();
+    if (!currentSort.column || !currentSort.direction)
+      return list;
+    return list.sort((a, b) => {
+      const aVal = a[currentSort.column];
+      const bVal = b[currentSort.column];
+      if (aVal === bVal)
+        return 0;
+      if (aVal === null || aVal === undefined)
+        return 1;
+      if (bVal === null || bVal === undefined)
+        return -1;
+      const comp = aVal < bVal ? -1 : 1;
+      return currentSort.direction === "asc" ? comp : -comp;
+    });
+  };
+  const totalPages = () => Math.ceil(sortedData().length / pageSize) || 1;
+  const paginatedData = () => {
+    if (!props.pageSize)
+      return sortedData();
+    const start = currentPage() * pageSize;
+    return sortedData().slice(start, start + pageSize);
+  };
+  const handleSort = (colId) => {
+    const current = sortState();
+    if (current.column !== colId) {
+      setSortState({ column: colId, direction: "asc" });
+    } else if (current.direction === "asc") {
+      setSortState({ column: colId, direction: "desc" });
+    } else {
+      setSortState({ column: "", direction: null });
+    }
+  };
+  const handleSelectRow = (key, e) => {
+    e.stopPropagation();
+    if (selectionMode === "single") {
+      setSelectedKeys(selectedKeys().includes(key) ? [] : [key]);
+    } else if (selectionMode === "multi") {
+      const current = selectedKeys();
+      if (current.includes(key)) {
+        setSelectedKeys(current.filter((k) => k !== key));
+      } else {
+        setSelectedKeys([...current, key]);
+      }
+    }
+  };
+  const handleSelectAll = () => {
+    if (selectionMode !== "multi")
+      return;
+    const allCurrentKeys = paginatedData().map((row, i) => getRowId(row, i));
+    const allSelected = allCurrentKeys.every((k) => selectedKeys().includes(k));
+    if (allSelected) {
+      setSelectedKeys(selectedKeys().filter((k) => !allCurrentKeys.includes(k)));
+    } else {
+      setSelectedKeys(Array.from(new Set([...selectedKeys(), ...allCurrentKeys])));
+    }
+  };
+  const {
+    class: className,
+    style,
+    tableClass,
+    headerClass,
+    rowClass,
+    cellClass,
+    paginationClass,
+    emptyText = "No data available",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    class: className,
+    style: { display: "flex", flexDirection: "column", width: "100%", ...style },
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        style: { overflowX: "auto", width: "100%" },
+        children: /* @__PURE__ */ jsxs("table", {
+          class: tableClass,
+          style: { width: "100%", borderCollapse: "collapse" },
+          children: [
+            /* @__PURE__ */ jsx("thead", {
+              class: headerClass,
+              children: /* @__PURE__ */ jsxs("tr", {
+                children: [
+                  selectionMode === "multi" ? /* @__PURE__ */ jsx("th", {
+                    style: { width: "40px", padding: "8px" },
+                    children: /* @__PURE__ */ jsx("input", {
+                      type: "checkbox",
+                      checked: () => {
+                        const keys = paginatedData().map((row, i) => getRowId(row, i));
+                        return keys.length > 0 && keys.every((k) => selectedKeys().includes(k));
+                      },
+                      onChange: handleSelectAll
+                    })
+                  }) : null,
+                  props.columns.map((col) => {
+                    const isSorted = () => sortState().column === col.id;
+                    const sortDir = () => isSorted() ? sortState().direction : null;
+                    return /* @__PURE__ */ jsx("th", {
+                      style: {
+                        width: col.width,
+                        textAlign: col.align ?? "left",
+                        cursor: col.sortable ? "pointer" : "default",
+                        userSelect: col.sortable ? "none" : "auto",
+                        padding: "10px 12px"
+                      },
+                      onClick: () => {
+                        if (col.sortable)
+                          handleSort(col.id);
+                      },
+                      children: /* @__PURE__ */ jsxs("div", {
+                        style: { display: "inline-flex", alignItems: "center", gap: "6px" },
+                        children: [
+                          /* @__PURE__ */ jsx("span", {
+                            children: typeof col.header === "function" ? col.header() : col.header
+                          }),
+                          col.sortable ? /* @__PURE__ */ jsx("span", {
+                            style: { fontSize: "10px", color: isSorted() ? "#38bdf8" : "#64748b" },
+                            children: () => sortDir() === "asc" ? "▲" : sortDir() === "desc" ? "▼" : "⇅"
+                          }) : null
+                        ]
+                      })
+                    });
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("tbody", {
+              children: /* @__PURE__ */ jsx(For, {
+                each: paginatedData,
+                fallback: /* @__PURE__ */ jsx("tr", {
+                  children: /* @__PURE__ */ jsx("td", {
+                    colSpan: props.columns.length + (selectionMode === "multi" ? 1 : 0),
+                    style: { textAlign: "center", padding: "24px", color: "#64748b" },
+                    children: emptyText
+                  })
+                }),
+                children: (row, idx) => {
+                  const key = () => getRowId(row, idx());
+                  const isSelected = () => selectedKeys().includes(key());
+                  return /* @__PURE__ */ jsxs("tr", {
+                    class: rowClass,
+                    style: { cursor: props.onRowClick ? "pointer" : "default" },
+                    "data-selected": isSelected,
+                    onClick: () => {
+                      if (props.onRowClick)
+                        props.onRowClick(row, idx());
+                    },
+                    children: [
+                      selectionMode === "multi" ? /* @__PURE__ */ jsx("td", {
+                        style: { width: "40px", padding: "8px" },
+                        children: /* @__PURE__ */ jsx("input", {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onClick: (e) => handleSelectRow(key(), e)
+                        })
+                      }) : null,
+                      props.columns.map((col) => {
+                        const content = col.cell ? col.cell(row, idx()) : col.accessorKey ? row[col.accessorKey] : row[col.id];
+                        return /* @__PURE__ */ jsx("td", {
+                          class: cellClass,
+                          style: {
+                            textAlign: col.align ?? "left",
+                            padding: "10px 12px"
+                          },
+                          children: typeof content === "function" ? content() : content
+                        });
+                      })
+                    ]
+                  });
+                }
+              })
+            })
+          ]
+        })
+      }),
+      props.pageSize ? /* @__PURE__ */ jsxs("div", {
+        class: paginationClass,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 12px",
+          borderTop: "1px solid #1e293b",
+          fontSize: "12px",
+          color: "#94a3b8"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            children: [
+              "Showing ",
+              /* @__PURE__ */ jsx("strong", {
+                children: () => currentPage() * pageSize + 1
+              }),
+              " to",
+              " ",
+              /* @__PURE__ */ jsx("strong", {
+                children: () => Math.min((currentPage() + 1) * pageSize, sortedData().length)
+              }),
+              " ",
+              "of ",
+              /* @__PURE__ */ jsx("strong", {
+                children: () => sortedData().length
+              }),
+              " entries"
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            style: { display: "flex", gap: "6px", alignItems: "center" },
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                disabled: () => currentPage() === 0,
+                onClick: () => setCurrentPage((p) => Math.max(0, p - 1)),
+                style: { padding: "4px 8px", cursor: "pointer" },
+                children: "Previous"
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                children: [
+                  "Page ",
+                  /* @__PURE__ */ jsx("strong", {
+                    children: () => currentPage() + 1
+                  }),
+                  " of ",
+                  /* @__PURE__ */ jsx("strong", {
+                    children: totalPages
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                disabled: () => currentPage() >= totalPages() - 1,
+                onClick: () => setCurrentPage((p) => Math.min(totalPages() - 1, p + 1)),
+                style: { padding: "4px 8px", cursor: "pointer" },
+                children: "Next"
+              })
+            ]
+          })
+        ]
+      }) : null
+    ]
+  });
+}
+// src/ui/dialog.tsx
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const ctx = useContext(DialogContext);
+  return ctx;
+}
+function DialogRoot(props) {
+  const [open, setOpen] = createControllableSignal({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const titleId = createId("dialog-title");
+  const descriptionId = createId("dialog-desc");
+  const contentRef = { current: null };
+  const ctx = {
+    open,
+    setOpen,
+    titleId,
+    descriptionId,
+    contentRef
+  };
+  if (props.trigger !== undefined || props.title !== undefined || props.description !== undefined) {
+    return DialogContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx(DialogTrigger, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsx(DialogOverlay, {
+            class: props.overlayClass,
+            portalled: props.portalled
+          }),
+          /* @__PURE__ */ jsxs(DialogContent, {
+            portalled: props.portalled,
+            class: props.contentClass,
+            children: [
+              props.title ? /* @__PURE__ */ jsx(DialogTitle, {
+                class: props.titleClass,
+                children: typeof props.title === "function" ? props.title() : props.title
+              }) : null,
+              props.description ? /* @__PURE__ */ jsx(DialogDescription, {
+                class: props.descriptionClass,
+                children: typeof props.description === "function" ? props.description() : props.description
+              }) : null,
+              typeof props.children === "function" ? props.children() : props.children,
+              props.footer ? /* @__PURE__ */ jsx("div", {
+                class: props.footerClass,
+                children: typeof props.footer === "function" ? props.footer() : props.footer
+              }) : null
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return DialogContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function DialogTrigger(props) {
+  const ctx = useContext(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(true);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "dialog",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function DialogPortal(props) {
+  return /* @__PURE__ */ jsx(Portal, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function DialogOverlay(props) {
+  const ctx = useContext(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const overlay = /* @__PURE__ */ jsx(Tag, {
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    class: className,
+    onClick: handleClick,
+    "aria-hidden": "true",
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx(Portal, {
+    mount,
+    children: overlay
+  }) : overlay;
+}
+function DialogContent(props) {
+  const ctx = useContext(DialogContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape") {
+      ctx?.setOpen(false);
+      e.stopPropagation();
+    } else if (e.key === "Tab" && ctx?.contentRef.current) {
+      trapFocus(ctx.contentRef.current, e);
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.closest("[data-dialog-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el && ctx.open()) {
+          const focusable = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+          if (focusable) {
+            setTimeout(() => focusable.focus(), 0);
+          }
+        }
+      }
+    },
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": ctx?.titleId,
+    "aria-describedby": ctx?.descriptionId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    class: className,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx(Portal, {
+    mount,
+    children: content
+  }) : content;
+}
+function DialogTitle(props) {
+  const ctx = useContext(DialogContext);
+  const { as: Tag = "h2", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    id: ctx?.titleId,
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function DialogDescription(props) {
+  const ctx = useContext(DialogContext);
+  const { as: Tag = "p", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    id: ctx?.descriptionId,
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function DialogClose(props) {
+  const ctx = useContext(DialogContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "data-dialog-close": "",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+var Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+});
+// src/ui/dropdown-menu.tsx
+var DropdownMenuContext = createContext(null);
+function useDropdownMenuContext() {
+  return useContext(DropdownMenuContext);
+}
+function DropdownMenuRoot(props) {
+  const [open, setOpen] = createControllableSignal({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const triggerRef = { current: null };
+  const contentRef = { current: null };
+  const menuId = createId("dropdown-menu");
+  const ctx = {
+    open,
+    setOpen,
+    triggerRef,
+    contentRef,
+    menuId
+  };
+  if (props.trigger !== undefined || props.items !== undefined) {
+    return DropdownMenuContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs("div", {
+        class: "visage-dropdown-root",
+        style: { position: "relative", display: "inline-block" },
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsxs(DropdownMenuContent, {
+            portalled: props.portalled ?? false,
+            class: props.contentClass,
+            children: [
+              props.items ? props.items.map((item) => {
+                if (item.separator) {
+                  return /* @__PURE__ */ jsx(DropdownMenuSeparator, {
+                    class: item.class ?? props.separatorClass
+                  });
+                }
+                return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+                  disabled: item.disabled,
+                  onSelect: item.onSelect,
+                  class: [props.itemClass, item.class, item.danger ? "danger" : ""].filter(Boolean).join(" "),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", {
+                      class: "dropdown-item-icon",
+                      style: {
+                        display: "inline-flex",
+                        alignItems: "center",
+                        marginRight: "8px"
+                      },
+                      children: typeof item.icon === "function" ? item.icon() : item.icon
+                    }) : null,
+                    typeof item.label === "function" ? item.label() : item.label
+                  ]
+                });
+              }) : null,
+              typeof props.children === "function" ? props.children() : props.children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return DropdownMenuContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function DropdownMenuTrigger(props) {
+  const ctx = useContext(DropdownMenuContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(!ctx.open());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      if (ctx) {
+        ctx.setOpen(true);
+        e.preventDefault();
+        setTimeout(() => {
+          const firstItem = ctx.contentRef.current?.querySelector('[role="menuitem"]:not([disabled])');
+          firstItem?.focus();
+        }, 0);
+      }
+    }
+  };
+  const {
+    as: Tag = "button",
+    children,
+    onClick,
+    onKeyDown,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "menu",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "aria-controls": ctx?.menuId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function DropdownMenuPortal(props) {
+  return /* @__PURE__ */ jsx(Portal, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function DropdownMenuContent(props) {
+  const ctx = useContext(DropdownMenuContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    const el = ctx?.contentRef.current;
+    if (!el)
+      return;
+    const items = Array.from(el.querySelectorAll('[role="menuitem"]:not([disabled])'));
+    const active = document.activeElement;
+    const index = active ? items.indexOf(active) : -1;
+    if (e.key === "ArrowDown") {
+      const nextIndex = index === items.length - 1 || index === -1 ? 0 : index + 1;
+      items[nextIndex]?.focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      const nextIndex = index <= 0 ? items.length - 1 : index - 1;
+      items[nextIndex]?.focus();
+      e.preventDefault();
+    } else if (e.key === "Home") {
+      items[0]?.focus();
+      e.preventDefault();
+    } else if (e.key === "End") {
+      items[items.length - 1]?.focus();
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      if (ctx) {
+        ctx.setOpen(false);
+        ctx.triggerRef.current?.focus();
+      }
+      e.preventDefault();
+    } else if (e.key === "Tab") {
+      if (ctx)
+        ctx.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el) {
+          const cleanup = onClickOutside([ctx.triggerRef.current, el], () => {
+            if (ctx.open()) {
+              ctx.setOpen(false);
+            }
+          });
+          onCleanup(cleanup);
+        }
+      }
+    },
+    id: ctx?.menuId,
+    role: "menu",
+    "aria-orientation": "vertical",
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    onKeyDown: handleKeyDown,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx(Portal, {
+    mount,
+    children: content
+  }) : content;
+}
+function DropdownMenuItem(props) {
+  const ctx = useContext(DropdownMenuContext);
+  const closeOnSelect = props.closeOnSelect ?? true;
+  const handleSelect = (e) => {
+    if (props.disabled)
+      return;
+    if (props.onSelect)
+      props.onSelect(e);
+    if (!e.defaultPrevented && closeOnSelect && ctx) {
+      ctx.setOpen(false);
+      ctx.triggerRef.current?.focus();
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    handleSelect(e);
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect(e);
+    }
+  };
+  const {
+    disabled,
+    closeOnSelect: _cos,
+    as: Tag = "div",
+    children,
+    onClick,
+    onKeyDown,
+    onSelect: _os,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    role: "menuitem",
+    tabIndex: -1,
+    "aria-disabled": disabled,
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function DropdownMenuSeparator(props) {
+  const { as: Tag = "div", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    role: "separator",
+    "aria-orientation": "horizontal",
+    class: className,
+    style,
+    ...rest
+  });
+}
+var DropdownMenu = Object.assign(DropdownMenuRoot, {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Item: DropdownMenuItem,
+  Separator: DropdownMenuSeparator
+});
+// src/ui/icon.tsx
+function createIcon(name, iconNode) {
+  const IconComponent = function Icon(props = {}) {
+    const size = () => typeof props.size === "function" ? props.size() : props.size ?? 24;
+    const color = () => typeof props.color === "function" ? props.color() : props.color ?? "currentColor";
+    const strokeWidth = () => typeof props.strokeWidth === "function" ? props.strokeWidth() : props.strokeWidth ?? 2;
+    const {
+      size: _s,
+      color: _c,
+      strokeWidth: _sw,
+      class: className,
+      style,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      "stroke-width": strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      class: className,
+      style,
+      role: "img",
+      "aria-label": props["aria-label"] ?? name,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("title", {
+          children: props.title ?? name
+        }),
+        iconNode.map(([Tag, attrs]) => /* @__PURE__ */ jsx(Tag, {
+          ...attrs
+        })),
+        typeof children === "function" ? children() : children
+      ]
+    });
+  };
+  IconComponent.displayName = name;
+  return IconComponent;
+}
+// src/style/layout.tsx
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+};
+function resolveBaseStyles(props) {
+  const s = {
+    boxSizing: "border-box"
+  };
+  if (props.gap !== undefined)
+    s.gap = space(props.gap);
+  if (props.p !== undefined)
+    s.padding = space(props.p);
+  if (props.px !== undefined) {
+    s.paddingLeft = space(props.px);
+    s.paddingRight = space(props.px);
+  }
+  if (props.py !== undefined) {
+    s.paddingTop = space(props.py);
+    s.paddingBottom = space(props.py);
+  }
+  if (props.pt !== undefined)
+    s.paddingTop = space(props.pt);
+  if (props.pb !== undefined)
+    s.paddingBottom = space(props.pb);
+  if (props.pl !== undefined)
+    s.paddingLeft = space(props.pl);
+  if (props.pr !== undefined)
+    s.paddingRight = space(props.pr);
+  if (props.m !== undefined)
+    s.margin = space(props.m);
+  if (props.mx !== undefined) {
+    s.marginLeft = space(props.mx);
+    s.marginRight = space(props.mx);
+  }
+  if (props.my !== undefined) {
+    s.marginTop = space(props.my);
+    s.marginBottom = space(props.my);
+  }
+  if (props.mt !== undefined)
+    s.marginTop = space(props.mt);
+  if (props.mb !== undefined)
+    s.marginBottom = space(props.mb);
+  if (props.ml !== undefined)
+    s.marginLeft = space(props.ml);
+  if (props.mr !== undefined)
+    s.marginRight = space(props.mr);
+  if (props.w !== undefined)
+    s.width = resolveDimension(props.w);
+  if (props.h !== undefined)
+    s.height = resolveDimension(props.h);
+  if (props.minW !== undefined)
+    s.minWidth = resolveDimension(props.minW);
+  if (props.maxW !== undefined)
+    s.maxWidth = resolveDimension(props.maxW);
+  if (props.minH !== undefined)
+    s.minHeight = resolveDimension(props.minH);
+  if (props.maxH !== undefined)
+    s.maxHeight = resolveDimension(props.maxH);
+  return s;
+}
+function mergeStyles(base, userStyle) {
+  if (!userStyle)
+    return base;
+  if (typeof userStyle === "string") {
+    const baseStr = Object.entries(base).map(([k, v]) => `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`).join("; ");
+    return `${baseStr}; ${userStyle}`;
+  }
+  if (typeof userStyle === "object") {
+    return { ...base, ...userStyle };
+  }
+  return base;
+}
+function cleanProps(props, excludeKeys) {
+  const result = {};
+  for (const k in props) {
+    if (!excludeKeys.has(k)) {
+      result[k] = props[k];
+    }
+  }
+  return result;
+}
+var COMMON_EXCLUDE = new Set([
+  "as",
+  "gap",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pb",
+  "pl",
+  "pr",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "minH",
+  "maxH"
+]);
+var STACK_EXCLUDE = new Set([
+  ...COMMON_EXCLUDE,
+  "align",
+  "justify",
+  "direction",
+  "reversed",
+  "wrap",
+  "inline"
+]);
+function Stack(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.flexDirection = props.direction === "horizontal" ? props.reversed ? "row-reverse" : "row" : props.reversed ? "column-reverse" : "column";
+  if (props.align && ALIGN_MAP[props.align]) {
+    layoutStyles.alignItems = ALIGN_MAP[props.align];
+  }
+  if (props.justify && JUSTIFY_MAP[props.justify]) {
+    layoutStyles.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap) {
+    layoutStyles.flexWrap = props.wrap === true ? "wrap" : props.wrap;
+  }
+  const domProps = cleanProps(rest, STACK_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx(as, domProps);
+}
+var ROW_EXCLUDE = new Set([...COMMON_EXCLUDE, "align", "justify", "reversed", "wrap", "inline"]);
+function Row(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.flexDirection = props.reversed ? "row-reverse" : "row";
+  layoutStyles.alignItems = props.align ? ALIGN_MAP[props.align] ?? props.align : "center";
+  if (props.justify && JUSTIFY_MAP[props.justify]) {
+    layoutStyles.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap) {
+    layoutStyles.flexWrap = props.wrap === true ? "wrap" : props.wrap;
+  }
+  const domProps = cleanProps(rest, ROW_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx(as, domProps);
+}
+var CENTER_EXCLUDE = new Set([...COMMON_EXCLUDE, "inline"]);
+function Center(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-flex" : "flex";
+  layoutStyles.alignItems = "center";
+  layoutStyles.justifyContent = "center";
+  const domProps = cleanProps(rest, CENTER_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx(as, domProps);
+}
+var GRID_EXCLUDE = new Set([
+  ...COMMON_EXCLUDE,
+  "columns",
+  "minChildWidth",
+  "rows",
+  "rowGap",
+  "colGap",
+  "align",
+  "justify",
+  "inline"
+]);
+function Grid(props) {
+  const { as = "div", children, ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  layoutStyles.display = props.inline ? "inline-grid" : "grid";
+  if (props.minChildWidth !== undefined) {
+    const minW = resolveDimension(props.minChildWidth);
+    layoutStyles.gridTemplateColumns = `repeat(auto-fit, minmax(min(100%, ${minW}), 1fr))`;
+  } else if (props.columns !== undefined) {
+    if (typeof props.columns === "number") {
+      layoutStyles.gridTemplateColumns = `repeat(${props.columns}, minmax(0, 1fr))`;
+    } else {
+      layoutStyles.gridTemplateColumns = String(props.columns);
+    }
+  }
+  if (props.rows !== undefined) {
+    if (typeof props.rows === "number") {
+      layoutStyles.gridTemplateRows = `repeat(${props.rows}, minmax(0, 1fr))`;
+    } else {
+      layoutStyles.gridTemplateRows = String(props.rows);
+    }
+  }
+  if (props.rowGap !== undefined)
+    layoutStyles.rowGap = space(props.rowGap);
+  if (props.colGap !== undefined)
+    layoutStyles.columnGap = space(props.colGap);
+  if (props.align) {
+    layoutStyles.alignItems = ALIGN_MAP[props.align] ?? props.align;
+  }
+  if (props.justify) {
+    layoutStyles.justifyItems = props.justify;
+  }
+  const domProps = cleanProps(rest, GRID_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  domProps.children = children;
+  return jsx(as, domProps);
+}
+var SPACER_EXCLUDE = new Set([...COMMON_EXCLUDE, "size", "x", "y", "flex"]);
+function Spacer(props) {
+  const { as = "div", ...rest } = props;
+  const layoutStyles = resolveBaseStyles(props);
+  if (props.size !== undefined) {
+    const s = space(props.size);
+    layoutStyles.width = s;
+    layoutStyles.height = s;
+    layoutStyles.flexShrink = "0";
+  } else if (props.x !== undefined || props.y !== undefined) {
+    if (props.x !== undefined)
+      layoutStyles.width = space(props.x);
+    if (props.y !== undefined)
+      layoutStyles.height = space(props.y);
+    layoutStyles.flexShrink = "0";
+  } else {
+    layoutStyles.flex = typeof props.flex === "number" ? String(props.flex) : "1 1 0%";
+    layoutStyles.alignSelf = "stretch";
+  }
+  const domProps = cleanProps(rest, SPACER_EXCLUDE);
+  domProps.style = mergeStyles(layoutStyles, props.style);
+  return jsx(as, domProps);
+}
+// src/ui/popover.tsx
+var PopoverContext = createContext(null);
+function usePopoverContext() {
+  return useContext(PopoverContext);
+}
+function PopoverRoot(props) {
+  const [open, setOpen] = createControllableSignal({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const triggerRef = { current: null };
+  const contentRef = { current: null };
+  const contentId = createId("popover-content");
+  const ctx = {
+    open,
+    setOpen,
+    triggerRef,
+    contentRef,
+    contentId
+  };
+  if (props.trigger !== undefined || props.content !== undefined) {
+    return PopoverContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          props.trigger ? /* @__PURE__ */ jsx(PopoverTrigger, {
+            as: "span",
+            class: props.triggerClass,
+            children: typeof props.trigger === "function" ? props.trigger() : props.trigger
+          }) : null,
+          /* @__PURE__ */ jsxs(PopoverContent, {
+            portalled: props.portalled,
+            class: props.contentClass,
+            children: [
+              typeof props.content === "function" ? props.content() : props.content,
+              typeof props.children === "function" ? props.children() : props.children
+            ]
+          })
+        ]
+      })
+    });
+  }
+  return PopoverContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function PopoverTrigger(props) {
+  const ctx = useContext(PopoverContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(!ctx.open());
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    "aria-haspopup": "dialog",
+    "aria-expanded": () => ctx?.open() ?? false,
+    "aria-controls": ctx?.contentId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function PopoverPortal(props) {
+  return /* @__PURE__ */ jsx(Portal, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function PopoverContent(props) {
+  const ctx = useContext(PopoverContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    if (e.key === "Escape" && ctx) {
+      ctx.setOpen(false);
+      ctx.triggerRef.current?.focus();
+      e.stopPropagation();
+    }
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.closest("[data-popover-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx) {
+        ctx.contentRef.current = el;
+        if (el) {
+          const cleanup = onClickOutside([ctx.triggerRef.current, el], () => {
+            if (ctx.open()) {
+              ctx.setOpen(false);
+            }
+          });
+          onCleanup(cleanup);
+        }
+      }
+    },
+    id: ctx?.contentId,
+    role: "dialog",
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: () => ({
+      display: ctx?.open() ? undefined : "none",
+      ...style
+    }),
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    tabIndex: -1,
+    ...rest,
+    children
+  });
+  return portalled ? /* @__PURE__ */ jsx(Portal, {
+    mount,
+    children: content
+  }) : content;
+}
+function PopoverClose(props) {
+  const ctx = useContext(PopoverContext);
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "data-popover-close": "",
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+var Popover = Object.assign(PopoverRoot, {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Content: PopoverContent,
+  Close: PopoverClose
+});
+// src/ui/switch.tsx
+function SwitchRoot(props) {
+  const [checked, setChecked] = createControllableSignal({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+  const toggle = () => {
+    const isDisabled = typeof props.disabled === "function" ? props.disabled() : Boolean(props.disabled);
+    if (isDisabled)
+      return;
+    setChecked(!checked());
+  };
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented) {
+      toggle();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  const {
+    checked: _c,
+    defaultChecked: _dc,
+    onCheckedChange: _occ,
+    disabled,
+    required,
+    name,
+    value,
+    thumbClass,
+    thumbStyle,
+    as: Tag = "button",
+    children,
+    onClick,
+    onKeyDown,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    role: "switch",
+    "aria-checked": checked,
+    "data-state": () => checked() ? "checked" : "unchecked",
+    disabled,
+    class: className,
+    style,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children: children !== undefined ? typeof children === "function" ? children() : children : /* @__PURE__ */ jsx(SwitchThumb, {
+      class: thumbClass,
+      style: thumbStyle
+    })
+  });
+}
+function SwitchThumb(props) {
+  const { as: Tag = "span", class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    class: className,
+    style,
+    ...rest
+  });
+}
+var Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb
+});
+// src/ui/tabs.tsx
+var TabsContext = createContext(null);
+function useTabsContext() {
+  return useContext(TabsContext);
+}
+function TabsRoot(props) {
+  const [value, setValue] = createControllableSignal({
+    value: props.value,
+    defaultValue: props.defaultValue ?? (props.items && props.items.length > 0 ? props.items[0]?.value : ""),
+    onChange: props.onValueChange
+  });
+  const baseId = createId("tabs");
+  const orientation = props.orientation ?? "horizontal";
+  const activationMode = props.activationMode ?? "automatic";
+  const ctx = {
+    value,
+    setValue,
+    orientation,
+    activationMode,
+    baseId
+  };
+  const {
+    as: Tag = "div",
+    value: _v,
+    defaultValue: _dv,
+    onValueChange: _ovc,
+    orientation: _ori,
+    activationMode: _am,
+    items,
+    listClass,
+    triggerClass,
+    contentClass,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return TabsContext.Provider({
+    value: ctx,
+    children: () => /* @__PURE__ */ jsxs(Tag, {
+      "data-orientation": orientation,
+      class: className,
+      style,
+      ...rest,
+      children: [
+        items ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(TabsList, {
+              class: listClass,
+              children: items.map((item) => /* @__PURE__ */ jsxs(TabsTrigger, {
+                value: item.value,
+                disabled: item.disabled,
+                class: triggerClass,
+                children: [
+                  item.icon ? /* @__PURE__ */ jsx("span", {
+                    class: "tab-icon",
+                    style: { display: "inline-flex", alignItems: "center" },
+                    children: typeof item.icon === "function" ? item.icon() : item.icon
+                  }) : null,
+                  typeof item.label === "function" ? item.label() : item.label
+                ]
+              }))
+            }),
+            items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
+              value: item.value,
+              class: contentClass,
+              children: typeof item.content === "function" ? item.content() : item.content
+            }))
+          ]
+        }) : null,
+        typeof children === "function" ? children() : children
+      ]
+    })
+  });
+}
+function TabsList(props) {
+  const ctx = useContext(TabsContext);
+  const handleKeyDown = (e) => {
+    if (props.onKeyDown)
+      props.onKeyDown(e);
+    if (e.defaultPrevented)
+      return;
+    const target = e.target;
+    if (target?.getAttribute("role") !== "tab")
+      return;
+    const list = target.closest('[role="tablist"]');
+    if (!list)
+      return;
+    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+    const index = tabs.indexOf(target);
+    if (index === -1)
+      return;
+    let nextIndex = index;
+    const isHorizontal = (ctx?.orientation ?? "horizontal") === "horizontal";
+    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+    if (e.key === prevKey) {
+      nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+      e.preventDefault();
+    } else if (e.key === nextKey) {
+      nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+      e.preventDefault();
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+      e.preventDefault();
+    } else if (e.key === "End") {
+      nextIndex = tabs.length - 1;
+      e.preventDefault();
+    }
+    if (nextIndex !== index) {
+      const nextTab = tabs[nextIndex];
+      nextTab.focus();
+      if (ctx?.activationMode === "automatic") {
+        const val = nextTab.getAttribute("data-value");
+        if (val)
+          ctx.setValue(val);
+      }
+    }
+  };
+  const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    role: "tablist",
+    "aria-orientation": ctx?.orientation ?? "horizontal",
+    class: className,
+    style,
+    onKeyDown: handleKeyDown,
+    ...rest,
+    children
+  });
+}
+function TabsTrigger(props) {
+  const ctx = useContext(TabsContext);
+  const isSelected = () => ctx ? ctx.value() === props.value : false;
+  const handleClick = (e) => {
+    if (props.onClick)
+      props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setValue(props.value);
+    }
+  };
+  const {
+    value,
+    disabled,
+    as: Tag = "button",
+    children,
+    onClick,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    id: ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+    type: Tag === "button" ? "button" : undefined,
+    role: "tab",
+    "aria-selected": isSelected,
+    "aria-controls": ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+    "data-state": () => isSelected() ? "active" : "inactive",
+    "data-value": value,
+    tabIndex: () => isSelected() ? 0 : -1,
+    disabled,
+    class: className,
+    style,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function TabsContent(props) {
+  const ctx = useContext(TabsContext);
+  const isSelected = () => ctx ? ctx.value() === props.value : false;
+  const { value, forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
+  if (forceMount) {
+    return /* @__PURE__ */ jsx(Tag, {
+      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+      role: "tabpanel",
+      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+      "data-state": () => isSelected() ? "active" : "inactive",
+      hidden: () => !isSelected(),
+      tabIndex: 0,
+      class: className,
+      style,
+      ...rest,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(Show, {
+    when: isSelected,
+    children: /* @__PURE__ */ jsx(Tag, {
+      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
+      role: "tabpanel",
+      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
+      "data-state": "active",
+      tabIndex: 0,
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+}
+var Tabs = Object.assign(TabsRoot, {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});
+// src/ui/toast.tsx
+function createToastManager() {
+  const toasts = signal([]);
+  const dismiss = (id) => {
+    const item = toasts().find((t) => t.id === id);
+    if (item?.onDismiss)
+      item.onDismiss();
+    toasts.update((list) => list.filter((t) => t.id !== id));
+  };
+  const show = (options) => {
+    const id = createId("toast");
+    const normalized = typeof options === "string" ? { title: options } : options;
+    const data = {
+      id,
+      title: normalized.title,
+      description: normalized.description,
+      variant: normalized.variant ?? "default",
+      duration: normalized.duration ?? 5000,
+      onDismiss: normalized.onDismiss
+    };
+    toasts.update((list) => [...list, data]);
+    if (data.duration && data.duration > 0) {
+      setTimeout(() => {
+        dismiss(id);
+      }, data.duration);
+    }
+    return id;
+  };
+  const success = (title, options) => show({ ...options, title, variant: "success" });
+  const error = (title, options) => show({ ...options, title, variant: "error" });
+  const warning = (title, options) => show({ ...options, title, variant: "warning" });
+  const info = (title, options) => show({ ...options, title, variant: "info" });
+  const clear = () => {
+    toasts.set([]);
+  };
+  const fn = function toast(options) {
+    return show(options);
+  };
+  fn.toasts = toasts;
+  fn.show = show;
+  fn.success = success;
+  fn.error = error;
+  fn.warning = warning;
+  fn.info = info;
+  fn.dismiss = dismiss;
+  fn.clear = clear;
+  return fn;
+}
+var defaultToastManager = createToastManager();
+var toast = defaultToastManager;
+var ToastContext = createContext(defaultToastManager);
+function useToast() {
+  return useContext(ToastContext) ?? defaultToastManager;
+}
+function ToastProvider(props) {
+  const manager = props.manager ?? defaultToastManager;
+  return ToastContext.Provider({
+    value: manager,
+    children: props.children
+  });
+}
+function ToastViewport(props) {
+  const manager = useToast();
+  const { as: Tag = "section", children, class: className, style, ...rest } = props;
+  const defaultRender = (t) => /* @__PURE__ */ jsxs(Toast, {
+    id: t.id,
+    variant: t.variant,
+    class: `visage-toast toast toast-${t.variant ?? "default"}`,
+    onDismiss: () => manager.dismiss(t.id),
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "visage-toast-content",
+        children: [
+          t.title && /* @__PURE__ */ jsx(ToastTitle, {
+            class: "visage-toast-title",
+            children: t.title
+          }),
+          t.description && /* @__PURE__ */ jsx(ToastDescription, {
+            class: "visage-toast-description",
+            children: t.description
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(ToastClose, {
+        class: "visage-toast-close",
+        onClick: () => manager.dismiss(t.id)
+      })
+    ]
+  });
+  const renderItem = children ?? defaultRender;
+  return /* @__PURE__ */ jsx(Tag, {
+    role: "region",
+    "aria-label": "Notifications",
+    class: className,
+    style,
+    tabIndex: -1,
+    ...rest,
+    children: /* @__PURE__ */ jsx(For, {
+      each: manager.toasts,
+      children: (t) => renderItem(t)
+    })
+  });
+}
+function ToastRoot(props) {
+  const {
+    id,
+    variant = "default",
+    onDismiss,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  const role = variant === "error" ? "alert" : "status";
+  const ariaLive = variant === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsx(Tag, {
+    id,
+    role,
+    "aria-live": ariaLive,
+    "data-variant": variant,
+    "data-state": "open",
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastTitle(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastDescription(props) {
+  const { as: Tag = "div", children, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    class: className,
+    style,
+    ...rest,
+    children
+  });
+}
+function ToastClose(props) {
+  const { as: Tag = "button", children = "✕", onClick, class: className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    type: Tag === "button" ? "button" : undefined,
+    "aria-label": "Close notification",
+    class: className,
+    style,
+    onClick,
+    ...rest,
+    children
+  });
+}
+var Toast = Object.assign(ToastRoot, {
+  Root: ToastRoot,
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Close: ToastClose
+});
+// src/ui/tooltip.tsx
+var TooltipContext = createContext(null);
+function useTooltipContext() {
+  return useContext(TooltipContext);
+}
+function TooltipRoot(props) {
+  const [open, setOpen] = createControllableSignal({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+  const tooltipId = createId("tooltip");
+  const triggerRef = { current: null };
+  const ctx = {
+    open,
+    setOpen,
+    openDelay: props.openDelay ?? 150,
+    closeDelay: props.closeDelay ?? 100,
+    tooltipId,
+    triggerRef
+  };
+  if (props.content !== undefined) {
+    return TooltipContext.Provider({
+      value: ctx,
+      children: () => /* @__PURE__ */ jsxs("span", {
+        class: "visage-tooltip-root",
+        style: { position: "relative", display: "inline-flex", alignItems: "center" },
+        children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, {
+            as: props.triggerAs ?? "button",
+            class: props.triggerClass,
+            style: {
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              cursor: "help"
+            },
+            children: typeof props.children === "function" ? props.children() : props.children
+          }),
+          /* @__PURE__ */ jsx(TooltipContent, {
+            side: props.side,
+            class: props.contentClass,
+            style: props.contentStyle,
+            portalled: props.portalled ?? false,
+            children: typeof props.content === "function" ? props.content() : props.content
+          })
+        ]
+      })
+    });
+  }
+  return TooltipContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+function TooltipTrigger(props) {
+  const ctx = useContext(TooltipContext);
+  let openTimer = null;
+  let closeTimer = null;
+  const clearTimers = () => {
+    if (openTimer)
+      clearTimeout(openTimer);
+    if (closeTimer)
+      clearTimeout(closeTimer);
+    openTimer = null;
+    closeTimer = null;
+  };
+  const handleMouseEnter = (e) => {
+    if (props.onMouseEnter)
+      props.onMouseEnter(e);
+    clearTimers();
+    if (!ctx)
+      return;
+    if (ctx.openDelay > 0) {
+      openTimer = setTimeout(() => ctx.setOpen(true), ctx.openDelay);
+    } else {
+      ctx.setOpen(true);
+    }
+  };
+  const handleMouseLeave = (e) => {
+    if (props.onMouseLeave)
+      props.onMouseLeave(e);
+    clearTimers();
+    if (!ctx)
+      return;
+    if (ctx.closeDelay > 0) {
+      closeTimer = setTimeout(() => ctx.setOpen(false), ctx.closeDelay);
+    } else {
+      ctx.setOpen(false);
+    }
+  };
+  const handleFocus = (e) => {
+    if (props.onFocus)
+      props.onFocus(e);
+    clearTimers();
+    ctx?.setOpen(true);
+  };
+  const handleBlur = (e) => {
+    if (props.onBlur)
+      props.onBlur(e);
+    clearTimers();
+    ctx?.setOpen(false);
+  };
+  onCleanup(clearTimers);
+  const {
+    as: Tag = "button",
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    class: className,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Tag, {
+    ref: (el) => {
+      if (ctx)
+        ctx.triggerRef.current = el;
+    },
+    type: Tag === "button" ? "button" : undefined,
+    tabIndex: Tag === "button" ? undefined : 0,
+    "aria-describedby": ctx?.tooltipId,
+    "data-state": () => ctx?.open() ? "open" : "closed",
+    class: className,
+    style: { display: "inline-flex", alignItems: "center", ...style },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ...rest,
+    children
+  });
+}
+function TooltipPortal(props) {
+  return /* @__PURE__ */ jsx(Portal, {
+    mount: props.mount,
+    children: props.children
+  });
+}
+function TooltipContent(props) {
+  const ctx = useContext(TooltipContext);
+  const isOpen = () => ctx ? ctx.open() : false;
+  const {
+    forceMount,
+    as: Tag = "div",
+    children,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+  const content = forceMount ? /* @__PURE__ */ jsx(Tag, {
+    id: ctx?.tooltipId,
+    role: "tooltip",
+    "data-state": () => isOpen() ? "open" : "closed",
+    hidden: () => !isOpen(),
+    class: className,
+    style,
+    ...rest,
+    children
+  }) : /* @__PURE__ */ jsx(Show, {
+    when: isOpen,
+    children: /* @__PURE__ */ jsx(Tag, {
+      id: ctx?.tooltipId,
+      role: "tooltip",
+      "data-state": "open",
+      class: className,
+      style,
+      ...rest,
+      children
+    })
+  });
+  return portalled ? /* @__PURE__ */ jsx(Portal, {
+    mount,
+    children: content
+  }) : content;
+}
+var Tooltip = Object.assign(TooltipRoot, {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Portal: TooltipPortal,
+  Content: TooltipContent
+});
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Center,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  DataTable,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Grid,
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+  Row,
+  Spacer,
+  Stack,
+  Switch,
+  SwitchThumb,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+  createControllableSignal,
+  createIcon,
+  createId,
+  createToastManager,
+  defaultToastManager,
+  onClickOutside,
+  toast,
+  trapFocus,
+  useAccordionContext,
+  useAccordionItemContext,
+  useCommandContext,
+  useDialogContext,
+  useDropdownMenuContext,
+  usePopoverContext,
+  useTabsContext,
+  useToast,
+  useTooltipContext
+};