entangle-ui 0.1.0-alpha.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,73 @@
+# 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
+
+- [#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)
+  - **Tabs** — Compound component (Tabs, TabList, Tab, TabPanel) with variants (underline/pills/enclosed), vertical orientation, closable tabs, fullWidth mode, and keepMounted option
+  - **Accordion** — Compound component (Accordion, AccordionItem, AccordionTrigger, AccordionContent) with single/multiple expansion, collapsible option, variants, CSS grid animation
+  - **Popover** — Floating content container with focus trap, click outside/Escape handling, 12 placements, matchTriggerWidth, portal rendering, and scale+opacity animation
+  - **ScrollArea** — Custom scrollbar styling with keyboard scrolling support
+  - **SplitPane** — Draggable panel divider with configurable min/max sizes and collapse/expand
+  - **TreeView** — Hierarchical tree with keyboard navigation, selection management, and useTreeState hook
+  - **VectorInput** — Multi-value input (x/y/z/w) with linked/unlinked mode and per-component NumberInput editing
+  - **ColorPicker** — Full-featured color input with ColorArea, HueSlider, AlphaSlider, ColorInputs (Hex/RGB/HSL), ColorPalette, ColorPresets (700+ colors), ColorSwatch, and EyeDropper
+  - **Dialog** — Modal overlay with DialogHeader, DialogBody, DialogFooter, DialogClose, focus trap, and animations
+  - **Toast** — Notification system with ToastProvider, ToastContainer, ToastItem, useToast hook, auto-dismiss, progress bar, and severity variants
+  - **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)
+  - Split monolithic Menu.tsx (693 lines) into modular files (types, hook, helpers, styled, component)
+  - Migrated Stack, Flex, Grid, Spacer to BaseComponent pattern with `css` prop support
+  - Hardened `mathExpression.ts` with blocked identifiers whitelist and 20 adversarial security tests
+  - 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
+
+## 0.1.0-alpha.0
+
+Initial alpha release.

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Sebastian Gołębiowski
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 Sebastian Gołębiowski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,117 +1,171 @@
-# ⚛️ Entangle UI
-
-> Components quantumly entangled for professional editor 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)
-
-**🚧 ALPHA VERSION - In active development, not ready for production**
-
-## 🌌 Philosophy
-
-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.
-
-## ⚡ 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
-
-```bash
-# Install alpha version
-npm install entangle-ui@alpha
-```
-
-```tsx
-import { Button, Input } from 'entangle-ui';
-
-function App() {
-  return (
-    <div>
-      <Button>Entangle Reality</Button>
-      <Input placeholder="Enter coordinates..." precision={3} />
-    </div>
-  );
-}
-```
-
-## 🎯 Built For
-
-- 🌍 **Planet generators** & procedural tools
-- 🎮 **Node-based editors** & visual programming
-- 🎨 **3D modeling interfaces** & CAD applications  
-- ⚙️ **Parameter control systems** & scientific tools
-- 🔬 **Precision applications** requiring exact values
-
-## 📚 Documentation
-
-- **[GitHub](https://github.com/yourusername/entangle-ui)** - Source code and issues
-
-## 🧪 Current Status (Alpha)
-
-### ✅ Available Components
-
-- [ ] Button - Quantum interaction states
-- [ ] Input - Precision numeric controls  
-- [ ] Slider - Fine-tuned value manipulation
-- [ ] Toggle - Binary state quantum switches
-
-### 🚧 In Development
-
-- Vector input controls
-- Color precision pickers
-- Node connection components
-- 3D viewport controls
-
-### 📋 Roadmap
-
-- Canvas integration helpers
-- Advanced theming system
-- Animation state management
-- Plugin architecture
-
-## 🛠️ Development
-
-```bash
-# Clone the repository
-git clone https://github.com/yourusername/entangle-ui.git
-cd entangle-ui
-
-# Install dependencies
-npm install
-
-# Start Storybook
-npm run dev
-
-# Run tests
-npm run test
-
-# Build library
-npm run build
-```
-
-## 🤝 Contributing
-
-Entangle UI is in active alpha development. We welcome:
-
-- 🐛 **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
-
-See [CONTRIBUTING.md](CONTRIBUTING.md) for development guidelines.
-
-## 📄 License
-
-MIT © [Your Name](https://github.com/yourusername)
-
----
-
-> *"Spooky action at a distance, but for UI components"* ⚛️
-
-**Built for creators who shape digital realities**
+# Entangle UI
+
+React + TypeScript component library for building editor-style interfaces.
+
+`entangle-ui` is focused on dense, keyboard-friendly UI patterns used in tools like 3D editors, node editors, scene inspectors, and technical dashboards.
+
+## Status
+
+This package is in alpha (`0.1.0-alpha.x`) and still evolving.
+
+- API can change between alpha releases.
+- Use in production only if you are comfortable with rapid iteration.
+
+## Installation
+
+```bash
+npm install entangle-ui@alpha
+```
+
+Peer dependencies:
+
+- `react >= 19.1.0`
+- `react-dom >= 19.1.0`
+- `@emotion/react ^11`
+- `@emotion/styled ^11`
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import {
+  ThemeProvider,
+  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>
+  );
+}
+```
+
+## Theming
+
+Entangle UI ships with design tokens and an Emotion-based `ThemeProvider`.
+
+```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>;
+}
+```
+
+## What Is Included
+
+### Primitives
+
+- `Button`, `IconButton`
+- `Input`, `Text`, `Paper`, `Icon`
+- `Checkbox`, `CheckboxGroup`, `Switch`
+- `Tooltip`, `Popover`, `Collapsible`
+
+### Layout
+
+- `Stack`, `Flex`, `Grid`, `Spacer`
+- `Accordion`
+- `ScrollArea`
+- `SplitPane`, `SplitPanePanel`
+
+### Controls
+
+- `NumberInput`, `Slider`, `Select`, `VectorInput`
+- `ColorPicker`, `ColorPalette`, `ColorSwatch`, `EyeDropper`
+- `TreeView`
+- `CurveEditor` + helpers (`evaluateCurve`, `sampleCurve`, `createLinearCurve`, `domainToCanvas`)
+
+### Navigation
+
+- `Menu`, `useMenu`
+- `Tabs`, `TabList`, `Tab`, `TabPanel`
+
+### Shell
+
+- `AppShell`, `useAppShell`
+- `MenuBar`
+- `Toolbar`
+- `StatusBar`
+- `FloatingPanel`, `FloatingManager`
+
+### Editor
+
+- `PropertyPanel`, `PropertySection`, `PropertyRow`, `PropertyGroup`
+- `usePropertyUndo`
+
+### Feedback and Form
+
+- `Dialog` primitives (`Dialog`, `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogClose`)
+- `ToastProvider`, `useToast`
+- `FormLabel`, `FormHelperText`, `InputWrapper`
+
+## Development
+
+```bash
+npm install
+npm run dev            # Storybook
+npm run test           # Vitest
+npm run lint
+npm run type-check
+npm run build
+```
+
+## Release Workflow
+
+This repository uses Changesets.
+
+```bash
+npm run changeset
+npm run version-packages
+npm run release
+```
+
+## Repository
+
+- Source: `https://github.com/SebastianWebdev/entangle-ui`
+- Issues: `https://github.com/SebastianWebdev/entangle-ui/issues`
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,5 +1,12 @@
 export { Theme, ThemeProvider, Tokens, createTheme, tokens } from '@/theme';
-export { Button, ButtonProps, ButtonSize, ButtonVariant, Icon, IconProps, IconSize, Input, InputProps } from '@/components/primitives';
+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 { 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';