@antfu/design 0.1.0

package/composables/toast.ts

@@ -0,0 +1,81 @@
+/**
+ * A controlled toast queue for {@link FeedbackToasts}.
+ *
+ * The package stays stateless — `FeedbackToasts` is presentational and the *app*
+ * owns the list. This composable is the ergonomic owner: create it once and share
+ * the returned `toasts` ref with the component, then `add`/`dismiss` from anywhere.
+ * Share a single instance app-wide via `provide`/`inject` or a module-level export.
+ *
+ * @example
+ * const { toasts, add, dismiss } = useToast()
+ * add('Saved', { type: 'success', duration: 3000 })
+ * // <FeedbackToasts :items="toasts" @dismiss="dismiss" />
+ */
+import type { Ref } from 'vue'
+import type { ToastItem, ToastType } from '../components/Feedback/FeedbackToasts.vue'
+import { ref } from 'vue'
+
+/** Options accepted when pushing a toast (everything but `id`/`message`). */
+export type ToastInput = Omit<ToastItem, 'id' | 'message'> & { id?: ToastItem['id'] }
+
+export interface ToastQueue {
+  /** The reactive toast list — pass to `<FeedbackToasts :items>`. */
+  toasts: Ref<ToastItem[]>
+  /** Push a toast; returns its id. Auto-dismisses after `duration` ms when set. */
+  add: (message: string, options?: ToastInput) => ToastItem['id']
+  /** Patch an existing toast (e.g. update `progress`). */
+  update: (id: ToastItem['id'], patch: Partial<ToastItem>) => void
+  /** Remove a toast by id. */
+  dismiss: (id: ToastItem['id']) => void
+  /** Remove all toasts. */
+  clear: () => void
+  /** Shorthands that preset `type`. */
+  success: (message: string, options?: ToastInput) => ToastItem['id']
+  error: (message: string, options?: ToastInput) => ToastItem['id']
+  info: (message: string, options?: ToastInput) => ToastItem['id']
+  warning: (message: string, options?: ToastInput) => ToastItem['id']
+}
+
+let counter = 0
+
+/**
+ * Create a toast queue. Stateless package, caller owns the instance.
+ *
+ * @returns A {@link ToastQueue}.
+ */
+export function useToast(): ToastQueue {
+  const toasts = ref<ToastItem[]>([])
+
+  function dismiss(id: ToastItem['id']): void {
+    toasts.value = toasts.value.filter(t => t.id !== id)
+  }
+
+  function update(id: ToastItem['id'], patch: Partial<ToastItem>): void {
+    const item = toasts.value.find(t => t.id === id)
+    if (item)
+      Object.assign(item, patch)
+  }
+
+  function add(message: string, options: ToastInput = {}): ToastItem['id'] {
+    const { id = `t${++counter}`, duration, ...rest } = options
+    toasts.value.push({ id, message, ...rest })
+    if (duration != null && duration > 0)
+      setTimeout(dismiss, duration, id)
+    return id
+  }
+
+  const withType = (type: ToastType) => (message: string, options: ToastInput = {}) =>
+    add(message, { type, ...options })
+
+  return {
+    toasts,
+    add,
+    update,
+    dismiss,
+    clear: () => { toasts.value = [] },
+    success: withType('success'),
+    error: withType('error'),
+    info: withType('info'),
+    warning: withType('warning'),
+  }
+}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@antfu/design",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "A customizable, composable design system for devtools-style Vue apps — a UnoCSS preset, Vue primitives, a design skill, and an a11y contrast check",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/antfu/design#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antfu/design.git",
+    "directory": "packages/design"
+  },
+  "bugs": "https://github.com/antfu/design/issues",
+  "keywords": [
+    "unocss",
+    "unocss-preset",
+    "vue",
+    "design-system",
+    "components",
+    "devtools",
+    "antfu"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "./unocss": "./unocss/index.ts",
+    "./utils": "./utils/index.ts",
+    "./composables/*": "./composables/*",
+    "./a11y": "./a11y/index.ts",
+    "./styles.css": "./styles/index.css",
+    "./styles/*": "./styles/*",
+    "./components/*": "./components/*",
+    "./splitpanes.d.ts": "./splitpanes.d.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "a11y",
+    "components",
+    "composables",
+    "skills",
+    "splitpanes.d.ts",
+    "styles",
+    "unocss",
+    "utils"
+  ],
+  "peerDependencies": {
+    "@axe-core/playwright": "^4.0.0",
+    "playwright": "^1.0.0",
+    "unocss": ">=66.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@axe-core/playwright": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@antfu/utils": "^9.3.0",
+    "@iconify-json/catppuccin": "^1.2.17",
+    "@tanstack/vue-virtual": "^3.13.29",
+    "@unocss/core": "^66.7.2",
+    "@vueuse/core": "^14.3.0",
+    "colorjs.io": "^0.6.1",
+    "floating-vue": "^5.2.2",
+    "reka-ui": "^2.10.0",
+    "splitpanes": "^4.1.2"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@axe-core/playwright": "^4.12.1",
+    "@storybook/vue3-vite": "^10.4.6",
+    "@unocss/preset-icons": "^66.7.2",
+    "@unocss/preset-mini": "^66.7.2",
+    "@unocss/preset-web-fonts": "^66.7.2",
+    "@unocss/preset-wind3": "^66.7.2",
+    "@unocss/preset-wind4": "^66.7.2",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
+    "happy-dom": "^20.10.6",
+    "playwright": "^1.61.1",
+    "tsdown": "^0.22.0",
+    "tsdown-stale-guard": "^0.1.2",
+    "tsnapi": "^0.3.3",
+    "unocss": "^66.7.2",
+    "unplugin-vue": "^7.2.0",
+    "vue": "^3.5.38",
+    "vue-tsc": "^3.3.5"
+  },
+  "scripts": {
+    "docs:gen": "tsx scripts/gen-tokens.ts",
+    "lint": "eslint",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/skills/antfu-design/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: antfu-design
+description: Use when building or restyling devtools-style Vue 3 UIs with @antfu/design — wiring the composable UnoCSS preset, using the semantic token vocabulary (bg-base, color-base, badge-color-*, color-scale-*), choosing prefixed primitives (DisplayBadge, ActionButton, DisplayFilePath, OverlayModal, …), and keeping light/dark contrast and the "anti-slop" rules. Reach for it whenever generating or reviewing UI in a project that depends on @antfu/design.
+metadata:
+  author: antfu
+  version: 2026.06.26
+---
+
+# Doing good design with `@antfu/design`
+
+`@antfu/design` is a shared design layer for devtools-style Vue apps: a
+**composable UnoCSS preset** (`presetAnthonyDesign`), a set of **token-driven Vue
+primitives**, and a **color-contrast a11y check**. This skill is how to use it
+*well* — the vocabulary, the defaults, and the taste.
+
+## The three rules that matter most
+
+1. **Own the tokens, not the colors.** Never hard-code a hex or a raw Tailwind
+   color in app UI. Reach for the semantic layer first: `bg-base`, `color-base`,
+   `color-muted`, `border-base`, `op-fade`, `btn-action`, `badge`. They are
+   defined once (in the preset) and adapt to light/dark automatically. See
+   [references/core-tokens.md](references/core-tokens.md).
+
+2. **Light/dark parity is not optional.** Every surface and text token has a dark
+   variant baked in. If you write a one-off color, you have just created a
+   dark-mode bug. The standing contrast scan (`@antfu/design/a11y`) will catch the
+   worst of it — don't rely on it as a substitute for using the tokens.
+
+3. **No slop.** Technical values are `font-mono tabular-nums`. No em-dash–laden
+   prose in UI copy (the **dash ban**). Prefer one obvious affordance over three
+   competing ones. See [references/best-practices.md](references/best-practices.md).
+
+## When to reach for what
+
+- Showing a count, size, duration, or date → a **display component**
+  (`DisplayNumber`, `DisplayBytes`, `DisplayDuration`, `DisplayDate`), not raw text.
+- A status, type, or tag → `DisplayBadge` (hash- or palette-colored) or `DisplayLabel`.
+- A file/module path → `DisplayFilePath` (truncates, dims directories, links).
+- An overlay → `OverlayModal` / `OverlayDrawer` (reka-ui), a popover → `OverlayTooltip` / `OverlayDropdown`.
+- A severity (fresh→stale, fast→slow, small→large) → the `color-scale-*` ramp via
+  the display components' `colorize` prop, never ad-hoc red/green.
+
+Components are categorized and prefixed by category (`Display*`, `Form*`,
+`Overlay*`, `Layout*`, `Action*`, `Feedback*`). Dark mode is the app's to own —
+the package ships no `isDark`/`toggleDark`; components that vary by scheme take a
+`colorScheme: 'light' | 'dark'` prop, and `ActionDarkToggle` is controlled.
+
+Full catalog: [references/core-components.md](references/core-components.md).
+
+## Setup
+
+It's a **single preset, not self-contained** — it bundles no base preset,
+icons, fonts, or reset. You add those. See
+[references/core-setup.md](references/core-setup.md) for wiring the preset,
+importing styles, and pointing UnoCSS at the package so the components' classes
+get generated.
+
+## References
+
+- [core-setup.md](references/core-setup.md) — install + wire the preset, import styles.
+- [core-tokens.md](references/core-tokens.md) — the canonical token table (generated from the preset).
+- [core-components.md](references/core-components.md) — the component catalog with import paths.
+- [best-practices.md](references/best-practices.md) — class-over-attributify, parity, mono values, the dash ban, the "three dials".
+- [features-data-presentation.md](references/features-data-presentation.md) — presenting numbers, sizes, durations, paths.
+- [advanced-patterns.md](references/advanced-patterns.md) — composition patterns and a redesign protocol.

package/skills/antfu-design/references/advanced-patterns.md

@@ -0,0 +1,39 @@
+# Advanced patterns
+
+## Composition over configuration
+
+The primitives are deliberately thin so you compose them into app-local
+patterns rather than reaching for a mega-component:
+
+- **Stat row** — a label + a mono value + an optional `DisplayBadge`:
+  `color-muted` label, `DisplayNumber`/`DisplayBytes` value.
+- **Toolbar** — a glass sticky bar (`bg-glass z-nav`) with a `FormSearchField` and
+  `ActionIconButton`s.
+- **Panel** — `LayoutCard` + `LayoutSectionBlock`s; `FeedbackEmptyState` when there's nothing.
+- **Detail list** — `LayoutVirtualList` of rows, each a `DisplayFilePath`/`DisplayPackageName` +
+  display badges, colorized by one severity dimension.
+
+When such a composition recurs across screens, lift it into a local component —
+not into the design system (the system stays primitive-focused).
+
+## Overriding a primitive
+
+Because components are thin and token-driven, overriding is usually a prop or a
+token, not a fork. When you genuinely need to fork one, copy the single readable
+file from `@antfu/design/components/<Name>.vue` — that subpath exists for exactly
+this. Keep using the same tokens so it stays on-theme.
+
+## Redesign protocol
+
+When restyling an existing screen onto `@antfu/design`:
+
+1. **Map colors to tokens first.** Replace every raw color with a semantic token
+   (`bg-base`, `color-muted`, `border-base`, `color-scale-*`). Resist new colors.
+2. **Swap raw elements for primitives** one family at a time (badges, then
+   buttons, then inputs…), checking the visual diff after each.
+3. **Run the contrast scan** (`@antfu/design/a11y`, or `tsx …/a11y/cli.ts <url>`) in light *and* dark.
+4. **Tune the three dials** (density, hierarchy, affordance) — see best-practices.
+
+The goal of a migration is near-zero visual diff: you are unifying what exists,
+not redesigning it. Per-project theme config (primary color, fonts, base) is
+expected, not a regression.

package/skills/antfu-design/references/best-practices.md

@@ -0,0 +1,54 @@
+# Best practices
+
+Preserved from the original antfu design philosophy, reframed around the package.
+
+## Class over attributify
+
+Write utilities as **classes**, not attributes. Classes are greppable, sort
+cleanly (the UnoCSS ESLint plugin orders them), and read consistently.
+
+```vue
+<!-- good -->
+<div class="flex items-center gap-2 color-muted">
+<!-- avoid -->
+<div flex items-center gap-2 color-muted>
+```
+
+## Light/dark parity
+
+Never write a one-off color. Every surface/text/border has a token with a dark
+variant baked in (`bg-base`, `color-base`, `border-base`, …). A raw `bg-white`
+or `text-gray-800` is a dark-mode bug waiting to happen. When you truly need a
+custom color, define it through the theme (a `primary`/`warning`/… ramp) so both
+modes are covered.
+
+## Mono + tabular for technical values
+
+Numbers, sizes, durations, versions, hashes, paths → `font-mono tabular-nums`
+so columns align and digits don't jitter. Prefer the display components
+(`DisplayNumber`, `DisplayBytes`, `DisplayDuration`, `DisplayVersion`) which already do
+this.
+
+## Anti-slop: the dash ban
+
+No em-dash–driven prose in UI copy or generated text. Keep microcopy short and
+declarative. Don't pad labels ("Click here to view the…") — name the thing.
+
+## The three dials
+
+When reviewing a screen, tune in this order:
+
+1. **Density** — how much breathing room (`gap`, `p`, line-height). Devtools UIs
+   skew dense; be deliberate, not cramped.
+2. **Hierarchy** — `color-base` vs `color-muted` vs `color-faint`, weight, size.
+   Most text is muted; reserve `color-base` for what matters and `color-active`
+   for the one accent.
+3. **Affordance** — one obvious action per context. Prefer a single
+   `btn-primary` over three competing buttons. Severity via `color-scale-*`, not
+   ad-hoc red/green.
+
+## Severity, not vibes
+
+Fresh→stale, fast→slow, small→large all map to the same five-stop ramp
+(`color-scale-neutral|low|medium|high|critical`). Use the `colorize` prop on the
+display components instead of hand-picking colors per case.

package/skills/antfu-design/references/core-components.md

@@ -0,0 +1,72 @@
+# Component catalog
+
+All from `@antfu/design`, explicit imports, token-driven, dark-aware. Components
+are grouped into categories and **prefixed with their category** (e.g.
+`DisplayBadge`, `FormTextInput`, `OverlayModal`) — the import path mirrors this
+(`@antfu/design/components/Display/DisplayBadge.vue`). Overlay behavior comes
+from reka-ui; tooltips/poppers from floating-vue; resizable panes from
+splitpanes — all themed through the shipped CSS overrides.
+
+> **Dark mode is the app's to own.** The package does not ship `isDark`/`toggleDark`.
+> Components that vary by scheme (e.g. hash-colored `DisplayBadge`, `DisplayLabel`,
+> `DisplayPackageName`, `DisplayProportionBar`) take a `colorScheme: 'light' | 'dark'`
+> prop. `ActionDarkToggle` is **controlled**: `colorScheme` prop + `update:colorScheme`.
+
+## Action
+
+| Component | Use it for |
+|---|---|
+| `ActionButton` | actions. `variant` action/primary/text, polymorphic `href`/`as`, `icon`, `loading`. |
+| `ActionIconButton` | a round icon-only button with a `tooltip`, `active` state, `#badge`. |
+| `ActionDarkToggle` | controlled dark toggle (`v-model:colorScheme`) with a view-transition reveal. |
+
+## Display
+
+| Component | Use it for |
+|---|---|
+| `DisplayBadge` | a status/type/tag chip — hash-colored from text, a palette name (`color="green"`), a hue, or muted. `colorScheme`, `variant`, `size`, `icon`. |
+| `DisplayNumber` / `DisplayNumberBadge` | formatted numbers (`Intl`), mono + tabular, `prefix`/`suffix`. |
+| `DisplayDuration` | ms → human, `colorize` by severity. |
+| `DisplayBytes` | humanized size, `colorize`, percent of `total`. |
+| `DisplayDate` | relative time + exact-date tooltip, `colorize` by age, `live`. |
+| `DisplayVersion` | `vX.Y.Z` prefix logic. |
+| `DisplayPackageName` | scope colored by hash (`colorScheme`). |
+| `DisplayFilePath` | truncates, dims directories, decodes `.pnpm`, icon, link. |
+| `DisplayFileIcon` | ext → icon via a configurable rule list. |
+| `DisplayLabel` | hex → contrast-aware tinted chip (`colorScheme`). |
+| `DisplayStatusPill` | severity dot + label, `pulse`. |
+| `DisplayDonut` / `DisplayProportionBar` | progress ring / stacked proportion bar. |
+| `DisplayKbd` | renders `mod+k` as platform glyphs. |
+
+## Form
+
+`FormTextInput`, `FormSearchField` (icon + `DisplayKbd` hint + clear),
+`FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormSelect`.
+
+## Overlay
+
+`OverlayModal`, `OverlayDrawer`, `OverlayDropdown` (+ `OverlayDropdownItem`),
+`OverlayTooltip`.
+
+## Layout
+
+`LayoutCard`, `LayoutSectionBlock` (collapsible), `LayoutSplitPane` (+ `Pane`),
+`LayoutTabs` (underline/segment, `count` chips), `LayoutVirtualList`
+(`@tanstack/vue-virtual`), `LayoutExpandableList` ("show N more").
+
+## Feedback
+
+`FeedbackSpinner`, `FeedbackLoading`, `FeedbackEmptyState`, `FeedbackTip`
+(info/success/warning/error), `FeedbackToastProvider` (+ `useNotification()`).
+
+## Composables & utils
+
+- `@antfu/design/composables` — `useInputFocus`, `provideNotification` / `useNotification`.
+  (Dark mode, clipboard and persisted state are **not** wrapped — use the app's own
+  state and VueUse `useClipboard` / `useLocalStorage` directly.)
+- `@antfu/design/utils` — `getHashColorFromString`, `getPluginColor`, `labelStyle`
+  (all take an explicit dark flag), `formatBytes`/`formatDuration`/`formatTimeAgo`
+  (+ severity colors), `parseReadablePath`, `parseSemverRange`, `toTree`,
+  `parseChord`/`bindingDisplay`, WCAG `contrastRatio`.
+
+> Out this iteration: `CodeBlock` / `DiffView` and the command palette (deferred).

package/skills/antfu-design/references/core-setup.md

@@ -0,0 +1,56 @@
+# Setup
+
+Install the package and a UnoCSS base. It's a **single preset, not
+self-contained** — it bundles no base preset, icons, fonts, or reset.
+
+```bash
+pnpm add @antfu/design unocss
+```
+
+## Wiring the preset
+
+```ts
+// uno.config.ts
+import { presetAnthonyDesign } from '@antfu/design/unocss'
+import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAnthonyDesign({
+      primary: '#49833E', // string | full color-scale object (default antfu green)
+      darkBackground: '#111', // near-black for dark surfaces
+    }),
+    presetWind4(), // a base preset is REQUIRED — shortcuts expand into its utilities
+    presetIcons(),
+    presetWebFonts({ fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
+  ],
+  // Generate the components' classes by scanning the installed package:
+  content: { pipeline: { include: [/@antfu\/design/] } },
+})
+```
+
+> The base preset is **yours** to choose (`presetWind4`, `presetWind3` or
+> `presetMini`). Without one, the semantic shortcuts have nothing to expand into.
+> The design layer is **one preset** — there are no sub-presets to compose.
+
+## Styles
+
+```ts
+import '@antfu/design/styles.css' // everything
+// …or cherry-pick:
+import '@antfu/design/styles/floating-vue.css'
+```
+
+Add a reset yourself (`@unocss/reset`) — the design system does not bundle one.
+
+## Components
+
+Imported by **full path** (no barrel), categorized and category-prefixed:
+
+```ts
+import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
+```
+
+The package ships raw `.ts` / `.vue` — your build compiles it. No auto-import resolver.

package/skills/antfu-design/references/core-tokens.md

@@ -0,0 +1,100 @@
+# Token reference
+
+This is the **canonical token vocabulary** — the contract between the preset,
+the components, and your app code. Use these names verbatim; do not hand-roll
+equivalents.
+
+The table below is **generated from the preset** (`pnpm docs:gen`), so it can
+never drift from what the shortcuts actually resolve to.
+
+<!-- TOKENS:START -->
+### Semantic & composite shortcuts
+
+| Token | Expands to |
+|---|---|
+| `color-base` | `color-neutral-800 dark:color-neutral-200` |
+| `color-muted` | `color-neutral-600 dark:color-neutral-400` |
+| `color-faint` | `color-neutral-500 dark:color-neutral-500` |
+| `color-active` | `color-primary-600 dark:color-primary-300` |
+| `bg-base` | `bg-white dark:bg-#111` |
+| `bg-secondary` | `bg-#f5f5f5 dark:bg-#1a1a1a` |
+| `bg-active` | `bg-#8881` |
+| `bg-hover` | `bg-primary/5` |
+| `bg-code` | `bg-gray-500/5` |
+| `bg-tooltip` | `bg-white/75 dark:bg-#111/75 backdrop-blur-8` |
+| `bg-gradient-more` | `bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-#111 dark:via-#111/80 dark:to-#111/0` |
+| `border-base` | `border-#8882` |
+| `border-mute` | `border-#8881` |
+| `border-active` | `border-primary-600/25 dark:border-primary-400/25` |
+| `ring-base` | `ring-#8882` |
+| `op-fade` | `op65 dark:op55` |
+| `op-mute` | `op30 dark:op25` |
+| `btn-action` | `border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active transition disabled:pointer-events-none disabled:op30! outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-action-sm` | `btn-action text-sm` |
+| `btn-action-active` | `color-active border-active! bg-active op100!` |
+| `btn-icon` | `w-9 h-9 rounded-full op-fade hover:op100 hover:bg-active transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-icon-compact` | `w-6 h-6 rounded op-fade hover:op100 hover:bg-active transition flex items-center justify-center disabled:pointer-events-none disabled:op30 outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `btn-primary` | `px3 py1.5 rounded flex gap-2 items-center bg-primary-500 hover:bg-primary-600 text-white transition disabled:op50 disabled:pointer-events-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40` |
+| `badge` | `inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-xs font-medium leading-none` |
+| `badge-active` | `badge bg-active color-active` |
+| `badge-muted` | `badge bg-#8881 color-muted` |
+
+### Severity scale
+
+| Token | Expands to |
+|---|---|
+| `color-scale-neutral` | `text-gray-700 dark:text-gray-300` |
+| `color-scale-low` | `text-lime-700 dark:text-lime-300 dark:saturate-75` |
+| `color-scale-medium` | `text-amber-700 dark:text-amber-300 dark:saturate-90` |
+| `color-scale-high` | `text-orange-700 dark:text-orange-300` |
+| `color-scale-critical` | `text-red-700 dark:text-red-300` |
+
+### Type sizes
+
+| Token | Expands to |
+|---|---|
+| `text-micro` | `text-[10px] leading-[1.4]` |
+| `text-mini` | `text-[11px] leading-[1.45]` |
+| `text-compact` | `text-[12px] leading-[1.5]` |
+
+### Named z-index layers
+
+| Token | Expands to |
+|---|---|
+| `z-nav` | `z-[30]` |
+| `z-dropdown` | `z-[40]` |
+| `z-tooltip` | `z-[45]` |
+| `z-toast` | `z-[50]` |
+| `z-modal-backdrop` | `z-[60]` |
+| `z-modal-content` | `z-[70]` |
+| `z-drawer-backdrop` | `z-[80]` |
+| `z-drawer-content` | `z-[90]` |
+
+### Dynamic
+
+| Token | Expands to |
+|---|---|
+| `badge-color-<name>` | a chip tinted by any palette color name (dark-aware) |
+| `bg-glass` / `bg-glass:<n>` | translucent surface + `backdrop-blur` |
+| `bg-dots` / `bg-dots-<n>` | radial dot-grid background, variable cell size in px (default 16) |
+| `bg-grid` / `bg-grid-<n>` | crosshatch grid-lines background, variable cell size in px (default 16) |
+<!-- TOKENS:END -->
+
+## How to read it
+
+- **Semantic shortcuts** (`bg-base`, `color-muted`, `border-base`, `op-fade`, …)
+  are the everyday vocabulary. They expand to the listed utilities and carry a
+  dark variant.
+- **Composite shortcuts** (`btn-action`, `btn-primary`, `badge`) expand to a full
+  recipe — use them as-is.
+- **Dynamic** `badge-color-<name>` tints a chip by any palette color name; `bg-glass`
+  / `bg-glass:<n>` makes a translucent blurred surface.
+- **Severity** `color-scale-{neutral,low,medium,high,critical}` is the one ramp
+  for fresh→stale / fast→slow / small→large. Prefer the `colorize` prop on display
+  components over using these directly.
+- **Named z-index layers** (`z-nav` < `z-dropdown` < `z-tooltip` < `z-toast` <
+  `z-modal-backdrop` < `z-modal-content` < `z-drawer-backdrop` < `z-drawer-content`)
+  — never raw `z-<n>`.
+- **Theme**: `font-sans` = DM Sans, `font-mono` = DM Mono; extra sizes
+  `text-micro` / `text-mini` / `text-compact`; color ramps `primary` (default
+  antfu green), `warning`, `success`, `error`.

package/skills/antfu-design/references/features-data-presentation.md

@@ -0,0 +1,27 @@
+# Presenting data
+
+Devtools UIs are mostly *data*. Reach for a display component before raw text —
+they encode the formatting + severity decisions consistently.
+
+| You have… | Use | Notes |
+|---|---|---|
+| a count / quantity | `DisplayNumber` / `DisplayNumberBadge` | `Intl` formatting, mono + tabular, prefix/suffix |
+| a byte size | `DisplayBytes` | `base` 1024/1000, `colorize`, percent of `total` |
+| an elapsed time | `DisplayDuration` | ms → human, `colorize` (fast=neutral … slow=critical) |
+| a timestamp | `DisplayDate` | relative + exact tooltip, `colorize` by age, `live` |
+| a module / file path | `DisplayFilePath` | truncates, dims directories, decodes `.pnpm` → `~`, icon |
+| a package name | `DisplayPackageName` | scope colored by hash |
+| a version | `DisplayVersion` | `vX.Y.Z` prefix logic |
+| a proportion | `DisplayProportionBar` / `DisplayDonut` | stacked % bar / progress ring |
+| a status / health | `DisplayStatusPill` | severity dot + label, `pulse` |
+| a long list | `LayoutVirtualList` / `LayoutExpandableList` | virtualize, or "show N more" with a fade |
+
+## Rules of thumb
+
+- **Colorize by meaning, once.** Turn on `colorize` for the one dimension that
+  carries signal (e.g. staleness in a list of dates); don't rainbow everything.
+- **Right-align numeric columns** and keep them `tabular-nums` so they scan.
+- **Truncate paths, never wrap them.** `DisplayFilePath` keeps the basename legible and
+  exposes the full path on hover.
+- **Hash colors for identity, palette colors for category.** A package name gets
+  a stable hash color; a known type (esm/cjs) gets a fixed `badge-color-*`.

package/splitpanes.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Opt-in fallback types for `splitpanes` — for consumers whose installed
+ * `splitpanes` predates bundled TypeScript types (v4.1.2+ ships its own, so you
+ * usually don't need this).
+ *
+ * It is deliberately NOT part of this package's own `tsconfig` (which would
+ * duplicate-declare against the real types). Consumers on an older splitpanes
+ * can opt in by adding to a `.d.ts` in their project:
+ *
+ * ```ts
+ * /// <reference types="@antfu/design/splitpanes.d.ts" />
+ * ```
+ */
+declare module 'splitpanes' {
+  import type { DefineComponent } from 'vue'
+
+  export interface PaneData {
+    min: number
+    max: number
+    size: number
+  }
+
+  export interface Pane {
+    id: number
+    el: HTMLElement | null
+    min: number
+    max: number
+    givenSize: number | null
+    size: number
+    index: number
+  }
+
+  export interface SplitpanesReadyPayload {
+    panes: PaneData[]
+  }
+
+  export interface SplitpanesResizePayload {
+    event: MouseEvent | TouchEvent
+    index: number
+    prevPane: Pane | undefined
+    nextPane: Pane | undefined
+    panes: PaneData[]
+  }
+
+  /** `resized` fires on splitter drag-end AND after pane add/remove (latter omit event/index). */
+  export interface SplitpanesResizedPayload {
+    event?: MouseEvent | TouchEvent
+    index?: number
+    prevPane?: Pane
+    nextPane?: Pane
+    panes: PaneData[]
+  }
+
+  export interface SplitpanesProps {
+    horizontal?: boolean
+    pushOtherPanes?: boolean
+    maximizePanes?: boolean
+    rtl?: boolean
+    firstSplitter?: boolean
+  }
+
+  export interface PaneProps {
+    size?: number | string
+    minSize?: number | string
+    maxSize?: number | string
+  }
+
+  export const Splitpanes: DefineComponent<SplitpanesProps>
+  export const Pane: DefineComponent<PaneProps>
+}