@surrealdb/ui 1.1.0 → 1.2.0

package/.zed/settings.json

@@ -0,0 +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
+            }
+        }
+    }
+}

package/AGENTS.md

@@ -25,7 +25,11 @@ This is `@surrealdb/ui` — the SurrealDB design system and UI component library
 | `bun qa` | Auto-fix Biome lint/format issues |
 | `bun qau` | Auto-fix including unsafe fixes |
 | `bun qts` | TypeScript type check (`tsc --noEmit`) |
-| `bun test` | Run all tests |
+| `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
@@ -60,8 +64,8 @@ src/
 ├── helpers/         # Utility functions (clsx, CDN URL helper, ID generator)
 ├── hooks/           # React hooks (useEditor, useStable, useLater, useSort, useSwitch)
 ├── lib/
-│   ├── markdown/    # Custom stack-based markdown parser and React renderer
-│   └── yoopta/      # Yoopta block editor plugins (Mantine-styled)
+│   ├── 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
@@ -71,6 +75,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`)
 - `.storybook/` — Storybook configuration (main, preview, vitest setup)
 - `.github/workflows/` — CI (`check.yml`) and publish (`publish.yml`) workflows
@@ -78,11 +83,11 @@ Other top-level directories:
 
 ## Peer Dependencies
 
-Consumers must provide: React 19, Mantine 8, CodeMirror 6 suite, Yoopta 6, and Slate. These are externalized during build.
+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 tests (Bun 1.2.23)
+- **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

package/README.md

@@ -2,6 +2,36 @@
 
 The SurrealDB UI Kit defines the design system and UI primitives for use throughout all frontend projects at SurrealDB.
 
+## Using the UI Kit
+
+First, import the styles and fonts:
+
+```tsx
+import "@surrealdb/ui/styles.css";
+import "@surrealdb/ui/fonts.css";
+```
+
+Then, configure the Mantine theme:
+
+```tsx
+import { MantineProvider } from "@mantine/core";
+import { MANTINE_THEME } from "@surrealdb/ui/theme";
+
+<MantineProvider theme={MANTINE_THEME}>
+  <App />
+</MantineProvider>
+```
+
+Finally, use the components:
+
+```tsx
+import { Heading } from "@surrealdb/ui";
+
+<Heading kicker="Foo" description="Bar">
+	Hello world
+</Heading>
+```
+
 ## Getting Started
 
 To install dependencies:

package/REVIEW.md

@@ -50,7 +50,7 @@ Before marking any task as done, verify every applicable section below.
 ## Dependencies
 
 - **Justify new packages**: new external dependencies require justification. Prefer small helper functions over adding utility packages.
-- **Peer vs direct**: UI framework dependencies (React, Mantine, CodeMirror, Yoopta, Slate) are peer dependencies — never add them to `dependencies`.
+- **Peer vs direct**: UI framework dependencies (React, Mantine, CodeMirror, Slate) are peer dependencies — never add them to `dependencies`.
 - **Package manager**: use `bun` exclusively. Do not use npm, yarn, or pnpm commands. Do not commit `package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`.
 
 ## Generated Files

package/dist/fonts.css

@@ -0,0 +1 @@
+@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/8bbfa6e01a9e6a0f.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/12b57c6beacdbca0.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/c6a3f4e555097159.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/b921df26851c5aca.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/9ff55a8a9670220d.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/0d2c2f665b0f41ed.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/23645aad5ccc2b92.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/c6c31cb1350b2544.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/93fc40a807be6880.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/9c9751ca111e97c2.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(./assets/a865edea076e0166.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/dist/{yoopta.d.ts → fonts.d.ts}

@@ -120,15 +120,15 @@ declare module "@mantine/core" {
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
-    interface MantineThemeColorsOverride {
-        colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
+    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
+    interface MantineThemeSizesOverride {
+        spacing: Record<ExtendedCustomSizes, string>;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
-    interface MantineThemeSizesOverride {
-        spacing: Record<ExtendedCustomSizes, string>;
+    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
+    interface MantineThemeColorsOverride {
+        colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
     }
 }

package/dist/fonts.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=fonts.js.map

package/dist/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/icons.d.ts

@@ -8,14 +8,24 @@ export declare const Alert: string;
 
 export declare const API: string;
 
+export declare const ArrowDown: string;
+
 export declare const ArrowDownFat: string;
 
+export declare const ArrowEnter: string;
+
 export declare const ArrowLeft: string;
 
 export declare const ArrowLeftFat: string;
 
+export declare const ArrowRight: string;
+
+export declare const ArrowUp: string;
+
 export declare const ArrowUpRight: string;
 
+export declare const Atom: string;
+
 export declare const Auth: string;
 
 export declare const AuthKeyhole: string;
@@ -26,6 +36,8 @@ export declare const Balance: string;
 
 export declare const Book: string;
 
+export declare const Bookmark: string;
+
 export declare const Braces: string;
 
 export declare const BrandBluesky: string;
@@ -58,6 +70,8 @@ export declare const Bug: string;
 
 export declare const Bullhorn: string;
 
+export declare const Business: string;
+
 export declare const Calculator: string;
 
 export declare const Cancel: string;
@@ -128,6 +142,8 @@ export declare const Designer: string;
 
 export declare const Discord: string;
 
+export declare const DistributedStorage: string;
+
 export declare const Dollar: string;
 
 export declare const DotsVertical: string;
@@ -194,6 +210,8 @@ export declare const Index: string;
 
 export declare const Info: string;
 
+export declare const Integration: string;
+
 declare const JSON_2: string;
 export { JSON_2 as JSON }
 
@@ -217,6 +235,8 @@ export declare const Marker: string;
 
 export declare const Maximize: string;
 
+export declare const MCP: string;
+
 export declare const Memory: string;
 
 export declare const Minimize: string;
@@ -235,6 +255,8 @@ export declare const Namespace: string;
 
 export declare const Newspaper: string;
 
+export declare const Office: string;
+
 export declare const Open: string;
 
 export declare const OpenFolder: string;
@@ -253,6 +275,9 @@ export declare const PinOff: string;
 
 export declare const Play: string;
 
+declare const Plugin_2: string;
+export { Plugin_2 as Plugin }
+
 export declare const Plus: string;
 
 export declare const Power: string;
@@ -303,6 +328,8 @@ export declare const Sun: string;
 
 export declare const Surreal: string;
 
+export declare const Surrealism: string;
+
 export declare const Surrealist: string;
 
 export declare const Table: string;
@@ -470,15 +497,15 @@ declare module "@mantine/core" {
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
-    interface MantineThemeColorsOverride {
-        colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
+    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
+    interface MantineThemeSizesOverride {
+        spacing: Record<ExtendedCustomSizes, string>;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
-    interface MantineThemeSizesOverride {
-        spacing: Record<ExtendedCustomSizes, string>;
+    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
+    interface MantineThemeColorsOverride {
+        colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
     }
 }