@vertz/ui 0.2.0 → 0.2.2

package/dist/shared/chunk-q6cpe5k7.js

@@ -0,0 +1,230 @@
+import {
+  computed,
+  signal
+} from "./chunk-hrd0mft1.js";
+
+// src/form/field-state.ts
+function createFieldState(_name, initialValue) {
+  const error = signal(undefined);
+  const dirty = signal(false);
+  const touched = signal(false);
+  const value = signal(initialValue);
+  return {
+    error,
+    dirty,
+    touched,
+    value,
+    setValue(newValue) {
+      value.value = newValue;
+      dirty.value = newValue !== initialValue;
+    },
+    reset() {
+      value.value = initialValue;
+      error.value = undefined;
+      dirty.value = false;
+      touched.value = false;
+    }
+  };
+}
+
+// src/form/form-data.ts
+function formDataToObject(formData, options) {
+  const result = {};
+  const coerce = options?.coerce ?? false;
+  for (const [key, value] of formData.entries()) {
+    if (typeof value !== "string") {
+      continue;
+    }
+    result[key] = coerce ? coerceValue(value) : value;
+  }
+  return result;
+}
+function coerceValue(value) {
+  if (value === "true")
+    return true;
+  if (value === "false")
+    return false;
+  if (value !== "" && !Number.isNaN(Number(value))) {
+    return Number(value);
+  }
+  return value;
+}
+
+// src/form/validation.ts
+function validate(schema, data) {
+  const result = schema.parse(data);
+  if (result.ok) {
+    return { success: true, data: result.data, errors: {} };
+  }
+  const err = result.error;
+  if (err instanceof Error) {
+    const fieldErrors = err.fieldErrors;
+    if (fieldErrors && Object.keys(fieldErrors).length > 0) {
+      return { success: false, data: undefined, errors: fieldErrors };
+    }
+    const issues = err.issues;
+    if (Array.isArray(issues) && issues.length > 0) {
+      const errors = {};
+      for (const issue of issues) {
+        const key = Array.isArray(issue.path) && issue.path.length > 0 ? issue.path.join(".") : "_form";
+        if (!(key in errors)) {
+          errors[key] = issue.message ?? "Validation failed";
+        }
+      }
+      return { success: false, data: undefined, errors };
+    }
+    return { success: false, data: undefined, errors: { _form: err.message } };
+  }
+  return { success: false, data: undefined, errors: { _form: "Validation failed" } };
+}
+
+// src/form/form.ts
+function form(sdkMethod, options) {
+  const fieldCache = new Map;
+  const submitting = signal(false);
+  const fieldGeneration = signal(0);
+  const dirty = computed(() => {
+    fieldGeneration.value;
+    for (const field of fieldCache.values()) {
+      if (field.dirty.value)
+        return true;
+    }
+    return false;
+  });
+  const valid = computed(() => {
+    fieldGeneration.value;
+    for (const field of fieldCache.values()) {
+      if (field.error.value !== undefined)
+        return false;
+    }
+    return true;
+  });
+  function getOrCreateField(name) {
+    let field = fieldCache.get(name);
+    if (!field) {
+      const initialObj = typeof options?.initial === "function" ? options.initial() : options?.initial;
+      const initialValue = initialObj?.[name];
+      field = createFieldState(name, initialValue);
+      fieldCache.set(name, field);
+      fieldGeneration.value++;
+    }
+    return field;
+  }
+  const resolvedSchema = options?.schema ?? sdkMethod.meta?.bodySchema;
+  async function submitPipeline(formData) {
+    const data = formDataToObject(formData);
+    if (resolvedSchema) {
+      const result2 = validate(resolvedSchema, data);
+      if (!result2.success) {
+        for (const [fieldName, message] of Object.entries(result2.errors)) {
+          getOrCreateField(fieldName).error.value = message;
+        }
+        options?.onError?.(result2.errors);
+        return;
+      }
+    }
+    for (const field of fieldCache.values()) {
+      field.error.value = undefined;
+    }
+    submitting.value = true;
+    const result = await sdkMethod(data);
+    if (!result.ok) {
+      submitting.value = false;
+      const message = result.error.message;
+      getOrCreateField("_form").error.value = message;
+      options?.onError?.({ _form: message });
+      return;
+    }
+    submitting.value = false;
+    options?.onSuccess?.(result.data);
+    if (options?.resetOnSuccess) {
+      resetForm();
+    }
+  }
+  let boundElement;
+  function resetForm() {
+    for (const field of fieldCache.values()) {
+      field.reset();
+    }
+  }
+  async function submitPipelineWithReset(formData) {
+    await submitPipeline(formData);
+    if (options?.resetOnSuccess && !submitting.peek() && boundElement) {
+      const hasErrors = [...fieldCache.values()].some((f) => f.error.peek() !== undefined);
+      if (!hasErrors) {
+        boundElement.reset();
+      }
+    }
+  }
+  function handleInputOrChange(e) {
+    const target = e.target;
+    if (!target?.name)
+      return;
+    const field = getOrCreateField(target.name);
+    field.setValue(target.value);
+  }
+  function handleFocusout(e) {
+    const target = e.target;
+    if (!target?.name)
+      return;
+    const field = getOrCreateField(target.name);
+    field.touched.value = true;
+  }
+  const baseProperties = {
+    action: sdkMethod.url,
+    method: sdkMethod.method,
+    onSubmit: async (e) => {
+      e.preventDefault();
+      const formElement = e.target;
+      const formData = new FormData(formElement);
+      await submitPipeline(formData);
+      if (options?.resetOnSuccess && !submitting.peek()) {
+        const hasErrors = [...fieldCache.values()].some((f) => f.error.peek() !== undefined);
+        if (!hasErrors) {
+          formElement.reset();
+        }
+      }
+    },
+    reset: resetForm,
+    setFieldError: (field, message) => {
+      getOrCreateField(field).error.value = message;
+    },
+    submit: async (formData) => {
+      if (formData) {
+        await submitPipeline(formData);
+      } else if (boundElement) {
+        await submitPipelineWithReset(new FormData(boundElement));
+        return;
+      }
+      if (options?.resetOnSuccess && formData && !submitting.peek()) {
+        const hasErrors = [...fieldCache.values()].some((f) => f.error.peek() !== undefined);
+        if (!hasErrors && boundElement) {
+          boundElement.reset();
+        }
+      }
+    },
+    submitting,
+    dirty,
+    valid,
+    __bindElement: (el) => {
+      boundElement = el;
+      el.addEventListener("input", handleInputOrChange);
+      el.addEventListener("change", handleInputOrChange);
+      el.addEventListener("focusout", handleFocusout);
+    }
+  };
+  const knownProperties = new Set(Object.keys(baseProperties));
+  return new Proxy(baseProperties, {
+    get(target, prop, receiver) {
+      if (typeof prop === "string") {
+        if (knownProperties.has(prop)) {
+          return target[prop];
+        }
+        return getOrCreateField(prop);
+      }
+      return Reflect.get(target, prop, receiver);
+    }
+  });
+}
+
+export { createFieldState, formDataToObject, validate, form };

package/dist/shared/{chunk-f1ynwam4.js → chunk-qacth5ah.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) {
@@ -677,6 +788,9 @@ 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,
@@ -687,21 +801,36 @@ 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") {
         const varName = `--color-${name}`;
-        rootVars.push(`  ${varName}: ${value};`);
+        rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         tokenPaths.push(name);
       } else if (key.startsWith("_")) {
         const variant = key.slice(1);
         const varName = `--color-${name}`;
         if (variant === "dark") {
-          darkVars.push(`  ${varName}: ${value};`);
+          darkVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         }
       } else {
         const varName = `--color-${name}-${key}`;
-        rootVars.push(`  ${varName}: ${value};`);
+        rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
         tokenPaths.push(`${name}.${key}`);
       }
     }
@@ -709,7 +838,7 @@ function compileTheme(theme) {
   if (theme.spacing) {
     for (const [name, value] of Object.entries(theme.spacing)) {
       const varName = `--spacing-${name}`;
-      rootVars.push(`  ${varName}: ${value};`);
+      rootVars.push(`  ${varName}: ${sanitizeCssValue(value)};`);
       tokenPaths.push(`spacing.${name}`);
     }
   }
@@ -734,17 +863,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 +898,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 +906,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 +926,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 +952,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 +995,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 };