Skip to content

Jixoai UI v0.4.0：特效改为附件，registry 净增 23 条

jixoai v0.4.0 ui

jixoai-ui v0.4.0 的按压特效改为 Svelte 附件（{@attach pressEffect(...)}），同时落地六引擎高亮、图标管线、prose 排版、KaTeX 与 Mermaid、Card 结构内核与浮动画布 dock。registry 从 113 条涨到 136 条。三处迁移动作都不留兼容层。

$ git log v0.3.0..v0.4.0 --oneline | wc -l
175

jixoai-ui v0.4.0 发布了（2026-09-10）。175 个提交，按提交前缀统计是 41 个 feat、49 个 fix 与 66 个 docs，其余 19 个是 chore、test 与重构；registry 从 113 条涨到 136 条。主线是特效改为附件，同一条线上还落了高亮、图标与排版，以及数学图表、表面结构与画布。三处迁移动作，都不留兼容层。

特效：组件属性改为附件

按压特效现在是 Svelte 附件。shimmer、pulse、rainbow 与 ripple 通过 {@attach pressEffect(fx)} 挂载，挂在你渲染的任意元素上，press-button、icon-button、chip 的 effect 属性同时退场。

<script lang="ts">
  import PressButton, { shimmer, rainbow } from '$lib/ui/press-button/press-button.svelte';
  import { pressEffect } from '$lib/ui/press-button';
</script>

<PressButton variant="fill" {@attach pressEffect(shimmer())}>Deploy</PressButton>
<PressButton variant="outline" {@attach pressEffect(rainbow())}>Cancel</PressButton>

Svelte 的 attachments 已是一等语法，不用实验开关，而它与 actions 是两种契约：{@attach expr} 的值就是附件本身，签名 (element) => cleanup，参数替换时按身份重新挂载，没有 update 通道，也没有 destroy 对象。所以特效导出重写成附件工厂（参数进、附件出），仓库里 39 处 use: 挂载与内部 action 统一经 fromAction() 在同一次变更里搬完。

机制上有两处值得看。shimmer 与 rainbow 画的是宿主自己的边框环（环宽由 ringW 驱动），填充走 number | null | Canvas 三态通道，solidFill() 负责把任意 CSS 颜色铸成保证不透明的 0xRRGGBB。ripple 换成不带 viewBox 的 svg 座位，用 user units 承接宿主继承来的轮廓，逐层 clipPath 裁切加 feGaussianBlur 柔化。

rainbow 画布：三个中性宿主按钮 upgrade / subscribe / ⌘ 共用同一个特效对象，宿主自己的边框就是流动的彩虹环，环宽由 ringW 驱动，填充走 auto / null / solidFill 三态

特效从此有了自己的主页 /docs/effects.html，玻璃的双层游乐场整体搬了进去，原路由 /docs/components/glass.html 退场；命令行认分组别名 npx jixoai-ui add effects。

effects 主页：家族法则，特效是挂在元素上的附件工厂而不是组件；五枚小签列出两种挂载通道、动作桥与挂载点属性

高亮：六种引擎可换，语言可自动检测

高亮层拆成零依赖内核加六个可安装后端：microlighter、highlight.js、prismjs、shiki、sugar-high、tree-sitter。默认只提供一个引擎及其全部能力，需要别的再按需装。此前 code-card 与 highlight 两个条目把 prismjs 和 microlighter 写进 npm dependencies，装一个组件等于装下全部引擎，这一版改掉了。

语言检测是新增能力：LanguageDetector 抽象加内置的 DLD（默认语言检测器），分四层按需加载，第一层是 filename 与扩展名映射，后面依次是 shebang、meta 与内容启发。lang="auto" 启用检测，markdown 面现在默认走 auto。行内代码的默认引擎换成 microlighter，4.5KB，零标记，纯文本可复制。

code-card 的完整结构：文件名签 spawn.ts、右上 shiki · ts 引擎徽章、脚注 powered by Shiki · theme: jixoai 与 copy 控件

图标：一条管线，两个面，一个组件

图标系统补上了组件面：<Icon name="check" /> 带类型安全的 IconName 联合、size 与 strokeWidth 两个属性，取代了此前 197 处 {@html icons.x} 注入（registry 与文档站合计）。

插件面把渠道变成公开 API。@jixoai/ui-vite-plugin/icons/[lucide|md|ph|rx] 是同一个包的独立入口，lucide 默认开启，其余按导入启用；jixoai({ icons: { library } }) 生成 icon-set.gen.ts，把自定义图标名一起并进 IconName。图标按块懒加载，消费方不用为整套图标付费。

这一版还给图标加了真实项目 E2E 层：examples/hmos-icons 是真消费者，真的被安装并构建，当场抓出两个活缺陷。svgo 会把每个图标的 id 压成同一个短记号（a），同页内联两份 Sketch 导出就会互相错认 use 目标，现在 scopeIconIds 给每个打包 id 加上规范名前缀；RAW 安全闸门原本直接拒绝 Sketch 导出那种 use 加 xlink 的形状，等于把渠道对第三方图标集关掉，现在按片段法放行同文档引用，外部引用照旧拒绝。

icons 页的组件面：Icon 组件的 size 梯级，同一个 prop 在 12 / 16 / 24 / 32 四档上实渲染

排版与 Markdown：prose 作用域与阅读内容族

排版新增 prose 条目（<Prose> 提供者）与 typography lib。十一个旋钮全部走 absentSlot 语义：不设就是不发声，最近的上游设置生效，外层 <Prose size leading> 永远盖不过内层 <Markdown typography=>，这是级联上的主权契约。

阅读内容族把 Markdown 里没有对应组件的结构逐个提取出来：text.svelte 实现 <Text mark="…">，并把 P Strong Em Del Mark Ins Sub Sup 从同一个模块导出；heading 按 level 出原生 h1–h6，带上从 markdown 面迁出的 em 尺寸梯级；blockquote 的左边线拆成 rule 与 ruleSize 两个字面槽（rule 选 inset 阴影或 border，ruleSize 走 1px/4px/8px）；Link 的外链默认带 suffix-icon；List 分出严谨的 ol 与 ul 场景。Markdown 面本身是流式的，AST 映射到 registry 部件，代码块走 code-card 的代数守卫异步重绘。

prose 页的旋钮展示：左栏 size 与 leading 走继承缩放（ambient 14px 对 17px），右栏 align justify 加 hyphens 与 wrap pretty

数学与图表：KaTeX 与 Mermaid

lib katex 是 renderToString 之上的薄门面，jixoai 默认值（output: 'htmlAndMathml'、throwOnError: false、errorColor 绑 token）、选项透传、registerMacros 扩展点，并自带 katex.min.css 的导入，字体跟着 npm 包走，消费方不用额外配字体。命名按语法标准来：LaTeX 的组件叫 math-block 与 math-inline，mermaid 的语法是它自己的，名字照用。

lib mermaid-engine 是懒加载单例，引擎约 1MB，按需 code-split。验收轮补了两处：mermaid 的 CROSSED pin 自带画布，显式主题钉住时按目标主题绘制视口；math-block 增加 FIT 变体，不滚动、按比例缩放，打印默认走它。

表面：Card 结构内核与动作带

2026-09-09 的结构内核把「底部动作区」收敛成一条法则：Card 的 head/body/foot 三段加上贴纸式结构（一切规则锚在 data-jx-* 属性族上，任意元素盖章即成结构），body 独享滚动法则，行内标尺统一由 CSS 服务端渲染。Dialog 卸掉自己的皮肉改用 Card 的方言，ButtonBar 退场。

随后两轮清扫把 sheet 与 system-dialog 各自的皮肉清掉，动作带法则泛化到 sheet、system-dialog 与画布 dock 三处，按钮在纵向上铺满整条带。AlertDialog 随之改名 SystemDialog，registry 条目 alert-dialog 换成 system-dialog。

card 页：结构内核与 head / body / foot 三段带，foot 里是行内动作座 Cancel / Save

画布：浮动 dock 与 canvas-everywhere

ComponentCanvas 此前背了太多职责，最重的是常驻的 playground 泳道，白占 18–22rem 舞台宽度。这一版把 playground 改成画布内浮动、可折叠且可拖拽的 dock，默认展开，收起后是一个图标 chip，控件用 ItemGroup 组装。画布本身瘦成 code-card 那样的卡片。

配套的 canvas-everywhere 让每个文档演示都走画布渲染。此前 114 个页面里 443 个 ComponentCanvas 对 1580 个 SectionCard，读者看不到大部分演示背后的代码，现在演示默认带源码栏。

component-canvas：画布套画布，外层 LIVE 舞台内嵌一个简化实例，两层各有自己的 Code 栏

命令行与 vite-plugin

命令行新增分组别名：npx jixoai-ui add effects 展开整组，npx jixoai-ui add effects/glass 取单个成员。

@jixoai/ui-vite-plugin 0.3.0 同期发布：排版带来 prose 作用域与 parts 的 R2/R3；图标带来上述真实项目 E2E 层；画布带来 dock 的验收裁定（亚克力弹层材质、竖向握把图标，position: absolute 退场）。插件测试套件 398/398 通过。

迁移（破坏性变更）

三处迁移动作，都不留兼容层：特效挂载、条目改名与玻璃类退场。仓库里只有条目改名那一个提交带 ! 标记，另两处的破坏性写在各自的提案里。

第一处是特效从组件属性改为附件：

  <PressButton {@attach pressEffect(shimmer())}>Deploy</PressButton>

第二处是两个条目换名字：alert-dialog 改名 system-dialog，icons 拆成 icon 与 icon-set。最低摩擦路径是按新名字重新加条目：

npx jixoai-ui add system-dialog icon icon-set

第三处是玻璃：手调的 .jx-glass 类退场，改由 blur() 的默认值承接（14px 模糊，1.35 饱和，68% 填充），所以未配置的迁移是计算等效的。下面是完整的挂载迁移对照表。

迁移对照表：动作指令、构建器属性与附件记录各自的新写法

其余变更

  • 玻璃：动态带加了三层视差景深，跑无缝循环；blur() 收编了此前手调的每一处颜料，liquid() 与 liquid.apple() 挂上忠于 kube 的透镜。

  • 高亮：langDetector 契约进内核条目，AUTO_LANG 在 code-card 落地，检测实验台进入文档页。

  • 排版：oklch 令牌调色板升到 v2，次级行距梯级、fused 变体与共享的文本修饰内核落地。

  • 其余 49 个提交是修复。

链接

jixoai logo jixoai jixoai.com