entangle-ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # entangle-ui
 
+## 0.2.0
+
+### 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`.
+  - `TreeView`: simplified selected item indicator to background-only (removed left border and box-shadow on selected).
+  - `FloatingPanel`: replaced hardcoded `12px` font-size with theme token.
+  - 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.
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -1,117 +1,171 @@
-# ⚛️ Entangle UI
+# Entangle UI
 
-> Components quantumly entangled for professional editor interfaces
+React + TypeScript component library for building editor-style interfaces.
 
-[![npm version](https://badge.fury.io/js/entangle-ui.svg)](https://www.npmjs.com/package/entangle-ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+`entangle-ui` is focused on dense, keyboard-friendly UI patterns used in tools like 3D editors, node editors, scene inspectors, and technical dashboards.
 
-**🚧 ALPHA VERSION - In active development, not ready for production**
+## Status
 
-## 🌌 Philosophy
+This package is in alpha (`0.1.0-alpha.x`) and still evolving.
 
-Entangle UI brings quantum mechanics principles to interface design. Components are **quantumly entangled** - when one changes state, others respond instantly across your entire application. Built specifically for professional editor interfaces, 3D tools, and precision applications where every interaction matters.
+- API can change between alpha releases.
+- Use in production only if you are comfortable with rapid iteration.
 
-## ⚡ Features
-
-- **🔗 Quantum Entanglement**: Components synchronize instantly across your app
-- **🎯 Precision Controls**: Built for professional editor interfaces
-- **⚫ Minimal & Powerful**: Maximum functionality, minimal visual footprint
-- **📐 TypeScript First**: Complete type safety and IntelliSense support
-- **🌙 Dark Matter Theme**: Designed for professionals who build worlds
-- **🧪 Base UI Foundation**: Built on rock-solid headless components
-
-## 🚀 Quick Start
+## Installation
 
 ```bash
-# Install alpha version
 npm install entangle-ui@alpha
 ```
 
-```tsx
-import { Button, Input } from 'entangle-ui';
+Peer dependencies:
+
+- `react >= 19.1.0`
+- `react-dom >= 19.1.0`
+- `@emotion/react ^11`
+- `@emotion/styled ^11`
+
+## Quick Start
 
-function App() {
+```tsx
+import React from 'react';
+import {
+  ThemeProvider,
+  AppShell,
+  MenuBar,
+  Toolbar,
+  StatusBar,
+} from 'entangle-ui';
+
+export function App() {
   return (
-    <div>
-      <Button>Entangle Reality</Button>
-      <Input placeholder="Enter coordinates..." precision={3} />
-    </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>
+    </ThemeProvider>
   );
 }
 ```
 
-## 🎯 Built For
+## Theming
 
-- 🌍 **Planet generators** & procedural tools
-- 🎮 **Node-based editors** & visual programming
-- 🎨 **3D modeling interfaces** & CAD applications
-- ⚙️ **Parameter control systems** & scientific tools
-- 🔬 **Precision applications** requiring exact values
+Entangle UI ships with design tokens and an Emotion-based `ThemeProvider`.
 
-## 📚 Documentation
+```tsx
+import { ThemeProvider, createTheme } from 'entangle-ui';
+
+const theme = createTheme({
+  colors: {
+    accent: {
+      primary: '#2aa1ff',
+    },
+  },
+});
+
+export function Root({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+```
 
-- **[GitHub](https://github.com/yourusername/entangle-ui)** - Source code and issues
+## What Is Included
 
-## 🧪 Current Status (Alpha)
+### Primitives
 
-### ✅ Available Components
+- `Button`, `IconButton`
+- `Input`, `Text`, `Paper`, `Icon`
+- `Checkbox`, `CheckboxGroup`, `Switch`
+- `Tooltip`, `Popover`, `Collapsible`
 
-- [ ] Button - Quantum interaction states
-- [ ] Input - Precision numeric controls
-- [ ] Slider - Fine-tuned value manipulation
-- [ ] Toggle - Binary state quantum switches
+### Layout
 
-### 🚧 In Development
+- `Stack`, `Flex`, `Grid`, `Spacer`
+- `Accordion`
+- `ScrollArea`
+- `SplitPane`, `SplitPanePanel`
 
-- Vector input controls
-- Color precision pickers
-- Node connection components
-- 3D viewport controls
+### Controls
 
-### 📋 Roadmap
+- `NumberInput`, `Slider`, `Select`, `VectorInput`
+- `ColorPicker`, `ColorPalette`, `ColorSwatch`, `EyeDropper`
+- `TreeView`
+- `CurveEditor` + helpers (`evaluateCurve`, `sampleCurve`, `createLinearCurve`, `domainToCanvas`)
 
-- Canvas integration helpers
-- Advanced theming system
-- Animation state management
-- Plugin architecture
+### Navigation
 
-## 🛠️ Development
+- `Menu`, `useMenu`
+- `Tabs`, `TabList`, `Tab`, `TabPanel`
 
-```bash
-# Clone the repository
-git clone https://github.com/yourusername/entangle-ui.git
-cd entangle-ui
+### Shell
 
-# Install dependencies
-npm install
+- `AppShell`, `useAppShell`
+- `MenuBar`
+- `Toolbar`
+- `StatusBar`
+- `FloatingPanel`, `FloatingManager`
 
-# Start Storybook
-npm run dev
+### Editor
 
-# Run tests
-npm run test
+- `PropertyPanel`, `PropertySection`, `PropertyRow`, `PropertyGroup`
+- `usePropertyUndo`
 
-# Build library
-npm run build
-```
+### Feedback and Form
 
-## 🤝 Contributing
+- `Dialog` primitives (`Dialog`, `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogClose`)
+- `ToastProvider`, `useToast`
+- `FormLabel`, `FormHelperText`, `InputWrapper`
 
-Entangle UI is in active alpha development. We welcome:
+## Development
+
+```bash
+npm install
+npm run dev            # Storybook
+npm run test           # Vitest
+npm run lint
+npm run type-check
+npm run build
+```
 
-- 🐛 **Bug reports** - Help us squash quantum bugs
-- 💡 **Feature requests** - What components do you need?
-- 🔬 **Testing** - Try it in your editor projects
-- 📖 **Documentation** - Help us explain quantum principles
+## Release Workflow
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines.
+This repository uses Changesets.
 
-## 📄 License
+```bash
+npm run changeset
+npm run version-packages
+npm run release
+```
 
-MIT © [Your Name](https://github.com/yourusername)
+## Repository
 
----
+- Source: `https://github.com/SebastianWebdev/entangle-ui`
+- Issues: `https://github.com/SebastianWebdev/entangle-ui/issues`
 
-> _"Spooky action at a distance, but for UI components"_ ⚛️
+## License
 
-**Built for creators who shape digital realities**
+MIT

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 export { Theme, ThemeProvider, Tokens, createTheme, tokens } from '@/theme';
-export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant, Flex, FlexAlign, FlexAlignContent, FlexDirection, FlexJustify, FlexProps, FlexSpacing, FlexWrap, Grid, GridProps, GridSize, GridSpacing, PanelConfig, PanelSize, ScrollArea, ScrollAreaDirection, ScrollAreaProps, ScrollbarVisibility, Spacer, SplitDirection, SplitPane, SplitPanePanel, SplitPanePanelProps, SplitPaneProps, Stack } from '@/components/layout';
+export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant, Flex, FlexAlign, FlexAlignContent, FlexDirection, FlexJustify, FlexProps, FlexSpacing, FlexWrap, Grid, GridProps, GridSize, GridSpacing, PanelConfig, PanelSize, PanelSurface, PanelSurfaceBodyProps, PanelSurfaceFooterProps, PanelSurfaceHeaderProps, PanelSurfaceProps, PanelSurfaceSize, ScrollArea, ScrollAreaDirection, ScrollAreaProps, ScrollbarVisibility, Spacer, SplitDirection, SplitPane, SplitPanePanel, SplitPanePanelProps, SplitPaneProps, Stack } from '@/components/layout';
 export { Button, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariant, Collapsible, CollapsibleProps, CollapsibleSize, CollisionAvoidance, Icon, IconButton, IconProps, IconSize, Input, InputProps, InputSize, Paper, PaperElevation, PaperNestLevel, PaperProps, PaperSpacing, Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTrigger, PopoverTriggerProps, Switch, SwitchProps, SwitchSize, Text, TextAlign, TextColor, TextElement, TextLineHeight, TextProps, TextSize, TextVariant, TextWeight, Tooltip, TooltipCollisionConfig, TooltipCollisionStrategy, TooltipPlacement, TooltipProps } from '@/components/primitives';
 export { CURVE_PRESETS, ColorFormat, ColorInputMode, ColorPalette, ColorPaletteProps, ColorPicker, ColorPickerProps, ColorPickerSize, ColorPreset, ColorSwatch, ColorSwatchProps, CurveBackgroundInfo, CurveBottomBarInfo, CurveData, CurveEditor, CurveEditorProps, CurveEditorSize, CurveKeyframe, CurvePreset, EARTH_PALETTE, EyeDropper, EyeDropperProps, MATERIAL_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, NumberInput, NumberInputProps, PASTEL_PALETTE, PROFESSIONAL_PALETTES, Palette, PaletteColor, PaletteShade, SKIN_TONES_PALETTE, Select, SelectOptionGroup, SelectOptionItem, SelectProps, SelectSize, SelectVariant, Slider, SliderProps, TAILWIND_PALETTE, TangentMode, TreeNodeData, TreeNodeState, TreeSelectionMode, TreeView, TreeViewProps, TreeViewSize, VINTAGE_PALETTE, VectorColorPreset, VectorDimension, VectorInput, VectorInputProps, VectorInputSize, VectorLabelPreset, createLinearCurve, domainToCanvas, evaluateCurve, sampleCurve } from '@/components/controls';
-export { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, TabsSize, TabsVariant } from '@/components/navigation';
+export { ContextMenu, ContextMenuBaseProps, ContextMenuConfig, ContextMenuProps, ContextMenuTargetDetails, ItemSelectionType, Menu, MenuBaseProps, MenuConfig, MenuGroup, MenuItem, MenuProps, MenuSelection, SubmenuTrigger, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, TabsSize, TabsVariant, UseContextMenuTargetResult, useContextMenuTarget, useMenu } from '@/components/navigation';
 export { FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, InputWrapper, InputWrapperProps } from '@/components/form';
 export { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogProps, DialogSize, ToastData, ToastPosition, ToastProvider, ToastProviderProps, ToastSeverity, UseToastReturn, useToast } from '@/components/feedback';
 export { PropertyGroup, PropertyGroupProps, PropertyInspectorSize, PropertyPanel, PropertyPanelProps, PropertyRow, PropertyRowProps, PropertySection, PropertySectionProps, PropertyUndoEntry, UsePropertyUndoOptions, UsePropertyUndoReturn, usePropertyUndo } from '@/components/editor';
+export { AppShell, AppShellContextValue, AppShellProps, AppShellSlotProps, AppShellToolbarSlotProps, FloatingManager, FloatingManagerProps, FloatingPanel, FloatingPanelProps, FloatingPanelSize, MenuBar, MenuBarItemProps, MenuBarMenuProps, MenuBarProps, MenuBarSeparatorProps, MenuBarSize, MenuBarSubProps, Position, StatusBar, StatusBarItemProps, StatusBarProps, StatusBarSectionProps, StatusBarSectionSide, StatusBarSize, StatusBarVariant, Toolbar, ToolbarButtonProps, ToolbarButtonVariant, ToolbarGroupProps, ToolbarOrientation, ToolbarPosition, ToolbarProps, ToolbarSeparatorProps, ToolbarSize, ToolbarSpacerProps, ToolbarToggleProps, useAppShell } from '@/components/shell';
 export { BaseComponent, Size, Variant } from '@/types/common';
 export { Brand, DeepPartial, DeepReadonly, KeyOf, LiteralUnion, NonEmptyArray, Prettify, RequireFields, StrictExclude, ValueOf } from '@/types/utilities';
 export { cn } from '@/utils/cn';