更新日志

@misoto22/design 更名为 @misoto22/folio，类名、data- 属性与自定义属性的前缀由 m22- 改为 folio-。

CommandDialog 新增 shouldFilter、inputLabel 以及对话框的焦点与 Escape 处理函数；SearchPalette 现在直接构建在它之上，不再在旁边另起一套。

styles.css 不再包含网站组合组件的样式：组合组件请 import website.css，整站的文档级默认样式请 import 新增的 website-base.css。

CommandItem 高亮行左侧的强调竖线现在会按行自身的圆角裁切，不再在圆角主题下探出高亮区域。

SiteNavigation 现在按包含块取宽度，于是放在做了变换或包含的框里时，整条页头都会留在框内。

StepSequence 现在直接用核心 Steps 的流程轨道绘制，ClipboardButton 也与 CodeBlock 共用同一套复制状态，包括剪贴板写入被拒绝时的处理。

Heatmap 现在把网格排成一张固定布局的表格，好让每一格都保住一个真实的宽度，而不是塌缩成 0px。

data-accent 现在是随包发布的一项主题轴——ink、clay、forest、cobalt、moss、plum，每一个都只是把整套系统都在读的那一个 token 指到别处。

CalendarHeatmap——一年的每日读数，画成一周一列的网格，而且是按日期搭出来的，不是按数组顺序。

Metric——控制台上一排四个的那种读数小块：一个标签、一个等宽数字、一个状态色调，以及数字下面一个自由槽位。

PageHeader——一个页面的开头，各部分的顺序被固定下来：路径、眉标、标题、限定它的那些控件，以及它们下面那句话。

warm 和 cool 这两个表面，现在在深色下也把线条留在暗处——它们的 --rule 和 --rule-2 只写了一遍，于是深色页面上的每一条边框都渲染成了近白色。

恢复公共网站中内容筛选的触控范围，以及图表的两像素键盘焦点环。

媒体详情的返回控件现在即使经过浏览器子像素取整，也能保持 44px 触控目标。

媒体详情的返回控件现在即使经过浏览器子像素取整，也能保持 44px 触控目标。

媒体详情的返回控件现在保持 44px 触控目标。

网站表单在手机上保持 16px 字号，键盘聚焦图表时也会显示系统焦点环。

抽屉关闭操作在每个方向上都提供 44px 的触控目标。

问答卡片会以标题命名自己的区域，并恢复 44px 的提交触点。

新增网站组合组件，涵盖导航、作品集、内容列表、阅读页、媒体、表单、搜索、统计和对话界面。

包里的每一个图标现在都是 Remix Icon 的字形，而被 lucide 删掉的那些品牌图标，也跟着一起回来了。

图表的空状态会留在绘图区原来的位置，而不再顶到一个更高的 figure 的上沿。

图表调色板多了第三个取值，而强制颜色模式拿回了它那条色阶。

带 brush 的图表拿回了它的绘图区。

--control-lh：现在每一个控件都真的是它的 token 所声称的那个高度。

示例标题终于到得了中文站。

示例自己的旋钮从样品里挪了出来，进了画布工具条。

--bar-h：横在应用顶部的那条带，收拢成一个数字。

划过导航栏，不会再把指针底下那一整节加粗了。

AreaChart 面积图 变成 AreaChart - 面积图。

Sidebar 在放不下一整列的地方变成抽屉，而页面有一条边可以让它靠。

SidebarBranch——一行展开成更多行——外加 SidebarGroup 上的一个 badge 插槽，以及 16rem 宽的导航栏。

Sidebar——贴着应用侧边的一条导航栏，而收起它的那个控件，就长在它要收起的东西上。

每一个主题轴的默认值现在都有名字了，于是一棵子树可以从祖先的主题里「退出来」，而不是只能「换到另一个里去」。

表单这一组缺的两个控件，外加滑块做不到的那件事的出路：ColorPicker、NumberField，以及 Slider 上的 editable。

RadarChart.Radar 又能填充了，而不是把一个 NaN 递给 SVG。

导航栏不再像一份终端清单了。

BulletChart 把目标线画在目标真正在的地方。

有名字的轴默认值又够到了一处调用点，而支持它们的那套论证现在写在页面上了。

图表连线在能走直线的时候就走直线。

浮层现在读起来是浮着的，而一个列表只画一处高亮，不是两处。

TabsList 不会再在一排标签旁边长出一条竖直滚动条了。

三处没对齐的东西。

这个包会在 agent 把组件用错时当场告诉它，也够得到 Claude Code 以外的 agent。

十六张图表，画出来的画面好读、可信，而且是错的。

九处「画出来的」和「念出来的」是两回事的地方。

五个内容原语：Text、Heading、Code、CodeBlock 和 Markdown。

@misoto22/design/diagrams 里有十二个字段，类型检查通得过，画出来的却是另一回事——外加每一张图里，读屏软件从来没拿到过的那一半。

表单控件现在会把自己画出来的东西念出来。

浮层现在会盖过打开它们的那个表面，也够得到那个要它们的容器。

四个用于记录与设置的原语——DescriptionList、Toolbar、Timestamp 和 AspectRatio——外加三个 prop，它们让第四个和第五个组件变得没有必要。

八个组件，渲染得没错，描述的却是另一回事。

EmptyState 和 ErrorState 接受一个 level，不再替调用方决定文档大纲。

Tag 把筛选这个场景接了过来，而 Markdown 把链接那道边界收了尾。

{@link} 挺过了抽取，而文章的层叠也按它实际运行的样子写进了文档。

prefers-reduced-motion 现在是所有东西都遵守，而不是谁记得去问才遵守。

新增 @misoto22/design/diagrams：五种图示，以及把其中一张读下去所需的那套外围界面。

把图表的 PNG 导出并到共享的 SVG 导出上。

修正离线文档给图表打印的 Import: 那一行。

这个包现在离线为 agent 记录自己：一个 misoto22-design CLI、一个 skill，以及一个 README。

新增二十个数据可视化原语。

AppShell 接受 sidebarLabel、navLabel、openLabel 和 closeLabel。

一条由一个因子驱动的圆角阶梯、一本用选月份代替翻月网格的日历、一个长文阅读面，以及一条编号轨——给那些图不该拿去画的顺序用。

ToggleGroup 的滑动胶囊，在缩放过的容器里也能落在自己那一段上了。

修好表格的列间距——一个没带单位的零一直在悄悄把它吃掉。

走了一遍线上站点，修掉十个问题。

可配置的 Table、一个可搜索的动作菜单，以及日历/日期选择器的修复。

Command 的每一行都带上了图标和一行注解，面板也会说明每个键做什么。

修好那些画了但没接线的交互，并让“选中”这件事有东西在动。

把每一个表示“被选中”的表面都接到那唯一的指针上。

浮层和流体尺度都可以重新挂到一个有边界的框上。

改为公开发布到 npmjs，不再发到 GitHub Packages。

新增 themes.css：主题不再只是强调色。

新增十一个组件，并让表格真正做到一张表格该做的事。

加入密度轴，让每个组件都与书写方向无关，并把 token 以机器可读的形式发出去。

给这个包补上许可证、发布目标和更新日志。它采用 MIT 协议，以 @misoto22 scope 发布到 GitHub Packages，并由 changesets 管理版本——这样使用者既能装得上，也能不翻提交记录就知道两个版本之间改了什么。

给构建加上体积与 tree-shaking 预算（pnpm check:size）。

修复三个只有真实浏览器能看见、jsdom 测试看不见的缺陷。

把 token 层重新移植到归白。 这个包一直发的是已经退役的暖奶油主题——oklch 表面、8/12/18px 的圆角刻度、带模糊的高度坡道。任何照着它做出来的东西，从构造上就是偏离品牌的。

把 token 和语义拆开。 tokens.css 放原始值，semantic.css 放角色，组件只读角色——正是这一点让暗色模式成为一次数值互换，而不是第二套配色。

换掉了字体，改用 Hanken Grotesk、Newsreader 和 IBM Plex Mono，由一个脚本负责内嵌并管理字重清单。

十四个原语：Skeleton、Progress、Alert、Tooltip、Table、Breadcrumb、Pagination、Accordion、RadioGroup、Avatar、Separator、Kbd、LinkArrow、FigureBand。

cn——现在每个组件的 class 列表最后都要经过的那个合并器。

CONTROL_BASE / CONTROL_BORDER / isInvalid——共用的文本控件外观。

一个文档站，地址是 [ui.misoto22.com](https://ui.misoto22.com)，由这个包自己的源码生成。

在没有 `next/font` 的宿主里，字体栈会整条塌回系统字体。 没有兜底的 var(--font-hanken) 在计算值阶段就是无效的，而 IACVT 丢掉的是整条声明，不是那一项。

每一个 `hover:shadow-(--shadow)` 都是空转。 这个 token 解析出来是 none，所以那些悬停状态一直是看不见的，却还在为一次过渡付费。

调用方传的 `className` 不一定能覆盖。 clsx 会把冲突的两边都输出，然后交给样式表顺序去裁决；cn 按工具类分组合并。

没有显式 `htmlFor` 时，`Field` 什么都不播报。 提示信息的 id 是从它推出来的，所以提示渲染出来了，却从来没有被念过。

省略 `icon` 时 `NavItem asChild` 什么都不渲染——两个子元素进了一个只允许一个的 Slot。

Input、Textarea 和 Select 已经各走各的了：聚焦和禁用的处理各不相同，每个都揣着一份自己的控件 class 字符串。

Spinner 是一个强调色的环，而这套系统的强调色是墨色。