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

package/dist/panels/inspector/styles/widgets.test.js

@@ -0,0 +1,247 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, defaultTheme, toManifest, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ManifestProvider } from '../../../app/manifest.js';
+import { MessagesProvider } from '../../../messages/index.js';
+import { createEditorStore, EditorStoreProvider, useEditorState } from '../../../store/index.js';
+import { StyleInspector } from './style-inspector.js';
+import { ShadowLayers } from './widgets.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const box = {
+    type: 'buildr/box',
+    version: 1,
+    label: 'Box',
+    category: 'layout',
+    props: {},
+    contentCategories: ['flow'],
+    styles: { groups: ['layout', 'spacing', 'effects', 'background', 'border'] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...box,
+    type: 'buildr/page',
+    label: 'Page',
+    capabilities: { root: true },
+};
+const fixture = (base = {}) => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['box0000001'] } },
+        box0000001: { id: 'box0000001', type: 'buildr/box', styles: { base } },
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    globalThis.ResizeObserver ??= class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+    Element.prototype.setPointerCapture ??= () => { };
+    Element.prototype.releasePointerCapture ??= () => { };
+    localStorage.clear();
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(base, groups) {
+    const reg = createRegistryMeta({ components: [page, { ...box, styles: { groups } }] });
+    const store = createEditorStore({
+        doc: fixture(base),
+        registry: reg,
+        readOnly: false,
+        generateId: createSeededIdGenerator(3),
+        validationDelayMs: null,
+    });
+    store.select('box0000001');
+    const View = () => {
+        const node = useEditorState((state) => state.anchorId === null ? undefined : state.doc.nodes[state.anchorId]);
+        return node === undefined ? null : _jsx(StyleInspector, { node: node });
+    };
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: toManifest(reg), children: _jsx(EditorStoreProvider, { store: store, children: _jsx(View, {}) }) }) })));
+    return store;
+}
+const base = (store) => store.getState().doc.nodes['box0000001']?.styles?.base;
+const type = (element, value) => act(async () => {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(element, value);
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+});
+const byLabel = (name) => container.querySelector(`[aria-label="${name}"]`);
+const buttonNamed = (name) => [...container.querySelectorAll('button')].find((b) => b.getAttribute('aria-label') === name);
+const clickAdd = () => act(async () => container.querySelector('.bd-wshadow__add')?.click());
+describe('box model', () => {
+    it('draws margin around padding with a bar each, and writes only through setStyle', async () => {
+        const store = await mount({ spacing: { padding: { top: '4px' } } }, ['spacing']);
+        expect(container.querySelector('.bd-boxmodel .bd-wbox .bd-wbox--in')).not.toBeNull();
+        expect(container.querySelectorAll('.bd-boxbar .bd-style-head')).toHaveLength(2);
+        const dispatch = vi.spyOn(store, 'dispatch');
+        await type(byLabel('Padding top'), '12');
+        expect(base(store)?.spacing?.padding).toEqual({ top: '12px' });
+        for (const [command] of dispatch.mock.calls)
+            expect(command.type).toBe('node.setStyle');
+    });
+    it('the link toggle makes one value write every side, with setStyle commands only', async () => {
+        const store = await mount({ spacing: { padding: { top: '4px' } } }, ['spacing']);
+        const dispatch = vi.spyOn(store, 'dispatch');
+        await act(async () => buttonNamed('Padding: Link sides').click());
+        await type(byLabel('Padding left'), '8');
+        expect(base(store)?.spacing?.padding).toEqual({
+            top: '8px',
+            right: '8px',
+            bottom: '8px',
+            left: '8px',
+        });
+        for (const [command] of dispatch.mock.calls)
+            expect(command.type).toBe('node.setStyle');
+    });
+});
+describe('alignment pad', () => {
+    it('names the chosen cell in a caption and selects with aria-checked', async () => {
+        const store = await mount({
+            background: { imagePosition: 'top left', gradient: 'linear-gradient(180deg, #000, #fff)' },
+        }, ['background']);
+        const pad = container.querySelector('.bd-alignment-pad');
+        expect(pad.getAttribute('role')).toBe('radiogroup');
+        expect(pad.querySelector('[aria-label="top left"]')?.getAttribute('aria-checked')).toBe('true');
+        expect(container.querySelector('.bd-wpad__caption strong')?.textContent).toBe('Top left');
+        await act(async () => pad.querySelector('[aria-label="bottom"]')?.click());
+        expect(base(store)?.background?.imagePosition).toBe('bottom');
+        expect(container.querySelector('.bd-wpad__caption strong')?.textContent).toBe('Bottom');
+    });
+});
+const key = (element, name) => act(async () => {
+    element.dispatchEvent(new KeyboardEvent('keydown', { key: name, bubbles: true, cancelable: true }));
+});
+describe('radio keyboard navigation', () => {
+    it('moves focus and selection over the 3x3 pad with a roving tab stop', async () => {
+        const store = await mount({
+            background: { imagePosition: 'top left', gradient: 'linear-gradient(180deg, #000, #fff)' },
+        }, ['background']);
+        const radios = () => [
+            ...container.querySelectorAll('.bd-alignment-pad [role="radio"]'),
+        ];
+        expect(radios().map((r) => r.tabIndex)).toEqual([0, -1, -1, -1, -1, -1, -1, -1, -1]);
+        await key(radios()[0], 'ArrowRight');
+        expect(base(store)?.background?.imagePosition).toBe('top');
+        expect(document.activeElement).toBe(radios()[1]);
+        expect(radios()[1]?.tabIndex).toBe(0);
+        await key(radios()[1], 'ArrowDown');
+        expect(base(store)?.background?.imagePosition).toBe('center');
+        await key(radios()[4], 'ArrowLeft');
+        await key(radios()[3], 'ArrowLeft');
+        expect(base(store)?.background?.imagePosition).toBe('right');
+        await key(radios()[5], 'ArrowUp');
+        await key(radios()[2], 'ArrowUp');
+        expect(base(store)?.background?.imagePosition).toBe('bottom right');
+        await key(radios()[8], 'Home');
+        expect(base(store)?.background?.imagePosition).toBe('top left');
+        await key(radios()[0], 'End');
+        expect(base(store)?.background?.imagePosition).toBe('bottom right');
+    });
+    it('moves over the shadow presets with wrapping', async () => {
+        const store = await mount({ effects: { shadow: 'none' } }, ['effects']);
+        const radios = () => [
+            ...container.querySelectorAll('.bd-shadow-presets [role="radio"]'),
+        ];
+        const last = radios().length - 1;
+        expect(radios().filter((r) => r.tabIndex === 0)).toHaveLength(1);
+        expect(radios()[0]?.tabIndex).toBe(0);
+        await key(radios()[0], 'ArrowLeft');
+        expect(radios()[last]?.getAttribute('aria-checked')).toBe('true');
+        expect(base(store)?.effects?.shadow).toMatch(/^\$shadow\./);
+        await key(radios()[last], 'ArrowRight');
+        expect(radios()[0]?.getAttribute('aria-checked')).toBe('true');
+    });
+});
+describe('range slider', () => {
+    it('shows the value in a bubble and writes it as a number', async () => {
+        const store = await mount({ effects: { opacity: 0.5 } }, ['effects']);
+        const range = container.querySelector('[data-path="effects.opacity"] .bd-slider input[type="range"]');
+        expect(container.querySelector('[data-path="effects.opacity"] .bd-slider__bubble')?.textContent).toBe('50%');
+        await type(range, '0.8');
+        expect(base(store)?.effects?.opacity).toBe(0.8);
+        expect(container.querySelector('[data-path="effects.opacity"] .bd-slider__bubble')?.textContent).toBe('80%');
+    });
+});
+describe('colour field', () => {
+    const colorInput = () => container.querySelector('[data-path="background.color"] input');
+    it('ignores an invalid hex and writes a valid one', async () => {
+        const store = await mount({}, ['background']);
+        await type(colorInput(), '#zzz');
+        expect(base(store)?.background?.color).toBeUndefined();
+        expect(colorInput().getAttribute('aria-invalid')).toBe('true');
+        await type(colorInput(), '#123456');
+        expect(base(store)?.background?.color).toBe('#123456');
+    });
+    it('writes the token chosen in the token picker', async () => {
+        const store = await mount({}, ['background']);
+        const name = Object.keys(defaultTheme.tokens.color)[0];
+        const trigger = container.querySelector('[data-path="background.color"] .bd-token-trigger');
+        await act(async () => trigger?.click());
+        const entry = [...document.querySelectorAll('.bd-token')].find((button) => button.textContent === name);
+        await act(async () => entry?.click());
+        expect(base(store)?.background?.color).toBe(`$color.${name}`);
+    });
+});
+describe('shadow cards', () => {
+    it('shows the preset through sliders that start from its first layer and edit a custom shadow', async () => {
+        const name = Object.keys(defaultTheme.tokens.shadow)[0];
+        const store = await mount({ effects: { shadow: `$shadow.${name}` } }, ['effects']);
+        // The sliders replace the read-only layer cards.
+        expect(container.querySelectorAll('.bd-wshadow__card')).toHaveLength(0);
+        const x = container.querySelector('[data-path="effects.shadowX"] input:not([type="range"])');
+        expect(x).not.toBeNull();
+        expect(base(store)?.effects?.shadowX).toBeUndefined();
+        await type(x, '3');
+        // One edit writes the whole custom shadow (X, Y, blur, spread, colour, inset) that overrides the token.
+        expect(base(store)?.effects?.shadowX).toBe('3px');
+        expect(base(store)?.effects?.shadowColor).toBeDefined();
+        expect(base(store)?.effects?.shadowInset).toBeDefined();
+    });
+    it('adds, edits and removes layers through onChange, as the grammar allows four', async () => {
+        const onChange = vi.fn();
+        const View = ({ value }) => (_jsx(MessagesProvider, { locale: "en", children: _jsx(ShadowLayers, { theme: defaultTheme, value: value, disabled: false, onChange: onChange }) }));
+        await act(async () => root.render(_jsx(View, { value: "none" })));
+        expect(container.querySelectorAll('.bd-wshadow__card')).toHaveLength(0);
+        await clickAdd();
+        expect(onChange).toHaveBeenLastCalledWith('0px 4px 12px 0px #00000026');
+        const two = '0px 4px 12px 0px #00000026, 0px 2px 4px 0px #00000026';
+        await act(async () => root.render(_jsx(View, { value: two })));
+        expect(container.querySelectorAll('.bd-wshadow__card')).toHaveLength(2);
+        await type(byLabel('Shadow layer 1: Blur'), '20');
+        expect(onChange).toHaveBeenLastCalledWith('0px 4px 20px 0px #00000026, 0px 2px 4px 0px #00000026');
+        await type(byLabel('Shadow layer 1: Shadow colour'), '#12');
+        expect(onChange).toHaveBeenCalledTimes(2);
+        await act(async () => buttonNamed('Remove: Shadow layer 2').click());
+        expect(onChange).toHaveBeenLastCalledWith('0px 4px 12px 0px #00000026');
+        await act(async () => root.render(_jsx(View, { value: "0px 4px 12px 0px #00000026" })));
+        await act(async () => buttonNamed('Remove: Shadow layer 1').click());
+        expect(onChange).toHaveBeenLastCalledWith('none');
+    });
+});
+describe('reset field', () => {
+    it('shows the icon only for an override and removes that value', async () => {
+        const store = await mount({ background: { color: '#123456' } }, ['background']);
+        const field = '[data-style-prop="background.color"]';
+        expect(container.querySelector(`${field} .bd-reset-slot`)).toBeNull();
+        const dispatch = vi.spyOn(store, 'dispatch');
+        await act(async () => buttonNamed('Restore default: Color').click());
+        expect(base(store)?.background?.color).toBeUndefined();
+        expect(dispatch.mock.calls.map(([command]) => command.type)).toEqual(['node.unsetStyle']);
+        expect(container.querySelector(`${field} .bd-reset-slot`)).not.toBeNull();
+        expect(container.querySelector(`${field} .bd-reset`)).toBeNull();
+    });
+});

package/dist/panels/inspector/values/value-editor.d.ts

@@ -20,7 +20,7 @@ export interface ValueEditorProps {
  * but has no value in yet (no field picked, no valid formula) is only shown, not written: nothing
  * invalid reaches the document.
  */
-export declare function ValueEditor({ def, label, raw, disabled, staticControl, onSet, onFixed, }: ValueEditorProps): import("react").JSX.Element;
+export declare function ValueEditor({ def, label, raw, disabled, staticControl, onSet, onFixed, }: ValueEditorProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 export interface ValueChipProps {
     readonly def: PropDef;
     readonly value: Value;

package/dist/panels/inspector/values/value-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"value-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/value-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,OAAO,EAEZ,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AAsC5E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,QAAQ,CAAC,GAAG,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC;IAClC,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAKD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,GAAG,EACH,QAAQ,EACR,aAAa,EACb,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,+BAiElB;AAID,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;CACvB;AAED,kHAAkH;AAClH,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,cAAc,sCAevD"}
+{"version":3,"file":"value-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/values/value-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,OAAO,EAEZ,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AA8C5E,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wFAAwF;IACxF,QAAQ,CAAC,GAAG,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,aAAa,EAAE,SAAS,CAAC;IAClC,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;CAC9B;AAKD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,GAAG,EACH,QAAQ,EACR,aAAa,EACb,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,+TA+ElB;AAID,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;CACvB;AAED,kHAAkH;AAClH,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,cAAc,sCAevD"}

package/dist/panels/inspector/values/value-editor.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { bind, expr, schemaAtPath, } from '@next-buildr/core';
 import { useEffect, useId, useMemo, useState } from 'react';
 import { useT } from '../../../messages/index.js';
-import { Icon, Input, SegmentedControl, Select } from '../../../ui/index.js';
+import { Icon, IconButton, Input, Popover, SegmentedControl, Select, } from '../../../ui/index.js';
 import { bindingOptions, checkBinding, checkFormula, defaultFormat, formatKindsFor, previewValue, spanOf, } from './analyze.js';
 import { useInspectorData } from './data.js';
 /** How many fields the picker lists at once; a long list is narrowed with the search. */
@@ -34,10 +34,10 @@ export function ValueEditor({ def, label, raw, disabled, staticControl, onSet, o
     const t = useT();
     const [pending, setPending] = useState(null);
     const saved = modeOf(raw);
-    const mode = saved === 'static' && pending !== null ? pending : saved;
+    const mode = pending ?? saved;
     const canBind = def.accepts.length > 0;
     if (!canBind) {
-        return raw !== undefined && raw.kind !== 'static' ? (_jsx(ValueChip, { def: def, value: raw })) : (_jsx(_Fragment, { children: staticControl }));
+        return raw !== undefined && raw.kind !== 'static' ? (_jsx(ValueChip, { def: def, value: raw })) : (staticControl);
     }
     const choose = (next) => {
         if (next === mode)
@@ -55,11 +55,12 @@ export function ValueEditor({ def, label, raw, disabled, staticControl, onSet, o
         { mode: 'binding', key: 'values.mode.binding', icon: 'database' },
         { mode: 'expression', key: 'values.mode.formula', icon: 'sigma' },
     ];
-    return (_jsxs("div", { className: "bd-value", "data-mode": mode, children: [_jsx(SegmentedControl, { className: "bd-value-modes", label: `${label}: ${t('values.mode')}`, value: mode, disabled: disabled, options: modes.map((entry) => ({
-                    value: entry.mode,
-                    label: t(entry.key),
-                    icon: entry.icon,
-                })), onValueChange: (next) => choose(next) }), mode === 'static' ? staticControl : null, mode === 'binding' ? (_jsx(BindingEditor, { def: def, label: label, raw: raw?.kind === 'binding' ? raw : undefined, disabled: disabled, onSet: onSet })) : null, mode === 'expression' ? (_jsx(FormulaEditor, { def: def, label: label, raw: raw?.kind === 'expression' ? raw : undefined, disabled: disabled, onSet: onSet })) : null] }));
+    return (_jsxs("div", { className: "bd-value", "data-mode": mode, children: [_jsx("div", { className: "bd-value-modes", children: _jsx(Popover, { label: `${label}: ${t('values.mode')}`, trigger: _jsx(IconButton, { variant: "ghost", icon: "database", label: `${label}: ${t('values.mode')}`, disabled: disabled }), children: _jsx(SegmentedControl, { label: `${label}: ${t('values.mode')}`, value: mode, disabled: disabled, options: modes.map((entry) => ({
+                            value: entry.mode,
+                            label: t(entry.key),
+                            icon: entry.icon,
+                            iconOnly: true,
+                        })), onValueChange: (next) => choose(next) }) }) }), mode === 'static' ? staticControl : null, mode === 'binding' ? (_jsx(BindingEditor, { def: def, label: label, raw: raw?.kind === 'binding' ? raw : undefined, disabled: disabled, onSet: onSet })) : null, mode === 'expression' ? (_jsx(FormulaEditor, { def: def, label: label, raw: raw?.kind === 'expression' ? raw : undefined, disabled: disabled, onSet: onSet })) : null] }));
 }
 /** What a bound or formula prop shows where a control would be: the path or the formula, red when it is wrong. */
 export function ValueChip({ def, value }) {

package/dist/panels/inspector/values/values.test.js

@@ -128,15 +128,19 @@ describe('value modes in the inspector', () => {
         return store;
     }
     const title = () => container.querySelector('[data-prop=title]');
-    const button = (name) => [...title().querySelectorAll('button')].find((element) => element.textContent === name);
+    const button = (name) => [...document.querySelectorAll('button')].find((element) => (element.getAttribute('aria-label') ?? element.textContent) === name);
     const click = (element) => act(async () => {
         element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
     });
     const propOf = (store) => store.getState().doc.nodes['widget0001']?.props?.['title'];
     it('picking a field writes a binding', async () => {
         const store = await mount();
+        await click(title().querySelector('.bd-value-modes button'));
         await click(button('Data'));
-        const field = [...title().querySelectorAll('button')].find((element) => element.textContent?.includes('post.title'));
+        await act(async () => {
+            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        });
+        const field = [...document.querySelectorAll('button')].find((element) => element.textContent?.includes('post.title'));
         expect(field).toBeDefined();
         await click(field);
         expect(propOf(store)).toMatchObject({ kind: 'binding', path: 'post.title' });
@@ -159,7 +163,8 @@ describe('value modes in the inspector', () => {
     });
     it('shows the mode switch as a segmented control with icons, and the field list with type icons', async () => {
         await mount({ title: { kind: 'binding', path: 'post.title' } });
-        const modes = title().querySelector('.bd-value-modes.bd-segmented');
+        await click(title().querySelector('.bd-value-modes button'));
+        const modes = document.querySelector('.bd-popover .bd-segmented');
         expect(modes?.tagName).toBe('FIELDSET');
         expect(modes?.querySelectorAll('svg')).toHaveLength(3);
         expect(title().querySelector('.bd-value-field-icon')).not.toBeNull();
@@ -167,6 +172,7 @@ describe('value modes in the inspector', () => {
     });
     it('switching back to Fixed restores a static value', async () => {
         const store = await mount({ title: { kind: 'binding', path: 'post.title' } });
+        await click(title().querySelector('.bd-value-modes button'));
         await click(button('Fixed'));
         expect(propOf(store)?.kind ?? 'static').toBe('static');
     });

package/dist/panels/issues/collect.d.ts

@@ -17,6 +17,8 @@ export interface IssueItem {
     readonly fix?: A11yFix | undefined;
     /** The language a finding was made in (`missing-translation`); absent for the ones that do not depend on it. */
     readonly locale?: string | undefined;
+    /** The values a diagnostic carried (`slot`, `recorded`, ...); what a translated message fills in. */
+    readonly details?: Readonly<Record<string, unknown>> | undefined;
 }
 /** The node a diagnostic is about: the one its path points into, else the one it names in `details`. */
 export declare function nodeOfDiagnostic(diagnostic: Diagnostic): NodeId | undefined;

package/dist/panels/issues/collect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collect.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/collect.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"collect.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/collect.ts"],"names":[],"mappings":"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"}

package/dist/panels/issues/collect.js

@@ -25,6 +25,7 @@ export function collectIssues(input) {
             message: issue.message,
             nodeId: known(nodeOfDiagnostic(issue)),
             blocking: issue.blocking,
+            details: issue.details,
         });
     }
     for (const [index, issue] of (input.a11y ?? []).entries()) {

package/dist/panels/issues/index.d.ts

@@ -2,4 +2,5 @@ export type { CollectInput, IssueCounts, IssueItem, IssueSeverity, IssueSource,
 export { collectIssues, countIssues, filterIssues, groupMissingTranslations, MISSING_TRANSLATION, nodeOfDiagnostic, publishGate, } from './collect.ts';
 export type { IssuesPanelProps } from './issues-panel.tsx';
 export { IssuesPanel, SEVERITY_ICON, useIssues } from './issues-panel.tsx';
+export { issuePath } from './path.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/panels/issues/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/panels/issues/index.js

@@ -1,2 +1,3 @@
 export { collectIssues, countIssues, filterIssues, groupMissingTranslations, MISSING_TRANSLATION, nodeOfDiagnostic, publishGate, } from './collect.js';
 export { IssuesPanel, SEVERITY_ICON, useIssues } from './issues-panel.js';
+export { issuePath } from './path.js';

package/dist/panels/issues/issues-panel.d.ts

@@ -9,9 +9,10 @@ export interface IssuesPanelProps {
 export declare function useIssues(canvasDiagnostics?: readonly Diagnostic[]): IssueItem[];
 export declare const SEVERITY_ICON: Readonly<Record<IssueSeverity, IconName>>;
 /**
- * The Issues panel (docs/editor.md#issues-and-publishing): the findings of validation, the
- * accessibility rules and the canvas, filterable by severity. Choosing one selects the node it is
- * about; a finding with an unambiguous repair offers it as a button that runs it as a command.
+ * The content of the Issues drawer (docs/editor.md#issues-and-publishing): a header with the count
+ * and a close button, then one 40px row per finding (worst first) with its "Block › Block" path.
+ * Choosing a row selects the node it is about; a finding with an unambiguous repair offers it as a
+ * button that runs it as a command. The drawer itself (placement, height) belongs to the layout.
  */
 export declare function IssuesPanel({ canvasDiagnostics }: IssuesPanelProps): import("react").JSX.Element;
 //# sourceMappingURL=issues-panel.d.ts.map

package/dist/panels/issues/issues-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"issues-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/issues-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,EAA+B,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EAEnB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;CAChE;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,EAAE,CAahF;AAWD,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAInE,CAAC;AAQF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,+BA4GlE"}
+{"version":3,"file":"issues-panel.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/issues-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,gBAAgB;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,CAAC;CAChE;AAED,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,iBAAiB,CAAC,EAAE,SAAS,UAAU,EAAE,GAAG,SAAS,EAAE,CAkBhF;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAInE,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,+BA8FlE"}

package/dist/panels/issues/issues-panel.js

@@ -1,53 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { componentMeta, useManifest } from '../../app/manifest.js';
-import { useT } from '../../messages/index.js';
+import { useManifest, useSourceManifest } from '../../app/manifest.js';
+import { useStageSlots } from '../../app/stage-slots.js';
+import { localizeIssue } from '../../i18n/diagnostics.js';
+import { useT, useUiLocale } from '../../messages/index.js';
 import { useEditor, useEditorState, useLocaleState } from '../../store/index.js';
-import { Button, ComponentIcon, Icon } from '../../ui/index.js';
-import { collectIssues, countIssues, filterIssues, groupMissingTranslations, } from './collect.js';
+import { Button, Icon, IconButton } from '../../ui/index.js';
+import { collectIssues, groupMissingTranslations, } from './collect.js';
+import { issuePath } from './path.js';
 /** Everything the checks found, as one list: validation, accessibility and the canvas. */
 export function useIssues(canvasDiagnostics) {
     const doc = useEditorState((state) => state.doc);
     const validation = useEditorState((state) => state.validation);
+    const intl = useLocaleState((state) => state.config.intl);
+    const t = useT();
+    const uiLocale = useUiLocale();
+    const manifest = useManifest();
+    const source = useSourceManifest();
     return useMemo(() => collectIssues({
         doc,
         validation: validation?.issues,
         a11y: validation?.a11y,
         canvas: canvasDiagnostics,
-    }), [doc, validation, canvasDiagnostics]);
+    }).map((item) => localizeIssue(item, { t, uiLocale, doc, manifest, source, intl })), [doc, validation, canvasDiagnostics, t, uiLocale, manifest, source, intl]);
 }
-const FILTERS = [
-    { filter: 'all', key: 'issues.filter.all' },
-    { filter: 'error', key: 'issues.filter.error' },
-    { filter: 'warning', key: 'issues.filter.warning' },
-    { filter: 'info', key: 'issues.filter.info' },
-];
-const SEVERITIES = ['error', 'warning', 'info'];
 export const SEVERITY_ICON = {
     error: 'circle-alert',
     warning: 'triangle-alert',
     info: 'info',
 };
-const SOURCE_KEY = {
-    validation: 'issues.source.validation',
-    a11y: 'issues.source.a11y',
-    canvas: 'issues.source.canvas',
-};
 /**
- * The Issues panel (docs/editor.md#issues-and-publishing): the findings of validation, the
- * accessibility rules and the canvas, filterable by severity. Choosing one selects the node it is
- * about; a finding with an unambiguous repair offers it as a button that runs it as a command.
+ * The content of the Issues drawer (docs/editor.md#issues-and-publishing): a header with the count
+ * and a close button, then one 40px row per finding (worst first) with its "Block › Block" path.
+ * Choosing a row selects the node it is about; a finding with an unambiguous repair offers it as a
+ * button that runs it as a command. The drawer itself (placement, height) belongs to the layout.
  */
 export function IssuesPanel({ canvasDiagnostics }) {
     const t = useT();
     const store = useEditor();
+    const slots = useStageSlots();
     const readOnly = useEditorState((state) => state.readOnly);
     const checked = useEditorState((state) => state.validation !== undefined);
     const items = useIssues(canvasDiagnostics);
-    const [filter, setFilter] = useState('all');
     const [failed, setFailed] = useState();
-    const counts = countIssues(items);
-    const shown = filterIssues(items, filter);
     const config = useLocaleState((state) => state.config);
     const doc = useEditorState((state) => state.doc);
     const manifest = useManifest();
@@ -58,20 +53,12 @@ export function IssuesPanel({ canvasDiagnostics }) {
         setFailed(result.ok ? undefined : item.key);
     };
     const row = (item) => {
-        const node = item.nodeId === undefined ? undefined : doc.nodes[item.nodeId];
-        const meta = node === undefined ? undefined : componentMeta(manifest, node.type);
-        const owner = node === undefined ? t('issues.nodeless') : (node.name ?? meta?.label ?? node.type);
+        const path = item.nodeId === undefined ? t('issues.nodeless') : issuePath(doc, manifest, item.nodeId);
         return (_jsxs("li", { className: "bd-issue", "data-severity": item.severity, children: [_jsxs("button", { type: "button", className: "bd-issue-target", disabled: item.nodeId === undefined, onClick: () => {
                         if (item.nodeId !== undefined)
                             store.select(item.nodeId);
-                    }, children: [_jsxs("span", { className: "bd-issue-head", children: [_jsx(Icon, { name: SEVERITY_ICON[item.severity], label: t(`issues.filter.${item.severity}`), className: "bd-issue-severity" }), node !== undefined && _jsx(ComponentIcon, { meta: meta, className: "bd-issue-component" }), _jsx("span", { className: "bd-issue-owner", children: owner })] }), _jsx("span", { className: "bd-issue-message", children: item.message }), _jsxs("span", { className: "bd-issue-source", children: [t(SOURCE_KEY[item.source]), " \u00B7 ", item.code] })] }), item.help !== undefined ? _jsx("p", { className: "bd-issue-help", children: item.help }) : null, item.fix !== undefined ? (_jsx(Button, { disabled: readOnly, onClick: () => fix(item), children: t('issues.fix') })) : null, failed === item.key ? (_jsx("p", { role: "alert", className: "bd-issue-error", children: t('issues.fix.failed') })) : null] }, item.key));
-    };
-    const severitySection = (severity) => {
-        const own = shown.filter((item) => item.severity === severity);
-        if (own.length === 0)
-            return null;
-        const { rest, groups } = groupMissingTranslations(own);
-        return (_jsxs("section", { className: "bd-issues-severity", "data-severity": severity, children: [_jsxs("h3", { className: "bd-issues-heading", children: [_jsx(Icon, { name: SEVERITY_ICON[severity] }), t(`issues.group.${severity}`), " (", own.length, ")"] }), rest.length > 0 ? _jsx("ul", { className: "bd-issues-list", children: rest.map(row) }) : null, groups.map((group) => (_jsxs("details", { className: "bd-issues-group", "data-locale": group.locale, open: true, children: [_jsxs("summary", { children: [t('issues.missingTranslations'), ": ", config.intl[group.locale] ?? group.locale, " (", group.items.length, ")"] }), _jsx("ul", { className: "bd-issues-list", children: group.items.map(row) })] }, group.locale)))] }, severity));
+                    }, children: [_jsx(Icon, { name: SEVERITY_ICON[item.severity], label: t(`issues.filter.${item.severity}`), className: "bd-issue-severity" }), _jsx("span", { className: "bd-issue-message", children: item.message }), _jsx("small", { className: "bd-issue-path", children: path })] }), item.help !== undefined ? _jsx("p", { className: "bd-issue-help", children: item.help }) : null, item.fix !== undefined ? (_jsx(Button, { disabled: readOnly, onClick: () => fix(item), children: t('issues.fix') })) : null, failed === item.key ? (_jsx("p", { role: "alert", className: "bd-issue-error", children: t('issues.fix.failed') })) : null] }, item.key));
     };
-    return (_jsxs("section", { className: "bd-issues", "aria-label": t('issues.title'), children: [_jsx("h2", { className: "bd-panel-title", children: t('issues.title') }), _jsx("fieldset", { className: "bd-issues-filters", "aria-label": t('issues.filter'), children: FILTERS.map((entry) => (_jsxs(Button, { variant: "ghost", "aria-pressed": filter === entry.filter, onClick: () => setFilter(entry.filter), children: [t(entry.key), " (", counts[entry.filter], ")"] }, entry.filter))) }), !checked ? _jsx("p", { className: "bd-field-hint", children: t('issues.pending') }) : null, checked && shown.length === 0 ? _jsx("p", { className: "bd-field-hint", children: t('issues.empty') }) : null, SEVERITIES.map(severitySection)] }));
+    const { rest, groups } = groupMissingTranslations(items);
+    return (_jsxs("div", { className: "bd-issues-panel", children: [_jsxs("header", { className: "bd-issues-head", children: [_jsx(Icon, { name: "triangle-alert", className: "bd-issues-head-icon" }), _jsx("h2", { className: "bd-issues-title", children: t('issues.drawer') }), _jsx("span", { className: "bd-chip bd-issues-count", children: items.length }), slots !== undefined ? (_jsx(IconButton, { size: "sm", variant: "ghost", icon: "x", label: t('issues.drawer.close'), onClick: () => slots.setIssuesOpen(false) })) : null] }), !checked ? (_jsx("p", { className: "bd-issues-pending", role: "status", children: t('issues.pending') })) : null, checked && items.length === 0 ? (_jsxs("div", { className: "bd-issue bd-issue-ok", children: [_jsx(Icon, { name: "circle-check", className: "bd-issue-ok-icon" }), _jsx("span", { className: "bd-issue-message", children: t('issues.allGood') })] })) : null, rest.length > 0 ? _jsx("ul", { className: "bd-issues-list", children: rest.map(row) }) : null, groups.map((group) => (_jsxs("details", { className: "bd-issues-group", "data-locale": group.locale, children: [_jsxs("summary", { children: [t('issues.missingTranslations'), ": ", config.intl[group.locale] ?? group.locale, " (", group.items.length, ")"] }), _jsx("ul", { className: "bd-issues-list", children: group.items.map(row) })] }, group.locale)))] }));
 }

package/dist/panels/issues/path.d.ts

@@ -0,0 +1,7 @@
+import { type BuilderDocument, type NodeId, type RegistryManifest } from '@next-buildr/core';
+/**
+ * "Block › Block": the names from the outermost block down to the node, without the page root.
+ * Empty when the node is gone or is the root.
+ */
+export declare function issuePath(doc: BuilderDocument, manifest: RegistryManifest | undefined, id: NodeId | undefined): string;
+//# sourceMappingURL=path.d.ts.map

package/dist/panels/issues/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/panels/issues/path.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,MAAM,EACX,KAAK,gBAAgB,EACtB,MAAM,mBAAmB,CAAC;AAG3B;;;GAGG;AACH,wBAAgB,SAAS,CACvB,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,gBAAgB,GAAG,SAAS,EACtC,EAAE,EAAE,MAAM,GAAG,SAAS,GACrB,MAAM,CAYR"}

package/dist/panels/issues/path.js

@@ -0,0 +1,21 @@
+import { createIndex, } from '@next-buildr/core';
+import { componentMeta } from '../../app/manifest.js';
+/**
+ * "Block › Block": the names from the outermost block down to the node, without the page root.
+ * Empty when the node is gone or is the root.
+ */
+export function issuePath(doc, manifest, id) {
+    if (id === undefined || id === doc.root || !Object.hasOwn(doc.nodes, id))
+        return '';
+    const index = createIndex(doc);
+    const names = [];
+    let at = id;
+    while (at !== undefined && at !== doc.root) {
+        const node = doc.nodes[at];
+        if (node === undefined)
+            break;
+        names.unshift(node.name ?? componentMeta(manifest, node.type)?.label ?? node.type);
+        at = index.parentOf[at];
+    }
+    return names.join(' › ');
+}

package/dist/panels/layers/flatten.d.ts

@@ -13,6 +13,8 @@ export interface LayerRow {
     readonly expanded: boolean;
     /** The slot of the parent it sits in; `'default'` for the usual one. */
     readonly slot: string;
+    /** The parent has more than one slot with children, so the slot name tells rows apart. */
+    readonly multiSlot?: boolean;
 }
 /** The children of a node in slot order, with the slot each is in; ids the document lacks are skipped. */
 export declare function childrenWithSlots(doc: BuilderDocument, node: PageNode): {
@@ -22,7 +24,19 @@ export declare function childrenWithSlots(doc: BuilderDocument, node: PageNode):
 /**
  * The tree as the rows that are visible: a node's children follow it when it is expanded. Iterative
  * (a document may be deep) and guarded against a node reached twice, so a corrupt document cannot
- * loop it.
+ * loop it. With `only` the tree is filtered: nodes outside the set are left out (the caller puts the
+ * matches and their ancestors in it), and a node counts as having children only among those kept.
  */
-export declare function flattenTree(doc: BuilderDocument, expanded: ReadonlySet<NodeId>): LayerRow[];
+export declare function flattenTree(doc: BuilderDocument, expanded: ReadonlySet<NodeId>, only?: ReadonlySet<NodeId>): LayerRow[];
+/**
+ * The nodes a filter keeps: those `matches` accepts plus every ancestor of one (`only`), and the
+ * ancestors alone (`open`), which the filtered tree shows expanded so each match is in view.
+ * Walks from the root without recursion and visits a node once.
+ */
+export declare function filterTree(doc: BuilderDocument, matches: (node: PageNode) => boolean): {
+    readonly only: ReadonlySet<NodeId>;
+    readonly open: ReadonlySet<NodeId>;
+};
+/** Every node that has children: what "Expand all" opens. */
+export declare function nodesWithChildren(doc: BuilderDocument): ReadonlySet<NodeId>;
 //# sourceMappingURL=flatten.d.ts.map

package/dist/panels/layers/flatten.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flatten.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/flatten.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3E,mCAAmC;AACnC,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oHAAoH;IACpH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,0GAA0G;AAC1G,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,QAAQ,GACb;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAMhC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,QAAQ,EAAE,CAmD3F"}
+{"version":3,"file":"flatten.d.ts","sourceRoot":"","sources":["../../../src/panels/layers/flatten.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3E,mCAAmC;AACnC,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oHAAoH;IACpH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,0FAA0F;IAC1F,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,0GAA0G;AAC1G,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,eAAe,EACpB,IAAI,EAAE,QAAQ,GACb;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAMhC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,eAAe,EACpB,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GACzB,QAAQ,EAAE,CAyDZ;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,GACnC;IAAE,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAAE,CAsB5E;AAED,6DAA6D;AAC7D,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,eAAe,GAAG,WAAW,CAAC,MAAM,CAAC,CAM3E"}