Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Extract the icon system into `@lody/icons`

Status: implemented
Translation: pending

## Abstract

The icon system is now an independently consumable workspace package. The
extraction removes its implementation dependencies on `@lody/ui` while keeping
the old UI subpath available during caller migration.

## Decision

The original Lody icon registry, SVG renderer, four visual treatments, and
stateful icons now live in the independent `@lody/icons` workspace package.
`@lody/ui` depends on `@lody/icons`; the icon package does not depend on
`@lody/ui`, Base UI, product components, or UI token modules.

The old `@lody/ui/icons` subpath remains a compatibility re-export so existing
consumers do not need a flag-day import change. New code and the icon playground
use `@lody/icons` directly. The legacy `src/internal/glyphs.tsx` primitives
remain in `@lody/ui` because they are private marks owned by its controls, not
members of the independent icon set.

## Implementation

- Moved the icon registry, renderer, stateful icons, icon-specific rules, and
tests from `packages/ui` to `packages/icons`.
- Replaced the renderer's dependency on `@lody/ui/internal/class-name` with a
local helper.
- Replaced the stateful renderer's dependency on `@lody/ui` motion tokens with
its own fixed transition contract.
- Added public root and focused subpath exports to `@lody/icons` and added its
workspace importer and lockfile entry.
- Updated the existing icon playground to consume the new package and emit
`@lody/icons` examples.

## Validation

- `pnpm --filter @lody/icons typecheck`
- `pnpm --filter @lody/icons test` — 18 tests passed
- `pnpm --filter @lody/ui typecheck`
- `pnpm --filter @lody/ui test` — 258 tests passed

The package extraction implements the boundary proposed in
`.agents/notes/proposed/feature/2026-09-14-ui-icon-set.md`; product-wide
migration from `lucide-react` and other product-local icons remains separate
work.
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Lody 图标族扩展探索

Status: proposed
Translation: pending

## 摘要

已有图标探索稿覆盖了基础操作,但还不足以对照会话、文件、审查和任务界面中的具体使用需求。本次提出沿用 24px 网格、1.5px 线宽、圆端点与圆连接,补充 60 个原创图标,并通过六个交互原型比较它们的语义和视觉重量。新增图标提供 Outline、Duotone、Glyph、Bulk 四种处理,实心版区分主体、内部挖空和外部结构。这是产品采用前的设计探索,未改变产品规范或替换运行中的图标;16px 版本目前仍是同比缩放,需要单独进行光学校正后才能视为小尺寸专用资产。

## 设计与责任

临时设计目录 `/tmp/lody-icons` 保存原有稿与新增页面、路径源文件、独立 SVG 及使用说明。原稿保存在 `draft-02.html`,新稿入口为 `index.html`;这些临时资产不是仓库内的产品实现。本记录只保存公开的设计结论,不包含会话记录,原型中的文件、消息和任务均为合成数据。

新增图标按会话、文件、Git、工具、布局、状态分成六族,每族十个。气泡、文件折角和 Git 圆节点复用各自几何骨架。六个案例分别覆盖会话工作台、代码审查、命令菜单、文件预览、本地工具开关和任务状态操作;原有发送、搜索和 Agent 图标继续承担已有操作语义。

默认预览与导出使用 24px、1.5px 线宽。Duotone 主体填充为 18%,Bulk 为 32%。Glyph 通过 SVG mask 实现真正透明的内部挖空,插脚和支架等外部结构继续使用前景色;避免用背景色描内部细节导致图标只能放在单一背景上。没有封闭主体的线形图标保留线条,因此四种导出可能相同。重复内联同一导出文件时需要给 mask ID 添加唯一后缀,页面渲染器自动生成唯一 ID。

## 参考与取舍

[Nucleo UI Icons](https://nucleoapp.com/ui-icons) 的公开介绍强调系列一致性和四种样式,其当前 UI 系列使用 18px 网格、16px 主体区域及 1.5px 线宽。本稿继承 Lody 原稿的 24px 网格,不把 Nucleo 当前网格直接当作本稿规范,也没有使用其图标路径或付费资源。

相比按背景色覆盖细节,mask 让实心图标能适应不同背景,但带来重复内联时的 ID 管理成本。相比为每个尺寸重新绘制,统一骨架便于快速比较,但不能保证缩至 16px 后所有复杂细节仍有最佳辨识度。半像素坐标也不能保证 1.5px 线宽在任意设备比例下像素对齐。

交互原型在页面内演示状态变化,刷新重置,不执行真实文件、Git、工具或 Agent 操作。产品接入、独立小尺寸绘制与实际无障碍验收仍待另行决定;本提案不意味着已获批准。

## 验证与限制

浏览器检查确认新增图标数量为 60、案例数量为六,无页面脚本错误,1440px、768px、390px、320px 视口均无页面横向溢出。搜索、分类、样式和尺寸切换、详情键盘关闭、SVG 剪贴板和下载,以及六个案例的交互状态检查均通过;消息输入也验证了 HTML 字符按文本展示。240 个独立 SVG 均通过 XML 解析,已打包页面源码和资产。已生成浅色、深色与手机宽度截图进行视觉检查,详细结果保存在临时目录的 `verification.json`;这些检查不代表产品采用审批。

维护命令在任务开始时已报告四条指向缺失 ACP 扩展文件的既有文档链接错误,与图标提案无关。本次没有修改对应文档或产品源代码。
Loading
Loading