@vertz/ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,83 +1,102 @@
 import {
-  eagerStrategy,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+  accordionDown,
+  accordionUp,
+  fadeIn,
+  fadeOut,
   hydrate,
-  idleStrategy,
-  interactionStrategy,
-  lazyStrategy,
-  mediaStrategy,
-  visibleStrategy
-} from "./shared/chunk-d8h2eh8d.js";
+  isQueryDescriptor,
+  keyframes,
+  onAnimationsComplete,
+  palettes,
+  slideInFromBottom,
+  slideInFromLeft,
+  slideInFromRight,
+  slideInFromTop,
+  slideOutToBottom,
+  slideOutToLeft,
+  slideOutToRight,
+  slideOutToTop,
+  zoomIn,
+  zoomOut
+} from "./shared/chunk-n91rwj2r.js";
 import {
+  Outlet,
+  OutletContext,
+  RouterContext,
+  RouterView,
   createLink,
-  createOutlet,
   parseSearchParams,
+  useParams,
+  useRouter,
   useSearchParams
-} from "./shared/chunk-bp3v6s9j.js";
+} from "./shared/chunk-0xcmwgdb.js";
+import"./shared/chunk-v3yyf79g.js";
 import {
   createRouter
-} from "./shared/chunk-xd9d7q5p.js";
+} from "./shared/chunk-ka5ked7n.js";
 import {
   defineRoutes
-} from "./shared/chunk-j8vzvne3.js";
+} from "./shared/chunk-9e92w0wt.js";
 import {
+  createFieldState,
   form,
   formDataToObject,
   validate
-} from "./shared/chunk-tsdpgmks.js";
+} from "./shared/chunk-q6cpe5k7.js";
 import {
-  query
-} from "./shared/chunk-zbbvx05f.js";
+  query,
+  queryMatch
+} from "./shared/chunk-hh0dhmb4.js";
+import"./shared/chunk-jrtrk5z4.js";
+import {
+  ThemeProvider,
+  children,
+  compileTheme,
+  css,
+  defineTheme,
+  getInjectedCSS,
+  globalCss,
+  injectCSS,
+  resetInjectedStyles,
+  resolveChildren,
+  s,
+  variants
+} from "./shared/chunk-qacth5ah.js";
+import {
+  __append,
+  __element,
+  __enterChildren,
+  __exitChildren,
+  __staticText,
+  endHydration,
+  startHydration
+} from "./shared/chunk-ryb49346.js";
+import {
+  RENDER_NODE_BRAND,
+  createDOMAdapter,
+  getAdapter,
+  isRenderNode,
+  setAdapter
+} from "./shared/chunk-g4rch80a.js";
 import {
   DisposalScopeError,
   _tryOnCleanup,
   batch,
   computed,
   createContext,
-  effect,
-  onCleanup,
+  domEffect,
+  getContextScope,
   popScope,
   pushScope,
   runCleanups,
+  setContextScope,
   signal,
   untrack,
   useContext
-} from "./shared/chunk-pgymxpn1.js";
-import {
-  ThemeProvider,
-  compileTheme,
-  css,
-  defineTheme,
-  globalCss,
-  s,
-  variants
-} from "./shared/chunk-f1ynwam4.js";
-
-// src/component/children.ts
-function resolveChildren(value) {
-  if (value == null) {
-    return [];
-  }
-  if (typeof value === "string") {
-    return [document.createTextNode(value)];
-  }
-  if (typeof value === "number") {
-    return [document.createTextNode(String(value))];
-  }
-  if (Array.isArray(value)) {
-    const result = [];
-    for (const child of value) {
-      const resolved = resolveChildren(child);
-      for (const node of resolved) {
-        result.push(node);
-      }
-    }
-    return result;
-  }
-  return [value];
-}
-function children(accessor) {
-  return () => resolveChildren(accessor());
-}
+} from "./shared/chunk-hrd0mft1.js";
+import"./shared/chunk-prj7nm08.js";
 // src/component/error-boundary-context.ts
 var handlerStack = [];
 function pushErrorHandler(handler) {
@@ -137,9 +156,17 @@ function ErrorBoundary(props) {
 }
 // src/component/lifecycle.ts
 function onMount(callback) {
+  if (typeof globalThis !== "undefined") {
+    const check = globalThis.__VERTZ_IS_SSR__;
+    if (typeof check === "function" && check())
+      return;
+  }
   const scope = pushScope();
   try {
-    untrack(callback);
+    const cleanup = untrack(callback);
+    if (typeof cleanup === "function") {
+      _tryOnCleanup(cleanup);
+    }
   } finally {
     popScope();
     if (scope.length > 0) {
@@ -147,26 +174,74 @@ function onMount(callback) {
     }
   }
 }
-function watch(dep, callback) {
-  let innerCleanups = null;
-  const dispose = effect(() => {
-    if (innerCleanups) {
-      runCleanups(innerCleanups);
-    }
-    const value = dep();
-    innerCleanups = pushScope();
-    try {
-      untrack(() => callback(value));
-    } finally {
-      popScope();
-    }
-  });
-  _tryOnCleanup(() => {
-    if (innerCleanups) {
-      runCleanups(innerCleanups);
+// src/component/presence.ts
+function Presence(props) {
+  const anchor = document.createComment("presence");
+  let currentNode = null;
+  let exitingNode = null;
+  let branchCleanups = [];
+  let generation = 0;
+  const outerScope = pushScope();
+  try {
+    domEffect(() => {
+      const show = props.when;
+      if (show && !currentNode) {
+        generation++;
+        if (exitingNode?.parentNode) {
+          exitingNode.parentNode.removeChild(exitingNode);
+          exitingNode = null;
+        }
+        const scope = pushScope();
+        const child = props.children();
+        popScope();
+        if (!(child instanceof HTMLElement)) {
+          runCleanups(scope);
+          throw new Error("Presence requires a single HTMLElement child. Wrap multiple children in a container element.");
+        }
+        branchCleanups = scope;
+        currentNode = child;
+        child.setAttribute("data-presence", "enter");
+        anchor.parentNode?.insertBefore(currentNode, anchor.nextSibling);
+        onAnimationsComplete(child, () => {
+          if (currentNode === child) {
+            child.removeAttribute("data-presence");
+          }
+        });
+      } else if (!show && currentNode) {
+        const gen = ++generation;
+        const exitingEl = currentNode;
+        currentNode = null;
+        exitingNode = exitingEl;
+        runCleanups(branchCleanups);
+        branchCleanups = [];
+        exitingEl.setAttribute("data-presence", "exit");
+        exitingEl.offsetHeight;
+        onAnimationsComplete(exitingEl, () => {
+          if (generation === gen) {
+            exitingEl.parentNode?.removeChild(exitingEl);
+            exitingNode = null;
+          }
+        });
+      }
+    });
+  } finally {
+    popScope();
+  }
+  const dispose = () => {
+    runCleanups(branchCleanups);
+    runCleanups(outerScope);
+    if (currentNode?.parentNode) {
+      currentNode.parentNode.removeChild(currentNode);
+      currentNode = null;
     }
-    dispose();
-  });
+  };
+  _tryOnCleanup(dispose);
+  const fragment = document.createDocumentFragment();
+  fragment.appendChild(anchor);
+  if (currentNode) {
+    fragment.appendChild(currentNode);
+  }
+  return Object.assign(fragment, { dispose });
 }
 // src/component/refs.ts
 function ref() {
@@ -217,45 +292,492 @@ function Suspense(props) {
     return placeholder;
   }
 }
+// src/dialog/dialog-stack.ts
+var DialogStackContext = createContext();
+function useDialogStack() {
+  const stack = useContext(DialogStackContext);
+  if (!stack) {
+    throw new Error("useDialogStack() must be called within DialogStackProvider");
+  }
+  const capturedScope = getContextScope();
+  return {
+    open(component, props) {
+      return stack.openWithScope(component, props, capturedScope);
+    },
+    openWithScope: stack.openWithScope,
+    get size() {
+      return stack.size;
+    },
+    closeAll() {
+      stack.closeAll();
+    }
+  };
+}
+
+class DialogDismissedError extends Error {
+  constructor() {
+    super("Dialog was dismissed");
+    this.name = "DialogDismissedError";
+  }
+}
+function createDialogStack(container) {
+  const entries = [];
+  let nextId = 0;
+  function open(component, props, capturedScope) {
+    return new Promise((resolve, reject) => {
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "background");
+      }
+      const wrapper = document.createElement("div");
+      wrapper.setAttribute("data-dialog-wrapper", "");
+      wrapper.setAttribute("data-state", "open");
+      wrapper.setAttribute("data-dialog-depth", "0");
+      const entry = {
+        id: nextId++,
+        wrapper,
+        node: null,
+        resolve,
+        reject,
+        cleanups: [],
+        dismissible: true
+      };
+      const prevScope = setContextScope(capturedScope ?? null);
+      const scope = pushScope();
+      const handle = {
+        close: (...args) => {
+          closeEntry(entry, args[0]);
+        }
+      };
+      entry.node = component({ ...props, dialog: handle });
+      entry.cleanups = [...scope];
+      popScope();
+      setContextScope(prevScope);
+      if (entry.dismissible) {
+        wrapper.addEventListener("keydown", (e) => {
+          if (e.key === "Escape" && entries[entries.length - 1] === entry) {
+            e.preventDefault();
+            e.stopPropagation();
+            dismissEntry(entry);
+          }
+        });
+      }
+      wrapper.appendChild(entry.node);
+      container.appendChild(wrapper);
+      entries.push(entry);
+      updateDepthAttributes();
+    });
+  }
+  function closeEntry(entry, result) {
+    const idx = entries.indexOf(entry);
+    if (idx === -1)
+      return;
+    entry.wrapper.setAttribute("data-state", "closed");
+    onAnimationsComplete(entry.wrapper, () => {
+      runCleanups(entry.cleanups);
+      if (entry.wrapper.parentNode === container) {
+        container.removeChild(entry.wrapper);
+      }
+      const entryIdx = entries.indexOf(entry);
+      if (entryIdx !== -1) {
+        entries.splice(entryIdx, 1);
+      }
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
+      }
+      updateDepthAttributes();
+      entry.resolve(result);
+    });
+  }
+  function updateDepthAttributes() {
+    for (let i = 0;i < entries.length; i++) {
+      entries[i].wrapper.setAttribute("data-dialog-depth", String(entries.length - 1 - i));
+    }
+  }
+  return {
+    open(component, props) {
+      return open(component, props);
+    },
+    openWithScope(component, props, scope) {
+      return open(component, props, scope);
+    },
+    get size() {
+      return entries.length;
+    },
+    closeAll() {
+      for (let i = entries.length - 1;i >= 0; i--) {
+        dismissEntry(entries[i]);
+      }
+    }
+  };
+  function dismissEntry(entry) {
+    const idx = entries.indexOf(entry);
+    if (idx === -1)
+      return;
+    entry.wrapper.setAttribute("data-state", "closed");
+    onAnimationsComplete(entry.wrapper, () => {
+      runCleanups(entry.cleanups);
+      if (entry.wrapper.parentNode === container) {
+        container.removeChild(entry.wrapper);
+      }
+      const entryIdx = entries.indexOf(entry);
+      if (entryIdx !== -1) {
+        entries.splice(entryIdx, 1);
+      }
+      if (entries.length > 0) {
+        entries[entries.length - 1].wrapper.setAttribute("data-state", "open");
+      }
+      updateDepthAttributes();
+      entry.reject(new DialogDismissedError);
+    });
+  }
+}
+// src/mount.ts
+function mount(app, selector, options) {
+  if (typeof selector !== "string" && !(selector instanceof HTMLElement)) {
+    throw new Error(`mount(): selector must be a string or HTMLElement, got ${typeof selector}`);
+  }
+  const root = typeof selector === "string" ? document.querySelector(selector) : selector;
+  if (!root) {
+    throw new Error(`mount(): root element "${selector}" not found`);
+  }
+  if (options?.theme) {
+    const { css: css2 } = compileTheme(options.theme);
+    injectCSS(css2);
+  }
+  if (options?.styles) {
+    for (const css2 of options.styles) {
+      injectCSS(css2);
+    }
+  }
+  if (root.firstChild) {
+    const scope2 = pushScope();
+    try {
+      startHydration(root);
+      app();
+      endHydration();
+      popScope();
+      options?.onMount?.(root);
+      return {
+        unmount: () => {
+          runCleanups(scope2);
+          root.textContent = "";
+        },
+        root
+      };
+    } catch (e) {
+      endHydration();
+      popScope();
+      runCleanups(scope2);
+      if (typeof process !== "undefined" && true) {
+        console.warn("[mount] Hydration failed — re-rendering from scratch (no data loss):", e);
+      }
+    }
+  }
+  const scope = pushScope();
+  root.textContent = "";
+  const appElement = app();
+  root.appendChild(appElement);
+  popScope();
+  options?.onMount?.(root);
+  return {
+    unmount: () => {
+      runCleanups(scope);
+      root.textContent = "";
+    },
+    root
+  };
+}
+// src/store/merge.ts
+function shallowMerge(existing, incoming) {
+  const result = { ...existing };
+  for (const key of Object.keys(incoming)) {
+    const value = incoming[key];
+    if (value !== undefined) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function shallowEqual(a, b) {
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/store/query-result-index.ts
+class QueryResultIndex {
+  _indices = new Map;
+  set(queryKey, ids) {
+    this._indices.set(queryKey, ids);
+  }
+  get(queryKey) {
+    return this._indices.get(queryKey);
+  }
+  removeEntity(entityId) {
+    for (const [queryKey, ids] of this._indices.entries()) {
+      const filtered = ids.filter((id) => id !== entityId);
+      if (filtered.length !== ids.length) {
+        this._indices.set(queryKey, filtered);
+      }
+    }
+  }
+  clear(queryKey) {
+    this._indices.delete(queryKey);
+  }
+  keys() {
+    return Array.from(this._indices.keys());
+  }
+}
+
+// src/store/entity-store.ts
+class EntityStore {
+  _entities = new Map;
+  _typeListeners = new Map;
+  _queryIndices = new QueryResultIndex;
+  constructor(options) {
+    if (options?.initialData) {
+      this.hydrate(options.initialData);
+    }
+  }
+  get(type, id) {
+    const typeMap = this._entities.get(type);
+    if (typeMap?.has(id)) {
+      return typeMap.get(id);
+    }
+    const sig = signal(undefined);
+    this._getOrCreateTypeMap(type).set(id, sig);
+    return sig;
+  }
+  getMany(type, ids) {
+    return computed(() => ids.map((id) => this.get(type, id).value));
+  }
+  merge(type, data) {
+    const items = Array.isArray(data) ? data : [data];
+    if (items.length === 0) {
+      return;
+    }
+    batch(() => {
+      for (const item of items) {
+        const typeMap = this._entities.get(type);
+        const existing = typeMap?.get(item.id);
+        if (existing) {
+          const current = existing.peek();
+          const merged = shallowMerge(current || {}, item);
+          if (!shallowEqual(current || {}, merged)) {
+            untrack(() => {
+              existing.value = merged;
+            });
+          }
+        } else {
+          const newSignal = signal(item);
+          this._getOrCreateTypeMap(type).set(item.id, newSignal);
+          this._notifyTypeChange(type);
+        }
+      }
+    });
+  }
+  remove(type, id) {
+    const typeMap = this._entities.get(type);
+    if (!typeMap?.has(id)) {
+      return;
+    }
+    const existing = typeMap.get(id);
+    if (existing) {
+      existing.value = undefined;
+    }
+    typeMap.delete(id);
+    this._queryIndices.removeEntity(id);
+    this._notifyTypeChange(type);
+  }
+  onTypeChange(type, callback) {
+    const listeners = this._getOrCreateListeners(type);
+    listeners.add(callback);
+    return () => {
+      listeners.delete(callback);
+    };
+  }
+  has(type, id) {
+    const typeMap = this._entities.get(type);
+    if (!typeMap?.has(id)) {
+      return false;
+    }
+    const signal2 = typeMap.get(id);
+    return signal2?.peek() !== undefined;
+  }
+  size(type) {
+    const typeMap = this._entities.get(type);
+    if (!typeMap) {
+      return 0;
+    }
+    let count = 0;
+    for (const signal2 of typeMap.values()) {
+      if (signal2.peek() !== undefined) {
+        count++;
+      }
+    }
+    return count;
+  }
+  dehydrate() {
+    const entities = {};
+    for (const [type, typeMap] of this._entities.entries()) {
+      const typeEntities = {};
+      for (const [id, signal2] of typeMap.entries()) {
+        const value = signal2.peek();
+        if (value !== undefined) {
+          typeEntities[id] = value;
+        }
+      }
+      if (Object.keys(typeEntities).length > 0) {
+        entities[type] = typeEntities;
+      }
+    }
+    const queries = {};
+    for (const queryKey of this._queryIndices.keys()) {
+      const ids = this._queryIndices.get(queryKey);
+      if (ids) {
+        queries[queryKey] = { ids };
+      }
+    }
+    return {
+      entities,
+      ...Object.keys(queries).length > 0 ? { queries } : {}
+    };
+  }
+  hydrate(data) {
+    for (const [type, typeEntities] of Object.entries(data.entities)) {
+      const entities = Object.values(typeEntities).map((entity) => ({
+        ...entity,
+        id: entity.id
+      }));
+      this.merge(type, entities);
+    }
+    if (data.queries) {
+      for (const [queryKey, queryData] of Object.entries(data.queries)) {
+        this._queryIndices.set(queryKey, queryData.ids);
+      }
+    }
+  }
+  _getOrCreateTypeMap(type) {
+    let typeMap = this._entities.get(type);
+    if (!typeMap) {
+      typeMap = new Map;
+      this._entities.set(type, typeMap);
+    }
+    return typeMap;
+  }
+  _getOrCreateListeners(type) {
+    let listeners = this._typeListeners.get(type);
+    if (!listeners) {
+      listeners = new Set;
+      this._typeListeners.set(type, listeners);
+    }
+    return listeners;
+  }
+  _notifyTypeChange(type) {
+    const listeners = this._typeListeners.get(type);
+    if (listeners) {
+      for (const callback of listeners) {
+        callback();
+      }
+    }
+  }
+}
+// src/store/test-utils.ts
+function createTestStore(data) {
+  const store = new EntityStore;
+  for (const [type, entities] of Object.entries(data)) {
+    const entityArray = Object.values(entities);
+    if (entityArray.length > 0) {
+      store.merge(type, entityArray);
+    }
+  }
+  return store;
+}
 export {
-  watch,
-  visibleStrategy,
+  zoomOut,
+  zoomIn,
   variants,
   validate,
   useSearchParams,
+  useRouter,
+  useParams,
+  useDialogStack,
   useContext,
   untrack,
+  slideOutToTop,
+  slideOutToRight,
+  slideOutToLeft,
+  slideOutToBottom,
+  slideInFromTop,
+  slideInFromRight,
+  slideInFromLeft,
+  slideInFromBottom,
   signal,
+  setAdapter,
   s,
   resolveChildren,
+  resetInjectedStyles,
   ref,
+  queryMatch,
   query,
   parseSearchParams,
+  palettes,
   onMount,
-  onCleanup,
-  mediaStrategy,
-  lazyStrategy,
-  interactionStrategy,
-  idleStrategy,
+  mount,
+  keyframes,
+  isRenderNode,
+  isQueryDescriptor,
+  injectCSS,
   hydrate,
   globalCss,
+  getInjectedCSS,
+  getAdapter,
   formDataToObject,
   form,
-  effect,
-  eagerStrategy,
+  fadeOut,
+  fadeIn,
   defineTheme,
   defineRoutes,
   css,
+  createTestStore,
   createRouter,
-  createOutlet,
   createLink,
+  createFieldState,
+  createDialogStack,
+  createDOMAdapter,
   createContext,
   computed,
   compileTheme,
   children,
   batch,
+  accordionUp,
+  accordionDown,
+  __staticText,
+  __exitChildren,
+  __enterChildren,
+  __element,
+  __append,
   ThemeProvider,
   Suspense,
+  RouterView,
+  RouterContext,
+  RENDER_NODE_BRAND,
+  Presence,
+  OutletContext,
+  Outlet,
   ErrorBoundary,
-  DisposalScopeError
+  EntityStore,
+  DisposalScopeError,
+  DialogStackContext,
+  DialogDismissedError,
+  ANIMATION_EASING,
+  ANIMATION_DURATION
 };