weifuwu 0.55.2 → 0.56.0

package/dist/index.js

@@ -7,6 +7,18 @@ var HttpError = class extends Error {
     this.status = status;
   }
 };
+function createMiddleware(config) {
+  const mw = async (req, ctx, next) => {
+    const injected = await config.setup(ctx);
+    Object.assign(ctx, injected);
+    return next(req, ctx);
+  };
+  mw.__meta = {
+    injects: config.injects,
+    depends: config.depends ?? []
+  };
+  return mw;
+}
 
 // src/core/serve.ts
 import http from "node:http";
@@ -714,7 +726,9 @@ var Router = class _Router {
       if (!next) return this._wildcardMatch(method, segments);
       node = next;
     }
-    return this._resolveMatch(node, method, params, segments.length);
+    const resolved = this._resolveMatch(node, method, params, segments.length);
+    if (resolved) return resolved;
+    return this._wildcardMatch(method, segments);
   }
   _wildcardMatch(method, segments) {
     if (!this._hasWildcard) return null;
@@ -1069,23 +1083,219 @@ import { build } from "esbuild";
 import { readFile, stat } from "node:fs/promises";
 import { resolve as resolve2 } from "node:path";
 import { fileURLToPath } from "node:url";
+
+// src/ui/html-safe.ts
 var HtmlSafe = class {
+  value;
   constructor(value) {
     this.value = value;
   }
-  value;
   toString() {
     return this.value;
   }
 };
+
+// src/client/vnode.ts
+var ASYNC_MARK = "__wfAsyncComponent";
+function isAsyncComponent(type) {
+  return typeof type === "function" && type?.[ASYNC_MARK] === true;
+}
+var Fragment = /* @__PURE__ */ Symbol("Fragment");
+var Portal = /* @__PURE__ */ Symbol("Portal");
+
+// src/client/reactive.ts
+function createReactiveState(dirty) {
+  const proxyCache = /* @__PURE__ */ new WeakMap();
+  const reactive = (target) => {
+    if (target === null || typeof target !== "object") return target;
+    if (proxyCache.has(target)) return proxyCache.get(target);
+    const proxy = new Proxy(target, {
+      set(target2, key, value) {
+        const old = Reflect.get(target2, key);
+        if (old === value) return true;
+        Reflect.set(target2, key, value);
+        dirty();
+        return true;
+      },
+      get(target2, key) {
+        const value = Reflect.get(target2, key);
+        if (typeof value === "object" && value !== null) return reactive(value);
+        return value;
+      },
+      deleteProperty(target2, key) {
+        if (Reflect.has(target2, key)) {
+          Reflect.deleteProperty(target2, key);
+          dirty();
+        }
+        return true;
+      }
+    });
+    proxyCache.set(target, proxy);
+    return proxy;
+  };
+  return reactive({});
+}
+
+// src/ui/ssr.ts
 function escape(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+var VOID_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function classToString(v) {
+  if (typeof v === "string") return v;
+  if (Array.isArray(v)) return v.filter(Boolean).join(" ");
+  if (v && typeof v === "object") {
+    return Object.entries(v).filter(([, b]) => b).map(([k]) => k).join(" ");
+  }
+  return "";
+}
+function styleToString(v) {
+  if (typeof v === "string") return v;
+  if (v && typeof v === "object") {
+    return Object.entries(v).filter(([, x]) => x != null).map(([k, x]) => `${k}:${typeof x === "number" ? x + "px" : String(x)}`).join(";");
+  }
+  return "";
+}
+function createSsrContext(serverCtx, dataStore) {
+  const usedIds = /* @__PURE__ */ new Set();
+  const ui2 = {
+    $: () => createReactiveState(() => {
+    }),
+    dirty: () => {
+    },
+    render: () => {
+    },
+    selfId: (name) => {
+      if (usedIds.has(name)) throw new Error(`[weifuwu] Duplicate component ID: "${name}"`);
+      usedIds.add(name);
+    },
+    useMedia: () => {
+    },
+    useBreakpoint: () => {
+    },
+    usePopupPosition: () => ({ top: 0, left: 0, refresh: () => {
+    } })
+  };
+  const ctx = Object.create(serverCtx ?? {});
+  ctx.ui = ui2;
+  ctx.data = {
+    async get(key, fetcher) {
+      if (dataStore.has(key)) return dataStore.get(key);
+      if (!fetcher) return void 0;
+      const val = await fetcher();
+      dataStore.set(key, val);
+      return val;
+    },
+    set(key, val) {
+      dataStore.set(key, val);
+    },
+    has(key) {
+      return dataStore.has(key);
+    }
+  };
+  return ctx;
+}
+async function renderSsr(input, ctx) {
+  if (input == null || typeof input === "boolean") return "";
+  if (typeof input === "string" || typeof input === "number") return escape(String(input));
+  if (Array.isArray(input)) {
+    let s = "";
+    for (const c of input) s += await renderSsr(c, ctx);
+    return s;
+  }
+  const vnode = input;
+  if (vnode.type === Portal) return renderSsr(vnode.props?.children, ctx);
+  if (vnode.type === Fragment) return renderSsr(vnode.props?.children, ctx);
+  if (typeof vnode.type === "function") {
+    let def;
+    if (isAsyncComponent(vnode.type)) {
+      def = await vnode.type(ctx);
+      if (typeof def !== "function") {
+        throw new Error(
+          `asyncComponent factory <${vnode.type.name || "anonymous"}> must return a Component (initProps, ctx) => (props) => VNode.`
+        );
+      }
+    } else {
+      def = vnode.type;
+    }
+    const childCtx = Object.create(ctx);
+    const renderFn = def(vnode.props ?? {}, childCtx);
+    if (typeof renderFn !== "function") {
+      throw new Error(
+        `Component ${vnode.type.name || "anonymous"} must return a render function. Use (init_props, ctx) => (props) => VNode pattern.`
+      );
+    }
+    return renderSsr(renderFn(vnode.props ?? {}), childCtx);
+  }
+  const tag = vnode.type;
+  const props = vnode.props ?? {};
+  const attrs = [];
+  let innerHTML;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key") continue;
+    if (key === "ref") continue;
+    if (key.startsWith("on") && typeof value === "function") continue;
+    if (key === "innerHTML") {
+      innerHTML = String(value ?? "");
+      continue;
+    }
+    if (key === "class" || key === "className") {
+      const cls = classToString(value);
+      if (cls) attrs.push(` class="${escape(cls)}"`);
+      continue;
+    }
+    if (key === "style" && value && typeof value === "object") {
+      attrs.push(` style="${escape(styleToString(value))}"`);
+      continue;
+    }
+    if (value === true) {
+      attrs.push(` ${key}`);
+      continue;
+    }
+    if (value === false || value == null) continue;
+    attrs.push(` ${key}="${escape(String(value))}"`);
+  }
+  const attrStr = attrs.join("");
+  if (VOID_TAGS.has(tag)) return `<${tag}${attrStr}>`;
+  if (innerHTML !== void 0) return `<${tag}${attrStr}>${innerHTML}</${tag}>`;
+  const children = await renderSsr(props.children, ctx);
+  return `<${tag}${attrStr}>${children}</${tag}>`;
+}
+async function ssrToString(Comp, props, serverCtx, opts = {}) {
+  const dataStore = opts.data ?? /* @__PURE__ */ new Map();
+  const ctx = createSsrContext(serverCtx, dataStore);
+  const html = await renderSsr({ type: Comp, props: props ?? {}, key: void 0 }, ctx);
+  return new HtmlSafe(html);
+}
+function serializeData(data) {
+  const json = JSON.stringify(Object.fromEntries(data)).replace(/</g, "\\u003c");
+  return `<script>window.__DATA__=${json};</script>`;
+}
+
+// src/ui/index.ts
+function escape2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 function stringify(v) {
   if (v == null || v === false || v === true) return "";
   if (Array.isArray(v)) return v.map(stringify).join("");
   if (v instanceof HtmlSafe) return v.value;
-  return escape(String(v));
+  return escape2(String(v));
 }
 function unsafe(s) {
   return new HtmlSafe(s);
@@ -1139,12 +1349,21 @@ function ui() {
     }
     ctx.ui = {
       html: Object.assign(htmlTag, { unsafe }),
+      /** SSR 渲染组件 → HTML 片段（HtmlSafe：内联进 ctx.ui.html 不二次转义） */
+      async ssr(Comp, props, opts) {
+        const safe = await ssrToString(Comp, props ?? {}, ctx, opts);
+        return safe;
+      },
+      /** 序列化 SSR 数据存储 → window.__DATA__ 脚本（HtmlSafe） */
+      ssrData(data) {
+        return new HtmlSafe(serializeData(data));
+      },
       async js(entryPath) {
         const absPath = resolveEntry(entryPath);
         const cached = jsCache.get(absPath);
         if (cached && await jsCacheFresh(cached.inputs)) {
           return new Response(cached.code, {
-            headers: { "Content-Type": "application/javascript" }
+            headers: { "Content-Type": "application/javascript", "Cache-Control": "no-cache" }
           });
         }
         const result = await build({
@@ -1168,7 +1387,7 @@ function ui() {
         }
         jsCache.set(absPath, { code, inputs });
         return new Response(code, {
-          headers: { "Content-Type": "application/javascript" }
+          headers: { "Content-Type": "application/javascript", "Cache-Control": "no-cache" }
         });
       },
       async css(entryPath) {
@@ -1177,7 +1396,7 @@ function ui() {
         const cached = cssCache.get(absPath);
         if (cached && cached.mtime === st.mtimeMs) {
           return new Response(cached.code, {
-            headers: { "Content-Type": "text/css; charset=utf-8" }
+            headers: { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" }
           });
         }
         let code = await readFile(absPath, "utf-8");
@@ -1195,7 +1414,7 @@ function ui() {
         }
         cssCache.set(absPath, { code, mtime: st.mtimeMs });
         return new Response(code, {
-          headers: { "Content-Type": "text/css; charset=utf-8" }
+          headers: { "Content-Type": "text/css; charset=utf-8", "Cache-Control": "no-cache" }
         });
       }
     };
@@ -1203,6 +1422,98 @@ function ui() {
   };
 }
 
+// src/client/route-match.ts
+function joinPaths(a, b) {
+  if (!b || b === "/") return a || "/";
+  const left = a.endsWith("/") ? a.slice(0, -1) : a;
+  const right = b.startsWith("/") ? b : "/" + b;
+  return left + right;
+}
+function compilePath(path) {
+  const keys = [];
+  const reStr = path.replace(/:(\w+)/g, (_, key) => {
+    keys.push(key);
+    return "([^/]+)";
+  }).replace(/\*/g, ".*");
+  return { re: new RegExp(`^${reStr}$`), keys };
+}
+function flattenRoutes(routes, basePath = "", chain = []) {
+  const result = [];
+  for (const route of routes) {
+    const fullPath = joinPaths(basePath, route.path);
+    const { re, keys } = compilePath(fullPath);
+    const fullChain = [...chain, route];
+    result.push({ re, keys, def: route, chain: fullChain });
+    if (route.children) {
+      result.push(...flattenRoutes(route.children, fullPath, fullChain));
+    }
+  }
+  return result;
+}
+function matchRoute(path, routes) {
+  let best = null;
+  for (const fr of routes) {
+    if (path.match(fr.re)) {
+      if (!best || fr.chain.length > best.chain.length) best = fr;
+    }
+  }
+  return best;
+}
+function extractParams(path, match) {
+  const params = {};
+  const m = path.match(match.re);
+  if (m) {
+    for (let i = 0; i < match.keys.length; i++) {
+      params[match.keys[i]] = decodeURIComponent(m[i + 1]);
+    }
+  }
+  return params;
+}
+
+// src/ui/ssr-page.ts
+var DEFAULT_TEMPLATE = (p) => `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(p.title)}</title>
+  ${(p.styles ?? []).map((s) => `<link rel="stylesheet" href="${escapeHtml(s)}">`).join("\n  ")}
+</head>
+<body>
+  <div id="root">${p.html}</div>
+  ${p.dataScript}
+  ${p.bundle ? `<script src="${escapeHtml(p.bundle)}"></script>` : ""}
+</body>
+</html>`;
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function uiSsr(opts) {
+  const flatRoutes = flattenRoutes(opts.routes);
+  const template = opts.template ?? DEFAULT_TEMPLATE;
+  return async (req, ctx, next) => {
+    if (req.method !== "GET") return next(req, ctx);
+    const url = new URL(req.url);
+    const match = matchRoute(url.pathname, flatRoutes);
+    if (!match) return next(req, ctx);
+    const params = extractParams(url.pathname, match);
+    const def = match.chain[match.chain.length - 1] ?? match.def;
+    const pageCtx = Object.assign(Object.create(ctx), {
+      params,
+      route: { path: url.pathname, params, query: Object.fromEntries(url.searchParams) }
+    });
+    if (!def.component) return next(req, ctx);
+    const data = /* @__PURE__ */ new Map();
+    const html = await ssrToString(def.component, {}, pageCtx, { data });
+    const title = opts.title ? opts.title({ params, def }) : def.title || "weifuwu";
+    const dataScript = new HtmlSafe(serializeData(data)).toString();
+    const body = template({ html: html.toString(), dataScript, title, bundle: opts.bundle, styles: opts.styles });
+    return new Response(body, {
+      headers: { "Content-Type": "text/html; charset=utf-8" }
+    });
+  };
+}
+
 // src/db/postgres/connection.ts
 import net from "node:net";
 import crypto2 from "node:crypto";
@@ -2933,6 +3244,7 @@ export {
   badRequest,
   conflict,
   cors,
+  createMiddleware,
   created,
   forbidden,
   noContent,
@@ -2947,6 +3259,7 @@ export {
   serverError,
   tooManyRequests,
   ui,
+  uiSsr,
   unauthorized,
   unprocessable
 };

package/dist/layout/weifuwu-layout.css

@@ -35,8 +35,20 @@
   --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
 
   /* ── 层级 ── */
-  --wf-pop-z: 50;
-  --wf-cover-z: 100;
+  /* 浮层全部 createPortal 到 body，全局参与堆叠。
+     顺序：sticky < overlay < modal/drawer < 弹出面板族 < toast < tooltip。
+     modal 与 drawer 互斥出现；面板族同级（dropdown/select/datepicker/popover）用 DOM 顺序裁决。 */
+  --wf-z-sticky: 40;
+  --wf-z-overlay: 80;
+  --wf-z-modal: 100;
+  --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
+  --wf-z-toast: 140;
+  --wf-z-tooltip: 160;
+  --wf-z-dropdown: var(--wf-z-popover); /* 语义别名：下拉菜单属弹出面板族 */
+
+  /* ── 兼容别名（旧 token 名，语义近似映射） ── */
+  --wf-pop-z: var(--wf-z-popover);
+  --wf-cover-z: var(--wf-z-modal);
 
   /* ── 色彩 — 品牌 ── */
   --wf-color-primary: #4f6ef7;
@@ -71,15 +83,15 @@
   --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
 
-  --wf-font-size-xs: 11px;
-  --wf-font-size-sm: 12px;
-  --wf-font-size-base: 13px;
-  --wf-font-size-lg: 14px;
-  --wf-font-size-xl: 15px;
-  --wf-font-size-2xl: 20px;
+  --wf-font-size-xs: 12px;
+  --wf-font-size-sm: 13px;
+  --wf-font-size-base: 14px;
+  --wf-font-size-lg: 15px;
+  --wf-font-size-xl: 16px;
+  --wf-font-size-2xl: 21px;
   --wf-font-size-3xl: 24px;
-  --wf-font-size-4xl: 28px;
-  --wf-font-size-5xl: 32px;
+  --wf-font-size-4xl: 30px;
+  --wf-font-size-5xl: 36px;
 
   --wf-font-weight-normal: 400;
   --wf-font-weight-medium: 500;
@@ -110,6 +122,10 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* 控件尺寸：垂直内边距 + 目标高度（移动端在 _base.css 提升到 44px） */
+  --wf-control-pad-y: 10px;
+  --wf-control-height: 36px;
+
   /* ── 断点 ── */
   --wf-bp-sm: 640px;
   --wf-bp-md: 768px;
@@ -126,8 +142,21 @@
   --wf-letter-spacing-wider: 1px;
 }
 
-/* weifuwu/theme — 暗色模式 */
-[data-theme="dark"] {
+/* weifuwu/theme — 暗色模式
+ *
+ * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
+ *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
+ *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
+ *
+ * ⚠️ 两段暗色覆盖值必须保持一致（静态 CSS 无法共享选择器列表，改动需同步）。
+ * 每段末尾都设置 color-scheme: dark，让原生控件/滚动条跟随。
+ */
+
+/* ── 激活方式一：手动 data-theme="dark" ── */
+/* color-scheme 用 :root[data-theme] 提升优先级，压过 _base.css 的 :root 定义（导入顺序在后者） */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
   --wf-color-primary: #6b8aff;
   --wf-color-primary-hover: #8ba3ff;
   --wf-color-primary-bg: #1e293b;
@@ -166,6 +195,50 @@
   --wf-surface-bg: var(--wf-color-bg);
 }
 
+/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --wf-color-primary: #6b8aff;
+    --wf-color-primary-hover: #8ba3ff;
+    --wf-color-primary-bg: #1e293b;
+
+    --wf-color-success: #4ade80;
+    --wf-color-success-bg: #14532d;
+    --wf-color-warning: #fbbf24;
+    --wf-color-warning-bg: #451a03;
+    --wf-color-error: #f87171;
+    --wf-color-error-bg: #451a1a;
+
+    --wf-color-info: #60a5fa;
+    --wf-color-info-bg: #172554;
+
+    --wf-color-text: #f1f5f9;
+    --wf-color-text-secondary: #94a3b8;
+    --wf-color-text-tertiary: #64748b;
+    --wf-color-text-disabled: #475569;
+
+    --wf-color-bg: #0f172a;
+    --wf-color-bg-secondary: #1e293b;
+    --wf-color-bg-tertiary: #334155;
+
+    --wf-color-border: #334155;
+    --wf-color-border-light: #1e293b;
+    --wf-color-border-dark: #475569;
+
+    --wf-surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+    --wf-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
+
+    --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+    --wf-surface-bg: var(--wf-color-bg);
+  }
+}
+
 /* weifuwu/theme — 基础元素默认样式 */
 *,
 *::before,
@@ -173,6 +246,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
+  color-scheme: light;
+}
+
 body {
   margin: 0;
   background: var(--wf-color-bg);
@@ -210,7 +288,7 @@ select {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
 }
 
 input:focus,
@@ -235,7 +313,8 @@ button {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space-md);
+  padding: var(--wf-control-pad-y) var(--wf-space-md);
+  min-height: var(--wf-control-height);
   cursor: pointer;
 }
 button:hover {
@@ -243,6 +322,31 @@ button:hover {
   color: var(--wf-color-primary);
 }
 
+/* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
+@media (pointer: coarse) {
+  button,
+  [role="button"],
+  input,
+  textarea,
+  select,
+  .wf-card--clickable,
+  .wf-table-th--sortable,
+  .wf-accordion-summary,
+  .wf-tag-close,
+  .wf-checkbox,
+  .wf-switch,
+  .wf-radio {
+    min-height: 44px;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--wf-font-weight-semibold);
   line-height: var(--wf-line-height-tight);
@@ -314,6 +418,18 @@ code {
   border-radius: var(--wf-radius-sm);
 }
 
+/* ── 无障碍：尊重系统减弱动效偏好 ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* stack — 纵向堆叠 */
 .wf-stack {
   display: flex;
@@ -558,7 +674,9 @@ code {
   min-height: 0;
 }
 
-/* text-align 对齐原语 */
+/* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
+
+/* ── text-align ── */
 
 .wf-text-left {
   text-align: left;
@@ -571,3 +689,50 @@ code {
 .wf-text-right {
   text-align: right;
 }
+
+/* ── 字号 ── */
+
+.wf-text-xs { font-size: var(--wf-font-size-xs); }
+.wf-text-sm { font-size: var(--wf-font-size-sm); }
+.wf-text-base { font-size: var(--wf-font-size-base); }
+.wf-text-lg { font-size: var(--wf-font-size-lg); }
+.wf-text-xl { font-size: var(--wf-font-size-xl); }
+.wf-text-2xl { font-size: var(--wf-font-size-2xl); }
+.wf-text-3xl { font-size: var(--wf-font-size-3xl); }
+.wf-text-4xl { font-size: var(--wf-font-size-4xl); }
+.wf-text-5xl { font-size: var(--wf-font-size-5xl); }
+
+/* ── 色阶 ── */
+
+.wf-text-secondary { color: var(--wf-color-text-secondary); }
+.wf-text-tertiary { color: var(--wf-color-text-tertiary); }
+.wf-text-disabled { color: var(--wf-color-text-disabled); }
+.wf-text-brand { color: var(--wf-color-primary); }
+
+/* ── 字重 ── */
+
+.wf-text-medium { font-weight: var(--wf-font-weight-medium); }
+.wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
+.wf-text-bold { font-weight: var(--wf-font-weight-bold); }
+
+/* ── 截断 ── */
+
+.wf-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wf-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/dist/ui/html-safe.d.ts

@@ -0,0 +1,11 @@
+/**
+ * HtmlSafe — 标记"已是安全 HTML"的字符串（SSR 输出/unsafe 用户输入）。
+ *
+ * ctx.ui.html 的 stringify 对插值默认转义；instanceof HtmlSafe 的值原样内联。
+ * 与 ctx.ui.ssr 的产物共用同一类，保证模板内联不二次转义。
+ */
+export declare class HtmlSafe {
+    value: string;
+    constructor(value: string);
+    toString(): string;
+}