entangle-ui 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,150 @@
 # entangle-ui
 
+## 0.12.0
+
+### Minor Changes
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **E1 — AppShell top-chrome + MenuBar fill/inset.** `AppShell.MenuBar` now paints
+  the menu-bar chrome background (`--etui-shell-menubar-bg`) on the slot, and
+  `MenuBar` stretches to fill its host slot so the top chrome reads as one
+  continuous strip instead of a lighter content-width block. MenuBar triggers now
+  inset their hover/active fill (rounded, vertically centered) from the chrome
+  edges. Docs clarify that side toolbar slots (`AppShell.Toolbar position="left|right"`)
+  are the intended home for docked panels. Visual default change — no API change.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G1 — Align `Button` / `IconButton` icon API.** `IconButton` now accepts an
+  optional `icon` prop mirroring `Button`'s `icon`, so `<IconButton icon={…} />`
+  type-checks and the two components share one API. `children` still works for
+  back-compat (now optional); when both are set, `icon` wins. Additive.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **E2 — MenuBar checkable / radio items.** Add `MenuBar.CheckboxItem`
+  (`checked` / `defaultChecked` / `onCheckedChange`) and `MenuBar.RadioGroup` +
+  `MenuBar.RadioItem` (`value` / `defaultValue` / `onValueChange`), mirroring the
+  navigation `Menu` API. Items reserve a leading check-mark gutter so checked and
+  unchecked rows align, use `role="menuitemcheckbox"` / `role="menuitemradio"` with
+  `aria-checked`, participate in arrow-key navigation, and keep the menu open on
+  activation by default (`closeOnClick={false}`). Additive.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **F1 — Slider value tooltip → portal.** The drag value tooltip was an
+  absolutely-positioned child of the slider wrapper, so any ancestor `overflow`
+  (e.g. a `PropertySection` header) clipped it. It now renders in a portal to
+  `document.body` with fixed viewport coordinates anchored to the thumb, so it can
+  never be clipped. Added `tooltipPlacement?: 'top' | 'bottom'` (default `'top'`).
+  The portal is only mounted while dragging, so the idle/drag hot path is
+  unchanged. Default visual placement (above the thumb) is unchanged.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G2 — `Spinner` `decorative` (live-region opt-out).** Add `decorative?: boolean`
+  to `Spinner`. When set, the spinner renders `role="presentation"` + `aria-hidden`
+  with no `aria-live`, for use inside an existing live region (e.g. `StatusBar`,
+  which is itself `role="status"`) so activity isn't announced twice. Default
+  behavior (`role="status"` + `aria-live="polite"`) is unchanged. Additive.
+
+### Patch Changes
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **F2 — Tooltip z-index on the Positioner (renders under panels).** The tooltip
+  z-index (`--etui-z-tooltip`) was set on the inner `Popup`, trapped inside the
+  portaled `Positioner`'s own `position: fixed` stacking context, so a positioned
+  sibling at a lower z-index (e.g. an `AppShell` slot at `--etui-z-base`) painted
+  over the tooltip. The token now lives on the `Positioner`. Audited the other Base
+  UI `Positioner`/`Popup` pairs and applied the same fix to the navigation `Menu`
+  and `ContextMenu` (dropdown z-index now on their positioners). `HoverCard`,
+  `Select` and `Popover` were already correct (z-index on the positioned element).
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G3 — `Viewport` docs lead with "2D only".** The `Viewport` JSDoc, docs page,
+  and skill reference now lead with the 2D-only boundary (it owns a 2D pan/zoom
+  transform, not a 3D camera) and point to hosting your own WebGL/WebGPU canvas
+  for 3D. Docs-only; no API change.
+
+- [#111](https://github.com/SebastianWebdev/entangle-ui/pull/111) [`f933917`](https://github.com/SebastianWebdev/entangle-ui/commit/f933917f99da18ce70ed08bbfb103d03250346c2) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Fix `entangle-ui/styles.css` being tree-shaken out of production builds.
+
+  The `./styles.css` export resolved to `dist/esm/styles.js` — a JS shim whose
+  only job is to `import` the dark-theme tokens + global-scrollbar stylesheets for
+  their side effects. But the package's `sideEffects` allowlist only matches
+  `*.css`, `*.css.ts`, and `*.css.js`, so a plain `styles.js` (which exports
+  nothing) was flagged side-effect-free and dropped by production bundlers. The
+  canonical `import 'entangle-ui/styles.css'` setup then shipped **zero** `--etui-*`
+  token definitions: no colours, no fonts, and menu/tooltip popups with no
+  background or stacking. Dev was unaffected because dev servers don't tree-shake,
+  so the failure only surfaced in `build`/`preview`.
+
+  The stylesheet entry is now emitted as `dist/esm/styles.css.js`, which matches
+  the existing `*.css.js` side-effect glob (the same bucket as every component's
+  compiled style module), so the import survives production tree-shaking and the
+  dark theme lands on `:root` in dev and prod alike. No source or API change is
+  required in consumer apps.
+
+## 0.11.0
+
+### Minor Changes
+
+- [#103](https://github.com/SebastianWebdev/entangle-ui/pull/103) [`9fd2dbd`](https://github.com/SebastianWebdev/entangle-ui/commit/9fd2dbdd86a24c776b5b188582eec3c7ceb584b9) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Fix browser white-screen caused by a Node build of `picocolors` being inlined into the shipped ESM.
+
+  `@vanilla-extract/css` was reachable from the runtime barrel (via `createCustomTheme`) but was **not** a Rollup external, so its entire runtime — including the Node build of `picocolors` (`let p = process || {}` at module init) and `lru-cache` — was inlined into `dist/esm`. Any `entangle-ui` import then crashed with `process is not defined` in the browser (most visibly in `vite dev`, where nothing is tree-shaken).
+
+  **What changed:**
+  - `@vanilla-extract/css` is now a Rollup external, so it is no longer inlined. The consumer's bundler resolves it and honours each dependency's `browser` field, so no Node-only globals reach the browser.
+  - A regression guard (`scripts/check-browser-safe.ts`, wired into `prepublishOnly` via `npm run check:browser-safe`) fails the publish if any `dist/esm/**/*.js` references a Node-only global (`process`, `require(`) outside the bundler-replaceable `process.env.NODE_ENV` guard.
+
+  **Action required (peer dependency):** `@vanilla-extract/css` (`^1.18.0`) is now declared as a `peerDependency`. It is already pulled in transitively by the existing required peers `@vanilla-extract/dynamic` and `@vanilla-extract/recipes`, so npm/yarn users are unaffected; pnpm users (strict resolution) should ensure it is installed.
+
+- [#105](https://github.com/SebastianWebdev/entangle-ui/pull/105) [`55b94aa`](https://github.com/SebastianWebdev/entangle-ui/commit/55b94aa3cf90690c5e32a6c61d88e2f3c55e6277) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add a canonical stylesheet entry and fix published sourcemaps.
+
+  **`entangle-ui/styles.css` (new, canonical theme import).** The documented CSS imports (`entangle-ui/styles.css`, `entangle-ui/darkTheme.css`) did not resolve, and the dark theme `:root` variables (`--etui-*`) were not reachable from a normal component import — so a fresh app rendered unstyled. There is now a single canonical entry:
+
+  ```ts
+  // once, at your app root
+  import 'entangle-ui/styles.css';
+  ```
+
+  It registers every `--etui-*` token on `:root` (default dark theme) plus the opt-in global-scrollbar rules, so components render correctly **without** a `ThemeProvider` wrapper. Component CSS still ships per component, so the entry stays tiny. A packaging test asserts the `:root` tokens are present.
+
+  **Package-relative sourcemaps.** Published `.js.map` files pointed `sources` at an unshipped `node_modules/entangle-ui/src/...` and shipped no `sourcesContent`, producing "source file outside its package" warnings in consumers. Sourcemaps now use package-relative `src/...` paths with embedded `sourcesContent` (`inlineSources` in `tsconfig.build.json` + a `sourcemapPathTransform` in `rollup.config.js`). A regression guard (`scripts/check-sourcemaps.ts`, wired into `prepublishOnly` via `npm run check:sourcemaps`) fails the publish if a sourcemap escapes the package or drops its source content.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `PropertyPanel`: add fill-height scrolling, row density, and a small control-padding fix.
+  - **`fillHeight` (new prop).** Fills the parent's height and scrolls the content on overflow without needing a fixed `maxHeight`, reserving a scrollbar gutter so controls don't sit under the overlay scrollbar. Ignored when `maxHeight` is set.
+  - **`density` (new prop).** `compact` / `normal` / `spacious` tunes the vertical rhythm (min-height + vertical padding) of all nested `PropertyRow`s via panel context. Default `normal` is unchanged from before.
+  - **Control right padding.** `PropertyRow`'s control column right padding was bumped from `xs` (2px) to `sm` (4px) so controls no longer sit flush against the row's right edge. This is a small default visual change.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `PropertyRow`: fix the label tooltip and allow a `ReactNode` label.
+  - **Tooltip fix.** The label tooltip never appeared because the tooltip trigger wrapped its content in a `display: contents` element, which generates no box and therefore no hover/focus target (the `Tooltip` primitive disables pointer events on the trigger and re-enables them only on its direct child). The wrapper is now a real `inline-flex` box, so hovering or focusing the label shows the tooltip.
+  - **`label: ReactNode`.** `PropertyRow.label` was typed `string` but already rendered any node. It is now typed `React.ReactNode`, so an icon + text (or any custom markup) can be used as a label without a cast. This is a widening, so existing string labels are unaffected.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `PropertySection`: add a first-class checkable section.
+
+  Set `checkable` to render a managed enable/disable toggle in the section header (built on the `Switch` primitive). When the toggle is off, the section body is dimmed and made non-interactive (`pointer-events: none`) but **stays mounted**, so its state is preserved. The toggle is independent of the collapse state and supports controlled and uncontrolled use via `checked` / `defaultChecked` / `onCheckedChange`. The toggle's accessible name defaults to the section `title` and can be overridden with `checkLabel`. All additive — sections without `checkable` are unchanged.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `Select`: add `fullWidth` and size the open dropdown to its content.
+  - **`fullWidth` (new prop).** When set, the select stretches the container and trigger to fill the available width instead of shrinking to the selected label. This fixes selects collapsing when placed inside a flex row or property panel. Default `false` preserves the previous content-width behavior.
+  - **Content-sized dropdown.** The open dropdown now sizes to its widest option (`width: max-content`), with a minimum of the trigger width (and `minDropdownWidth` when set) and a maximum clamped to the viewport. Long option labels are no longer clipped by a narrow trigger. `minDropdownWidth` continues to act as a floor.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `Select`: type `onChange` per `clearable` so the value is only nullable when it can actually be cleared.
+
+  `SelectProps` is now a discriminated union on `clearable`:
+  - Without `clearable`, `onChange` is `(value: T) => void` — it never receives `null`, so consumers no longer need a spurious null check.
+  - With `clearable`, `onChange` is `(value: T | null) => void` — `null` is emitted by the clear button.
+
+  Type-only change (runtime behavior is unchanged). This is stricter than before: an inline `onChange` handler on a non-clearable select now infers `T` instead of `T | null`. Handlers already written to accept `T | null` remain assignable, so most code is unaffected; a handler that explicitly compared the value to `null` on a non-clearable select should drop that dead branch.
+
+- [#108](https://github.com/SebastianWebdev/entangle-ui/pull/108) [`67edb59`](https://github.com/SebastianWebdev/entangle-ui/commit/67edb59caeadb6798318774e725a061f567f4a8f) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add viewport / 3D icon glyphs: `OrbitIcon`, `RotateIcon`, `SpinIcon`, `CameraIcon`, `CubeIcon`, and `ZoomFitIcon`.
+
+  The icon set previously lacked rotate/orbit, camera, cube/axis, and zoom-to-fit glyphs, so editor viewports had to reuse `RefreshIcon`/`HomeIcon` for unrelated meanings. These six additions match the existing 24×24 / 2px-stroke style, are exported from the root barrel, and are tree-shakeable like every other icon. Purely additive — no existing icon changed.
+
+### Patch Changes
+
+- [#106](https://github.com/SebastianWebdev/entangle-ui/pull/106) [`7c68e13`](https://github.com/SebastianWebdev/entangle-ui/commit/7c68e133d93a35287d82b3d1036ca0c3eac70521) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Fix the install and getting-started documentation across every surface so a new consumer can install and run the package.
+
+  The README (shipped on npm), the `docs/` quickstart and theming guides, the docs-site getting-started and theming pages, and the bundled skill all carried a stale install story:
+  - **Install tag.** `npm install entangle-ui@alpha` resolved to an ancient `0.1.0-alpha.0`; the documented command is now `npm install entangle-ui`.
+  - **React floor.** The `react`/`react-dom` peer requirement is `>=19.2.0`, not the documented `>=19.1.0`.
+  - **Peer dependencies.** The docs omitted `@tanstack/react-virtual` and `@vanilla-extract/css`; all peers are now listed with their real version ranges.
+  - **Theme import.** The documented `entangle-ui/darkTheme.css` and side-effect `entangle-ui/theme` imports did not register the `--etui-*` variables. Everything now uses the canonical `import 'entangle-ui/styles.css'`, and the default-theme examples no longer imply a `ThemeProvider` wrapper is required.
+
+  Documentation only — no runtime or API change.
+
+- [#107](https://github.com/SebastianWebdev/entangle-ui/pull/107) [`2c96ea1`](https://github.com/SebastianWebdev/entangle-ui/commit/2c96ea1e149b73c55d41f6ab1347d9cf8f6c60bf) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - `PropertySection`: render header controls as siblings of the collapse trigger instead of nested inside it.
+
+  The enable toggle (`checkable`) and the `actions` slot were rendered inside the section header's trigger `<button>`, which produced invalid HTML (`<button>` cannot contain another `<button>`/interactive control) and a React DOM warning. The header is now a flex strip containing the trigger button and a separate controls group as siblings, so toggles and actions are never nested in a button. The collapse behavior, sizing, and the expanded separator are unchanged; the trigger's hover highlight now covers the trigger area rather than the full strip width.
+
 ## 0.10.0
 
 ### Minor Changes

package/README.md

@@ -24,17 +24,19 @@ npm install entangle-ui
 
 Peer dependencies:
 
-- `react >= 19.1.0`
-- `react-dom >= 19.1.0`
+- `react >= 19.2.0`
+- `react-dom >= 19.2.0`
 - `@base-ui/react ^1.1.0`
 - `@floating-ui/react ^0.27.17`
+- `@tanstack/react-virtual ^3.13.0`
+- `@vanilla-extract/css ^1.18.0`
 - `@vanilla-extract/dynamic ^2.1.5`
 - `@vanilla-extract/recipes ^0.5.7`
 
 ## Quick Start
 
 ```tsx
-import 'entangle-ui/darkTheme.css'; // registers --etui-* CSS custom properties on :root
+import 'entangle-ui/styles.css'; // registers the dark theme (--etui-* custom properties) on :root
 
 import { AppShell, MenuBar, Toolbar, StatusBar } from 'entangle-ui';
 
@@ -79,10 +81,10 @@ Entangle UI uses [Vanilla Extract](https://vanilla-extract.style/) for zero-runt
 
 ### Default dark theme
 
-Import the dark theme CSS to register all `--etui-*` variables on `:root`:
+Import the bundled stylesheet once to register all `--etui-*` variables on `:root`:
 
 ```ts
-import 'entangle-ui/darkTheme.css';
+import 'entangle-ui/styles.css';
 ```
 
 ### Custom themes

package/dist/esm/assets/src/components/controls/Select/{Select.css.ts.vanilla-oZnFUorL.css → Select.css.ts.vanilla-Cpu2BvWL.css}

@@ -147,6 +147,8 @@
 .Select_dropdownStyle__ycpn70v {
   position: fixed;
   z-index: var(--etui-z-dropdown);
+  width: max-content;
+  box-sizing: border-box;
   background: var(--etui-color-bg-elevated);
   border: 1px solid var(--etui-color-border-default);
   border-radius: var(--etui-radius-md);
@@ -178,6 +180,7 @@
   padding: var(--etui-spacing-sm) var(--etui-spacing-md);
   font-size: var(--etui-font-size-md);
   gap: var(--etui-spacing-sm);
+  white-space: nowrap;
   transition: background var(--etui-transition-fast);
 }
 .Select_optionItemRecipe_highlighted_true__ycpn70z {

package/dist/esm/assets/src/components/controls/Slider/{Slider.css.ts.vanilla-Cqm3fQ0S.css → Slider.css.ts.vanilla-CLf_RC0A.css}

@@ -1,15 +1,15 @@
-.Slider_sliderContainerRecipe__t8kxxs3 {
+.Slider_sliderContainerRecipe__t8kxxs2 {
   display: flex;
   flex-direction: column;
   gap: var(--etui-spacing-xs);
   width: 100%;
   min-width: 0;
 }
-.Slider_sliderContainerRecipe_disabled_true__t8kxxs4 {
+.Slider_sliderContainerRecipe_disabled_true__t8kxxs3 {
   opacity: 0.5;
   pointer-events: none;
 }
-.Slider_sliderWrapperStyle__t8kxxs6 {
+.Slider_sliderWrapperStyle__t8kxxs5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -18,56 +18,56 @@
   padding: 0px 0;
   width: 100%;
 }
-.Slider_trackRecipe__t8kxxs7 {
+.Slider_trackRecipe__t8kxxs6 {
   position: relative;
   flex: 1;
   border-radius: var(--etui-radius-sm);
   overflow: hidden;
   border: 1px solid;
 }
-.Slider_trackRecipe_size_sm__t8kxxs8 {
+.Slider_trackRecipe_size_sm__t8kxxs7 {
   height: 4px;
 }
-.Slider_trackRecipe_size_md__t8kxxs9 {
+.Slider_trackRecipe_size_md__t8kxxs8 {
   height: 6px;
 }
-.Slider_trackRecipe_size_lg__t8kxxsa {
+.Slider_trackRecipe_size_lg__t8kxxs9 {
   height: 8px;
 }
-.Slider_trackRecipe_error_true__t8kxxsb {
+.Slider_trackRecipe_error_true__t8kxxsa {
   background: var(--etui-color-accent-error);
   border-color: var(--etui-color-border-error);
 }
-.Slider_trackRecipe_error_true__t8kxxsb:hover {
+.Slider_trackRecipe_error_true__t8kxxsa:hover {
   border-color: var(--etui-color-border-error);
 }
-.Slider_trackRecipe_error_false__t8kxxsc {
+.Slider_trackRecipe_error_false__t8kxxsb {
   background: var(--etui-color-surface-default);
   border-color: var(--etui-color-border-default);
 }
-.Slider_trackRecipe_error_false__t8kxxsc:hover {
+.Slider_trackRecipe_error_false__t8kxxsb:hover {
   border-color: var(--etui-color-border-focus);
 }
-.Slider_fillRecipe__t8kxxsd {
+.Slider_fillRecipe__t8kxxsc {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: var(--fillPercentageVar__t8kxxs0);
 }
-.Slider_fillRecipe_error_true__t8kxxse {
+.Slider_fillRecipe_error_true__t8kxxsd {
   background: var(--etui-color-accent-error);
 }
-.Slider_fillRecipe_error_false__t8kxxsf {
+.Slider_fillRecipe_error_false__t8kxxse {
   background: var(--etui-color-accent-primary);
 }
-.Slider_fillRecipe_isDragging_true__t8kxxsg {
+.Slider_fillRecipe_isDragging_true__t8kxxsf {
   transition: none;
 }
-.Slider_fillRecipe_isDragging_false__t8kxxsh {
+.Slider_fillRecipe_isDragging_false__t8kxxsg {
   transition: width 0.1s ease-out;
 }
-.Slider_thumbRecipe__t8kxxsi {
+.Slider_thumbRecipe__t8kxxsh {
   position: absolute;
   top: 50%;
   left: var(--thumbPercentageVar__t8kxxs1);
@@ -77,38 +77,38 @@
   cursor: grab;
   box-shadow: var(--etui-shadow-sm);
 }
-.Slider_thumbRecipe__t8kxxsi:hover {
+.Slider_thumbRecipe__t8kxxsh:hover {
   transform: translate(-50%, -50%) scale(1.1);
   box-shadow: var(--etui-shadow-md);
 }
-.Slider_thumbRecipe_size_sm__t8kxxsj {
+.Slider_thumbRecipe_size_sm__t8kxxsi {
   width: 12px;
   height: 12px;
 }
-.Slider_thumbRecipe_size_md__t8kxxsk {
+.Slider_thumbRecipe_size_md__t8kxxsj {
   width: 16px;
   height: 16px;
 }
-.Slider_thumbRecipe_size_lg__t8kxxsl {
+.Slider_thumbRecipe_size_lg__t8kxxsk {
   width: 20px;
   height: 20px;
 }
-.Slider_thumbRecipe_error_true__t8kxxsm {
+.Slider_thumbRecipe_error_true__t8kxxsl {
   background: var(--etui-color-accent-error);
 }
-.Slider_thumbRecipe_error_false__t8kxxsn {
+.Slider_thumbRecipe_error_false__t8kxxsm {
   background: var(--etui-color-accent-primary);
 }
-.Slider_thumbRecipe_isDragging_true__t8kxxso {
+.Slider_thumbRecipe_isDragging_true__t8kxxsn {
   cursor: grabbing;
   transform: translate(-50%, -50%) scale(1.15);
   box-shadow: var(--etui-shadow-lg);
   transition: none;
 }
-.Slider_thumbRecipe_isDragging_false__t8kxxsp {
+.Slider_thumbRecipe_isDragging_false__t8kxxso {
   transition: all var(--etui-transition-fast);
 }
-.Slider_ticksStyle__t8kxxsq {
+.Slider_ticksStyle__t8kxxsp {
   position: absolute;
   top: 100%;
   left: 0;
@@ -119,7 +119,7 @@
   align-items: flex-start;
   pointer-events: none;
 }
-.Slider_ticksStyle__t8kxxsq::before {
+.Slider_ticksStyle__t8kxxsp::before {
   content: "";
   position: absolute;
   top: 2px;
@@ -128,17 +128,14 @@
   height: 1px;
   background: var(--etui-color-border-default);
 }
-.Slider_tickStyle__t8kxxsr {
+.Slider_tickStyle__t8kxxsq {
   width: 1px;
   height: 4px;
   background: var(--etui-color-text-muted);
   margin-top: 2px;
 }
-.Slider_tooltipRecipe__t8kxxss {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: var(--tooltipPercentageVar__t8kxxs2);
-  transform: translateX(-50%);
+.Slider_sliderTooltipRecipe__t8kxxsr {
+  position: fixed;
   background: var(--etui-color-bg-elevated);
   color: var(--etui-color-text-primary);
   border: 1px solid var(--etui-color-border-default);
@@ -149,9 +146,11 @@
   white-space: nowrap;
   pointer-events: none;
   z-index: var(--etui-z-tooltip);
-  transition: all var(--etui-transition-fast);
 }
-.Slider_tooltipRecipe__t8kxxss::after {
+.Slider_sliderTooltipRecipe_placement_top__t8kxxss {
+  transform: translate(-50%, calc(-100% - 8px));
+}
+.Slider_sliderTooltipRecipe_placement_top__t8kxxss::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -163,25 +162,29 @@
   border-right: 4px solid transparent;
   border-top: 4px solid var(--etui-color-border-default);
 }
-.Slider_tooltipRecipe_visible_true__t8kxxst {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
+.Slider_sliderTooltipRecipe_placement_bottom__t8kxxst {
+  transform: translate(-50%, 8px);
 }
-.Slider_tooltipRecipe_visible_false__t8kxxsu {
-  opacity: 0;
-  transform: translateX(-50%) translateY(4px);
+.Slider_sliderTooltipRecipe_placement_bottom__t8kxxst::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid var(--etui-color-border-default);
 }
 @media (prefers-reduced-motion: reduce) {
-  .Slider_thumbRecipe__t8kxxsi {
+  .Slider_thumbRecipe__t8kxxsh {
     transition: none;
   }
-  .Slider_thumbRecipe__t8kxxsi:hover {
+  .Slider_thumbRecipe__t8kxxsh:hover {
     transform: translate(-50%, -50%);
   }
-  .Slider_thumbRecipe_isDragging_false__t8kxxsp {
-    transition: none;
-  }
-  .Slider_tooltipRecipe__t8kxxss {
+  .Slider_thumbRecipe_isDragging_false__t8kxxso {
     transition: none;
   }
 }

package/dist/esm/assets/src/components/editor/PropertyInspector/{PropertyPanel.css.ts.vanilla-RYv_XgOu.css → PropertyPanel.css.ts.vanilla-Dpr_k5I3.css}

@@ -40,7 +40,10 @@
   padding-left: var(--etui-spacing-md);
   box-sizing: border-box;
 }
-.PropertyPanel_panelFooter__151bru77 {
+.PropertyPanel_panelContentScroll__151bru77 {
+  padding-right: var(--etui-spacing-lg);
+}
+.PropertyPanel_panelFooter__151bru78 {
   flex-shrink: 0;
   border-top: 1px solid var(--etui-color-border-default);
 }

package/dist/esm/assets/src/components/editor/PropertyInspector/{PropertyRow.css.ts.vanilla-C3YZnnHb.css → PropertyRow.css.ts.vanilla-pq1Uhd2a.css}

@@ -1,6 +1,6 @@
 .PropertyRow_rowRoot__1ds48412 {
   position: relative;
-  padding: 2px 8px;
+  padding: 0 var(--etui-spacing-md);
   transition: background var(--etui-transition-fast);
 }
 .PropertyRow_rowRoot__1ds48412:hover {
@@ -29,7 +29,14 @@
   margin-bottom: var(--etui-spacing-xs);
   user-select: none;
 }
-.PropertyRow_modifiedDot__1ds48415 {
+.PropertyRow_labelTooltipTarget__1ds48415 {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.PropertyRow_modifiedDot__1ds48416 {
   width: 4px;
   height: 4px;
   border-radius: 50%;
@@ -37,23 +44,23 @@
   margin-right: var(--etui-spacing-xs);
   flex-shrink: 0;
 }
-.PropertyRow_rowControl__1ds48416 {
+.PropertyRow_rowControl__1ds48417 {
   flex: 0 0 var(--controlRatioVar__1ds48411);
   box-sizing: border-box;
   display: flex;
   align-items: center;
   min-width: 0;
-  padding-right: var(--etui-spacing-xs);
+  padding-right: var(--etui-spacing-sm);
 }
-.PropertyRow_fullWidthControl__1ds48417 {
+.PropertyRow_fullWidthControl__1ds48418 {
   display: flex;
   align-items: stretch;
   width: 100%;
   flex: 1 1 auto;
   min-width: 0;
-  padding-right: var(--etui-spacing-xs);
+  padding-right: var(--etui-spacing-sm);
 }
-.PropertyRow_resetButton__1ds48418 {
+.PropertyRow_resetButton__1ds48419 {
   position: absolute;
   right: var(--etui-spacing-xs);
   top: 50%;
@@ -69,7 +76,7 @@
   color: var(--etui-color-text-muted);
   transition: opacity var(--etui-transition-fast), color var(--etui-transition-fast), background var(--etui-transition-fast);
 }
-.PropertyRow_resetButton__1ds48418:hover {
+.PropertyRow_resetButton__1ds48419:hover {
   color: var(--etui-color-text-primary);
   background: var(--etui-color-surface-active);
 }

package/dist/esm/assets/src/components/editor/PropertyInspector/{PropertySection.css.ts.vanilla-DK12opZc.css → PropertySection.css.ts.vanilla-6MWWAqyd.css}

@@ -9,59 +9,76 @@
 .PropertySection_sectionRoot__1xiu0w60 + .PropertySection_sectionRoot__1xiu0w60 {
   margin-top: var(--etui-spacing-sm);
 }
-.PropertySection_sectionTrigger__1xiu0w61 {
+.PropertySection_sectionHeader__1xiu0w61 {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background: var(--etui-color-surface-default);
+}
+.PropertySection_sectionHeader_size_sm__1xiu0w62 {
+  height: 24px;
+}
+.PropertySection_sectionHeader_size_md__1xiu0w63 {
+  height: 28px;
+}
+.PropertySection_sectionHeader_size_lg__1xiu0w64 {
+  height: 32px;
+}
+.PropertySection_sectionHeader_disabled_true__1xiu0w65 {
+  opacity: 0.5;
+}
+.PropertySection_sectionHeader_disabled_false__1xiu0w66 {
+  opacity: 1;
+}
+.PropertySection_sectionHeader_expanded_true__1xiu0w67 {
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
+.PropertySection_sectionHeader_expanded_false__1xiu0w68 {
+  border-bottom: none;
+}
+.PropertySection_sectionTrigger__1xiu0w69 {
   margin: 0;
   border: none;
   font-family: inherit;
   outline: none;
   user-select: none;
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   text-align: left;
   display: flex;
   align-items: center;
   gap: var(--etui-spacing-sm);
   font-weight: var(--etui-font-weight-medium);
-  background: var(--etui-color-surface-default);
+  background: transparent;
   color: var(--etui-color-text-primary);
   transition: background var(--etui-transition-fast);
 }
-.PropertySection_sectionTrigger__1xiu0w61:hover:not(:disabled) {
+.PropertySection_sectionTrigger__1xiu0w69:hover:not(:disabled) {
   background: var(--etui-color-surface-hover);
 }
-.PropertySection_sectionTrigger__1xiu0w61:focus-visible {
+.PropertySection_sectionTrigger__1xiu0w69:focus-visible {
   box-shadow: var(--etui-shadow-focus);
   z-index: 1;
 }
-.PropertySection_sectionTrigger_size_sm__1xiu0w62 {
-  height: 24px;
+.PropertySection_sectionTrigger_size_sm__1xiu0w6a {
   padding: 0 var(--etui-spacing-sm);
   font-size: var(--etui-font-size-md);
 }
-.PropertySection_sectionTrigger_size_md__1xiu0w63 {
-  height: 28px;
+.PropertySection_sectionTrigger_size_md__1xiu0w6b {
   padding: 0 var(--etui-spacing-md);
   font-size: var(--etui-font-size-md);
 }
-.PropertySection_sectionTrigger_size_lg__1xiu0w64 {
-  height: 32px;
+.PropertySection_sectionTrigger_size_lg__1xiu0w6c {
   padding: 0 var(--etui-spacing-lg);
   font-size: var(--etui-font-size-lg);
 }
-.PropertySection_sectionTrigger_disabled_true__1xiu0w65 {
+.PropertySection_sectionTrigger_disabled_true__1xiu0w6d {
   cursor: not-allowed;
-  opacity: 0.5;
 }
-.PropertySection_sectionTrigger_disabled_false__1xiu0w66 {
+.PropertySection_sectionTrigger_disabled_false__1xiu0w6e {
   cursor: pointer;
-  opacity: 1;
-}
-.PropertySection_sectionTrigger_expanded_true__1xiu0w67 {
-  border-bottom: 1px solid var(--etui-color-border-default);
 }
-.PropertySection_sectionTrigger_expanded_false__1xiu0w68 {
-  border-bottom: none;
-}
-.PropertySection_chevron__1xiu0w69 {
+.PropertySection_chevron__1xiu0w6f {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,42 +86,43 @@
   transition: transform var(--etui-transition-fast);
   color: var(--etui-color-text-muted);
 }
-.PropertySection_chevronExpanded__1xiu0w6a {
+.PropertySection_chevronExpanded__1xiu0w6g {
   transform: rotate(90deg);
 }
-.PropertySection_iconArea__1xiu0w6b {
+.PropertySection_iconArea__1xiu0w6h {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.PropertySection_sectionLabel__1xiu0w6c {
+.PropertySection_sectionLabel__1xiu0w6i {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.PropertySection_actionsArea__1xiu0w6d {
+.PropertySection_headerControls__1xiu0w6j {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  flex-shrink: 0;
   gap: var(--etui-spacing-xs);
+  padding-right: var(--etui-spacing-md);
 }
-.PropertySection_contentWrapper__1xiu0w6e {
+.PropertySection_contentWrapper__1xiu0w6k {
   display: grid;
   transition: grid-template-rows var(--etui-transition-normal);
 }
-.PropertySection_contentWrapper_expanded_true__1xiu0w6f {
+.PropertySection_contentWrapper_expanded_true__1xiu0w6l {
   grid-template-rows: 1fr;
 }
-.PropertySection_contentWrapper_expanded_false__1xiu0w6g {
+.PropertySection_contentWrapper_expanded_false__1xiu0w6m {
   grid-template-rows: 0fr;
 }
-.PropertySection_contentInner__1xiu0w6h {
+.PropertySection_contentInner__1xiu0w6n {
   overflow: hidden;
   min-height: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .PropertySection_chevron__1xiu0w69 {
+  .PropertySection_chevron__1xiu0w6f {
     transition: none;
   }
 }