@vertz/ui 0.2.15 → 0.2.17

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-dksg08fq.js → chunk-07bh4m1e.js}

@@ -1,6 +1,6 @@
 import {
   domEffect
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/dom/attributes.ts
 function __attr(el, name, fn) {

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-nn9v1zmk.js → chunk-2wtb9x81.js}

@@ -1,7 +1,7 @@
 import {
   __classList,
   __on
-} from "./chunk-dksg08fq.js";
+} from "./chunk-07bh4m1e.js";
 import {
   __append,
   __element,
@@ -9,18 +9,25 @@ import {
   __exitChildren,
   __staticText,
   getIsHydrating
-} from "./chunk-j6qyxfdc.js";
+} from "./chunk-vndfjfdy.js";
+import {
+  RouterContext
+} from "./chunk-mtsvrj9e.js";
+import {
+  isBrowser
+} from "./chunk-14eqne2a.js";
 import {
   _tryOnCleanup,
   createContext,
   domEffect,
+  getSSRContext,
   popScope,
   pushScope,
   runCleanups,
   signal,
   untrack,
   useContext
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/router/link.ts
 var DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:"];
@@ -65,8 +72,10 @@ function createLink(currentPath, navigate, factoryOptions) {
       } else {
         __append(el, result);
       }
-    } else {
+    } else if (typeof children === "string") {
       __append(el, __staticText(children));
+    } else {
+      __append(el, children);
     }
     __exitChildren();
     if (activeClass) {
@@ -88,22 +97,49 @@ function createLink(currentPath, navigate, factoryOptions) {
     return el;
   };
 }
-
-// src/router/router-context.ts
-var RouterContext = createContext(undefined, "@vertz/ui::RouterContext");
-function useRouter() {
+function Link({ href, children, activeClass, className }) {
   const router = useContext(RouterContext);
   if (!router) {
-    throw new Error("useRouter() must be called within RouterContext.Provider");
+    throw new Error("Link must be used within a RouterContext.Provider (via createRouter)");
   }
-  return router;
-}
-function useParams() {
-  const router = useContext(RouterContext);
-  if (!router) {
-    throw new Error("useParams() must be called within RouterContext.Provider");
+  const safeHref = isSafeUrl(href) ? href : "#";
+  const handleClick = (event) => {
+    const mouseEvent = event;
+    if (mouseEvent.ctrlKey || mouseEvent.metaKey || mouseEvent.shiftKey || mouseEvent.altKey) {
+      return;
+    }
+    mouseEvent.preventDefault();
+    router.navigate({ to: safeHref });
+  };
+  const props = { href: safeHref };
+  if (className) {
+    props.class = className;
+  }
+  const el = __element("a", props);
+  __on(el, "click", handleClick);
+  __enterChildren(el);
+  if (typeof children === "function") {
+    const result = children();
+    if (typeof result === "string") {
+      __append(el, __staticText(result));
+    } else {
+      __append(el, result);
+    }
+  } else if (typeof children === "string") {
+    __append(el, __staticText(children));
+  } else {
+    __append(el, children);
+  }
+  __exitChildren();
+  if (activeClass) {
+    __classList(el, {
+      [activeClass]: () => {
+        router.current;
+        return isBrowser() ? window.location.pathname === safeHref : false;
+      }
+    });
   }
-  return router.current?.parsedParams ?? router.current?.params ?? {};
+  return el;
 }
 
 // src/router/outlet.ts
@@ -249,17 +285,44 @@ function buildLevels(matched) {
   }));
 }
 function buildInsideOutFactory(matched, levels, startAt, router) {
-  let factory = matched[matched.length - 1].route.component;
+  const ssrCtx = getSSRContext();
+  const wrapForSSR = (route, routeIndex) => {
+    if (!ssrCtx)
+      return route.component;
+    const resolved = ssrCtx.resolvedComponents?.get(route);
+    if (resolved)
+      return resolved;
+    return () => {
+      const result = route.component();
+      if (result instanceof Promise) {
+        if (!ssrCtx.pendingRouteComponents) {
+          ssrCtx.pendingRouteComponents = new Map;
+        }
+        ssrCtx.pendingRouteComponents.set(route, result);
+        for (let j = routeIndex + 1;j < matched.length; j++) {
+          const childRoute = matched[j].route;
+          if (!ssrCtx.pendingRouteComponents.has(childRoute)) {
+            const childResult = childRoute.component();
+            if (childResult instanceof Promise) {
+              ssrCtx.pendingRouteComponents.set(childRoute, childResult);
+            }
+          }
+        }
+      }
+      return result;
+    };
+  };
+  let factory = wrapForSSR(matched[matched.length - 1].route, matched.length - 1);
   for (let i = matched.length - 2;i >= startAt; i--) {
     const level = levels[i];
     const childFactory = factory;
     level.childSignal.value = childFactory;
-    const parentRoute = level.route;
+    const parentComponent = wrapForSSR(level.route, i);
     const cs = level.childSignal;
     factory = () => {
       let result;
       OutletContext.Provider({ childComponent: cs, router }, () => {
-        result = parentRoute.component();
+        result = parentComponent();
       });
       return result;
     };
@@ -285,4 +348,4 @@ function useSearchParams(searchSignal) {
   return searchSignal.value;
 }
 
-export { createLink, RouterContext, useRouter, useParams, OutletContext, Outlet, RouterView, parseSearchParams, useSearchParams };
+export { createLink, Link, OutletContext, Outlet, RouterView, parseSearchParams, useSearchParams };

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-4txc67nd.js → chunk-6jyt4ycw.js}

@@ -1,6 +1,6 @@
 import {
   injectCSS
-} from "./chunk-1wby7nex.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() {

package/dist/shared/{chunk-1wby7nex.js → chunk-dhehvmj0.js}

@@ -3,10 +3,10 @@ import {
   __element,
   __enterChildren,
   __exitChildren
-} from "./chunk-j6qyxfdc.js";
+} from "./chunk-vndfjfdy.js";
 import {
   getSSRContext
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/component/children.ts
 var MAX_RESOLVE_DEPTH = 100;
@@ -757,6 +757,143 @@ ${props}
 }`;
 }
 
+// src/css/sanitize.ts
+function sanitizeCssValue(value) {
+  return value.replace(/[;{}<>']/g, "").replace(/url\s*\(/gi, "").replace(/expression\s*\(/gi, "").replace(/@import/gi, "");
+}
+function escapeHtmlAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;");
+}
+
+// src/css/font.ts
+function font(family, options) {
+  return {
+    __brand: "FontDescriptor",
+    family,
+    weight: String(options.weight),
+    style: options.style ?? "normal",
+    display: options.display ?? "swap",
+    src: options.src,
+    fallback: options.fallback ?? [],
+    subsets: options.subsets ?? ["latin"],
+    unicodeRange: options.unicodeRange,
+    adjustFontFallback: options.adjustFontFallback ?? true
+  };
+}
+function toCssWeight(weight) {
+  return sanitizeCssValue(weight).replace("..", " ");
+}
+function buildFontFace(family, src, weight, style, display, unicodeRange) {
+  const safeFamily = sanitizeCssValue(family);
+  const safeSrc = sanitizeCssValue(src);
+  const safeStyle = sanitizeCssValue(style);
+  const safeDisplay = sanitizeCssValue(display);
+  const lines = [
+    "@font-face {",
+    `  font-family: '${safeFamily}';`,
+    `  font-style: ${safeStyle};`,
+    `  font-weight: ${toCssWeight(weight)};`,
+    `  font-display: ${safeDisplay};`,
+    `  src: url(${safeSrc}) format('woff2');`
+  ];
+  if (unicodeRange) {
+    lines.push(`  unicode-range: ${sanitizeCssValue(unicodeRange)};`);
+  }
+  lines.push("}");
+  return lines.join(`
+`);
+}
+var PERCENT_RE = /^\d+\.\d+%$/;
+function sanitizeMetricValue(value) {
+  if (!PERCENT_RE.test(value)) {
+    throw new Error(`Invalid font metric override value: "${value}"`);
+  }
+  return value;
+}
+function buildFallbackFontFace(family, metrics) {
+  const safeFamily = sanitizeCssValue(family);
+  const lines = [
+    "@font-face {",
+    `  font-family: '${safeFamily} Fallback';`,
+    `  src: local('${metrics.fallbackFont}');`,
+    `  ascent-override: ${sanitizeMetricValue(metrics.ascentOverride)};`,
+    `  descent-override: ${sanitizeMetricValue(metrics.descentOverride)};`,
+    `  line-gap-override: ${sanitizeMetricValue(metrics.lineGapOverride)};`,
+    `  size-adjust: ${sanitizeMetricValue(metrics.sizeAdjust)};`,
+    "}"
+  ];
+  return lines.join(`
+`);
+}
+function validateWoff2Src(path) {
+  if (!path.toLowerCase().endsWith(".woff2")) {
+    throw new Error(`Font src "${path}" is not a .woff2 file. Only woff2 format is currently supported.`);
+  }
+}
+function compileFonts(fonts, options) {
+  const fontFaces = [];
+  const cssVars = [];
+  const preloadPaths = [];
+  const fallbackMetrics = options?.fallbackMetrics;
+  for (const [key, descriptor] of Object.entries(fonts)) {
+    if (!/^[a-zA-Z0-9-]+$/.test(key)) {
+      throw new Error(`Font key "${key}" contains invalid CSS identifier characters. Use only [a-zA-Z0-9-].`);
+    }
+    const { family, weight, style, display, src, fallback, unicodeRange } = descriptor;
+    const adjustFontFallback = descriptor.adjustFontFallback ?? true;
+    const metrics = fallbackMetrics?.[key];
+    const shouldGenerateFallback = metrics && src && adjustFontFallback !== false;
+    const safeFamily = sanitizeCssValue(family);
+    const safeFallbacks = fallback.map(sanitizeCssValue);
+    const fallbackFontName = shouldGenerateFallback ? `'${safeFamily} Fallback'` : undefined;
+    const familyParts = [
+      `'${safeFamily}'`,
+      ...fallbackFontName ? [fallbackFontName] : [],
+      ...safeFallbacks
+    ];
+    const familyValue = familyParts.join(", ");
+    cssVars.push(`  --font-${sanitizeCssValue(key)}: ${familyValue};`);
+    if (!src)
+      continue;
+    if (typeof src === "string") {
+      validateWoff2Src(src);
+      fontFaces.push(buildFontFace(family, src, weight, style, display, unicodeRange));
+      preloadPaths.push(src);
+    } else {
+      for (const entry of src) {
+        validateWoff2Src(entry.path);
+        const entryWeight = entry.weight != null ? String(entry.weight) : weight;
+        const entryStyle = entry.style ?? style;
+        fontFaces.push(buildFontFace(family, entry.path, entryWeight, entryStyle, display, unicodeRange));
+      }
+      const first = src[0];
+      if (first) {
+        preloadPaths.push(first.path);
+      }
+    }
+    if (shouldGenerateFallback) {
+      fontFaces.push(buildFallbackFontFace(family, metrics));
+    }
+  }
+  const fontFaceCss = fontFaces.join(`
+
+`);
+  const cssVarLines = cssVars;
+  const cssVarsCss = cssVars.length > 0 ? `:root {
+${cssVars.join(`
+`)}
+}` : "";
+  const preloadTags = preloadPaths.map((p) => `<link rel="preload" href="${escapeHtmlAttr(p)}" as="font" type="font/woff2" crossorigin>`).join(`
+`);
+  const preloadItems = preloadPaths.map((href) => ({
+    href,
+    as: "font",
+    type: "font/woff2",
+    crossorigin: true
+  }));
+  return { fontFaceCss, cssVarsCss, cssVarLines, preloadTags, preloadItems };
+}
+
 // src/css/global-css.ts
 function globalCss(input) {
   const rules = [];
@@ -810,16 +947,14 @@ class InlineStyleError extends Error {
 }
 
 // src/css/theme.ts
-function sanitizeCssValue(value) {
-  return value.replace(/[;{}]/g, "").replace(/url\s*\(/gi, "").replace(/expression\s*\(/gi, "").replace(/@import/gi, "");
-}
 function defineTheme(input) {
   return {
     colors: input.colors,
-    spacing: input.spacing
+    spacing: input.spacing,
+    fonts: input.fonts
   };
 }
-function compileTheme(theme) {
+function compileTheme(theme, options) {
   const rootVars = [];
   const darkVars = [];
   const tokenPaths = [];
@@ -864,7 +999,22 @@ function compileTheme(theme) {
       tokenPaths.push(`spacing.${name}`);
     }
   }
+  let fontFaceCss = "";
+  let preloadTags = "";
+  let preloadItems = [];
+  if (theme.fonts) {
+    const compiled = compileFonts(theme.fonts, {
+      fallbackMetrics: options?.fallbackMetrics
+    });
+    fontFaceCss = compiled.fontFaceCss;
+    preloadTags = compiled.preloadTags;
+    preloadItems = compiled.preloadItems;
+    rootVars.push(...compiled.cssVarLines);
+  }
   const blocks = [];
+  if (fontFaceCss) {
+    blocks.push(fontFaceCss);
+  }
   if (rootVars.length > 0) {
     blocks.push(`:root {
 ${rootVars.join(`
@@ -880,7 +1030,9 @@ ${darkVars.join(`
   return {
     css: blocks.join(`
 `),
-    tokens: tokenPaths
+    tokens: tokenPaths,
+    preloadTags,
+    preloadItems
   };
 }
 
@@ -1017,4 +1169,4 @@ function variants(config) {
   return fn;
 }
 
-export { resolveChildren, children, PROPERTY_MAP, KEYWORD_MAP, DISPLAY_MAP, SPACING_SCALE, RADIUS_SCALE, SHADOW_SCALE, FONT_SIZE_SCALE, FONT_WEIGHT_SCALE, LINE_HEIGHT_SCALE, ALIGNMENT_MAP, SIZE_KEYWORDS, HEIGHT_AXIS_PROPERTIES, COLOR_NAMESPACES, CSS_COLOR_KEYWORDS, CONTENT_MAP, PSEUDO_PREFIXES, PSEUDO_MAP, injectCSS, resetInjectedStyles, getInjectedCSS, css, globalCss, s, defineTheme, compileTheme, ThemeProvider, variants };
+export { resolveChildren, children, PROPERTY_MAP, KEYWORD_MAP, DISPLAY_MAP, SPACING_SCALE, RADIUS_SCALE, SHADOW_SCALE, FONT_SIZE_SCALE, FONT_WEIGHT_SCALE, LINE_HEIGHT_SCALE, ALIGNMENT_MAP, SIZE_KEYWORDS, HEIGHT_AXIS_PROPERTIES, COLOR_NAMESPACES, CSS_COLOR_KEYWORDS, CONTENT_MAP, PSEUDO_PREFIXES, PSEUDO_MAP, injectCSS, resetInjectedStyles, getInjectedCSS, css, font, compileFonts, globalCss, s, defineTheme, compileTheme, ThemeProvider, variants };