@vertz/ui 0.2.0 → 0.2.1

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-ryb49346.js

@@ -0,0 +1,374 @@
+import {
+  getAdapter,
+  isRenderNode
+} from "./chunk-g4rch80a.js";
+import {
+  domEffect
+} from "./chunk-hrd0mft1.js";
+import {
+  SVG_NS,
+  isSVGTag,
+  normalizeSVGAttr
+} from "./chunk-prj7nm08.js";
+
+// src/hydrate/hydration-context.ts
+var isHydrating = false;
+var currentNode = null;
+var cursorStack = [];
+var hydrationRoot = null;
+var claimedNodes = null;
+function isDebug() {
+  if (typeof process !== "undefined" && true) {
+    return true;
+  }
+  return typeof globalThis !== "undefined" && globalThis.__VERTZ_HYDRATION_DEBUG__ === true;
+}
+function startHydration(root) {
+  if (isHydrating) {
+    throw new Error("[hydrate] startHydration() called while hydration is already active. " + "Concurrent hydration is not supported.");
+  }
+  isHydrating = true;
+  currentNode = root.firstChild;
+  cursorStack.length = 0;
+  if (isDebug()) {
+    hydrationRoot = root;
+    claimedNodes = new WeakSet;
+  }
+}
+function endHydration() {
+  if (isDebug()) {
+    if (currentNode) {
+      console.debug("[hydrate] Hydration ended with unclaimed nodes remaining. " + "This may indicate SSR/client tree mismatch or browser extension nodes.");
+    }
+    if (cursorStack.length > 0) {
+      console.debug(`[hydrate] Hydration ended with unbalanced cursor stack (depth: ${cursorStack.length}). ` + "Check that __enterChildren/__exitChildren calls are paired.");
+    }
+  }
+  if (hydrationRoot && claimedNodes) {
+    const unclaimed = findUnclaimedNodes(hydrationRoot, claimedNodes);
+    if (unclaimed.length > 0) {
+      console.warn(`[hydrate] ${unclaimed.length} SSR node(s) not claimed during hydration:
+` + unclaimed.map((n) => `  - ${describeNode(n)}`).join(`
+`));
+    }
+  }
+  hydrationRoot = null;
+  claimedNodes = null;
+  isHydrating = false;
+  currentNode = null;
+  cursorStack.length = 0;
+}
+function getIsHydrating() {
+  return isHydrating;
+}
+function pauseHydration() {
+  isHydrating = false;
+}
+function resumeHydration() {
+  isHydrating = true;
+}
+function claimElement(tag) {
+  const upperTag = tag.toUpperCase();
+  while (currentNode) {
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      const el = currentNode;
+      if (el.tagName === upperTag) {
+        if (isDebug()) {
+          const id = el.id ? `#${el.id}` : "";
+          const cls = el.className ? `.${el.className.split(" ")[0]}` : "";
+          console.debug(`[hydrate] claimElement(<${tag}${id}${cls}>) ✓ depth=${cursorStack.length}`);
+        }
+        if (claimedNodes)
+          claimedNodes.add(el);
+        currentNode = el.nextSibling;
+        return el;
+      }
+      if (isDebug()) {
+        console.debug(`[hydrate] Skipping non-matching node: <${el.tagName.toLowerCase()}> (expected <${tag}>)`);
+      }
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn(`[hydrate] Expected <${tag}> but no matching SSR node found. Creating new element.`);
+  }
+  return null;
+}
+function claimText() {
+  while (currentNode) {
+    if (currentNode.nodeType === Node.TEXT_NODE) {
+      const text = currentNode;
+      if (isDebug()) {
+        const preview = text.data.length > 30 ? text.data.slice(0, 30) + "..." : text.data;
+        console.debug(`[hydrate] claimText("${preview}") ✓ depth=${cursorStack.length}`);
+      }
+      if (claimedNodes)
+        claimedNodes.add(text);
+      currentNode = text.nextSibling;
+      return text;
+    }
+    if (currentNode.nodeType === Node.ELEMENT_NODE) {
+      break;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn("[hydrate] Expected text node but no matching SSR node found.");
+  }
+  return null;
+}
+function claimComment() {
+  while (currentNode) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const comment = currentNode;
+      if (claimedNodes)
+        claimedNodes.add(comment);
+      currentNode = comment.nextSibling;
+      return comment;
+    }
+    currentNode = currentNode.nextSibling;
+  }
+  if (isDebug()) {
+    console.warn("[hydrate] Expected comment node but no matching SSR node found.");
+  }
+  return null;
+}
+function enterChildren(el) {
+  cursorStack.push(currentNode);
+  currentNode = el.firstChild;
+}
+function exitChildren() {
+  if (cursorStack.length === 0) {
+    if (isDebug()) {
+      console.warn("[hydrate] exitChildren() called with empty stack. " + "This likely means __exitChildren was called without a matching __enterChildren.");
+    }
+    currentNode = null;
+    return;
+  }
+  currentNode = cursorStack.pop() ?? null;
+}
+function findUnclaimedNodes(root, claimed) {
+  const unclaimed = [];
+  function walk(node) {
+    let child = node.firstChild;
+    while (child) {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const el = child;
+        if (el.tagName.includes("-")) {
+          child = child.nextSibling;
+          continue;
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE && claimed.has(child) && child.tagName === "SPAN" && child.style.display === "contents") {
+        child = child.nextSibling;
+        continue;
+      }
+      if (!claimed.has(child)) {
+        if (child.nodeType === Node.ELEMENT_NODE || child.nodeType === Node.TEXT_NODE || child.nodeType === Node.COMMENT_NODE) {
+          unclaimed.push(child);
+        }
+      }
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        walk(child);
+      }
+      child = child.nextSibling;
+    }
+  }
+  walk(root);
+  return unclaimed;
+}
+function describeNode(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.className ? `.${String(el.className).split(" ")[0]}` : "";
+    return `<${el.tagName.toLowerCase()}${id}${cls}>`;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    const data = node.data;
+    const preview = data.length > 20 ? data.slice(0, 20) + "..." : data;
+    return `text("${preview}")`;
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `<!-- ${node.data} -->`;
+  }
+  return `[node type=${node.nodeType}]`;
+}
+
+// src/dom/element.ts
+var MAX_THUNK_DEPTH = 100;
+function resolveAndAppend(parent, value, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("resolveAndAppend: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (typeof value === "function") {
+    resolveAndAppend(parent, value(), depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndAppend(parent, item, depth);
+    }
+    return;
+  }
+  if (isRenderNode(value)) {
+    parent.appendChild(value);
+    return;
+  }
+  const text = typeof value === "string" ? value : String(value);
+  parent.appendChild(getAdapter().createTextNode(text));
+}
+function __text(fn) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed) {
+      const node2 = claimed;
+      node2.dispose = domEffect(() => {
+        node2.data = fn();
+      });
+      return node2;
+    }
+  }
+  const node = getAdapter().createTextNode("");
+  node.dispose = domEffect(() => {
+    node.data = fn();
+  });
+  return node;
+}
+function __child(fn) {
+  let wrapper;
+  if (getIsHydrating()) {
+    const claimed = claimElement("span");
+    if (claimed) {
+      wrapper = claimed;
+      while (wrapper.firstChild) {
+        wrapper.removeChild(wrapper.firstChild);
+      }
+      pauseHydration();
+      try {
+        wrapper.dispose = domEffect(() => {
+          const value = fn();
+          if (isRenderNode(value) && wrapper.childNodes.length === 1 && wrapper.firstChild === value) {
+            return;
+          }
+          while (wrapper.firstChild) {
+            wrapper.removeChild(wrapper.firstChild);
+          }
+          resolveAndAppend(wrapper, value);
+        });
+      } finally {
+        resumeHydration();
+      }
+      return wrapper;
+    }
+  }
+  wrapper = getAdapter().createElement("span");
+  wrapper.style.display = "contents";
+  wrapper.dispose = domEffect(() => {
+    const value = fn();
+    if (isRenderNode(value) && wrapper.childNodes.length === 1 && wrapper.firstChild === value) {
+      return;
+    }
+    while (wrapper.firstChild) {
+      wrapper.removeChild(wrapper.firstChild);
+    }
+    resolveAndAppend(wrapper, value);
+  });
+  return wrapper;
+}
+function resolveAndInsert(parent, value, depth = 0) {
+  if (depth >= MAX_THUNK_DEPTH) {
+    throw new Error("__insert: max recursion depth exceeded — possible circular thunk");
+  }
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  if (typeof value === "function") {
+    resolveAndInsert(parent, value(), depth + 1);
+    return;
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      resolveAndInsert(parent, item, depth);
+    }
+    return;
+  }
+  insertLeaf(parent, value);
+}
+function insertLeaf(parent, value) {
+  if (getIsHydrating()) {
+    if (isRenderNode(value)) {
+      return;
+    }
+    claimText();
+    return;
+  }
+  if (isRenderNode(value)) {
+    parent.appendChild(value);
+    return;
+  }
+  const text = typeof value === "string" ? value : String(value);
+  parent.appendChild(getAdapter().createTextNode(text));
+}
+function __insert(parent, value) {
+  if (value == null || typeof value === "boolean") {
+    return;
+  }
+  resolveAndInsert(parent, value);
+}
+function __element(tag, props) {
+  if (getIsHydrating()) {
+    const claimed = claimElement(tag);
+    if (claimed) {
+      if (props && typeof process !== "undefined" && true) {
+        for (const [key, value] of Object.entries(props)) {
+          if (key === "role" || key.startsWith("aria-")) {
+            const actual = claimed.getAttribute(key);
+            if (actual !== value) {
+              console.warn(`[hydrate] ARIA mismatch on <${tag}>: ${key}="${actual}" (expected "${value}")`);
+            }
+          }
+        }
+      }
+      return claimed;
+    }
+  }
+  const adapter = getAdapter();
+  const svg = isSVGTag(tag);
+  const el = svg ? adapter.createElementNS(SVG_NS, tag) : adapter.createElement(tag);
+  if (props) {
+    for (const [key, value] of Object.entries(props)) {
+      const attrName = svg ? normalizeSVGAttr(key) : key;
+      el.setAttribute(attrName, value);
+    }
+  }
+  return el;
+}
+function __append(parent, child) {
+  if (getIsHydrating())
+    return;
+  parent.appendChild(child);
+}
+function __staticText(text) {
+  if (getIsHydrating()) {
+    const claimed = claimText();
+    if (claimed)
+      return claimed;
+  }
+  return getAdapter().createTextNode(text);
+}
+function __enterChildren(el) {
+  if (getIsHydrating()) {
+    enterChildren(el);
+  }
+}
+function __exitChildren() {
+  if (getIsHydrating()) {
+    exitChildren();
+  }
+}
+
+export { startHydration, endHydration, getIsHydrating, claimText, claimComment, __text, __child, __insert, __element, __append, __staticText, __enterChildren, __exitChildren };

package/dist/shared/chunk-v3yyf79g.js

@@ -0,0 +1,48 @@
+import {
+  domEffect
+} from "./chunk-hrd0mft1.js";
+
+// src/dom/attributes.ts
+function __attr(el, name, fn) {
+  return domEffect(() => {
+    const value = fn();
+    if (value == null || value === false) {
+      el.removeAttribute(name);
+    } else if (value === true) {
+      el.setAttribute(name, "");
+    } else {
+      el.setAttribute(name, value);
+    }
+  });
+}
+function __show(el, fn) {
+  const originalDisplay = el.style.display;
+  return domEffect(() => {
+    el.style.display = fn() ? originalDisplay : "none";
+  });
+}
+function __classList(el, classMap) {
+  const disposers = [];
+  for (const [className, fn] of Object.entries(classMap)) {
+    disposers.push(domEffect(() => {
+      if (fn()) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    }));
+  }
+  return () => {
+    for (const dispose of disposers) {
+      dispose();
+    }
+  };
+}
+
+// src/dom/events.ts
+function __on(el, event, handler) {
+  el.addEventListener(event, handler);
+  return () => el.removeEventListener(event, handler);
+}
+
+export { __attr, __show, __classList, __on };