@eocrm/design-system 0.6.23 → 0.7.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

@@ -102,6 +102,7 @@ import { Chart, DashboardWidget, ErrorState } from '@eocrm/design-system';
 - ❌ One headline number → `DashboardWidget variant="kpi"` or `StatGroup`.
 - ❌ More than 8 groups at once → fold the tail into an "Other" series in the app (the DS can't know whether your metric is additive).
 - ❌ Two measures with different units → two charts. There is no dual axis.
+- ❌ Stage conversion (pipeline / campaign) → `FunnelChart`.
 - ❌ Non-time categorical comparisons that need sorting, pies, scatter or zoom — not supported.
 
 #### Anti-patterns

package/docs/components/FunnelChart.md

@@ -0,0 +1,96 @@
+# `<FunnelChart>` — stage funnel for pipeline and campaign conversion
+
+Ordered stages (e.g. Leads → Qualified → Proposal → Won) drawn as one connected silhouette in a one-hue ramp: the height of each stage shows how much of the funnel is left, a pill in each later stage shows the step conversion, and the first stage carries its value and label inside its band. Fills a `DashboardWidget variant="chart"` body or sits inline on a page, and ships its own tooltip, keyboard inspection, data table and empty state. The app owns data, formatting, loading and errors.
+
+```tsx
+import { useState } from 'react';
+import {
+  FunnelChart,
+  DashboardWidget,
+  ErrorState,
+  Stack,
+  type FunnelStage,
+} from '@eocrm/design-system';
+
+const stages = [
+  { key: 'leads', label: 'Leads', value: 1200 },
+  { key: 'qualified', label: 'Qualified', value: 640 },
+  { key: 'proposal', label: 'Proposal', value: 210 },
+  { key: 'won', label: 'Won', value: 64 },
+]; // keep the array and `formatValue` referentially stable (module level or useMemo / useCallback)
+
+<DashboardWidget variant="chart" title="Sales pipeline" loading={isLoading}>
+  {error ? (
+    <ErrorState title="Could not load" headingLevel={4} />
+  ) : (
+    <FunnelChart label="Sales pipeline" stages={stages} formatValue={formatCount} />
+  )}
+</DashboardWidget>;
+
+// Inline on a page: a definite-height parent is filled; an auto-height one gets the default height
+<div style={{ height: 280 }}>
+  <FunnelChart label="Campaign funnel" stages={stages} formatValue={formatCount} shape="sharp" />
+</div>;
+
+// Drill-through plus an external headline that follows the hovered / focused stage
+const [active, setActive] = useState<FunnelStage | null>(null);
+
+<Stack gap="sm">
+  <strong>{active ? `${active.label}: ${formatCount(active.value)}` : 'Hover a stage'}</strong>
+  <FunnelChart
+    label="Sales pipeline"
+    stages={stages}
+    formatValue={formatCount}
+    onStageClick={(stage) => navigate(`/deals?stage=${stage.key}`)}
+    onActiveStageChange={setActive}
+    footnote="Closed deals only"
+  />
+</Stack>;
+```
+
+<!-- props:start -->
+
+## Props
+
+<!-- prettier-ignore -->
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `label` | `string` | yes | Accessible name of the figure and caption of its data table, e.g. "Sales pipeline". Required. |
+| `stages` | `FunnelStage[]` | yes | Stages, top of the funnel first. Heights are relative to the largest value. Colour is a one-hue ramp from `--chart-series-1` (first stage) toward the surface (paler toward the foreground in dark); a stage's `color` slot overrides it. |
+| `formatValue` | `(n: number) => string` | yes | Formats a stage value for the footer, tooltip and data table (the app owns i18n and currency). Required. |
+| `shape` | `'taper' \| 'sharp'` | no | Silhouette between stages, in both layouts (vertical slices follow the same geometry turned on its side). Default `'taper'`. - `'taper'` — each stage holds its height for most of its column, then a short straight diagonal leads into the next one's height. - `'sharp'` — full-column trapezoids from one stage's height to the next. |
+| `onStageClick` | `((stage: FunnelStage, index: number) => void)` | no | Makes every stage a button that calls this with the consumer's original stage object and its index, e.g. to drill through to the deals in that stage. Omit for a read-only funnel. |
+| `onActiveStageChange` | `((stage: FunnelStage \| null) => void)` | no | Called with the hovered or focused stage (the consumer's original object), or `null` when none is active, e.g. so a surrounding headline can follow along. |
+| `emptyMessage` | `ReactNode` | no | EmptyState title when there are no stages or every value is 0. Default: translated "No data for this period". |
+| `footnote` | `ReactNode` | no | Short note under the funnel, e.g. "Closed deals only". Takes its own row (wraps, never truncates); also describes the plot for screen readers. Shown in the empty state too. |
+| …native | | | plus native HTML attributes |
+
+<!-- props:end -->
+
+- **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.
+- **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.
+- **`onActiveStageChange(stage | null)`** fires with the hovered or focused stage (your original object) and `null` when none is active. Use it for a headline outside the chart; do not put that headline in the widget body next to the chart.
+- **Tooltip** follows hover, focus and tap, and tracks scroll and resize. **Screen readers** get a visually hidden data table (caption = `label`) with the exact values, conversion and share.
+- **Empty** (no stages, or every value 0) renders `EmptyState` with `emptyMessage` (default "No data for this period"). `footnote` stays visible there.
+- **Footnote** is a short muted note in its own row under the funnel (wraps, never truncates) and is the plot's accessible description.
+- **Sizing.** Fills its parent (`width/height: 100%`). A definite-height parent (a `DashboardWidget` chart body, a `height` style) is filled; in an auto-height parent the shapes take an intrinsic default height (`--funnel-chart-min-height`).
+
+#### When NOT to use
+
+- ❌ Values over time → `Chart`.
+- ❌ A single conversion ratio → `StatGroup` / `DashboardWidget variant="kpi"`.
+- ❌ Unordered categories, or stages that don't narrow → `Chart type="bar"`.
+- ❌ Many stages (beyond about 8) → fold the tail into an "Other" stage in the app; the ramp steps become hard to tell apart.
+
+#### Anti-patterns
+
+- ❌ Passing an inline `stages` array or `formatValue` on every render of a busy parent; geometry is recomputed when their identity changes.
+- ❌ Wrapping `FunnelChart` in a fixed-height or scrolling div inside the widget body. The cell is the size.
+- ❌ Rendering a note next to the chart in the widget body (it steals height). Use `footnote`.
+- ❌ Passing `loading` / error UI into `FunnelChart`. Use `DashboardWidget loading` and an `ErrorState` child.
+- ❌ Pre-computing percentages into `value`. Pass counts; the component derives conversion and share.

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/components/index.json

@@ -244,6 +244,11 @@
     "summary": "titled group of fields",
     "cluster": "Forms"
   },
+  {
+    "name": "FunnelChart",
+    "summary": "stage funnel for pipeline and campaign conversion",
+    "cluster": "Display"
+  },
   {
     "name": "Grid",
     "summary": "2D layout primitive",

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.23",
-  "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
+  "version": "0.7.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.23",
     "@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.7.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"