weifuwu 0.38.2 → 0.40.0

package/dist/client/index.js

@@ -1,5 +1,6 @@
 // src/client/vnode.ts
 var Fragment = /* @__PURE__ */ Symbol("Fragment");
+var Portal = /* @__PURE__ */ Symbol("Portal");
 function jsx(type, props, key) {
   return {
     type,
@@ -27,60 +28,17 @@ function normalizeProps(props) {
   }
   return result;
 }
-
-// src/client/render.ts
-var mutationMethods = ["push", "pop", "splice", "shift", "unshift", "sort", "reverse"];
-var wrappedCache = /* @__PURE__ */ new WeakMap();
-function wrapDeep(val, dirty) {
-  if (val === null || typeof val !== "object") return val;
-  if (val instanceof Node) return val;
-  if (typeof Blob !== "undefined" && val instanceof Blob) return val;
-  if (wrappedCache.has(val)) return wrappedCache.get(val);
-  const handler = Array.isArray(val) ? {
-    get(target, key, receiver) {
-      const v = Reflect.get(target, key, receiver);
-      if (typeof key === "string" && mutationMethods.includes(key) && typeof v === "function") {
-        return function(...args) {
-          const r = v.apply(target, args);
-          dirty();
-          return r;
-        };
-      }
-      return wrapDeep(v, dirty);
-    },
-    set(target, key, v) {
-      Reflect.set(target, key, wrapDeep(v, dirty));
-      dirty();
-      return true;
-    }
-  } : {
-    get(_target, key, receiver) {
-      const v = Reflect.get(_target, key, receiver);
-      return wrapDeep(v, dirty);
-    },
-    set(target, key, v) {
-      Reflect.set(target, key, wrapDeep(v, dirty));
-      dirty();
-      return true;
-    }
+function createPortal(children, portalKey) {
+  return {
+    type: Portal,
+    props: { children, portalKey },
+    key: portalKey ?? void 0
   };
-  const proxy = new Proxy(val, handler);
-  wrappedCache.set(val, proxy);
-  return proxy;
-}
-function createComponentProxy(target, dirty) {
-  return new Proxy(target, {
-    set(t, k, v) {
-      if (t[k] === v) return true;
-      t[k] = wrapDeep(v, dirty);
-      dirty();
-      return true;
-    },
-    get(t, k) {
-      return wrapDeep(t[k], dirty);
-    }
-  });
 }
+
+// src/client/render.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_TAGS = /* @__PURE__ */ new Set(["svg", "path", "circle", "line", "rect", "text", "g", "polyline", "polygon", "ellipse", "defs", "use", "clipPath", "mask", "linearGradient", "radialGradient", "stop", "tspan"]);
 function render(input, ctx) {
   return renderValue(input, ctx);
 }
@@ -89,6 +47,9 @@ function renderValue(v, ctx) {
   if (typeof v === "string" || typeof v === "number") return document.createTextNode(String(v));
   if (Array.isArray(v)) return renderArray(v, ctx);
   const vnode = v;
+  if (vnode.type === Portal) {
+    return renderPortal(vnode, ctx);
+  }
   if (vnode.type === Fragment) {
     const frag = document.createDocumentFragment();
     forEach(vnode.props?.children, (child) => frag.appendChild(renderValue(child, ctx)));
@@ -97,19 +58,30 @@ function renderValue(v, ctx) {
   if (typeof vnode.type === "function") {
     return renderComponent(vnode.type, vnode.props, vnode, ctx);
   }
-  const el = document.createElement(vnode.type);
+  const tag = vnode.type;
+  const el = SVG_TAGS.has(tag) ? document.createElementNS(SVG_NS, tag) : document.createElement(tag);
   vnode.el = el;
+  let selectValue;
   for (const [key, value] of Object.entries(vnode.props ?? {})) {
-    if (key === "children" || key === "key" || key === "ref") continue;
+    if (key === "children" || key === "key" || key === "value" || key === "innerHTML") continue;
     setProp(el, key, value);
   }
-  const flatChildren = flattenChildren(vnode.props?.children);
-  for (const child of flatChildren) {
-    el.appendChild(renderValue(child, ctx));
+  if ("value" in (vnode.props ?? {}) && el instanceof HTMLSelectElement) {
+    selectValue = vnode.props.value;
+  } else if ("value" in (vnode.props ?? {})) {
+    setProp(el, "value", vnode.props.value);
   }
-  if (vnode.props?.ref) {
-    const result = vnode.props.ref(el);
-    if (typeof result === "function") vnode._cleanup = result;
+  if ("innerHTML" in (vnode.props ?? {})) {
+    el.innerHTML = String(vnode.props.innerHTML ?? "");
+  } else {
+    const flatChildren = flattenChildren(vnode.props?.children);
+    for (const child of flatChildren) {
+      el.appendChild(renderValue(child, ctx));
+    }
+  }
+  if (selectValue !== void 0) {
+    ;
+    el.value = String(selectValue);
   }
   return el;
 }
@@ -117,12 +89,34 @@ function renderComponent(Comp, props, vnode, ctx) {
   const prev$ = vnode._$;
   if (!prev$) vnode._$ = {};
   ctx.ui = ctx.ui ?? {};
-  ctx.ui.ready = !!prev$;
   const _target = vnode._$;
-  ctx.ui.$ = createComponentProxy(_target, () => ctx.ui?.dirty?.());
+  _target._hooks = { mount: [], unmount: [], update: [] };
+  ctx.ui.onmount = (fn) => {
+    _target._hooks.mount = [fn];
+  };
+  ctx.ui.onunmount = (fn) => {
+    _target._hooks.unmount = [fn];
+  };
+  ctx.ui.onupdate = (fn) => {
+    _target._hooks.update = [fn];
+  };
+  ctx.ui.onmounted = (fn) => {
+    _target._onmounted = fn;
+  };
   let childVNode;
   try {
     childVNode = Comp(props, ctx);
+    if (typeof childVNode !== "function") {
+      throw new Error(
+        `Component ${Comp.name || "anonymous"} must return a render function. Use (init_props, ctx) => (props) => VNode pattern.`
+      );
+    }
+    vnode._render = childVNode;
+    childVNode = childVNode(props);
+    if (!prev$) {
+      const mh = _target._hooks?.mount;
+      if (mh && mh[0]) mh[0]();
+    }
   } catch (e) {
     const errHandler = ctx.ui?._errorHandler;
     if (errHandler) {
@@ -138,13 +132,53 @@ function renderComponent(Comp, props, vnode, ctx) {
     return document.createTextNode("");
   }
   vnode._child = childVNode;
-  return renderValue(childVNode, ctx);
+  const rootNode = renderValue(childVNode, ctx);
+  if (_target._onmounted && !prev$) {
+    const cleanup = _target._onmounted(rootNode);
+    if (typeof cleanup === "function") vnode._cleanup = cleanup;
+  }
+  return rootNode;
 }
 function renderArray(arr, ctx) {
   const frag = document.createDocumentFragment();
   for (const item of arr) frag.appendChild(renderValue(item, ctx));
   return frag;
 }
+function ensurePortalContainer() {
+  let c = document.getElementById("__wf_portal");
+  if (!c) {
+    c = document.createElement("div");
+    c.id = "__wf_portal";
+    c.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:9999";
+    document.body.appendChild(c);
+  }
+  return c;
+}
+function renderPortal(vnode, ctx) {
+  const container = ensurePortalContainer();
+  const sub = document.createElement("div");
+  sub.style.pointerEvents = "auto";
+  container.appendChild(sub);
+  vnode._portalEl = sub;
+  const children = normalize(vnode.props?.children);
+  vnode._child = children;
+  for (const child of children) {
+    sub.appendChild(renderValue(child, ctx));
+  }
+  const placeholder = document.createTextNode("");
+  vnode.el = placeholder;
+  return placeholder;
+}
+function patchPortal(_parent, oldNode, oldV, newV, ctx) {
+  const sub = oldV._portalEl;
+  newV._portalEl = sub;
+  if (!sub) return renderPortal(newV, ctx);
+  const newChildren = normalize(newV.props?.children);
+  const oldChildren = oldV._child || [];
+  newV._child = newChildren;
+  patchSimpleChildren(sub, oldChildren, newChildren, ctx);
+  return oldNode ?? document.createTextNode("");
+}
 function forEach(children, fn) {
   if (children == null) return;
   if (Array.isArray(children)) {
@@ -168,12 +202,17 @@ function flattenChildren(children) {
 }
 function setProp(el, key, value) {
   if (key === "class" || key === "className") {
-    el.className = String(value ?? "");
+    if (el instanceof SVGElement) el.setAttribute("class", String(value ?? ""));
+    else el.className = String(value ?? "");
   } else if (key === "style" && typeof value === "object" && value !== null) {
-    Object.assign(el.style, value);
+    const st = el.style;
+    for (const sk of Object.keys(value)) {
+      const sv = value[sk];
+      if (sv != null) st[sk] = typeof sv === "number" ? sv + "px" : String(sv);
+    }
   } else if (key.startsWith("on") && typeof value === "function") {
     el.addEventListener(key.slice(2).toLowerCase(), value);
-  } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+  } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
     ;
     el.value = String(value ?? "");
   } else if (value === true) {
@@ -221,13 +260,61 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
   if (typeof newV.type === "function") {
     const comp = newV.type;
     if (oldV._$) newV._$ = oldV._$;
+    if (!newV._$) newV._$ = {};
     ctx.ui = ctx.ui ?? {};
-    ctx.ui.ready = !!newV._$;
     const _tgt = newV._$;
-    ctx.ui.$ = createComponentProxy(_tgt, () => ctx.ui?.dirty?.());
-    const childNew = comp(newV.props, ctx);
+    if (oldV._render) newV._render = oldV._render;
+    if (oldV._cleanup) newV._cleanup = oldV._cleanup;
+    if (_tgt._hooks) {
+      ;
+      ctx.ui.onmount = (fn) => {
+        _tgt._hooks.mount = [fn];
+      };
+      ctx.ui.onunmount = (fn) => {
+        _tgt._hooks.unmount = [fn];
+      };
+      ctx.ui.onupdate = (fn) => {
+        _tgt._hooks.update = [fn];
+      };
+    }
+    if (_tgt._onmounted) {
+      ;
+      ctx.ui.onmounted = (fn) => {
+        _tgt._onmounted = fn;
+      };
+    }
+    if (oldV._$) {
+      const uh = _tgt._hooks?.update;
+      if (uh && uh[0]) uh[0](oldV.props);
+    }
+    let childNew;
+    try {
+      if (typeof newV._render === "function") {
+        childNew = newV._render(newV.props);
+      } else {
+        childNew = comp(newV.props, ctx);
+        if (typeof childNew === "function") {
+          newV._render = childNew;
+          childNew = childNew(newV.props);
+        }
+      }
+    } catch (e) {
+      const errHandler = ctx.ui?._errorHandler;
+      if (errHandler) {
+        errHandler(e);
+        childNew = null;
+      } else {
+        console.error("Component render error:", e);
+        childNew = null;
+      }
+    }
+    const _prevChild = oldV._child;
     newV._child = childNew;
-    return patchValue(parent, oldNode, oldV._child, childNew, ctx);
+    if (childNew == null && _tgt._hooks?.unmount?.length) {
+      _tgt._hooks.unmount[0]?.();
+      _tgt._hooks.unmount = [];
+    }
+    return patchValue(parent, oldNode, _prevChild, childNew, ctx);
   }
   if (newV.type === Fragment) {
     patchChildren(parent, oldV, newV, ctx);
@@ -237,7 +324,6 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
     if (oldNode && oldNode.nodeType === 1) {
       patchProps(oldNode, oldV.props, newV.props);
       patchChildren(oldNode, oldV, newV, ctx);
-      if (oldV._cleanup) newV._cleanup = oldV._cleanup;
     } else if (oldNode) {
       callRefCleanup(oldInput);
       const node = renderValue(newInput, ctx);
@@ -246,6 +332,9 @@ function patchValue(parent, oldNode, oldInput, newInput, ctx) {
     }
     return oldNode;
   }
+  if (newV.type === Portal) {
+    return patchPortal(parent, oldNode, oldV, newV, ctx);
+  }
   if (Array.isArray(newInput)) {
     const oldArr = Array.isArray(oldInput) ? oldInput : [];
     patchSimpleChildren(parent, oldArr, newInput, ctx);
@@ -260,17 +349,18 @@ function typeOf(input) {
   const v = input;
   if (typeof v.type === "function") return `fn:${v.type.name || "anon"}`;
   if (v.type === Fragment) return "fragment";
+  if (v.type === Portal) return "portal";
   if (typeof v.type === "string") return "tag:" + v.type;
   return "unknown";
 }
 function patchProps(el, oldProps, newProps) {
-  const oldKeys = oldProps ? Object.keys(oldProps).filter((k) => k !== "children" && k !== "key" && k !== "ref") : [];
-  const newKeys = newProps ? Object.keys(newProps).filter((k) => k !== "children" && k !== "key" && k !== "ref") : [];
+  const oldKeys = oldProps ? Object.keys(oldProps).filter((k) => k !== "children" && k !== "key" && k !== "innerHTML") : [];
+  const newKeys = newProps ? Object.keys(newProps).filter((k) => k !== "children" && k !== "key" && k !== "innerHTML") : [];
   for (const key of oldKeys) {
     if (!newKeys.includes(key)) {
       if (key.startsWith("on") && typeof oldProps[key] === "function") {
         el.removeEventListener(key.slice(2).toLowerCase(), oldProps[key]);
-      } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+      } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
         ;
         el.value = "";
       } else {
@@ -281,16 +371,23 @@ function patchProps(el, oldProps, newProps) {
   for (const key of newKeys) {
     const oldVal = oldProps?.[key];
     const newVal = newProps?.[key];
-    if (newVal !== oldVal) {
+    if (key === "innerHTML") {
+      if (newVal !== oldVal) el.innerHTML = String(newVal ?? "");
+    } else if (newVal !== oldVal) {
       if (key === "class" || key === "className") {
-        el.className = String(newVal ?? "");
+        if (el instanceof SVGElement) el.setAttribute("class", String(newVal ?? ""));
+        else el.className = String(newVal ?? "");
       } else if (key === "style" && typeof newVal === "object") {
-        Object.assign(el.style, newVal);
+        const st = el.style;
+        for (const sk of Object.keys(newVal)) {
+          const sv = newVal[sk];
+          if (sv != null) st[sk] = typeof sv === "number" ? sv + "px" : String(sv);
+        }
       } else if (key.startsWith("on") && typeof newVal === "function") {
         const eventName = key.slice(2).toLowerCase();
         if (typeof oldVal === "function") el.removeEventListener(eventName, oldVal);
         el.addEventListener(eventName, newVal);
-      } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+      } else if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
         ;
         el.value = String(newVal ?? "");
       } else if (newVal === true) {
@@ -298,7 +395,7 @@ function patchProps(el, oldProps, newProps) {
       } else if (newVal != null && newVal !== false) {
         el.setAttribute(key, String(newVal));
       } else {
-        if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        if (key === "value" && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)) {
           ;
           el.value = "";
         } else {
@@ -405,15 +502,46 @@ function runRefCleanup(vnode) {
     vnode._cleanup();
     vnode._cleanup = void 0;
   }
-  forEach(vnode.props?.children, (child) => {
-    if (child && typeof child === "object" && child._cleanup) {
-      runRefCleanup(child);
+}
+function cleanupPortalChildren(vnode) {
+  const child = vnode._child;
+  if (child == null) return;
+  if (Array.isArray(child)) {
+    for (const c of child) {
+      if (c && typeof c === "object") callRefCleanup(c);
     }
-  });
+  } else if (typeof child === "object") {
+    callRefCleanup(child);
+  }
 }
 function callRefCleanup(input) {
   if (input == null || typeof input !== "object") return;
   const vnode = input;
+  if (vnode._child != null) {
+    if (Array.isArray(vnode._child)) {
+      for (const child of vnode._child) {
+        if (child && typeof child === "object") callRefCleanup(child);
+      }
+    } else {
+      callRefCleanup(vnode._child);
+    }
+    vnode._child = void 0;
+  }
+  if (vnode.props?.children && typeof vnode.type === "string") {
+    const children = Array.isArray(vnode.props.children) ? vnode.props.children : [vnode.props.children];
+    for (const child of children) {
+      if (child && typeof child === "object") callRefCleanup(child);
+    }
+  }
+  if (vnode._$ && vnode._$._hooks?.unmount) {
+    vnode._$._hooks.unmount[0]?.();
+    vnode._$._hooks.unmount = [];
+  }
+  if (vnode._portalEl) {
+    cleanupPortalChildren(vnode);
+    vnode._portalEl.remove();
+    vnode._portalEl = void 0;
+  }
   if (vnode._cleanup) runRefCleanup(vnode);
 }
 
@@ -518,18 +646,20 @@ function router(opts) {
   };
 }
 function RouteView(_props, ctx) {
-  const route = ctx.route;
-  if (!route?.chain?.length) return null;
-  const ctxAny = ctx;
-  const depth = layoutDepth.get(ctxAny) ?? 0;
-  if (depth >= route.chain.length) return null;
-  const def = route.chain[depth];
-  const Comp = def.layout ?? def.component;
-  if (!Comp) return null;
-  if (def.layout) {
-    layoutDepth.set(ctxAny, depth + 1);
-  }
-  return { type: Comp, props: {}, key: void 0 };
+  return () => {
+    const route = ctx.route;
+    if (!route?.chain?.length) return null;
+    const ctxAny = ctx;
+    const depth = layoutDepth.get(ctxAny) ?? 0;
+    if (depth >= route.chain.length) return null;
+    const def = route.chain[depth];
+    const Comp = def.layout ?? def.component;
+    if (!Comp) return null;
+    if (def.layout) {
+      layoutDepth.set(ctxAny, depth + 1);
+    }
+    return { type: Comp, props: {}, key: void 0 };
+  };
 }
 
 // src/client/app.ts
@@ -558,43 +688,41 @@ function createApp() {
       container = el;
       container.innerHTML = "";
       let _dirty = false;
-      function scheduleRender() {
-        if (_dirty) return;
+      let _rendering = false;
+      const doRender = () => {
+        if (_rendering || !container || !rootComponent || !oldVNode) return;
+        _rendering = true;
+        layoutDepth.delete(ctx);
+        const newVNode = wrapComponent(rootComponent, ctx);
+        const oldNode = container.firstChild;
+        if (oldNode) {
+          patchValue(container, oldNode, oldVNode, newVNode, ctx);
+        }
+        oldVNode = newVNode;
+        _rendering = false;
+      };
+      const scheduleRender = () => {
+        if (_dirty || _rendering) return;
         _dirty = true;
         queueMicrotask(() => {
           if (!_dirty) return;
           _dirty = false;
-          ctx.ui.render();
+          doRender();
         });
-      }
-      ;
+      };
       ctx.ui = {
-        render: () => {
-          if (!container || !rootComponent || !oldVNode) return;
-          _dirty = false;
-          layoutDepth.delete(ctx);
-          const newVNode = wrapComponent(rootComponent, ctx);
-          const oldNode = container.firstChild;
-          if (oldNode) {
-            patchValue(container, oldNode, oldVNode, newVNode, ctx);
-          }
-          oldVNode = newVNode;
-        },
-        /** 极少需要：仅当绕过 Proxy 直接操作底层对象时使用 */
-        dirty: () => {
-          scheduleRender();
-        },
-        /**
-         * 组件级 $ — 在 renderComponent 中被覆盖为每个组件独立的 Proxy。
-         * 这里保留占位，组件实际使用 ctx.ui.$ 时拿到的是 vnode._$ 上的 Proxy。
-         */
-        $: {},
-        ready: false
+        /** 立即同步渲染 */
+        render: doRender,
+        /** 标记脏状态，下个微任务批量渲染 */
+        dirty: scheduleRender,
+        /** 创建响应式状态容器：$.x = val 自动触发 dirty()（仅事件/timer 中生效） */
+        $: () => createReactiveState(scheduleRender)
       };
+      _rendering = true;
       oldVNode = wrapComponent(RootComponent, ctx);
       const node = render(oldVNode, ctx);
       if (node instanceof Node) container.appendChild(node);
-      _dirty = false;
+      _rendering = false;
       rendered = true;
     },
     destroy() {
@@ -608,6 +736,20 @@ function createApp() {
 function wrapComponent(Comp, _ctx) {
   return { type: Comp, props: {}, key: void 0 };
 }
+function createReactiveState(dirty) {
+  return new Proxy({}, {
+    set(target, key, value) {
+      const old = Reflect.get(target, key);
+      if (old === value) return true;
+      Reflect.set(target, key, value);
+      dirty();
+      return true;
+    },
+    get(target, key) {
+      return Reflect.get(target, key);
+    }
+  });
+}
 
 // src/client/types.ts
 function extendCtx(ctx, fields) {
@@ -872,31 +1014,32 @@ function auth(options) {
 
 // src/client/error-boundary.ts
 function ErrorBoundary(props, ctx) {
-  const $ = ctx.ui.$;
-  if (!("error" in $)) $.error = null;
-  if ($.error) {
-    const fb = props.fallback;
-    if (typeof fb === "function") {
-      return fb({ error: $.error });
+  let error = null;
+  return (props2) => {
+    if (error) {
+      const fb = props2.fallback;
+      if (typeof fb === "function") {
+        return fb({ error });
+      }
+      return fb ?? null;
     }
-    return fb ?? null;
-  }
-  ;
-  ctx.ui._errorHandler = (err) => {
-    $.error = err;
-    ctx.ui.dirty();
-  };
-  try {
-    const result = props.children;
-    return result ?? null;
-  } catch (e) {
-    $.error = e;
-    const fb = props.fallback;
-    if (typeof fb === "function") {
-      return fb({ error: e });
+    ;
+    ctx.ui._errorHandler = (err) => {
+      error = err;
+      ctx.ui.render();
+    };
+    const children = props2.children;
+    try {
+      return children ?? null;
+    } catch (e) {
+      error = e;
+      const fb = props2.fallback;
+      if (typeof fb === "function") {
+        return fb({ error: e });
+      }
+      return fb ?? null;
     }
-    return fb ?? null;
-  }
+  };
 }
 
 // src/client/locale/zh_CN.ts
@@ -914,7 +1057,22 @@ var zhCN = {
     Switch: { ariaLabel: "\u5207\u6362" },
     Breadcrumb: { ariaLabel: "\u9762\u5305\u5C51" },
     Modal: { ariaLabel: "\u5F39\u7A97" },
-    Drawer: { ariaLabel: "\u4FA7\u8FB9\u9762\u677F" }
+    Drawer: { ariaLabel: "\u4FA7\u8FB9\u9762\u677F" },
+    DatePicker: {
+      w0: "\u65E5",
+      w1: "\u4E00",
+      w2: "\u4E8C",
+      w3: "\u4E09",
+      w4: "\u56DB",
+      w5: "\u4E94",
+      w6: "\u516D",
+      hour: "\u65F6",
+      minute: "\u5206",
+      time: "\u65F6\u95F4",
+      confirm: "\u786E\u5B9A",
+      cancel: "\u53D6\u6D88",
+      placeholder: "\u9009\u62E9\u65E5\u671F"
+    }
   }
 };
 
@@ -933,7 +1091,22 @@ var enUS = {
     Switch: { ariaLabel: "Toggle" },
     Breadcrumb: { ariaLabel: "Breadcrumb" },
     Modal: { ariaLabel: "Dialog" },
-    Drawer: { ariaLabel: "Panel" }
+    Drawer: { ariaLabel: "Panel" },
+    DatePicker: {
+      w0: "Su",
+      w1: "Mo",
+      w2: "Tu",
+      w3: "We",
+      w4: "Th",
+      w5: "Fr",
+      w6: "Sa",
+      hour: "Hour",
+      minute: "Min",
+      time: "Time",
+      confirm: "OK",
+      cancel: "Cancel",
+      placeholder: "Pick a date"
+    }
   }
 };
 
@@ -1060,6 +1233,33 @@ function trapFocus(container) {
   };
 }
 
+// src/client/popup.ts
+function computeFixedPos(el, placement = "bottom", gap = 6, center = true) {
+  const rect = el.getBoundingClientRect();
+  switch (placement) {
+    case "bottom":
+      return {
+        top: rect.bottom + gap,
+        left: center ? rect.left + rect.width / 2 : rect.left
+      };
+    case "top":
+      return {
+        top: rect.top - gap,
+        left: center ? rect.left + rect.width / 2 : rect.left
+      };
+    case "left":
+      return {
+        top: center ? rect.top + rect.height / 2 : rect.top,
+        left: rect.left - gap
+      };
+    case "right":
+      return {
+        top: center ? rect.top + rect.height / 2 : rect.top,
+        left: rect.right + gap
+      };
+  }
+}
+
 // src/client/confirm.ts
 function createConfirmModal(message, options) {
   return new Promise((resolve) => {
@@ -1135,11 +1335,14 @@ export {
   ApiError,
   ErrorBoundary,
   Fragment,
+  Portal,
   RouteView,
   api,
   auth,
+  computeFixedPos,
   confirm,
   createApp,
+  createPortal,
   enUS,
   extendCtx,
   h,