entangle-ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,11 +1,127 @@
 # entangle-ui
 
+## 0.4.0
+
+### Minor Changes
+
+- [#27](https://github.com/SebastianWebdev/entangle-ui/pull/27) [`2233f75`](https://github.com/SebastianWebdev/entangle-ui/commit/2233f75f7adbf07023bd5c897acc7426a7f1b041) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add ChatPanel component set for AI assistant chat interfaces.
+
+  **New components:**
+  - `ChatPanel` — top-level container with density variants (`compact` | `default` | `comfortable`)
+  - `ChatMessageList` — scrollable message list with auto-scroll and sticky date headers
+  - `ChatMessage` — single message row with role-based alignment, error state with red tint
+  - `ChatBubble` — styled message bubble (user / assistant / system)
+  - `ChatInput` — multiline input with bottom toolbar, themed scrollbar, and submit handling
+  - `ChatInputToolbar` — action bar below the input (attach, context, model picker)
+  - `ChatTypingIndicator` — animated dot indicator for assistant responses
+  - `ChatToolCall` — expandable tool/function call display with status badge
+  - `ChatCodeBlock` — syntax-highlighted code block with copy button
+  - `ChatAttachmentChip` — file attachment chip with icon, name, and remove action
+  - `ChatContextChip` — context reference chip (file, selection, symbol)
+  - `ChatEmptyState` — placeholder shown when conversation is empty
+  - `ChatActionBar` — per-message action bar (copy, retry, edit)
+
+  **New hooks:**
+  - `useChatMessages` — message list state management (add, update, remove, clear)
+  - `useChatInput` — input state with submit, history navigation, and composition handling
+  - `useChatScroll` — auto-scroll with scroll-to-bottom detection and manual override
+
+  **New icons:**
+  - `AiChatIcon` — chat bubble with sparkle accent
+  - `AiSparklesIcon` — three 4-pointed sparkle stars (enlarged for better visibility)
+  - `RobotIcon` — robot face icon
+
+- [#25](https://github.com/SebastianWebdev/entangle-ui/pull/25) [`3b9eff2`](https://github.com/SebastianWebdev/entangle-ui/commit/3b9eff278fba77b2a945acaed2ad67855ba084bc) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Migrate all components from Emotion CSS-in-JS to Vanilla Extract (zero-runtime, build-time CSS).
+
+  **Breaking changes:**
+  - The `css` prop is no longer supported on migrated components. Use `className` and `style` instead.
+  - Peer dependency: `@vanilla-extract/css`, `@vanilla-extract/recipes`, and `@vanilla-extract/dynamic` are now required.
+  - Peer dependency renamed: `@base-ui-components/react` → `@base-ui/react` (^1.1.0). The upstream package was renamed.
+
+  **New exports:**
+  - `vars` — Theme contract object (`vars.colors.*`, `vars.spacing.*`, etc.) mapping to stable `--etui-*` CSS custom properties.
+  - `darkThemeValues` — Default dark theme token values.
+  - `createCustomTheme(selector, overrides)` — Helper to create custom themes in `.css.ts` files.
+  - `VanillaThemeProvider` — Optional scoped theme wrapper component.
+  - `cx(...classes)` — Utility for composing class names.
+
+  **Migration details:**
+  - ~60 styled components across all categories (primitives, layout, controls, form, navigation, feedback, editor, shell) now use Vanilla Extract recipes and styles.
+  - Theme tokens are exposed as CSS custom properties (`--etui-color-*`, `--etui-spacing-*`, etc.) that can be overridden with plain CSS.
+  - Legacy `Dialog.styled.ts` and `Menu.styled.ts` files removed.
+  - Emotion dependencies remain for the transition period but are no longer used by any library component.
+
+  **Build fixes:**
+  - Add `@rollup/plugin-commonjs` to fix Rollup build failure caused by `@vanilla-extract/css` importing the CJS-only `cssesc` module with ESM default import syntax.
+  - Fix dependency classification — move build-only packages to devDependencies for cleaner library output.
+
+  **Dependency updates:**
+  - Migrate `@base-ui-components/react` → `@base-ui/react` ^1.1.0 (upstream rename).
+  - Bump all dependencies to latest safe versions.
+  - Narrow `MenuBaseProps` from `HTMLElement` to `HTMLDivElement` to match new `@base-ui/react` API.
+
+  **Other fixes:**
+  - Replace unicode characters with proper Icon components in FloatingPanel.
+  - Restore custom gradient backgrounds in FullEditor story.
+  - Fix optional chaining to satisfy stricter `@typescript-eslint/prefer-optional-chain`.
+
+  **Documentation:**
+  - Add `docs/quickstart.md` — installation, setup, full component catalog, common patterns.
+  - Add `docs/theming.md` — complete token reference, customization methods, CSS property names.
+  - Add `docs/styling.md` — Vanilla Extract recipes, dynamic vars, Emotion patterns, conventions.
+
+- [#29](https://github.com/SebastianWebdev/entangle-ui/pull/29) [`94eb3d0`](https://github.com/SebastianWebdev/entangle-ui/commit/94eb3d015f396151d9344fea378e0ce6dd957e23) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Remove Emotion CSS-in-JS dependency entirely — all styling now uses Vanilla Extract (zero-runtime, compile-time CSS)
+
+  ### Breaking Changes
+  - `@emotion/react` and `@emotion/styled` are no longer peer dependencies
+  - Removed exports: `createTheme`, `tokens`, `Theme`, `Tokens` types
+  - Removed `css` prop from `BaseComponent` interface
+  - `ThemeProvider` is now a no-op pass-through (kept for compatibility)
+
+  ### Migration
+  - Replace `import { createTheme, tokens } from 'entangle-ui'` with `import { vars, darkThemeValues } from 'entangle-ui'`
+  - Replace `import type { Theme } from 'entangle-ui'` with `import type { ThemeVars } from 'entangle-ui'`
+  - Use `className` + `style` props instead of `css` prop
+  - Theme tokens: use `vars.colors.*`, `vars.spacing.*` from Vanilla Extract contract
+
+- [#28](https://github.com/SebastianWebdev/entangle-ui/pull/28) [`c0cb878`](https://github.com/SebastianWebdev/entangle-ui/commit/c0cb878f6e443e0b42e272f6ec40b23d047cbf01) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add shared canvas primitives layer, CartesianPicker, and ViewportGizmo components.
+
+  **New components:**
+  - `CartesianPicker` — A 2D point selector with canvas-based rendering, drag interaction, keyboard navigation, and full accessibility support. Supports controlled/uncontrolled modes, custom domains, grid snapping, and extensible bottom bar and background renderers.
+  - `ViewportGizmo` — A 3D orientation widget (like Blender/Maya viewport cubes) with orbiting, axis snapping, preset views, keyboard navigation, and depth-sorted rendering. Supports Y-up and Z-up conventions, configurable axis colors, and multiple interaction modes.
+
+  **New shared canvas primitives (`primitives/canvas/`):**
+  - `CanvasContainer` — Responsive canvas wrapper with DPR handling, ResizeObserver support, ARIA live region, and pointer event forwarding.
+  - `useCanvasSetup` — Hook for canvas DPR setup, resize tracking, and context management.
+  - `useCanvasRenderer` — Hook for requestAnimationFrame-based render loops with automatic cleanup.
+  - `canvasDrawing` — Pure utility functions for grid, axis labels, crosshair, point marker, origin axes, and domain bounds rendering.
+  - `canvasCoords` — Coordinate conversion utilities (domain-to-canvas, canvas-to-domain).
+  - `canvasTheme` — Theme resolution from CSS custom properties for canvas 2D contexts.
+
+  **CurveEditor refactor:**
+  - CurveEditor now consumes the shared canvas primitives layer with zero test regressions.
+
+  **Next.js compatibility:**
+  - Added `'use client'` directives to all components and hooks that require client-side rendering.
+
+  **New exports:**
+  - `CartesianPicker`, `CartesianPickerProps`, `CartesianBottomBarInfo`
+  - `ViewportGizmo`, `ViewportGizmoProps`, `GizmoOrientation`, `GizmoPresetView`, `GizmoUpAxis`, `GizmoAxisColorPreset`, `GizmoAxisConfig`
+  - `eulerToRotationMatrix`, `projectToCanvas`, `projectAxes`, `gizmoHitTest`, `presetViewToOrientation`, `quaternionToEuler`, `axisToPresetView`
+  - `CanvasContainer`, `CanvasContainerProps`, `CanvasViewport`, `DomainBounds`, `Point2D`, `CanvasThemeColors`, `CanvasBackgroundInfo`
+  - `domainToCanvas`, `canvasToDomain`, `resolveCanvasTheme`
+  - `drawGrid`, `drawDomainBounds`, `drawAxisLabels`, `drawCrosshair`, `drawPointMarker`, `drawOriginAxes`, `formatLabel`
+  - `useCanvasSetup`, `useCanvasRenderer`
+
+### Patch Changes
+
+- [#29](https://github.com/SebastianWebdev/entangle-ui/pull/29) [`d1ae3c8`](https://github.com/SebastianWebdev/entangle-ui/commit/d1ae3c84fce0b6e5138d57c97614d33d5f5c410d) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add 'use client' directives to all component files for Next.js App Router compatibility, upgrade Storybook from 9.0.6 to 10.2.8, use ScrollArea in ChatMessageList, and add ResizeObserver polyfill to test setup
+
 ## 0.3.0
 
 ### Minor Changes
 
 - [#24](https://github.com/SebastianWebdev/entangle-ui/pull/24) [`7c350bb`](https://github.com/SebastianWebdev/entangle-ui/commit/7c350bb1ec812a4c4e3ab44c36bc280920aa61c0) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Switch to fully tree-shakeable ESM build with preserveModules
-
   - Replace monolithic bundle with per-module ESM output (`dist/esm/`)
   - Drop CJS output — ESM-only package
   - Add `sideEffects: false` and `exports` field to package.json
@@ -28,19 +144,16 @@
 ### Minor Changes
 
 - [#19](https://github.com/SebastianWebdev/entangle-ui/pull/19) [`497d0f5`](https://github.com/SebastianWebdev/entangle-ui/commit/497d0f540f8abdf853cdf88aff8e944fee59d378) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - ### App Shell and Navigation
-
   - Added `topChromeSeparator` and `sideChromeSeparator` props in `AppShell` to control border/shadow separation between top and side chrome areas.
   - Refined `Tabs` visual behavior for compact editor layouts and added `pillsFrame` prop to optionally disable the pills container frame.
   - Updated closable tabs to use the library `CloseIcon` by default.
 
   ### Menu and Inspector Improvements
-
   - Added configurable menu dropdown gap via `menuOffset` in `MenuBar`.
   - Extended `PropertyPanel` with configurable `contentTopSpacing` and new `contentBottomSpacing` for better control of inspector spacing.
   - Adjusted property row padding and full-width control layout to better support dense controls (including sliders and curve editor rows).
 
   ### Typography
-
   - Bumped default UI text from 10px (`fontSize.xs`) to 12px (`fontSize.md`) across interactive components: `Menu`, `MenuBar`, `Select`, `Button`, `Input`, `NumberInput`, `TreeView`, `StatusBar`, `FloatingPanel`, and `PropertyInspector` (rows, sections, search, panel).
   - Kept 10px for true secondary text: helper text, tooltips, group labels, toast messages, axis labels.
   - `TreeView`: fixed `line-height: 1` cutting off descenders (p/q/g/y), now uses theme `lineHeight.normal`.
@@ -49,7 +162,6 @@
   - Added `ContextMenu` component with submenu support, icon slots, and keyboard navigation.
 
   ### Layout and Rendering Fixes
-
   - Fixed `SplitPane` size reconciliation to avoid 1-2px layout drift caused by rounding.
   - Improved overflow behavior in shell regions (`Toolbar`, `StatusBar`, tabs panels, and side slots) to prevent content from bleeding outside container bounds.
   - Improved `CurveEditor` axis label layout and spacing when `labelX` / `labelY` are provided.
@@ -59,7 +171,6 @@
 ### Minor Changes
 
 - [#17](https://github.com/SebastianWebdev/entangle-ui/pull/17) [`0854066`](https://github.com/SebastianWebdev/entangle-ui/commit/0854066dbf38c5d45bca24dc861c9eb03a1e98b3) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - ### New Components
-
   - **Checkbox & CheckboxGroup** — Controlled/uncontrolled boolean input with indeterminate state, label positioning, sizes (sm/md/lg), variants (default/filled), and array value management via CheckboxGroup
   - **Switch** — Toggle control with controlled/uncontrolled modes, label positioning, sizes, error state, and animated track/thumb
   - **Select** — Dropdown single-value selection with search/filter, grouped options, keyboard navigation, clearable option, portal-based dropdown, sizes and variants (default/ghost/filled)
@@ -76,7 +187,6 @@
   - **Collapsible** — Headless collapsible primitive for expandable content
 
   ### Refactoring & Improvements
-
   - Translated all Polish comments and JSDoc to English across the entire codebase
   - Added `forwardRef` and `displayName` to all primitive and layout components
   - Added `React.memo` to stateless presentational components (Icon, Paper, Text, Spacer, FormLabel, FormHelperText, InputWrapper)
@@ -86,7 +196,6 @@
   - Added comprehensive keyboard navigation tests for Button, Input, NumberInput, Slider, and Menu
 
   ### CI/CD
-
   - Added GitHub Actions CI workflow (lint, build, type-check, test on PRs and main)
   - Added GitHub Actions release workflow with Changesets and npm OIDC Trusted Publishing
   - Configured Changesets for automated version management and changelog generation

package/README.md

@@ -6,7 +6,7 @@ React + TypeScript component library for building editor-style interfaces.
 
 ## Status
 
-This package is in alpha (`0.1.0-alpha.x`) and still evolving.
+This package is in alpha and still evolving.
 
 - API can change between alpha releases.
 - Use in production only if you are comfortable with rapid iteration.
@@ -21,76 +21,114 @@ Peer dependencies:
 
 - `react >= 19.1.0`
 - `react-dom >= 19.1.0`
-- `@emotion/react ^11`
-- `@emotion/styled ^11`
+- `@base-ui/react ^1.1.0`
+- `@floating-ui/react ^0.27.17`
 
 ## Quick Start
 
 ```tsx
-import React from 'react';
-import {
-  ThemeProvider,
-  AppShell,
-  MenuBar,
-  Toolbar,
-  StatusBar,
-} from 'entangle-ui';
+import 'entangle-ui/darkTheme.css'; // registers --etui-* CSS custom properties on :root
+
+import { AppShell, MenuBar, Toolbar, StatusBar } from 'entangle-ui';
 
 export function App() {
   return (
-    <ThemeProvider>
-      <div style={{ width: '100vw', height: '100vh' }}>
-        <AppShell>
-          <AppShell.MenuBar>
-            <MenuBar>
-              <MenuBar.Menu label="File">
-                <MenuBar.Item onClick={() => {}}>New</MenuBar.Item>
-              </MenuBar.Menu>
-            </MenuBar>
-          </AppShell.MenuBar>
-
-          <AppShell.Toolbar>
-            <Toolbar aria-label="Main toolbar">
-              <Toolbar.Button onClick={() => {}}>Run</Toolbar.Button>
-            </Toolbar>
-          </AppShell.Toolbar>
-
-          <AppShell.Dock>
-            <div style={{ padding: 16 }}>Editor content</div>
-          </AppShell.Dock>
-
-          <AppShell.StatusBar>
-            <StatusBar>
-              <StatusBar.Section>
-                <StatusBar.Item>Ready</StatusBar.Item>
-              </StatusBar.Section>
-            </StatusBar>
-          </AppShell.StatusBar>
-        </AppShell>
-      </div>
-    </ThemeProvider>
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <AppShell>
+        <AppShell.MenuBar>
+          <MenuBar>
+            <MenuBar.Menu label="File">
+              <MenuBar.Item onClick={() => {}}>New</MenuBar.Item>
+            </MenuBar.Menu>
+          </MenuBar>
+        </AppShell.MenuBar>
+
+        <AppShell.Toolbar>
+          <Toolbar aria-label="Main toolbar">
+            <Toolbar.Button onClick={() => {}}>Run</Toolbar.Button>
+          </Toolbar>
+        </AppShell.Toolbar>
+
+        <AppShell.Dock>
+          <div style={{ padding: 16 }}>Editor content</div>
+        </AppShell.Dock>
+
+        <AppShell.StatusBar>
+          <StatusBar>
+            <StatusBar.Section>
+              <StatusBar.Item>Ready</StatusBar.Item>
+            </StatusBar.Section>
+          </StatusBar>
+        </AppShell.StatusBar>
+      </AppShell>
+    </div>
   );
 }
 ```
 
 ## Theming
 
-Entangle UI ships with design tokens and an Emotion-based `ThemeProvider`.
+Entangle UI uses [Vanilla Extract](https://vanilla-extract.style/) for zero-runtime styling. All theme tokens are exposed as stable CSS custom properties prefixed with `--etui-*`.
 
-```tsx
-import { ThemeProvider, createTheme } from 'entangle-ui';
+### Default dark theme
+
+Import the dark theme CSS to register all `--etui-*` variables on `:root`:
+
+```ts
+import 'entangle-ui/darkTheme.css';
+```
+
+### Custom themes
+
+Override tokens with plain CSS — no build tools required:
 
-const theme = createTheme({
+```css
+.my-theme {
+  --etui-color-accent-primary: #2aa1ff;
+  --etui-color-bg-primary: #0d1117;
+  --etui-spacing-md: 10px;
+}
+```
+
+Or use the `createCustomTheme` helper in a `.css.ts` file for type-safe overrides:
+
+```ts
+// myTheme.css.ts
+import { createCustomTheme } from 'entangle-ui';
+
+createCustomTheme('.my-theme', {
   colors: {
-    accent: {
-      primary: '#2aa1ff',
-    },
+    accent: { primary: '#2aa1ff' },
+    background: { primary: '#0d1117' },
   },
 });
+```
 
-export function Root({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-}
+Then wrap your app:
+
+```tsx
+import { VanillaThemeProvider } from 'entangle-ui';
+import './myTheme.css';
+
+<VanillaThemeProvider className="my-theme">
+  <App />
+</VanillaThemeProvider>;
+```
+
+### Theme contract
+
+Access theme tokens programmatically in `.css.ts` files via the `vars` object:
+
+```ts
+import { style } from '@vanilla-extract/css';
+import { vars } from 'entangle-ui';
+
+export const card = style({
+  background: vars.colors.surface.default,
+  padding: vars.spacing.md,
+  borderRadius: vars.borderRadius.md,
+  color: vars.colors.text.primary,
+});
 ```
 
 ## What Is Included
@@ -140,6 +178,14 @@ export function Root({ children }: { children: React.ReactNode }) {
 - `ToastProvider`, `useToast`
 - `FormLabel`, `FormHelperText`, `InputWrapper`
 
+### Utilities
+
+- `vars` — Theme contract object mapping to `--etui-*` CSS custom properties
+- `darkThemeValues` — Default dark theme token values
+- `createCustomTheme(selector, overrides)` — Type-safe custom theme helper
+- `VanillaThemeProvider` — Scoped theme wrapper component
+- `cx(...classes)` — Class name composition utility
+
 ## Development
 
 ```bash

package/dist/esm/_virtual/cjs.js

@@ -0,0 +1,4 @@
+import { __require as requireCjs } from '../node_modules/deepmerge/dist/cjs.js';
+
+requireCjs();
+//# sourceMappingURL=cjs.js.map

package/dist/esm/_virtual/cjs.js.map

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

package/dist/esm/_virtual/cssesc.js

@@ -0,0 +1,4 @@
+import { __require as requireCssesc } from '../node_modules/cssesc/cssesc.js';
+
+requireCssesc();
+//# sourceMappingURL=cssesc.js.map

package/dist/esm/_virtual/cssesc.js.map

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

package/dist/esm/assets/src/components/controls/CartesianPicker/CartesianPicker.css.ts.vanilla-Ccao9ycw.css

@@ -0,0 +1,23 @@
+.CartesianPicker_cartesianPickerRecipe__tqma2q1 {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--etui-color-border-default);
+  border-radius: var(--etui-radius-md);
+  overflow: hidden;
+  background: var(--etui-color-bg-secondary);
+}
+.CartesianPicker_cartesianPickerRecipe_disabled_true__tqma2q2 {
+  opacity: 0.6;
+}
+.CartesianPicker_cartesianPickerRecipe_responsive_true__tqma2q4 {
+  width: 100%;
+}
+.CartesianPicker_cartesianPickerRecipe_responsive_false__tqma2q5 {
+  width: var(--pickerWidthVar__tqma2q0);
+}
+.CartesianPicker_bottomBarStyle__tqma2q6 {
+  border-top: 1px solid var(--etui-color-border-default);
+  background: var(--etui-color-surface-default);
+  padding: var(--etui-spacing-xs) var(--etui-spacing-sm);
+  flex-shrink: 0;
+}