@vertz/ui 0.2.0 → 0.2.1

package/dist/shared/{chunk-f1ynwam4.js → chunk-0p5f7gmg.js}

@@ -1,3 +1,44 @@
+import {
+  __append,
+  __element,
+  __enterChildren,
+  __exitChildren
+} from "./chunk-ryb49346.js";
+
+// src/component/children.ts
+var MAX_RESOLVE_DEPTH = 100;
+function resolveChildren(value, _depth = 0) {
+  if (value == null) {
+    return [];
+  }
+  if (typeof value === "function") {
+    if (_depth >= MAX_RESOLVE_DEPTH) {
+      throw new Error("resolveChildren: max recursion depth exceeded — possible circular thunk");
+    }
+    return resolveChildren(value(), _depth + 1);
+  }
+  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, _depth);
+      for (const node of resolved) {
+        result.push(node);
+      }
+    }
+    return result;
+  }
+  return [value];
+}
+function children(accessor) {
+  return () => resolveChildren(accessor());
+}
+
 // src/css/token-tables.ts
 var PROPERTY_MAP = {
   p: { properties: ["padding"], valueType: "spacing" },
@@ -37,6 +78,7 @@ var PROPERTY_MAP = {
   weight: { properties: ["font-weight"], valueType: "font-weight" },
   leading: { properties: ["line-height"], valueType: "line-height" },
   tracking: { properties: ["letter-spacing"], valueType: "raw" },
+  decoration: { properties: ["text-decoration"], valueType: "raw" },
   ring: { properties: ["outline"], valueType: "ring" },
   cursor: { properties: ["cursor"], valueType: "raw" },
   transition: { properties: ["transition"], valueType: "raw" },
@@ -65,7 +107,12 @@ var KEYWORD_MAP = {
   uppercase: [{ property: "text-transform", value: "uppercase" }],
   lowercase: [{ property: "text-transform", value: "lowercase" }],
   capitalize: [{ property: "text-transform", value: "capitalize" }],
-  "outline-none": [{ property: "outline", value: "none" }]
+  "outline-none": [{ property: "outline", value: "none" }],
+  "overflow-hidden": [{ property: "overflow", value: "hidden" }],
+  "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" }]
 };
 var DISPLAY_MAP = {
   flex: "flex",
@@ -114,7 +161,8 @@ var SPACING_SCALE = {
 };
 var RADIUS_SCALE = {
   none: "0",
-  sm: "0.125rem",
+  xs: "0.125rem",
+  sm: "0.25rem",
   md: "0.375rem",
   lg: "0.5rem",
   xl: "0.75rem",
@@ -123,6 +171,7 @@ var RADIUS_SCALE = {
   full: "9999px"
 };
 var SHADOW_SCALE = {
+  xs: "0 1px 1px 0 rgb(0 0 0 / 0.03)",
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
   lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
@@ -209,7 +258,14 @@ var COLOR_NAMESPACES = new Set([
   "input",
   "card",
   "popover",
-  "gray"
+  "gray",
+  "primary-foreground",
+  "secondary-foreground",
+  "accent-foreground",
+  "destructive-foreground",
+  "muted-foreground",
+  "card-foreground",
+  "popover-foreground"
 ]);
 var CSS_COLOR_KEYWORDS = new Set([
   "transparent",
@@ -244,8 +300,8 @@ var PSEUDO_MAP = {
 };
 
 // src/css/class-generator.ts
-function generateClassName(filePath, blockName) {
-  const input = `${filePath}::${blockName}`;
+function generateClassName(filePath, blockName, styleFingerprint = "") {
+  const input = styleFingerprint ? `${filePath}::${blockName}::${styleFingerprint}` : `${filePath}::${blockName}`;
   const hash = djb2Hash(input);
   return `_${hash}`;
 }
@@ -558,20 +614,47 @@ function formatShorthand(parsed) {
 // src/css/css.ts
 var DEFAULT_FILE_PATH = "__runtime__";
 var injectedCSS = new Set;
+var vertzSheets = new Set;
 function injectCSS(cssText) {
-  if (!cssText || typeof document === "undefined" || injectedCSS.has(cssText))
+  if (!cssText)
+    return;
+  const isSSR = typeof globalThis.__SSR_URL__ === "string";
+  if (!isSSR && injectedCSS.has(cssText))
     return;
   injectedCSS.add(cssText);
+  if (typeof document === "undefined")
+    return;
+  if (typeof CSSStyleSheet !== "undefined" && document.adoptedStyleSheets !== undefined) {
+    const sheet = new CSSStyleSheet;
+    sheet.replaceSync(cssText);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    vertzSheets.add(sheet);
+    return;
+  }
   const style = document.createElement("style");
   style.setAttribute("data-vertz-css", "");
   style.textContent = cssText;
   document.head.appendChild(style);
 }
+function resetInjectedStyles() {
+  injectedCSS.clear();
+  if (typeof document !== "undefined" && document.adoptedStyleSheets !== undefined) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter((s) => !vertzSheets.has(s));
+  }
+  vertzSheets.clear();
+}
+function getInjectedCSS() {
+  return Array.from(injectedCSS);
+}
 function css(input, filePath = DEFAULT_FILE_PATH) {
+  if ("css" in input) {
+    throw new Error("css(): block name 'css' is reserved. Rename the block.");
+  }
   const classNames = {};
   const cssRules = [];
   for (const [blockName, entries] of Object.entries(input)) {
-    const className = generateClassName(filePath, blockName);
+    const styleFingerprint = serializeEntries(entries);
+    const className = generateClassName(filePath, blockName, styleFingerprint);
     classNames[blockName] = className;
     const baseDeclarations = [];
     const pseudoDeclarations = new Map;
@@ -591,12 +674,20 @@ function css(input, filePath = DEFAULT_FILE_PATH) {
         for (const [selector, nestedEntries] of Object.entries(entry)) {
           const nestedDecls = [];
           for (const nestedEntry of nestedEntries) {
-            const parsed = parseShorthand(nestedEntry);
-            const resolved = resolveToken(parsed);
-            nestedDecls.push(...resolved.declarations);
+            if (typeof nestedEntry === "string") {
+              const parsed = parseShorthand(nestedEntry);
+              const resolved = resolveToken(parsed);
+              nestedDecls.push(...resolved.declarations);
+            } else if ("property" in nestedEntry && "value" in nestedEntry) {
+              nestedDecls.push({ property: nestedEntry.property, value: nestedEntry.value });
+            }
+          }
+          if (selector.startsWith("@")) {
+            nestedRules.push(formatAtRule(selector, `.${className}`, nestedDecls));
+          } else {
+            const resolvedSelector = selector.replaceAll("&", `.${className}`);
+            nestedRules.push(formatRule(resolvedSelector, nestedDecls));
           }
-          const resolvedSelector = selector.replace("&", `.${className}`);
-          nestedRules.push(formatRule(resolvedSelector, nestedDecls));
         }
       }
     }
@@ -611,10 +702,21 @@ function css(input, filePath = DEFAULT_FILE_PATH) {
   const cssText = cssRules.join(`
 `);
   injectCSS(cssText);
-  return {
-    classNames,
-    css: cssText
-  };
+  const result = { ...classNames };
+  Object.defineProperty(result, "css", {
+    value: cssText,
+    enumerable: false,
+    configurable: false,
+    writable: false
+  });
+  return result;
+}
+function serializeEntries(entries) {
+  return entries.map((entry) => {
+    if (typeof entry === "string")
+      return entry;
+    return Object.entries(entry).map(([sel, vals]) => `${sel}:{${vals.map((v) => typeof v === "string" ? v : `${v.property}=${v.value}`).join(",")}}`).join(";");
+  }).join("|");
 }
 function formatRule(selector, declarations) {
   const props = declarations.map((d) => `  ${d.property}: ${d.value};`).join(`
@@ -623,6 +725,15 @@ function formatRule(selector, declarations) {
 ${props}
 }`;
 }
+function formatAtRule(atRule, classSelector, declarations) {
+  const props = declarations.map((d) => `    ${d.property}: ${d.value};`).join(`
+`);
+  return `${atRule} {
+  ${classSelector} {
+${props}
+  }
+}`;
+}
 
 // src/css/global-css.ts
 function globalCss(input) {
@@ -687,6 +798,21 @@ function compileTheme(theme) {
   const rootVars = [];
   const darkVars = [];
   const tokenPaths = [];
+  for (const name of Object.keys(theme.colors)) {
+    if (/[A-Z]/.test(name)) {
+      throw new Error(`Color token '${name}' uses camelCase. Use kebab-case to match CSS custom property naming.`);
+    }
+  }
+  for (const [name, values] of Object.entries(theme.colors)) {
+    for (const key of Object.keys(values)) {
+      if (key === "DEFAULT" || key.startsWith("_"))
+        continue;
+      const compoundName = `${name}-${key}`;
+      if (COLOR_NAMESPACES.has(compoundName)) {
+        throw new Error(`Token collision: '${name}.${key}' produces CSS variable '--color-${name}-${key}' ` + `which conflicts with semantic token '${compoundName}'.`);
+      }
+    }
+  }
   for (const [name, values] of Object.entries(theme.colors)) {
     for (const [key, value] of Object.entries(values)) {
       if (key === "DEFAULT") {
@@ -734,17 +860,14 @@ ${darkVars.join(`
 }
 
 // src/css/theme-provider.ts
-function ThemeProvider(props) {
-  const { theme = "light", children } = props;
-  const el = document.createElement("div");
-  el.setAttribute("data-theme", theme);
-  for (const child of children) {
-    if (typeof child === "string") {
-      el.appendChild(document.createTextNode(child));
-    } else {
-      el.appendChild(child);
-    }
-  }
+function ThemeProvider({ theme = "light", children: children2 }) {
+  const el = __element("div", { "data-theme": theme });
+  __enterChildren(el);
+  const nodes = resolveChildren(children2);
+  for (const node of nodes) {
+    __append(el, node);
+  }
+  __exitChildren();
   return el;
 }
 
@@ -772,7 +895,7 @@ function deriveConfigKey(config) {
 function variants(config) {
   const { base, variants: variantDefs, defaultVariants, compoundVariants } = config;
   const filePath = deriveConfigKey(config);
-  const baseResult = base.length > 0 ? css({ base }, filePath) : { classNames: {}, css: "" };
+  const baseResult = css({ base }, filePath);
   const variantResults = {};
   for (const [variantName, options] of Object.entries(variantDefs)) {
     variantResults[variantName] = {};
@@ -780,7 +903,7 @@ function variants(config) {
       if (styles.length > 0) {
         const blockName = `${variantName}_${optionName}`;
         const result = css({ [blockName]: styles }, filePath);
-        const className = result.classNames[blockName];
+        const className = result[blockName];
         if (className) {
           variantResults[variantName][optionName] = {
             className,
@@ -800,7 +923,7 @@ function variants(config) {
       if (styles.length > 0) {
         const blockName = `compound_${i}`;
         const result = css({ [blockName]: styles }, filePath);
-        const className = result.classNames[blockName];
+        const className = result[blockName];
         if (className) {
           compoundResults.push({
             conditions,
@@ -826,7 +949,7 @@ function variants(config) {
   }
   const fn = (props) => {
     const classNames = [];
-    const baseClassName = baseResult.classNames.base;
+    const baseClassName = baseResult.base;
     if (baseClassName) {
       classNames.push(baseClassName);
     }
@@ -869,4 +992,4 @@ function variants(config) {
   return fn;
 }
 
-export { 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, 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, globalCss, s, defineTheme, compileTheme, ThemeProvider, variants };

package/dist/shared/{chunk-j8vzvne3.js → chunk-9e92w0wt.js}

@@ -67,7 +67,10 @@ function matchRoute(routes, url) {
       for (const [key, value] of searchParams.entries()) {
         raw[key] = value;
       }
-      search = m.route.searchParams.parse(raw);
+      const parseResult = m.route.searchParams.parse(raw);
+      if (parseResult.ok) {
+        search = parseResult.data;
+      }
       break;
     }
   }

package/dist/shared/{chunk-xd9d7q5p.js → chunk-cq7xg4xe.js}

@@ -1,13 +1,17 @@
 import {
   executeLoaders,
   matchRoute
-} from "./chunk-j8vzvne3.js";
+} from "./chunk-9e92w0wt.js";
+import {
+  prefetchNavData
+} from "./chunk-vx0kzack.js";
 import {
   signal
-} from "./chunk-pgymxpn1.js";
+} from "./chunk-hrd0mft1.js";
 
 // src/router/navigate.ts
-function createRouter(routes, initialUrl) {
+var DEFAULT_NAV_THRESHOLD_MS = 500;
+function createRouter(routes, initialUrl, options) {
   const isSSR = typeof window === "undefined" || typeof globalThis.__SSR_URL__ !== "undefined";
   let url;
   if (initialUrl) {
@@ -24,6 +28,42 @@ function createRouter(routes, initialUrl) {
   const searchParams = signal(initialMatch?.search ?? {});
   let navigationGen = 0;
   let currentAbort = null;
+  const serverNavEnabled = !!options?.serverNav;
+  const serverNavTimeout = typeof options?.serverNav === "object" ? options.serverNav.timeout : undefined;
+  const prefetchFn = options?._prefetchNavData ?? (serverNavEnabled ? prefetchNavData : null);
+  let activePrefetch = null;
+  function startPrefetch(navUrl) {
+    if (!serverNavEnabled || !prefetchFn)
+      return null;
+    if (activePrefetch) {
+      activePrefetch.abort();
+    }
+    const prefetchOpts = {};
+    if (serverNavTimeout !== undefined) {
+      prefetchOpts.timeout = serverNavTimeout;
+    }
+    activePrefetch = prefetchFn(navUrl, prefetchOpts);
+    return activePrefetch;
+  }
+  async function awaitPrefetch(handle) {
+    if (!handle?.done)
+      return;
+    await Promise.race([
+      handle.done,
+      new Promise((r) => setTimeout(r, DEFAULT_NAV_THRESHOLD_MS))
+    ]);
+  }
+  if (isSSR) {
+    const g = globalThis;
+    const prev = g.__VERTZ_SSR_SYNC_ROUTER__;
+    g.__VERTZ_SSR_SYNC_ROUTER__ = (ssrUrl) => {
+      if (typeof prev === "function")
+        prev(ssrUrl);
+      const match = matchRoute(routes, ssrUrl);
+      current.value = match;
+      searchParams.value = match?.search ?? {};
+    };
+  }
   if (initialMatch) {
     const gen = ++navigationGen;
     const abort = new AbortController;
@@ -63,15 +103,19 @@ function createRouter(routes, initialUrl) {
       }
     }
   }
-  async function navigate(url2, options) {
+  async function navigate(navUrl, navOptions) {
+    const handle = startPrefetch(navUrl);
     if (!isSSR) {
-      if (options?.replace) {
-        window.history.replaceState(null, "", url2);
+      if (navOptions?.replace) {
+        window.history.replaceState(null, "", navUrl);
       } else {
-        window.history.pushState(null, "", url2);
+        window.history.pushState(null, "", navUrl);
       }
     }
-    await applyNavigation(url2);
+    if (handle?.done) {
+      await awaitPrefetch(handle);
+    }
+    await applyNavigation(navUrl);
   }
   async function revalidate() {
     const match = current.value;
@@ -88,8 +132,9 @@ function createRouter(routes, initialUrl) {
   let onPopState = null;
   if (!isSSR) {
     onPopState = () => {
-      const url2 = window.location.pathname + window.location.search;
-      applyNavigation(url2).catch(() => {});
+      const popUrl = window.location.pathname + window.location.search;
+      startPrefetch(popUrl);
+      applyNavigation(popUrl).catch(() => {});
     };
     window.addEventListener("popstate", onPopState);
   }
@@ -100,6 +145,10 @@ function createRouter(routes, initialUrl) {
     if (currentAbort) {
       currentAbort.abort();
     }
+    if (activePrefetch) {
+      activePrefetch.abort();
+      activePrefetch = null;
+    }
   }
   return {
     current,

package/dist/shared/chunk-g4rch80a.js

@@ -0,0 +1,33 @@
+// src/dom/dom-adapter.ts
+function createDOMAdapter() {
+  return {
+    createElement: (tag) => document.createElement(tag),
+    createElementNS: (ns, tag) => document.createElementNS(ns, tag),
+    createTextNode: (text) => document.createTextNode(text),
+    createComment: (text) => document.createComment(text),
+    createDocumentFragment: () => document.createDocumentFragment(),
+    isNode: (value) => typeof Node !== "undefined" && value instanceof Node
+  };
+}
+
+// src/dom/adapter.ts
+var RENDER_NODE_BRAND = Symbol.for("vertz:render-node");
+function isRenderNode(value) {
+  if (value == null || typeof value !== "object")
+    return false;
+  if (RENDER_NODE_BRAND in value)
+    return true;
+  return typeof Node !== "undefined" && value instanceof Node;
+}
+var currentAdapter = null;
+function getAdapter() {
+  if (!currentAdapter) {
+    currentAdapter = createDOMAdapter();
+  }
+  return currentAdapter;
+}
+function setAdapter(adapter) {
+  currentAdapter = adapter;
+}
+
+export { createDOMAdapter, RENDER_NODE_BRAND, isRenderNode, getAdapter, setAdapter };