@keboola/design 3.2.3 → 4.0.0

package/AGENTS.md

@@ -13,6 +13,7 @@ Working **on** the package (commands, layer boundary, token surface, the FA→Lu
   - `import '@keboola/design/styles'` — Tailwind-extending consumers. Your PostCSS+Tailwind processes `@tailwind` directives plus design's `dist/` in your content scan. Avoids duplicate preflights/utilities. **Default for any Keboola app.**
   - `import '@keboola/design/styles/compiled'` — drop-in pre-compiled CSS (~176 KB minified). No Tailwind setup required. Use only when you genuinely cannot run Tailwind.
 - Icons: `import { ChevronDown } from '@keboola/design/icons'`.
+- Code editors: `import { CodeEditor, SqlEditor, MergeEditor } from '@keboola/design/editors'`. These pull the full CodeMirror bundle (~1.3 MB), so they ship from a dedicated subpath — keeping the root barrel CodeMirror-free for apps that don't edit code.
 
 ## Decision tree
 
@@ -112,6 +113,14 @@ This file answers **which** component to use; [`COMPONENT-API.md`](./COMPONENT-A
 
 Vertical rhythm: prefer `tw-gap-*` on a flex column parent over `tw-mt-*` on children — avoids margin-collapse. Page-level max width: use `PageLayout`'s `maxWidth` prop (`narrow` / `default` / `wide` / `full`), not `tw-max-w-[…]` literals.
 
+**Page gutter is consumer-owned.** `AppShell.Main` and `PageLayout` impose **no** page gutter by design — content renders flush against the sidebar/header unless you add one. Put the padding on the content region yourself (the `AppShell` story wraps Main content in `tw-p-6`):
+
+```tsx
+<AppShell.Main>
+  <div className="tw-flex tw-flex-col tw-gap-4 tw-px-6 tw-py-6">{/* page content */}</div>
+</AppShell.Main>
+```
+
 ### Navigation / flow
 
 | Use        | When                                                                                                                                        |
@@ -148,7 +157,7 @@ The `label` prop implies `orientation="horizontal"` — labels are not rendered
 | `CodeEditor`      | Generic code editing (JSON, YAML, shell)                      |
 | `SqlEditor`       | SQL editing (syntax + autocomplete)                           |
 
-`Select` is wrong above ~10 items — use `Combobox`. `Combobox` is wrong for free-form values — use `Tagger`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle; reserve for real code editing.
+`Select` is wrong above ~10 items — use `Combobox`. `Combobox` is wrong for free-form values — use `Tagger`. `CodeEditor`/`SqlEditor` load the full CodeMirror bundle and ship from the `@keboola/design/editors` subpath (not the root); reserve for real code editing.
 
 ## Composition recipes
 
@@ -357,6 +366,17 @@ const form = useAppForm({
 />
 ```
 
+**Sheet** — use `Sheet.Header title="…" description="…"` for a styled title + close icon; do **not** hand-roll with the raw `Sheet.Title`, which renders an unstyled `<h2>`. `Sheet.Body` provides horizontal padding only (`tw-px-4`) — add your own vertical rhythm/gap:
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen}>
+  <Sheet.Content>
+    <Sheet.Header title="Edit table" description="Adjust the table metadata." />
+    <Sheet.Body className="tw-flex tw-flex-col tw-gap-4 tw-py-4">{/* fields */}</Sheet.Body>
+  </Sheet.Content>
+</Sheet>
+```
+
 ## Icons
 
 Canonical icon surface is `@keboola/design/icons` — a wildcard re-export of [lucide-react](https://lucide.dev) plus Keboola-custom inline-SVG icons. Follow **shadcn convention**: import named icons directly, no wrapper component. Every Lucide icon is available without any package edit.

package/COMPONENT-API.md

@@ -1,8 +1,8 @@
 # @keboola/design — component API reference
 
-> **Generated file — do not edit by hand.** Regenerate with `yarn workspace @keboola/design generate:api` (extracts prop signatures from the TypeScript types via `react-docgen-typescript`).
+> **Generated file — do not edit by hand.** Regenerate with `pnpm --filter @keboola/design generate:api` (extracts prop signatures from the TypeScript types via `react-docgen-typescript`).
 
-This is the prop-signature contract for the most-used components. For _which_ component to reach for, see [`AGENTS.md`](./AGENTS.md) (the decision tree); for live worked examples, open the colocated `*.stories.tsx` in Storybook (`yarn dev --filter=@keboola/design`).
+This is the prop-signature contract for the most-used components. For _which_ component to reach for, see [`AGENTS.md`](./AGENTS.md) (the decision tree); for live worked examples, open the colocated `*.stories.tsx` in Storybook (`pnpm dev --filter=@keboola/design`).
 
 Props listed are the ones each component **declares itself**. Components built on a native element (`Button` on `<button>`, `Link` on `<a>`, `Card` on `<div>`, …) also accept that element's standard attributes — called out in each entry's note.
 
@@ -249,29 +249,30 @@ Source: `src/blocks/Form/connectors/NumberField.tsx`
 
 Source: `src/blocks/Form/connectors/SelectField.tsx`
 
-> `options` is required. Forwards `variant === "argo"` to `Select.Content`.
-
-| Prop               | Type                                         | Required | Default | Description |
-| ------------------ | -------------------------------------------- | -------- | ------- | ----------- |
-| `options`          | `readonly Option[]`                          | yes      | —       |             |
-| `autoComplete`     | `string`                                     | no       | —       |             |
-| `className`        | `string`                                     | no       | —       |             |
-| `defaultOpen`      | `boolean`                                    | no       | —       |             |
-| `defaultValue`     | `string`                                     | no       | —       |             |
-| `dir`              | `"rtl" \| "ltr"`                             | no       | —       |             |
-| `disabled`         | `boolean`                                    | no       | —       |             |
-| `form`             | `string`                                     | no       | —       |             |
-| `help`             | `ReactNode`                                  | no       | —       |             |
-| `label`            | `ReactNode`                                  | no       | —       |             |
-| `name`             | `string`                                     | no       | —       |             |
-| `onOpenChange`     | `((open: boolean) => void)`                  | no       | —       |             |
-| `open`             | `boolean`                                    | no       | —       |             |
-| `placeholder`      | `string`                                     | no       | —       |             |
-| `required`         | `boolean`                                    | no       | —       |             |
-| `sizing`           | `"small" \| "medium" \| "default" \| null`   | no       | —       |             |
-| `state`            | `"warning" \| "error" \| "default" \| null`  | no       | —       |             |
-| `triggerClassName` | `string`                                     | no       | —       |             |
-| `variant`          | `"primary" \| "secondary" \| "argo" \| null` | no       | —       |             |
+> Pass `items` (canonical, matches the base `Select`) or the deprecated `options` alias — one is required. Forwards `variant === "argo"` to `Select.Content`.
+
+| Prop               | Type                                         | Required | Default | Description             |
+| ------------------ | -------------------------------------------- | -------- | ------- | ----------------------- |
+| `autoComplete`     | `string`                                     | no       | —       |                         |
+| `className`        | `string`                                     | no       | —       |                         |
+| `defaultOpen`      | `boolean`                                    | no       | —       |                         |
+| `defaultValue`     | `string`                                     | no       | —       |                         |
+| `dir`              | `"rtl" \| "ltr"`                             | no       | —       |                         |
+| `disabled`         | `boolean`                                    | no       | —       |                         |
+| `form`             | `string`                                     | no       | —       |                         |
+| `help`             | `ReactNode`                                  | no       | —       |                         |
+| `items`            | `readonly Option[]`                          | no       | —       |                         |
+| `label`            | `ReactNode`                                  | no       | —       |                         |
+| `name`             | `string`                                     | no       | —       |                         |
+| `onOpenChange`     | `((open: boolean) => void)`                  | no       | —       |                         |
+| `open`             | `boolean`                                    | no       | —       |                         |
+| `options`          | `readonly Option[]`                          | no       | —       | @deprecated use `items` |
+| `placeholder`      | `string`                                     | no       | —       |                         |
+| `required`         | `boolean`                                    | no       | —       |                         |
+| `sizing`           | `"small" \| "medium" \| "default" \| null`   | no       | —       |                         |
+| `state`            | `"warning" \| "error" \| "default" \| null`  | no       | —       |                         |
+| `triggerClassName` | `string`                                     | no       | —       |                         |
+| `variant`          | `"primary" \| "secondary" \| "argo" \| null` | no       | —       |                         |
 
 ### `field.TextAreaField`
 

package/README.md

@@ -23,7 +23,7 @@ It is version-pinned to your lockfile, so it always matches the components you a
 ## Install
 
 ```bash
-yarn add @keboola/design @keboola/tailwind-config
+pnpm add @keboola/design @keboola/tailwind-config
 ```
 
 ## Use
@@ -38,7 +38,7 @@ import '@keboola/design/styles';
 ### Documentation
 
 ```
-$ yarn dev
+$ pnpm dev
 ```
 
 See [Storybook's documentation](https://storybook.js.org/docs/react/writing-stories/introduction) for an introduction to writing stories
@@ -46,13 +46,13 @@ See [Storybook's documentation](https://storybook.js.org/docs/react/writing-stor
 ### Testing
 
 ```
-$ yarn test
+$ pnpm test
 ```
 
 Or in UI mode:
 
 ```
-$ yarn test:ui
+$ pnpm test:ui
 ```
 
 For more information, read [Vitest's documentation](https://vitest.dev/guide/)
@@ -65,18 +65,18 @@ Every story is also run as a test via the [Storybook Vitest addon](https://story
 - **interaction** — each story's `play()` function runs as a test.
 
 ```bash
-yarn workspace @keboola/design test:stories
+pnpm --filter @keboola/design test:stories
 ```
 
 This is the cheap, low-flakiness base layer for testing stories. Screenshot/visual regression is a separate, complementary layer (UT-4060) — the Vitest addon does **not** do screenshot comparison.
 
 **How it's wired:**
 
-- `vitest.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `yarn test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`. It is named `vitest.config.ts` (not `vitest.storybook.config.ts`) so the Storybook "Run tests" button (`@storybook/addon-vitest`) can discover it — the addon only scans `vitest.workspace.*` / `vitest.config.*` / `vite.config.*` names; under any other name it falls back to `vite.config.ts` and crashes the dev server (UT-4243). The jsdom `test` script therefore pins `--config vite.config.ts` explicitly.
+- `vitest.config.ts` — a separate Vitest config (browser mode, Playwright Chromium provider) so `pnpm test` stays jsdom-only and browser-free; story tests are opt-in via `test:stories`. It is named `vitest.config.ts` (not `vitest.storybook.config.ts`) so the Storybook "Run tests" button (`@storybook/addon-vitest`) can discover it — the addon only scans `vitest.workspace.*` / `vitest.config.*` / `vite.config.*` names; under any other name it falls back to `vite.config.ts` and crashes the dev server (UT-4243). The jsdom `test` script therefore pins `--config vite.config.ts` explicitly.
 - `.storybook/vitest.setup.ts` — applies the Storybook `preview` annotations (decorators, globals) so tests render exactly like Storybook.
 - `optimizeDeps.entries` crawls every story up front so Vite optimizes all story dependencies in one pass — without it, a heavy dep (mermaid, codemirror, …) discovered mid-run makes Vite re-optimize and 404 in-flight imports.
 
-**Prerequisites:** build the workspace deps once (`yarn build --filter='@keboola/design^...'`) and install the browser (`yarn workspace @keboola/design exec playwright install chromium`).
+**Prerequisites:** build the workspace deps once (`pnpm build --filter='@keboola/design^...'`) and install the browser (`pnpm --filter @keboola/design exec playwright install chromium`).
 
 **Adding coverage:** nothing to do — every CSF `*.stories.tsx` is picked up automatically. Add a `play()` to a story to turn it into an interaction test. (MDX docs pages — `src/**/*.mdx` — are not executed as tests; the addon only runs CSF stories.)
 
@@ -127,7 +127,7 @@ Worked examples: `src/components/Button/Button.stories.tsx` (click + disabled),
 Coverage is **measured, not gated** — it gives a baseline for the story suite. The default `test:stories` run stays coverage-free and fast; coverage only loads when you opt in:
 
 ```bash
-yarn workspace @keboola/design test:stories:coverage
+pnpm --filter @keboola/design test:stories:coverage
 ```
 
 Same prerequisites as `test:stories` (build workspace deps, install Chromium). Reports land in `packages/design/coverage/` (gitignored): a `text` summary in the console and a browsable `html` report at `coverage/index.html`.

package/dist/constants-D3gaMY-W.d.cts

@@ -0,0 +1,39 @@
+declare const CHUNK_TYPE: {
+    readonly UNCHANGED: "unchanged";
+    readonly ADDED: "added";
+    readonly REMOVED: "removed";
+};
+type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
+type DiffChunk = {
+    type: ChunkType;
+    value: string;
+    /** 1-indexed start line in the old (left) text */
+    oldStart: number;
+    /** 1-indexed end line in the old (left) text */
+    oldEnd: number;
+    /** 1-indexed start line in the new (right) text */
+    newStart: number;
+    /** 1-indexed end line in the new (right) text */
+    newEnd: number;
+};
+/**
+ * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
+ * representing a section that was modified. If only one side exists,
+ * the other is empty (pure insertion or deletion).
+ */
+type MergeConflict = {
+    id: string;
+    oldValue: string;
+    oldStartLine: number;
+    oldEndLine: number;
+    newValue: string;
+    newStartLine: number;
+    newEndLine: number;
+};
+declare const CHANGE_CLASS: {
+    readonly SAFE: "safe";
+    readonly CONFLICT: "conflict";
+};
+type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
+
+export type { ChangeClassification as C, DiffChunk as D, MergeConflict as M };

package/dist/constants-D3gaMY-W.d.ts

@@ -0,0 +1,39 @@
+declare const CHUNK_TYPE: {
+    readonly UNCHANGED: "unchanged";
+    readonly ADDED: "added";
+    readonly REMOVED: "removed";
+};
+type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
+type DiffChunk = {
+    type: ChunkType;
+    value: string;
+    /** 1-indexed start line in the old (left) text */
+    oldStart: number;
+    /** 1-indexed end line in the old (left) text */
+    oldEnd: number;
+    /** 1-indexed start line in the new (right) text */
+    newStart: number;
+    /** 1-indexed end line in the new (right) text */
+    newEnd: number;
+};
+/**
+ * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
+ * representing a section that was modified. If only one side exists,
+ * the other is empty (pure insertion or deletion).
+ */
+type MergeConflict = {
+    id: string;
+    oldValue: string;
+    oldStartLine: number;
+    oldEndLine: number;
+    newValue: string;
+    newStartLine: number;
+    newEndLine: number;
+};
+declare const CHANGE_CLASS: {
+    readonly SAFE: "safe";
+    readonly CONFLICT: "conflict";
+};
+type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
+
+export type { ChangeClassification as C, DiffChunk as D, MergeConflict as M };