@mieweb/ui 0.11.0-dev.17 → 0.11.0-dev.19

package/agent/skills/mieweb-ui-icons/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: mieweb-ui-icons
+description: Icon usage for the @mieweb/ui design system — the lucide-react policy, the *Icon aliases re-exported from @mieweb/ui, sizing conventions, and icon accessibility. USE WHEN adding or replacing an icon, checking which icon alias exists, or reviewing hand-rolled SVGs / foreign icon libraries.
+---
+
+<!-- GENERATED by scripts/build-agent-skills.mjs — do not edit by hand. Regenerate with `pnpm agent:skills`. -->
+
+# @mieweb/ui icons
+
+**Every icon comes from `lucide-react`** (Rule 17 of the installed `mieweb-ui.instructions.md`). Never hand-roll an `<svg>` icon or add another icon library — `@fortawesome/*` is ESLint-blocked in the library itself.
+
+Two ways to import:
+
+```tsx
+// 1. Convenience aliases re-exported from @mieweb/ui (188 icons, listed below)
+import { SearchIcon, TrashIcon } from '@mieweb/ui';
+
+// 2. The full Lucide set, directly — for anything not aliased
+import { Stethoscope, Syringe } from 'lucide-react';
+```
+
+## Conventions
+
+- **Sizing:** `className="h-4 w-4"` (16px) is the default inline size; `h-5 w-5` for emphasis; `h-3.5 w-3.5` in dense UI. Lucide's `size={16}` prop is equivalent.
+- **Accessibility:** icon-only controls need `aria-label`; decorative icons get `aria-hidden="true"`. A `Tooltip` is a description, not a name.
+- **Dynamic icons:** type icon props as `LucideIcon` and spread `LucideProps` — both re-exported from `@mieweb/ui`.
+- Aliases where the Lucide name differs are shown as `Alias` (`LucideName`); import the alias from `@mieweb/ui` or the Lucide name from `lucide-react`. ⚠ marks aliases shadowed at the root — see below.
+
+## Aliased icons by category
+
+- **Navigation & UI:** `HomeIcon`, `MenuIcon`, `CloseIcon` (`X`) ⚠, `ChevronDownIcon`, `ChevronUpIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `ArrowLeftIcon`, `ArrowRightIcon`, `ExternalLinkIcon`, `MoreHorizontalIcon`, `MoreVerticalIcon`
+- **User & Account:** `UserIcon`, `UsersIcon`, `UserPlusIcon`, `UserMinusIcon`, `UserCheckIcon`, `CircleUserIcon`, `LogInIcon`, `LogOutIcon`
+- **Actions:** `PlusIcon`, `MinusIcon`, `PencilIcon`, `TrashIcon` (`Trash2`), `CopyIcon`, `CheckIcon`, `XIcon`, `SearchIcon`, `FilterIcon`, `DownloadIcon`, `UploadIcon`, `ShareIcon`, `SaveIcon`, `RefreshIcon` (`RefreshCw`) ⚠, `ThumbsUpIcon`, `ThumbsDownIcon`, `BanIcon`, `ArrowUpIcon`, `ArrowUpDownIcon`, `GripVerticalIcon`, `StickyNoteIcon`
+- **Status & Feedback:** `AlertCircleIcon`, `AlertTriangleIcon`, `CheckCircleIcon`, `XCircleIcon`, `InfoIcon`, `HelpCircleIcon`, `LoaderIcon` (`Loader2`)
+- **Communication:** `BellIcon`, `BellOffIcon`, `BotIcon`, `MailIcon`, `MessageIcon` (`MessageSquare`), `MicIcon`, `PhoneIcon`, `SendIcon` ⚠, `StopIcon` (`Square`)
+- **Media & Files:** `FileIcon`, `FileTextIcon`, `FolderIcon`, `FolderOpenIcon`, `ImageIcon`, `CameraIcon`, `PaperclipIcon`, `PrinterIcon`
+- **Data & Charts:** `ActivityIcon`, `ChartIcon` (`BarChart3`), `TrendingUpIcon`, `TrendingDownIcon`, `PieChartIcon`
+- **Settings & Tools:** `SettingsIcon`, `SlidersIcon`, `WrenchIcon`, `CogIcon`
+- **Time & Calendar:** `CalendarIcon`, `CalendarCheckIcon`, `ClockIcon`, `TimerIcon`, `HistoryIcon`
+- **Layout & View:** `EyeIcon`, `GridIcon` (`LayoutGrid`), `ListIcon`, `TableIcon`, `ColumnsIcon`, `MaximizeIcon`, `MinimizeIcon`, `EyeOffIcon`
+- **Theme:** `SunIcon`, `MoonIcon`, `MonitorIcon`, `PaletteIcon`
+- **Security:** `ShieldIcon`, `ShieldCheckIcon`, `LockIcon`, `UnlockIcon`, `KeyIcon`
+- **Healthcare & Medical:** `AmbulanceIcon`, `BandageIcon`, `BoneIcon`, `BrainIcon`, `BriefcaseMedicalIcon`, `DnaIcon`, `EarIcon`, `FingerprintIcon`, `HeartPulseIcon`, `HospitalIcon`, `MicroscopeIcon`, `PillIcon`, `StethoscopeIcon`, `SyringeIcon`, `TestTubeIcon` (`TestTube2`), `TestTubesIcon`, `ThermometerIcon`, `ThermometerSunIcon`, `BabyIcon`, `AccessibilityIcon`, `BedIcon`, `BedDoubleIcon`, `BedSingleIcon`, `PatientIcon` (`CircleUserRound`), `PersonIcon` (`UserRound`), `UserRoundCheckIcon`, `UserRoundPlusIcon`, `UserRoundMinusIcon`, `UserRoundXIcon`, `CrossIcon`, `FlaskIcon` (`FlaskConical`), `FlaskRoundIcon`, `DropletIcon`, `DropletsIcon`, `ScanIcon`, `ScanLineIcon`, `ScanEyeIcon`, `RadiationIcon`, `BiohazardIcon`, `CigaretteIcon`, `CigaretteOffIcon`, `CannabisIcon`, `WeightIcon`, `ScaleIcon`, `RulerIcon`, `FootprintsIcon`, `HandIcon`, `HandMetalIcon`, `GlassesIcon`, `ScalingIcon`, `TabletsIcon`, `AllergyIcon` (`Wheat`), `AllergyOffIcon` (`WheatOff`), `HeartOffIcon`, `ShieldPlusIcon`, `ClipboardPlusIcon`, `ClipboardCheckIcon`, `FileHeartIcon`, `FilePlusIcon`, `FilePlus2Icon`, `FileCheckIcon`, `FileCheck2Icon`, `NotebookPenIcon`, `BookOpenIcon`, `BookOpenCheckIcon`, `TruckIcon`, `SparkleIcon`, `BadgeCheckIcon`, `BadgeAlertIcon`, `BadgeXIcon`, `BadgePlusIcon`, `BadgeMinusIcon`, `CircleDotIcon`, `CircleDotDashedIcon`
+- **Misc:** `HeartIcon`, `StarIcon`, `BookmarkIcon`, `FlagIcon`, `TagIcon`, `HashIcon`, `AtSignIcon`, `LinkIcon`, `ClipboardIcon`, `ClipboardListIcon`, `MapPinIcon`, `GlobeIcon`, `BuildingIcon`, `BriefcaseIcon`, `CreditCardIcon`, `DollarSignIcon`, `ZapIcon`, `SparklesIcon` ⚠
+
+## ⚠ Root-barrel overrides — NOT Lucide
+
+- `CloseIcon` from `@mieweb/ui` is a **custom component** from `src/components/AI`, not the Lucide `X` — Lucide props like `size={16}` do not apply
+- `RefreshIcon` from `@mieweb/ui` is a **custom component** from `src/components/AI`, not the Lucide `RefreshCw` — Lucide props like `size={16}` do not apply
+- `SendIcon` from `@mieweb/ui` is a **custom component** from `src/components/AI`, not the Lucide `Send` — Lucide props like `size={16}` do not apply
+- `SparklesIcon` from `@mieweb/ui` is a **custom component** from `src/components/AI`, not the Lucide `Sparkles` — Lucide props like `size={16}` do not apply
+
+For the Lucide version, import the Lucide name from `lucide-react` (`X`, `RefreshCw`, `Send`, `Sparkles`) or the alias from `@mieweb/ui/components/Icons`.

package/agent/skills/mieweb-ui-tailwind4/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: mieweb-ui-tailwind4
+description: Installing and wiring @mieweb/ui in a consumer app — Tailwind 4 `@source` setup vs the Tailwind 3 preset, PostCSS config, dark-mode variant and CSS-variable fallbacks, peer dependencies per entry point, and connecting headless modules to a data layer. USE WHEN setting up @mieweb/ui, components render unstyled/broken, dark mode or brand CSS misbehaves after install, peer-dep errors appear, or a ViewSet/SuperChat-style module needs wiring to app data.
+---
+
+# Installing @mieweb/ui (Tailwind 4 era)
+
+Sourced from `lessons/tailwind4-integration.md`, `lessons/adopting-mieweb-ui.md`, and `lessons/wiring-headless-modules.md` in the mieweb/ui repo. Token tables live in the `mieweb-ui-tokens` skill; brand procedures in `mieweb-ui-brands`; entry points and their peer deps in `mieweb-ui-catalog`.
+
+## Install
+
+```bash
+npm install @mieweb/ui react react-dom
+npm install -D tailwindcss@4 @tailwindcss/postcss autoprefixer
+```
+
+`react` / `react-dom` (>=18) are the only **required** peers. Every other peer is **optional** and only needed when you import the entry that uses it (`/maps` → leaflet, `/globe` → react-globe.gl + three, `/kerebron` → @kerebron/\*, `/motion` → motion, `/q` → @mieweb/q, …) — see the catalog skill's entry-point table. A peer-dep warning for an entry you never import is noise, not a problem. Under pnpm's strict node_modules there is no hoisting: required peers must be in the app's own `package.json`; diagnose resolution with `pnpm why <pkg>`.
+
+## Tailwind 4 vs Tailwind 3 vs no Tailwind — pick the right mechanism
+
+| Consumer | Mechanism |
+| --- | --- |
+| Tailwind 4 (CSS-first) | `@source "../node_modules/@mieweb/ui/dist";` in the CSS entry — TW4 does **not** scan `node_modules` on its own |
+| Tailwind 3 (config-first) | `presets: [miewebUIPreset]` from `@mieweb/ui/tailwind-preset` + the exported `miewebUISafelist` + `node_modules/@mieweb/ui/dist/**/*.js` in `content` |
+| No Tailwind | `import '@mieweb/ui/styles.css'` (+ a brand CSS after it) — precompiled, fully supported; no Tailwind, PostCSS, or `@source` needed |
+
+In a Tailwind consumer, missing `@source` (TW4) or content/safelist coverage (TW3) means the library's utility classes are tree-shaken away: **black borders, missing backgrounds, broken layout** on every component. The `@source`/safelist/PostCSS checks below apply **only** when the consumer runs its own Tailwind pipeline — don't prescribe Tailwind tooling to a precompiled-CSS app.
+
+## CSS entry — quick start vs manual
+
+**Option A (quick start)** — three lines, all in **your own** CSS entry (the first two resolve relative to your file, so they cannot live inside the package):
+
+```css
+@import 'tailwindcss';
+@source "../node_modules/@mieweb/ui/dist"; /* path relative to THIS file */
+@import '@mieweb/ui/init.css'; /* dark variant + @theme fallbacks + default brand + base styles */
+```
+
+**Option B (manual, full control)** — every line matters, in this order:
+
+```css
+/* 1. Base stylesheet THEN brand (both plain/unlayered — see brands skill) */
+@import '@mieweb/ui/styles.css';
+@import '@mieweb/ui/brands/bluehive.css';
+
+/* 2. Tailwind */
+@import 'tailwindcss';
+
+/* 3. Scan the library output for class names */
+@source "../node_modules/@mieweb/ui/dist";
+
+/* 4. Dark variant (TW4 doesn't reliably honor tailwind.config darkMode) */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+/* 5. Map Tailwind color tokens to @mieweb/ui variables — WITH fallbacks */
+@theme {
+  --color-primary-500: var(--mieweb-primary-500);
+  --color-neutral-900: var(--mieweb-neutral-900, #171717);
+  /* … full block with fallback hex values: see init.css in the package */
+}
+```
+
+Primary needs no fallbacks (every brand defines it). **All other scales must carry hex fallbacks** — if the base stylesheet is missing, `var()` resolves to nothing and `dark:bg-neutral-900` renders transparent. This is the single most time-expensive gotcha.
+
+## PostCSS
+
+```js
+// postcss.config.cjs
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {}, // Tailwind 4 plugin
+    autoprefixer: {},
+  },
+};
+```
+
+`tailwindcss: {}` is the Tailwind **3** plugin — with Tailwind 4 installed it silently fails or produces wrong output.
+
+## Dark mode toggle — match the configured variant
+
+The variant selector decides which hook works: `init.css` accepts **either** `.dark` or `data-theme="dark"`, while the manual Option B variant above is attribute-only. A single-hook toggle against `init.css` is valid — diagnose by comparing the toggle to the `@custom-variant` actually in effect, not by demanding both hooks. Setting both is the compatibility-safe recommendation for new code:
+
+```ts
+function applyTheme(t: 'light' | 'dark') {
+  document.documentElement.classList.toggle('dark', t === 'dark');
+  document.documentElement.setAttribute('data-theme', t);
+}
+```
+
+"Dark mode toggles but half the page stays light" usually means the toggle sets a hook the configured `@custom-variant` doesn't match. Brand switching at runtime uses the `brands` barrel loader — see the `mieweb-ui-brands` skill.
+
+## Wiring headless modules
+
+Modules never fetch, subscribe, navigate, or write — you supply a small adapter. The recipe below is the **collection-view contract** (`ViewSet` and friends). `SuperChatInbox` follows the same principles (host-owned state, promise-returning callbacks) but has its own props — `conversations`, `onMessageSent`, `onConversationOpened` — see the catalog skill and component docs; don't hand it collection-view props.
+
+1. **Fetch with your stack** (Meteor `useSubscribe`/`useTracker`, TanStack `useQuery`, …) and pass `items` / `loading` / `error` straight through.
+2. **Describe records once** via `accessors` (`getId`, `getTitle`, `getStatus`, …) — defined at module scope or memoized; they sit in `useMemo` deps.
+3. **Return the promise from `on*` callbacks** (`onMove={(id, s) => update(id, s)}`). The view shows pending state and reverts on rejection. TanStack: `mutateAsync`, not `mutate`; Meteor: `Meteor.callAsync`, don't catch-and-swallow.
+4. **Pass both `onOpen` and `getHref`** — `getHref` makes rows real anchors (⌘-click, copy link); `onOpen` intercepts plain clicks for client routing.
+
+Filters/selection/pagination state is yours (usually the URL); `ViewSet` owns only which view is showing. The `table` slot takes a DataVis NITRO grid — `ViewSet` has no table of its own.
+
+## Troubleshooting
+
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| Black/missing borders, unstyled components | TW4 tree-shaking (Tailwind consumers only) | Add the `@source` directive |
+| Dark mode toggle does nothing | Missing `@custom-variant dark`, or toggle sets a hook the variant doesn't match | Add the variant; align toggle with its selectors |
+| Dark toggles but surfaces stay light | Missing `var()` fallbacks / missing base stylesheet | Hex fallbacks in `@theme`; import `styles.css` or `init.css` |
+| Brand switch has no effect | Wrong import path | Barrel: `from '@mieweb/ui/brands'` |
+| Brand CSS loads but doesn't apply (TW4) | Brand import wrapped in `layer(theme)` | Keep base + brand imports plain/unlayered (brands skill) |
+| PostCSS does nothing | TW3 plugin configured | `@tailwindcss/postcss`, not `tailwindcss` |
+| `var()` renders transparent | Variable undefined | Fallback: `var(--token, #hex)` |
+| Peer-dep install errors | Required vs optional confusion | Only react/react-dom are required; match optional peers to imported entries |
+| Module shows failed action as success | `on*` promise swallowed | Return the real promise (`mutateAsync` / `callAsync`) |
+| Views regroup on every render | Unstable `accessors` | Module scope or `useMemo` |
+
+## Verification checklist
+
+- [ ] Tailwind consumer: `@source` (TW4) or preset + safelist + content (TW3) in place. No Tailwind: `styles.css` imported
+- [ ] `@custom-variant dark` defined (Tailwind consumers); toggle sets a hook the variant matches (both `.dark` and `data-theme` for maximum compatibility)
+- [ ] All non-primary `var()` mappings carry hex fallbacks (or `init.css` is used)
+- [ ] PostCSS uses `@tailwindcss/postcss`
+- [ ] Base stylesheet imported before brand CSS, both unlayered
+- [ ] Dark mode works with a non-default brand active
+- [ ] `npx tsc --noEmit` clean; no console errors on theme/brand switch

package/agent/skills/mieweb-ui-tokens/SKILL.md

@@ -0,0 +1,236 @@
+---
+name: mieweb-ui-tokens
+description: Design tokens for the @mieweb/ui design system — color scales, semantic colors, radius, typography, shadows, animations, and how CSS variables and dark mode work. USE WHEN auditing or writing styles, choosing a color/radius/shadow class, checking what a token resolves to, or fixing hardcoded colors.
+---
+
+<!-- GENERATED by scripts/build-agent-skills.mjs — do not edit by hand. Regenerate with `pnpm agent:skills`. -->
+
+# @mieweb/ui design tokens
+
+All tokens are CSS variables (`--mieweb-*`) with baked-in defaults, mapped to Tailwind classes by `@mieweb/ui/tailwind-preset`. Brands (`@mieweb/ui/brands/*.css`) override the variables; components never change. See the `mieweb-ui-brands` skill for brand switching and creating brands.
+
+**Rules that always apply** (from the installed `mieweb-ui.instructions.md`):
+
+- Never hardcode palette colors (`bg-blue-500`, `text-violet-600`, hex values, inline gradients). Use `primary-*`, `secondary-*`, `neutral-*` or a semantic token so brand switching keeps working.
+- Status styling uses the semantic scales (`success`, `warning`, `destructive`, `info`) — not raw `green`/`amber`/`red` utilities.
+- Radius comes from the mapped `rounded-sm|md|lg|xl|2xl` classes (brand tokens), never arbitrary values like `rounded-[20px]`. `rounded-full` is fine for circles/pills.
+
+**Dark mode:** `darkMode: ["class","[data-theme=\"dark\"]"]` — a `.dark` class or `[data-theme="dark"]` on an ancestor switches the semantic variables; components need no dark-specific code beyond `dark:` variants already in the library.
+
+**Tailwind setup:** TW4 consumers add `@source "../node_modules/@mieweb/ui/dist";` to their CSS; TW3 consumers use the exported `miewebUISafelist` (classes used by components that Tailwind can't detect in node_modules).
+
+## Color scales
+
+Use as `bg-<token>`, `text-<token>`, `border-<token>`, `ring-<token>`, etc.
+
+### `primary`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `primary-50` | `var(--mieweb-primary-50, #e6f7fc)` |
+| `primary-100` | `var(--mieweb-primary-100, #b3e6f6)` |
+| `primary-200` | `var(--mieweb-primary-200, #80d5f0)` |
+| `primary-300` | `var(--mieweb-primary-300, #4dc4ea)` |
+| `primary-400` | `var(--mieweb-primary-400, #27aae1)` |
+| `primary-500` | `var(--mieweb-primary-500, #27aae1)` |
+| `primary-600` | `var(--mieweb-primary-600, #1f98ca)` |
+| `primary-700` | `var(--mieweb-primary-700, #1786b3)` |
+| `primary-800` | `var(--mieweb-primary-800, #0f749c)` |
+| `primary-900` | `var(--mieweb-primary-900, #086285)` |
+| `primary-950` | `var(--mieweb-primary-950, #00506e)` |
+| `primary` | `var(--mieweb-primary, var(--mieweb-primary-500, #27aae1))` |
+| `primary-foreground` | `var(--mieweb-primary-foreground, hsl(210 40% 98%))` |
+
+### `ozwell`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `ozwell` | `var(--mieweb-ozwell, #0BA0E0)` |
+| `ozwell-foreground` | `var(--mieweb-ozwell-foreground, hsl(0 0% 100%))` |
+
+### `secondary`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `secondary-50` | `var(--mieweb-secondary-50, #eef2ff)` |
+| `secondary-100` | `var(--mieweb-secondary-100, #e0e7ff)` |
+| `secondary-200` | `var(--mieweb-secondary-200, #c7d2fe)` |
+| `secondary-300` | `var(--mieweb-secondary-300, #a5b4fc)` |
+| `secondary-400` | `var(--mieweb-secondary-400, #818cf8)` |
+| `secondary-500` | `var(--mieweb-secondary-500, #6366f1)` |
+| `secondary-600` | `var(--mieweb-secondary-600, #4f46e5)` |
+| `secondary-700` | `var(--mieweb-secondary-700, #4338ca)` |
+| `secondary-800` | `var(--mieweb-secondary-800, #3730a3)` |
+| `secondary-900` | `var(--mieweb-secondary-900, #312e81)` |
+| `secondary-950` | `var(--mieweb-secondary-950, #1e1b4b)` |
+| `secondary` | `var(--mieweb-secondary-500, #6366f1)` |
+| `secondary-foreground` | `var(--mieweb-secondary-foreground, #ffffff)` |
+
+### `neutral`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `neutral-50` | `var(--mieweb-neutral-50, #fafafa)` |
+| `neutral-100` | `var(--mieweb-neutral-100, #f5f5f5)` |
+| `neutral-200` | `var(--mieweb-neutral-200, #e5e5e5)` |
+| `neutral-300` | `var(--mieweb-neutral-300, #d4d4d4)` |
+| `neutral-400` | `var(--mieweb-neutral-400, #a3a3a3)` |
+| `neutral-500` | `var(--mieweb-neutral-500, #737373)` |
+| `neutral-600` | `var(--mieweb-neutral-600, #525252)` |
+| `neutral-700` | `var(--mieweb-neutral-700, #404040)` |
+| `neutral-800` | `var(--mieweb-neutral-800, #262626)` |
+| `neutral-900` | `var(--mieweb-neutral-900, #171717)` |
+| `neutral-950` | `var(--mieweb-neutral-950, #0a0a0a)` |
+| `neutral` | `var(--mieweb-neutral-500, #737373)` |
+
+### `card`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `card` | `var(--mieweb-card, hsl(0 0% 100%))` |
+| `card-foreground` | `var(--mieweb-card-foreground, hsl(222.2 84% 4.9%))` |
+
+### `muted`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `muted` | `var(--mieweb-muted, hsl(210 40% 96.1%))` |
+| `muted-foreground` | `var(--mieweb-muted-foreground, hsl(215.4 16.3% 46.9%))` |
+
+### `destructive`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `destructive-50` | `var(--mieweb-destructive-50, #fef2f2)` |
+| `destructive-100` | `var(--mieweb-destructive-100, #fee2e2)` |
+| `destructive-200` | `var(--mieweb-destructive-200, #fecaca)` |
+| `destructive-300` | `var(--mieweb-destructive-300, #fca5a5)` |
+| `destructive-400` | `var(--mieweb-destructive-400, #f87171)` |
+| `destructive-500` | `var(--mieweb-destructive-500, #dc2626)` |
+| `destructive-600` | `var(--mieweb-destructive-600, #dc2626)` |
+| `destructive-700` | `var(--mieweb-destructive-700, #b91c1c)` |
+| `destructive-800` | `var(--mieweb-destructive-800, #991b1b)` |
+| `destructive-900` | `var(--mieweb-destructive-900, #7f1d1d)` |
+| `destructive-950` | `var(--mieweb-destructive-950, #450a0a)` |
+| `destructive` | `var(--mieweb-destructive, var(--mieweb-destructive-500, #dc2626))` |
+| `destructive-foreground` | `var(--mieweb-destructive-foreground, hsl(210 40% 98%))` |
+
+### `success`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `success-50` | `var(--mieweb-success-50, #f0fdf4)` |
+| `success-100` | `var(--mieweb-success-100, #dcfce7)` |
+| `success-200` | `var(--mieweb-success-200, #bbf7d0)` |
+| `success-300` | `var(--mieweb-success-300, #86efac)` |
+| `success-400` | `var(--mieweb-success-400, #4ade80)` |
+| `success-500` | `var(--mieweb-success-500, #22c55e)` |
+| `success-600` | `var(--mieweb-success-600, #16a34a)` |
+| `success-700` | `var(--mieweb-success-700, #15803d)` |
+| `success-800` | `var(--mieweb-success-800, #166534)` |
+| `success-900` | `var(--mieweb-success-900, #14532d)` |
+| `success-950` | `var(--mieweb-success-950, #052e16)` |
+| `success` | `var(--mieweb-success-500, #22c55e)` |
+| `success-foreground` | `var(--mieweb-success-foreground, hsl(355.7 100% 97.3%))` |
+
+### `warning`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `warning-50` | `var(--mieweb-warning-50, #fffbeb)` |
+| `warning-100` | `var(--mieweb-warning-100, #fef3c7)` |
+| `warning-200` | `var(--mieweb-warning-200, #fde68a)` |
+| `warning-300` | `var(--mieweb-warning-300, #fcd34d)` |
+| `warning-400` | `var(--mieweb-warning-400, #fbbf24)` |
+| `warning-500` | `var(--mieweb-warning-500, #f59e0b)` |
+| `warning-600` | `var(--mieweb-warning-600, #d97706)` |
+| `warning-700` | `var(--mieweb-warning-700, #b45309)` |
+| `warning-800` | `var(--mieweb-warning-800, #92400e)` |
+| `warning-900` | `var(--mieweb-warning-900, #78350f)` |
+| `warning-950` | `var(--mieweb-warning-950, #451a03)` |
+| `warning` | `var(--mieweb-warning-500, #f59e0b)` |
+| `warning-foreground` | `var(--mieweb-warning-foreground, hsl(26 83.3% 14.1%))` |
+
+### `info`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `info-50` | `var(--mieweb-info-50, #f0f9ff)` |
+| `info-100` | `var(--mieweb-info-100, #e0f2fe)` |
+| `info-200` | `var(--mieweb-info-200, #bae6fd)` |
+| `info-300` | `var(--mieweb-info-300, #7dd3fc)` |
+| `info-400` | `var(--mieweb-info-400, #38bdf8)` |
+| `info-500` | `var(--mieweb-info-500, #0ea5e9)` |
+| `info-600` | `var(--mieweb-info-600, #0284c7)` |
+| `info-700` | `var(--mieweb-info-700, #0369a1)` |
+| `info-800` | `var(--mieweb-info-800, #075985)` |
+| `info-900` | `var(--mieweb-info-900, #0c4a6e)` |
+| `info-950` | `var(--mieweb-info-950, #082f49)` |
+| `info` | `var(--mieweb-info-500, #0ea5e9)` |
+| `info-foreground` | `var(--mieweb-info-foreground, #ffffff)` |
+
+### `chart`
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `chart-1` | `var(--mieweb-chart-1, #27aae1)` |
+| `chart-2` | `var(--mieweb-chart-2, #22c55e)` |
+| `chart-3` | `var(--mieweb-chart-3, #f59e0b)` |
+| `chart-4` | `var(--mieweb-chart-4, #ef4444)` |
+| `chart-5` | `var(--mieweb-chart-5, #6366f1)` |
+
+## Semantic single tokens
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `accent` | `var(--mieweb-accent, var(--mieweb-primary-400))` |
+| `border` | `var(--mieweb-border, hsl(214.3 31.8% 91.4%))` |
+| `input` | `var(--mieweb-input, hsl(214.3 31.8% 91.4%))` |
+| `ring` | `var(--mieweb-ring, hsl(221.2 83.2% 53.3%))` |
+| `background` | `var(--mieweb-background, hsl(0 0% 100%))` |
+| `foreground` | `var(--mieweb-foreground, hsl(222.2 84% 4.9%))` |
+
+## Typography
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `font-sans` | `var(--mieweb-font-sans, ui-sans-serif), system-ui, sans-serif` |
+
+## Border radius
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `rounded-2xl` | `var(--mieweb-radius-2xl, 1rem)` |
+| `rounded-lg` | `var(--mieweb-radius-lg, 0.75rem)` |
+| `rounded-md` | `var(--mieweb-radius-md, 0.5rem)` |
+| `rounded-sm` | `var(--mieweb-radius-sm, 0.25rem)` |
+| `rounded-xl` | `var(--mieweb-radius-xl, 1rem)` |
+
+## Shadows
+
+| Token | Value (CSS variable, default) |
+| --- | --- |
+| `shadow-card` | `var(--mieweb-shadow-card, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))` |
+
+## Animations
+
+| Class | Animation |
+| --- | --- |
+| `animate-fade-in` | `fade-in 150ms ease-out` |
+| `animate-fade-out` | `fade-out 150ms ease-in` |
+| `animate-slide-in-from-top` | `slide-in-from-top 150ms ease-out` |
+| `animate-slide-in-from-bottom` | `slide-in-from-bottom 150ms ease-out` |
+| `animate-slide-in-right` | `slide-in-right 300ms ease-out` |
+| `animate-slide-in-left` | `slide-in-left 300ms ease-out` |
+| `animate-loading-bar` | `loading-bar 1.5s ease infinite` |
+| `animate-loading-bar-rtl` | `loading-bar-rtl 1.5s ease infinite` |
+| `animate-shimmer` | `shimmer 2s linear infinite` |
+| `animate-shimmer-rtl` | `shimmer-rtl 2s linear infinite` |
+| `animate-scale-in` | `scale-in 150ms ease-out` |
+| `animate-ozwell-message-flare` | `ozwell-message-flare 1.8s ease-out` |
+
+RTL variants (`*-rtl`) exist because transform-based animations do not flip automatically in right-to-left layouts.
+
+## Line clamp
+
+Extends Tailwind's 1–6 scale with `line-clamp-7`, `line-clamp-8` (used by ClampedText).