weifuwu 0.35.1 → 0.36.1

package/dist/layout/weifuwu-layout.css

@@ -0,0 +1,536 @@
+/* weifuwu/layout — 基于 CSS 标准的布局原语 */
+
+/* weifuwu/theme — 设计 Token */
+:root {
+  /* ── 间距 ── */
+  --wf-gap-xs: 4px;
+  --wf-gap-sm: 8px;
+  --wf-gap-md: 12px;
+  --wf-gap-lg: 16px;
+  --wf-gap-xl: 24px;
+  --wf-gap-2xl: 32px;
+
+  --wf-space-xs: 4px;
+  --wf-space-sm: 8px;
+  --wf-space: 12px;
+  --wf-space-md: 16px;
+  --wf-space-lg: 24px;
+  --wf-space-xl: 32px;
+  --wf-space-2xl: 40px;
+
+  /* ── 圆角 ── */
+  --wf-radius-sm: 4px;
+  --wf-radius: 6px;
+  --wf-radius-md: 8px;
+  --wf-radius-lg: 12px;
+  --wf-radius-xl: 20px;
+
+  --wf-surface-radius: var(--wf-radius-md);
+  --wf-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  /* ── 阴影 ── */
+  --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --wf-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
+  --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+
+  /* ── 层级 ── */
+  --wf-pop-z: 50;
+  --wf-cover-z: 100;
+
+  /* ── 色彩 — 品牌 ── */
+  --wf-color-primary: #4f6ef7;
+  --wf-color-primary-hover: #3b5ae0;
+  --wf-color-primary-bg: #eef1ff;
+
+  --wf-color-success: #22c55e;
+  --wf-color-success-bg: #f0fdf4;
+  --wf-color-warning: #f59e0b;
+  --wf-color-warning-bg: #fffbeb;
+  --wf-color-error: #ef4444;
+  --wf-color-error-bg: #fef2f2;
+
+  /* ── 色彩 — 中性 ── */
+  --wf-color-text: #0f172a;
+  --wf-color-text-secondary: #64748b;
+  --wf-color-text-tertiary: #94a3b8;
+  --wf-color-text-disabled: #cbd5e1;
+
+  --wf-color-bg: #ffffff;
+  --wf-color-bg-secondary: #f8fafc;
+  --wf-color-bg-tertiary: #f1f5f9;
+
+  --wf-color-border: #e2e8f0;
+  --wf-color-border-light: #f1f5f9;
+  --wf-color-border-dark: #cbd5e1;
+
+  /* ── surface 引用色彩 ── */
+  --wf-surface-bg: var(--wf-color-bg);
+
+  /* ── 字体 ── */
+  --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-3xl: 24px;
+  --wf-font-size-4xl: 28px;
+  --wf-font-size-5xl: 32px;
+
+  --wf-font-weight-normal: 400;
+  --wf-font-weight-medium: 500;
+  --wf-font-weight-semibold: 600;
+  --wf-font-weight-bold: 700;
+
+  /* ── 行高 ── */
+  --wf-line-height-tight: 1.25;
+  --wf-line-height: 1.5;
+  --wf-line-height-relaxed: 1.75;
+
+  /* ── 边框宽度 ── */
+  --wf-border-width: 1px;
+
+  /* ── 聚焦环 ── */
+  --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+  /* ── 动效 ── */
+  --wf-transition-duration: 150ms;
+  --wf-transition-timing: ease;
+  --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
+
+  /* ── 色彩 — 信息（补充） ── */
+  --wf-color-info: #1677ff;
+  --wf-color-info-bg: #e6f4ff;
+
+  /* ── 表单控件 ── */
+  --wf-accent-color: var(--wf-color-primary);
+  --wf-caret-color: var(--wf-color-primary);
+
+  /* ── 透明度 ── */
+  --wf-opacity-disabled: 0.5;
+  --wf-opacity-overlay: 0.4;
+
+  /* ── 文字间距 ── */
+  --wf-letter-spacing: normal;
+  --wf-letter-spacing-wide: 0.5px;
+  --wf-letter-spacing-wider: 1px;
+}
+
+/* weifuwu/theme — 暗色模式 */
+[data-theme="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,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--wf-color-bg);
+  color: var(--wf-color-text);
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-base);
+  line-height: var(--wf-line-height);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--wf-color-primary);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--wf-color-primary-hover);
+  text-decoration: underline;
+}
+
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input,
+textarea,
+select {
+  accent-color: var(--wf-accent-color);
+  caret-color: var(--wf-caret-color);
+  background: var(--wf-color-bg);
+  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);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-color: var(--wf-color-primary);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled,
+button:disabled {
+  opacity: var(--wf-opacity-disabled);
+  cursor: not-allowed;
+}
+
+button {
+  accent-color: var(--wf-accent-color);
+  background: var(--wf-color-bg);
+  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);
+  cursor: pointer;
+}
+button:hover {
+  border-color: var(--wf-color-primary);
+  color: var(--wf-color-primary);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--wf-font-weight-semibold);
+  line-height: var(--wf-line-height-tight);
+  color: var(--wf-color-text);
+}
+
+p {
+  line-height: var(--wf-line-height-relaxed);
+}
+
+small {
+  font-size: var(--wf-font-size-sm);
+  color: var(--wf-color-text-tertiary);
+}
+
+label {
+  font-size: var(--wf-font-size-base);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-text);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--wf-font-weight-medium);
+  font-size: var(--wf-font-size-xs);
+  color: var(--wf-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  background: var(--wf-color-bg-secondary);
+}
+
+td {
+  padding: var(--wf-space) var(--wf-space-sm);
+  border-bottom: var(--wf-border-width) solid var(--wf-color-border);
+  color: var(--wf-color-text);
+  font-size: var(--wf-font-size-base);
+}
+
+hr {
+  border: none;
+  border-top: var(--wf-border-width) solid var(--wf-color-border);
+  margin: var(--wf-space-md) 0;
+}
+
+pre, code {
+  font-family: var(--wf-font-mono);
+  font-size: var(--wf-font-size-sm);
+}
+
+pre {
+  background: var(--wf-color-bg-secondary);
+  border: var(--wf-border-width) solid var(--wf-color-border);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-space) var(--wf-space-md);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+code {
+  background: var(--wf-color-bg-secondary);
+  padding: 2px 6px;
+  border-radius: var(--wf-radius-sm);
+}
+
+/* stack — 纵向堆叠 */
+.wf-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* stack-reverse — 纵向反向堆叠 */
+.wf-stack-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* row — 横向排列 */
+.wf-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* row-reverse — 横向反向排列 */
+.wf-row-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* split — 两端展开 */
+.wf-split {
+  display: flex;
+  justify-content: space-between;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+.wf-split > :last-child {
+  flex-shrink: 0;
+}
+
+/* center — 居中 */
+.wf-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* right — 靠右对齐 */
+.wf-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* top — 顶部对齐 */
+.wf-top {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* bottom — 底部对齐 */
+.wf-bottom {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* stretch — 拉伸对齐 */
+.wf-stretch {
+  display: flex;
+  align-items: stretch;
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* around — 均匀环绕分布 */
+.wf-around {
+  display: flex;
+  justify-content: space-around;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* evenly — 均匀分布 */
+.wf-evenly {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: var(--wf-align, center);
+  gap: var(--wf-gap, var(--wf-gap-md));
+}
+
+/* fill — 撑满剩余空间 */
+.wf-fill {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* fixed — 固定不伸缩 */
+.wf-fixed {
+  flex: none;
+}
+
+/* auto — 按内容撑满 */
+.wf-auto {
+  flex: auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* cover — 全屏覆盖 */
+.wf-cover {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--wf-z, var(--wf-cover-z));
+}
+
+/* pop — 浮动层 */
+.wf-pop {
+  position: absolute;
+  z-index: var(--wf-z, var(--wf-pop-z));
+}
+
+/* anchor — 定位锚点容器 */
+.wf-anchor {
+  position: relative;
+}
+
+/* sticky — 粘性定位 */
+.wf-sticky {
+  position: sticky;
+  top: var(--wf-offset, 0);
+}
+
+/* surface — 基础面 */
+.wf-surface {
+  border-radius: var(--wf-surface-radius);
+  box-shadow: var(--wf-surface-shadow);
+  background: var(--wf-surface-bg);
+}
+
+/* grid — 二维网格 */
+.wf-grid {
+  display: grid;
+  grid-template-columns: var(--wf-cols, repeat(auto-fill, minmax(280px, 1fr)));
+  gap: var(--wf-gap, var(--wf-gap-lg));
+}
+
+/* cluster — 换行簇 */
+.wf-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wf-gap, var(--wf-gap-sm));
+  justify-content: var(--wf-justify, center);
+  align-items: var(--wf-align, center);
+}
+
+/* scroll — 可滚动容器 */
+.wf-scroll {
+  overflow: auto;
+}
+
+/* clip — 裁剪溢出 */
+.wf-clip {
+  overflow: hidden;
+}
+
+/* hidden — 隐藏元素 */
+.wf-hidden {
+  display: none;
+}
+
+/* block — 块级显示 */
+.wf-block {
+  display: block;
+}
+
+/* inline — 行内显示 */
+.wf-inline {
+  display: inline;
+}
+
+/* inline-block — 行内块 */
+.wf-inline-block {
+  display: inline-block;
+}
+
+/* container — 内容宽度约束居中 */
+.wf-container {
+  max-width: var(--wf-max, 1200px);
+  margin: 0 auto;
+  padding: 0 var(--wf-gap, var(--wf-gap-lg));
+}
+
+/* contents — 容器抹除（子元素直接参与上层布局） */
+.wf-contents {
+  display: contents;
+}
+
+/* layer — 层级控制 */
+.wf-layer {
+  position: relative;
+  z-index: var(--wf-z, 1);
+}
+
+/* nowrap — 不换行 */
+.wf-nowrap {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--wf-gap, var(--wf-gap-md));
+  align-items: var(--wf-align, center);
+}
+
+/* min — flex 子项可收缩约束 */
+.wf-shrink {
+  min-width: 0;
+  min-height: 0;
+}
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.35.1",
+  "version": "0.36.1",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {
@@ -15,7 +15,8 @@
     "./client/jsx-runtime": {
       "types": "./dist/client/index.d.ts",
       "default": "./dist/client/index.js"
-    }
+    },
+    "./layout": "./dist/layout/weifuwu-layout.css"
   },
   "files": [
     "dist/",