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

package/dist/panels/inspector/styles/sections-context.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { createSectionRegistry } from './section-state.js';
+const SectionsContext = createContext(undefined);
+/**
+ * Scopes the registry of mounted style sections to one editor. Wrap it around both the Inspector's
+ * `headerActions` (where `SectionsToggle` sits) and the `StyleInspector`, so they share a registry
+ * and two editors on a page never see each other's sections.
+ */
+export function StyleSectionsProvider(props) {
+    const [registry] = useState(createSectionRegistry);
+    return _jsx(SectionsContext.Provider, { value: registry, children: props.children });
+}
+/** Without a provider, a section or toggle gets a private registry (a lone toggle stays disabled). */
+export function useSectionRegistry() {
+    const provided = useContext(SectionsContext);
+    const [own] = useState(createSectionRegistry);
+    return provided ?? own;
+}

package/dist/panels/inspector/styles/sections-context.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sections-context.test.d.ts.map

package/dist/panels/inspector/styles/sections-context.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections-context.test.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sections-context.test.tsx"],"names":[],"mappings":""}

package/dist/panels/inspector/styles/sections-context.test.js

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest';
+import { createSectionRegistry } from './section-state.js';
+describe('section registry', () => {
+    it('is scoped to one inspector: another registry never sees or loses its sections', () => {
+        const a = createSectionRegistry();
+        const b = createSectionRegistry();
+        const removeA = a.report('layout', true);
+        const removeB = b.report('layout', false);
+        expect(a.snapshot()).toEqual({ names: ['layout'], allOpen: true });
+        expect(b.snapshot()).toEqual({ names: ['layout'], allOpen: false });
+        removeB();
+        expect(b.snapshot().names).toEqual([]);
+        expect(a.snapshot()).toEqual({ names: ['layout'], allOpen: true });
+        removeA();
+        expect(a.snapshot().names).toEqual([]);
+    });
+});

package/dist/panels/inspector/styles/sections-toggle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Expands every style section on screen, or collapses them all once every one is open. Meant for
+ * the Inspector's `headerActions`, inside the same `StyleSectionsProvider` as the StyleInspector; the choice is remembered like a single section's.
+ */
+export declare function SectionsToggle(): import("react").JSX.Element;
+//# sourceMappingURL=sections-toggle.d.ts.map

package/dist/panels/inspector/styles/sections-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sections-toggle.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sections-toggle.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,cAAc,gCAmB7B"}

package/dist/panels/inspector/styles/sections-toggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { useT } from '../../../messages/index.js';
+import { IconButton } from '../../../ui/index.js';
+import { setAllSections } from './section-state.js';
+import { useSectionRegistry } from './sections-context.js';
+/**
+ * Expands every style section on screen, or collapses them all once every one is open. Meant for
+ * the Inspector's `headerActions`, inside the same `StyleSectionsProvider` as the StyleInspector; the choice is remembered like a single section's.
+ */
+export function SectionsToggle() {
+    const t = useT();
+    const registry = useSectionRegistry();
+    const { names, allOpen } = useSyncExternalStore(registry.subscribe, registry.snapshot, registry.snapshot);
+    // PB-157 WP5a: no dedicated keys yet; the structure tree's labels say the same thing.
+    const label = allOpen ? t('styleSection.collapseAll') : t('styleSection.expandAll');
+    return (_jsx(IconButton, { icon: allOpen ? 'chevrons-down-up' : 'chevrons-up-down', label: label, size: "sm", disabled: names.length === 0, onClick: () => setAllSections(registry, !allOpen) }));
+}

package/dist/panels/inspector/styles/segments.d.ts

@@ -1,8 +1,11 @@
+import type { MessageKey } from '../../../messages/index.tsx';
 import type { IconName } from '../../../ui/index.ts';
 /** One segment: an icon (its name and tooltip are the keyword) or, without an icon, the keyword as text. */
 export interface Segment {
     readonly keyword: string;
     readonly icon?: IconName;
+    /** Message key of the visible name (tooltip and accessible name) when the keyword is English jargon. */
+    readonly labelKey?: MessageKey;
 }
 /**
  * The properties edited with a row of segments, and the keyword each segment stands for. A

package/dist/panels/inspector/styles/segments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,4GAA4G;AAC5G,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC,CAgDlE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAgBlF,CAAC"}
+{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,4GAA4G;AAC5G,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IACzB,wGAAwG;IACxG,QAAQ,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC,CAuDlE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAgBlF,CAAC"}

package/dist/panels/inspector/styles/segments.js

@@ -5,10 +5,10 @@
  */
 export const SEGMENTED = {
     'layout.display': [
-        { keyword: 'block' },
-        { keyword: 'flex' },
-        { keyword: 'grid' },
-        { keyword: 'none' },
+        { keyword: 'block', icon: 'rows-2', labelKey: 'style.display.block' },
+        { keyword: 'flex', icon: 'columns-3', labelKey: 'style.display.flex' },
+        { keyword: 'grid', icon: 'layout-grid', labelKey: 'style.display.grid' },
+        { keyword: 'none', icon: 'eye-off', labelKey: 'style.display.none' },
     ],
     'layout.direction': [
         { keyword: 'row', icon: 'arrow-right' },
@@ -51,6 +51,13 @@ export const SEGMENTED = {
         { keyword: 'underline', icon: 'underline' },
         { keyword: 'line-through', icon: 'strikethrough' },
     ],
+    // The arrow is where the block travels (up = it rises from below).
+    'motion.entranceDirection': [
+        { keyword: 'up', icon: 'arrow-up', labelKey: 'styleOption.motion.up' },
+        { keyword: 'down', icon: 'arrow-down', labelKey: 'styleOption.motion.down' },
+        { keyword: 'left', icon: 'arrow-left', labelKey: 'styleOption.motion.left' },
+        { keyword: 'right', icon: 'arrow-right', labelKey: 'styleOption.motion.right' },
+    ],
 };
 /**
  * Properties that sit side by side in one row (two columns) instead of one under the other, per

package/dist/panels/inspector/styles/sides-editor.d.ts

@@ -1,4 +1,4 @@
-import type { EffectiveStyles, StylePropertyDef, Theme } from '@next-buildr/core';
+import { type EffectiveStyles, type StylePropertyDef, type Theme } from '@next-buildr/core';
 import { type ReactNode } from 'react';
 /** One write of a run: a value for a part, or `undefined` to remove that part's value. */
 export interface SideWrite {

package/dist/panels/inspector/styles/sides-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sides-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sides-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClF,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAO5D,0FAA0F;AAC1F,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AA8DD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,uGAAuG;IACvG,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,KAAK,IAAI,CAAC;IACvD,oGAAoG;IACpG,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,SAAS,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAmJlD"}
+{"version":3,"file":"sides-editor.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sides-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACrB,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAC;AASxE,0FAA0F;AAC1F,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAqED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,uGAAuG;IACvG,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IAChC,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,KAAK,IAAI,CAAC;IACvD,oGAAoG;IACpG,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,SAAS,CAAC;IACtD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAoMlD"}

package/dist/panels/inspector/styles/sides-editor.js

@@ -1,7 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { resolveTokenRef, } from '@next-buildr/core';
+import { useContext, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useT } from '../../../messages/index.js';
 import { IconButton, NumberUnitInput } from '../../../ui/index.js';
+import { BoxBarsContext } from './box-model.js';
 import { unitsOf } from './model.js';
 import { TokenPicker } from './token-picker.js';
 import { useStyleValue } from './use-style-value.js';
@@ -22,7 +25,11 @@ function SideField(props) {
     });
     const { error } = field;
     useEffect(() => onError(part, error), [error, part, onError]);
-    return (_jsx("div", { className: "bd-side-field", "data-path": path, "data-part": part, "data-source": field.current?.source ?? 'none', children: _jsx(NumberUnitInput, { compact: true, hideUnitMenu: true, value: field.shown, units: unitsOf(def), unit: props.unit, unitLabel: "", ariaLabel: label, disabled: props.disabled, invalid: error !== '', placeholder: "\u2013", onValueChange: field.change, onFocus: props.onFocus, onBlur: field.blur }) }));
+    return (_jsx("div", { className: "bd-side-field", "data-path": path, "data-part": part, "data-source": field.current === undefined
+            ? 'none'
+            : field.current.source === props.layer
+                ? 'set'
+                : 'inherited', "data-override": props.layer !== 'base' && field.current?.source === props.layer, children: _jsx(NumberUnitInput, { compact: true, hideUnitMenu: true, value: field.shown, units: unitsOf(def), unit: props.unit, unitLabel: "", ariaLabel: label, disabled: props.disabled, invalid: error !== '', placeholder: "0", onValueChange: field.change, onFocus: props.onFocus, onBlur: field.blur }) }));
 }
 /**
  * The visual editor of a property that has one value per side or corner (margin, padding, inset,
@@ -33,6 +40,7 @@ function SideField(props) {
  */
 export function SidesEditor(props) {
     const t = useT();
+    const bars = useContext(BoxBarsContext);
     const { def, label, parts, effective, layer, layout } = props;
     const units = unitsOf(def);
     const currentOf = (part) => {
@@ -80,7 +88,28 @@ export function SidesEditor(props) {
     const errorLine = error === undefined ? null : (_jsx("p", { role: "alert", className: "bd-style-error", children: error }));
     if (layout === 'ring') {
         const [top, right, bottom, left] = parts;
-        return (_jsxs("div", { className: "bd-ring", "data-property": def.name, children: [props.renderHead(extras), _jsxs("div", { className: "bd-ring-grid", children: [_jsx("div", { className: "bd-ring-top", children: field(top) }), _jsx("div", { className: "bd-ring-left", children: field(left) }), _jsx("div", { className: "bd-ring-center", children: props.children ?? _jsx("span", { className: "bd-ring-core", children: t('style.box.content') }) }), _jsx("div", { className: "bd-ring-right", children: field(right) }), _jsx("div", { className: "bd-ring-bottom", children: field(bottom) })] }), errorLine] }));
+        // Inside a `BoxModel` the header is drawn in the bar above the diagram.
+        const head = props.renderHead(extras);
+        const slot = bars === undefined ? undefined : bars[def.name === 'padding' ? 'padding' : 'margin'];
+        const inner = props.children === undefined;
+        const cell = (part, at) => (_jsx("span", { className: "bd-wbox__v", "data-at": at, children: field(part) }));
+        return (_jsxs(_Fragment, { children: [bars === undefined
+                    ? head
+                    : slot === null || slot === undefined
+                        ? null
+                        : createPortal(head, slot), _jsxs("div", { className: inner ? 'bd-wbox bd-wbox--in' : 'bd-wbox', "data-property": def.name, "data-kind": def.name, children: [_jsx("span", { className: "bd-wbox__label", children: t(def.name === 'padding'
+                                ? 'styleField.spacing.paddingLabel'
+                                : 'styleField.spacing.marginLabel') }), cell(top, 'top'), cell(right, 'right'), cell(bottom, 'bottom'), cell(left, 'left'), props.children ?? _jsx("div", { className: "bd-wbox__core", children: t('styleField.spacing.content') })] }), errorLine] }));
     }
-    return (_jsxs("div", { className: "bd-sides", "data-property": def.name, "data-shape": def.shape, children: [props.renderHead(extras), _jsx("div", { className: "bd-sides-grid", children: parts.map((part) => (_jsxs("div", { className: "bd-sides-cell", children: [field(part), _jsx("span", { className: "bd-sides-label", "aria-hidden": "true", children: partLabel(part) })] }, part))) }), errorLine] }));
+    return (_jsxs("div", { className: "bd-sides", "data-property": def.name, "data-shape": def.shape, children: [props.renderHead(extras), _jsxs("div", { className: def.shape === 'corners' ? 'bd-wcorners' : 'bd-sides-grid', children: [def.shape === 'corners' ? (_jsx("span", { className: "bd-wcorners__prev", "aria-hidden": "true", style: Object.fromEntries(parts.map((part) => {
+                            let value = currentOf(part) ?? '';
+                            if (value.startsWith('$')) {
+                                const token = resolveTokenRef(props.theme, value);
+                                value = token.ok ? String(token.value.value) : '';
+                            }
+                            return [
+                                `border${part.charAt(0).toUpperCase()}${part.slice(1)}Radius`,
+                                /^(?:0|\d+(?:\.\d+)?(?:px|rem|em|%))$/.test(value) ? value : undefined,
+                            ];
+                        })) })) : null, parts.map((part) => def.shape === 'corners' ? (_jsx("span", { className: "bd-wcorners__v", "data-part": part, title: partLabel(part), children: field(part) }, part)) : (_jsxs("div", { className: "bd-sides-cell", children: [field(part), _jsx("span", { className: "bd-sides-label", "aria-hidden": "true", children: partLabel(part) })] }, part)))] }), errorLine] }));
 }

package/dist/panels/inspector/styles/style-inspector.d.ts

@@ -4,6 +4,8 @@ export interface StyleInspectorProps {
     /** The breakpoint being edited: `'base'` (desktop, the default) or a breakpoint id of the theme. */
     readonly breakpoint?: string;
     readonly theme?: Theme;
+    /** The search text from the inspector header, which filters sections and properties. */
+    readonly query?: string;
 }
 /**
  * The Style tab (docs/editor.md#the-style-inspector): the style groups the component allows, each
@@ -11,5 +13,5 @@ export interface StyleInspectorProps {
  * the theme before anything is dispatched, so a value outside the grammar cannot be written; a value
  * that comes from a wider breakpoint is shown as such, and "Reset" removes only this layer's key.
  */
-export declare function StyleInspector({ node, breakpoint, theme }: StyleInspectorProps): import("react").JSX.Element;
+export declare function StyleInspector({ node, breakpoint, theme, query, }: StyleInspectorProps): import("react").JSX.Element;
 //# sourceMappingURL=style-inspector.d.ts.map

package/dist/panels/inspector/styles/style-inspector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-inspector.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/style-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,QAAQ,EAKb,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AA8B3B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,oGAAoG;IACpG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CACxB;AAyYD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAoB,EAAE,EAAE,mBAAmB,+BAyC7F"}
+{"version":3,"file":"style-inspector.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/style-inspector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,QAAQ,EAMb,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAoD3B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,oGAAoG;IACpG,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,wFAAwF;IACxF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AA2oBD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,UAAU,EACV,KAAoB,EACpB,KAAK,GACN,EAAE,mBAAmB,+BAUrB"}