@vebui/deno 0.0.3 → 0.0.4

package/cli.js

@@ -0,0 +1,1636 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// cli.ts
+import { resolve, dirname } from "node:path";
+import { build as esbuild, stop as esbuildStop } from "esbuild";
+
+// node_modules/@vebui/core/dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  A: () => A,
+  Block: () => Block,
+  Body: () => Body,
+  Button: () => Button,
+  Charset: () => Charset,
+  Dialog: () => Dialog,
+  Document: () => Document,
+  Footer: () => Footer,
+  GlobalStyles: () => GlobalStyles,
+  HStack: () => HStack,
+  Head: () => Head,
+  Input: () => Input,
+  Link: () => Link,
+  Nav: () => Nav,
+  StyleSheet: () => StyleSheet,
+  Text: () => Text,
+  Title: () => Title,
+  VStack: () => VStack,
+  Viewport: () => Viewport,
+  classToDeclaration: () => classToDeclaration,
+  drainCSS: () => drainCSS
+});
+function baseStyleMap(s) {
+  return {
+    width: s.width,
+    height: s.height,
+    padding: s.padding,
+    paddingTop: s.paddingTop,
+    paddingBottom: s.paddingBottom,
+    paddingLeft: s.paddingLeft,
+    paddingRight: s.paddingRight,
+    margin: s.margin,
+    marginTop: s.marginTop,
+    marginBottom: s.marginBottom,
+    marginLeft: s.marginLeft,
+    marginRight: s.marginRight,
+    backgroundColor: s.backgroundColor,
+    borderRadius: s.borderRadius,
+    border: s.border,
+    color: s.color,
+    opacity: s.opacity
+  };
+}
+var _cssChunks = globalThis._vebuiCssChunks ??= [];
+function pushCSS(css) {
+  if (css) {
+    _cssChunks.push(css);
+  }
+}
+function drainCSS() {
+  const out = _cssChunks.join(`
+`);
+  _cssChunks.length = 0;
+  return out;
+}
+var UIElement = class {
+  styles;
+  classes;
+  constructor(styles = {}, classes = {}) {
+    this.styles = styles;
+    this.classes = classes;
+  }
+};
+function toKebab(s) {
+  return s.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`);
+}
+function styleAttr(styles) {
+  const entries = Object.entries(styles).filter(([, v]) => v !== void 0).map(([k, v]) => `${toKebab(k)}: ${v}`).join("; ");
+  return entries ? ` style="${entries}"` : "";
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function cls(modifier, value) {
+  return `${modifier}-${String(value).replace(/[^a-zA-Z0-9]/g, "_")}`;
+}
+function resolveSize(v) {
+  if (v === "full")
+    return "100%";
+  if (v === "auto")
+    return "auto";
+  return v;
+}
+function resolveColor(v) {
+  if (v === "white" || v === "black")
+    return `var(--${v})`;
+  return /^[a-z]+-\d+$/.test(v) ? `var(--${v})` : v;
+}
+function resolveTextSize(v) {
+  return `var(--text-${v})`;
+}
+function classToDeclaration(className) {
+  if (className === "flex")
+    return "display: flex";
+  if (className === "flex-col")
+    return "flex-direction: column";
+  if (className === "flex-row")
+    return "flex-direction: row";
+  if (className.startsWith("items-")) {
+    const val2 = className.slice(6);
+    return `align-items: ${val2}`;
+  }
+  if (className.startsWith("justify-")) {
+    const val2 = className.slice(8);
+    return `justify-content: ${val2}`;
+  }
+  const match = className.match(/^([a-z]+)-(.+)$/);
+  if (!match)
+    return "";
+  const [, mod, val] = match;
+  if (val === void 0)
+    return "";
+  const v = val.replace(/_/g, ".");
+  const isNumeric = !isNaN(Number(v));
+  const space = val === "auto" ? "auto" : isNumeric ? `calc(var(--spacing) * ${v})` : v;
+  switch (mod) {
+    case "p":
+      return `padding: ${space}`;
+    case "pt":
+      return `padding-top: ${space}`;
+    case "pb":
+      return `padding-bottom: ${space}`;
+    case "pl":
+      return `padding-left: ${space}`;
+    case "pr":
+      return `padding-right: ${space}`;
+    case "px":
+      return `padding-left: ${space}; padding-right: ${space}`;
+    case "py":
+      return `padding-top: ${space}; padding-bottom: ${space}`;
+    case "m":
+      return `margin: ${space}`;
+    case "mt":
+      return `margin-top: ${space}`;
+    case "mb":
+      return `margin-bottom: ${space}`;
+    case "ml":
+      return `margin-left: ${space}`;
+    case "mr":
+      return `margin-right: ${space}`;
+    case "mx":
+      return `margin-left: ${space}; margin-right: ${space}`;
+    case "my":
+      return `margin-top: ${space}; margin-bottom: ${space}`;
+    case "gap":
+      return `gap: ${space}`;
+    case "gapx":
+      return `column-gap: ${space}`;
+    case "gapy":
+      return `row-gap: ${space}`;
+    case "radius":
+      return `border-radius: var(--radius-${v})`;
+    case "text":
+      return `font-size: var(--text-${v})`;
+    case "w": {
+      if (v === "full")
+        return "width: 100%";
+      if (v === "auto")
+        return "width: auto";
+      if (v.endsWith("px"))
+        return `width: ${v}`;
+      if (v.endsWith("rem"))
+        return `width: ${v}`;
+      if (v.endsWith("vh"))
+        return `width: ${v}`;
+      if (v.endsWith("vw"))
+        return `width: ${v}`;
+      if (v.endsWith("pct"))
+        return `width: ${v.replace("pct", "%")}`;
+      return `width: ${v}`;
+    }
+    case "h": {
+      if (v === "full")
+        return "height: 100%";
+      if (v === "auto")
+        return "height: auto";
+      if (v.endsWith("px"))
+        return `height: ${v}`;
+      if (v.endsWith("rem"))
+        return `height: ${v}`;
+      if (v.endsWith("vh"))
+        return `height: ${v}`;
+      if (v.endsWith("vw"))
+        return `height: ${v}`;
+      if (v.endsWith("pct"))
+        return `height: ${v.replace("pct", "%")}`;
+      return `height: ${v}`;
+    }
+    case "bg": {
+      if (v.includes("-")) {
+        return `background-color: var(--${v})`;
+      }
+      return `background-color: var(--${v})`;
+    }
+    default:
+      return "";
+  }
+}
+function renderPseudoCSS(selector, pseudos) {
+  return Object.entries(pseudos).map(([scope, entry]) => {
+    if (!entry)
+      return "";
+    const { styles, classes } = entry;
+    const declarations = [
+      ...Object.entries(styles).map(([k, v]) => `${toKebab(k)}: ${v}`),
+      ...Object.values(classes).map((c) => classToDeclaration(c))
+    ].filter(Boolean).join("; ");
+    if (!declarations)
+      return "";
+    switch (scope) {
+      case "mobile":
+        return `@media (max-width: 640px) { ${selector} { ${declarations} } }`;
+      case "tablet":
+        return `@media (max-width: 1024px) { ${selector} { ${declarations} } }`;
+      case "desktop":
+        return `@media (min-width: 1024px) { ${selector} { ${declarations} } }`;
+      case "focusWithin":
+        return `${selector}:focus-within { ${declarations} }`;
+      case "before":
+        return `${selector}::before { ${declarations} }`;
+      case "after":
+        return `${selector}::after { ${declarations} }`;
+      default:
+        return `${selector}:${scope} { ${declarations} }`;
+    }
+  }).filter(Boolean).join(`
+`);
+}
+function createPseudoStyleBuilder(styles = {}, classes = {}) {
+  const clsName = (mod2, val) => `${mod2}-${String(val).replace(/[^a-zA-Z0-9]/g, "_")}`;
+  const mod = (ps, pc = {}) => createPseudoStyleBuilder({ ...styles, ...ps }, { ...classes, ...pc });
+  return {
+    background: (v) => mod({ backgroundColor: resolveColor(v) }),
+    color: (v) => mod({ color: resolveColor(v) }),
+    padding: (v) => mod({}, { padding: clsName("p", v) }),
+    paddingT: (v) => mod({}, { paddingT: clsName("pt", v) }),
+    paddingB: (v) => mod({}, { paddingB: clsName("pb", v) }),
+    paddingL: (v) => mod({}, { paddingL: clsName("pl", v) }),
+    paddingR: (v) => mod({}, { paddingR: clsName("pr", v) }),
+    paddingX: (v) => mod({}, { paddingX: clsName("px", v) }),
+    paddingY: (v) => mod({}, { paddingY: clsName("py", v) }),
+    pt: (v) => mod({}, { paddingT: clsName("pt", v) }),
+    pb: (v) => mod({}, { paddingB: clsName("pb", v) }),
+    pl: (v) => mod({}, { paddingL: clsName("pl", v) }),
+    pr: (v) => mod({}, { paddingR: clsName("pr", v) }),
+    px: (v) => mod({}, { paddingX: clsName("px", v) }),
+    py: (v) => mod({}, { paddingY: clsName("py", v) }),
+    margin: (v) => mod({}, { margin: clsName("m", v) }),
+    marginT: (v) => mod({}, { marginT: clsName("mt", v) }),
+    marginB: (v) => mod({}, { marginB: clsName("mb", v) }),
+    marginL: (v) => mod({}, { marginL: clsName("ml", v) }),
+    marginR: (v) => mod({}, { marginR: clsName("mr", v) }),
+    marginX: (v) => mod({}, { marginX: clsName("mx", v) }),
+    marginY: (v) => mod({}, { marginY: clsName("my", v) }),
+    mt: (v) => mod({}, { marginT: clsName("mt", v) }),
+    mb: (v) => mod({}, { marginB: clsName("mb", v) }),
+    ml: (v) => mod({}, { marginL: clsName("ml", v) }),
+    mr: (v) => mod({}, { marginR: clsName("mr", v) }),
+    mx: (v) => mod({}, { marginX: clsName("mx", v) }),
+    my: (v) => mod({}, { marginY: clsName("my", v) }),
+    radius: (v) => mod({}, { radius: clsName("radius", v) }),
+    width: (v) => mod({ width: resolveSize(v) }),
+    height: (v) => mod({ height: resolveSize(v) }),
+    gap: (v) => mod({}, { gap: clsName("gap", v) }),
+    gapX: (v) => mod({}, { gapx: clsName("gapx", v) }),
+    gapY: (v) => mod({}, { gapy: clsName("gapy", v) }),
+    spaceX: (v) => mod({}, { gapx: clsName("gapx", v) }),
+    spaceY: (v) => mod({}, { gapy: clsName("gapy", v) }),
+    fontSize: (v) => mod({}, { size: clsName("text", v) }),
+    fontWeight: (v) => mod({ fontWeight: v }),
+    opacity: (v) => mod({ opacity: String(v) }),
+    border: (v) => mod({ border: v }),
+    __styles: styles,
+    __classes: classes
+  };
+}
+function createBreakpointContext(bp, pseudos, rebuild) {
+  const existing = pseudos[bp] ?? { styles: {}, classes: {} };
+  const addStyle = (styles) => rebuild({
+    ...pseudos,
+    [bp]: {
+      styles: { ...existing.styles, ...styles },
+      classes: existing.classes
+    }
+  });
+  const addClass = (key, value) => rebuild({
+    ...pseudos,
+    [bp]: {
+      styles: existing.styles,
+      classes: { ...existing.classes, [key]: cls(key, value) }
+    }
+  });
+  return {
+    gap: (v) => addClass("gap", v),
+    gapX: (v) => addClass("gapx", v),
+    gapY: (v) => addClass("gapy", v),
+    spaceX: (v) => addClass("gapx", v),
+    spaceY: (v) => addClass("gapy", v),
+    padding: (v) => addClass("p", v),
+    paddingT: (v) => addClass("pt", v),
+    paddingB: (v) => addClass("pb", v),
+    paddingL: (v) => addClass("pl", v),
+    paddingR: (v) => addClass("pr", v),
+    paddingX: (v) => addClass("px", v),
+    paddingY: (v) => addClass("py", v),
+    p: (v) => addClass("p", v),
+    pt: (v) => addClass("pt", v),
+    pb: (v) => addClass("pb", v),
+    pl: (v) => addClass("pl", v),
+    pr: (v) => addClass("pr", v),
+    px: (v) => addClass("px", v),
+    py: (v) => addClass("py", v),
+    margin: (v) => addClass("m", v),
+    marginT: (v) => addClass("mt", v),
+    marginB: (v) => addClass("mb", v),
+    marginL: (v) => addClass("ml", v),
+    marginR: (v) => addClass("mr", v),
+    marginX: (v) => addClass("mx", v),
+    marginY: (v) => addClass("my", v),
+    m: (v) => addClass("m", v),
+    mt: (v) => addClass("mt", v),
+    mb: (v) => addClass("mb", v),
+    ml: (v) => addClass("ml", v),
+    mr: (v) => addClass("mr", v),
+    mx: (v) => addClass("mx", v),
+    my: (v) => addClass("my", v),
+    width: (v) => addStyle({ width: resolveSize(v) }),
+    height: (v) => addStyle({ height: resolveSize(v) }),
+    background: (v) => addStyle({ backgroundColor: resolveColor(v) }),
+    color: (v) => addStyle({ color: resolveColor(v) }),
+    radius: (v) => addClass("radius", v),
+    border: (v) => addStyle({ border: v }),
+    opacity: (v) => addStyle({ opacity: String(v) }),
+    size: (v) => addClass("text", v),
+    fontWeight: (v) => addStyle({ fontWeight: v })
+  };
+}
+var _counter = 0;
+var rpcRegistry = /* @__PURE__ */ new Map();
+var DerivedSignal = class {
+  key;
+  initial;
+  constructor(key, initial) {
+    this.key = key;
+    this.initial = initial;
+  }
+};
+var RpcSignal = class {
+  key;
+  initial;
+  type = "rpc";
+  error;
+  status;
+  _handler;
+  constructor(initial, handler) {
+    this.key = `sig_${_counter++}`;
+    this.initial = initial;
+    this._handler = handler;
+    this.error = new DerivedSignal(`${this.key}_error`, "");
+    this.status = new DerivedSignal(`${this.key}_status`, "none");
+    rpcRegistry.set(this.key, this);
+  }
+  async handle(payload) {
+    return this._handler(payload);
+  }
+};
+function stableStringify(obj) {
+  if (obj === null || typeof obj !== "object")
+    return JSON.stringify(obj);
+  if (Array.isArray(obj))
+    return "[" + obj.map(stableStringify).join(",") + "]";
+  const keys = Object.keys(obj).sort();
+  return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
+}
+function hash(obj) {
+  const str = typeof obj === "string" ? obj : stableStringify(obj);
+  let h = 0;
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(31, h) + str.charCodeAt(i) | 0;
+  }
+  return (h >>> 0).toString(36);
+}
+var SafeHTML = class {
+  html;
+  constructor(html) {
+    this.html = html;
+  }
+  render() {
+    return this.html;
+  }
+};
+function resolveChild(c) {
+  if (c instanceof RpcSignal || c instanceof DerivedSignal) {
+    return `<span data-signal="${c.key}">${escapeHtml(String(c.initial))}</span>`;
+  }
+  if (c instanceof SafeHTML) {
+    return c.html;
+  }
+  return typeof c === "string" ? escapeHtml(c) : c.render();
+}
+function renderWithPseudo(html, pseudos) {
+  const hasPseudos = Object.keys(pseudos).length > 0;
+  if (!hasPseudos)
+    return html(null);
+  const styleKey = JSON.stringify(pseudos);
+  const className = `w-${hash(styleKey)}`;
+  pushCSS(renderPseudoCSS(`.${className}`, pseudos));
+  return html(className);
+}
+function renderStack(direction, state, children) {
+  const { styles, classes, pseudos } = state;
+  const inlineStyles = {
+    ...baseStyleMap(styles),
+    gap: styles.gap,
+    alignItems: styles.alignItems,
+    justifyContent: styles.justifyContent,
+    minWidth: styles.minWidth,
+    maxWidth: styles.maxWidth,
+    minHeight: styles.minHeight,
+    maxHeight: styles.maxHeight
+  };
+  return renderWithPseudo((className) => {
+    const styleStr = `display: flex; flex-direction: ${direction}` + Object.entries(inlineStyles).filter(([, v]) => v).map(([k, v]) => `; ${toKebab(k)}: ${v}`).join("");
+    const classList = [className, ...Object.values(classes)].filter(Boolean);
+    const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+    return `<div${classAttrStr} style="${styleStr}">${children.map(resolveChild).join("")}</div>`;
+  }, pseudos);
+}
+function createBuilder(factory, state = { styles: {}, classes: {}, pseudos: {} }) {
+  const fn = (...children) => factory(state, children);
+  const mod = (ps, pc = {}, pp) => createBuilder(factory, {
+    styles: { ...state.styles, ...ps },
+    classes: { ...state.classes, ...pc },
+    pseudos: pp ?? state.pseudos
+  });
+  const rebuildWithPseudos = (pseudos) => createBuilder(factory, { ...state, pseudos });
+  Object.defineProperty(fn, "mobile", {
+    get: () => createBreakpointContext("mobile", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  Object.defineProperty(fn, "tablet", {
+    get: () => createBreakpointContext("tablet", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  Object.defineProperty(fn, "desktop", {
+    get: () => createBreakpointContext("desktop", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  fn.hover = (cb) => rebuildWithPseudos(addPseudoState(state.pseudos, "hover", cb));
+  fn.active = (cb) => rebuildWithPseudos(addPseudoState(state.pseudos, "active", cb));
+  fn.focus = (cb) => rebuildWithPseudos(addPseudoState(state.pseudos, "focus", cb));
+  fn.focusWithin = (cb) => rebuildWithPseudos(addPseudoState(state.pseudos, "focusWithin", cb));
+  fn.width = (v) => mod({ width: resolveSize(v) });
+  fn.w = (v) => mod({ width: resolveSize(v) });
+  fn.minw = (v) => mod({ minWidth: resolveSize(v) });
+  fn.maxw = (v) => mod({ maxWidth: resolveSize(v) });
+  fn.height = (v) => mod({ height: resolveSize(v) });
+  fn.h = (v) => mod({ height: resolveSize(v) });
+  fn.minh = (v) => mod({ minHeight: resolveSize(v) });
+  fn.maxh = (v) => mod({ maxHeight: resolveSize(v) });
+  fn.margin = (v) => mod({}, { m: cls("m", v) });
+  fn.marginT = (v) => mod({}, { mt: cls("mt", v) });
+  fn.marginB = (v) => mod({}, { mb: cls("mb", v) });
+  fn.marginL = (v) => mod({}, { ml: cls("ml", v) });
+  fn.marginR = (v) => mod({}, { mr: cls("mr", v) });
+  fn.marginX = (v) => mod({}, { mx: cls("mx", v) });
+  fn.marginY = (v) => mod({}, { my: cls("my", v) });
+  fn.m = (v) => mod({}, { m: cls("m", v) });
+  fn.mt = (v) => mod({}, { mt: cls("mt", v) });
+  fn.mb = (v) => mod({}, { mb: cls("mb", v) });
+  fn.ml = (v) => mod({}, { ml: cls("ml", v) });
+  fn.mr = (v) => mod({}, { mr: cls("mr", v) });
+  fn.mx = (v) => mod({}, { mx: cls("mx", v) });
+  fn.my = (v) => mod({}, { my: cls("my", v) });
+  fn.padding = (v) => mod({}, { p: cls("p", v) });
+  fn.paddingT = (v) => mod({}, { pt: cls("pt", v) });
+  fn.paddingB = (v) => mod({}, { pb: cls("pb", v) });
+  fn.paddingL = (v) => mod({}, { pl: cls("pl", v) });
+  fn.paddingR = (v) => mod({}, { pr: cls("pr", v) });
+  fn.paddingX = (v) => mod({}, { px: cls("px", v) });
+  fn.paddingY = (v) => mod({}, { py: cls("py", v) });
+  fn.p = (v) => mod({}, { p: cls("p", v) });
+  fn.pt = (v) => mod({}, { pt: cls("pt", v) });
+  fn.pb = (v) => mod({}, { pb: cls("pb", v) });
+  fn.pl = (v) => mod({}, { pl: cls("pl", v) });
+  fn.pr = (v) => mod({}, { pr: cls("pr", v) });
+  fn.px = (v) => mod({}, { px: cls("px", v) });
+  fn.py = (v) => mod({}, { py: cls("py", v) });
+  fn.gap = (v) => mod({}, { gap: cls("gap", v) });
+  fn.gapX = (v) => mod({}, { gapx: cls("gapx", v) });
+  fn.gapY = (v) => mod({}, { gapy: cls("gapy", v) });
+  fn.spaceX = (v) => mod({}, { gapx: cls("gapx", v) });
+  fn.spaceY = (v) => mod({}, { gapy: cls("gapy", v) });
+  fn.align = (v) => {
+    const map = {
+      start: "flex-start",
+      end: "flex-end",
+      "end-safe": "safe flex-end",
+      center: "center",
+      "center-safe": "safe center",
+      baseline: "baseline",
+      "baseline-last": "last baseline",
+      stretch: "stretch"
+    };
+    return mod({ alignItems: map[v] });
+  };
+  fn.justify = (v) => {
+    const map = {
+      start: "flex-start",
+      end: "flex-end",
+      "end-safe": "safe flex-end",
+      center: "center",
+      "center-safe": "safe center",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+      stretch: "stretch",
+      baseline: "baseline",
+      normal: "normal"
+    };
+    return mod({ justifyContent: map[v] });
+  };
+  fn.acjc = () => mod({ alignItems: "center", justifyContent: "center" });
+  fn.background = (v) => mod({ backgroundColor: resolveColor(v) });
+  fn.radius = (v) => mod({}, { radius: cls("radius", v) });
+  return fn;
+}
+function addPseudoState(pseudos, key, cb) {
+  const b = cb(createPseudoStyleBuilder());
+  return { ...pseudos, [key]: { styles: b.__styles, classes: b.__classes } };
+}
+var VStackElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    return renderStack("column", this.state, this.children);
+  }
+};
+var VStack = createBuilder((state, children) => new VStackElement(state, children));
+var HStackElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    return renderStack("row", this.state, this.children);
+  }
+};
+var HStack = createBuilder((state, children) => new HStackElement(state, children));
+var BlockElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const classList = [className, ...Object.values(this.state.classes)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<div${classAttrStr}${styleAttr(baseStyleMap(this.state.styles))}>${this.children.map(resolveChild).join("")}</div>`;
+    }, this.state.pseudos);
+  }
+};
+var Block = createBuilder((state, children) => new BlockElement(state, children));
+var NavElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const classList = [className, ...Object.values(this.state.classes)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<nav${classAttrStr}${styleAttr(baseStyleMap(this.state.styles))}>${this.children.map(resolveChild).join("")}</nav>`;
+    }, this.state.pseudos);
+  }
+};
+var Nav = createBuilder((state, children) => new NavElement(state, children));
+var FooterElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const classList = [className, ...Object.values(this.state.classes)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<footer${classAttrStr}${styleAttr(baseStyleMap(this.state.styles))}>${this.children.map(resolveChild).join("")}</footer>`;
+    }, this.state.pseudos);
+  }
+};
+var Footer = createBuilder((state, children) => new FooterElement(state, children));
+var FONT_WEIGHT_MAP = {
+  thin: "100",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+function createTextBuilder(styles = {}, classes = {}, pseudos = {}) {
+  const fn = (content) => new TextElement(content, styles, classes, pseudos);
+  const mod = (ps, pc = {}, pp) => createTextBuilder({ ...styles, ...ps }, { ...classes, ...pc }, pp ?? pseudos);
+  const rebuildWithPseudos = (pp) => createTextBuilder(styles, classes, pp);
+  Object.defineProperty(fn, "mobile", { get: () => createBreakpointContext("mobile", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "tablet", { get: () => createBreakpointContext("tablet", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "desktop", { get: () => createBreakpointContext("desktop", pseudos, rebuildWithPseudos), enumerable: true });
+  fn.hover = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, hover: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.active = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, active: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.focus = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, focus: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.size = (v) => mod({}, { size: cls("text", v) });
+  fn.weight = (v) => mod({ fontWeight: FONT_WEIGHT_MAP[v] });
+  fn.color = (v) => mod({ color: resolveColor(v) });
+  fn.padding = (v) => mod({}, { p: cls("p", v) });
+  fn.paddingT = (v) => mod({}, { pt: cls("pt", v) });
+  fn.paddingB = (v) => mod({}, { pb: cls("pb", v) });
+  fn.paddingL = (v) => mod({}, { pl: cls("pl", v) });
+  fn.paddingR = (v) => mod({}, { pr: cls("pr", v) });
+  fn.paddingX = (v) => mod({}, { px: cls("px", v) });
+  fn.paddingY = (v) => mod({}, { py: cls("py", v) });
+  fn.p = fn.padding;
+  fn.pt = fn.paddingT;
+  fn.pb = fn.paddingB;
+  fn.pl = fn.paddingL;
+  fn.pr = fn.paddingR;
+  fn.px = fn.paddingX;
+  fn.py = fn.paddingY;
+  fn.margin = (v) => mod({}, { m: cls("m", v) });
+  fn.marginT = (v) => mod({}, { mt: cls("mt", v) });
+  fn.marginB = (v) => mod({}, { mb: cls("mb", v) });
+  fn.marginL = (v) => mod({}, { ml: cls("ml", v) });
+  fn.marginR = (v) => mod({}, { mr: cls("mr", v) });
+  fn.marginX = (v) => mod({}, { mx: cls("mx", v) });
+  fn.marginY = (v) => mod({}, { my: cls("my", v) });
+  fn.m = fn.margin;
+  fn.mt = fn.marginT;
+  fn.mb = fn.marginB;
+  fn.ml = fn.marginL;
+  fn.mr = fn.marginR;
+  fn.mx = fn.marginX;
+  fn.my = fn.marginY;
+  return fn;
+}
+var TextElement = class extends UIElement {
+  content;
+  ts;
+  tc;
+  pseudos;
+  constructor(content, ts, tc, pseudos) {
+    super();
+    this.content = content;
+    this.ts = ts;
+    this.tc = tc;
+    this.pseudos = pseudos;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const classList = [className, ...Object.values(this.tc)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      const sAttr = styleAttr(this.ts);
+      if (this.content instanceof RpcSignal || this.content instanceof DerivedSignal) {
+        return `<span${classAttrStr}${sAttr} data-signal="${this.content.key}">${escapeHtml(String(this.content.initial))}</span>`;
+      }
+      return `<span${classAttrStr}${sAttr}>${escapeHtml(this.content)}</span>`;
+    }, this.pseudos);
+  }
+};
+var Text = createTextBuilder();
+function createButtonBuilder(styles = {}, classes = {}, action, pseudos = {}) {
+  const fn = (label) => new ButtonElement(label, styles, classes, action, pseudos);
+  const mod = (ps, pc = {}, a, pp) => createButtonBuilder({ ...styles, ...ps }, { ...classes, ...pc }, a ?? action, pp ?? pseudos);
+  const rebuildWithPseudos = (pp) => createButtonBuilder(styles, classes, action, pp);
+  Object.defineProperty(fn, "mobile", { get: () => createBreakpointContext("mobile", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "tablet", { get: () => createBreakpointContext("tablet", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "desktop", { get: () => createBreakpointContext("desktop", pseudos, rebuildWithPseudos), enumerable: true });
+  fn.hover = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, hover: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.active = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, active: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.focus = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, focus: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.onClick = (signal, value) => mod({}, {}, { signal, value });
+  fn.padding = (v) => mod({}, { p: cls("p", v) });
+  fn.paddingT = (v) => mod({}, { pt: cls("pt", v) });
+  fn.paddingB = (v) => mod({}, { pb: cls("pb", v) });
+  fn.paddingL = (v) => mod({}, { pl: cls("pl", v) });
+  fn.paddingR = (v) => mod({}, { pr: cls("pr", v) });
+  fn.paddingX = (v) => mod({}, { px: cls("px", v) });
+  fn.paddingY = (v) => mod({}, { py: cls("py", v) });
+  fn.p = fn.padding;
+  fn.pt = fn.paddingT;
+  fn.pb = fn.paddingB;
+  fn.pl = fn.paddingL;
+  fn.pr = fn.paddingR;
+  fn.px = fn.paddingX;
+  fn.py = fn.paddingY;
+  fn.margin = (v) => mod({}, { m: cls("m", v) });
+  fn.marginT = (v) => mod({}, { mt: cls("mt", v) });
+  fn.marginB = (v) => mod({}, { mb: cls("mb", v) });
+  fn.marginL = (v) => mod({}, { ml: cls("ml", v) });
+  fn.marginR = (v) => mod({}, { mr: cls("mr", v) });
+  fn.marginX = (v) => mod({}, { mx: cls("mx", v) });
+  fn.marginY = (v) => mod({}, { my: cls("my", v) });
+  fn.m = fn.margin;
+  fn.mt = fn.marginT;
+  fn.mb = fn.marginB;
+  fn.ml = fn.marginL;
+  fn.mr = fn.marginR;
+  fn.mx = fn.marginX;
+  fn.my = fn.marginY;
+  fn.background = (v) => mod({ backgroundColor: resolveColor(v) });
+  fn.radius = (v) => mod({}, { radius: cls("radius", v) });
+  fn.color = (v) => mod({ color: resolveColor(v) });
+  fn.width = (v) => mod({ width: resolveSize(v) });
+  fn.fontSize = (v) => mod({ fontSize: resolveTextSize(v) });
+  fn.fontWeight = (v) => mod({ fontWeight: FONT_WEIGHT_MAP[v] });
+  return fn;
+}
+var ButtonElement = class extends UIElement {
+  label;
+  bs;
+  bc;
+  action;
+  pseudos;
+  constructor(label, bs, bc, action, pseudos = {}) {
+    super();
+    this.label = label;
+    this.bs = bs;
+    this.bc = bc;
+    this.action = action;
+    this.pseudos = pseudos;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      let actionAttrs = "";
+      if (this.action) {
+        const { signal, value } = this.action;
+        if (signal.type === "browser") {
+          actionAttrs = ` data-set-signal="${signal.key}" data-set-value='${JSON.stringify(value)}'`;
+        } else {
+          const payload = typeof value === "object" && value !== null && !Array.isArray(value) ? value : { value };
+          actionAttrs = ` data-rpc="${signal.key}" data-payload='${JSON.stringify(payload)}'`;
+        }
+      }
+      const classList = [className, ...Object.values(this.bc)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<button${classAttrStr}${styleAttr({
+        ...baseStyleMap(this.bs),
+        color: this.bs.color,
+        fontSize: this.bs.fontSize,
+        fontWeight: this.bs.fontWeight,
+        cursor: "pointer",
+        border: "none",
+        display: "inline-block"
+      })}${actionAttrs}>${escapeHtml(this.label)}</button>`;
+    }, this.pseudos);
+  }
+};
+var Button = createButtonBuilder();
+function createInputBuilder(styles = {}, classes = {}, config = {}, pseudos = {}) {
+  const fn = (type) => new InputElement(type, styles, classes, config, pseudos);
+  const mod = (ps, pc = {}) => createInputBuilder({ ...styles, ...ps }, { ...classes, ...pc }, config, pseudos);
+  const cfg = (patch) => createInputBuilder(styles, classes, { ...config, ...patch }, pseudos);
+  const rebuildWithPseudos = (pp) => createInputBuilder(styles, classes, config, pp);
+  Object.defineProperty(fn, "mobile", { get: () => createBreakpointContext("mobile", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "tablet", { get: () => createBreakpointContext("tablet", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "desktop", { get: () => createBreakpointContext("desktop", pseudos, rebuildWithPseudos), enumerable: true });
+  fn.hover = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, hover: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.focus = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, focus: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.bind = (sig) => cfg({ signal: sig });
+  fn.debounce = (ms) => cfg({ debounceMs: ms });
+  fn.placeholder = (t) => cfg({ placeholder: t });
+  fn.padding = (v) => mod({}, { p: cls("p", v) });
+  fn.paddingT = (v) => mod({}, { pt: cls("pt", v) });
+  fn.paddingB = (v) => mod({}, { pb: cls("pb", v) });
+  fn.paddingL = (v) => mod({}, { pl: cls("pl", v) });
+  fn.paddingR = (v) => mod({}, { pr: cls("pr", v) });
+  fn.paddingX = (v) => mod({}, { px: cls("px", v) });
+  fn.paddingY = (v) => mod({}, { py: cls("py", v) });
+  fn.p = fn.padding;
+  fn.pt = fn.paddingT;
+  fn.pb = fn.paddingB;
+  fn.pl = fn.paddingL;
+  fn.pr = fn.paddingR;
+  fn.px = fn.paddingX;
+  fn.py = fn.paddingY;
+  fn.margin = (v) => mod({}, { m: cls("m", v) });
+  fn.marginT = (v) => mod({}, { mt: cls("mt", v) });
+  fn.marginB = (v) => mod({}, { mb: cls("mb", v) });
+  fn.marginL = (v) => mod({}, { ml: cls("ml", v) });
+  fn.marginR = (v) => mod({}, { mr: cls("mr", v) });
+  fn.marginX = (v) => mod({}, { mx: cls("mx", v) });
+  fn.marginY = (v) => mod({}, { my: cls("my", v) });
+  fn.m = fn.margin;
+  fn.mt = fn.marginT;
+  fn.mb = fn.marginB;
+  fn.ml = fn.marginL;
+  fn.mr = fn.marginR;
+  fn.mx = fn.marginX;
+  fn.my = fn.marginY;
+  fn.background = (v) => mod({ backgroundColor: resolveColor(v) });
+  fn.radius = (v) => mod({}, { radius: cls("radius", v) });
+  fn.width = (v) => mod({ width: resolveSize(v) });
+  fn.color = (v) => mod({ color: resolveColor(v) });
+  fn.border = (v) => mod({ border: v });
+  fn.fontSize = (v) => mod({ fontSize: resolveTextSize(v) });
+  return fn;
+}
+var InputElement = class extends UIElement {
+  type;
+  is;
+  ic;
+  config;
+  pseudos;
+  constructor(type, is, ic, config, pseudos) {
+    super();
+    this.type = type;
+    this.is = is;
+    this.ic = ic;
+    this.config = config;
+    this.pseudos = pseudos;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const { signal, debounceMs, placeholder } = this.config;
+      const classList = [className, ...Object.values(this.ic)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<input${classAttrStr} type="${this.type}"${styleAttr({
+        ...baseStyleMap(this.is),
+        color: this.is.color,
+        fontSize: this.is.fontSize,
+        border: this.is.border ?? "1px solid var(--gray-300)",
+        outline: "none"
+      })}${signal ? ` data-bind="${signal.key}"` : ""}${debounceMs ? ` data-debounce="${debounceMs}"` : ""}${placeholder ? ` placeholder="${escapeHtml(placeholder)}"` : ""}${signal ? ` value="${escapeHtml(String(signal.initial))}"` : ""} />`;
+    }, this.pseudos);
+  }
+};
+var Input = createInputBuilder();
+function createLinkBuilder(styles = {}, classes = {}, state = {}, pseudos = {}) {
+  const fn = (label) => new LinkElement(label, styles, classes, state, pseudos);
+  const mod = (ps, pc = {}, st, pp) => createLinkBuilder({ ...styles, ...ps }, { ...classes, ...pc }, { ...state, ...st }, pp ?? pseudos);
+  const rebuildWithPseudos = (pp) => createLinkBuilder(styles, classes, state, pp);
+  Object.defineProperty(fn, "mobile", { get: () => createBreakpointContext("mobile", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "tablet", { get: () => createBreakpointContext("tablet", pseudos, rebuildWithPseudos), enumerable: true });
+  Object.defineProperty(fn, "desktop", { get: () => createBreakpointContext("desktop", pseudos, rebuildWithPseudos), enumerable: true });
+  fn.hover = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, hover: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.active = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, active: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.focus = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...pseudos, focus: { styles: b.__styles, classes: b.__classes } });
+  };
+  fn.href = (url) => mod({}, {}, { href: url });
+  fn.target = (target) => mod({}, {}, { target });
+  fn.rel = (rel) => mod({}, {}, { rel });
+  fn.external = () => mod({}, {}, { target: "_blank", rel: "noopener noreferrer" });
+  fn.padding = (v) => mod({}, { p: cls("p", v) });
+  fn.paddingT = (v) => mod({}, { pt: cls("pt", v) });
+  fn.paddingB = (v) => mod({}, { pb: cls("pb", v) });
+  fn.paddingL = (v) => mod({}, { pl: cls("pl", v) });
+  fn.paddingR = (v) => mod({}, { pr: cls("pr", v) });
+  fn.paddingX = (v) => mod({}, { px: cls("px", v) });
+  fn.paddingY = (v) => mod({}, { py: cls("py", v) });
+  fn.p = fn.padding;
+  fn.pt = fn.paddingT;
+  fn.pb = fn.paddingB;
+  fn.pl = fn.paddingL;
+  fn.pr = fn.paddingR;
+  fn.px = fn.paddingX;
+  fn.py = fn.paddingY;
+  fn.margin = (v) => mod({}, { m: cls("m", v) });
+  fn.marginT = (v) => mod({}, { mt: cls("mt", v) });
+  fn.marginB = (v) => mod({}, { mb: cls("mb", v) });
+  fn.marginL = (v) => mod({}, { ml: cls("ml", v) });
+  fn.marginR = (v) => mod({}, { mr: cls("mr", v) });
+  fn.marginX = (v) => mod({}, { mx: cls("mx", v) });
+  fn.marginY = (v) => mod({}, { my: cls("my", v) });
+  fn.m = fn.margin;
+  fn.mt = fn.marginT;
+  fn.mb = fn.marginB;
+  fn.ml = fn.marginL;
+  fn.mr = fn.marginR;
+  fn.mx = fn.marginX;
+  fn.my = fn.marginY;
+  fn.color = (v) => mod({ color: resolveColor(v) });
+  fn.size = (v) => mod({ fontSize: resolveTextSize(v) });
+  fn.weight = (v) => mod({ fontWeight: FONT_WEIGHT_MAP[v] });
+  fn.underline = (v) => mod({ textDecoration: v ? "underline" : "none" });
+  return fn;
+}
+var LinkElement = class extends UIElement {
+  label;
+  styles;
+  classes;
+  state;
+  pseudos;
+  constructor(label, styles, classes, state, pseudos) {
+    super();
+    this.label = label;
+    this.styles = styles;
+    this.classes = classes;
+    this.state = state;
+    this.pseudos = pseudos;
+  }
+  render() {
+    return renderWithPseudo((className) => {
+      const href = this.state.href || "#";
+      const attrs2 = [`href="${escapeHtml(href)}"`];
+      if (this.state.target)
+        attrs2.push(`target="${this.state.target}"`);
+      if (this.state.rel)
+        attrs2.push(`rel="${this.state.rel}"`);
+      const classList = [className, ...Object.values(this.classes)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      return `<a ${attrs2.join(" ")}${classAttrStr}${styleAttr({
+        ...baseStyleMap(this.styles),
+        color: this.styles.color,
+        fontSize: this.styles.fontSize,
+        fontWeight: this.styles.fontWeight,
+        textDecoration: this.styles.textDecoration
+      })}>${escapeHtml(this.label)}</a>`;
+    }, this.pseudos);
+  }
+};
+var A = createLinkBuilder();
+var DialogElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    const {
+      isOpen,
+      maskColor,
+      maskOpacity,
+      closeOnClickOutside,
+      closeOnEscape,
+      trapFocus,
+      styles,
+      classes,
+      pseudos
+    } = this.state;
+    if (!isOpen) {
+      throw new Error("Dialog requires .bind(signal) to be set");
+    }
+    const dialogId = `dialog-${isOpen.key}`;
+    const backdropClass = `dialog-backdrop-${hash({ maskColor, maskOpacity })}`;
+    const backdropCSS = `
+dialog#${dialogId}::backdrop {
+  background-color: ${maskColor};
+  opacity: ${maskOpacity};
+}
+`;
+    pushCSS(backdropCSS);
+    const contentHtml = renderWithPseudo((className) => {
+      const classList = [className, ...Object.values(classes)].filter(Boolean);
+      const classAttrStr = classList.length ? ` class="${classList.join(" ")}"` : "";
+      const inlineStyles = {
+        ...baseStyleMap(styles),
+        backgroundColor: styles.backgroundColor || "white",
+        borderRadius: styles.borderRadius,
+        width: styles.width,
+        height: styles.height,
+        minWidth: styles.minWidth,
+        maxWidth: styles.maxWidth,
+        minHeight: styles.minHeight,
+        maxHeight: styles.maxHeight,
+        border: "none",
+        padding: "0"
+      };
+      const childrenHtml = this.children.map(resolveChild).join("");
+      return `<dialog 
+  id="${dialogId}"
+  data-dialog="${dialogId}"
+  data-signal="${isOpen.key}"
+  data-close-outside="${closeOnClickOutside}"
+  data-close-escape="${closeOnEscape}"
+  data-trap-focus="${trapFocus}"
+  ${classAttrStr}
+  ${styleAttr(inlineStyles)}
+>${childrenHtml}</dialog>`;
+    }, pseudos);
+    return contentHtml;
+  }
+};
+function createDialogBuilder(state) {
+  const fn = (...children) => new DialogElement(state, children);
+  const mod = (updates) => createDialogBuilder({ ...state, ...updates });
+  fn.bind = (signal) => mod({ isOpen: signal });
+  fn.maskColor = (color) => mod({ maskColor: resolveColor(color) });
+  fn.maskOpacity = (opacity) => mod({ maskOpacity: opacity });
+  fn.closeOnClickOutside = (enabled) => mod({ closeOnClickOutside: enabled });
+  fn.closeOnEscape = (enabled) => mod({ closeOnEscape: enabled });
+  fn.trapFocus = (enabled) => mod({ trapFocus: enabled });
+  fn.width = (v) => mod({ styles: { ...state.styles, width: resolveSize(v) } });
+  fn.w = (v) => mod({ styles: { ...state.styles, width: resolveSize(v) } });
+  fn.height = (v) => mod({ styles: { ...state.styles, height: resolveSize(v) } });
+  fn.h = (v) => mod({ styles: { ...state.styles, height: resolveSize(v) } });
+  fn.minw = (v) => mod({ styles: { ...state.styles, minWidth: resolveSize(v) } });
+  fn.maxw = (v) => mod({ styles: { ...state.styles, maxWidth: resolveSize(v) } });
+  fn.minh = (v) => mod({ styles: { ...state.styles, minHeight: resolveSize(v) } });
+  fn.maxh = (v) => mod({ styles: { ...state.styles, maxHeight: resolveSize(v) } });
+  fn.padding = (v) => mod({ classes: { ...state.classes, p: cls("p", v) } });
+  fn.p = (v) => mod({ classes: { ...state.classes, p: cls("p", v) } });
+  fn.pt = (v) => mod({ classes: { ...state.classes, pt: cls("pt", v) } });
+  fn.pb = (v) => mod({ classes: { ...state.classes, pb: cls("pb", v) } });
+  fn.pl = (v) => mod({ classes: { ...state.classes, pl: cls("pl", v) } });
+  fn.pr = (v) => mod({ classes: { ...state.classes, pr: cls("pr", v) } });
+  fn.px = (v) => mod({ classes: { ...state.classes, px: cls("px", v) } });
+  fn.py = (v) => mod({ classes: { ...state.classes, py: cls("py", v) } });
+  fn.background = (v) => mod({ styles: { ...state.styles, backgroundColor: resolveColor(v) } });
+  fn.radius = (v) => mod({ classes: { ...state.classes, radius: cls("radius", v) } });
+  fn.hover = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return mod({ pseudos: { ...state.pseudos, hover: { styles: b.__styles, classes: b.__classes } } });
+  };
+  fn.focus = (cb) => {
+    const b = cb(createPseudoStyleBuilder());
+    return mod({ pseudos: { ...state.pseudos, focus: { styles: b.__styles, classes: b.__classes } } });
+  };
+  return fn;
+}
+var Dialog = createDialogBuilder({
+  isOpen: null,
+  maskColor: "rgba(0, 0, 0, 0.5)",
+  maskOpacity: 1,
+  closeOnClickOutside: true,
+  closeOnEscape: true,
+  trapFocus: true,
+  styles: {},
+  classes: {},
+  pseudos: {}
+});
+var HeadElement = class extends UIElement {
+  children;
+  constructor(children) {
+    super();
+    this.children = children;
+  }
+  render() {
+    const scopedCSS = drainCSS();
+    const parts = [];
+    for (const child of this.children) {
+      parts.push(resolveChild(child));
+    }
+    if (scopedCSS) {
+      parts.push(`<style>
+${scopedCSS}
+  </style>`);
+    }
+    return `<head>
+  ${parts.join(`
+  `)}
+</head>`;
+  }
+};
+function createHeadBuilder(children = []) {
+  const fn = () => new HeadElement(children);
+  fn.charset = (charset = "UTF-8") => createHeadBuilder([...children, Charset(charset)]);
+  fn.viewport = (content = "width=device-width, initial-scale=1.0") => createHeadBuilder([...children, Viewport(content)]);
+  fn.title = (title) => createHeadBuilder([...children, Title(title)]);
+  fn.css = (hrefs) => {
+    const files = Array.isArray(hrefs) ? hrefs : [hrefs];
+    return createHeadBuilder([...children, ...files.map(StyleSheet)]);
+  };
+  fn.globalStyles = (css) => createHeadBuilder([...children, GlobalStyles(css)]);
+  return fn;
+}
+function Head(...children) {
+  return createHeadBuilder(children);
+}
+function Charset(charset = "UTF-8") {
+  return new SafeHTML(`<meta charset="${charset}" />`);
+}
+function Viewport(content = "width=device-width, initial-scale=1.0") {
+  return new SafeHTML(`<meta name="viewport" content="${content}" />`);
+}
+function Title(title) {
+  return new SafeHTML(`<title>${escapeHtml(title)}</title>`);
+}
+function GlobalStyles(css) {
+  return new SafeHTML(`<style>${css}</style>`);
+}
+var LinkElement2 = class _LinkElement2 {
+  state;
+  constructor(state = {}) {
+    this.state = state;
+  }
+  rel(rel) {
+    return new _LinkElement2({ ...this.state, rel });
+  }
+  href(href) {
+    return new _LinkElement2({ ...this.state, href });
+  }
+  type(type) {
+    return new _LinkElement2({ ...this.state, type });
+  }
+  as(as) {
+    return new _LinkElement2({ ...this.state, as });
+  }
+  crossorigin(value) {
+    return new _LinkElement2({ ...this.state, crossorigin: value });
+  }
+  integrity(value) {
+    return new _LinkElement2({ ...this.state, integrity: value });
+  }
+  toString() {
+    const attrs2 = [];
+    if (this.state.rel)
+      attrs2.push(`rel="${this.state.rel}"`);
+    if (this.state.href)
+      attrs2.push(`href="${this.state.href}"`);
+    if (this.state.type)
+      attrs2.push(`type="${this.state.type}"`);
+    if (this.state.as)
+      attrs2.push(`as="${this.state.as}"`);
+    if (this.state.crossorigin)
+      attrs2.push(`crossorigin="${this.state.crossorigin}"`);
+    if (this.state.integrity)
+      attrs2.push(`integrity="${this.state.integrity}"`);
+    return `<link ${attrs2.join(" ")} />`;
+  }
+};
+function Link() {
+  return new LinkElement2();
+}
+function StyleSheet(href) {
+  return new SafeHTML(Link().rel("stylesheet").href(href).toString());
+}
+var BodyElement = class extends UIElement {
+  state;
+  children;
+  constructor(state, children) {
+    super();
+    this.state = state;
+    this.children = children;
+  }
+  render() {
+    const { flexDirection, scripts, signalState, styles, classes, pseudos } = this.state;
+    const classList = [...Object.values(classes)];
+    if (flexDirection) {
+      classList.push("flex");
+      classList.push(flexDirection === "col" ? "flex-col" : "flex-row");
+    }
+    const inlineStyles = {
+      ...baseStyleMap(styles)
+    };
+    return renderWithPseudo((className) => {
+      const allClasses = [className, ...classList].filter(Boolean);
+      const classAttrStr = allClasses.length ? ` class="${allClasses.join(" ")}"` : "";
+      const styleStr = Object.entries(inlineStyles).filter(([, v]) => v).map(([k, v]) => `${toKebab(k)}: ${v}`).join("; ");
+      const styleAttrStr = styleStr ? ` style="${styleStr}"` : "";
+      const childrenHtml = this.children.map(resolveChild).join(`
+  `);
+      const signalScript = signalState ? `
+  <script>window.__signals__ = ${JSON.stringify(signalState)};</script>` : "";
+      const scriptTags = scripts.length ? `
+  ` + scripts.map((s) => `<script src="${s}"></script>`).join(`
+  `) : "";
+      return `<body${classAttrStr}${styleAttrStr}>
+  ${childrenHtml}${signalScript}${scriptTags}
+</body>`;
+    }, pseudos);
+  }
+};
+function createBodyBuilder(state = {
+  styles: {},
+  classes: {},
+  pseudos: {},
+  flexDirection: void 0,
+  scripts: [],
+  signalState: void 0
+}) {
+  const fn = (...children) => new BodyElement(state, children);
+  const mod = (updates) => createBodyBuilder({ ...state, ...updates });
+  const rebuildWithPseudos = (pseudos) => createBodyBuilder({ ...state, pseudos });
+  fn.flex = (direction) => mod({ flexDirection: direction });
+  fn.scripts = (scripts) => mod({ scripts: Array.isArray(scripts) ? scripts : [scripts] });
+  fn.hydrateSignals = (signalState) => mod({ signalState });
+  fn.signalState = (signalState) => signalState ? mod({ signalState }) : createBodyBuilder(state);
+  Object.defineProperty(fn, "mobile", {
+    get: () => createBreakpointContext("mobile", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  Object.defineProperty(fn, "tablet", {
+    get: () => createBreakpointContext("tablet", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  Object.defineProperty(fn, "desktop", {
+    get: () => createBreakpointContext("desktop", state.pseudos, rebuildWithPseudos),
+    enumerable: true
+  });
+  function addPseudoState2(key, cb) {
+    const b = cb(createPseudoStyleBuilder());
+    return rebuildWithPseudos({ ...state.pseudos, [key]: { styles: b.__styles, classes: b.__classes } });
+  }
+  fn.hover = (cb) => addPseudoState2("hover", cb);
+  fn.active = (cb) => addPseudoState2("active", cb);
+  fn.focus = (cb) => addPseudoState2("focus", cb);
+  fn.focusWithin = (cb) => addPseudoState2("focusWithin", cb);
+  fn.width = (v) => mod({ classes: { ...state.classes, w: cls("w", v) } });
+  fn.height = (v) => mod({ classes: { ...state.classes, h: cls("h", v) } });
+  fn.margin = (v) => mod({ classes: { ...state.classes, m: cls("m", v) } });
+  fn.marginT = (v) => mod({ classes: { ...state.classes, mt: cls("mt", v) } });
+  fn.marginB = (v) => mod({ classes: { ...state.classes, mb: cls("mb", v) } });
+  fn.marginL = (v) => mod({ classes: { ...state.classes, ml: cls("ml", v) } });
+  fn.marginR = (v) => mod({ classes: { ...state.classes, mr: cls("mr", v) } });
+  fn.marginX = (v) => mod({ classes: { ...state.classes, mx: cls("mx", v) } });
+  fn.marginY = (v) => mod({ classes: { ...state.classes, my: cls("my", v) } });
+  fn.m = (v) => mod({ classes: { ...state.classes, m: cls("m", v) } });
+  fn.mt = (v) => mod({ classes: { ...state.classes, mt: cls("mt", v) } });
+  fn.mb = (v) => mod({ classes: { ...state.classes, mb: cls("mb", v) } });
+  fn.ml = (v) => mod({ classes: { ...state.classes, ml: cls("ml", v) } });
+  fn.mr = (v) => mod({ classes: { ...state.classes, mr: cls("mr", v) } });
+  fn.mx = (v) => mod({ classes: { ...state.classes, mx: cls("mx", v) } });
+  fn.my = (v) => mod({ classes: { ...state.classes, my: cls("my", v) } });
+  fn.padding = (v) => mod({ classes: { ...state.classes, p: cls("p", v) } });
+  fn.paddingT = (v) => mod({ classes: { ...state.classes, pt: cls("pt", v) } });
+  fn.paddingB = (v) => mod({ classes: { ...state.classes, pb: cls("pb", v) } });
+  fn.paddingL = (v) => mod({ classes: { ...state.classes, pl: cls("pl", v) } });
+  fn.paddingR = (v) => mod({ classes: { ...state.classes, pr: cls("pr", v) } });
+  fn.paddingX = (v) => mod({ classes: { ...state.classes, px: cls("px", v) } });
+  fn.paddingY = (v) => mod({ classes: { ...state.classes, py: cls("py", v) } });
+  fn.p = (v) => mod({ classes: { ...state.classes, p: cls("p", v) } });
+  fn.pt = (v) => mod({ classes: { ...state.classes, pt: cls("pt", v) } });
+  fn.pb = (v) => mod({ classes: { ...state.classes, pb: cls("pb", v) } });
+  fn.pl = (v) => mod({ classes: { ...state.classes, pl: cls("pl", v) } });
+  fn.pr = (v) => mod({ classes: { ...state.classes, pr: cls("pr", v) } });
+  fn.px = (v) => mod({ classes: { ...state.classes, px: cls("px", v) } });
+  fn.py = (v) => mod({ classes: { ...state.classes, py: cls("py", v) } });
+  fn.gap = (v) => mod({ classes: { ...state.classes, gap: cls("gap", v) } });
+  fn.gapX = (v) => mod({ classes: { ...state.classes, gapx: cls("gapx", v) } });
+  fn.gapY = (v) => mod({ classes: { ...state.classes, gapy: cls("gapy", v) } });
+  fn.spaceX = (v) => mod({ classes: { ...state.classes, gapx: cls("gapx", v) } });
+  fn.spaceY = (v) => mod({ classes: { ...state.classes, gapy: cls("gapy", v) } });
+  fn.align = (v) => {
+    const classMap = {
+      start: "items-start",
+      end: "items-end",
+      "end-safe": "items-end",
+      center: "items-center",
+      "center-safe": "items-center",
+      baseline: "items-baseline",
+      "baseline-last": "items-baseline",
+      stretch: "items-stretch"
+    };
+    return mod({ classes: { ...state.classes, align: classMap[v] } });
+  };
+  fn.justify = (v) => {
+    const classMap = {
+      start: "justify-start",
+      end: "justify-end",
+      "end-safe": "justify-end",
+      center: "justify-center",
+      "center-safe": "justify-center",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly",
+      stretch: "justify-stretch",
+      baseline: "justify-baseline",
+      normal: "justify-normal"
+    };
+    return mod({ classes: { ...state.classes, justify: classMap[v] } });
+  };
+  fn.acjc = () => mod({
+    classes: { ...state.classes, align: "items-center", justify: "justify-center" }
+  });
+  fn.background = (v) => mod({ classes: { ...state.classes, bg: cls("bg", v) } });
+  fn.radius = (v) => mod({ classes: { ...state.classes, radius: cls("radius", v) } });
+  return fn;
+}
+var Body = createBodyBuilder();
+var DocumentElement = class extends UIElement {
+  head;
+  body;
+  lang;
+  constructor(head, body, lang = "en") {
+    super();
+    this.head = head;
+    this.body = body;
+    this.lang = lang;
+  }
+  render() {
+    return `<!DOCTYPE html>
+<html lang="${this.lang}">
+${this.head.render()}
+${this.body.render()}
+</html>`;
+  }
+};
+function createDocumentBuilder(head, body, lang = "en") {
+  const doc = new DocumentElement(head, body, lang);
+  return {
+    lang(newLang) {
+      return createDocumentBuilder(head, body, newLang);
+    },
+    render() {
+      return doc.render();
+    }
+  };
+}
+function Document(head, body) {
+  const headElement = typeof head === "function" ? head() : head;
+  return createDocumentBuilder(headElement, body);
+}
+
+// cli.ts
+var [command, appFile] = Deno.args;
+if (command !== "dev" && command !== "build") {
+  console.error("Usage: vebui <dev|build> <file.ts>");
+  Deno.exit(1);
+}
+var VERBOSE = Deno.env.get("VEBUI_VERBOSE") === "true";
+function resolveCorePackage() {
+  const workspacePath = new URL("../../core", import.meta.url).pathname;
+  try {
+    Deno.statSync(workspacePath + "/index.ts");
+    if (VERBOSE) console.log(`[vebui] using workspace core: ${workspacePath}`);
+    return workspacePath;
+  } catch {
+  }
+  try {
+    const corePath = new URL(import.meta.resolve("@vebui/core")).pathname;
+    if (VERBOSE) console.log(`[vebui] resolved core via import.meta: ${corePath}`);
+    if (corePath.includes("/dist/")) return dirname(dirname(corePath));
+    return dirname(corePath);
+  } catch {
+    console.error("[vebui] Error: Cannot resolve @vebui/core package");
+    Deno.exit(1);
+  }
+}
+var corePackageRoot = resolveCorePackage();
+if (VERBOSE) console.log(`[vebui] core package root: ${corePackageRoot}`);
+var userPatterns = Deno.env.get("VEBUI_CONTENT")?.split(",").map((s) => s.trim()) ?? [];
+var patterns = [
+  `${corePackageRoot}/**/*.ts`,
+  ...userPatterns
+];
+var OUT_CSS = Deno.env.get("VEBUI_CSS_OUT") ?? "./assets/vebui/vebui.css";
+var OUT_JS = Deno.env.get("VEBUI_JS_OUT") ?? "./assets/vebui/vebui.client.js";
+async function* walkDir(dir) {
+  for await (const entry of Deno.readDir(dir)) {
+    const fullPath = resolve(dir, entry.name);
+    if (entry.isDirectory) yield* walkDir(fullPath);
+    else if (entry.isFile) yield fullPath;
+  }
+}
+function globBase(pattern) {
+  const starIdx = pattern.indexOf("*");
+  if (starIdx === -1) return pattern;
+  return dirname(pattern.slice(0, starIdx + 1));
+}
+async function resolveFiles(globs) {
+  const files = /* @__PURE__ */ new Set();
+  for (const pattern of globs) {
+    const base = globBase(pattern);
+    try {
+      for await (const file of walkDir(base)) {
+        if (!file.endsWith(".ts") || file.includes("clis/") || file.endsWith(".css") || file.endsWith(".js") || file.includes("/client/")) continue;
+        files.add(file);
+      }
+    } catch {
+    }
+  }
+  if (VERBOSE) console.log(`[vebui] resolved ${files.size} files`);
+  return [...files];
+}
+var CHAIN_RE = /\b(VStack|HStack|Block|Text|Button|Input|Body|Head)(?:(?:\s*\.\s*[a-zA-Z0-9]+\s*\((?:[^()]*|\((?:[^()]*|\([^()]*\))*\))*\))|(?:\s*\.\s*(?:mobile|tablet|desktop|hover|active|focus|focusWithin|before|after)))+/g;
+var IMPORT_CSS_RE = /import\s+["'](.+\.css)["']/g;
+async function extractCSSFromSource(source, allClasses, discoveredCSS, currentFile) {
+  for (const match of source.matchAll(IMPORT_CSS_RE)) {
+    const importPath = match[1];
+    if (!importPath) continue;
+    const resolvedPath = importPath.startsWith(".") ? resolve(dirname(currentFile), importPath) : importPath;
+    discoveredCSS.add(resolvedPath);
+  }
+  const MODIFIER_RE = /\.([a-zA-Z0-9]+)\((?:"([^"]+)"|([\d.]+))\)/g;
+  const MODIFIER_TO_CLS = {
+    margin: "m",
+    marginT: "mt",
+    marginB: "mb",
+    marginL: "ml",
+    marginR: "mr",
+    marginX: "mx",
+    marginY: "my",
+    m: "m",
+    mt: "mt",
+    mb: "mb",
+    ml: "ml",
+    mr: "mr",
+    mx: "mx",
+    my: "my",
+    padding: "p",
+    paddingT: "pt",
+    paddingB: "pb",
+    paddingL: "pl",
+    paddingR: "pr",
+    paddingX: "px",
+    paddingY: "py",
+    p: "p",
+    pt: "pt",
+    pb: "pb",
+    pl: "pl",
+    pr: "pr",
+    px: "px",
+    py: "py",
+    gap: "gap",
+    gapX: "gapx",
+    gapY: "gapy",
+    spaceX: "gapx",
+    spaceY: "gapy",
+    radius: "radius",
+    size: "text",
+    width: "w",
+    height: "h",
+    background: "bg"
+  };
+  const INLINE_MODIFIERS = /* @__PURE__ */ new Set(["color", "weight", "align", "justify", "border", "opacity", "fontWeight", "fontSize", "flex"]);
+  for (const match of source.matchAll(MODIFIER_RE)) {
+    const [, modifier, strVal, numVal] = match;
+    const value = strVal ?? numVal;
+    if (!modifier || value === void 0 || value === null) continue;
+    if (INLINE_MODIFIERS.has(modifier)) continue;
+    const prefix = MODIFIER_TO_CLS[modifier];
+    if (prefix) allClasses.add(`${prefix}-${String(value).replace(/[^a-zA-Z0-9]/g, "_")}`);
+  }
+  const mockProxy = new Proxy(() => mockProxy, {
+    get: (_, key) => {
+      if (key === Symbol.toPrimitive) return (hint) => hint === "string" ? "MOCK" : 0;
+      if (key === "key") return "mock-sig";
+      return mockProxy;
+    },
+    apply: () => mockProxy
+  });
+  const context = { ...dist_exports };
+  for (const match of source.matchAll(CHAIN_RE)) {
+    const chain = match[0];
+    try {
+      const proxy = new Proxy(context, {
+        get: (target, key) => {
+          if (key === Symbol.unscopables) return void 0;
+          if (key in target) return target[key];
+          return mockProxy;
+        },
+        has: () => true
+      });
+      const result = new Function("with(this) { return " + chain + " }").call(proxy);
+      if (typeof result === "function") {
+        const element = result("DUMMY");
+        if (element && typeof element.render === "function") {
+          const html = element.render();
+          for (const classMatch of html.matchAll(/class="([^"]+)"/g)) {
+            classMatch[1].split(" ").forEach((cls2) => {
+              if (cls2 && !cls2.startsWith("w-")) allClasses.add(cls2);
+            });
+          }
+        }
+      }
+    } catch (e) {
+      if (VERBOSE) console.error(`[vebui] eval failed for ${chain.slice(0, 50).trim()}:`, e);
+    }
+  }
+}
+async function bundleClient() {
+  const clientEntry = resolve(corePackageRoot, "client/index.ts");
+  Deno.mkdirSync(dirname(OUT_JS), { recursive: true });
+  const result = await esbuild({
+    entryPoints: [clientEntry],
+    bundle: true,
+    minify: true,
+    format: "esm",
+    platform: "browser",
+    write: false
+  });
+  const out = result.outputFiles[0];
+  if (out) {
+    await Deno.writeTextFile(OUT_JS, out.text);
+    console.log(`[vebui] bundled client \u2192 ${OUT_JS} (${out.text.length} bytes)`);
+  }
+}
+async function generateCSS() {
+  const files = await resolveFiles(patterns);
+  const allClasses = /* @__PURE__ */ new Set();
+  const discoveredCSS = /* @__PURE__ */ new Set();
+  Deno.mkdirSync(dirname(OUT_CSS), { recursive: true });
+  drainCSS();
+  for (const file of files) {
+    const source = await Deno.readTextFile(file);
+    await extractCSSFromSource(source, allClasses, discoveredCSS, file);
+  }
+  const hashedCSS = drainCSS();
+  const utilityRules = [];
+  for (const cls2 of allClasses) {
+    const decl = classToDeclaration(cls2);
+    if (decl) utilityRules.push(`.${cls2} { ${decl} }`);
+  }
+  const parts = ["/* Generated by vebui \u2014 do not edit */"];
+  try {
+    const tokens = await Deno.readTextFile(resolve(corePackageRoot, "tokens.css"));
+    parts.push("\n/* Design Tokens & Reset */");
+    parts.push(tokens);
+  } catch {
+    console.warn("[vebui] Warning: Could not find core/tokens.css");
+  }
+  for (const cssFile of discoveredCSS) {
+    try {
+      const content = await Deno.readTextFile(cssFile);
+      parts.push(`
+/* User CSS: ${cssFile} */`);
+      parts.push(content);
+    } catch {
+      console.warn(`[vebui] Warning: Could not read CSS file: ${cssFile}`);
+    }
+  }
+  parts.push("\n/* Utility Classes */");
+  parts.push(...utilityRules);
+  if (hashedCSS.trim()) {
+    parts.push("\n/* Hashed Pseudo-classes */");
+    parts.push(hashedCSS);
+  }
+  await Deno.writeTextFile(OUT_CSS, parts.join("\n"));
+  console.log(`[vebui] generated css \u2192 ${OUT_CSS} (${files.length} files, ${utilityRules.length} utilities)`);
+}
+async function buildAll() {
+  await Promise.all([generateCSS(), bundleClient()]);
+}
+await buildAll();
+if (command === "build") {
+  esbuildStop();
+  Deno.exit(0);
+}
+if (appFile) {
+  new Deno.Command("deno", {
+    args: ["run", "--allow-all", appFile],
+    stdout: "inherit",
+    stderr: "inherit"
+  }).spawn();
+}
+var watchDirs = new Set(
+  patterns.map((p) => {
+    const full = p.startsWith("/") ? p : resolve(Deno.cwd(), p);
+    return p.includes("*") ? full.replace(/\/\*.*$/, "") : dirname(full);
+  })
+);
+if (VERBOSE) console.log(`[vebui] watching: ${[...watchDirs].join(", ")}`);
+var debounceTimer = null;
+function scheduleRebuild(path) {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(async () => {
+    const isClient = path.includes("/client/");
+    if (!isClient) await generateCSS();
+    if (isClient || path.includes("signal-rpc.ts")) await bundleClient();
+  }, 50);
+}
+var cleanup = () => {
+  esbuildStop();
+  Deno.exit(0);
+};
+Deno.addSignalListener("SIGINT", cleanup);
+Deno.addSignalListener("SIGTERM", cleanup);
+for (const dir of watchDirs) {
+  ;
+  (async () => {
+    try {
+      const watcher = Deno.watchFs(dir, { recursive: true });
+      for await (const event of watcher) {
+        if (event.kind !== "modify" && event.kind !== "create") continue;
+        for (const path of event.paths) {
+          if (!path.endsWith(".ts")) continue;
+          scheduleRebuild(path);
+        }
+      }
+    } catch {
+    }
+  })();
+}