weifuwu 0.94.0 → 0.95.0

package/dist/level5/client/components/Icon/Icon.ts

@@ -0,0 +1,154 @@
+/** Icon：stroke SVG 图标集，currentColor 着色，随字号缩放（showcase /components/icon） */
+/**
+ * weifuwu/client/components — Icon 内联 SVG 图标
+ *
+ * 24px stroke 风格（feather-like），currentColor 着色随文字/上下文，
+ * 零外部依赖（FS-05）。组件内部图标统一走这里，替换文本字形/emoji。
+ *
+ * 用法：
+ *   h(Icon, { name: 'close' })
+ *   h(Icon, { name: 'check', size: 16 })
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+
+export type IconName =
+  | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right'
+  | 'arrow-left' | 'arrow-up' | 'arrow-down' | 'arrow-right'
+  | 'sort' | 'sort-asc' | 'sort-desc'
+  | 'check' | 'close' | 'alert' | 'info' | 'warning'
+  | 'pause' | 'settings' | 'search' | 'send' | 'stop'
+  | 'retry' | 'upload' | 'trash' | 'edit' | 'plus' | 'copy' | 'eye' | 'eye-off'
+  | 'star'
+  // 业务/导航图标（布局蓝本 + 后台应用常用）
+  | 'dashboard' | 'grid' | 'box' | 'users' | 'user' | 'home' | 'folder' | 'file'
+  | 'file-text' | 'calendar' | 'clock' | 'bell' | 'menu' | 'activity' | 'trending-up'
+  | 'trending-down' | 'database' | 'server' | 'heart' | 'refresh' | 'message'
+  | 'inbox' | 'shield' | 'zap' | 'target' | 'mail' | 'external-link' | 'log-out'
+  | 'lock' | 'list' | 'bar-chart' | 'gauge' | 'paperclip' | 'filter' | 'layers' | 'map-pin'
+  | 'book-open' | 'github' | 'tag' | 'phone' | 'more-vertical' | 'check-circle' | 'alert-circle' | 'wifi' | 'cpu' | 'hard-drive' | 'globe' | 'briefcase' | 'layout'
+  // 移动端/媒体（ActionSheet 场景——2026-12 扩充）
+  | 'camera' | 'image' | 'share'
+
+export interface IconProps {
+  name: IconName
+  /** 尺寸，默认 1em（随字号缩放） */
+  size?: number | string
+  className?: string
+}
+
+const PATHS: Record<IconName, string[]> = {
+  'chevron-down': ['M6 9l6 6 6-6'],
+  'chevron-up': ['M6 15l6-6 6 6'],
+  'chevron-left': ['M15 18l-6-6 6-6'],
+  'chevron-right': ['M9 18l6-6-6-6'],
+  'arrow-left': ['M19 12H5', 'M12 19l-7-7 7-7'],
+  'arrow-up': ['M12 19V5', 'M5 12l7-7 7 7'],
+  'arrow-down': ['M12 5v14', 'M19 12l-7 7-7-7'],
+  'arrow-right': ['M5 12h14', 'M12 5l7 7-7 7'],
+  sort: ['M7 15l5 5 5-5', 'M7 9l5-5 5 5'],
+  'sort-asc': ['M12 19V5', 'M5 12l7-7 7 7'],
+  'sort-desc': ['M12 5v14', 'M19 12l-7 7-7-7'],
+  check: ['M20 6L9 17l-5-5'],
+  close: ['M18 6L6 18', 'M6 6l12 12'],
+  alert: ['M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z', 'M12 9v4', 'M12 17h.01'],
+  info: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M12 16v-4', 'M12 8h.01'],
+  warning: ['M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z', 'M12 9v4', 'M12 17h.01'],
+  pause: ['M6 4h4v16H6z', 'M14 4h4v16h-4z'],
+  settings: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'],
+  search: ['M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z', 'M21 21l-4.35-4.35'],
+  send: ['M22 2L11 13', 'M22 2l-7 20-4-9-9-4 20-7z'],
+  stop: ['M6 6h12v12H6z'],
+  retry: ['M1 4v6h6', 'M23 20v-6h-6', 'M20.49 9A9 9 0 0 0 5.64 5.64L1 10', 'M3.51 15a9 9 0 0 0 14.85 3.36L23 14'],
+  upload: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'],
+  trash: ['M3 6h18', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14', 'M10 11v6', 'M14 11v6'],
+  edit: ['M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7', 'M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'],
+  plus: ['M12 5v14', 'M5 12h14'],
+  copy: ['M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2z', 'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'],
+  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'],
+  'eye-off': ['M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94', 'M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19', 'M14.12 14.12a3 3 0 1 1-4.24-4.24', 'M1 1l22 22'],
+  star: ['M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'],
+  // ── 业务/导航（布局蓝本 + 后台应用常用）──
+  dashboard: ['M3 13h8V3H3z', 'M21 13h-8V9h8z', 'M21 21h-8v-8h8z', 'M3 21h8v-8H3z'],
+  grid: ['M3 3h7v7H3z', 'M14 3h7v7h-7z', 'M14 14h7v7h-7z', 'M3 14h7v7H3z'],
+  box: ['M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z', 'M3.27 6.96L12 12.01l8.73-5.05', 'M12 22.08V12'],
+  users: ['M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2', 'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z', 'M23 21v-2a4 4 0 0 0-3-3.87', 'M16 3.13a4 4 0 0 1 0 7.75'],
+  user: ['M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2', 'M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'],
+  home: ['M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', 'M9 22V12h6v10'],
+  folder: ['M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'],
+  file: ['M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z', 'M13 2v7h7'],
+  'file-text': ['M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z', 'M13 2v7h7', 'M9 13h6', 'M9 17h6'],
+  calendar: ['M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', 'M16 3v4', 'M8 3v4', 'M3 11h18'],
+  clock: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M12 6v6l4 2'],
+  bell: ['M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9', 'M13.73 21a2 2 0 0 1-3.46 0'],
+  menu: ['M3 12h18', 'M3 6h18', 'M3 18h18'],
+  activity: ['M22 12h-4l-3 9L9 3l-3 9H2'],
+  'trending-up': ['M23 6l-9.5 9.5-5-5L1 18', 'M17 6h6v6'],
+  'trending-down': ['M23 18l-9.5-9.5-5 5L1 6', 'M17 18h6v-6'],
+  database: ['M12 8c4.97 0 9-1.34 9-3s-4.03-3-9-3-9 1.34-9 3 4.03 3 9 3z', 'M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3', 'M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'],
+  server: ['M20 4H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z', 'M4 14h16', 'M20 14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2', 'M7 18h.01', 'M12 18h.01'],
+  heart: ['M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'],
+  refresh: ['M23 4v6h-6', 'M1 20v-6h6', 'M3.51 9a9 9 0 0 1 14.85-3.36L23 10', 'M20.49 15a9 9 0 0 1-14.85 3.36L1 14'],
+  message: ['M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'],
+  inbox: ['M22 12h-6l-2 3h-4l-2-3H2', 'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'],
+  shield: ['M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'],
+  zap: ['M13 2L3 14h9l-1 8 10-12h-9l1-8z'],
+  target: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12z', 'M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'],
+  mail: ['M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z', 'M22 6l-10 7L2 6'],
+  'external-link': ['M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6', 'M15 3h6v6', 'M10 14L21 3'],
+  'log-out': ['M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4', 'M16 17l5-5-5-5', 'M21 12H9'],
+  lock: ['M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z', 'M7 11V7a5 5 0 0 1 10 0v4'],
+  list: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'],
+  'bar-chart': ['M12 20V10', 'M18 20V4', 'M6 20v-4'],
+  gauge: ['M12 15l3.5-3.5', 'M20.39 18.39A10 10 0 1 0 3.61 18.39', 'M12 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'],
+  paperclip: ['M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'],
+  filter: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3z'],
+  layers: ['M12 2L2 7l10 5 10-5-10-5z', 'M2 17l10 5 10-5', 'M2 12l10 5 10-5'],
+  'map-pin': ['M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z', 'M15 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'],
+  'book-open': ['M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z', 'M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'],
+  github: ['M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'],
+  tag: ['M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z', 'M7 7h.01'],
+  phone: ['M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'],
+  'more-vertical': ['M12 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M12 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'],
+  'check-circle': ['M22 11.08V12a10 10 0 1 1-5.93-9.14', 'M22 4L12 14.01l-3-3'],
+  'alert-circle': ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M12 8v4', 'M12 16h.01'],
+  wifi: ['M5 12.55a11 11 0 0 1 14.08 0', 'M1.42 9a16 16 0 0 1 21.16 0', 'M8.53 16.11a6 6 0 0 1 6.95 0', 'M12 20h.01'],
+  cpu: ['M9 9h6v6H9z', 'M9 1v4', 'M15 1v4', 'M9 19v4', 'M15 19v4', 'M1 9h4', 'M1 15h4', 'M19 9h4', 'M19 15h4', 'M5 5h14v14H5z'],
+  'hard-drive': ['M22 12H2', 'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z', 'M6 16h.01', 'M10 16h.01'],
+  globe: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z', 'M2 12h20', 'M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'],
+  briefcase: ['M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16', 'M2 20h20', 'M4 4h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'],
+  layout: ['M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z', 'M9 3v18', 'M3 9h18'],
+  camera: ['M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z', 'M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z'],
+  image: ['M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z', 'M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z', 'M21 15l-5-5L5 21'],
+  share: ['M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8', 'M16 6l-4-4-4 4', 'M12 2v13'],
+}
+
+export const Icon: Component<IconProps> = (_init, _ctx)=>
+  (props)=> {
+    const { name, size, className } = props
+    return h('svg', {
+      class: `wf-icon${className ? ' ' + className : ''}`,
+      width: size ?? '1em',
+      height: size ?? '1em',
+      viewBox: '0 0 24 24',
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': 1.8,
+      'stroke-linecap': 'round',
+      'stroke-linejoin': 'round',
+      'aria-hidden': 'true',
+      focusable: 'false',
+    }, (PATHS[name] ?? (()=> {
+      // **未知 name 防御（2027-10 交互完整性计划 A4）**：原 `PATHS[name].map`
+      // 未知名直接崩 renderFn（组件级 hole 降级——重试自愈循环刷错误日志——
+      // statcard demo 无效图标名实证）。dev warn 一次 + fallback 圆点（生产
+      // 静默不崩——调用方仍可见「图标缺失」视觉信号）。
+      const g = globalThis as { __WF_DEV__?: boolean; __iconWarned?: string }
+    if (g.__WF_DEV__ && g.__iconWarned !== name) {
+        ;g.__iconWarned = name
+        console.warn(`[Icon] 未知图标名「${name}」——渲染占位圆点（PATHS 未登记——检查 name 拼写或登记新图标）`)
+      }
+      return ['M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0']
+    })()).map(d => h('path', { d })))
+  }

package/dist/level5/client/components/ImageCropper/ImageCropper.css

@@ -0,0 +1,3 @@
+.wf-imagecropper {
+  display: inline-block;
+}

package/dist/level5/client/components/ImageCropper/ImageCropper.d.ts

@@ -0,0 +1,22 @@
+/** ImageCropper：图片裁剪——canvas 原生 API + 拖拽裁剪框 + 比例控制（零依赖）（showcase /components/imagecropper） */
+/**
+ * ImageCropper — 图片裁剪（canvas 原生 API + 拖拽裁剪框，零依赖）
+ *
+ * 用法：<ImageCropper src={url} aspect={1} onCrop={dataUrl => ...} />
+ * 实现：图片绘制到 canvas → 裁剪框（pointer 事件拖动/右下柄等比缩放）→
+ * onCrop 输出 dataURL。
+ * 纪律：canvas 浏览器 API 经 ctx.browser（SSR 无害——null 检查）；
+ * 拖拽重绘直调 draw()（canvas 内部状态——非渲染路径，不走 ctx.render——
+ * 避免 vdom 全量 diff——2027-09 死交互实证修复：dragging/move/resize
+ * 曾为死代码——注释声称拖拽但从未接线）。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface ImageCropperProps {
+    src: string;
+    /** 裁剪比例（宽/高——默认 1） */
+    aspect?: number;
+    onCrop?: (dataUrl: string) => void;
+    onError?: (err: Error) => void;
+    className?: string;
+}
+export declare const ImageCropper: Component<ImageCropperProps>;

package/dist/level5/client/components/ImageCropper/ImageCropper.ts

@@ -0,0 +1,156 @@
+/** ImageCropper：图片裁剪——canvas 原生 API + 拖拽裁剪框 + 比例控制（零依赖）（showcase /components/imagecropper） */
+/**
+ * ImageCropper — 图片裁剪（canvas 原生 API + 拖拽裁剪框，零依赖）
+ *
+ * 用法：<ImageCropper src={url} aspect={1} onCrop={dataUrl => ...} />
+ * 实现：图片绘制到 canvas → 裁剪框（pointer 事件拖动/右下柄等比缩放）→
+ * onCrop 输出 dataURL。
+ * 纪律：canvas 浏览器 API 经 ctx.browser（SSR 无害——null 检查）；
+ * 拖拽重绘直调 draw()（canvas 内部状态——非渲染路径，不走 ctx.render——
+ * 避免 vdom 全量 diff——2027-09 死交互实证修复：dragging/move/resize
+ * 曾为死代码——注释声称拖拽但从未接线）。
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+import { createClientBrowser } from '../../../../level6/client/vdom/index.ts'
+
+export interface ImageCropperProps {
+  src: string
+  /** 裁剪比例（宽/高——默认 1） */
+  aspect?: number
+  onCrop?: (dataUrl: string)=> void
+  onError?: (err: Error)=> void
+  className?: string
+}
+
+export const ImageCropper: Component<ImageCropperProps> = (_init, ctx)=> {
+  let canvasEl: HTMLCanvasElement | null = null
+  let img: HTMLImageElement | null = null
+  let box = { x: 0, y: 0, w: 100, h: 100 } // 裁剪框（相对显示区）
+  let viewW = 320
+  let viewH = 240
+  let dragging: 'move' | 'se' | null = null
+  let last = { x: 0, y: 0 } // 上一 pointer 位置（逻辑坐标）
+
+  const loadImage = ()=> {
+    const browser = ctx.browser ?? createClientBrowser()
+    const image = browser.createElement('img') as HTMLImageElement
+    image.onload = ()=> {
+      img = image
+      // 初始裁剪框（居中 80%）
+      viewW = Math.min(image.naturalWidth, 480)
+      viewH = viewW / (ctx2.aspect)
+      box = { x: viewW * 0.1, y: viewH * 0.1, w: viewW * 0.8, h: viewH * 0.8 }
+      draw()
+      ctx.render()
+    }
+    image.onerror = ()=> ctx2.onError?.(new Error('图片加载失败'))
+    image.src = ctx2.src
+  }
+  const ctx2: any = { aspect: 1, src: '', onError: undefined }
+
+  const draw = ()=> {
+    if (!canvasEl || !img) return
+    const c = canvasEl
+    const g = c.getContext('2d')
+    if (!g) return
+    c.width = viewW
+    c.height = viewH
+    g.drawImage(img, 0, 0, viewW, viewH)
+    // 裁剪框：暗化外部 + 边框
+    g.fillStyle = 'rgba(0,0,0,0.45)'
+    g.fillRect(0, 0, viewW, viewH)
+    g.clearRect(box.x, box.y, box.w, box.h)
+    g.strokeStyle = '#fff'
+    g.lineWidth = 2
+    g.strokeRect(box.x, box.y, box.w, box.h)
+    // 角柄
+    g.fillStyle = '#fff'
+    g.fillRect(box.x + box.w - 6, box.y + box.h - 6, 12, 12)
+  }
+
+  const crop = ()=> {
+    if (!canvasEl || !img) return
+    const g = canvasEl.getContext('2d')
+    if (!g) return
+    const out = (ctx.browser ?? createClientBrowser()).createElement('canvas') as HTMLCanvasElement
+    out.width = box.w * 2
+    out.height = box.h * 2
+    const og = out.getContext('2d')
+    if (!og) return
+    og.drawImage(img, box.x / viewW * img.naturalWidth, box.y / viewH * img.naturalHeight,
+      box.w / viewW * img.naturalWidth, box.h / viewH * img.naturalHeight, 0, 0, out.width, out.height)
+    ctx2.onCrop?.(out.toDataURL('image/png'))
+  }
+
+  return (props)=> {
+    ctx2.aspect = props.aspect ?? 1
+    ctx2.src = props.src
+    ctx2.onError = props.onError
+    const { onCrop, className = '' } = props
+    // **最新回调写入 ctx2（2027-XX 实证修复）**：crop() 闭包走 ctx2.onCrop——
+    // 原 onCrop 只解构为局部变量从未写入 ctx2——裁剪按钮点击 onCrop 永不触发（onError 有赋值 onCrop 断链）
+    ctx2.onCrop = onCrop
+
+    const move = (dx: number, dy: number)=> {
+      box.x = Math.max(0, Math.min(viewW - box.w, box.x + dx))
+      box.y = Math.max(0, Math.min(viewH - box.h, box.y + dy))
+      draw()
+    }
+    const resize = (dx: number, dy: number)=> {
+      box.w = Math.max(30, Math.min(viewW - box.x, box.w + dx))
+      box.h = box.w / ctx2.aspect
+      draw()
+    }
+
+    // 拖拽接线（2027-09 死交互修复）：pointerdown 命中判定（框内 = move /
+    // 右下柄 = se）→ setPointerCapture 拖出 canvas 仍持续 → move/resize + draw。
+    // 坐标映射：canvas 有 maxWidth:100% 缩放——逻辑坐标 = (client - rect) × (逻辑/显示)。
+    const pointerPos = (e: PointerEvent)=> {
+      const r = canvasEl!.getBoundingClientRect()
+      return { x: (e.clientX - r.left) * (canvasEl!.width / r.width), y: (e.clientY - r.top) * (canvasEl!.height / r.height) }
+    }
+    const onPointerDown = (e: PointerEvent)=> {
+      if (!canvasEl) return
+      const p = pointerPos(e)
+      const handleHit = p.x >= box.x + box.w - 8 && p.y >= box.y + box.h - 8
+      const inBox = p.x >= box.x && p.x <= box.x + box.w && p.y >= box.y && p.y <= box.y + box.h
+      if (!handleHit && !inBox) return
+      dragging = handleHit ? 'se' : 'move'
+      last = p
+      canvasEl.setPointerCapture(e.pointerId)
+      canvasEl.style.cursor = handleHit ? 'nwse-resize' : 'move'
+    }
+    const onPointerMove = (e: PointerEvent)=> {
+      if (!dragging || !canvasEl) return
+      const p = pointerPos(e)
+      if (dragging === 'move') move(p.x - last.x, p.y - last.y)
+      else resize(p.x - last.x, p.y - last.y)
+      last = p
+    }
+    const onPointerUp = ()=> {
+      dragging = null
+      if (canvasEl) canvasEl.style.cursor = 'crosshair'
+    }
+
+    const wrapRef = (el: HTMLElement | null)=> {
+      if (el && !canvasEl) {
+        canvasEl = el.querySelector('canvas')
+        loadImage()
+      }
+    }
+
+    return h('div', { class: `wf-imagecropper wf-stack wf-gap-sm${className ? ` ${className}` : ''}` }, [
+      h('div', { ref: wrapRef, style: { position: 'relative', display: 'inline-block', cursor: 'crosshair' } }, [
+        h('canvas', { width: 320, height: 240, style: { maxWidth: '100%', borderRadius: 'var(--wf-radius-sm)', display: 'block' },
+          onPointerDown, onPointerMove, onPointerUp }),
+      ]),
+      h('div', { class: 'wf-row wf-gap-xs' },
+        h('button', { type: 'button', class: 'wf-btn wf-btn--sm wf-btn--primary', disabled: !img,
+          onClick: ()=> crop() }, '裁剪'),
+        h('button', { type: 'button', class: 'wf-btn wf-btn--sm', disabled: !img,
+          onClick: ()=> { box = { x: viewW * 0.1, y: viewH * 0.1, w: viewW * 0.8, h: viewH * 0.8 }; draw(); ctx.render() } }, '重置'),
+      ),
+    ])
+  }
+}

package/dist/level5/client/components/Img/Img.css

@@ -0,0 +1,42 @@
+/* weifuwu/client/components — Img */
+
+.wf-image {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.wf-img-preview-wrap {
+  display: inline-block;
+}
+
+.wf-img-preview-trigger {
+  display: inline-block;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+  line-height: 0;
+}
+
+.wf-img-preview-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
+
+.wf-img-preview-image {
+  transition: transform var(--wf-dur-base) var(--wf-ease-out);
+}
+
+/* 加载占位块（2026-09——placeholder：未就绪/失败——与 img 同尺寸——布局恒定） */
+.wf-image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--wf-color-bg-tertiary);
+  color: var(--wf-color-text-tertiary);
+  font-size: var(--wf-font-size-xs);
+  border-radius: var(--wf-radius-md);
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-image-placeholder-text) {}

package/dist/level5/client/components/Img/Img.d.ts

@@ -0,0 +1,27 @@
+/** Img：图片 \\<img\\> 组件：fallback / lazy / preview 点击放大（showcase /components/img） */
+/**
+ * weifuwu/client/components — Img
+ */
+import type { Component } from '../../../../level6/client/vdom/index.ts';
+export interface ImgProps {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    loading?: 'lazy' | 'eager';
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    style?: Record<string, string>;
+    /** 点击放大预览（对应 antd/EP Image preview） */
+    preview?: boolean;
+    /** 预览缩放倍率，默认 1 */
+    previewScale?: number;
+    /** 加载占位（2026-09——未就绪渲染占位块；width/height 已知时布局恒定——
+     * 零追滚零闪烁——聊天图片直接受益） */
+    placeholder?: boolean;
+    /** 占位文案（加载中——默认「图片加载中…」；无 src 且失败时业务侧也可直接传失败文案） */
+    placeholderText?: string;
+    /** 加载失败文案（有 src 但解码/请求失败——默认「图片加载失败」） */
+    errorText?: string;
+}
+export declare const Img: Component<ImgProps>;

package/dist/level5/client/components/Img/Img.ts

@@ -0,0 +1,143 @@
+/** Img：图片 \\<img\\> 组件：fallback / lazy / preview 点击放大（showcase /components/img） */
+/**
+ * weifuwu/client/components — Img
+ */
+
+import type { Component } from '../../../../level6/client/vdom/index.ts'
+import type { UIContext } from '../../../../level6/client/vdom/index.ts'
+import { h } from '../../../../level6/client/vdom/index.ts'
+
+export interface ImgProps {
+  src?: string
+  alt?: string
+  fallback?: string
+  loading?: 'lazy' | 'eager'
+  width?: number | string
+  height?: number | string
+  className?: string
+  style?: Record<string, string>
+  /** 点击放大预览（对应 antd/EP Image preview） */
+  preview?: boolean
+  /** 预览缩放倍率，默认 1 */
+  previewScale?: number
+  /** 加载占位（2026-09——未就绪渲染占位块；width/height 已知时布局恒定——
+   * 零追滚零闪烁——聊天图片直接受益） */
+  placeholder?: boolean
+  /** 占位文案（加载中——默认「图片加载中…」；无 src 且失败时业务侧也可直接传失败文案） */
+  placeholderText?: string
+  /** 加载失败文案（有 src 但解码/请求失败——默认「图片加载失败」） */
+  errorText?: string
+}
+
+export const Img: Component<ImgProps> = (_init, ctx)=> {
+  // ── mount（只一次）──
+  let previewOpen = false
+  let scale = 1
+  let triggerEl: HTMLElement | null = null
+  // 加载状态（2026-09）：src 变化重置——placeholder 模式下的占位/失败展示
+  let lastSrc = ''
+  let loaded = false
+  let failed = false
+
+  // 预览层经命令式弹窗 mask 模式统一（§5.4——唯一形态 openPopup）：全屏遮罩
+  // （--wf-overlay + 点击关闭）+ Escape 关闭——不再手写 createPortal/overlay/Escape
+  /** 命令式句柄（唯一形态——openPopup——组件内部同步样板） */
+  let handle: import('../../../../level3/vdom/hooks/popup-manager.ts').PopupHandle | null = null
+  const syncPreview = (previewLayer: import('../../../../level6/client/vdom/index.ts').VNode | null): void => {
+    if (previewOpen && !handle)
+      handle = ctx.ui.openPopup({
+        key: 'img-preview',
+        mask: true, // 全屏遮罩：模态预览（点击遮罩关闭，maskClosable 默认 true）
+        maskCentered: true, // 图片预览居中显示
+        content: ()=> previewLayer,
+        onClose: ()=> { handle = null; if (previewOpen) { previewOpen = false; scale = 1; ctx.render() } },
+      })
+    else if (!previewOpen && handle) { handle.close(); handle = null }
+    else if (handle) handle.update(previewLayer)
+  }
+
+  const triggerRef = (el: any)=> { triggerEl = el as HTMLElement | null }
+
+  return (props)=> {
+    const {
+      alt = '', fallback, loading, width, height, className, style,
+      preview, previewScale = 1,
+      placeholder, placeholderText, errorText,
+    } = props
+    const src = props.src ?? ''
+
+    // 受控重载：src 变化 → 状态重置（组件实例复用场景——切换图片）
+    if (src !== lastSrc) { lastSrc = src; loaded = false; failed = false }
+
+    const phCls = ['wf-image-placeholder', className].filter(Boolean).join(' ')
+    const phText = placeholderText ?? '图片加载中…'
+    const errText = errorText ?? '图片加载失败'
+
+    /** 占位块（未就绪/失败——与最终 img 同尺寸（width/height 已知）——布局恒定） */
+    const placeholderVNode = ()=> h('div', {
+      class: phCls,
+      style: { width, height, ...(style ?? {}) },
+    }, [
+      h('span', { class: 'wf-image-placeholder-text' },
+        (src && failed) ? errText : phText),
+    ])
+
+    /** img（加载完成）——onLoad/onError 驱动状态翻转 → 占位/图片替换 */
+    const imgVNode = (withPreview: boolean)=> {
+      const imgProps: Record<string, any> = {
+        class: ['wf-image', className].filter(Boolean).join(' '),
+        src: src ?? fallback ?? '',
+        alt,
+        loading: loading ?? 'lazy',
+        onLoad: ()=> { if (!loaded) { loaded = true; failed = false; ctx.render() } },
+        onError: (e: Event)=> {
+          const el = e.currentTarget as HTMLImageElement
+          // fallback 语义（保留）：src 失败换 fallback（一次性——DOM 换 src）
+          if (fallback && el.src !== fallback) { el.src = fallback; return }
+          if (placeholder && !failed) { failed = true; ctx.render() }
+        },
+      }
+      if (width !== undefined) imgProps.width = width
+      if (height !== undefined) imgProps.height = height
+      if (style) imgProps.style = style
+      return imgProps
+    }
+
+    // placeholder 模式：占位 → 图（onLoad 后替换——布局恒定）——占位块也可用于
+    // 无 src（业务先行挂载占位——fetch 完成后补 src——聊天流占位先行场景）
+    if (placeholder && (!src || !loaded || failed)) {
+      // **隐藏预载 img**：占位只显示 div——img 必须存在才会触发 onLoad/onError
+      // （不渲染 img 则永远占位——死锁——实测 2026-09）
+      const preload = src && !loaded
+        ? h('img', { src, style: { display: 'none', width: 0, height: 0 },
+            onLoad: ()=> { loaded = true; failed = false; ctx.render() },
+            onError: ()=> { failed = true; ctx.render() } })
+        : null
+      return h('div', { style: { display: 'contents' } }, [placeholderVNode(), preload])
+    }
+
+    if (!preview) return h('img', imgVNode(false))
+
+    // 预览模式：openPopup mask 遮罩 + 图片层（点击图片缩放，stopPropagation 不触发遮罩关闭）
+    const previewLayer = h('img', {
+      class: 'wf-img-preview-image',
+      src,
+      alt,
+      style: { transform: `scale(${scale * previewScale})`, maxWidth: '90vw', maxHeight: '90vh' },
+      onClick: (e: Event)=> { e.stopPropagation(); scale = scale === 1 ? 2 : 1; ctx.render() },
+    })
+    syncPreview(previewLayer)
+
+    return h('div', {
+      class: 'wf-img-preview-wrap',
+    }, [
+      h('button', {
+        type: 'button',
+        class: 'wf-img-preview-trigger',
+        'aria-label': '放大预览',
+        ref: triggerRef,
+        onClick: ()=> { previewOpen = true; ctx.render() },
+      }, h('img', imgVNode(true))),
+    ])
+  }
+}

package/dist/level5/client/components/InView/InView.css

@@ -0,0 +1,28 @@
+/* weifuwu/client/components — InView */
+
+.wf-inview {
+  width: 100%;
+}
+
+.wf-inview--loaded {
+  /* 加载后无额外样式，让 children 自然布局 */;
+}
+
+.wf-inview-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+  background: var(--wf-color-bg-secondary);
+  border-radius: var(--wf-radius-md);
+  border: var(--wf-border-width) dashed var(--wf-color-border);
+  color: var(--wf-color-text-tertiary);
+  font-size: var(--wf-font-size-sm);
+}
+
+.wf-inview-placeholder::after {
+  content: '滚动到此处加载内容';
+}
+/* ── 语义标记类（DOM 钩子——无样式：测试定位/用户扩展——:where 零优先级显式声明） ── */
+:where(.wf-inview--pending) {}
+:where(.wf-inview-pending) {}

package/dist/level5/client/components/InView/InView.d.ts

@@ -0,0 +1,17 @@
+/** InView：进入视窗后懒加载内容，支持 IntersectionObserver（showcase /components/inview） */
+/**
+ * weifuwu/client/components — InView
+ *
+ * 进入视窗后替换占位符为真实内容。
+ * 实现：ctx.ui.useInView（IO 封装）——滚动/尺寸变化由合成器线程评估，无 scroll 监听。
+ */
+import type { Component, VNodeChild } from '../../../../level6/client/vdom/index.ts';
+export interface InViewProps {
+    once?: boolean;
+    threshold?: number;
+    rootMargin?: string;
+    placeholder?: VNodeChild;
+    onEnter?: () => void;
+    children?: VNodeChild;
+}
+export declare const InView: Component<InViewProps>;