@vertz/ui 0.2.14 → 0.2.16

package/README.md

@@ -255,6 +255,53 @@ const compiled = compileTheme(theme);
 ThemeProvider({ theme: 'dark', children: [<App />] });
 ```
 
+### Fonts
+
+Declare font families with `font()` and compile them into `@font-face` CSS, custom properties, and preload tags with `compileFonts()`. Only woff2 format is supported.
+
+```tsx
+import { font, compileFonts } from '@vertz/ui/css';
+
+const sans = font('DM Sans', {
+  weight: '100..1000',
+  src: '/fonts/dm-sans.woff2',
+  fallback: ['system-ui', 'sans-serif'],
+});
+
+const mono = font('JetBrains Mono', {
+  weight: '100..800',
+  src: '/fonts/jb-mono.woff2',
+  fallback: ['monospace'],
+});
+
+const compiled = compileFonts({ sans, mono });
+
+// compiled.fontFaceCss  — @font-face declarations
+// compiled.cssVarsCss   — :root { --font-sans: ...; --font-mono: ...; }
+// compiled.cssVarLines  — individual lines for merging into an existing :root
+// compiled.preloadTags  — <link rel="preload" ...> HTML tags
+```
+
+**Multiple font files** (e.g., normal + italic):
+
+```tsx
+const sans = font('DM Sans', {
+  weight: '100..1000',
+  src: [
+    { path: '/fonts/dm-sans.woff2', weight: '100..1000', style: 'normal' },
+    { path: '/fonts/dm-sans-italic.woff2', weight: '100..1000', style: 'italic' },
+  ],
+  fallback: ['system-ui', 'sans-serif'],
+});
+```
+
+**Font without `src`** (system font with CSS var only):
+
+```tsx
+const system = font('system-ui', { weight: '400' });
+// compileFonts({ system }) generates --font-system: 'system-ui'; but no @font-face
+```
+
 ---
 
 ## Forms
@@ -624,6 +671,8 @@ onMount(() => {
 | `compileTheme` | Compile a theme to CSS |
 | `ThemeProvider` | Provide a theme to descendants |
 | `globalCss` | Inject global CSS |
+| `font` | Declare a font family descriptor |
+| `compileFonts` | Compile font descriptors into CSS, vars, and preload tags |
 
 ### Forms
 

package/dist/shared/chunk-14eqne2a.js

@@ -0,0 +1,10 @@
+import {
+  hasSSRResolver
+} from "./chunk-4fwcwxn6.js";
+
+// src/env/is-browser.ts
+function isBrowser() {
+  return typeof window !== "undefined" && !hasSSRResolver();
+}
+
+export { isBrowser };

package/dist/shared/{chunk-dksg08fq.js → chunk-1rxa2fz4.js}

@@ -1,6 +1,6 @@
 import {
   domEffect
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/dom/attributes.ts
 function __attr(el, name, fn) {
@@ -39,10 +39,4 @@ function __classList(el, classMap) {
   };
 }
 
-// src/dom/events.ts
-function __on(el, event, handler) {
-  el.addEventListener(event, handler);
-  return () => el.removeEventListener(event, handler);
-}
-
-export { __attr, __show, __classList, __on };
+export { __attr, __show, __classList };

package/dist/shared/{chunk-8hsz5y4a.js → chunk-4fwcwxn6.js}

@@ -1,10 +1,20 @@
 // src/ssr/ssr-render-context.ts
-var _ssrResolver = null;
+var RESOLVER_KEY = "__VERTZ_SSR_RESOLVER__";
+function getResolver() {
+  return globalThis[RESOLVER_KEY] ?? null;
+}
 function registerSSRResolver(resolver) {
-  _ssrResolver = resolver;
+  if (resolver === null) {
+    delete globalThis[RESOLVER_KEY];
+  } else {
+    globalThis[RESOLVER_KEY] = resolver;
+  }
 }
 function getSSRContext() {
-  return _ssrResolver?.();
+  return getResolver()?.();
+}
+function hasSSRResolver() {
+  return getResolver() !== null;
 }
 
 // src/component/context.ts
@@ -472,4 +482,4 @@ function lifecycleEffect(fn) {
   return dispose;
 }
 
-export { registerSSRResolver, getSSRContext, createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, lifecycleEffect };
+export { registerSSRResolver, getSSRContext, hasSSRResolver, createContext, useContext, getContextScope, setContextScope, DisposalScopeError, onCleanup, _tryOnCleanup, pushScope, popScope, runCleanups, setReadValueCallback, untrack, batch, startSignalCollection, stopSignalCollection, signal, computed, domEffect, lifecycleEffect };

package/dist/shared/{chunk-hw67ckr3.js → chunk-4mtn7af6.js}

@@ -1,10 +1,13 @@
 import {
   isNavPrefetchActive
 } from "./chunk-jrtrk5z4.js";
+import {
+  isBrowser
+} from "./chunk-14eqne2a.js";
 import {
   getAdapter,
   isRenderNode
-} from "./chunk-h89w580h.js";
+} from "./chunk-afawz764.js";
 import {
   _tryOnCleanup,
   batch,
@@ -18,22 +21,89 @@ import {
   setReadValueCallback,
   signal,
   untrack
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/query/cache.ts
 class MemoryCache {
   _store = new Map;
+  _maxSize;
+  _refs = new Map;
+  _orphans = new Map;
+  constructor(options) {
+    const raw = options?.maxSize ?? 1000;
+    this._maxSize = Number.isNaN(raw) ? 1000 : Math.max(0, raw);
+  }
   get(key) {
-    return this._store.get(key);
+    if (!this._store.has(key))
+      return;
+    const value = this._store.get(key);
+    this._store.delete(key);
+    this._store.set(key, value);
+    return value;
   }
   set(key, value) {
+    if (this._store.has(key))
+      this._store.delete(key);
     this._store.set(key, value);
+    while (this._store.size > this._maxSize) {
+      const orphan = this._orphans.keys().next();
+      if (!orphan.done) {
+        if (this._store.has(orphan.value)) {
+          this._store.delete(orphan.value);
+          this._orphans.delete(orphan.value);
+          this._refs.delete(orphan.value);
+          continue;
+        }
+        this._orphans.delete(orphan.value);
+        this._refs.delete(orphan.value);
+        continue;
+      }
+      let evicted = false;
+      for (const k of this._store.keys()) {
+        if (k !== key && !this._refs.has(k)) {
+          this._store.delete(k);
+          evicted = true;
+          break;
+        }
+      }
+      if (evicted)
+        continue;
+      const oldest = this._store.keys().next();
+      if (oldest.done)
+        break;
+      this._store.delete(oldest.value);
+      this._refs.delete(oldest.value);
+      this._orphans.delete(oldest.value);
+    }
   }
   delete(key) {
     this._store.delete(key);
+    this._refs.delete(key);
+    this._orphans.delete(key);
   }
   clear() {
     this._store.clear();
+    this._refs.clear();
+    this._orphans.clear();
+  }
+  retain(key) {
+    const count = (this._refs.get(key) ?? 0) + 1;
+    this._refs.set(key, count);
+    this._orphans.delete(key);
+  }
+  release(key) {
+    const current = this._refs.get(key);
+    if (current === undefined)
+      return;
+    const count = current - 1;
+    if (count <= 0) {
+      this._refs.delete(key);
+      if (this._store.has(key)) {
+        this._orphans.set(key, true);
+      }
+    } else {
+      this._refs.set(key, count);
+    }
   }
 }
 
@@ -73,6 +143,93 @@ function hashString(str) {
   return (hash >>> 0).toString(36);
 }
 
+// src/store/field-selection-tracker.ts
+class FieldSelectionTracker {
+  _selectInfo = new Map;
+  _warned = new Set;
+  _onMiss;
+  constructor(options) {
+    this._onMiss = options?.onMiss;
+  }
+  registerSelect(type, id, fields, querySource) {
+    const key = `${type}:${id}`;
+    let info = this._selectInfo.get(key);
+    if (!info) {
+      info = { fields: new Set, querySources: new Set, fullFetch: false };
+      this._selectInfo.set(key, info);
+    }
+    for (const field of fields) {
+      info.fields.add(field);
+    }
+    info.querySources.add(querySource);
+  }
+  registerFullFetch(type, id) {
+    const key = `${type}:${id}`;
+    let info = this._selectInfo.get(key);
+    if (!info) {
+      info = { fields: new Set, querySources: new Set, fullFetch: true };
+      this._selectInfo.set(key, info);
+    } else {
+      info.fullFetch = true;
+    }
+  }
+  shouldWarn(type, id, field) {
+    const key = `${type}:${id}`;
+    const info = this._selectInfo.get(key);
+    if (!info || info.fullFetch)
+      return false;
+    return !info.fields.has(field);
+  }
+  removeEntity(type, id) {
+    const key = `${type}:${id}`;
+    this._selectInfo.delete(key);
+    const prefix = `${key}:`;
+    for (const warnKey of this._warned) {
+      if (warnKey.startsWith(prefix)) {
+        this._warned.delete(warnKey);
+      }
+    }
+  }
+  createDevProxy(entity, type, id) {
+    const key = `${type}:${id}`;
+    const info = this._selectInfo.get(key);
+    if (!info || info.fullFetch)
+      return entity;
+    const tracker = this;
+    return new Proxy(entity, {
+      get(target, prop, receiver) {
+        if (typeof prop === "string" && !INTERNAL_PROPS.has(prop) && tracker.shouldWarn(type, id, prop)) {
+          const warnKey = `${key}:${prop}`;
+          if (!tracker._warned.has(warnKey)) {
+            tracker._warned.add(warnKey);
+            const sources = [...info.querySources].join(", ");
+            const selectedFields = [...info.fields].sort().join(", ");
+            console.warn(`[vertz] Field "${prop}" was accessed on ${type}#${id} ` + `but was not in the select set.
+` + `        Query: "${sources}"
+` + `        Selected: ${selectedFields}
+` + `        Fix: use {entity.${prop}} in JSX, ` + "or add // @vertz-select-all above the query.");
+            tracker._onMiss?.(type, id, prop, sources);
+          }
+        }
+        return Reflect.get(target, prop, receiver);
+      }
+    });
+  }
+  clear() {
+    this._selectInfo.clear();
+    this._warned.clear();
+  }
+}
+var INTERNAL_PROPS = new Set([
+  "then",
+  "toJSON",
+  "toString",
+  "valueOf",
+  "constructor",
+  "$$typeof",
+  "__proto__"
+]);
+
 // src/store/relation-registry.ts
 var registry2 = new Map;
 function registerRelationSchema(entityType, schema) {
@@ -241,10 +398,14 @@ class EntityStore {
   _entities = new Map;
   _typeListeners = new Map;
   _queryIndices = new QueryResultIndex;
+  _fieldTracker = null;
   get queryIndices() {
     return this._queryIndices;
   }
   constructor(options) {
+    if (options?.devMode) {
+      this._fieldTracker = new FieldSelectionTracker;
+    }
     if (options?.initialData) {
       this.hydrate(options.initialData);
     }
@@ -261,7 +422,8 @@ class EntityStore {
       base: {},
       layers: new Map,
       refCount: 0,
-      orphanedAt: null
+      orphanedAt: null,
+      lastPlainVisible: null
     };
     this._getOrCreateTypeMap(type).set(id, newEntry);
     return sig;
@@ -275,6 +437,7 @@ class EntityStore {
       return;
     }
     batch(() => {
+      this.evictOrphans();
       for (const item of items) {
         const { normalized, extracted } = normalizeEntity(type, item);
         for (const [nestedType, nestedItems] of extracted) {
@@ -286,6 +449,15 @@ class EntityStore {
       }
     });
   }
+  mergeWithSelect(type, data, selectOptions) {
+    if (this._fieldTracker) {
+      const items = Array.isArray(data) ? data : [data];
+      for (const item of items) {
+        this._fieldTracker.registerSelect(type, item.id, selectOptions.fields, selectOptions.querySource);
+      }
+    }
+    this.merge(type, data);
+  }
   remove(type, id) {
     const typeMap = this._entities.get(type);
     if (!typeMap?.has(id)) {
@@ -297,6 +469,7 @@ class EntityStore {
     }
     typeMap.delete(id);
     this._queryIndices.removeEntity(id);
+    this._fieldTracker?.removeEntity(type, id);
     this._notifyTypeChange(type);
   }
   onTypeChange(type, callback) {
@@ -368,7 +541,7 @@ class EntityStore {
     if (!entry)
       return;
     entry.layers.set(mutationId, patch);
-    this._recomputeVisible(entry);
+    this._recomputeVisible(entry, type, id);
   }
   addRef(type, id) {
     const entry = this._entities.get(type)?.get(id);
@@ -391,12 +564,13 @@ class EntityStore {
   evictOrphans(maxAge = 300000) {
     const now = Date.now();
     let count = 0;
-    for (const [_type, typeMap] of this._entities) {
+    for (const [type, typeMap] of this._entities) {
       for (const [id, entry] of typeMap) {
         if (entry.refCount === 0 && entry.orphanedAt !== null && now - entry.orphanedAt >= maxAge && entry.layers.size === 0) {
           entry.signal.value = undefined;
           typeMap.delete(id);
           this._queryIndices.removeEntity(id);
+          this._fieldTracker?.removeEntity(type, id);
           count++;
         }
       }
@@ -420,7 +594,7 @@ class EntityStore {
     if (!entry)
       return;
     entry.layers.delete(mutationId);
-    this._recomputeVisible(entry);
+    this._recomputeVisible(entry, type, id);
   }
   removeOptimistic(type, id, _mutationId) {
     this.remove(type, id);
@@ -445,7 +619,7 @@ class EntityStore {
     }
     entry.base = normalized;
     entry.layers.delete(mutationId);
-    this._recomputeVisible(entry);
+    this._recomputeVisible(entry, type, id);
   }
   _mergeOne(type, item) {
     const id = item.id;
@@ -455,33 +629,42 @@ class EntityStore {
       const mergedBase = shallowMerge(entry.base, item);
       if (!shallowEqual(entry.base, mergedBase)) {
         entry.base = mergedBase;
-        this._recomputeVisible(entry);
+        this._recomputeVisible(entry, type, id);
       }
     } else {
-      const newSignal = signal(item);
+      const value = this._wrapWithFieldProxy(item, type, id);
+      const newSignal = signal(value);
       const newEntry = {
         signal: newSignal,
         base: item,
         layers: new Map,
         refCount: 0,
-        orphanedAt: null
+        orphanedAt: null,
+        lastPlainVisible: item
       };
       this._getOrCreateTypeMap(type).set(id, newEntry);
       this._notifyTypeChange(type);
     }
   }
-  _recomputeVisible(entry) {
+  _recomputeVisible(entry, type, id) {
     let visible = { ...entry.base };
     for (const patch of entry.layers.values()) {
       visible = shallowMerge(visible, patch);
     }
-    const current = entry.signal.peek();
-    if (current == null || !shallowEqual(current, visible)) {
+    const lastPlain = entry.lastPlainVisible;
+    if (lastPlain == null || !shallowEqual(lastPlain, visible)) {
+      entry.lastPlainVisible = visible;
+      const wrapped = type && id ? this._wrapWithFieldProxy(visible, type, id) : visible;
       untrack(() => {
-        entry.signal.value = visible;
+        entry.signal.value = wrapped;
       });
     }
   }
+  _wrapWithFieldProxy(entity, type, id) {
+    if (!this._fieldTracker)
+      return entity;
+    return this._fieldTracker.createDevProxy(entity, type, id);
+  }
   _getOrCreateTypeMap(type) {
     let typeMap = this._entities.get(type);
     if (!typeMap) {
@@ -705,6 +888,25 @@ function query(source, options = {}) {
   function getCacheKey() {
     return cacheKeyComputed.value;
   }
+  let currentRetainedKey = null;
+  const retainable = "retain" in cache && "release" in cache;
+  function retainKey(key) {
+    if (!retainable)
+      return;
+    if (currentRetainedKey === key)
+      return;
+    if (currentRetainedKey !== null) {
+      cache.release(currentRetainedKey);
+    }
+    cache.retain(key);
+    currentRetainedKey = key;
+  }
+  function releaseCurrentKey() {
+    if (!retainable || currentRetainedKey === null)
+      return;
+    cache.release(currentRetainedKey);
+    currentRetainedKey = null;
+  }
   function callThunkWithCapture() {
     const captured = [];
     const prevCb = setReadValueCallback((v) => captured.push(v));
@@ -782,7 +984,9 @@ function query(source, options = {}) {
     return raw;
   }) : rawData;
   if (initialData !== undefined) {
-    cache.set(getCacheKey(), initialData);
+    const initKey = getCacheKey();
+    cache.set(initKey, initialData);
+    retainKey(initKey);
   }
   const ssrTimeout = options.ssrTimeout ?? getGlobalSSRTimeout() ?? 300;
   if (isSSR() && enabled && ssrTimeout !== 0 && initialData === undefined) {
@@ -829,6 +1033,7 @@ function query(source, options = {}) {
       if (customKey) {
         const cached = cache.get(customKey);
         if (cached !== undefined) {
+          retainKey(customKey);
           normalizeToEntityStore(cached);
           rawData.value = cached;
           loading.value = false;
@@ -881,7 +1086,7 @@ function query(source, options = {}) {
     }, ms);
   }
   let visibilityHandler;
-  if (hasInterval && enabled && !isSSR() && typeof document !== "undefined") {
+  if (hasInterval && enabled && isBrowser()) {
     visibilityHandler = () => {
       if (document.visibilityState === "hidden") {
         intervalPaused = true;
@@ -900,6 +1105,7 @@ function query(source, options = {}) {
       if (id !== fetchId)
         return;
       cache.set(key, result);
+      retainKey(key);
       normalizeToEntityStore(result);
       rawData.value = result;
       loading.value = false;
@@ -937,6 +1143,7 @@ function query(source, options = {}) {
   }
   function refetch() {
     const key = getCacheKey();
+    currentRetainedKey = null;
     cache.delete(key);
     getInflight().delete(key);
     refetchTrigger.value = refetchTrigger.peek() + 1;
@@ -954,6 +1161,7 @@ function query(source, options = {}) {
         if (customKey) {
           const cached = untrack(() => cache.get(customKey));
           if (cached !== undefined) {
+            retainKey(customKey);
             untrack(() => {
               rawData.value = cached;
               loading.value = false;
@@ -967,6 +1175,7 @@ function query(source, options = {}) {
           const derivedKey = untrack(() => getCacheKey());
           const cached = untrack(() => cache.get(derivedKey));
           if (cached !== undefined) {
+            retainKey(derivedKey);
             untrack(() => {
               rawData.value = cached;
               loading.value = false;
@@ -1020,6 +1229,7 @@ function query(source, options = {}) {
       if (shouldCheckCache) {
         const cached = untrack(() => cache.get(key));
         if (cached !== undefined) {
+          retainKey(key);
           promise.catch(() => {});
           untrack(() => {
             rawData.value = cached;
@@ -1058,13 +1268,14 @@ function query(source, options = {}) {
       }
       referencedKeys.clear();
     }
+    releaseCurrentKey();
     disposeFn?.();
     unsubscribeBus?.();
     unregisterFromRegistry?.();
     ssrHydrationCleanup?.();
     clearTimeout(debounceTimer);
     clearTimeout(intervalTimer);
-    if (visibilityHandler && typeof document !== "undefined") {
+    if (visibilityHandler && isBrowser()) {
       document.removeEventListener("visibilitychange", visibilityHandler);
     }
     fetchId++;
@@ -1209,4 +1420,4 @@ function queryMatch(queryResult, handlers) {
   return wrapper;
 }
 
-export { MemoryCache, invalidate, deriveKey, registerRelationSchema, getRelationSchema, resetRelationSchemas_TEST_ONLY, EntityStore, QueryEnvelopeStore, getEntityStore, getQueryEnvelopeStore, getMutationEventBus, query, queryMatch };
+export { MemoryCache, invalidate, deriveKey, FieldSelectionTracker, registerRelationSchema, getRelationSchema, resetRelationSchemas_TEST_ONLY, EntityStore, QueryEnvelopeStore, getEntityStore, getQueryEnvelopeStore, getMutationEventBus, query, queryMatch };

package/dist/shared/{chunk-2sth83bd.js → chunk-6jyt4ycw.js}

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-c9xxsrat.js";
+} from "./chunk-dhehvmj0.js";
 
 // src/dom/animation.ts
 function onAnimationsComplete(el, callback) {
@@ -479,7 +479,72 @@ function hydrate(registry) {
     autoStrategy(el, doHydrate);
   }
 }
+
+// src/hydrate/island-hydrate.ts
+var hydrationQueue = [];
+var isProcessing = false;
+async function processQueue() {
+  if (isProcessing)
+    return;
+  isProcessing = true;
+  while (hydrationQueue.length > 0) {
+    const task = hydrationQueue.shift();
+    await task();
+  }
+  isProcessing = false;
+}
+function deserializeIslandProps(container) {
+  const script = container.querySelector(":scope > script[data-v-island-props]");
+  if (!script || !script.textContent) {
+    return {};
+  }
+  try {
+    return JSON.parse(script.textContent);
+  } catch {
+    return {};
+  }
+}
+function hydrateIslands(registry) {
+  const elements = document.querySelectorAll("[data-v-island]");
+  const registryKeys = Object.keys(registry);
+  for (const el of elements) {
+    if (el.hasAttribute("data-v-hydrated"))
+      continue;
+    const islandId = el.getAttribute("data-v-island");
+    if (!islandId)
+      continue;
+    const loader = registry[islandId];
+    if (!loader) {
+      console.error(`[vertz] Island "${islandId}" not found in registry. Available: [${registryKeys.join(", ")}]`);
+      continue;
+    }
+    const props = deserializeIslandProps(el);
+    const doHydrate = () => {
+      hydrationQueue.push(async () => {
+        try {
+          const mod = await loader();
+          const result = mod.default(props, el);
+          if (result instanceof Node) {
+            const children = Array.from(el.childNodes);
+            for (const child of children) {
+              if (child instanceof Element && child.hasAttribute("data-v-island-props")) {
+                continue;
+              }
+              el.removeChild(child);
+            }
+            el.appendChild(result);
+          }
+          el.setAttribute("data-v-hydrated", "");
+        } catch (error) {
+          console.error(`[vertz] Failed to hydrate island "${islandId}":`, error);
+        }
+      });
+      processQueue();
+    };
+    autoStrategy(el, doHydrate);
+  }
+}
 // src/query/index.ts
 import { isQueryDescriptor } from "@vertz/fetch";
 
-export { onAnimationsComplete, keyframes, ANIMATION_DURATION, ANIMATION_EASING, fadeIn, fadeOut, zoomIn, zoomOut, slideInFromTop, slideInFromBottom, slideOutToTop, slideOutToBottom, slideInFromLeft, slideInFromRight, slideOutToLeft, slideOutToRight, accordionDown, accordionUp, palettes, resolveComponent, deserializeProps, hydrate, isQueryDescriptor };
+export { onAnimationsComplete, keyframes, ANIMATION_DURATION, ANIMATION_EASING, fadeIn, fadeOut, zoomIn, zoomOut, slideInFromTop, slideInFromBottom, slideOutToTop, slideOutToBottom, slideInFromLeft, slideInFromRight, slideOutToLeft, slideOutToRight, accordionDown, accordionUp, palettes, resolveComponent, deserializeProps, hydrate, hydrateIslands, isQueryDescriptor };

package/dist/shared/{chunk-83g4h38e.js → chunk-6wd36w21.js}

@@ -44,6 +44,7 @@ function defineRoutes(map) {
       loader: config.loader,
       params: config.params,
       pattern,
+      prerender: config.prerender,
       searchParams: config.searchParams
     };
     if (config.children) {

package/dist/shared/{chunk-h89w580h.js → chunk-afawz764.js}

@@ -1,6 +1,6 @@
 import {
   getSSRContext
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/dom/dom-adapter.ts
 function createDOMAdapter() {