@surrealdb/ui 1.2.12 → 1.2.14

package/.claude/launch.json

@@ -0,0 +1,17 @@
+{
+	"version": "0.0.1",
+	"configurations": [
+		{
+			"name": "storybook",
+			"runtimeExecutable": "npm",
+			"runtimeArgs": ["run", "storybook:dev"],
+			"port": 6006
+		},
+		{
+			"name": "storybook-preview",
+			"runtimeExecutable": "npx",
+			"runtimeArgs": ["storybook", "dev", "-p", "6019", "--ci", "--no-open"],
+			"port": 6019
+		}
+	]
+}

package/.oxfmtrc.json

@@ -0,0 +1,27 @@
+{
+	"$schema": "./node_modules/oxfmt/configuration_schema.json",
+	"useTabs": true,
+	"tabWidth": 4,
+	"printWidth": 100,
+	"singleQuote": false,
+	"jsxSingleQuote": false,
+	"quoteProps": "as-needed",
+	"trailingComma": "all",
+	"semi": true,
+	"arrowParens": "always",
+	"bracketSameLine": false,
+	"bracketSpacing": true,
+	"singleAttributePerLine": true,
+	"sortImports": true,
+	"sortPackageJson": false,
+	"ignorePatterns": [
+		"**/.vscode",
+		"**/.github",
+		"**/.turbo",
+		"**/node_modules",
+		"**/dist",
+		"**/storybook-static",
+		"**/src/constants/icons.ts",
+		"**/src/constants/icons-pure.ts"
+	]
+}

package/.oxlintrc.json

@@ -0,0 +1,23 @@
+{
+	"$schema": "./node_modules/oxlint/configuration_schema.json",
+	"plugins": ["react", "unicorn", "typescript", "oxc"],
+	"categories": {
+		"correctness": "warn"
+	},
+	"rules": {
+		"no-unused-vars": "warn",
+		"unicorn/no-thenable": "off",
+		"react/no-array-index-key": "off",
+		"react/exhaustive-deps": "off"
+	},
+	"ignorePatterns": [
+		"**/.vscode",
+		"**/.github",
+		"**/.turbo",
+		"**/node_modules",
+		"**/dist",
+		"**/storybook-static",
+		"**/src/constants/icons.ts",
+		"**/src/constants/icons-pure.ts"
+	]
+}

package/.zed/settings.json

@@ -1,36 +1,36 @@
 {
-    "languages": {
-        "CSS": { "formatter": { "language_server": { "name": "biome" } } },
-        "HTML": { "formatter": { "language_server": { "name": "biome" } } },
-        "JSON": { "formatter": { "language_server": { "name": "biome" } } },
-        "JSONC": { "formatter": { "language_server": { "name": "biome" } } },
-        "JavaScript": {
-            "formatter": { "language_server": { "name": "biome" } },
-            "code_actions_on_format": {
-                "source.fixAll.biome": true,
-                "source.organizeImports.biome": true
-            }
-        },
-        "TypeScript": {
-            "formatter": { "language_server": { "name": "biome" } },
-            "code_actions_on_format": {
-                "source.fixAll.biome": true,
-                "source.organizeImports.biome": true
-            }
-        },
-        "TSX": {
-            "formatter": { "language_server": { "name": "biome" } },
-            "code_actions_on_format": {
-                "source.fixAll.biome": true,
-                "source.organizeImports.biome": true
-            }
-        }
-    },
-    "lsp": {
-        "biome": {
-            "settings": {
-                "require_config_file": true
-            }
-        }
-    }
+	"languages": {
+		"CSS": { "formatter": { "language_server": { "name": "biome" } } },
+		"HTML": { "formatter": { "language_server": { "name": "biome" } } },
+		"JSON": { "formatter": { "language_server": { "name": "biome" } } },
+		"JSONC": { "formatter": { "language_server": { "name": "biome" } } },
+		"JavaScript": {
+			"formatter": { "language_server": { "name": "biome" } },
+			"code_actions_on_format": {
+				"source.fixAll.biome": true,
+				"source.organizeImports.biome": true
+			}
+		},
+		"TypeScript": {
+			"formatter": { "language_server": { "name": "biome" } },
+			"code_actions_on_format": {
+				"source.fixAll.biome": true,
+				"source.organizeImports.biome": true
+			}
+		},
+		"TSX": {
+			"formatter": { "language_server": { "name": "biome" } },
+			"code_actions_on_format": {
+				"source.fixAll.biome": true,
+				"source.organizeImports.biome": true
+			}
+		}
+	},
+	"lsp": {
+		"biome": {
+			"settings": {
+				"require_config_file": true
+			}
+		}
+	}
 }

package/AGENTS.md

@@ -15,22 +15,22 @@ This is `@surrealdb/ui` — the SurrealDB design system and UI component library
 
 ## Commands
 
-| Command | Description |
-|---|---|
-| `bun install` | Install dependencies |
-| `bun run build` | Production build (outputs to `dist/`) |
-| `bun run storybook:dev` | Start Storybook dev server on port 6006 |
-| `bun run storybook:build` | Build static Storybook site |
-| `bun qc` | Run Biome lint/format check |
-| `bun qa` | Auto-fix Biome lint/format issues |
-| `bun qau` | Auto-fix including unsafe fixes |
-| `bun qts` | TypeScript type check (`tsc --noEmit`) |
-| `bun run test` | Run all Vitest projects (unit + e2e + storybook). Use `bun run test`, not `bun test`, since `bun test` invokes Bun's own test runner. |
-| `bun run test:unit` | Run jsdom-based unit tests in `tests/unit/` |
-| `bun run test:e2e` | Run browser-driven E2E tests in `tests/e2e/` (Playwright + Chromium) |
-| `bun run test:storybook` | Run in-story `play` interaction tests via the Storybook Vitest plugin |
-| `bun run test:watch` | Watch all projects |
-| `bun run icons` | Regenerate icon constants from `icons.zip` (requires `picosvg`) |
+| Command                   | Description                                                                                                                           |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `bun install`             | Install dependencies                                                                                                                  |
+| `bun run build`           | Production build (outputs to `dist/`)                                                                                                 |
+| `bun run storybook:dev`   | Start Storybook dev server on port 6006                                                                                               |
+| `bun run storybook:build` | Build static Storybook site                                                                                                           |
+| `bun qc`                  | Run Biome lint/format check                                                                                                           |
+| `bun qa`                  | Auto-fix Biome lint/format issues                                                                                                     |
+| `bun qau`                 | Auto-fix including unsafe fixes                                                                                                       |
+| `bun qts`                 | TypeScript type check (`tsc --noEmit`)                                                                                                |
+| `bun run test`            | Run all Vitest projects (unit + e2e + storybook). Use `bun run test`, not `bun test`, since `bun test` invokes Bun's own test runner. |
+| `bun run test:unit`       | Run jsdom-based unit tests in `tests/unit/`                                                                                           |
+| `bun run test:e2e`        | Run browser-driven E2E tests in `tests/e2e/` (Playwright + Chromium)                                                                  |
+| `bun run test:storybook`  | Run in-story `play` interaction tests via the Storybook Vitest plugin                                                                 |
+| `bun run test:watch`      | Watch all projects                                                                                                                    |
+| `bun run icons`           | Regenerate icon constants from `icons.zip` (requires `picosvg`)                                                                       |
 
 ## Path Aliases
 
@@ -40,8 +40,8 @@ This is `@surrealdb/ui` — the SurrealDB design system and UI component library
 
 - SCSS modules (`.module.scss`) with `dashesOnly` locals convention — access classes as `styles.myClass`, not `styles["my-class"]`
 - All `.scss` files auto-import `@surrealdb/ui/mixins` via Vite's `additionalData`, providing global access to theme-aware mixins:
-  - `@include light { ... }` / `@include dark { ... }` — color scheme scoping
-  - `@include sm-and-up { ... }`, `@include md-and-down { ... }`, etc. — responsive breakpoints
+    - `@include light { ... }` / `@include dark { ... }` — color scheme scoping
+    - `@include sm-and-up { ... }`, `@include md-and-down { ... }`, etc. — responsive breakpoints
 - Global CSS variables are defined in `src/assets/styles/global.scss` (prefixed `--surreal-*`)
 - Mantine design tokens available as `--mantine-color-*` CSS variables
 - Build output CSS is automatically wrapped in `@layer surreal` by a custom Vite plugin
@@ -49,6 +49,7 @@ This is `@surrealdb/ui` — the SurrealDB design system and UI component library
 ## Exports
 
 The package exposes three entry points:
+
 - `@surrealdb/ui` — all components, hooks, helpers, and constants (from `src/index.ts`)
 - `@surrealdb/ui/styles.css` — compiled CSS (wrapped in `@layer surreal`)
 - `@surrealdb/ui/mixins` — raw SCSS mixins (from `res/_mixins.scss`)
@@ -73,6 +74,7 @@ src/
 ```
 
 Other top-level directories:
+
 - `res/` — SCSS mixins exported as `@surrealdb/ui/mixins`
 - `tests/` — Vitest test suites: `tests/unit/<Feature>/` (jsdom) and `tests/e2e/<Feature>/` (Playwright + Chromium); shared mount/composeStories helpers live in `tests/_setup/`
 - `tools/` — Icon parser script (`icon-parser.ts`)
@@ -95,6 +97,10 @@ Consumers must provide: React 19, Mantine 8, CodeMirror 6 suite, and Slate. Thes
 - The `src/constants/icons.ts` file is auto-generated — do not edit it manually
 - Biome excludes: `.vscode/`, `.github/`, `.storybook/`, `src/constants/icons.ts`, `dist/`, and `*.js` files
 
+## Releasing
+
+See [release.md](doc/release.md)
+
 ## Variants
 
 When adding new variants, take the following into consideration:
@@ -102,4 +108,4 @@ When adding new variants, take the following into consideration:
 - Styling is defined in `src/assets/styles/variants.scss`
 - Types are defined in `src/types/variants.ts`
 - The default variant is configured in `src/theme/mantine.ts`
-- Update the relevant storybook story to show the new variant
+- Update the relevant storybook story to show the new variant

package/CLAUDE.md

@@ -0,0 +1,111 @@
+# CLAUDE.md
+
+This is `@surrealdb/ui` — the SurrealDB design system and UI component library, published to npm as a reusable package for all SurrealDB frontend projects.
+
+## Tooling
+
+- **Runtime & package manager:** Bun (do NOT use npm, yarn, or pnpm)
+- **Build:** Vite 7 in library mode, targeting ES2022 with source maps
+- **Language:** TypeScript with `isolatedDeclarations` enabled — all exported types must be explicitly annotated
+- **UI framework:** React 19 with JSX transform (`react-jsx`)
+- **Component library:** Mantine v8 (peer dependency)
+- **Linter/formatter:** Biome 2.x — 4-space indentation, 100-character line width
+- **Storybook:** Storybook 10 with `@storybook/react-vite`
+- **Testing:** Vitest with Playwright browser provider for Storybook integration tests
+
+## Commands
+
+| Command                   | Description                                                                                                                           |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `bun install`             | Install dependencies                                                                                                                  |
+| `bun run build`           | Production build (outputs to `dist/`)                                                                                                 |
+| `bun run storybook:dev`   | Start Storybook dev server on port 6006                                                                                               |
+| `bun run storybook:build` | Build static Storybook site                                                                                                           |
+| `bun qc`                  | Run Biome lint/format check                                                                                                           |
+| `bun qa`                  | Auto-fix Biome lint/format issues                                                                                                     |
+| `bun qau`                 | Auto-fix including unsafe fixes                                                                                                       |
+| `bun qts`                 | TypeScript type check (`tsc --noEmit`)                                                                                                |
+| `bun run test`            | Run all Vitest projects (unit + e2e + storybook). Use `bun run test`, not `bun test`, since `bun test` invokes Bun's own test runner. |
+| `bun run test:unit`       | Run jsdom-based unit tests in `tests/unit/`                                                                                           |
+| `bun run test:e2e`        | Run browser-driven E2E tests in `tests/e2e/` (Playwright + Chromium)                                                                  |
+| `bun run test:storybook`  | Run in-story `play` interaction tests via the Storybook Vitest plugin                                                                 |
+| `bun run test:watch`      | Watch all projects                                                                                                                    |
+| `bun run icons`           | Regenerate icon constants from `icons.zip` (requires `picosvg`)                                                                       |
+
+## Path Aliases
+
+`@src/*` maps to `./src/*` (configured in `tsconfig.json` and resolved by `vite-tsconfig-paths`).
+
+## Styling
+
+- SCSS modules (`.module.scss`) with `dashesOnly` locals convention — access classes as `styles.myClass`, not `styles["my-class"]`
+- All `.scss` files auto-import `@surrealdb/ui/mixins` via Vite's `additionalData`, providing global access to theme-aware mixins:
+    - `@include light { ... }` / `@include dark { ... }` — color scheme scoping
+    - `@include sm-and-up { ... }`, `@include md-and-down { ... }`, etc. — responsive breakpoints
+- Global CSS variables are defined in `src/assets/styles/global.scss` (prefixed `--surreal-*`)
+- Mantine design tokens available as `--mantine-color-*` CSS variables
+- Build output CSS is automatically wrapped in `@layer surreal` by a custom Vite plugin
+
+## Exports
+
+The package exposes three entry points:
+
+- `@surrealdb/ui` — all components, hooks, helpers, and constants (from `src/index.ts`)
+- `@surrealdb/ui/styles.css` — compiled CSS (wrapped in `@layer surreal`)
+- `@surrealdb/ui/mixins` — raw SCSS mixins (from `res/_mixins.scss`)
+
+## Source Structure
+
+```
+src/
+├── assets/          # Static assets: brand SVGs, picto WebPs, global SCSS styles
+├── constants/       # Generated/static constants (icons.ts, brands.ts, pictos.ts)
+├── editor/          # CodeMirror editor setup: extensions, keybinds, commands, theme
+├── helpers/         # Utility functions (clsx, CDN URL helper, ID generator)
+├── hooks/           # React hooks (useEditor, useStable, useLater, useSort, useSwitch)
+├── lib/
+│   ├── editor/      # Custom Code Mirror editor configuration and extensions
+│   └── markdown/    # Custom Code Mirror based markdown editor and renderer
+├── primitives/      # React UI components (Icon, CodeBlock, Spinner, VideoPlayer, etc.)
+├── stories/         # Storybook stories organized by category
+├── syntax/          # Syntax highlighting: language definitions, highlighter, theme
+├── theme/           # Mantine theme override (mantine.ts)
+└── types/           # TypeScript module augmentations for Mantine (colors, variants, spacing)
+```
+
+Other top-level directories:
+
+- `res/` — SCSS mixins exported as `@surrealdb/ui/mixins`
+- `tests/` — Vitest test suites: `tests/unit/<Feature>/` (jsdom) and `tests/e2e/<Feature>/` (Playwright + Chromium); shared mount/composeStories helpers live in `tests/_setup/`
+- `tools/` — Icon parser script (`icon-parser.ts`)
+- `.storybook/` — Storybook configuration (main, preview, vitest setup)
+- `.github/workflows/` — CI (`check.yml`) and publish (`publish.yml`) workflows
+- `dist/` — Build output (gitignored)
+
+## Peer Dependencies
+
+Consumers must provide: React 19, Mantine 8, CodeMirror 6 suite, and Slate. These are externalized during build.
+
+## CI/CD
+
+- **check.yml** — Runs on push/PR to `main`: Biome lint, TypeScript check, build, and three independent test jobs (`test-unit`, `test-e2e`, `test-storybook`) on Bun 1.2.23. The two browser jobs install Playwright Chromium with `bunx playwright install --with-deps chromium`.
+- **publish.yml** — Triggered by GitHub release: asserts `package.json` version matches git tag, builds, packs, and publishes to npm
+
+## Conventions
+
+- `useStable` hook is configured as returning a stable reference in Biome's `useExhaustiveDependencies` rule — do not list its return value in dependency arrays
+- The `src/constants/icons.ts` file is auto-generated — do not edit it manually
+- Biome excludes: `.vscode/`, `.github/`, `.storybook/`, `src/constants/icons.ts`, `dist/`, and `*.js` files
+
+## Releasing
+
+See [release.md](doc/release.md)
+
+## Variants
+
+When adding new variants, take the following into consideration:
+
+- Styling is defined in `src/assets/styles/variants.scss`
+- Types are defined in `src/types/variants.ts`
+- The default variant is configured in `src/theme/mantine.ts`
+- Update the relevant storybook story to show the new variant

package/README.md

@@ -18,8 +18,8 @@ import { MantineProvider } from "@mantine/core";
 import { MANTINE_THEME } from "@surrealdb/ui/theme";
 
 <MantineProvider theme={MANTINE_THEME}>
-  <App />
-</MantineProvider>
+	<App />
+</MantineProvider>;
 ```
 
 Finally, use the components:
@@ -27,9 +27,12 @@ Finally, use the components:
 ```tsx
 import { Heading } from "@surrealdb/ui";
 
-<Heading kicker="Foo" description="Bar">
+<Heading
+	kicker="Foo"
+	description="Bar"
+>
 	Hello world
-</Heading>
+</Heading>;
 ```
 
 ## Markdown editing and rendering
@@ -67,6 +70,7 @@ bun run storybook:dev
 The icon tool is used to convert the SVG icons to a format that can be used in the UI Kit.
 
 ### Requirements
+
 - Install [picosvg](https://github.com/googlefonts/picosvg)
 - Export an SVG zip and locate it in the root of the project.
 
@@ -79,13 +83,14 @@ This will generate the `src/constants/icons.ts` file.
 ## Notes
 
 ### Optimise pictos
+
 ```
-mkdir -p out                   
-for f in *.png; do 
-  magick "$f" \             
+mkdir -p out
+for f in *.png; do
+  magick "$f" \
     -resize 500x500 \
-    -background none \   
-    -gravity center \                                    
+    -background none \
+    -gravity center \
     -extent 500x500 \
     PNG32:"out/${f%.*}.png"
   magick "out/${f%.*}.png" -define webp:lossless=true "out/${f%.*}.webp"
@@ -93,4 +98,4 @@ for f in *.png; do
 done
 ```
 
-Gradient pictos are synced from Figma via `tools/picto-sync.ts`. Export the inner VECTOR child of each `*_vector` component (not the outer symbol/frame) using Figma `get_screenshot` with `contentsOnly: true` — `download_assets` bakes in the artboard background.
+Gradient pictos are synced from Figma via `tools/picto-sync.ts`. Export the inner VECTOR child of each `*_vector` component (not the outer symbol/frame) using Figma `get_screenshot` with `contentsOnly: true` — `download_assets` bakes in the artboard background.

package/dist/icons.d.ts

@@ -225,6 +225,8 @@ export declare const KeyboardShift: string;
 
 export declare const LangC: string;
 
+export declare const LangDart: string;
+
 export declare const LangDotNet: string;
 
 export declare const LangGo: string;
@@ -326,6 +328,8 @@ export declare const Routes: string;
 
 export declare const Sandbox: string;
 
+export declare const Seal: string;
+
 export declare const Search: string;
 
 export declare const Send: string;