@arcticworks/svelte

适用于每个应用（PLC、DataExplorer、Continuity、SecureNet）的 ArcticWorks Svelte 组件库——一种设计语言。

English · 简体中文

Svelte 5（runes）+ TypeScript。每个组件都消费设计系统的 --aw-* 令牌；组件约定契约见 AGENTS.md。

Demo

交互式 demo 应用位于 src/routes：

bun install
bun run dev        # http://localhost:5173
bun run check      # svelte-check
bun run build      # 静态 demo → build/

包构建

bun run package    # svelte-package → dist/（含 themes/dark.css）

应用按如下方式使用：

import '@arcticworks/design/themes/dark.css';
import { Button, Table, Dialog, toast, Toaster } from '@arcticworks/svelte';

密度：在容器上设置 data-density="dense" / "compact"（默认）/ "comfortable" ——整个组件库通过 var() 链重排。

目录结构

src/lib/
├── index.ts              # barrel — 从这里导出所有内容
├── base.css              # 全局焦点环、选区、box-sizing
├── icons.ts              # 图标路径映射（24px 网格，1.75px 描边）
├── toast.ts              # toast store + 辅助函数
└── components/           # 每个组件一个文件

组件

Actions（操作）：Button、IconButton、Segmented · Forms（表单）：Input、Textarea、Search、Checkbox、Radio、Switch、Select、Kbd · Feedback（反馈）：Badge、Spinner、Progress、Skeleton · Structure（结构）：Card、List、ListItem、Breadcrumbs、Pagination、NavItem、NavSection、Sidebar、Tabs、Tree · Data（数据）：Table、PropertyGrid、SplitPane、LineChart、BarChart · Overlays（浮层）：Dialog、Tooltip、Menu、MenuItem、MenuSeparator、Toaster、CommandPalette、Calendar · Composite（复合）：FilePicker · Icons（图标）：Icon、icons、IconName。