@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/theme-customize/token-catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-catalog.js","names":[],"sources":["../../src/theme-customize/token-catalog.ts"],"sourcesContent":["// 由 scripts/css-docs/generate.mjs 根据 tokens.ts 生成，请勿手改。\n\n/** 一个主题 token */\nexport interface TokenEntry {\n  /** 键，如 accent */\n  readonly name: string;\n  /** 默认值（亮色主题） */\n  readonly value: string;\n  /** 说明 */\n  readonly description: string;\n}\n\n/** 一组主题 token */\nexport interface TokenGroupEntry {\n  /** 组名，如 colors */\n  readonly name: string;\n  /** 说明 */\n  readonly description: string;\n  /** 组里的 token */\n  readonly tokens: readonly TokenEntry[];\n}\n\n/** 主题 tokens 的清单：每组每个 token 的默认值与说明（主题编辑器、文档的 token 表用它） */\nexport const tokenCatalog: readonly TokenGroupEntry[] = [\n  {\n    name: 'colors',\n    description: '颜色：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息',\n    tokens: [\n      {\n        name: 'background',\n        value: '#fcfcfd',\n        description: '页面背景。slate 1：亮色 `#fcfcfd`，暗色 `#111113`',\n      },\n      {\n        name: 'surface',\n        value: '#fcfcfd',\n        description: '卡片、输入框等表面。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b`',\n      },\n      {\n        name: 'surfaceMuted',\n        value: '#f9f9fb',\n        description: '弱化的区域背景：表头、侧栏、代码块。slate 2：亮色 `#f9f9fb`，暗色 `#18191b`',\n      },\n      {\n        name: 'surfaceRaised',\n        value: '#fcfcfd',\n        description:\n          '浮层（弹出框、菜单、对话框）表面，靠描边与阴影区分层级。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b` （不取第 3 级：那是 fill，浮层里的填充会看不见）',\n      },\n      {\n        name: 'fill',\n        value: '#f0f0f3',\n        description: '填充：标签、开关关闭态、弱按钮。slate 3：亮色 `#f0f0f3`，暗色 `#212225`',\n      },\n      {\n        name: 'fillHover',\n        value: '#e8e8ec',\n        description:\n          '填充悬停；也用于幽灵按钮、菜单项的悬停背景。slate 4：亮色 `#e8e8ec`，暗色 `#272a2d`',\n      },\n      {\n        name: 'fillActive',\n        value: '#e0e1e6',\n        description: '填充按下、选中。slate 5：亮色 `#e0e1e6`，暗色 `#2e3135`',\n      },\n      {\n        name: 'text',\n        value: '#1c2024',\n        description: '主要文字。slate 12：亮色 `#1c2024`，暗色 `#edeef0`',\n      },\n      {\n        name: 'textMuted',\n        value: '#60646c',\n        description: '次要文字、说明、图标。slate 11：亮色 `#60646c`，暗色 `#b0b4ba`',\n      },\n      {\n        name: 'textPlaceholder',\n        value: '#80838d',\n        description: '输入框占位文字。slate 10：亮色 `#80838d`，暗色 `#777b84`',\n      },\n      {\n        name: 'textDisabled',\n        value: '#b9bbc6',\n        description: '不可用的文字。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169`',\n      },\n      {\n        name: 'borderMuted',\n        value: '#d9d9e0',\n        description: '弱边框：分割线、表格线。slate 6：亮色 `#d9d9e0`，暗色 `#363a3f`',\n      },\n      {\n        name: 'border',\n        value: '#cdced6',\n        description: '普通边框：输入框、卡片、浮层。slate 7：亮色 `#cdced6`，暗色 `#43484e`',\n      },\n      {\n        name: 'borderStrong',\n        value: '#b9bbc6',\n        description: '强调边框：悬停。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169`',\n      },\n      {\n        name: 'accent',\n        value: '#3e63dd',\n        description: '品牌色实色：主按钮、选中的复选框。indigo 9：两套主题都是 `#3e63dd`',\n      },\n      {\n        name: 'accentHover',\n        value: '#3358d4',\n        description:\n          '品牌色实色悬停。亮色 indigo 10 `#3358d4`；暗色比实色更深一点 `#3758d4`（indigo 10 `#5472e4` 配白字只有 4.28:1）',\n      },\n      {\n        name: 'accentContrast',\n        value: '#ffffff',\n        description: '品牌色实色上的文字与图标。Radix 规定 indigo 9 上用白字：`#ffffff`',\n      },\n      {\n        name: 'accentText',\n        value: '#3a5bc7',\n        description: '品牌色文字：链接、选中项的文字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff`',\n      },\n      {\n        name: 'accentSoft',\n        value: '#edf2fe',\n        description: '品牌色浅底：选中行、弱主按钮。indigo 3：亮色 `#edf2fe`，暗色 `#182449`',\n      },\n      {\n        name: 'accentSoftHover',\n        value: '#e1e9ff',\n        description: '品牌色浅底悬停。indigo 4：亮色 `#e1e9ff`，暗色 `#1d2e62`',\n      },\n      {\n        name: 'accentBorder',\n        value: '#abbdf9',\n        description:\n          '品牌色边框：选中的卡片、弱主按钮描边。indigo 7：亮色 `#abbdf9`，暗色 `#3a4f97`',\n      },\n      {\n        name: 'danger',\n        value: '#ce2c31',\n        description:\n          '危险实色：危险按钮的底色，上面放 dangerContrast（白色）文字，要满足 4.5:1。 red 9 配白字只有 3.91:1，所以亮色用 red 11 `#ce2c31`（5.21:1），暗色用 red 8 `#b54548`（5.37:1）',\n      },\n      {\n        name: 'dangerHover',\n        value: '#b8272c',\n        description:\n          '危险实色悬停：比实色更深一点，白字才满足 4.5:1（red 10 只有 4.37:1）。亮色 `#b8272c`，暗色 `#a33b3e`',\n      },\n      {\n        name: 'dangerContrast',\n        value: '#ffffff',\n        description: '危险实色上的文字与图标：`#ffffff`',\n      },\n      {\n        name: 'dangerText',\n        value: '#b8272c',\n        description:\n          '危险文字：错误提示。亮色比 red 11 深一点 `#b8272c`（red 11 在 dangerSoftHover 上只有 4.07:1），暗色 red 11 `#ff9592`',\n      },\n      {\n        name: 'dangerSoft',\n        value: '#feebec',\n        description: '危险浅底：错误提示条。red 3：亮色 `#feebec`，暗色 `#3b1219`',\n      },\n      {\n        name: 'dangerSoftHover',\n        value: '#ffdbdc',\n        description: '危险浅底悬停。red 4：亮色 `#ffdbdc`，暗色 `#500f1c`',\n      },\n      {\n        name: 'dangerBorder',\n        value: '#f4a9aa',\n        description: '危险边框：校验失败的输入框。red 7：亮色 `#f4a9aa`，暗色 `#8c333a`',\n      },\n      {\n        name: 'successText',\n        value: '#193b2d',\n        description:\n          '成功文字与图标。亮色 green 12 `#193b2d`，暗色 green 11 `#3dd68c`。亮色不用 11 级：green 11 在 successSoft（green 3）上只有 4.21:1，标记、提示条里的文字不到 4.5',\n      },\n      {\n        name: 'successSoft',\n        value: '#e6f6eb',\n        description: '成功浅底。green 3：亮色 `#e6f6eb`，暗色 `#132d21`',\n      },\n      {\n        name: 'successBorder',\n        value: '#8eceaa',\n        description: '成功边框。green 7：亮色 `#8eceaa`，暗色 `#28684a`',\n      },\n      {\n        name: 'success',\n        value: '#008751',\n        description:\n          '成功实色：成功按钮、实底徽标的底色，上面放 successContrast。亮色 `#008751`，暗色 green 9 `#30a46c`。黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 successText：实色不一定在表面上到 3:1',\n      },\n      {\n        name: 'successHover',\n        value: '#007143',\n        description:\n          '成功实色悬停：与 successContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#007143`，暗色 `#52af7d`',\n      },\n      {\n        name: 'successContrast',\n        value: '#ffffff',\n        description: '成功实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113`',\n      },\n      {\n        name: 'successSoftHover',\n        value: '#d6f1df',\n        description: '成功浅底悬停。green 4：亮色 `#d6f1df`，暗色 `#113b29`',\n      },\n      {\n        name: 'warningText',\n        value: '#4f3422',\n        description:\n          '警告文字与图标。亮色 amber 12 `#4f3422`，暗色 amber 11 `#ffca16`。亮色不用 11 级：amber 11（`#ab6400`）在页面背景上对比度 4.49，不到 WCAG AA 的 4.5',\n      },\n      {\n        name: 'warningSoft',\n        value: '#fff7c2',\n        description: '警告浅底。amber 3：亮色 `#fff7c2`，暗色 `#302008`',\n      },\n      {\n        name: 'warningBorder',\n        value: '#e9c162',\n        description: '警告边框。amber 7：亮色 `#e9c162`，暗色 `#714f19`',\n      },\n      {\n        name: 'warning',\n        value: '#ffc53d',\n        description:\n          '警告实色：警告按钮、实底徽标的底色，上面放 warningContrast。亮色 `#ffc53d`，暗色 amber 9 `#ffc53d`。黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 warningText：实色不一定在表面上到 3:1',\n      },\n      {\n        name: 'warningHover',\n        value: '#ffcd5f',\n        description:\n          '警告实色悬停：与 warningContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#ffcd5f`，暗色 `#ffcd5f`',\n      },\n      {\n        name: 'warningContrast',\n        value: '#4f3422',\n        description: '警告实色上的文字与图标。亮色 `#4f3422`，暗色 `#111113`',\n      },\n      {\n        name: 'warningSoftHover',\n        value: '#ffee9c',\n        description: '警告浅底悬停。amber 4：亮色 `#ffee9c`，暗色 `#3f2700`',\n      },\n      {\n        name: 'infoText',\n        value: '#113264',\n        description:\n          '信息文字与图标。亮色 blue 12 `#113264`，暗色 blue 11 `#70b8ff`。亮色不用 11 级：blue 11 在 infoSoft（blue 3）上只有 4.25:1',\n      },\n      {\n        name: 'infoSoft',\n        value: '#e6f4fe',\n        description: '信息浅底。blue 3：亮色 `#e6f4fe`，暗色 `#0d2847`',\n      },\n      {\n        name: 'infoBorder',\n        value: '#8ec8f6',\n        description: '信息边框。blue 7：亮色 `#8ec8f6`，暗色 `#205d9e`',\n      },\n      {\n        name: 'info',\n        value: '#0073e0',\n        description:\n          '信息实色：信息按钮、实底徽标的底色，上面放 infoContrast。亮色 `#0073e0`，暗色 blue 9 `#0090ff`。黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 infoText：实色不一定在表面上到 3:1',\n      },\n      {\n        name: 'infoHover',\n        value: '#0060bd',\n        description:\n          '信息实色悬停：与 infoContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#0060bd`，暗色 `#3d9fff`',\n      },\n      {\n        name: 'infoContrast',\n        value: '#ffffff',\n        description: '信息实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113`',\n      },\n      {\n        name: 'infoSoftHover',\n        value: '#d5efff',\n        description: '信息浅底悬停。blue 4：亮色 `#d5efff`，暗色 `#003362`',\n      },\n      {\n        name: 'inverseSurface',\n        value: '#1c2024',\n        description: '反色表面。slate 12：亮色 `#1c2024`，暗色 `#edeef0`',\n      },\n      {\n        name: 'inverseText',\n        value: '#fcfcfd',\n        description: '反色表面上的文字。slate 1：亮色 `#fcfcfd`，暗色 `#111113`',\n      },\n      {\n        name: 'focusRing',\n        value: '#3e63dd',\n        description:\n          '焦点环（:focus-visible）。indigo 9：两套主题都是 `#3e63dd`。 Radix 建议 7–8 级，但亮色下对比度不到 3:1（WCAG 2.2 焦点外观要求），所以用 9 级',\n      },\n      {\n        name: 'overlay',\n        value: 'rgba(0, 0, 0, 0.4)',\n        description:\n          '模态遮罩。亮色 blackA 6 `rgba(0, 0, 0, 0.4)`，暗色 blackA 8 `rgba(0, 0, 0, 0.6)`',\n      },\n      {\n        name: 'selection',\n        value: '#d2deff',\n        description: '选中文字的底色（::selection）。indigo 5：亮色 `#d2deff`，暗色 `#253974`',\n      },\n      {\n        name: 'highlight',\n        value: '#ffee9c',\n        description: '高亮标记：搜索命中、`<mark>`。amber 4：亮色 `#ffee9c`，暗色 `#3f2700`',\n      },\n      {\n        name: 'surfaceTranslucent',\n        value: 'rgba(252, 252, 253, 0.8)',\n        description: '半透明表面：吸顶的顶栏（配合背景模糊）。页面背景加 80% 不透明',\n      },\n      {\n        name: 'codeKeyword',\n        value: '#3a5bc7',\n        description: '关键字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff`',\n      },\n      {\n        name: 'codeString',\n        value: '#1c7a51',\n        description:\n          '字符串。亮色比 green 11 深一点 `#1c7a51`（在代码块背景上 green 11 只有 4.49:1），暗色 green 11 `#3dd68c`',\n      },\n      {\n        name: 'codeNumber',\n        value: '#bb4500',\n        description:\n          '数字、常量。亮色比 orange 11 深一点 `#bb4500`（orange 11 在代码块背景上只有 4.29:1），暗色 orange 11 `#ffa057`',\n      },\n      {\n        name: 'codeFunction',\n        value: '#6550b9',\n        description: '函数名。violet 11：亮色 `#6550b9`，暗色 `#baa7ff`',\n      },\n      {\n        name: 'codeType',\n        value: '#007590',\n        description:\n          '类型、类名。亮色比 cyan 11 深一点 `#007590`（cyan 11 在行内代码的底色上只有 4.19:1），暗色 cyan 11 `#4ccce6`',\n      },\n      {\n        name: 'codeComment',\n        value: '#60646c',\n        description: '注释、标点。slate 11：亮色 `#60646c`，暗色 `#b0b4ba`',\n      },\n      {\n        name: 'codeTag',\n        value: '#cb1d63',\n        description: '标签名（HTML、JSX）。crimson 11：亮色 `#cb1d63`，暗色 `#ff92ad`',\n      },\n      {\n        name: 'codeAttribute',\n        value: '#815e46',\n        description: '属性名。brown 11：亮色 `#815e46`，暗色 `#dbb594`',\n      },\n      {\n        name: 'codeInserted',\n        value: '#e6f6eb',\n        description: 'diff 新增行的底色。green 3：亮色 `#e6f6eb`，暗色 `#132d21`',\n      },\n      {\n        name: 'codeDeleted',\n        value: '#feebec',\n        description: 'diff 删除行的底色。red 3：亮色 `#feebec`，暗色 `#3b1219`',\n      },\n      {\n        name: 'chart1',\n        value: '#3e63dd',\n        description: '第 1 个系列：跟随品牌色。indigo 9：两套主题都是 `#3e63dd`',\n      },\n      {\n        name: 'chart2',\n        value: '#0d9b8a',\n        description: '第 2 个系列。teal：亮色 10 级 `#0d9b8a`，暗色 9 级 `#12a594`',\n      },\n      {\n        name: 'chart3',\n        value: '#ef5f00',\n        description: '第 3 个系列。orange：亮色 10 级 `#ef5f00`，暗色 9 级 `#f76b15`',\n      },\n      {\n        name: 'chart4',\n        value: '#e93d82',\n        description: '第 4 个系列。crimson 9：两套主题都是 `#e93d82`',\n      },\n      {\n        name: 'chart5',\n        value: '#6e56cf',\n        description: '第 5 个系列。violet 9：两套主题都是 `#6e56cf`',\n      },\n      {\n        name: 'chart6',\n        value: '#0797b9',\n        description: '第 6 个系列。cyan：亮色 10 级 `#0797b9`，暗色 9 级 `#00a2c7`',\n      },\n      {\n        name: 'chart7',\n        value: '#3e9b4f',\n        description: '第 7 个系列。grass：亮色 10 级 `#3e9b4f`，暗色 9 级 `#46a758`',\n      },\n      {\n        name: 'chart8',\n        value: '#ab6400',\n        description:\n          '第 8 个系列。amber：亮色 11 级 `#ab6400`（9、10 级在浅色背景上不到 2:1），暗色 9 级 `#ffc53d`',\n      },\n    ],\n  },\n  {\n    name: 'fonts',\n    description: '字体族',\n    tokens: [\n      {\n        name: 'sans',\n        value:\n          'system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif',\n        description:\n          '正文字体：西文用系统界面字体；中文在 Windows 上优先“微软雅黑 UI”（界面字号下字距更紧凑）， Linux 上是思源黑体（Noto / Source Han Sans）',\n      },\n      {\n        name: 'mono',\n        value:\n          'ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace',\n        description:\n          '等宽字体：代码、需要数字对齐的地方。装了 Cascadia Code（Windows 11 自带）、JetBrains Mono 时优先用它们，字形比 Consolas 清楚',\n      },\n      {\n        name: 'serif',\n        value:\n          '\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif',\n        description: '衬线字体：书卷感的标题、引文（纸张主题的标题用它）',\n      },\n      {\n        name: 'heading',\n        value:\n          'system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif',\n        description: '标题（H1–H6）的字体：默认同正文，主题可以换成衬线',\n      },\n    ],\n  },\n  {\n    name: 'fontSizes',\n    description: '字号：xs–xl 用于界面文字（也是组件 size 档位对应的字号），xxl、xxxl 用于标题',\n    tokens: [\n      {\n        name: 'xs',\n        value: '12px',\n        description: '`12px`：辅助说明、标签',\n      },\n      {\n        name: 'sm',\n        value: '13px',\n        description: '`13px`：紧凑控件',\n      },\n      {\n        name: 'md',\n        value: '14px',\n        description: '`14px`：正文与默认控件；Provider 用它设置区域的基准字号',\n      },\n      {\n        name: 'lg',\n        value: '16px',\n        description: '`16px`：宽松控件、小标题',\n      },\n      {\n        name: 'xl',\n        value: '18px',\n        description: '`18px`：强调文字、卡片标题',\n      },\n      {\n        name: 'xxl',\n        value: '24px',\n        description: '`24px`：页面标题',\n      },\n      {\n        name: 'xxxl',\n        value: '30px',\n        description: '`30px`：大标题',\n      },\n    ],\n  },\n  {\n    name: 'fontWeights',\n    description: '字重',\n    tokens: [\n      {\n        name: 'light',\n        value: '300',\n        description: '`300`',\n      },\n      {\n        name: 'normal',\n        value: '400',\n        description: '`400`：正文',\n      },\n      {\n        name: 'medium',\n        value: '500',\n        description: '`500`：标签、表头',\n      },\n      {\n        name: 'semibold',\n        value: '600',\n        description: '`600`：按钮、标题',\n      },\n      {\n        name: 'bold',\n        value: '700',\n        description: '`700`',\n      },\n    ],\n  },\n  {\n    name: 'lineHeights',\n    description: '行高（不带单位，随字号缩放）',\n    tokens: [\n      {\n        name: 'none',\n        value: '1',\n        description: '`1`：图标、单行徽标',\n      },\n      {\n        name: 'tight',\n        value: '1.25',\n        description: '`1.25`：按钮等单行控件、标题',\n      },\n      {\n        name: 'snug',\n        value: '1.375',\n        description: '`1.375`：紧凑的多行文字',\n      },\n      {\n        name: 'normal',\n        value: '1.5',\n        description: '`1.5`：正文',\n      },\n      {\n        name: 'relaxed',\n        value: '1.75',\n        description: '`1.75`：长文阅读',\n      },\n    ],\n  },\n  {\n    name: 'letterSpacings',\n    description: '字间距（em，随字号缩放）：中文正文保持 normal，大字号标题可以略收紧',\n    tokens: [\n      {\n        name: 'tighter',\n        value: '-0.02em',\n        description: '`-0.02em`：大标题',\n      },\n      {\n        name: 'tight',\n        value: '-0.01em',\n        description: '`-0.01em`：小标题',\n      },\n      {\n        name: 'normal',\n        value: '0',\n        description: '`0`：正文',\n      },\n      {\n        name: 'wide',\n        value: '0.02em',\n        description: '`0.02em`：小字号的标签',\n      },\n      {\n        name: 'wider',\n        value: '0.05em',\n        description: '`0.05em`：全大写的英文标签',\n      },\n    ],\n  },\n  {\n    name: 'space',\n    description: '间距：em，随组件字号缩放；页面级布局间距由宿主决定',\n    tokens: [\n      {\n        name: 'none',\n        value: '0',\n        description: '`0`',\n      },\n      {\n        name: 'xs',\n        value: '0.25em',\n        description: '`0.25em`：图标与文字之间、控件的上下内边距',\n      },\n      {\n        name: 'sm',\n        value: '0.5em',\n        description: '`0.5em`：控件内部元素之间',\n      },\n      {\n        name: 'md',\n        value: '0.75em',\n        description: '`0.75em`：输入框水平内边距、浮层内边距',\n      },\n      {\n        name: 'lg',\n        value: '1em',\n        description: '`1em`：按钮水平内边距、表单项之间',\n      },\n      {\n        name: 'xl',\n        value: '1.5em',\n        description: '`1.5em`：卡片、对话框内边距',\n      },\n    ],\n  },\n  {\n    name: 'sizes',\n    description:\n      '尺寸：宽、高、最小最大尺寸。控件规格用 em 随字号缩放；容器宽度（Container 与页面内容的最大宽度）是页面级的，用 rem，跟随浏览器的字号设置',\n    tokens: [\n      {\n        name: 'control',\n        value: '2.25em',\n        description: '`2.25em`：单行控件（按钮、输入框、下拉框）的高度',\n      },\n      {\n        name: 'minTarget',\n        value: '24px',\n        description: '`24px`：可点击区域的最小尺寸（WCAG 2.2 目标尺寸 24×24），与 control 取较大值',\n      },\n      {\n        name: 'xs',\n        value: '30rem',\n        description: '`30rem`（480px）：窄内容，如登录表单',\n      },\n      {\n        name: 'sm',\n        value: '40rem',\n        description: '`40rem`（640px）：表单页、设置页',\n      },\n      {\n        name: 'md',\n        value: '48rem',\n        description: '`48rem`（768px）：文章、详情页',\n      },\n      {\n        name: 'lg',\n        value: '64rem',\n        description: '`64rem`（1024px）：常规页面',\n      },\n      {\n        name: 'xl',\n        value: '80rem',\n        description: '`80rem`（1280px）：宽表格、仪表盘',\n      },\n      {\n        name: 'full',\n        value: '100%',\n        description: '`100%`：占满容器',\n      },\n    ],\n  },\n  {\n    name: 'radii',\n    description: '圆角：em，随组件字号缩放；整体改成直角或更圆时覆盖这一组',\n    tokens: [\n      {\n        name: 'none',\n        value: '0',\n        description: '`0`',\n      },\n      {\n        name: 'xs',\n        value: '0.15em',\n        description: '`0.15em`：控件内的小元素',\n      },\n      {\n        name: 'sm',\n        value: '0.25em',\n        description: '`0.25em`：标签、复选框',\n      },\n      {\n        name: 'md',\n        value: '0.4em',\n        description: '`0.4em`：按钮、输入框',\n      },\n      {\n        name: 'lg',\n        value: '0.7em',\n        description: '`0.7em`：卡片、浮层',\n      },\n      {\n        name: 'xl',\n        value: '1em',\n        description: '`1em`：对话框',\n      },\n      {\n        name: 'full',\n        value: '9999px',\n        description: '全圆：胶囊按钮、头像、开关',\n      },\n    ],\n  },\n  {\n    name: 'borderWidths',\n    description: '边框与描边宽度（px，不随字号缩放）：边框、分隔线、焦点环的宽度与间隔',\n    tokens: [\n      {\n        name: 'none',\n        value: '0',\n        description: '`0`',\n      },\n      {\n        name: 'xs',\n        value: '1px',\n        description: '`1px`：边框、分隔线',\n      },\n      {\n        name: 'sm',\n        value: '2px',\n        description: '`2px`：焦点环宽度与间隔、选中态的强调边框',\n      },\n      {\n        name: 'md',\n        value: '3px',\n        description: '`3px`：提示条侧边的色条',\n      },\n      {\n        name: 'lg',\n        value: '4px',\n        description: '`4px`',\n      },\n      {\n        name: 'xl',\n        value: '6px',\n        description: '`6px`',\n      },\n    ],\n  },\n  {\n    name: 'shadows',\n    description:\n      '阴影：取自 Radix Themes 的第 2–6 级，去掉了模拟边框的 1px 描边（组件自己画边框）；暗色主题另有一套',\n    tokens: [\n      {\n        name: 'none',\n        value: 'none',\n        description: '无阴影',\n      },\n      {\n        name: 'xs',\n        value:\n          '0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05)',\n        description: '贴近表面：卡片',\n      },\n      {\n        name: 'sm',\n        value:\n          '0 2px 3px -2px #0000330f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1)',\n        description: '轻微浮起：悬停的卡片',\n      },\n      {\n        name: 'md',\n        value: '0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000330f',\n        description: '浮起：下拉面板',\n      },\n      {\n        name: 'lg',\n        value: '0 12px 60px rgba(0, 0, 0, 0.15), 0 12px 32px -16px #0009321f',\n        description: '浮层：弹出框、菜单、提示',\n      },\n      {\n        name: 'xl',\n        value:\n          '0 12px 60px rgba(0, 0, 0, 0.15), 0 16px 64px #00005506, 0 16px 36px -20px #00062e32',\n        description: '对话框',\n      },\n    ],\n  },\n  {\n    name: 'durations',\n    description: '动效时长（参考 Material 3）；开启“减少动态效果”时自动为 0',\n    tokens: [\n      {\n        name: 'none',\n        value: '0ms',\n        description: '`0ms`',\n      },\n      {\n        name: 'xs',\n        value: '75ms',\n        description: '`75ms`：按下反馈',\n      },\n      {\n        name: 'sm',\n        value: '120ms',\n        description: '`120ms`：悬停的颜色变化',\n      },\n      {\n        name: 'md',\n        value: '200ms',\n        description: '`200ms`：展开、淡入、浮层出现',\n      },\n      {\n        name: 'lg',\n        value: '300ms',\n        description: '`300ms`：对话框、抽屉',\n      },\n      {\n        name: 'xl',\n        value: '500ms',\n        description: '`500ms`：大面积的页面切换',\n      },\n    ],\n  },\n  {\n    name: 'easings',\n    description: '缓动曲线（参考 Material 3）',\n    tokens: [\n      {\n        name: 'standard',\n        value: 'cubic-bezier(0.2, 0, 0, 1)',\n        description: '标准：位置与尺寸变化',\n      },\n      {\n        name: 'enter',\n        value: 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n        description: '进入：元素出现（先快后慢）',\n      },\n      {\n        name: 'exit',\n        value: 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n        description: '退出：元素消失（先慢后快）',\n      },\n    ],\n  },\n  {\n    name: 'opacities',\n    description: '不透明度',\n    tokens: [\n      {\n        name: 'disabled',\n        value: '0.5',\n        description: '`0.5`：不可用的元素',\n      },\n    ],\n  },\n  {\n    name: 'strokeWidths',\n    description:\n      'SVG 线宽（图标 24 格画布上的单位，不带单位）；Icon 默认 md，strokeWidth 可以逐个覆盖',\n    tokens: [\n      {\n        name: 'xs',\n        value: '1',\n        description: '`1`：细线图标',\n      },\n      {\n        name: 'sm',\n        value: '1.5',\n        description: '`1.5`',\n      },\n      {\n        name: 'md',\n        value: '2',\n        description: '`2`：Lucide 的默认线宽',\n      },\n      {\n        name: 'lg',\n        value: '2.5',\n        description: '`2.5`',\n      },\n      {\n        name: 'xl',\n        value: '3',\n        description: '`3`：粗线图标',\n      },\n    ],\n  },\n];\n"],"mappings":";;AAuBA,IAAa,eAA2C;CACtD;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aACE;GACJ;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OACE;IACF,aACE;GACJ;GACA;IACE,MAAM;IACN,OACE;IACF,aACE;GACJ;GACA;IACE,MAAM;IACN,OACE;IACF,aAAa;GACf;GACA;IACE,MAAM;IACN,OACE;IACF,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aACE;EACF,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aACE;EACF,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OACE;IACF,aAAa;GACf;GACA;IACE,MAAM;IACN,OACE;IACF,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OACE;IACF,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;CACA;EACE,MAAM;EACN,aAAa;EACb,QAAQ,CACN;GACE,MAAM;GACN,OAAO;GACP,aAAa;EACf,CACF;CACF;CACA;EACE,MAAM;EACN,aACE;EACF,QAAQ;GACN;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;GACA;IACE,MAAM;IACN,OAAO;IACP,aAAa;GACf;EACF;CACF;AACF"}

package/dist/three/background/AuroraBackground.d.ts

@@ -0,0 +1,30 @@
+import type { EffectProps } from '../core/EffectSurface';
+/** 极光的默认色板：绿、青、品牌色、紫 */
+export declare const AURORA_PALETTE: readonly string[];
+/** 未声明的属性落到外层 div 上 */
+export interface AuroraBackgroundProps extends EffectProps {
+    /** 色板（token 或 CSS 颜色，2–6 个），默认绿、青、品牌色、紫 */
+    palette?: readonly string[];
+    /**
+     * 飘动速度
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * 亮度（0–1.5）
+     * @default 1
+     */
+    intensity?: number;
+    /**
+     * 光幕下缘在区域里的高度（0 底部，1 顶部）
+     * @default 0.55
+     */
+    height?: number;
+    /**
+     * 跟随指针
+     * @default true
+     */
+    interactive?: boolean;
+}
+/** 极光：透明背景上缓缓飘动的几层光幕 */
+export declare const AuroraBackground: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AuroraBackgroundProps>;

package/dist/three/background/AuroraBackground.js

@@ -0,0 +1,80 @@
+import { colors } from "../../config/theme/tokens.js";
+import { ShaderBackground } from "./ShaderBackground.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/three/background/AuroraBackground.tsx
+/** 极光的默认色板：绿、青、品牌色、紫 */
+var AURORA_PALETTE = [
+	colors.chart7,
+	colors.chart2,
+	colors.accent,
+	colors.chart5
+];
+/** 未声明的属性落到外层 div 上 */
+var AURORA_SHADER = `
+uniform float uIntensity;
+uniform float uHeight;
+
+vec4 shade(vec2 uv) {
+  float aspect = uResolution.x / max(uResolution.y, 1.0);
+  float x = uv.x * aspect + uPointer.x * 0.12 * uPointer.z;
+  float t = uTime * 0.08;
+  vec3 color = vec3(0.0);
+  float alpha = 0.0;
+  for (int band = 0; band < 3; band++) {
+    float fb = float(band);
+    float wave = fbm(vec3(x * (0.7 + fb * 0.25) + fb * 3.1, fb * 1.7, t * (1.0 + fb * 0.35)));
+    float edge = uHeight + fb * 0.07 + wave * 0.2;
+    float d = uv.y - edge;
+    // 下缘清晰、向上指数渐隐
+    float curtain = smoothstep(-0.025, 0.015, d) * exp(-max(d, 0.0) * (3.2 + fb * 1.6));
+    float rays = 0.55 + 0.45 * snoise(vec3(x * 9.0 + fb * 11.0, t * 3.0, fb));
+    float a = curtain * rays * (0.75 - fb * 0.18);
+    color += themePalette(clamp(0.15 + fb * 0.3 + wave * 0.35, 0.0, 1.0)) * a;
+    alpha += a;
+  }
+  // 暗色主题里光更亮，亮色主题里收敛成雾
+  float strength = uIntensity * mix(0.55, 1.0, uDark);
+  return vec4(color / max(alpha, 1e-4), clamp(alpha * strength, 0.0, 1.0));
+}
+`;
+/** 极光：透明背景上缓缓飘动的几层光幕 */
+var AuroraBackground = /*#__PURE__*/ _component((_props, _ctx) => {
+	const palette = readonlyProp(_props, "palette", () => AURORA_PALETTE);
+	const speed = readonlyProp(_props, "speed", 1);
+	const intensity = readonlyProp(_props, "intensity", 1);
+	const height = readonlyProp(_props, "height", .55);
+	const interactive = readonlyProp(_props, "interactive", true);
+	const resolution = readonlyProp(_props, "resolution", .5);
+	const rest = restProps(_props, _ctx, true);
+	const uniforms = {
+		uIntensity: { value: 0 },
+		uHeight: { value: 0 }
+	};
+	effect(() => {
+		uniforms.uIntensity.value = intensity.value;
+		uniforms.uHeight.value = height.value;
+	}, "pre");
+	return () => createVNode(ShaderBackground, mergeProps(rest, {
+		"fragmentShader": AURORA_SHADER,
+		"uniforms": uniforms,
+		"palette": palette.value,
+		"speed": speed.value,
+		"interactive": interactive.value,
+		"resolution": resolution.value
+	}), null);
+}, {
+	name: "AuroraBackground",
+	props: [
+		"palette",
+		"speed",
+		"intensity",
+		"height",
+		"interactive",
+		"resolution"
+	]
+});
+//#endregion
+export { AURORA_PALETTE, AuroraBackground };
+
+//# sourceMappingURL=AuroraBackground.js.map

package/dist/three/background/AuroraBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuroraBackground.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/background/AuroraBackground.tsx"],"sourcesContent":["/**\n * 极光（div）：几层半透明的光幕在区域上方缓缓飘动，下缘清晰、向上渐隐，带细密的竖向光丝。\n * 背景是透明的，叠在页面底色上：暗色主题里像夜空的极光，亮色主题里是一层淡淡的彩色雾。\n *\n *   <AuroraBackground sx={styles.hero}>\n *     <h1>标题</h1>\n *   </AuroraBackground>\n *\n * 默认色板绿、青、品牌色、紫（取自图表色板，跟随主题）；指针左右移动时光幕跟着轻轻偏移。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）、Content（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { colors } from '../../config/theme/tokens';\nimport type { EffectProps } from '../core/EffectSurface';\nimport { ShaderBackground } from './ShaderBackground';\n\n/** 极光的默认色板：绿、青、品牌色、紫 */\nexport const AURORA_PALETTE: readonly string[] = [\n  colors.chart7,\n  colors.chart2,\n  colors.accent,\n  colors.chart5,\n];\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AuroraBackgroundProps extends EffectProps {\n  /** 色板（token 或 CSS 颜色，2–6 个），默认绿、青、品牌色、紫 */\n  palette?: readonly string[];\n  /**\n   * 飘动速度\n   * @default 1\n   */\n  speed?: number;\n  /**\n   * 亮度（0–1.5）\n   * @default 1\n   */\n  intensity?: number;\n  /**\n   * 光幕下缘在区域里的高度（0 底部，1 顶部）\n   * @default 0.55\n   */\n  height?: number;\n  /**\n   * 跟随指针\n   * @default true\n   */\n  interactive?: boolean;\n}\n\nconst AURORA_SHADER = /* glsl */ `\nuniform float uIntensity;\nuniform float uHeight;\n\nvec4 shade(vec2 uv) {\n  float aspect = uResolution.x / max(uResolution.y, 1.0);\n  float x = uv.x * aspect + uPointer.x * 0.12 * uPointer.z;\n  float t = uTime * 0.08;\n  vec3 color = vec3(0.0);\n  float alpha = 0.0;\n  for (int band = 0; band < 3; band++) {\n    float fb = float(band);\n    float wave = fbm(vec3(x * (0.7 + fb * 0.25) + fb * 3.1, fb * 1.7, t * (1.0 + fb * 0.35)));\n    float edge = uHeight + fb * 0.07 + wave * 0.2;\n    float d = uv.y - edge;\n    // 下缘清晰、向上指数渐隐\n    float curtain = smoothstep(-0.025, 0.015, d) * exp(-max(d, 0.0) * (3.2 + fb * 1.6));\n    float rays = 0.55 + 0.45 * snoise(vec3(x * 9.0 + fb * 11.0, t * 3.0, fb));\n    float a = curtain * rays * (0.75 - fb * 0.18);\n    color += themePalette(clamp(0.15 + fb * 0.3 + wave * 0.35, 0.0, 1.0)) * a;\n    alpha += a;\n  }\n  // 暗色主题里光更亮，亮色主题里收敛成雾\n  float strength = uIntensity * mix(0.55, 1.0, uDark);\n  return vec4(color / max(alpha, 1e-4), clamp(alpha * strength, 0.0, 1.0));\n}\n`;\n\n/** 极光：透明背景上缓缓飘动的几层光幕 */\nexport const AuroraBackground = _component(\n  ({\n    palette = AURORA_PALETTE,\n    speed = 1,\n    intensity = 1,\n    height = 0.55,\n    interactive = true,\n    resolution = 0.5,\n    ...rest\n  }: AuroraBackgroundProps) => {\n    const uniforms = { uIntensity: { value: 0 }, uHeight: { value: 0 } };\n    _effect.pre(() => {\n      uniforms.uIntensity.value = intensity;\n      uniforms.uHeight.value = height;\n    });\n    return () => (\n      <ShaderBackground\n        {...rest}\n        fragmentShader={AURORA_SHADER}\n        uniforms={uniforms}\n        palette={palette}\n        speed={speed}\n        interactive={interactive}\n        resolution={resolution}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;AAkBA,IAAa,iBAAoC;CAC/C,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AAAM;;AA6Bf,IAAM,gBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BjC,IAAa,mBAAmB,0BAC9B,QAAA,SAQ6B;CAAA,MAAA,UAAAA,aAAA,QAAA,iBAPjB,cAAc;CAAA,MAAA,QAAAA,aAAA,QAAA,SAChB,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,aACG,CAAC;CAAA,MAAA,SAAAA,aAAA,QAAA,UACJ,GAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,eACC,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACL,EAAG;CAAA,MACb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW;EAAE,YAAY,EAAE,OAAO,EAAE;EAAG,SAAS,EAAE,OAAO,EAAE;CAAE;CACnE,aAAkB;EAChB,SAAS,WAAW,QAAK,UAAA;EACzB,SAAS,QAAQ,QAAK,OAAA;CACxB,GAAC,KAAA;CACD,aAAOC,YAAA,kBAAAC,WAEC,MAAI;EAAA,kBACQ;EAAa,YACnB;EAAQ,WAAA,QAAA;EAAA,SAAA,MAAA;EAAA,eAAA,YAAA;EAAA,cAAA,WAAA;CAAA,CAAA,GAAA,IAAA;AAOxB,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/three/background/MeshGradient.d.ts

@@ -0,0 +1,28 @@
+import type { EffectProps } from '../core/EffectSurface';
+/** 未声明的属性落到外层 div 上 */
+export interface MeshGradientProps extends EffectProps {
+    /** 色板（token 或 CSS 颜色，2–6 个），默认品牌色加图表色板 */
+    palette?: readonly string[];
+    /**
+     * 流动速度
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * 噪声扭曲的程度（0 是圆润的光斑，1 起伏明显）
+     * @default 0.6
+     */
+    distortion?: number;
+    /**
+     * 颗粒感（0 没有颗粒）
+     * @default 0.04
+     */
+    grain?: number;
+    /**
+     * 指针靠近时品牌色被吸过去
+     * @default true
+     */
+    interactive?: boolean;
+}
+/** 流动的网格渐变：主题色板的光斑缓慢游走、融合 */
+export declare const MeshGradient: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MeshGradientProps>;

package/dist/three/background/MeshGradient.js

@@ -0,0 +1,76 @@
+import { SHADER_PALETTE, ShaderBackground } from "./ShaderBackground.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/three/background/MeshGradient.tsx
+/** 未声明的属性落到外层 div 上 */
+var MESH_GRADIENT_SHADER = `
+uniform float uDistortion;
+uniform float uGrain;
+
+vec4 shade(vec2 uv) {
+  float aspect = uResolution.x / max(uResolution.y, 1.0);
+  vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
+  float t = uTime * 0.12;
+  p += uDistortion * 0.3 * vec2(snoise(vec3(p * 1.3, t)), snoise(vec3(p * 1.3 + 7.3, t)));
+  vec3 sum = vec3(0.0);
+  float total = 0.0;
+  for (int i = 0; i < THEME_PALETTE_SIZE; i++) {
+    if (i >= uColorCount) break;
+    float fi = float(i);
+    vec2 center = vec2(
+      sin(t * (0.9 + fi * 0.23) + fi * 2.4) * 0.42 * aspect,
+      cos(t * (0.7 + fi * 0.31) + fi * 1.7) * 0.38
+    );
+    // 品牌色（第一个）被指针吸过去，其余跟着动一点
+    float pull = (i == 0 ? 0.35 : 0.08) * uPointer.z;
+    center = mix(center, uPointer.xy * 0.5 * vec2(aspect, 1.0), pull);
+    float d = distance(p, center);
+    float weight = exp(-d * d * 5.0) + 0.002;
+    sum += uColors[i] * weight;
+    total += weight;
+  }
+  vec3 color = sum / total;
+  float noise = fract(sin(dot(uv * uResolution, vec2(12.9898, 78.233))) * 43758.5453) - 0.5;
+  return vec4(color + noise * uGrain, 1.0);
+}
+`;
+/** 流动的网格渐变：主题色板的光斑缓慢游走、融合 */
+var MeshGradient = /*#__PURE__*/ _component((_props, _ctx) => {
+	const palette = readonlyProp(_props, "palette", () => SHADER_PALETTE);
+	const speed = readonlyProp(_props, "speed", 1);
+	const distortion = readonlyProp(_props, "distortion", .6);
+	const grain = readonlyProp(_props, "grain", .04);
+	const interactive = readonlyProp(_props, "interactive", true);
+	const resolution = readonlyProp(_props, "resolution", .5);
+	const rest = restProps(_props, _ctx, true);
+	const uniforms = {
+		uDistortion: { value: 0 },
+		uGrain: { value: 0 }
+	};
+	effect(() => {
+		uniforms.uDistortion.value = distortion.value;
+		uniforms.uGrain.value = grain.value;
+	}, "pre");
+	return () => createVNode(ShaderBackground, mergeProps(rest, {
+		"fragmentShader": MESH_GRADIENT_SHADER,
+		"uniforms": uniforms,
+		"palette": palette.value,
+		"speed": speed.value,
+		"interactive": interactive.value,
+		"resolution": resolution.value
+	}), null);
+}, {
+	name: "MeshGradient",
+	props: [
+		"palette",
+		"speed",
+		"distortion",
+		"grain",
+		"interactive",
+		"resolution"
+	]
+});
+//#endregion
+export { MeshGradient };
+
+//# sourceMappingURL=MeshGradient.js.map

package/dist/three/background/MeshGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeshGradient.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/background/MeshGradient.tsx"],"sourcesContent":["/**\n * 流动的网格渐变（div）：色板里的每个颜色是一团缓慢游走的光斑，彼此柔和地融合，再加一层噪声扭曲与细颗粒。\n * 适合首页标题区、登录页、卡片的封面。\n *\n *   <MeshGradient sx={styles.hero}>\n *     <h1>标题</h1>\n *   </MeshGradient>\n *\n * 默认色板是品牌色加图表色板里的几个颜色，切换主题、改品牌色时原地过渡；指针靠近时品牌色那一团被轻轻吸过去。\n * 画面是不透明的：上面的文字自己保证对比度（如加一层半透明的底）。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）、Content（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { ShaderBackground, SHADER_PALETTE } from './ShaderBackground';\nimport type { EffectProps } from '../core/EffectSurface';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface MeshGradientProps extends EffectProps {\n  /** 色板（token 或 CSS 颜色，2–6 个），默认品牌色加图表色板 */\n  palette?: readonly string[];\n  /**\n   * 流动速度\n   * @default 1\n   */\n  speed?: number;\n  /**\n   * 噪声扭曲的程度（0 是圆润的光斑，1 起伏明显）\n   * @default 0.6\n   */\n  distortion?: number;\n  /**\n   * 颗粒感（0 没有颗粒）\n   * @default 0.04\n   */\n  grain?: number;\n  /**\n   * 指针靠近时品牌色被吸过去\n   * @default true\n   */\n  interactive?: boolean;\n}\n\nconst MESH_GRADIENT_SHADER = /* glsl */ `\nuniform float uDistortion;\nuniform float uGrain;\n\nvec4 shade(vec2 uv) {\n  float aspect = uResolution.x / max(uResolution.y, 1.0);\n  vec2 p = (uv - 0.5) * vec2(aspect, 1.0);\n  float t = uTime * 0.12;\n  p += uDistortion * 0.3 * vec2(snoise(vec3(p * 1.3, t)), snoise(vec3(p * 1.3 + 7.3, t)));\n  vec3 sum = vec3(0.0);\n  float total = 0.0;\n  for (int i = 0; i < THEME_PALETTE_SIZE; i++) {\n    if (i >= uColorCount) break;\n    float fi = float(i);\n    vec2 center = vec2(\n      sin(t * (0.9 + fi * 0.23) + fi * 2.4) * 0.42 * aspect,\n      cos(t * (0.7 + fi * 0.31) + fi * 1.7) * 0.38\n    );\n    // 品牌色（第一个）被指针吸过去，其余跟着动一点\n    float pull = (i == 0 ? 0.35 : 0.08) * uPointer.z;\n    center = mix(center, uPointer.xy * 0.5 * vec2(aspect, 1.0), pull);\n    float d = distance(p, center);\n    float weight = exp(-d * d * 5.0) + 0.002;\n    sum += uColors[i] * weight;\n    total += weight;\n  }\n  vec3 color = sum / total;\n  float noise = fract(sin(dot(uv * uResolution, vec2(12.9898, 78.233))) * 43758.5453) - 0.5;\n  return vec4(color + noise * uGrain, 1.0);\n}\n`;\n\n/** 流动的网格渐变：主题色板的光斑缓慢游走、融合 */\nexport const MeshGradient = _component(\n  ({\n    palette = SHADER_PALETTE,\n    speed = 1,\n    distortion = 0.6,\n    grain = 0.04,\n    interactive = true,\n    resolution = 0.5,\n    ...rest\n  }: MeshGradientProps) => {\n    const uniforms = { uDistortion: { value: 0 }, uGrain: { value: 0 } };\n    _effect.pre(() => {\n      uniforms.uDistortion.value = distortion;\n      uniforms.uGrain.value = grain;\n    });\n    return () => (\n      <ShaderBackground\n        {...rest}\n        fragmentShader={MESH_GRADIENT_SHADER}\n        uniforms={uniforms}\n        palette={palette}\n        speed={speed}\n        interactive={interactive}\n        resolution={resolution}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;AA2CA,IAAM,uBAAkC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCxC,IAAa,eAAe,0BAC1B,QAAA,SAQyB;CAAA,MAAA,UAAAA,aAAA,QAAA,iBAPb,cAAc;CAAA,MAAA,QAAAA,aAAA,QAAA,SAChB,CAAC;CAAA,MAAA,aAAAA,aAAA,QAAA,cACI,EAAG;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,GAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,eACE,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,cACL,EAAG;CAAA,MACb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW;EAAE,aAAa,EAAE,OAAO,EAAE;EAAG,QAAQ,EAAE,OAAO,EAAE;CAAE;CACnE,aAAkB;EAChB,SAAS,YAAY,QAAK,WAAA;EAC1B,SAAS,OAAO,QAAK,MAAA;CACvB,GAAC,KAAA;CACD,aAAOC,YAAA,kBAAAC,WAEC,MAAI;EAAA,kBACQ;EAAoB,YAC1B;EAAQ,WAAA,QAAA;EAAA,SAAA,MAAA;EAAA,eAAA,YAAA;EAAA,cAAA,WAAA;CAAA,CAAA,GAAA,IAAA;AAOxB,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/three/background/ShaderBackground.d.ts

@@ -0,0 +1,25 @@
+import { type IUniform } from 'three';
+import { type EffectProps } from '../core/EffectSurface';
+/** 着色器背景的默认色板：品牌色加图表色板里的紫、粉、青 */
+export declare const SHADER_PALETTE: readonly string[];
+/** 未声明的属性落到外层 div 上 */
+export interface ShaderBackgroundProps extends EffectProps {
+    /** 片段着色器：定义 `vec4 shade(vec2 uv)`，可用的 uniform 见文件开头；变了会重建 */
+    fragmentShader: string;
+    /** 额外的 uniform：改它们的 value 就能实时生效 */
+    uniforms?: Record<string, IUniform>;
+    /** 色板（token 或 CSS 颜色，最多 6 个），传给 uColors 与 themePalette；默认品牌色加图表色板；变了会重建 */
+    palette?: readonly string[];
+    /**
+     * 时间流速：uTime = 秒数 × speed
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * 跟随指针（uPointer）；关掉时 uPointer.z 始终为 0
+     * @default true
+     */
+    interactive?: boolean;
+}
+/** 着色器背景：主题色、时间、指针自动传入的全屏片段着色器 */
+export declare const ShaderBackground: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ShaderBackgroundProps>;

package/dist/three/background/ShaderBackground.js

@@ -0,0 +1,107 @@
+import { clamp } from "../../utils/data/number.js";
+import { colors } from "../../config/theme/tokens.js";
+import { useConfig } from "../../config/context.js";
+import { EffectSurface } from "../core/EffectSurface.js";
+import { shaderChunks } from "../core/shaders.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Mesh, PlaneGeometry, ShaderMaterial, Vector2, Vector3 } from "three";
+//#region src/three/background/ShaderBackground.tsx
+/** 着色器背景的默认色板：品牌色加图表色板里的紫、粉、青 */
+var SHADER_PALETTE = [
+	colors.accent,
+	colors.chart5,
+	colors.chart4,
+	colors.chart6
+];
+/** 未声明的属性落到外层 div 上 */
+var vertexShader = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position.xy, 0.0, 1.0);
+}
+`;
+/** 把使用方的 shade 函数包成完整的片段着色器 */
+function fragment(source) {
+	return `
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec3 uPointer;
+uniform float uDark;
+uniform vec3 uBackground;
+varying vec2 vUv;
+${shaderChunks.simplexNoise}
+${shaderChunks.fbm}
+${shaderChunks.themePalette}
+${source}
+void main() {
+  gl_FragColor = shade(vUv);
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+}
+/** 着色器背景：主题色、时间、指针自动传入的全屏片段着色器 */
+var ShaderBackground = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const fragmentShader = readonlyProp(_props, "fragmentShader");
+	const uniforms = readonlyProp(_props, "uniforms");
+	const palette = readonlyProp(_props, "palette", () => SHADER_PALETTE);
+	const speed = readonlyProp(_props, "speed", 1);
+	const interactive = readonlyProp(_props, "interactive", true);
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	return () => createVNode(EffectSurface, mergeProps(rest, {
+		"sceneKey": `${fragmentShader.value}|${palette.value.join(",")}`,
+		"setup": _cache[0] || (_cache[0] = ({ scene, size, pointer, themeColors, themeColorList }) => {
+			const { background } = themeColors({ background: colors.background });
+			const list = themeColorList(palette.value.length > 0 ? palette.value : [colors.background], 6);
+			const builtin = {
+				uTime: { value: 0 },
+				uResolution: { value: new Vector2(size.width, size.height) },
+				uPointer: { value: new Vector3() },
+				uDark: { value: 0 },
+				uBackground: { value: background },
+				uColors: { value: list },
+				uColorCount: { value: clamp(palette.value.length, 1, 6) }
+			};
+			const material = new ShaderMaterial({
+				vertexShader,
+				fragmentShader: fragment(fragmentShader.value),
+				uniforms: {
+					...builtin,
+					...uniforms.value
+				},
+				transparent: true,
+				premultipliedAlpha: true,
+				depthTest: false,
+				depthWrite: false
+			});
+			const quad = new Mesh(new PlaneGeometry(2, 2), material);
+			quad.frustumCulled = false;
+			scene.add(quad);
+			return {
+				frame: ({ time }) => {
+					builtin.uTime.value = time * speed.value;
+					builtin.uPointer.value.set(pointer.x, pointer.y, interactive.value ? pointer.strength : 0);
+					builtin.uDark.value = config.theme.colorScheme === "dark" ? 1 : 0;
+				},
+				resize: (next) => builtin.uResolution.value.set(next.width, next.height)
+			};
+		})
+	}), null);
+}, {
+	name: "ShaderBackground",
+	props: [
+		"fragmentShader",
+		"uniforms",
+		"palette",
+		"speed",
+		"interactive"
+	]
+});
+//#endregion
+export { SHADER_PALETTE, ShaderBackground };
+
+//# sourceMappingURL=ShaderBackground.js.map

package/dist/three/background/ShaderBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShaderBackground.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/background/ShaderBackground.tsx"],"sourcesContent":["/**\n * 着色器背景：写一个片段着色器函数，主题色、时间、尺寸、指针自动作为 uniform 传入，画满整块区域。\n * MeshGradient、AuroraBackground 都建在它上面。\n *\n *   <ShaderBackground\n *     sx={styles.hero}\n *     fragmentShader={`\n *       vec4 shade(vec2 uv) {\n *         float n = fbm(vec3(uv * 3.0, uTime * 0.2)) * 0.5 + 0.5;\n *         return vec4(themePalette(n), 1.0);\n *       }\n *     `}\n *   >\n *     <h1>内容叠在上面</h1>\n *   </ShaderBackground>\n *\n * 着色器只写 `vec4 shade(vec2 uv)`（uv 是 0–1，左下角为原点；返回不预乘的颜色与透明度），可以直接用：\n * - uTime（秒，已乘 speed）、uResolution（CSS 像素）、uPointer（xy 是 -1–1 的指针位置，z 是指针在区域内的程度 0–1）、\n *   uDark（暗色主题为 1）、uBackground（主题背景色）；\n * - palette 的颜色（uColors、uColorCount）与 themePalette(t)、snoise、fbm（shaderChunks）。\n * 颜色在线性空间里计算，输出时按渲染器的色彩空间转换。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { Mesh, PlaneGeometry, ShaderMaterial, Vector2, Vector3, type IUniform } from 'three';\nimport { useConfig } from '../../config/context';\nimport { colors } from '../../config/theme/tokens';\nimport { clamp } from '../../utils/data/number';\nimport { EffectSurface, type EffectProps } from '../core/EffectSurface';\nimport { shaderChunks, THEME_PALETTE_SIZE } from '../core/shaders';\n\n/** 着色器背景的默认色板：品牌色加图表色板里的紫、粉、青 */\nexport const SHADER_PALETTE: readonly string[] = [\n  colors.accent,\n  colors.chart5,\n  colors.chart4,\n  colors.chart6,\n];\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ShaderBackgroundProps extends EffectProps {\n  /** 片段着色器：定义 `vec4 shade(vec2 uv)`，可用的 uniform 见文件开头；变了会重建 */\n  fragmentShader: string;\n  /** 额外的 uniform：改它们的 value 就能实时生效 */\n  uniforms?: Record<string, IUniform>;\n  /** 色板（token 或 CSS 颜色，最多 6 个），传给 uColors 与 themePalette；默认品牌色加图表色板；变了会重建 */\n  palette?: readonly string[];\n  /**\n   * 时间流速：uTime = 秒数 × speed\n   * @default 1\n   */\n  speed?: number;\n  /**\n   * 跟随指针（uPointer）；关掉时 uPointer.z 始终为 0\n   * @default true\n   */\n  interactive?: boolean;\n}\n\nconst vertexShader = /* glsl */ `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = vec4(position.xy, 0.0, 1.0);\n}\n`;\n\n/** 把使用方的 shade 函数包成完整的片段着色器 */\nfunction fragment(source: string) {\n  return /* glsl */ `\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec3 uPointer;\nuniform float uDark;\nuniform vec3 uBackground;\nvarying vec2 vUv;\n${shaderChunks.simplexNoise}\n${shaderChunks.fbm}\n${shaderChunks.themePalette}\n${source}\nvoid main() {\n  gl_FragColor = shade(vUv);\n  #include <colorspace_fragment>\n  #include <premultiplied_alpha_fragment>\n}\n`;\n}\n\n/** 着色器背景：主题色、时间、指针自动传入的全屏片段着色器 */\nexport const ShaderBackground = _component(\n  ({\n    fragmentShader,\n    uniforms,\n    palette = SHADER_PALETTE,\n    speed = 1,\n    interactive = true,\n    ...rest\n  }: ShaderBackgroundProps) => {\n    const config = useConfig();\n\n    return () => (\n      <EffectSurface\n        {...rest}\n        sceneKey={`${fragmentShader}|${palette.join(',')}`}\n        setup={({ scene, size, pointer, themeColors, themeColorList }) => {\n          const { background } = themeColors({ background: colors.background });\n          // 没给颜色时色板全是背景色\n          const list = themeColorList(\n            palette.length > 0 ? palette : [colors.background],\n            THEME_PALETTE_SIZE,\n          );\n          const builtin = {\n            uTime: { value: 0 },\n            uResolution: { value: new Vector2(size.width, size.height) },\n            uPointer: { value: new Vector3() },\n            uDark: { value: 0 },\n            uBackground: { value: background },\n            uColors: { value: list },\n            uColorCount: { value: clamp(palette.length, 1, THEME_PALETTE_SIZE) },\n          };\n          const material = new ShaderMaterial({\n            vertexShader,\n            fragmentShader: fragment(fragmentShader),\n            uniforms: { ...builtin, ...uniforms },\n            transparent: true,\n            premultipliedAlpha: true,\n            depthTest: false,\n            depthWrite: false,\n          });\n          const quad = new Mesh(new PlaneGeometry(2, 2), material);\n          quad.frustumCulled = false;\n          scene.add(quad);\n          return {\n            frame: ({ time }) => {\n              builtin.uTime.value = time * speed;\n              builtin.uPointer.value.set(pointer.x, pointer.y, interactive ? pointer.strength : 0);\n              builtin.uDark.value = config.theme.colorScheme === 'dark' ? 1 : 0;\n            },\n            resize: (next) => builtin.uResolution.value.set(next.width, next.height),\n          };\n        }}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AA+BA,IAAa,iBAAoC;CAC/C,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AAAM;;AAuBf,IAAM,eAA0B;;;;;;;;AAShC,SAAS,SAAS,QAAgB;CAChC,OAAkB;;;;;;;EAOlB,aAAa,aAAY;EACzB,aAAa,IAAG;EAChB,aAAa,aAAY;EACzB,OAAM;;;;;;;AAOR;;AAGA,IAAa,mBAAmB,0BAC9B,QAAA,SAO6B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,iBAJjB,cAAc;CAAA,MAAA,QAAAA,aAAA,QAAA,SAChB,CAAC;CAAA,MAAA,cAAAA,aAAA,QAAA,eACK,IAAI;CAAA,MACf,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CAEzB,aAAOC,YAAA,eAAAC,WAEC,MAAI;EAAA,YACE,GAAA,eAAA,MAAA,GAAqB,QAAA,MAAQ,KAAK,GAAG;EAAG,SAAA,OAAA,OAAA,OAAA,MAC1C,EAAE,OAAO,MAAM,SAAS,aAAa,qBAAqB;GAChE,MAAM,EAAE,eAAe,YAAY,EAAE,YAAY,OAAO,WAAW,CAAC;GAEpE,MAAM,OAAO,eACX,QAAA,MAAQ,SAAS,IAAC,QAAA,QAAa,CAAC,OAAO,UAAU,GAAA,CAEnD;GACA,MAAM,UAAU;IACd,OAAO,EAAE,OAAO,EAAE;IAClB,aAAa,EAAE,OAAO,IAAI,QAAQ,KAAK,OAAO,KAAK,MAAM,EAAE;IAC3D,UAAU,EAAE,OAAO,IAAI,QAAQ,EAAE;IACjC,OAAO,EAAE,OAAO,EAAE;IAClB,aAAa,EAAE,OAAO,WAAW;IACjC,SAAS,EAAE,OAAO,KAAK;IACvB,aAAa,EAAE,OAAO,MAAM,QAAA,MAAQ,QAAQ,GAAA,CAAqB,EAAE;GACrE;GACA,MAAM,WAAW,IAAI,eAAe;IAClC;IACA,gBAAgB,SAAQ,eAAA,KAAe;IACvC,UAAU;KAAE,GAAG;KAAS,GAAA,SAAA;IAAY;IACpC,aAAa;IACb,oBAAoB;IACpB,WAAW;IACX,YAAY;GACd,CAAC;GACD,MAAM,OAAO,IAAI,KAAK,IAAI,cAAc,GAAG,CAAC,GAAG,QAAQ;GACvD,KAAK,gBAAgB;GACrB,MAAM,IAAI,IAAI;GACd,OAAO;IACL,QAAQ,EAAE,WAAW;KACnB,QAAQ,MAAM,QAAQ,OAAI,MAAA;KAC1B,QAAQ,SAAS,MAAM,IAAI,QAAQ,GAAG,QAAQ,GAAG,YAAA,QAAc,QAAQ,WAAW,CAAC;KACnF,QAAQ,MAAM,QAAQ,OAAO,MAAM,gBAAgB,SAAS,IAAI;IAClE;IACA,SAAS,SAAS,QAAQ,YAAY,MAAM,IAAI,KAAK,OAAO,KAAK,MAAM;GACzE;EACF;CAAC,CAAA,GAAA,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/three/core/EffectSurface.d.ts

@@ -0,0 +1,41 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../../utils/props';
+import type { ThreeQuality } from './quality';
+import type { ThreeContext, ThreeSceneHandle } from './renderer';
+import { type ThreeCanvasProps } from './ThreeCanvas';
+/** 各种效果共有的属性；未声明的属性落到外层 div 上 */
+export interface EffectProps extends PartProps<'div'> {
+    /**
+     * 画质档位：像素比上限、粒子密度、抗锯齿；off 不渲染，显示 fallback
+     * @default 'auto'
+     */
+    quality?: ThreeQuality;
+    /** 暂停动画，停在当前画面 */
+    paused?: boolean;
+    /** 渲染分辨率相对像素比的倍数（0.1–1），见 ThreeCanvas；各效果有自己的默认值 */
+    resolution?: number;
+    /** 没有 WebGL（或 quality 为 off）时显示的内容，默认是主题色的柔和渐变 */
+    fallback?: VNodeChild;
+    /** 画布（ThreeCanvas）的部件属性 */
+    propsCanvas?: Omit<Partial<ThreeCanvasProps>, 'setup'>;
+    /** 内容外层的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 叠在效果上面的内容 */
+    children?: VNodeChild;
+}
+/** EffectSurface 的样式：root、canvas、content */
+export declare const effectSurfaceStyles: Readonly<{
+    canvas: css.CompiledStyles;
+    content: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** EffectSurface 的属性：效果的公共属性加上搭场景的 setup */
+export interface EffectSurfaceProps extends EffectProps {
+    /** 搭场景，见 ThreeCanvas */
+    setup: (context: ThreeContext) => ThreeSceneHandle | void;
+    /** 变了就重建场景（着色器、色板这类建好后不再改的配置） */
+    sceneKey?: string;
+}
+/** 效果的外层结构：底层画布 + 上层内容 */
+export declare const EffectSurface: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<EffectSurfaceProps>;

package/dist/three/core/EffectSurface.js

@@ -0,0 +1,62 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../../utils/props.js";
+import { ThreeCanvas } from "./ThreeCanvas.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/three/core/EffectSurface.tsx
+/** 各种效果共有的属性；未声明的属性落到外层 div 上 */
+/** EffectSurface 的样式：root、canvas、content */
+var effectSurfaceStyles = css.create({
+	root: {
+		position: "relative",
+		isolation: "isolate",
+		overflow: "hidden"
+	},
+	canvas: {
+		position: "absolute",
+		inset: 0,
+		zIndex: -1,
+		width: "100%",
+		height: "100%",
+		pointerEvents: "none"
+	},
+	content: { position: "relative" }
+});
+/** EffectSurface 的属性：效果的公共属性加上搭场景的 setup */
+/** 效果的外层结构：底层画布 + 上层内容 */
+var EffectSurface = /*#__PURE__*/ _component((_props, _ctx) => {
+	const setup = readonlyProp(_props, "setup");
+	const sceneKey = readonlyProp(_props, "sceneKey");
+	const quality = readonlyProp(_props, "quality");
+	const paused = readonlyProp(_props, "paused");
+	const resolution = readonlyProp(_props, "resolution");
+	const fallback = readonlyProp(_props, "fallback");
+	const propsCanvas = readonlyProp(_props, "propsCanvas");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("div", mergeAttrs({ sx: effectSurfaceStyles.root }, rest), [createVNode(ThreeCanvas, mergeProps({ "key": sceneKey.value }, mergePartProps({
+		sx: effectSurfaceStyles.canvas,
+		setup: setup.value,
+		quality: quality.value,
+		paused: paused.value,
+		resolution: resolution.value,
+		fallback: fallback.value
+	}, propsCanvas.value)), null), hasContent(children.value) && createVNode("div", mergeAttrs({ sx: effectSurfaceStyles.content }, propsContent.value), [children.value])]);
+}, {
+	name: "EffectSurface",
+	props: [
+		"setup",
+		"sceneKey",
+		"quality",
+		"paused",
+		"resolution",
+		"fallback",
+		"propsCanvas",
+		"propsContent"
+	]
+});
+//#endregion
+export { EffectSurface, effectSurfaceStyles };
+
+//# sourceMappingURL=EffectSurface.js.map

package/dist/three/core/EffectSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffectSurface.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../../src/three/core/EffectSurface.tsx"],"sourcesContent":["/**\n * 效果的外层结构（ShaderBackground、ParticleField、WaveGrid 等共用）：画布铺在底层，内容叠在上面。\n *\n *   <MeshGradient sx={styles.hero}>\n *     <h1>标题</h1>            ← 内容照常排版、可以交互；画布在它下面，不接收指针\n *   </MeshGradient>\n *\n * 根元素建立层叠上下文（isolation），画布层在内容下面、在根元素的背景上面；没有内容时只是一块效果。\n * 尺寸由使用方决定（sx 给高度，或由内容撑开）。画布是装饰，读屏跳过；要描述画面时给 propsCanvas 写 aria-label。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）、Content（div，有内容时才有）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../../utils/props';\nimport type { ThreeQuality } from './quality';\nimport type { ThreeContext, ThreeSceneHandle } from './renderer';\nimport { ThreeCanvas, type ThreeCanvasProps } from './ThreeCanvas';\n\n/** 各种效果共有的属性；未声明的属性落到外层 div 上 */\nexport interface EffectProps extends PartProps<'div'> {\n  /**\n   * 画质档位：像素比上限、粒子密度、抗锯齿；off 不渲染，显示 fallback\n   * @default 'auto'\n   */\n  quality?: ThreeQuality;\n  /** 暂停动画，停在当前画面 */\n  paused?: boolean;\n  /** 渲染分辨率相对像素比的倍数（0.1–1），见 ThreeCanvas；各效果有自己的默认值 */\n  resolution?: number;\n  /** 没有 WebGL（或 quality 为 off）时显示的内容，默认是主题色的柔和渐变 */\n  fallback?: VNodeChild;\n  /** 画布（ThreeCanvas）的部件属性 */\n  propsCanvas?: Omit<Partial<ThreeCanvasProps>, 'setup'>;\n  /** 内容外层的部件属性 */\n  propsContent?: PartProps<'div'>;\n  /** 叠在效果上面的内容 */\n  children?: VNodeChild;\n}\n\n/** EffectSurface 的样式：root、canvas、content */\nexport const effectSurfaceStyles = css.create({\n  root: { position: 'relative', isolation: 'isolate', overflow: 'hidden' },\n  canvas: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: -1,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n  },\n  content: { position: 'relative' },\n});\n\n/** EffectSurface 的属性：效果的公共属性加上搭场景的 setup */\nexport interface EffectSurfaceProps extends EffectProps {\n  /** 搭场景，见 ThreeCanvas */\n  setup: (context: ThreeContext) => ThreeSceneHandle | void;\n  /** 变了就重建场景（着色器、色板这类建好后不再改的配置） */\n  sceneKey?: string;\n}\n\n/** 效果的外层结构：底层画布 + 上层内容 */\nexport const EffectSurface = _component(\n  ({\n    setup,\n    sceneKey,\n    quality,\n    paused,\n    resolution,\n    fallback,\n    propsCanvas,\n    propsContent,\n    children,\n    ...rest\n  }: EffectSurfaceProps) => {\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: effectSurfaceStyles.root }, rest)}>\n        <ThreeCanvas\n          key={sceneKey}\n          {...mergePartProps<ThreeCanvasProps>(\n            { sx: effectSurfaceStyles.canvas, setup, quality, paused, resolution, fallback },\n            propsCanvas,\n          )}\n        />\n        {hasContent(children) && (\n          <div {...mergeAttrs<'div'>({ sx: effectSurfaceStyles.content }, propsContent)}>\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA0CA,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM;EAAE,UAAU;EAAY,WAAW;EAAW,UAAU;CAAS;CACvE,QAAQ;EACN,UAAU;EACV,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,eAAe;CACjB;CACA,SAAS,EAAE,UAAU,WAAW;AAClC,CAAC;;;AAWD,IAAa,gBAAgB,0BAC3B,QAAA,SAW0B;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MADrB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,oBAAoB,KAAK,GAAG,IAAI,GAAC,CAAAA,YAAA,aAAAC,WAAA,EAAA,OAAA,SAAA,MAAA,GAG1D,eACF;EAAE,IAAI,oBAAoB;EAAQ,OAAK,MAAA;EAAE,SAAO,QAAA;EAAE,QAAM,OAAA;EAAE,YAAU,WAAA;EAAE,UAAQ,SAAA;CAAC,GAAC,YAAA,KAElF,CAAC,GAAA,IAAA,GAEF,WAAU,SAAA,KAAS,KAACD,YAAA,OACV,WAAkB,EAAE,IAAI,oBAAoB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAG9E,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/three/core/ThreeCanvas.d.ts

@@ -0,0 +1,39 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../../utils/props';
+import type { ThreeQuality } from './quality';
+import { type ThreeContext, type ThreeSceneHandle, type ThreeStatus } from './renderer';
+/** 未声明的属性落到外层 div 上 */
+export interface ThreeCanvasProps extends PartProps<'div', 'role' | 'data-state'> {
+    /** 搭场景：每次创建渲染器时调用一次（被回收、上下文丢失后会重新调用），返回每帧、尺寸变化、释放的回调 */
+    setup: (context: ThreeContext) => ThreeSceneHandle | void;
+    /**
+     * 画质档位：像素比上限、粒子密度、抗锯齿；变了会重建。off 不创建 WebGL，显示 fallback
+     * @default 'auto'
+     */
+    quality?: ThreeQuality;
+    /** 暂停动画，停在当前画面 */
+    paused?: boolean;
+    /**
+     * 渲染分辨率相对像素比的倍数（0.1–1）：平滑的渐变、模糊的效果降低它能大幅省下 GPU 开销
+     * @default 1
+     */
+    resolution?: number;
+    /** 没有 WebGL（或 quality 为 off）时显示的内容，默认是主题色的柔和渐变 */
+    fallback?: VNodeChild;
+    /** 渲染状态变化时调用（同根元素的 data-state），挂载时先调用一次：比如降级时改放一张静态图，或一次性的效果直接收尾 */
+    onStatusChange?: (status: ThreeStatus) => void;
+    /** canvas 的部件属性 */
+    propsCanvas?: PartProps<'canvas', 'aria-hidden'>;
+    /** 降级内容外层的部件属性 */
+    propsFallback?: PartProps<'div', 'aria-hidden'>;
+}
+/** ThreeCanvas 的样式：root、canvas、fallback、fallbackGradient（默认的降级渐变） */
+export declare const threeCanvasStyles: Readonly<{
+    canvas: css.CompiledStyles;
+    fallback: css.CompiledStyles;
+    fallbackGradient: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** three.js 画布：生命周期、降级、无障碍，场景由 setup 搭建 */
+export declare const ThreeCanvas: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ThreeCanvasProps>;