@eocrm/design-system 0.6.24 → 0.8.0

package/docs/components/Calendar.md

@@ -71,7 +71,7 @@ const [view, setView] = useState<CalendarView>('month');
 - On a multi-day bar the band repeats on **every** segment, including ones that continue from a previous week. It marks the event's state, not its start.
 - Controlled cursor via `value` / `onChange`, or uncontrolled via `defaultValue`. Controlled view via `view` / `onViewChange`, or uncontrolled via `defaultView`.
 - Overlapping timed events in week/day views render as a Google-Calendar-style cascade: each lane is offset to the right by a small constant step but every block extends to the column's right edge, with later lanes overlaying earlier ones via `z-index`. Hovering or keyboard-focusing a block lifts it to full width on top of all neighbours. A horizontal "now" line marks the current time in today's column.
-- Locale-aware via `useLocale()`; override with `locale` prop. UI strings (`today`, `viewMonth`, etc.) come from the i18n provider (`useTranslation`) — override them with `<I18nProvider overrides={{ calendar: { today: '…' } }}>`. There is no `labels` prop. For Russian copy and dates: `<I18nProvider locale="ru"><Calendar locale="ru-RU" … /></I18nProvider>`.
+- Locale-aware via `useLocale()`; override with `locale` prop. UI strings (`today`, `viewMonth`, etc.) come from the i18n provider (`useTranslation`) — override them with `<I18nProvider overrides={{ calendar: { today: '…' } }}>`. There is no `labels` prop. For Russian copy and dates: `<I18nProvider locale="ru" messages={ru}><Calendar locale="ru-RU" … /></I18nProvider>`.
 - Read-mostly **by default**: `onDayClick` and `onEventClick` callbacks; opt into editing by wiring `onEventMove` / `onEventResize` (see _Drag to move and resize_ below). `onDayClick` fires across all views — month-cell click, "+N more" chip, keyboard activation (Enter/Space) on a focused cell, and (in week/day views) clicks on the empty hour-grid space of a day column. No built-in popover or modal — wire your own detail UI.
 - ARIA: month view is `role="grid" aria-readonly="true"`; arrow keys move focus, PageUp/PageDown navigates months, Enter/Space calls `onDayClick`. Week/day views are also `role="grid"` with `role="row"` + `role="columnheader"` headers and standard sequential tab order for event blocks — `aria-readonly="true"` there too, until a drag handler is wired (see below). Agenda view exposes the visible week as `role="list"` with each day group as a `role="listitem"` and the day label as an `<h3>` heading inside — screen readers announce the date grouping before reading each event row. **Known v3 gap:** in week/day views, `onDayClick` on empty hour-grid space is **mouse-only** (no keyboard equivalent). Consumers needing keyboard activation should drive their detail UI through the focusable event chips via `onEventClick`.
 

package/docs/components/Chart.md

@@ -86,7 +86,18 @@ import { Chart, DashboardWidget, ErrorState } from '@eocrm/design-system';
 - **Types.** `line` (trend), `bar` (grouped per bucket), `stacked-bar` (parts of a total), `area` (always stacked; overlapping areas hide each other).
 - **Smoothing.** Every line (comparisons and the `stacked-bar` total included) and `area` is drawn with a monotone curve: it passes through every value and never leaves the range of the two values it joins, so there is no dip before a step, no bump after it, no peak above a real maximum and no negative between counts. Peaks, troughs and flat runs ease in flat. Two-point runs are straight. Stacked areas are the exception: each layer stays within its own values, but where layers trade places the stacked top can rise slightly above the largest real total; the y axis grows to keep it inside the plot. Stacked areas smooth each series on its own and stack the curves, so a steady layer stays steady whatever its neighbours do, a series that is 0 has no thickness, and with non-negative data no layer turns inside out or crosses its neighbour. A `'total'` comparison equal to the stack stays close to its top but is smoothed on its own, so next to a spike or a series' zero it can drift up to about a tenth of the plot height (typically 2–4%). Markers and the tooltip sit on the real points; the data table has the exact values. Not configurable.
 - **Y axis** always includes 0, with rounded ticks formatted by `formatValue`. In `bar` and `line`, negative values grow down from 0; `stacked-bar` diverges around 0 (positives up, negatives down); `area` stacks without a diverging offset, so negatives accumulate.
-- **Colour** follows a series' position among non-comparison series: 1–8 get the 8 validated palette colours (light + dark). Keep the order stable so filtering never repaints survivors.
+- **Colour** follows a series' position among non-comparison series: 1–8 get the 8 slots of the Brand palette (`--chart-series-1`…`8`, light + dark). Slot order follows `data-accent` so slot 1 matches the accent:
+
+  | Accent                  | Slots 1–8                                             |
+  | ----------------------- | ----------------------------------------------------- |
+  | default (blue), `slate` | blue, red, teal, orange, magenta, gold, violet, green |
+  | `indigo`, `grape`       | violet, red, teal, orange, magenta, gold, blue, green |
+  | `berry`                 | magenta, orange, blue, red, teal, gold, violet, green |
+  | `ocean`, `tealpine`     | teal, red, blue, orange, magenta, gold, violet, green |
+  | `moss`                  | green, violet, magenta, orange, blue, gold, teal, red |
+
+  Every order is validated in normal vision and protan/deutan colour blindness: adjacent slots are distinct, and so is every pair among slots 1–3, so a chart with up to three series never relies on two close hues. **Exception:** under `moss`, green sits close to every warm hue for deutan viewers, so slots 1–3 separate less there; label series directly or keep moss charts to two series. Light gold sits under 3:1 on white, so it is held back to slot 6; the data table carries identity. Slot hues carry no meaning (red is not "bad"), so don't pick a series position to signal status. Keep the series order stable so filtering never repaints survivors.
+
 - **Comparison series** (`comparisonOf`): in `line` / `bar`, name the parent's key — it inherits the parent's colour, dashed (line) or outlined with a light fill (bar), sits after its parent in legend and tooltip, and hides with it. In `stacked-bar` / `area`, use `comparisonOf: 'total'` — a dashed neutral line of the previous period's total. Mismatches are ignored with a dev warning.
 - **Markers** (`markers`) are static annotations pinned to `categories`: `{ key, label?, at }` draws a dashed vertical line at the centre of one category; `{ key, label?, from, to }` shades whole buckets from `from` to `to` (inclusive, either order). Positions snap to buckets: there is no sub-bucket time. `tone: 'neutral'` (default) for events, `'subtle'` for recurring context such as weekends (one marker per weekend). Bands sit behind the grid and data, lines behind the data. Labels are drawn at the top of the plot when they fit (earlier markers win a collision; hidden when the chart is compact) and are always listed in the tooltip, the keyboard announcement and a "Markers" column of the data table. Unlabelled markers are decorative. A marker naming an unknown category is ignored with a dev warning. Building markers with `.map` inside an array literal widens `tone` to `string`: write `'subtle' as const`. Don't encode status with markers (no red "incident" tone): put the meaning in the label.
 - **Footnote** (`footnote`) is a short muted note in its own row under the plot, e.g. excluded currencies or why a comparison was dropped. It wraps (never truncates) and the plot shrinks to make room, so keep it to a line or two. It is also the plot's accessible description (after the key hint), and stays visible in the empty state, where it often explains why there is no data. Don't use it for errors (use `ErrorState`) or for legends.

package/docs/components/FunnelChart.md

@@ -69,8 +69,8 @@ const [active, setActive] = useState<FunnelStage | null>(null);
 
 - **Percent semantics.** The pill between two stages is the _step conversion_ (next value ÷ this value). The tooltip and data table add the _share of the first stage_. Both are computed by the component; pass raw counts.
 - **Heights** are relative to the largest value; stages are drawn top of funnel first, in the order given.
-- **Colour** is a one-hue ramp, because stages are ordered: the first stage is `--chart-series-1` at full strength, each later stage a lighter tint mixed toward `--funnel-chart-ramp-target` (the surface in light, 48% max; `--color-fg` in dark, 65% max, so later stages get paler and stay crisp on the dark surface; also `--funnel-chart-ramp-color`, `--funnel-chart-ramp-max-mix`). The lightest stage stays clearly visible against the surface in both themes. With 5+ stages adjacent tints get close; the labels, table and tooltip carry identity. To highlight a stage (e.g. Won in green), give it `color` (a palette slot 1–8); it then uses `--chart-series-N` at full strength. There is no stage limit.
-- **Hero first stage** (horizontal): the first stage's value (large) and label sit inside its band, and its footer cell stays empty. When the band is too short or narrow for that text, or the first stage has a `color` slot, the first stage falls back to the normal footer, so nothing is hidden. The hero text is `--funnel-chart-hero-fg` (the surface colour) set as WCAG large text, since it clears 3:1 but not 4.5:1 on `--chart-series-1`; recheck it if you override `--funnel-chart-ramp-color`. Later stages show the conversion pill in the band and value + label underneath, with dashed rules between footer columns.
+- **Colour** is a one-hue ramp, because stages are ordered: the first stage is `--chart-series-1` (the accent-matching Brand hue; see [Chart](Chart.md)) at full strength, each later stage a lighter tint mixed toward `--funnel-chart-ramp-target` (the surface in light, 38% max; `--color-fg` in dark, 65% max, so later stages get paler and stay crisp on the dark surface; also `--funnel-chart-ramp-color`, `--funnel-chart-ramp-max-mix`). The lightest stage stays clearly visible against the surface in both themes under every accent (a CI gate checks each accent). With 4+ stages (light) adjacent tints get close; the labels, table and tooltip carry identity. To highlight a stage (e.g. the stage a dashboard is about), give it `color` (a palette slot 1–8); it then uses `--chart-series-N` at full strength. Slot hues follow `data-accent` and carry no meaning (slot 2 is red under most accents), so choose the slot for contrast, not for meaning: slot 2 always contrasts with slot 1 (the ramp). Don't use a highlight to say "won" or "lost"; put that in the label. There is no stage limit.
+- **Hero first stage** (horizontal): the first stage's value (large) and label sit inside its band, and its footer cell stays empty. When the band is too short or narrow for that text, or the first stage has a `color` slot, the first stage falls back to the normal footer, so nothing is hidden. The hero text is `--funnel-chart-hero-fg` (the surface colour) set as WCAG large text, since `--chart-series-1` follows the accent and not every accent's lead hue clears 4.5:1 with it (all clear 3:1); recheck it if you override `--funnel-chart-ramp-color`. Later stages show the conversion pill in the band and value + label underneath, with dashed rules between footer columns.
 - **Shape** (both layouts): `'taper'` (default) holds each stage's size for most of its column, then a short straight diagonal leads into the next; `'sharp'` draws full-column trapezoids. The last stage has no neck.
 - **Layout.** Horizontal while every stage gets at least 96px of width. Narrower, it switches to vertical: one funnel slice per row (the same `shape`, turned on its side, thin gaps between slices) beside a table-like grid with a header (Stage, Value, vs previous) and per row a colour swatch, the label (wrapping, never truncated), the value and the step pill (the first row shows "—"). The visible header is hidden from screen readers; the hidden data table is their source. As a last resort the rows scroll inside the plot. Unmeasured (first paint, SSR) it assumes horizontal.
 - **Clickable stages.** `onStageClick(stage, index)` makes every stage cell a button (Tab, Enter / Space) and receives your original stage object. Omit it for a read-only funnel. Escape dismisses the active stage.

package/docs/components/Sticky.md

@@ -35,7 +35,7 @@ Pins its box to the top of the scroll container while the page scrolls past —
 
 <!-- props:end -->
 
-- Sticky defaults are emitted by the global token entry, so a consumer `:root` override loaded after `@eocrm/design-system/styles/tokens.scss` wins predictably. Override `--sticky-top-topbar` to match custom application chrome.
+- Sticky defaults are emitted by the global token entry, so a consumer `:root` override loaded after `@eocrm/design-system/styles/tokens.css` wins predictably. Override `--sticky-top-topbar` to match custom application chrome.
 - Inside a `<Split>` aside, pair with `align="stretch"` (else the content-height aside track gives nowhere to pin).
 - As a `<Split collapseBelow>` aside, it automatically becomes a plain block (no pin, no `scroll` cap/inner scroll) while the Split is stacked — no consumer shim needed. Applies only when the `Sticky` is the `aside` itself.
 

package/docs/i18n.md

@@ -4,19 +4,24 @@ How library strings are translated, and how to pair `I18nProvider` with `LocaleP
 
 Every user-facing string the library renders — visible text, aria-labels, placeholders, default empty/loading copy — flows through a single React Context. Wrap your app once; every component picks up the right copy. There are NO `labels` / `cancelLabel` / `searchPlaceholder` props on any component.
 
+English is built in. Every other locale's catalogue is passed in with `messages`, so an English-only app never bundles Russian:
+
 ```tsx
-import { I18nProvider } from '@eocrm/design-system';
+import { I18nProvider, ru } from '@eocrm/design-system';
 
-<I18nProvider locale="ru">
+<I18nProvider locale="ru" messages={ru}>
   <App />
 </I18nProvider>;
 ```
 
-**Overrides** are a deep-partial of the messages tree:
+A non-`en` `locale` without `messages` logs a `console.error` (in every environment) and renders English. `AppProvider` takes the same `messages` prop. In a Next.js app router, mount the provider from your own `'use client'` file — `ru` contains functions, which a Server Component cannot pass to a Client Component (see [setup.md](setup.md)).
+
+**Overrides** are a deep-partial of the messages tree, merged over `messages`:
 
 ```tsx
 <I18nProvider
   locale="ru"
+  messages={ru}
   overrides={{
     pagination: { next: 'Дальше' },
     badge: { modified: 'Изменено!' },
@@ -30,12 +35,12 @@ import { I18nProvider } from '@eocrm/design-system';
 - Missing locale keys do NOT fall back to `en` — `I18nProvider` uses the one locale catalogue and `useTranslation` warns and returns the literal key string. The real guard is the type: `en` and `ru` are both annotated `: Messages` (total, not partial), so a missing key is a `tsc` error and cannot ship.
 - No provider at all = `en` defaults.
 
-**Available locales:** `'en'` (default), `'ru'`. v1.
+**Available locales:** `'en'` (built in, default) and `'ru'` (`import { ru }`). Your own catalogue works too: `locale="de" messages={de}` where `de: Messages`.
 
 **`I18nProvider` vs `LocaleProvider` — pair them.** `I18nProvider` carries the message catalog (translated strings). `LocaleProvider` carries the BCP-47 tag used by `Intl.*` formatters inside Calendar / DatePicker / DateRangePicker (month names, weekday order, date-range formatting). They are independent — a Russian app should wrap with BOTH so visible strings AND Intl-rendered dates speak the right language:
 
 ```tsx
-<I18nProvider locale="ru">
+<I18nProvider locale="ru" messages={ru}>
   <LocaleProvider locale="ru-RU">
     <App />
   </LocaleProvider>

package/docs/setup.md

@@ -6,7 +6,7 @@ Two steps at your app root:
 
 ```tsx
 // 1. Import the stylesheet once (tokens, modern reset, base typography).
-import '@eocrm/design-system/styles/global.scss';
+import '@eocrm/design-system/styles/global.css';
 
 // 2. Wrap your tree in <AppProvider>.
 import { AppProvider } from '@eocrm/design-system';
@@ -18,7 +18,8 @@ import { AppProvider } from '@eocrm/design-system';
 
 `<AppProvider>` bundles the app-level contexts so you don't wire them by hand:
 
-- `locale` (`'en' | 'ru'`) — selects the built-in UI-string bundle.
+- `locale` (`'en'`, `'ru'` or any other code) — UI-string locale. English is built in; for any other locale pass `messages` (`import { ru } from '@eocrm/design-system'`, or your own `Messages` catalog). A non-`en` locale without `messages` logs an error and renders English.
+- `messages?` — the catalog for `locale`. Omitted ⇒ English.
 - `intlLocale?` (BCP-47, e.g. `'en-US'`) — locale for Intl formatting (Calendar, dates, numbers). Defaults to `locale`.
 - `translations?` — deep-partial overrides merged over the built-in strings (rebrand a few keys; memoize the object).
 - `toast?` — `<ToastViewport>` config, or `false` to mount it yourself. Omitted ⇒ mounted with defaults.
@@ -26,15 +27,40 @@ import { AppProvider } from '@eocrm/design-system';
 - `darkTokens?` — token overrides applied **only** in dark (forced + system), merged over `tokens` (e.g. a lighter accent on dark surfaces). Memoize it.
 
 ```tsx
+// import { ru } from '@eocrm/design-system'
 // Russian UI + a couple of rebranded strings + top-right toasts:
 const translations = useMemo(() => ({ alert: { dismiss: 'Скрыть' } }), []);
-<AppProvider locale="ru" translations={translations} toast={{ position: 'top-right' }}>
+<AppProvider
+  locale="ru"
+  messages={ru}
+  translations={translations}
+  toast={{ position: 'top-right' }}
+>
   <App />
 </AppProvider>;
 ```
 
 It composes `LocaleProvider` + `I18nProvider` and mounts the toast viewport. **Routing is yours** (`<AppProvider>` ships no router), and the stylesheet import above is still required. The individual providers (`LocaleProvider`, `I18nProvider`, `ToastViewport`) remain exported for advanced cases like pinning a subtree to a different locale.
 
+**Next.js app router (React Server Components):** the `ru` catalog contains functions, which a Server Component cannot pass to a Client Component. Mount the provider from your own `'use client'` file and use that from `layout.tsx`:
+
+```tsx
+// app/providers.tsx
+'use client';
+import { AppProvider, ru } from '@eocrm/design-system';
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <AppProvider locale="ru" messages={ru}>
+      {children}
+    </AppProvider>
+  );
+}
+
+// app/layout.tsx (Server Component): <body><Providers>{children}</Providers></body>
+```
+
+Plain components (`Button`, `Select`, `Badge`, …) can be rendered directly from Server Components. Compound parts (`Breadcrumb.Item`, `Modal.Header`, `Accordion.Item`, …) cannot — a client module can't be dotted into on the server, so `X.Item` is `undefined` there — so render compound components from a `'use client'` file. Controlled overlays (`Modal`, `Drawer`) also need state and a function `onOpenChange`, so they belong in a client component anyway.
+
 **When NOT to use:** for a per-subtree locale / i18n override, nest `LocaleProvider` / `I18nProvider` directly — `AppProvider` is the single app root, so don't nest a second one. For a tiny embed or isolated test that only needs strings, use `I18nProvider` alone (or pass `toast={false}`) to avoid the toast viewport.
 
 **Rebranding via tokens:**
@@ -48,4 +74,4 @@ const darkTokens = useMemo(() => ({ '--color-accent': '#a78bfa' }), []);
 </AppProvider>;
 ```
 
-`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; `src/styles/tokens.scss` remains the stable consumer entry point.
+`tokens` apply in light **and** dark; `darkTokens` refine the dark scope only. They're emitted as a single declarative `<style>` that layers over the [dark theme](theming.md#dark-theme) correctly, and they win over a `data-accent` preset's token blocks. One exception to "override the accent and everything follows": a preset may set the link colour apart from its accent (`tealpine`, `indigo` and `berry` do), so when rebranding the accent on top of a preset, also override `--color-link-fg` / `--color-link-fg-hover`. Any design token can be overridden — see the generated `@eocrm/design-tokens` Sass contract for the full CSS custom-property set. Contributors change shared values only in `packages/design-tokens/src/tokens.json`; consumers import the compiled `@eocrm/design-system/styles/tokens.css`.

package/docs/theming.md

@@ -53,7 +53,7 @@ Inline this in your app's `<head>` **before** your bundle loads. It applies the
 
 ## Theming via component tokens
 
-Every component ships a `Component.tokens.scss` file alongside its `.module.scss`, defining `--<component>-<part>-<state>` CSS custom properties at `:root`. The `.module.scss` references those tokens instead of the global primitives. This lets consumers re-theme one component without affecting others.
+Every component defines `--<component>-<part>-<state>` CSS custom properties at `:root` (in the shipped CSS), and its styles reference those tokens instead of the global primitives. This lets consumers re-theme one component without affecting others.
 
 **Pattern:**
 
@@ -90,6 +90,6 @@ Every component ships a `Component.tokens.scss` file alongside its `.module.scss
 <Button style={{ '--button-bg': 'red' } as React.CSSProperties}>Delete</Button>
 ```
 
-The authoritative list of tokens per component lives in that component's `<Name>.tokens.scss` file. Read it to see what's available.
+A component's tokens are the `:root` block at the top of its shipped stylesheet, `dist/components/<Name>/<Name>.css` (e.g. `node_modules/@eocrm/design-system/dist/components/Button/Button.css`). They are plain `--<component>-*` custom properties, also inspectable in browser devtools on `:root`.
 
 **Deprecated:** `--color-badge-<tone>-bg/-fg` tokens are aliased to the new `--badge-bg-<tone>` / `--badge-fg-<tone>` tokens. They still work but will be removed in a future major version.

package/docs/tokens.md

@@ -1,6 +1,6 @@
 # Tokens (the only "values" you write)
 
-All available as CSS custom properties after you import `global.scss`:
+All available as CSS custom properties after you import `global.css`:
 
 | Family          | Tokens                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -22,7 +22,10 @@ All available as CSS custom properties after you import `global.scss`:
 | Motion          | `--transition-fast` (100ms) / `--transition-base` (140ms)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | Layer (z-index) | `--z-app-chrome` / `--z-dropdown` / `--z-popover` / `--z-flowcanvas-maximized` / `--z-modal` / `--z-overlay-floating` / `--z-toast` / `--z-tooltip`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-**Focus rings are an `outline`, not a `box-shadow`.** Use the mixin —
+**Focus rings are an `outline`, not a `box-shadow`.** In your own styles, write
+`outline: var(--ring-width) solid var(--ring-accent); outline-offset: var(--ring-offset);`
+under `:focus-visible` — the `focus-ring` mixin below is library-internal and is
+not shipped (`mixins.scss` was removed in 0.7). Inside the library, use the mixin —
 `@include focus-ring;` or `@include focus-ring(var(--your-ring));` — which emits
 `outline: var(--ring-width) solid <colour>` plus `outline-offset:
 var(--ring-offset)`. Do **not** hand-roll `box-shadow: 0 0 0 var(--ring-width)

package/docs/typescript.md

@@ -6,4 +6,5 @@ Every prop and variant type is typed. If your editor shows no types:
 
 - Confirm `moduleResolution: "bundler"` (or `"node16"`) in your `tsconfig.json`.
 - Confirm your IDE's TS server is running.
-- The package's `types` field points at `./src/index.ts` — source distribution means the consumer's bundler compiles `.tsx`. Vite, Next.js, Webpack 5+ all support this; older configurations may need `transpilePackages: ['@eocrm/design-system']` (Next.js) or equivalent.
+- The package ships compiled ESM with `.d.ts` types (`types: ./dist/index.d.ts`); no `transpilePackages`, Sass or TSX loader config is needed.
+- If `tsc` rejects the side-effect `import '@eocrm/design-system/styles/global.css'` (TS2882), add `declare module '*.css';` to a `.d.ts` file — Vite's `vite/client` and Next's `next-env.d.ts` already declare it.

package/package.json

@@ -1,42 +1,34 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.6.24",
-  "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
+  "version": "0.8.0",
+  "description": "Design system for the EOCRM product — React 19 + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "**/*.scss",
     "**/*.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
+      "@eocrm/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./styles/global.scss": "./src/styles/global.scss",
-    "./styles/tokens.scss": "./src/styles/tokens.scss",
-    "./styles/reset.scss": "./src/styles/reset.scss",
-    "./styles/typography.scss": "./src/styles/typography.scss",
-    "./styles/mixins.scss": "./src/styles/mixins.scss",
+    "./styles/global.css": {
+      "@eocrm/source": "./src/styles/global.scss",
+      "default": "./dist/styles/global.css"
+    },
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
+    "dist",
     "AI-PRIMER.md",
-    "docs",
-    "!src/**/*.test.ts",
-    "!src/**/*.test.tsx",
-    "!src/**/*.test.js",
-    "!src/**/*.test.jsx",
-    "!src/**/*.spec.ts",
-    "!src/**/*.spec.tsx",
-    "!src/**/*.spec.js",
-    "!src/**/*.spec.jsx",
-    "!src/**/*.testutil.ts"
+    "docs"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,10 +42,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eocrm/design-tokens": "0.6.24",
     "@floating-ui/react-dom": "^2.1.8",
-    "@types/d3-scale": "^4.0.9",
-    "@types/d3-shape": "^3.2.0",
     "clsx": "^2.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -62,20 +51,29 @@
     "qrcode-generator": "^2.0.4"
   },
   "devDependencies": {
+    "@eocrm/design-tokens": "0.8.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-shape": "^3.2.0",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.25",
     "sass-embedded": "^1.100.0",
     "typescript": "^6.0.3",
+    "vite": "^8.3.5",
     "vitest": "^4.1.7"
   },
   "scripts": {
+    "prepack": "npm run build 1>&2",
     "typecheck": "tsc --noEmit",
+    "build": "vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json && node scripts/build-styles.mjs && node scripts/fix-dts-specifiers.mjs",
     "test": "vitest run",
+    "size": "node scripts/size-guard.mjs",
+    "test:dist": "vitest run -c vitest.dist.config.ts",
     "test:watch": "vitest",
     "build:manifest": "node scripts/generate-manifest.mjs",
     "build:docs": "node scripts/generate-component-docs.mjs"

package/src/_meta/manifest.ts

@@ -1,294 +0,0 @@
-/**
- * Build-time helper that derives a dependency graph of every component
- * directory in `src/components/`. Output is committed as
- * `src/components.manifest.json` and consumed by:
- *
- * - the drift-detection Vitest test alongside this file
- * - the playground's `/components/dependencies` page
- * - (future) AI-PRIMER.md auto-generated architecture section
- *
- * The graph is computed from import statements — no per-component
- * metadata to maintain. A component is a "primitive" if it imports no
- * other components in this directory; "composition" otherwise.
- */
-
-import { readdirSync, readFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const COMPONENTS_DIR = join(__dirname, '..', 'components');
-
-export type ComponentTier = 'primitive' | 'composition';
-
-export interface ComponentManifestEntry {
-  /** `'primitive'` if no other library components are imported; `'composition'` otherwise. */
-  tier: ComponentTier;
-  /** Functional cluster — derived from `CLUSTERS` map below. `null` if not classified. */
-  cluster: string | null;
-  /** Sorted list of library components this one imports. Empty for primitives. */
-  composes: string[];
-  /** Sorted inverse — components that import this one. */
-  composedBy: string[];
-}
-
-export type ComponentManifest = Record<string, ComponentManifestEntry>;
-
-/**
- * Functional-cluster table. Mirrors the AI-PRIMER.md and AppShell sidebar
- * grouping. Update this when adding a component to keep the cluster
- * column accurate; the test alongside this file fails if a component is
- * unclassified.
- */
-const CLUSTERS: Record<string, string> = {
-  // Layout
-  Stack: 'Layout',
-  Cluster: 'Layout',
-  Constrain: 'Layout',
-  Indent: 'Layout',
-  AppLayout: 'Layout',
-  Divider: 'Layout',
-  Grid: 'Layout',
-  Split: 'Layout',
-  Sticky: 'Layout',
-  Masonry: 'Layout',
-  Card: 'Layout',
-  ScrollArea: 'Layout',
-  Page: 'Layout',
-  Screen: 'Layout',
-  PageHeader: 'Layout',
-
-  // Forms
-  Button: 'Forms',
-  SocialButton: 'Forms',
-  ButtonGroup: 'Forms',
-  Checkbox: 'Forms',
-  ColorPicker: 'Forms',
-  DatePicker: 'Forms',
-  DatePickers: 'Forms',
-  RelativeDateInput: 'Forms',
-  DateStrip: 'Forms',
-  SlotGrid: 'Forms',
-  DateRangePicker: 'Forms',
-  Field: 'Forms',
-  SettingRow: 'Forms',
-  FormRow: 'Forms',
-  FormSection: 'Forms',
-  FileUpload: 'Forms',
-  IconPicker: 'Forms',
-  ImageCrop: 'Forms',
-  Input: 'Forms',
-  Kanban: 'Forms',
-  LiquidEditor: 'Forms',
-  OtpInput: 'Forms',
-  PasswordInput: 'Forms',
-  PasswordStrengthMeter: 'Forms',
-  CurrencySelect: 'Forms',
-  MoneyInput: 'Forms',
-  PhoneInput: 'Forms',
-  Radio: 'Forms',
-  OptionsPicker: 'Forms',
-  EmojiPicker: 'Forms',
-  Select: 'Forms',
-  Slider: 'Forms',
-  Sortable: 'Forms',
-  SortableGroup: 'Forms',
-  CatalogPicker: 'Forms',
-  PillMenu: 'Forms',
-  Switch: 'Forms',
-  RichTextEditor: 'Forms',
-  Textarea: 'Forms',
-  TimeField: 'Forms',
-
-  // Display
-  Avatar: 'Display',
-  AgentAvatar: 'Display',
-  Image: 'Display',
-  QrCode: 'Display',
-  MediaTile: 'Display',
-  WidgetPreview: 'Display',
-  Badge: 'Display',
-  Dot: 'Display',
-  EntityChip: 'Display',
-  Timeline: 'Display',
-  StagePath: 'Display',
-  Thread: 'Display',
-  BrandIcon: 'Display',
-  Logo: 'Display',
-  DefinitionList: 'Display',
-  List: 'Display',
-  Calendar: 'Display',
-  CircularProgress: 'Display',
-  Code: 'Display',
-  CodeBlock: 'Display',
-  HighlightedText: 'Display',
-  CursorPagination: 'Display',
-  DashboardCanvas: 'Display',
-  DashboardWidget: 'Display',
-  StatGroup: 'Display',
-  Chart: 'Display',
-  FunnelChart: 'Display',
-  Sparkline: 'Display',
-  TreeView: 'Display',
-  DataTable: 'Display',
-  EmptyState: 'Display',
-  ErrorState: 'Display',
-  IconTile: 'Display',
-  FilterChip: 'Display',
-  FlowCanvas: 'Display',
-  Kbd: 'Display',
-  Pagination: 'Display',
-  PersonDisplay: 'Display',
-  Progress: 'Display',
-  Skeleton: 'Display',
-  Table: 'Display',
-  RichText: 'Display',
-  Text: 'Display',
-  Title: 'Display',
-
-  // Feedback
-  Alert: 'Feedback',
-  Banner: 'Feedback',
-  ChatBubble: 'Feedback',
-  ChatLauncher: 'Feedback',
-  Highlight: 'Feedback',
-  Toast: 'Feedback',
-
-  // Navigation
-  Accordion: 'Navigation',
-  Breadcrumb: 'Navigation',
-  Link: 'Navigation',
-  LinkCard: 'Navigation',
-  Rail: 'Navigation',
-  TableOfContents: 'Navigation',
-  Tabs: 'Navigation',
-  TopBar: 'Navigation',
-
-  // Overlays
-  ConfirmationPopover: 'Overlays',
-  Drawer: 'Overlays',
-  DropdownMenu: 'Overlays',
-  Lightbox: 'Overlays',
-  Modal: 'Overlays',
-  Popover: 'Overlays',
-  Tooltip: 'Overlays',
-  Tour: 'Overlays',
-
-  // Accessibility
-  VisuallyHidden: 'Accessibility',
-  LiveRegion: 'Accessibility',
-};
-
-// `(?:\.\./)+`, not a single `../`, since #509 — the other half of the flat-walk
-// bug. Once nested files are read, their imports are one level deeper, so
-// `from '../../RichTextEditor/…'` inside RichText/engine/ has to match too.
-// Widening the walk without widening this pattern still sees nothing.
-const FROM_PARENT_PATH = /from\s+['"](?:\.\.\/)+([A-Z][a-zA-Z0-9]+)(?:\/[^'"]*)?['"]/g;
-
-function listComponentDirs(): string[] {
-  return readdirSync(COMPONENTS_DIR, { withFileTypes: true })
-    .filter((entry) => entry.isDirectory())
-    .filter((entry) => !entry.name.startsWith('_'))
-    .map((entry) => entry.name)
-    .sort();
-}
-
-function collectSourceText(componentDir: string): string {
-  // Concatenate every non-test .tsx + .ts file UNDER the component dir so that
-  // sub-files (e.g. SVSquare.tsx inside ColorPicker/) contribute their imports
-  // to the parent component's dependency set.
-  //
-  // Recursive since #509. It said "every" and read one level, so nothing in a
-  // nested directory counted — RichText/engine/ holds 20 modules and none of
-  // them were ever parsed. That hid a real bidirectional dependency between
-  // RichText and RichTextEditor for as long as the acyclic gate has been green;
-  // the gate was not wrong, it was being fed half the source. Fixing the walk
-  // without first breaking that cycle turns the gate red.
-  const out: string[] = [];
-  const walk = (dir: string) => {
-    for (const entry of readdirSync(dir, { withFileTypes: true })) {
-      const path = join(dir, entry.name);
-      if (entry.isDirectory()) {
-        walk(path);
-      } else if (
-        (entry.name.endsWith('.tsx') || entry.name.endsWith('.ts')) &&
-        !entry.name.endsWith('.test.tsx') &&
-        !entry.name.endsWith('.test.ts')
-      ) {
-        out.push(readFileSync(path, 'utf-8'));
-      }
-    }
-  };
-  walk(componentDir);
-  return out.join('\n');
-}
-
-/**
- * The import-matching half of the walk, exposed so it can be asserted directly.
- *
- * The pattern has to accept more than one `../` (#509). Nothing in the tree
- * currently exercises that — the only nested directory, RichText/engine, had
- * its single upward import removed when the RichText <-> RichTextEditor cycle
- * was broken — so the manifest looks the same whether the pattern is right or
- * wrong. That is exactly the condition under which a fix rots.
- */
-export function collectImportsFrom(lines: string[]): string[] {
-  return extractParentImports(lines.join('\n'));
-}
-
-function extractParentImports(source: string): string[] {
-  const deps = new Set<string>();
-  for (const match of source.matchAll(FROM_PARENT_PATH)) {
-    deps.add(match[1]);
-  }
-  return [...deps];
-}
-
-/**
- * Build the full component manifest by walking every directory under
- * `src/components/` and parsing its source-file imports. Output is sorted
- * (component keys + composes / composedBy arrays) so the JSON is stable
- * across runs.
- */
-export function buildManifest(): ComponentManifest {
-  const names = listComponentDirs();
-  const knownComponents = new Set(names);
-  const manifest: ComponentManifest = {};
-
-  // First pass: populate `composes` for each component.
-  for (const name of names) {
-    const dir = join(COMPONENTS_DIR, name);
-    const src = collectSourceText(dir);
-    const imports = extractParentImports(src).filter((n) => knownComponents.has(n) && n !== name);
-    imports.sort();
-    manifest[name] = {
-      tier: imports.length === 0 ? 'primitive' : 'composition',
-      cluster: CLUSTERS[name] ?? null,
-      composes: imports,
-      composedBy: [],
-    };
-  }
-
-  // Second pass: invert the graph for `composedBy`.
-  for (const [name, entry] of Object.entries(manifest)) {
-    for (const dep of entry.composes) {
-      const target = manifest[dep];
-      if (target) {
-        target.composedBy.push(name);
-      }
-    }
-  }
-
-  // Sort composedBy lists for stable output.
-  for (const entry of Object.values(manifest)) {
-    entry.composedBy.sort();
-  }
-
-  // Return a key-sorted object so JSON.stringify gives deterministic output.
-  return Object.fromEntries(
-    Object.entries(manifest).sort(([a], [b]) => a.localeCompare(b)),
-  ) as ComponentManifest;
-}
-
-/** Path to the committed manifest JSON (relative to the design-system root). */
-export const MANIFEST_PATH = join(__dirname, '..', 'components.manifest.json');