@next-buildr/editor 2.0.1 → 3.0.0-rc.0

package/dist/panels/inspector/styles/style-inspector.test.js

@@ -1,15 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @vitest-environment jsdom
-import { createRegistryMeta, createSeededIdGenerator, defaultTheme, getStyleProperty, toManifest, } from '@next-buildr/core';
-import { act } from 'react';
+import { createRegistryMeta, createSeededIdGenerator, defaultTheme, getStyleProperty, p, toManifest, } from '@next-buildr/core';
+import { act, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { axe } from 'vitest-axe';
 import * as matchers from 'vitest-axe/matchers';
 import { ManifestProvider } from '../../../app/manifest.js';
 import { MessagesProvider } from '../../../messages/index.js';
 import { createEditorStore, EditorStoreProvider, useEditorState } from '../../../store/index.js';
-import { checkStyleInput } from './model.js';
+import { SearchField } from '../../../ui/index.js';
+import { boundsOf, checkStyleInput } from './model.js';
+import { StyleSectionsProvider } from './sections-context.js';
+import { SectionsToggle } from './sections-toggle.js';
 import { StyleInspector } from './style-inspector.js';
 expect.extend(matchers);
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -58,6 +61,9 @@ beforeEach(() => {
     };
     Element.prototype.scrollIntoView ??= () => { };
     Element.prototype.hasPointerCapture ??= () => false;
+    localStorage.clear();
+    Element.prototype.setPointerCapture ??= () => { };
+    Element.prototype.releasePointerCapture ??= () => { };
     container = document.createElement('div');
     document.body.append(container);
     root = createRoot(container);
@@ -66,21 +72,38 @@ afterEach(() => {
     act(() => root.unmount());
     document.body.innerHTML = '';
 });
-async function mount(breakpoint) {
+async function mount(breakpoint, groups, readOnly = false, props) {
+    const custom = groups !== undefined || props !== undefined;
+    const activeRegistry = custom
+        ? createRegistryMeta({
+            components: [
+                page,
+                { ...box, styles: { groups: groups ?? box.styles.groups }, props: props ?? box.props },
+            ],
+        })
+        : registry;
+    const activeManifest = custom ? toManifest(activeRegistry) : manifest;
     const store = createEditorStore({
         doc: fixture(),
-        registry,
+        registry: activeRegistry,
+        readOnly,
         generateId: createSeededIdGenerator(3),
         validationDelayMs: null,
     });
     store.select('box0000001');
     const View = () => {
-        const node = useEditorState((state) => state.doc.nodes['box0000001']);
+        const node = useEditorState((state) => state.anchorId === null ? undefined : state.doc.nodes[state.anchorId]);
+        const [query, setQuery] = useState('');
+        const [lastId, setLastId] = useState(node?.id);
+        if (node?.id !== lastId) {
+            setLastId(node?.id);
+            setQuery('');
+        }
         if (node === undefined)
             return null;
-        return _jsx(StyleInspector, { node: node, ...(breakpoint !== undefined ? { breakpoint } : {}) });
+        return (_jsxs(StyleSectionsProvider, { children: [_jsx(SectionsToggle, {}), _jsx(SearchField, { className: "bd-inspector-search", label: "Search", clearLabel: "Clear", value: query, onChange: setQuery }), _jsx(StyleInspector, { node: node, query: query, ...(breakpoint !== undefined ? { breakpoint } : {}) })] }));
     };
-    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(View, {}) }) }) })));
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: activeManifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(View, {}) }) }) })));
     return store;
 }
 const styles = (store) => store.getState().doc.nodes['box0000001']?.styles;
@@ -89,7 +112,42 @@ const type = (element, value) => act(async () => {
     Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(element, value);
     element.dispatchEvent(new Event('input', { bubbles: true }));
 });
+describe('layout disclosures and alignment (PB-157)', () => {
+    it('expands the main-axis alignment on click', async () => {
+        await mount(undefined, ['layout']);
+        const toggle = container.querySelector('.bd-layout-more__toggle');
+        if (toggle === null)
+            throw new Error('disclosure missing');
+        expect(toggle.getAttribute('aria-expanded')).toBe('false');
+        await act(async () => toggle.click());
+        expect(toggle.getAttribute('aria-expanded')).toBe('true');
+        expect(document.getElementById(toggle.getAttribute('aria-controls') ?? '')?.hidden).toBe(false);
+    });
+    it('shows the alignment pad when the component prop makes it a flex container', async () => {
+        await mount(undefined, ['layout'], false, {
+            display: p.select({ options: ['flex', 'grid', 'block'], default: 'flex' }),
+        });
+        expect(container.querySelector('.bd-alignment-pad')).not.toBeNull();
+        await mount(undefined, ['layout'], false, {
+            display: p.select({ options: ['flex', 'grid', 'block'], default: 'grid' }),
+        });
+        expect(container.querySelector('.bd-alignment-pad')).toBeNull();
+    });
+    it('names keywords in words, not CSS', async () => {
+        await mount(undefined, ['layout']);
+        expect(container.textContent).not.toMatch(/flex-start|space-between|nowrap/);
+    });
+});
 describe('checkStyleInput', () => {
+    it('uses the grammar bounds for each scrubbed notation', () => {
+        const lineHeight = getStyleProperty('typography', 'lineHeight');
+        const columns = getStyleProperty('layout', 'columns');
+        if (lineHeight === undefined || columns === undefined)
+            throw new Error('property missing');
+        expect(boundsOf(lineHeight, '1')).toEqual({ min: 0.5, max: 5 });
+        expect(boundsOf(lineHeight, '24px')).toEqual({ min: 0 });
+        expect(boundsOf(columns, '2')).toEqual({ min: 1, max: 12 });
+    });
     const gap = getStyleProperty('layout', 'gap');
     const opacity = getStyleProperty('effects', 'opacity');
     it('accepts tokens the theme has and lengths', () => {
@@ -119,6 +177,27 @@ describe('StyleInspector', () => {
         const groups = [...container.querySelectorAll('[data-group]')].map((g) => g.getAttribute('data-group'));
         expect(groups).toEqual(['layout', 'spacing', 'visibility']);
     });
+    it('shows Typography and Colours, with a hinted text colour, when the component allows typography', async () => {
+        await mount(undefined, ['spacing', 'typography', 'effects']);
+        const groups = [...container.querySelectorAll('[data-group]')].map((g) => g.getAttribute('data-group'));
+        expect(groups).toEqual(['spacing', 'typography', 'colors', 'shadow', 'effects']);
+        const color = container.querySelector('[data-path="typography.color"] input.bd-wcolor__hex');
+        expect(color?.getAttribute('placeholder')).toBe(defaultTheme.tokens.color['text']);
+    });
+    it('labels every effect control and folds the rarely used ones away', async () => {
+        await mount(undefined, ['effects']);
+        const effects = container.querySelector('[data-group="effects"]');
+        const toggles = [...effects.querySelectorAll('.bd-layout-more__toggle')];
+        expect(toggles.length).toBeGreaterThanOrEqual(3);
+        expect(toggles.every((toggle) => toggle.getAttribute('aria-expanded') === 'false')).toBe(true);
+        for (const control of effects.querySelectorAll('input, select')) {
+            if (control.closest('[hidden]') !== null)
+                continue;
+            const named = control.getAttribute('aria-label') !== null ||
+                (control.id !== '' && effects.querySelector(`label[for="${control.id}"]`) !== null);
+            expect(named, control.outerHTML).toBe(true);
+        }
+    });
     it('writes to desktop with no breakpoint', async () => {
         const store = await mount();
         await type(inputAt('layout.gap'), '2rem');
@@ -135,7 +214,7 @@ describe('StyleInspector', () => {
         const field = container.querySelector('[data-path="layout.gap"]');
         expect(field.textContent).toContain('from desktop');
         const pressed = container.querySelector('[data-style-prop="layout.display"] [aria-pressed=true]');
-        expect(pressed?.textContent).toBe('grid');
+        expect(pressed?.getAttribute('aria-label')).toBe('Grid');
     });
     it('does not save a value outside the grammar and says why', async () => {
         const store = await mount();
@@ -223,11 +302,11 @@ describe('style inspector controls (PB-128)', () => {
     });
     it('writes the same command as typing when a segment is pressed, and unsets on a second press', async () => {
         const store = await mount();
-        await act(async () => buttonNamed('column').click());
+        await act(async () => buttonNamed('Vertical').click());
         expect(styles(store)?.base?.layout?.direction).toBe('column');
         const group = container.querySelector('[data-style-prop="layout.direction"] fieldset');
-        expect(group?.querySelector('[aria-pressed=true]')?.getAttribute('aria-label')).toBe('column');
-        await act(async () => buttonNamed('column').click());
+        expect(group?.querySelector('[aria-pressed=true]')?.getAttribute('aria-label')).toBe('Vertical');
+        await act(async () => buttonNamed('Vertical').click());
         expect(styles(store)?.base?.layout?.direction).toBeUndefined();
     });
     it('keeps keywords without a segment reachable through the other-values menu', async () => {
@@ -263,3 +342,604 @@ describe('style inspector controls (PB-128)', () => {
         expect(await axe(container)).toHaveNoViolations();
     });
 });
+describe('template v2 inspector controls', () => {
+    it('remembers a collapsed unused style section after unmount, without changing the document', async () => {
+        const store = await mount();
+        const initial = store.getState().doc;
+        const toggle = container.querySelector('[data-group="spacing"] .bd-sec__head');
+        expect(toggle?.getAttribute('aria-expanded')).toBe('true');
+        await act(async () => toggle?.click());
+        expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+        expect(store.getState().doc).toBe(initial);
+        await act(async () => root.render(null));
+        await mount();
+        expect(container
+            .querySelector('[data-group="spacing"] .bd-sec__head')
+            ?.getAttribute('aria-expanded')).toBe('false');
+    });
+    it('ignores malformed stored preferences and searches localized property labels', async () => {
+        localStorage.setItem('buildr.editor.inspector.styles', '{"layout":"invalid"}');
+        const store = await mount();
+        const initial = store.getState().doc;
+        const search = container.querySelector('.bd-inspector-search input');
+        if (search === null)
+            throw new Error('search missing');
+        await type(search, 'gap');
+        expect(container.querySelector('[data-style-prop="layout.gap"]')).not.toBeNull();
+        expect(container.querySelector('[data-style-prop="layout.display"]')).toBeNull();
+        expect(container.querySelector('[data-group="spacing"]')).toBeNull();
+        await type(search, 'no such setting');
+        expect(container.textContent).toContain('No settings “no such setting”');
+        expect(store.getState().doc).toBe(initial);
+    });
+    it('uses two existing style commands for the flex pad, one undo step, and redo', async () => {
+        const store = await mount();
+        await act(async () => buttonNamed('Flex').click());
+        const dispatch = vi.spyOn(store, 'dispatchBatch');
+        const pad = container.querySelector('[aria-label="Content alignment"]');
+        const pick = pad?.querySelector('[aria-label="bottom right"]');
+        await act(async () => pick?.click());
+        expect(dispatch).toHaveBeenCalledWith([
+            {
+                type: 'node.setStyle',
+                payload: {
+                    id: 'box0000001',
+                    layer: {},
+                    group: 'layout',
+                    property: 'justify',
+                    value: 'flex-end',
+                },
+            },
+            {
+                type: 'node.setStyle',
+                payload: {
+                    id: 'box0000001',
+                    layer: {},
+                    group: 'layout',
+                    property: 'align',
+                    value: 'flex-end',
+                },
+            },
+        ], { label: 'Content alignment' });
+        expect(styles(store)?.base?.layout).toMatchObject({ justify: 'flex-end', align: 'flex-end' });
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.base?.layout?.justify).toBeUndefined();
+        expect(styles(store)?.base?.layout?.align).toBeUndefined();
+        expect(styles(store)?.base?.layout?.display).toBe('flex');
+        await act(async () => {
+            store.redo();
+        });
+        expect(styles(store)?.base?.layout?.justify).toBe('flex-end');
+    });
+    it('scrubs validated lengths through node.setStyle and rejects negative padding', async () => {
+        const store = await mount();
+        await type(inputAt('layout.gap'), '10px');
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const label = container.querySelector('[data-style-prop="layout.gap"] label.bd-scrub-label');
+        if (label === null)
+            throw new Error('scrub label missing');
+        await act(async () => {
+            label.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, button: 0, clientX: 10 }));
+            label.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 19 }));
+            label.dispatchEvent(new MouseEvent('pointerup', { bubbles: true }));
+        });
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: { id: 'box0000001', layer: {}, group: 'layout', property: 'gap', value: '13px' },
+        });
+        const before = styles(store)?.base?.spacing;
+        await type(inputAt('spacing.padding.top'), '-5px');
+        expect(styles(store)?.base?.spacing).toEqual(before);
+    });
+    it('writes linked and unlinked corners and borders through commands at the active device', async () => {
+        const store = await mount('mobile', ['border']);
+        const dispatch = vi.spyOn(store, 'dispatch');
+        await type(inputAt('border.radius.topLeft'), '8px');
+        expect(styles(store)?.bp?.['mobile']?.border?.radius).toEqual({
+            topLeft: '8px',
+            topRight: '8px',
+            bottomRight: '8px',
+            bottomLeft: '8px',
+        });
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.border?.radius).toBeUndefined();
+        await act(async () => {
+            store.redo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.border?.radius?.bottomRight).toBe('8px');
+        await act(async () => buttonNamed('Border: Link sides').click());
+        await type(inputAt('border.width.left'), '2px');
+        expect(styles(store)?.bp?.['mobile']?.border?.width).toEqual({ left: '2px' });
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: {
+                id: 'box0000001',
+                layer: { bp: 'mobile' },
+                group: 'border',
+                property: 'width',
+                side: 'left',
+                value: '2px',
+            },
+        });
+        expect(container
+            .querySelector('[data-style-prop="border.width"] .bd-device-indicator')
+            ?.getAttribute('data-override')).toBe('true');
+        await act(async () => buttonNamed('Restore default: Border').click());
+        expect(styles(store)?.bp?.['mobile']?.border?.width).toBeUndefined();
+    });
+    it('uses only theme shadow tokens and validates colour edits before dispatch', async () => {
+        const store = await mount('mobile', ['effects', 'background']);
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const preset = container.querySelector('.bd-shadow-presets button:nth-child(2)');
+        await act(async () => preset?.click());
+        const token = `$shadow.${Object.keys(defaultTheme.tokens.shadow)[0]}`;
+        expect(styles(store)?.bp?.['mobile']?.effects?.shadow).toBe(token);
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: {
+                id: 'box0000001',
+                layer: { bp: 'mobile' },
+                group: 'effects',
+                property: 'shadow',
+                value: token,
+            },
+        });
+        const color = container.querySelector('[data-style-prop="background.color"] .bd-color-trigger');
+        await act(async () => color?.click());
+        const input = document.querySelector('.bd-color-hex input');
+        if (input === null)
+            throw new Error('colour field missing');
+        dispatch.mockClear();
+        await type(input, 'url(https://example.com)');
+        expect(dispatch).not.toHaveBeenCalled();
+        await type(input, '#12345680');
+        expect(styles(store)?.bp?.['mobile']?.background?.color).toBe('#12345680');
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: {
+                id: 'box0000001',
+                layer: { bp: 'mobile' },
+                group: 'background',
+                property: 'color',
+                value: '#12345680',
+            },
+        });
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.background?.color).toBeUndefined();
+    });
+    it('keeps the hue slider controlled and undoes a whole drag in one step', async () => {
+        const store = await mount('mobile', ['background']);
+        const trigger = container.querySelector('[data-style-prop="background.color"] .bd-color-trigger');
+        await act(async () => trigger?.click());
+        const hue = document.querySelector('input.bd-style-hue');
+        if (hue === null)
+            throw new Error('hue slider missing');
+        await type(hue, '40');
+        await type(hue, '120');
+        await type(hue, '200');
+        expect(hue.value).toBe('200');
+        expect(styles(store)?.bp?.['mobile']?.background?.color).toBe('hsl(200 100% 50%)');
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.background?.color).toBeUndefined();
+    });
+    it('does not allow writes to a readonly document and exposes accessible supported widgets', async () => {
+        await mount('mobile', ['effects', 'border', 'background'], true);
+        for (const toggle of container.querySelectorAll('.bd-sec__head[aria-expanded=false]')) {
+            await act(async () => toggle.click());
+        }
+        for (const control of container.querySelectorAll('[data-style-prop] input, [data-style-prop] button, [data-style-prop] select')) {
+            expect(control.disabled).toBe(true);
+        }
+        expect(await axe(container)).toHaveNoViolations();
+    });
+});
+describe('template gradient and image position widgets', () => {
+    it('writes a linear gradient and image position through validated style commands', async () => {
+        const store = await mount('mobile', ['background']);
+        await act(async () => [...container.querySelectorAll('button')]
+            .find((button) => button.textContent === 'Gradient')
+            ?.click());
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const angle = container.querySelector('.bd-gradient-angle input:not([type=range])');
+        if (angle === null)
+            throw new Error('gradient angle missing');
+        await type(angle, '90');
+        const names = Object.keys(defaultTheme.tokens.color);
+        const gradient = `linear-gradient(90deg, $color.${names[0]}, $color.${names[1] ?? names[0]})`;
+        expect(styles(store)?.bp?.['mobile']?.background?.gradient).toBe(gradient);
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: {
+                id: 'box0000001',
+                layer: { bp: 'mobile' },
+                group: 'background',
+                property: 'gradient',
+                value: gradient,
+            },
+        });
+        const pad = container.querySelector('[data-style-prop="background.imagePosition"] .bd-alignment-pad');
+        await act(async () => pad?.querySelector('[aria-label="top left"]')?.click());
+        expect(styles(store)?.bp?.['mobile']?.background?.imagePosition).toBe('top left');
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.background?.imagePosition).toBeUndefined();
+        expect(styles(store)?.bp?.['mobile']?.background?.gradient).toBe(gradient);
+        await act(async () => {
+            store.redo();
+        });
+        expect(styles(store)?.bp?.['mobile']?.background?.imagePosition).toBe('top left');
+    });
+    it('keeps a gradient with more than two stops editable without silently simplifying it', async () => {
+        const store = await mount(undefined, ['background']);
+        await act(async () => [...container.querySelectorAll('button')]
+            .find((button) => button.textContent === 'Gradient')
+            ?.click());
+        const gradient = 'linear-gradient(180deg, #123456, #456789, #abcdef)';
+        await type(inputAt('background.gradient'), gradient);
+        expect(styles(store)?.base?.background?.gradient).toBe(gradient);
+        expect(container.querySelector('.bd-gradient-fields')).toBeNull();
+    });
+});
+describe('template width modes', () => {
+    it('writes existing width values for automatic and full width, while Custom focuses the input', async () => {
+        const store = await mount(undefined, ['size']);
+        const mode = container.querySelector('[aria-label="Width mode"]');
+        const pick = async (value) => act(async () => {
+            [...(mode?.querySelectorAll('button') ?? [])]
+                .find((button) => button.textContent === value)
+                ?.click();
+        });
+        await pick('Full');
+        expect(styles(store)?.base?.size?.width).toBe('100%');
+        await pick('Auto');
+        expect(styles(store)?.base?.size?.width).toBe('auto');
+        expect([...(mode?.querySelectorAll('button') ?? [])]
+            .find((button) => button.textContent === 'Auto')
+            ?.getAttribute('aria-pressed')).toBe('true');
+        await type(inputAt('size.width'), 'fit-content');
+        expect([...(mode?.querySelectorAll('button') ?? [])]
+            .find((button) => button.textContent === 'Auto')
+            ?.getAttribute('aria-pressed')).toBe('false');
+        await pick('Custom');
+        expect(document.activeElement).toBe(inputAt('size.width'));
+        await type(inputAt('size.width'), '340px');
+        expect(styles(store)?.base?.size?.width).toBe('340px');
+    });
+});
+describe('template hover styles', () => {
+    it('resets state and search on selection, restores accordion preferences, and opens used sections', async () => {
+        const store = await mount(undefined, [
+            'layout',
+            'background',
+            'effects',
+            'spacing',
+            'visibility',
+        ]);
+        const sectionButton = (name) => container.querySelector(`[data-group="${name}"] .bd-sec__head`);
+        await act(async () => sectionButton('layout')?.click());
+        await act(async () => sectionButton('spacing')?.click());
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setStyle',
+                payload: { id: 'root', layer: {}, group: 'layout', property: 'display', value: 'flex' },
+            });
+        });
+        await act(async () => buttonNamed('Hover').click());
+        await type(container.querySelector('.bd-inspector-search input'), 'color');
+        await act(async () => store.select('root'));
+        expect(container.querySelector('.bd-styles')?.getAttribute('data-layer')).toBe('base');
+        expect(container.querySelector('.bd-inspector-search input')?.value).toBe('');
+        expect(sectionButton('layout')?.getAttribute('aria-expanded')).toBe('true');
+        expect(sectionButton('spacing')?.getAttribute('aria-expanded')).toBe('false');
+        await act(async () => sectionButton('visibility')?.click());
+        expect(sectionButton('visibility')?.getAttribute('aria-expanded')).toBe('true');
+        await act(async () => store.select('box0000001'));
+        expect(sectionButton('visibility')?.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('translates the source of values in every pseudo-state', async () => {
+        await mount(undefined, ['effects']);
+        for (const label of ['Hover', 'Focus', 'Pressed']) {
+            await act(async () => buttonNamed(label).click());
+            const select = container.querySelector('[data-style-prop="effects.cursor"] select');
+            if (select === null)
+                throw new Error('cursor select missing');
+            await act(async () => {
+                select.value = 'pointer';
+                select.dispatchEvent(new Event('change', { bubbles: true }));
+            });
+            expect(select.textContent).toContain(`Pointer (${label})`);
+            expect(select.textContent).not.toContain('state:');
+        }
+    });
+    it('stores the selected palette token for colors and gradient stops', async () => {
+        const store = await mount(undefined, ['background']);
+        const name = Object.keys(defaultTheme.tokens.color)[0];
+        const token = `$color.${name}`;
+        const trigger = container.querySelector('[data-style-prop="background.color"] .bd-color-trigger');
+        await act(async () => trigger?.click());
+        // The newest popover: the previous one may still be closing.
+        const pick = () => [
+            ...document.querySelectorAll(`.bd-color-palette button[aria-label^="${name}:"]`),
+        ].at(-1);
+        await act(async () => pick()?.click());
+        expect(styles(store)?.base?.background?.color).toBe(token);
+        await act(async () => document
+            .querySelector('.bd-color-popover')
+            ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })));
+        await act(async () => new Promise((resolve) => setTimeout(resolve, 50)));
+        await act(async () => [...container.querySelectorAll('button')]
+            .find((button) => button.textContent === 'Gradient')
+            ?.click());
+        const stops = container.querySelectorAll('.bd-gradient-stop .bd-color-trigger');
+        expect(stops).toHaveLength(2);
+        await act(async () => stops[1]?.click());
+        await act(async () => pick()?.click());
+        expect(styles(store)?.base?.background?.gradient).toBe(`linear-gradient(180deg, ${token}, ${token})`);
+    });
+    it('edits allowed visual properties through existing state-layer commands, with undo and redo', async () => {
+        const store = await mount('mobile', ['layout', 'effects', 'background']);
+        const dispatch = vi.spyOn(store, 'dispatch');
+        await act(async () => buttonNamed('Hover').click());
+        expect(container.querySelector('[data-group="layout"]')).toBeNull();
+        expect(container.querySelector('[data-style-prop="effects.cursor"]')).not.toBeNull();
+        await type(inputAt('background.color'), '#123456');
+        expect(dispatch).toHaveBeenCalledWith({
+            type: 'node.setStyle',
+            payload: {
+                id: 'box0000001',
+                layer: { state: 'hover' },
+                group: 'background',
+                property: 'color',
+                value: '#123456',
+            },
+        });
+        expect(styles(store)?.state?.hover?.background?.color).toBe('#123456');
+        expect(styles(store)?.bp?.['mobile']?.background?.color).toBeUndefined();
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.state?.hover?.background?.color).toBeUndefined();
+        await act(async () => {
+            store.redo();
+        });
+        expect(styles(store)?.state?.hover?.background?.color).toBe('#123456');
+        await act(async () => buttonNamed('Restore default: Color').click());
+        expect(styles(store)?.state?.hover?.background?.color).toBeUndefined();
+    });
+});
+describe('style sections chrome (PB-157 WP5a)', () => {
+    const head = (name) => container.querySelector(`[data-group="${name}"] .bd-sec__head`);
+    it('highlights the matched label text and shows a no-results state', async () => {
+        await mount();
+        const search = container.querySelector('.bd-inspector-search input');
+        if (search === null)
+            throw new Error('search missing');
+        await type(search, 'GAP');
+        expect(container.querySelector('[data-style-prop="layout.gap"] .bd-field-label mark')?.textContent).toBe('Gap');
+        await type(search, 'zzz');
+        expect(container.querySelector('.bd-empty strong')?.textContent).toContain('zzz');
+        expect(container.querySelector('[data-group]')).toBeNull();
+    });
+    it('keeps the remembered state when storage is corrupt or refuses writes', async () => {
+        localStorage.setItem('buildr.editor.inspector.styles', 'not json {');
+        await mount();
+        expect(head('spacing')?.getAttribute('aria-expanded')).toBe('true');
+        expect(head('visibility')?.getAttribute('aria-expanded')).toBe('false');
+        const set = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+            throw new Error('full');
+        });
+        await act(async () => head('spacing')?.click());
+        expect(head('spacing')?.getAttribute('aria-expanded')).toBe('false');
+        set.mockRestore();
+    });
+    it('counts the values set only at the breakpoint being edited', async () => {
+        await mount('tablet');
+        const chip = container.querySelector('[data-group="layout"] .bd-ovr');
+        expect(chip?.textContent).toBe('1');
+        expect(chip?.getAttribute('aria-label')).toContain('tablet');
+        expect(container.querySelector('[data-group="spacing"] .bd-ovr')).toBeNull();
+        expect(container.querySelector('.bd-note--ovr')?.textContent).toContain('tablet');
+    });
+    it('resets a section with unset commands only, as one undo step', async () => {
+        const store = await mount('tablet');
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setStyle',
+                payload: {
+                    id: 'box0000001',
+                    layer: { bp: 'tablet' },
+                    group: 'layout',
+                    property: 'gap',
+                    value: '8px',
+                },
+            });
+        });
+        expect(container.querySelector('[data-group="layout"] .bd-ovr')?.textContent).toBe('2');
+        const dispatch = vi.spyOn(store, 'dispatch');
+        const reset = container.querySelector('[data-group="layout"] .bd-sec__foot button');
+        await act(async () => reset?.click());
+        const types = dispatch.mock.calls.map(([command]) => command.type);
+        expect(types.length).toBe(2);
+        expect(new Set(types)).toEqual(new Set(['node.unsetStyle']));
+        expect(styles(store)?.bp?.['tablet']?.layout).toBeUndefined();
+        expect(styles(store)?.base?.layout?.gap).toBe('$space.4');
+        expect(container.querySelector('[data-group="layout"] .bd-sec__foot')).toBeNull();
+        await act(async () => {
+            store.undo();
+        });
+        expect(styles(store)?.bp?.['tablet']?.layout?.display).toBe('grid');
+        expect(styles(store)?.bp?.['tablet']?.layout?.gap).toBe('8px');
+    });
+    it('expands and collapses every section from SectionsToggle', async () => {
+        const store = await mount(undefined, ['layout', 'spacing', 'visibility']);
+        const initial = store.getState().doc;
+        await act(async () => buttonNamed('Expand all sections').click());
+        for (const name of ['layout', 'spacing', 'visibility'])
+            expect(head(name)?.getAttribute('aria-expanded')).toBe('true');
+        expect(JSON.parse(localStorage.getItem('buildr.editor.inspector.styles') ?? '{}')).toEqual({
+            layout: true,
+            spacing: true,
+            visibility: true,
+        });
+        await act(async () => buttonNamed('Collapse all sections').click());
+        for (const name of ['layout', 'spacing', 'visibility'])
+            expect(head(name)?.getAttribute('aria-expanded')).toBe('false');
+        expect(store.getState().doc).toBe(initial);
+    });
+    it('hides min and max dimensions behind a disclosure', async () => {
+        await mount(undefined, ['size']);
+        expect(container.querySelector('[data-style-prop="size.minWidth"]')).toBeNull();
+        await act(async () => buttonNamed('Min. and max. dimensions').click());
+        expect(container.querySelector('[data-style-prop="size.minWidth"]')).not.toBeNull();
+    });
+});
+describe('motion section (ADR-027)', () => {
+    const presetButton = (name) => [...container.querySelectorAll('.bd-motion-presets button')].find((b) => b.textContent === name);
+    it('offers ready effects and hides the entrance details until one is chosen', async () => {
+        await mount(undefined, ['motion']);
+        expect(container.querySelector('.bd-motion-presets')).not.toBeNull();
+        expect(container.querySelector('[data-style-prop="motion.entranceDuration"]')).toBeNull();
+        expect(container.querySelector('[data-style-prop="motion.entranceDirection"]')).toBeNull();
+    });
+    it('writes a preset as one undo step and shows its controls', async () => {
+        const store = await mount(undefined, ['motion']);
+        const slide = container.querySelector('.bd-motion-presets button:nth-child(3)');
+        await act(async () => slide.click());
+        expect(styles(store)?.base?.['motion']).toMatchObject({
+            entrance: 'slide',
+            entranceDirection: 'up',
+        });
+        expect(container.querySelector('[data-style-prop="motion.entranceDuration"]')).not.toBeNull();
+        expect(container.querySelector('[data-style-prop="motion.entranceDirection"]')).not.toBeNull();
+        expect(container.querySelector('.bd-motion-curve')).not.toBeNull();
+        store.undo();
+        expect(styles(store)?.base?.['motion']).toBeUndefined();
+        expect(presetButton('None')).toBeDefined();
+    });
+});
+describe('background media (PB-157)', () => {
+    const mediaProps = {
+        backgroundImage: p.media({ label: 'Background image', accept: ['image'] }),
+        backgroundVideo: p.media({ label: 'Background video', accept: ['video'] }),
+        backgroundPoster: p.media({ label: 'Video poster', accept: ['image'] }),
+    };
+    const kindButton = (name) => [...container.querySelectorAll('.bd-bg-kind button')].find((b) => b.textContent === name);
+    const click = (element) => act(async () => element.click());
+    const propOf = (store, name) => store.getState().doc.nodes['box0000001']?.props?.[name];
+    const setMedia = (store, prop, url) => store.dispatch({
+        type: 'node.setProp',
+        payload: {
+            id: 'box0000001',
+            prop,
+            value: { kind: 'static', value: { external: true, url } },
+        },
+    });
+    const field = (prop) => container.querySelector(`[data-prop=${prop}]`);
+    it('keeps Image and Video off, with a reason, for a component without those props', async () => {
+        await mount(undefined, ['background']);
+        expect(kindButton('Image')?.disabled).toBe(true);
+        expect(kindButton('Video')?.disabled).toBe(true);
+        expect(container.textContent).toContain('This component has no image or video background.');
+    });
+    it('enables Image and Video for a component that has the props and shows their fields', async () => {
+        await mount(undefined, ['background'], false, mediaProps);
+        expect(kindButton('Image')?.disabled).toBe(false);
+        expect(kindButton('Video')?.disabled).toBe(false);
+        expect(container.textContent).not.toContain('has no image or video');
+        await click(kindButton('Image'));
+        expect(field('backgroundImage')).not.toBeNull();
+        expect(field('backgroundVideo')).toBeNull();
+        await click(kindButton('Video'));
+        expect(field('backgroundVideo')).not.toBeNull();
+        expect(field('backgroundPoster')).not.toBeNull();
+        expect(field('backgroundImage')).toBeNull();
+    });
+    it('shows the kind the component already holds', async () => {
+        const store = await mount(undefined, ['background'], false, mediaProps);
+        expect(kindButton('Video')?.getAttribute('aria-pressed')).toBe('false');
+        await act(async () => void setMedia(store, 'backgroundVideo', 'https://cdn.example.com/a.mp4'));
+        expect(kindButton('Video')?.getAttribute('aria-pressed')).toBe('true');
+        expect(field('backgroundVideo')).not.toBeNull();
+    });
+    it('clears the other media when the kind changes, as one undo step', async () => {
+        const store = await mount(undefined, ['background'], false, mediaProps);
+        await act(async () => void setMedia(store, 'backgroundImage', 'https://cdn.example.com/a.jpg'));
+        expect(kindButton('Image')?.getAttribute('aria-pressed')).toBe('true');
+        await click(kindButton('Video'));
+        expect(propOf(store, 'backgroundImage')).toBeUndefined();
+        await act(async () => {
+            store.undo();
+        });
+        expect(propOf(store, 'backgroundImage')).toBeDefined();
+        expect(kindButton('Image')?.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('clears the video and its poster when switching to Image, and one undo restores both', async () => {
+        const store = await mount(undefined, ['background'], false, mediaProps);
+        await act(async () => {
+            setMedia(store, 'backgroundVideo', 'https://cdn.example.com/a.mp4');
+            setMedia(store, 'backgroundPoster', 'https://cdn.example.com/p.jpg');
+        });
+        await click(kindButton('Image'));
+        expect(propOf(store, 'backgroundVideo')).toBeUndefined();
+        expect(propOf(store, 'backgroundPoster')).toBeUndefined();
+        await act(async () => {
+            store.undo();
+        });
+        expect(propOf(store, 'backgroundVideo')).toBeDefined();
+        expect(propOf(store, 'backgroundPoster')).toBeDefined();
+        expect(kindButton('Video')?.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('clears all media when switching to None, and one undo restores them', async () => {
+        const store = await mount(undefined, ['background'], false, mediaProps);
+        await act(async () => {
+            setMedia(store, 'backgroundVideo', 'https://cdn.example.com/a.mp4');
+            setMedia(store, 'backgroundPoster', 'https://cdn.example.com/p.jpg');
+        });
+        await click(kindButton('None'));
+        expect(propOf(store, 'backgroundVideo')).toBeUndefined();
+        expect(propOf(store, 'backgroundPoster')).toBeUndefined();
+        await act(async () => {
+            store.undo();
+        });
+        expect(propOf(store, 'backgroundVideo')).toBeDefined();
+        expect(propOf(store, 'backgroundPoster')).toBeDefined();
+    });
+    it('rolls back and says so when a switch fails', async () => {
+        const store = await mount(undefined, ['background'], false, mediaProps);
+        await act(async () => {
+            setMedia(store, 'backgroundImage', 'https://cdn.example.com/a.jpg');
+        });
+        const dispatch = store.dispatch.bind(store);
+        vi.spyOn(store, 'dispatch').mockImplementation((command, options) => command.type === 'node.unsetProp'
+            ? { ok: false, error: { code: 'x', message: 'refused' } }
+            : dispatch(command, options));
+        await click(kindButton('Video'));
+        expect(propOf(store, 'backgroundImage')).toBeDefined();
+        expect(container.querySelector('.bd-inspector-notice')?.textContent).toBe('The background could not be changed. Nothing was removed.');
+    });
+    it('keeps the colour and gradient choices working on a device layer that holds media', async () => {
+        const store = await mount('tablet', ['background'], false, mediaProps);
+        await act(async () => void setMedia(store, 'backgroundVideo', 'https://cdn.example.com/a.mp4'));
+        expect(kindButton('Video')?.getAttribute('aria-pressed')).toBe('false');
+        await click(kindButton('Gradient'));
+        expect(kindButton('Gradient')?.getAttribute('aria-pressed')).toBe('true');
+        expect(container.querySelector('[data-style-prop="background.gradient"]')).not.toBeNull();
+        await click(kindButton('Colour'));
+        expect(container.querySelector('[data-style-prop="background.color"]')).not.toBeNull();
+        expect(propOf(store, 'backgroundVideo')).toBeDefined();
+    });
+    it('does not offer media while a device is being edited', async () => {
+        await mount('tablet', ['background'], false, mediaProps);
+        expect(kindButton('Image')?.disabled).toBe(true);
+        expect(container.textContent).toContain('belong to the whole component');
+    });
+});