@vertz/ui 0.2.14 → 0.2.16

package/dist/shared/{chunk-nn9v1zmk.js → chunk-b0qqqk03.js}

@@ -1,7 +1,15 @@
 import {
-  __classList,
+  __classList
+} from "./chunk-1rxa2fz4.js";
+import {
+  RouterContext
+} from "./chunk-mtsvrj9e.js";
+import {
   __on
-} from "./chunk-dksg08fq.js";
+} from "./chunk-pnv25zep.js";
+import {
+  isBrowser
+} from "./chunk-14eqne2a.js";
 import {
   __append,
   __element,
@@ -9,18 +17,19 @@ import {
   __exitChildren,
   __staticText,
   getIsHydrating
-} from "./chunk-j6qyxfdc.js";
+} from "./chunk-vndfjfdy.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 +74,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 +99,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;
   }
-  return router.current?.parsedParams ?? router.current?.params ?? {};
+  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 el;
 }
 
 // src/router/outlet.ts
@@ -249,17 +287,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 +350,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-c9xxsrat.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;
@@ -82,6 +82,7 @@ var PROPERTY_MAP = {
   leading: { properties: ["line-height"], valueType: "line-height" },
   tracking: { properties: ["letter-spacing"], valueType: "raw" },
   decoration: { properties: ["text-decoration"], valueType: "raw" },
+  list: { properties: ["list-style"], valueType: "raw" },
   ring: { properties: ["outline"], valueType: "ring" },
   cursor: { properties: ["cursor"], valueType: "raw" },
   transition: { properties: ["transition"], valueType: "raw" },
@@ -115,7 +116,9 @@ var KEYWORD_MAP = {
   "select-none": [{ property: "user-select", value: "none" }],
   "pointer-events-none": [{ property: "pointer-events", value: "none" }],
   "whitespace-nowrap": [{ property: "white-space", value: "nowrap" }],
-  "shrink-0": [{ property: "flex-shrink", value: "0" }]
+  "shrink-0": [{ property: "flex-shrink", value: "0" }],
+  italic: [{ property: "font-style", value: "italic" }],
+  "not-italic": [{ property: "font-style", value: "normal" }]
 };
 var DISPLAY_MAP = {
   flex: "flex",
@@ -399,6 +402,9 @@ function resolveToken(parsed) {
   if (property === "ring") {
     return { declarations: resolveRingMulti(value), pseudo };
   }
+  if (property === "list") {
+    return { declarations: resolveList(value), pseudo };
+  }
   const resolvedValue = resolveValue(value, mapping.valueType, property);
   const declarations = mapping.properties.map((prop) => ({
     property: prop,
@@ -551,6 +557,17 @@ function resolveRingMulti(value) {
   }
   return [{ property: "outline-color", value: resolveColor(value, "ring") }];
 }
+var LIST_STYLE_KEYWORDS = new Set(["none", "disc", "decimal"]);
+var LIST_POSITION_KEYWORDS = new Set(["inside", "outside"]);
+function resolveList(value) {
+  if (LIST_STYLE_KEYWORDS.has(value)) {
+    return [{ property: "list-style", value }];
+  }
+  if (LIST_POSITION_KEYWORDS.has(value)) {
+    return [{ property: "list-style-position", value }];
+  }
+  throw new TokenResolveError(`Invalid list value '${value}'. Use: none, disc, decimal, inside, outside.`, `list:${value}`);
+}
 function resolveRaw(value, property) {
   if (property === "border-r" || property === "border-l" || property === "border-t" || property === "border-b") {
     const num = Number(value);
@@ -740,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 = [];
@@ -793,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 = [];
@@ -847,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(`
@@ -863,7 +1030,9 @@ ${darkVars.join(`
   return {
     css: blocks.join(`
 `),
-    tokens: tokenPaths
+    tokens: tokenPaths,
+    preloadTags,
+    preloadItems
   };
 }
 
@@ -1000,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 };

package/dist/shared/{chunk-mj7b4t40.js → chunk-fkbgbf3n.js}

@@ -1,35 +1,95 @@
 import {
   executeLoaders,
   matchRoute
-} from "./chunk-83g4h38e.js";
+} from "./chunk-6wd36w21.js";
 import {
   prefetchNavData
 } from "./chunk-jrtrk5z4.js";
+import {
+  isBrowser
+} from "./chunk-14eqne2a.js";
 import {
   getSSRContext,
   signal
-} from "./chunk-8hsz5y4a.js";
+} from "./chunk-4fwcwxn6.js";
 
 // src/router/navigate.ts
 var DEFAULT_NAV_THRESHOLD_MS = 500;
-function createRouter(routes, initialUrl, options) {
+function interpolatePath(path, params) {
+  const segments = path.split("/");
+  return segments.map((segment) => {
+    if (segment.startsWith(":")) {
+      const paramName = segment.slice(1);
+      const value = params?.[paramName];
+      if (value === undefined) {
+        throw new TypeError(`Missing route param "${paramName}" for path "${path}"`);
+      }
+      return encodeURIComponent(value);
+    }
+    if (segment === "*") {
+      const value = params?.["*"];
+      if (value === undefined) {
+        throw new TypeError(`Missing wildcard param "*" for path "${path}"`);
+      }
+      return value.replace(/^\/+|\/+$/g, "").split("/").map((part) => encodeURIComponent(part)).join("/");
+    }
+    return segment;
+  }).join("/");
+}
+function buildSearch(search) {
+  if (!search)
+    return "";
+  if (typeof search === "string") {
+    if (search === "")
+      return "";
+    return search.startsWith("?") ? search : `?${search}`;
+  }
+  const params = search instanceof URLSearchParams ? new URLSearchParams(search) : new URLSearchParams;
+  if (!(search instanceof URLSearchParams)) {
+    const entries = Object.entries(search).sort(([left], [right]) => left.localeCompare(right));
+    for (const [key, rawValue] of entries) {
+      const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+      for (const value of values) {
+        if (value === undefined || value === null)
+          continue;
+        params.append(key, String(value));
+      }
+    }
+  }
+  const query = params.toString();
+  return query ? `?${query}` : "";
+}
+function buildNavigationUrl(to, options) {
+  return `${interpolatePath(to, options?.params)}${buildSearch(options?.search)}`;
+}
+function createRouter(routes, initialUrlOrOptions, maybeOptions) {
+  const initialUrl = typeof initialUrlOrOptions === "string" ? initialUrlOrOptions : undefined;
+  const options = typeof initialUrlOrOptions === "object" ? initialUrlOrOptions : maybeOptions;
   const ssrCtx = getSSRContext();
-  const isSSR = ssrCtx !== undefined;
-  if (isSSR || typeof window === "undefined") {
+  if (!isBrowser()) {
+    let registerRoutesForDiscovery = function(ctx) {
+      if (!ctx.discoveredRoutes) {
+        ctx.discoveredRoutes = collectRoutePatterns(routes);
+      }
+    };
     const ssrUrl = initialUrl ?? ssrCtx?.url ?? "/";
     const fallbackMatch = matchRoute(routes, ssrUrl);
     return {
       current: {
         get value() {
           const ctx = getSSRContext();
-          if (ctx)
+          if (ctx) {
+            registerRoutesForDiscovery(ctx);
             return matchRoute(routes, ctx.url);
+          }
           return fallbackMatch;
         },
         peek() {
           const ctx = getSSRContext();
-          if (ctx)
+          if (ctx) {
+            registerRoutesForDiscovery(ctx);
             return matchRoute(routes, ctx.url);
+          }
           return fallbackMatch;
         },
         notify() {}
@@ -82,8 +142,12 @@ function createRouter(routes, initialUrl, options) {
   const current = {
     get value() {
       const ctx = getSSRContext();
-      if (ctx)
+      if (ctx) {
+        if (!ctx.discoveredRoutes) {
+          ctx.discoveredRoutes = collectRoutePatterns(routes);
+        }
         return matchRoute(routes, ctx.url);
+      }
       return _current.value;
     },
     set value(v) {
@@ -91,8 +155,12 @@ function createRouter(routes, initialUrl, options) {
     },
     peek() {
       const ctx = getSSRContext();
-      if (ctx)
+      if (ctx) {
+        if (!ctx.discoveredRoutes) {
+          ctx.discoveredRoutes = collectRoutePatterns(routes);
+        }
         return matchRoute(routes, ctx.url);
+      }
       return _current.peek();
     },
     notify() {
@@ -195,10 +263,11 @@ function createRouter(routes, initialUrl, options) {
       }
     }
   }
-  async function navigate(navUrl, navOptions) {
+  async function navigate(input) {
+    const navUrl = buildNavigationUrl(input.to, input);
     const gen = ++navigateGen;
     const handle = startPrefetch(navUrl);
-    if (navOptions?.replace) {
+    if (input.replace) {
       window.history.replaceState(null, "", navUrl);
     } else {
       window.history.pushState(null, "", navUrl);
@@ -250,5 +319,23 @@ function createRouter(routes, initialUrl, options) {
     searchParams
   };
 }
+function collectRoutePatterns(routes, prefix = "") {
+  const patterns = [];
+  for (const route of routes) {
+    const fullPattern = joinPatterns(prefix, route.pattern);
+    patterns.push(fullPattern);
+    if (route.children) {
+      patterns.push(...collectRoutePatterns(route.children, fullPattern));
+    }
+  }
+  return patterns;
+}
+function joinPatterns(parent, child) {
+  if (!parent || parent === "/")
+    return child;
+  if (child === "/")
+    return parent;
+  return `${parent.replace(/\/$/, "")}/${child.replace(/^\//, "")}`;
+}
 
 export { createRouter };