Back

Target UI System Preview

PTO 设计系统目标态规范。模块迁移时以本页组件形态、状态和映射为准。

Agent Reference

Token Stack (load order)

tokens/foundation.css	Primitives — raw color palette, spacing scale, radius, font families
tokens/semantic.css	Semantic aliases — `--background`, `--foreground`, `--surface-1..4`, `--border-`, `--state-`
tokens/components.css	Component tokens — `--button-`, `--card-`, `--panel-`, `--tag-`, typography composites
css/style.css	Class rules — `.btn`, `.btn-solid`, `.btn-ghost`, `.btn-icon`, `.is-selected`, layout primitives
patterns/patterns.json	Pattern registry — graph/timeline primitives that must be reused from their source files instead of copied into preview CSS.

tokens.json — 生成产物说明

文件路径：tokens/tokens.json　　生成脚本：`tokens/generate_tokens.py`
`$meta`	生成时间、生成器、source-of-truth 说明。用于明确该文件不可手改。
`source.foundation`	来自 `tokens/foundation.css` 的原始 token，按 `base / light` 分组。
`source.semantic`	来自 `tokens/semantic.css` 的语义 token，按 `dark / light` 分组。
`source.components`	来自 `tokens/components.css` 的组件 token，按 `base / light` 分组。
`themes.dark / themes.light`	由三份 CSS token 源合并后的最终主题变量快照。键为 CSS 变量名（不含 `--`）。
使用原则	三份 CSS token 源才是单一来源。修改样式 → 改 CSS token 源 → 运行生成器；不要直接编辑 `tokens.json` 或 `tokens.js`。

Token Coverage Gaps（待补录）

CLASS	CSS 来源	缺失情况
.btn-icon	css/style.css L276	CSS 已实现（正方形尺寸修饰符），`component.button` 无对应条目，缺 `size` token
.toggle-outline	design-system-preview.html `<style>`	仅在预览页 inline 定义，CSS 文件和 tokens.json 均无。需提取到 css/style.css + 补录 `component.toggle`
.toggle-outline[aria-pressed="true"]	同上	pressed 状态同上，未正式化
.toggle-outline-sm / -lg	同上	尺寸变体，与 button height/paddingX 体系不一致，需对齐
.toggle-outline-icon	同上	icon slot 子元件，未录入
.accent-input / .accent-picker	design-system-preview.html `<style>`	预览控制条专用 UI，非复用组件；如保留建议归入 preview-utilities，标注 preview-only

Canonical Button Classes

.btn	Soft / secondary. Surface fill + border + secondary text. Default for most actions.
.btn.btn-solid	Primary CTA. `var(--foreground)` fill + `var(--background)` text. High-contrast. One per context.
.btn.btn-ghost	Utility / icon-adjacent. No bg, muted text, hover reveals bg. Toolbar helpers, back links.
.btn.btn-icon	Square icon-only size modifier. Pair with any variant: `.btn.btn-icon`, `.btn.btn-icon.btn-ghost`.
.btn[disabled]	Disabled state. Opacity 0.42, pointer-events none. No extra class needed.
.btn.is-selected	Selected / active toggle state. Same fill as `.btn-solid`. Overrides all variant backgrounds.

State Modifier Rules

.is-selected	Universal selected state. Applies to `.btn` of any variant. Produces `var(--foreground)` fill + `var(--background)` text. Used by toggle groups, chip filters, toolbar active states.
Deprecated	Do NOT use: `.btn-flat`, `.btn-md-primary`, `.btn-md-text`, `.sw-toggle-active` with blue fill, `--button-flat-primary-*` tokens. All removed or neutralised.

Pattern Reuse Rules

`swimlane-task-bar`	Use `patterns/swimlane-task/pattern.js` and call `window.PtoSwimlaneTaskPattern.drawTaskBar`. The canonical task bar is canvas-rendered, sourced from `pypto-swimlane-perf-tool/js/swimlane.js`. Do not rebuild it with DOM/CSS or rewrite segment math locally.
`memory-architecture-layout`	Use `patterns/memory-architecture/pattern.js`. Call `window.PtoMemoryArchitecturePattern.renderArchitecture` to build the stage, `createRouteOverlay` for MTE routes, and `renderBufferGrid` for per-tier occupancy. Extend it with a new preset for 950B; do not copy raw `mem_viewer` HTML or redraw route geometry locally.
`aic-core-object`	Use `patterns/aic-core-object/pattern.js` and call `window.PtoAicCorePattern.render`. The shell is config-driven from the design draft; extend the preset data for 950B instead of cloning the generated DOM or restyling the chrome locally.
`aiv-core-object`	Use `patterns/aiv-core-object/pattern.js` and call `window.PtoAivCorePattern.render`. The shell is config-driven from the approved AIV draft; extend the preset data for later chip variants instead of copying the generated DOM or changing card geometry locally.
Preview rule	Preview pages may wrap a pattern for layout, but must not redefine the pattern's internal class styles.

Module Migration Status

MODULE	PATH	STATUS
pass-ir	pass-ir/index.html — `.btn-md-primary→.btn.btn-solid`, `.btn-md-text→.btn.btn-ghost` ✓	migrated
swimlane	swimlane/styles.css — active states neutralised to `var(--foreground)` fill ✓	migrated
op-ide-assistant	Still uses old `.btn-primary` class	pending
execution-overlay	Still uses old `.btn-primary` class	pending
mem_viewer	Still uses old `.btn-primary` class	pending
model-architecture	Not audited yet	pending
graph-prototype-lab	Missing token imports entirely	no tokens

Exemptions — Do Not Migrate

stitch colors	Data viz palette for swimlane dependency rendering. Intentional, never merge into shared tokens.
eo-query / eo-key / eo-weight	Execution overlay color semantics. Module-specific, exempt.
mem_viewer layer accents	Memory viewer layer-depth color scale. Exempt.
graph node colors	Graph prototype node type palette. Exempt.

Theme

Solid Tone

Accent

Color Mode

Compact graph switcher. Optional accent icons come from icon CSS variables.

Color

Legend

Compute(24) Tensor(48)

Selected Event

Compact context near the selection.

Window

12.4ms → 18.1ms

Pattern Preview

页面 preview 后先看可复用 pattern。这里优先展示已经抽成共享 renderer 或 config-driven object 的 pattern，便于先确认复用边界，再往下看 token 和组件细节。

Swimlane Event Pattern

swimlane module: canvas task-bar renderer

Open Full Preview

pattern id: swimlane-task-bar source: patterns/swimlane-task/pattern.js contract: canvas renderer Pattern

950B Memory Architecture Pattern

full-stage object: GM / L2 / AIC / AIV / UB / L0C route overlay

Open Full Preview

pattern id: memory-architecture-layout source: patterns/memory-architecture/pattern.js contract: full-stage DOM shell + shared AIC/AIV renderers Pattern

Color Palette

`tokens.json` 现补全 11 阶中性色板与 mem-viewer 高亮色色板。中性色为白到黑统一灰阶；高亮色从现有图例与块体颜色抽出，统一按 `0-1000` 管理。

Palette Policy

shared token 里只放可复用的色板，不直接把模块局部 alpha 背景搬过来。mem-viewer 里的 base hue 被抽成完整 ramp，模块仍可按具体密度在 `500/600` 上叠 alpha 使用。

source copy-in / accum / vector tile / MTE

naming 0 = tint 500 = base 1000 = deep shade

后续如果把 mem-viewer 正式接入 shared token，建议优先引用 `highlight.*.500 / 600`，不要继续散落写裸十六进制。

Semantic Mapping

neutral 色板本身不直接等于 surface token。真正落地时，surface / foreground / border 要按 theme 做语义映射。

Role	Dark	Light
surface.1	#161616	neutral.0
surface.2	#1c1c1c	neutral.100
surface.3	#262626	neutral.200
surface.4	#313131	neutral.300
fg.default	rgba(255,255,255,.90)	rgba(0,0,0,.90)
fg.secondary	rgba(255,255,255,.60)	rgba(0,0,0,.55)
fg.muted	rgba(255,255,255,.40)	rgba(0,0,0,.38)
border.default	rgba(255,255,255,.10)	rgba(0,0,0,.12)

Highlight Step Rules

统一规则是 light 用低步号做背景、dark 用高步号做背景；中步号始终保留给前景或 block base。

Step	Dark Use	Light Use
0-100	—	chip/tag bg
200-300	icon / label fg	hover bg / icon fg
400	bright block fill	bright block fill
500	base/source	base/source
600-700	hover / pressed deepen	hover / pressed deepen
800-900	chip/tag bg	—

light chip 100/300 dark chip 900/200

State Overlay Rules

overlay 方案在 light 模式下反转为黑色半透明。`muted` 跟 `hover` 同底层叠色，但不表达交互，只表达弱化。

State	Dark	Light
hover	rgba(255,255,255,.06)	rgba(0,0,0,.05)
pressed	rgba(255,255,255,.10)	rgba(0,0,0,.09)
muted	rgba(255,255,255,.06) + fg.muted	rgba(0,0,0,.05) + fg.muted
selected	rgba(67,105,239,.14)	rgba(67,105,239,.10)
focus-ring	rgba(67,105,239,.42)	rgba(67,105,239,.36)

Buttons

共享按钮语义只保留 soft / solid / ghost / disabled，加上 icon-only 与 destructive 作为受控变体。模块级 CTA、工具栏按钮、入口按钮都先归到这里。

Button Matching Rules

solid vs soft decision

solid: primary workflow commit soft: entry / open / import / choose Rule

`solid` 只给真正推进主流程的唯一主动作，例如 Run、Generate、Apply、Execute、Start。`soft` 给打开、导入、选择、浏览、加载、本地资源这类入口动作，例如 Open Pass Folder、Open single JSON、加载本地资源。判断标准不是按钮位置，而是点击后是否立即提交或推进核心流程。

Soft

.btn

--button-secondary-bg --button-secondary-border --button-secondary-fg Use for open/import/load

默认按钮。用于打开、导入、选择、浏览、加载、本地资源、次级确认。凡是不直接提交主流程的入口动作，默认都走 `soft`。

Solid

.btn .btn-solid

bg: --foreground color: --background Use for run/apply/submit

主操作 CTA。只用于真正提交或推进主流程的唯一主动作，例如 Run、Generate、Apply、Execute、Start。不要给“打开本地资源”这类入口动作用 `solid`。

Ghost

.btn .btn-ghost

bg: transparent --button-ghost-fg --button-ghost-bg-hover

轻操作：取消、关闭、更多、icon-only 按钮。

Disabled

[disabled]

opacity: --button-disabled-opacity (0.42)

Toggle & Chip

这里按 shadcn / Base UI 的组件边界拆开：Toggle 是单个二态开关，Toggle Group 是互斥切换，Chip Filter 是轻量筛选标签。方向切换、版本切换、视图切换都并入 Toggle Group，不再单列 pill 组件。

Toggle

outline toggle, icon + label

border: --border-default pressed bg: foreground 7% tint radius: 6px Shared

单个 toggle 采用独立 outline 控件，不直接复用普通按钮。更接近 shadcn 的 `variant="outline"` 结构。

Toggle Sizes

size="sm" / default / "lg"

sm: h-8 px-2.5 default: h-8 px-2.5 lg: h-9 px-3 Shared

整体尺寸收小一号。默认尺寸现在收敛到原来的 small 档，避免 toggle 比普通控制项更重。

Toggle Group

.sw-toggle-btn / .sw-view-mode-btn / .model-btn.active

base: outline toggle selected via aria-pressed Shared

互斥切换用一组 outline toggle 组成，不再用普通按钮叠加 `.is-selected` 假装 toggle。方向切换和版本切换也收进这里，不再保留 pill 分类。

Chip Filter

.sw-chip-btn + compact filter semantics

compact spacing selected: var(--state-selected) + var(--foreground) Module Variant

chip 是筛选器，不是普通 toggle。选中态保持低干扰，用 30% 白底加白字，不使用纯白实心填充。

Labels & Badges

状态标签与 badge 不并入按钮系统。这里定义的是目标态信息标记层：默认保持低干扰，只有确实承载状态或等级时才使用颜色。

Neutral Badge

.badge-neutral

Default Inspector Shared

bg: --surface-disabled border: --border-default fg: --foreground-secondary Shared

Semantic Status

.badge-neutral + semantic color

success pending warning error

base: neutral badge shape semantic colors: success / info / warning / danger Shared

Semantic Status 只是 Neutral Badge 的语义色版本，结构、尺寸、圆角都保持一致，只叠加文字和描边颜色。

Inline Label

.label-inline

Pass fuse_attention

label: --foreground-muted value: --foreground Shared

Module-Only Status Pill

timeline / swimlane / graph status

Gap Fallback Resolved

status-specific semantic tint Exempt

Card

这一节只展示真正属于 shadcn 语义的 Card。重点不是外框，而是 CardHeader、CardAction、CardContent、CardFooter 这类 slot 结构。

Swimlane Resource Panel

.sw-resource-panel -> CardHeader + CardContent

Local Resource Library

Load stitched traces, inspect available samples, and keep resource actions grouped in one compact card.

Current Source

stitched_after.json

Samples

before / after / diff

slots: header + content bg: --background-elevated Shared

Execution Overlay Detail Panel

.eo-detail-panel -> CardHeader + CardAction + CardContent

Node Detail

Execution diagnostics, dependency lookup, and node metadata should read like a structured analysis card.

Node

q_proj_fused

Pipeline

Query · Core 3

slots: header + action + content action: link/ghost button Shared

Swimlane Task Popup

.sw-task-popup -> CardContent + CardFooter

Task Detail

Popup detail should behave like a content card with clear metadata rows and footer actions.

Kernel

matmul_128x64

Window

12.4ms → 18.1ms

slots: content + footer footer: stacked actions Shared

Data Viz Exempt

这一节收必须豁免的 data-viz 颜色系统，以及仍需按可视化语义单独保留的少量图形模式。它们不并入共享 token，也不作为通用组件对待。

Swimlane Stitch Colors

--sw-stitch-0 ~ --sw-stitch-4

role: stitched lanes Exempt

Dependency Lines

.sw-dep-line-* / .sw-dep-dot-*

role: relation encoding Exempt

Graph Node / Edge Semantics

model / graph / overlay semantics

Op Tensor Pass

role: chart semantics Exempt

Colormap Modules

heatmap / latency / density / scalar ramp

role: scalar mapping / colormap examples: heat, latency, density Exempt

Module Surface

graph / swimlane / canvas surface

Canvas Surface

图面板、泳道布景、overlay surface 允许保留模块特定处理，不并入 Card。

surface gradient border: module-specific Exempt

Graph Node Pattern

source: css/style.css + js/renderer.js

fp32 #2155

Tensor_Name

[1,2,128,512]

asisMEM_DEVICE_DDR

dtypefp32

sg·2 #10000

CALL:Leaf func 054 lat·2.4

fromT2154, T2155

toT2126, T2146

node-card-tensor / node-card-op source: css/style.css .node-card* Pattern

Compact Node Pattern

source: js/renderer.js buildCompact*

Tensor_Name

[1,2,128,512]

CALL:Leaf func 054 lat·2.4

data-compact source: js/renderer.js buildCompactTensorCard / buildCompactOpCard Pattern

Cast Node Pattern

source: js/renderer.js buildIncastCard / buildOutcastCard

incast slot·0

shape[1,2,128,512]

dtypefp32

asisMEM_DEVICE_DDR

outcast slot·1

shape[1,128,512]

dtypefp16

asisMEM_DEVICE_HBM

node-card-incast / node-card-outcast source: js/renderer.js buildIncastCard / buildOutcastCard Pattern

Module Mapping Matrix

这块是 migrate 阶段的输入索引。它不再只列按钮，而是按五大组件域说明每个模块最终应该收敛到哪里，哪些继续保留模块专属。

Pass-IR 入口

原 .btn-md-primary / .btn-md-text

Open Pass Folder → .btn Open single JSON → .btn

Swimlane 工具栏

resource entry / search utility

加载本地资源 → .btn search-icon → ghost pattern

Action List In Card

Card content pattern: .cp-btn / .mm-btn / .panel-toggle-btn

outer container: card inner pattern: action list rows one row can be selected

这类内容本质上不是独立组件大类，而是 `Card Content` 里的 action list pattern。外层是 card，内层是一组操作行，其中一项通常表示当前选中模式。