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

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

@@ -1,4 +1,5 @@
 import { type StylePropertyDef, type Theme } from '@next-buildr/core';
+import type { StyleLayer } from '@next-buildr/core/commands';
 /** What an author typed, checked against the property's grammar and the theme. */
 export type StyleInput = {
     readonly ok: true;
@@ -22,17 +23,18 @@ export declare function keywordsOf(def: StylePropertyDef): readonly string[];
 /** A property that is only a list of keywords is edited with a select. */
 export declare function isEnumeration(def: StylePropertyDef): boolean;
 /** The layer a breakpoint id edits: desktop is `{}`. */
-export declare const layerFor: (breakpoint: string | undefined) => {
-    bp?: never;
-} | {
-    bp: string;
-};
+export declare const layerFor: (breakpoint: string | undefined) => StyleLayer;
 /** The units the property's grammar allows, and nothing else: they are all the unit menu offers. */
 export declare function unitsOf(def: StylePropertyDef): readonly string[];
 /** Whether the grammar takes a bare number (`opacity`, `lineHeight`) rather than only lengths. */
 export declare function takesNumber(def: StylePropertyDef): boolean;
 /** How much an arrow key adds: a fraction where the number is confined to a small range. */
 export declare function stepOf(def: StylePropertyDef): number;
+/** Scrubbing follows the active notation: a length and a unitless number can have different limits. */
+export declare function boundsOf(def: StylePropertyDef, value: string): {
+    min?: number;
+    max?: number;
+};
 /** Whether the property is edited as a number (with a unit menu) rather than as free keyword text. */
 export declare function isNumeric(def: StylePropertyDef): boolean;
 export interface TokenEntry {
@@ -52,4 +54,24 @@ export declare function sliderOf(def: StylePropertyDef): {
     readonly max: number;
     readonly step: number;
 } | undefined;
+/** How a numeric property is edited with a slider: its span, the unit it writes and what it shows. */
+export interface RangeSpec {
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    /** The unit written after the number (`px`, `deg`); empty for a bare number. */
+    readonly unit: string;
+    /** The value the property has while nothing sets it; the slider rests there and the field hints it. */
+    readonly fallback: number;
+    /** Bare numbers shown as a share (`1` as `100%`). */
+    readonly percent?: boolean;
+}
+/** Sliders of the effects group (docs/design/template: shadow, filters, transforms). */
+export declare const RANGES: Readonly<Record<string, RangeSpec>>;
+/** What an unset keyword property does, so an empty select can say it instead of showing a dash. */
+export declare const KEYWORD_DEFAULTS: Readonly<Record<string, string>>;
+/** The number a slider position stands for, written as the text the grammar takes. */
+export declare const rangeText: (spec: RangeSpec, value: number) => string;
+/** The text a slider's bubble shows. */
+export declare const rangeShown: (spec: RangeSpec, value: number) => string;
 //# sourceMappingURL=model.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,KAAK,EACX,MAAM,mBAAmB,CAAC;AAE3B,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAClB;IAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACtD;IAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAKrD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,UAAU,CAmB7F;AAED,wFAAwF;AACxF,eAAO,MAAM,OAAO,QAAS,gBAAgB,KAAG,SAAS,MAAM,EACW,CAAC;AAE3E,2FAA2F;AAC3F,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,CAM9E;AAED,iGAAiG;AACjG,wBAAgB,UAAU,CAAC,GAAG,EAAE,gBAAgB,GAAG,SAAS,MAAM,EAAE,CAGnE;AAED,0EAA0E;AAC1E,wBAAgB,aAAa,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAS5D;AAED,wDAAwD;AACxD,eAAO,MAAM,QAAQ,eAAgB,MAAM,GAAG,SAAS;;;;CACsB,CAAC;AAE9E,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,GAAG,EAAE,gBAAgB,GAAG,SAAS,MAAM,EAAE,CAGhE;AAED,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAG1D;AAED,4FAA4F;AAC5F,wBAAgB,MAAM,CAAC,GAAG,EAAE,gBAAgB,GAAG,MAAM,CAMpD;AAED,sGAAsG;AACtG,wBAAgB,SAAS,CAAC,GAAG,EAAE,gBAAgB,GAAG,OAAO,CAExD;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,GAAG,UAAU,EAAE,CAQ9E;AAED,iGAAiG;AACjG,wBAAgB,OAAO,CAAC,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAO7F;AAED,0FAA0F;AAC1F,wBAAgB,QAAQ,CACtB,GAAG,EAAE,gBAAgB,GACpB;IAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CAMnF"}
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/model.ts"],"names":[],"mappings":"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"}

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

@@ -53,11 +53,21 @@ export function isEnumeration(def) {
         grammar.number === undefined);
 }
 /** The layer a breakpoint id edits: desktop is `{}`. */
-export const layerFor = (breakpoint) => breakpoint === undefined || breakpoint === 'base' ? {} : { bp: breakpoint };
+export const layerFor = (breakpoint) => {
+    if (breakpoint === 'state:hover')
+        return { state: 'hover' };
+    if (breakpoint === 'state:focus-visible')
+        return { state: 'focus-visible' };
+    if (breakpoint === 'state:active')
+        return { state: 'active' };
+    return breakpoint === undefined || breakpoint === 'base' ? {} : { bp: breakpoint };
+};
 /** The units the property's grammar allows, and nothing else: they are all the unit menu offers. */
 export function unitsOf(def) {
     const grammar = def.grammar;
-    return grammar.kind === 'composite' ? (grammar.length?.units ?? []) : [];
+    return grammar.kind === 'composite'
+        ? (grammar.length?.units ?? []).filter((unit) => def.group !== 'spacing' || ['px', '%', 'rem', 'vw'].includes(unit))
+        : [];
 }
 /** Whether the grammar takes a bare number (`opacity`, `lineHeight`) rather than only lengths. */
 export function takesNumber(def) {
@@ -75,9 +85,24 @@ export function stepOf(def) {
         return 100;
     return grammar.number.max - grammar.number.min <= 10 && grammar.number.integer !== true ? 0.1 : 1;
 }
+/** Scrubbing follows the active notation: a length and a unitless number can have different limits. */
+export function boundsOf(def, value) {
+    const grammar = def.grammar;
+    if (grammar.kind === 'gridTrack' || grammar.kind === 'gridSpan')
+        return { min: 1, max: 12 };
+    if (grammar.kind !== 'composite')
+        return {};
+    if (grammar.number !== undefined && !/[a-z%]$/i.test(value)) {
+        return { min: grammar.number.min, max: grammar.number.max };
+    }
+    return grammar.length?.negative === true ? {} : { min: 0 };
+}
 /** Whether the property is edited as a number (with a unit menu) rather than as free keyword text. */
 export function isNumeric(def) {
-    return unitsOf(def).length > 0 || takesNumber(def);
+    return (unitsOf(def).length > 0 ||
+        takesNumber(def) ||
+        def.grammar.kind === 'gridTrack' ||
+        def.grammar.kind === 'gridSpan');
 }
 /** The tokens a property accepts in this theme, with their values, for the picker. */
 export function tokenEntries(def, theme) {
@@ -109,3 +134,76 @@ export function sliderOf(def) {
     const { min, max } = grammar.number;
     return max - min <= 1 ? { min, max, step: 0.01 } : undefined;
 }
+const px = (min, max, fallback = 0) => ({
+    min,
+    max,
+    step: 1,
+    unit: 'px',
+    fallback,
+});
+const deg = (min, max) => ({
+    min,
+    max,
+    step: 1,
+    unit: 'deg',
+    fallback: 0,
+});
+const ms = (min, max, step, fallback) => ({
+    min,
+    max,
+    step,
+    unit: 'ms',
+    fallback,
+});
+const share = (min, max, fallback) => ({
+    min,
+    max,
+    step: 0.01,
+    unit: '',
+    fallback,
+    percent: true,
+});
+/** Sliders of the effects group (docs/design/template: shadow, filters, transforms). */
+export const RANGES = {
+    'effects.shadowX': px(-40, 40),
+    'effects.shadowY': px(-40, 40),
+    'effects.shadowBlur': px(0, 80),
+    'effects.shadowSpread': px(-40, 40),
+    'effects.textShadowX': px(-10, 10),
+    'effects.textShadowY': px(-10, 10),
+    'effects.textShadowBlur': px(0, 20),
+    'effects.blur': px(0, 20),
+    'effects.backdropBlur': px(0, 40),
+    'effects.brightness': share(0, 2, 1),
+    'effects.contrast': share(0, 2, 1),
+    'effects.saturate': share(0, 2, 1),
+    'effects.grayscale': share(0, 1, 0),
+    'effects.sepia': share(0, 1, 0),
+    'effects.invert': share(0, 1, 0),
+    'effects.hueRotate': deg(-180, 180),
+    'effects.rotate': deg(-180, 180),
+    'effects.skewX': deg(-45, 45),
+    'effects.skewY': deg(-45, 45),
+    'effects.scale': share(0.5, 1.5, 1),
+    'effects.opacity': share(0, 1, 1),
+    // Motion (ADR-027): the defaults are the compiler's (600ms entrance, 200ms hover).
+    'motion.entranceDuration': ms(0, 2000, 50, 600),
+    'motion.entranceDelay': ms(0, 2000, 50, 0),
+    'motion.hoverDuration': ms(0, 1000, 20, 200),
+    'motion.scrollParallax': { min: 0, max: 200, step: 5, unit: 'px', fallback: 0 },
+};
+/** What an unset keyword property does, so an empty select can say it instead of showing a dash. */
+export const KEYWORD_DEFAULTS = {
+    'effects.blendMode': 'normal',
+    'effects.shadowInset': 'outset',
+    'effects.cursor': 'auto',
+    'effects.transformOrigin': 'center',
+    'motion.entrance': 'none',
+    'motion.entranceEasing': 'ease-out',
+    'motion.hover': 'none',
+    'motion.scrollReveal': 'none',
+};
+/** The number a slider position stands for, written as the text the grammar takes. */
+export const rangeText = (spec, value) => `${Number(value.toFixed(4))}${spec.unit}`;
+/** The text a slider's bubble shows. */
+export const rangeShown = (spec, value) => spec.percent === true ? `${Math.round(value * 100)}%` : `${Number(value.toFixed(2))}${spec.unit}`;

package/dist/panels/inspector/styles/motion-rows.d.ts

@@ -0,0 +1,17 @@
+import type { EffectiveStyles } from '@next-buildr/core';
+import type { ReactNode } from 'react';
+/**
+ * The rows of the Animations section (ADR-027): ready entrance effects, then the entrance, hover and
+ * scroll controls, each shown only when it has something to adjust. Every control is the regular
+ * style row (`row(name)`), so reset, breakpoint override and validation work as everywhere else.
+ */
+export declare function MotionRows(props: {
+    readonly nodeId: string;
+    readonly effective: EffectiveStyles;
+    readonly layer: string;
+    readonly disabled: boolean;
+    readonly onError: (message: string) => void;
+    readonly row: (name: string) => ReactNode;
+    readonly has: (name: string) => boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=motion-rows.d.ts.map

package/dist/panels/inspector/styles/motion-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-rows.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/motion-rows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8DvC;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1C,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACzC,+BAuGA"}

package/dist/panels/inspector/styles/motion-rows.js

@@ -0,0 +1,117 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { interpolate, useT } from '../../../messages/index.js';
+import { useEditor } from '../../../store/index.js';
+import { Button } from '../../../ui/index.js';
+import { layerFor } from './model.js';
+import { optionLabel } from './option-label.js';
+/** The cubic-bezier of each easing the compiler knows (compile-motion.ts), for the curve preview. */
+const CURVES = {
+    ease: [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1],
+    'ease-out': [0, 0, 0.58, 1],
+    'ease-in-out': [0.42, 0, 0.58, 1],
+    linear: [0, 0, 1, 1],
+    snappy: [0.2, 0.8, 0.2, 1],
+    bounce: [0.34, 1.56, 0.64, 1],
+};
+/** The ready entrance effects: what they write is only the effect and its direction. */
+const PRESETS = [
+    { id: 'none', label: 'styleField.motion.preset.none', entrance: 'none' },
+    { id: 'fade', label: 'styleField.motion.preset.fade', entrance: 'fade' },
+    { id: 'slideUp', label: 'styleField.motion.preset.slideUp', entrance: 'slide', direction: 'up' },
+    {
+        id: 'slideLeft',
+        label: 'styleField.motion.preset.slideLeft',
+        entrance: 'slide',
+        direction: 'left',
+    },
+    { id: 'zoom', label: 'styleField.motion.preset.zoom', entrance: 'zoom' },
+];
+const X = (x) => (4 + 56 * x).toFixed(1);
+const Y = (y) => (60 - 56 * y).toFixed(1);
+/** A small plot of the easing (time across, progress up); decorative, the name is the caption. */
+function Curve({ easing }) {
+    const t = useT();
+    const bezier = CURVES[easing] ?? CURVES['ease-out'] ?? [0, 0, 0.58, 1];
+    const [a, b, c, d] = bezier;
+    return (_jsxs("figure", { className: "bd-motion-curve", children: [_jsxs("svg", { viewBox: "0 0 64 64", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { className: "bd-motion-curve__grid", d: "M4 60 H60 M4 60 V4" }), _jsx("path", { className: "bd-motion-curve__handles", d: `M4 60 L${X(a)} ${Y(b)} M60 4 L${X(c)} ${Y(d)}` }), _jsx("path", { className: "bd-motion-curve__line", d: `M4 60 C${X(a)} ${Y(b)} ${X(c)} ${Y(d)} 60 4` })] }), _jsx("figcaption", { children: interpolate(t('styleField.motion.curve'), { name: optionLabel(easing, t) }) })] }));
+}
+/**
+ * The rows of the Animations section (ADR-027): ready entrance effects, then the entrance, hover and
+ * scroll controls, each shown only when it has something to adjust. Every control is the regular
+ * style row (`row(name)`), so reset, breakpoint override and validation work as everywhere else.
+ */
+export function MotionRows(props) {
+    const t = useT();
+    const store = useEditor();
+    const { effective, layer, row, has } = props;
+    const value = (name) => {
+        const entry = effective[`motion.${name}`];
+        return entry === undefined ? undefined : String(entry.value);
+    };
+    const entrance = value('entrance') ?? 'none';
+    const direction = value('entranceDirection') ?? 'up';
+    const easing = value('entranceEasing') ?? 'ease-out';
+    const hover = value('hover') ?? 'none';
+    const here = (name) => effective[`motion.${name}`]?.source === layer;
+    const base = layer === 'base';
+    const choose = (preset) => {
+        const target = layerFor(layer);
+        const set = (property, text) => ({
+            type: 'node.setStyle',
+            payload: { id: props.nodeId, layer: target, group: 'motion', property, value: text },
+        });
+        const unset = (property) => ({
+            type: 'node.unsetStyle',
+            payload: { id: props.nodeId, layer: target, group: 'motion', property },
+        });
+        const commands = preset.entrance === 'none'
+            ? base
+                ? ['entrance', 'entranceDirection'].filter(here).map(unset)
+                : [set('entrance', 'none')]
+            : [
+                set('entrance', preset.entrance),
+                ...(preset.direction !== undefined ? [set('entranceDirection', preset.direction)] : []),
+            ];
+        if (commands.length === 0)
+            return;
+        const result = store.dispatchBatch(commands, { label: t(preset.label) });
+        props.onError(result.ok ? '' : (result.error?.message ?? ''));
+    };
+    const active = (preset) => preset.entrance === entrance && (preset.entrance !== 'slide' || preset.direction === direction);
+    const sub = (key) => (_jsx("span", { className: "bd-flabel bd-style-sub", children: t(key) }, key));
+    const rows = [];
+    if (has('entrance')) {
+        rows.push(sub('styleField.motion.entrance'));
+        rows.push(_jsx("fieldset", { className: "bd-segmented bd-motion-presets", "aria-label": t('styleField.motion.presets'), children: PRESETS.map((preset) => (_jsx(Button, { variant: "ghost", className: "bd-segment", "aria-pressed": active(preset), disabled: props.disabled, onClick: () => choose(preset), children: t(preset.label) }, preset.id))) }, "presets"));
+        rows.push(_jsx("div", { children: row('entrance') }, "entrance"));
+        if (entrance !== 'none') {
+            if (entrance === 'slide' && has('entranceDirection')) {
+                rows.push(_jsx("div", { children: row('entranceDirection') }, "direction"));
+            }
+            for (const name of ['entranceDuration', 'entranceDelay', 'entranceEasing']) {
+                if (has(name))
+                    rows.push(_jsx("div", { children: row(name) }, name));
+            }
+            if (has('entranceEasing'))
+                rows.push(_jsx(Curve, { easing: easing }, "curve"));
+        }
+    }
+    if (has('hover')) {
+        rows.push(sub('styleField.motion.hover'));
+        rows.push(_jsx("div", { children: row('hover') }, "hover"));
+        if (hover !== 'none' && has('hoverDuration')) {
+            rows.push(_jsx("div", { children: row('hoverDuration') }, "hoverDuration"));
+        }
+    }
+    if (has('scrollReveal') || has('scrollParallax')) {
+        rows.push(sub('styleField.motion.scroll'));
+        if (has('scrollReveal'))
+            rows.push(_jsx("div", { children: row('scrollReveal') }, "scrollReveal"));
+        if (has('scrollParallax'))
+            rows.push(_jsx("div", { children: row('scrollParallax') }, "scrollParallax"));
+        rows.push(_jsx("p", { className: "bd-hint", children: t('styleField.motion.scrollHint') }, "scrollHint"));
+    }
+    rows.push(_jsx("p", { className: "bd-hint", children: t('styleField.motion.reduced') }, "reduced"));
+    return _jsx(_Fragment, { children: rows });
+}

package/dist/panels/inspector/styles/number-input.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+import { NumberUnitInput as Input } from '../../../ui/index.ts';
+export declare function NumberUnitInput(props: ComponentProps<typeof Input>): import("react").JSX.Element;
+//# sourceMappingURL=number-input.d.ts.map

package/dist/panels/inspector/styles/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAQ,eAAe,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACtE,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,+BAgClE"}

package/dist/panels/inspector/styles/number-input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from '../../../messages/index.js';
+import { Icon, NumberUnitInput as Input } from '../../../ui/index.js';
+export function NumberUnitInput(props) {
+    const t = useT();
+    const step = (direction) => {
+        const match = /^(-?(?:\d+\.?\d*|\.\d+))([a-z%]*)$/.exec(props.value);
+        const value = Number(match?.[1] ?? 0) + direction * (props.step ?? 1);
+        props.onValueChange(`${Number(value.toFixed(4))}${match?.[2] ?? (props.bareNumber ? '' : (props.units[0] ?? ''))}`);
+    };
+    return (_jsxs("span", { className: "bd-style-number", children: [_jsx(Input, { ...props }), _jsxs("span", { className: "bd-style-steps", children: [_jsx("button", { type: "button", disabled: props.disabled, "aria-label": `${props.ariaLabel ?? props.unitLabel}: ${t('style.step.up')}`, onClick: () => step(1), children: _jsx(Icon, { name: "chevron-up" }) }), _jsx("button", { type: "button", disabled: props.disabled, "aria-label": `${props.ariaLabel ?? props.unitLabel}: ${t('style.step.down')}`, onClick: () => step(-1), children: _jsx(Icon, { name: "chevron-down" }) })] })] }));
+}

package/dist/panels/inspector/styles/option-label.d.ts

@@ -0,0 +1,7 @@
+import type { Translate } from '../../../messages/index.tsx';
+/**
+ * The words an author reads for a CSS keyword (`flex-start`, `nowrap`, `multiply`). The stored
+ * value stays the keyword; only what is shown is translated. A keyword without a message shows as it is.
+ */
+export declare function optionLabel(keyword: string, t: Translate): string;
+//# sourceMappingURL=option-label.d.ts.map

package/dist/panels/inspector/styles/option-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-label.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/option-label.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,GAAG,MAAM,CAGjE"}

package/dist/panels/inspector/styles/option-label.js

@@ -0,0 +1,9 @@
+import { en } from '../../../messages/en.js';
+/**
+ * The words an author reads for a CSS keyword (`flex-start`, `nowrap`, `multiply`). The stored
+ * value stays the keyword; only what is shown is translated. A keyword without a message shows as it is.
+ */
+export function optionLabel(keyword, t) {
+    const key = `styleOption.kw.${keyword.trim().replaceAll(' ', '-')}`;
+    return Object.hasOwn(en, key) ? t(key) : keyword;
+}

package/dist/panels/inspector/styles/property-label.d.ts

@@ -0,0 +1,9 @@
+import type { StylePropertyDef } from '@next-buildr/core';
+import type { Translate } from '../../../messages/index.tsx';
+export declare const propertyLabel: (def: StylePropertyDef, t: Translate) => string;
+/** The label text with the first match of the search query wrapped in `<mark>`. */
+export declare function Highlight(props: {
+    readonly text: string;
+    readonly query?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=property-label.d.ts.map

package/dist/panels/inspector/styles/property-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-label.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/property-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAEzE,eAAO,MAAM,aAAa,QAAS,gBAAgB,KAAK,SAAS,KAAG,MACR,CAAC;AAE7D,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,+BAY9F"}

package/dist/panels/inspector/styles/property-label.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const propertyLabel = (def, t) => t(`style.property.${def.group}.${def.name}`);
+/** The label text with the first match of the search query wrapped in `<mark>`. */
+export function Highlight(props) {
+    const query = (props.query ?? '').trim().toLowerCase();
+    const lower = props.text.toLowerCase();
+    const at = query === '' || lower.length !== props.text.length ? -1 : lower.indexOf(query);
+    if (at < 0)
+        return _jsx(_Fragment, { children: props.text });
+    return (_jsxs(_Fragment, { children: [props.text.slice(0, at), _jsx("mark", { children: props.text.slice(at, at + query.length) }), props.text.slice(at + query.length)] }));
+}

package/dist/panels/inspector/styles/section-state.d.ts

@@ -0,0 +1,22 @@
+export declare const SECTIONS_STORAGE_KEY = "buildr.editor.inspector.styles";
+type Listener = () => void;
+export declare const subscribeSections: (listener: Listener) => (() => void);
+/** A stable snapshot: the same object until the stored text changes. */
+export declare function rememberedSections(): Readonly<Record<string, boolean>>;
+export declare function setSectionOpen(name: string, open: boolean): void;
+export interface SectionsSnapshot {
+    readonly names: readonly string[];
+    readonly allOpen: boolean;
+}
+/** The sections mounted under one inspector; every editor on a page has its own. */
+export interface SectionRegistry {
+    readonly subscribe: (listener: Listener) => () => void;
+    readonly snapshot: () => SectionsSnapshot;
+    /** A section reports whether it is open; the returned function removes it. */
+    readonly report: (name: string, open: boolean) => () => void;
+}
+export declare function createSectionRegistry(): SectionRegistry;
+/** Expand or collapse every section of one registry, as one remembered change. */
+export declare function setAllSections(registry: SectionRegistry, open: boolean): void;
+export {};
+//# sourceMappingURL=section-state.d.ts.map

package/dist/panels/inspector/styles/section-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-state.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/section-state.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,mCAAmC,CAAC;AAErE,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC;AAK3B,eAAO,MAAM,iBAAiB,aAAc,QAAQ,KAAG,CAAC,MAAM,IAAI,CAKjE,CAAC;AAiBF,wEAAwE;AACxE,wBAAgB,kBAAkB,IAAI,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAYtE;AAaD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAEhE;AAGD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED,oFAAoF;AACpF,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,MAAM,IAAI,CAAC;IACvD,QAAQ,CAAC,QAAQ,EAAE,MAAM,gBAAgB,CAAC;IAC1C,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CAC9D;AAED,wBAAgB,qBAAqB,IAAI,eAAe,CA4BvD;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,CAI7E"}

package/dist/panels/inspector/styles/section-state.js

@@ -0,0 +1,96 @@
+import { z } from 'zod';
+const stateSchema = z.record(z.string(), z.boolean());
+export const SECTIONS_STORAGE_KEY = 'buildr.editor.inspector.styles';
+const listeners = new Set();
+const notify = () => {
+    for (const listener of listeners)
+        listener();
+};
+export const subscribeSections = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+// --- remembered open/closed state (outside the document) ---------------------------------------
+let raw;
+let remembered = {};
+/** Corrupt or foreign data is ignored as a whole. */
+function parse(text) {
+    if (text === null)
+        return {};
+    try {
+        const parsed = stateSchema.safeParse(JSON.parse(text));
+        return parsed.success ? parsed.data : {};
+    }
+    catch {
+        return {};
+    }
+}
+/** A stable snapshot: the same object until the stored text changes. */
+export function rememberedSections() {
+    let stored;
+    try {
+        stored = localStorage.getItem(SECTIONS_STORAGE_KEY);
+    }
+    catch {
+        return remembered;
+    }
+    if (stored !== raw) {
+        raw = stored;
+        remembered = parse(stored);
+    }
+    return remembered;
+}
+function remember(next) {
+    remembered = next;
+    try {
+        localStorage.setItem(SECTIONS_STORAGE_KEY, JSON.stringify(next));
+        raw = localStorage.getItem(SECTIONS_STORAGE_KEY);
+    }
+    catch {
+        // Private browsing and full storage still allow in-memory preferences.
+    }
+    notify();
+}
+export function setSectionOpen(name, open) {
+    remember({ ...rememberedSections(), [name]: open });
+}
+export function createSectionRegistry() {
+    const mounted = new Map();
+    const own = new Set();
+    let snapshot = { names: [], allOpen: false };
+    const refresh = () => {
+        const names = [...mounted.keys()];
+        const allOpen = names.length > 0 && [...mounted.values()].every(Boolean);
+        if (allOpen === snapshot.allOpen && names.join(',') === snapshot.names.join(','))
+            return;
+        snapshot = { names, allOpen };
+        for (const listener of [...own])
+            listener();
+    };
+    return {
+        subscribe: (listener) => {
+            own.add(listener);
+            return () => {
+                own.delete(listener);
+            };
+        },
+        snapshot: () => snapshot,
+        report: (name, open) => {
+            mounted.set(name, open);
+            refresh();
+            return () => {
+                mounted.delete(name);
+                refresh();
+            };
+        },
+    };
+}
+/** Expand or collapse every section of one registry, as one remembered change. */
+export function setAllSections(registry, open) {
+    const next = { ...rememberedSections() };
+    for (const name of registry.snapshot().names)
+        next[name] = open;
+    remember(next);
+}

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+/**
+ * One collapsible section of the Style tab: lead icon, title, a chip counting the values that
+ * exist only at the breakpoint being edited, a dot while the section holds any value, and a chevron
+ * on the right. Open/closed is a preference kept outside the document (see `section-state.ts`).
+ */
+export declare function StyleSection(props: {
+    readonly name: string;
+    readonly label: string;
+    readonly defaultOpen: boolean;
+    readonly searching: boolean;
+    readonly modified: boolean;
+    readonly override: boolean;
+    /** How many values exist only at the breakpoint being edited (the chip shows above 0). */
+    readonly overrideCount?: number;
+    /** The breakpoint being edited, for the chip's name and icon. */
+    readonly layer?: string;
+    /** The search text, highlighted in the title. */
+    readonly query?: string;
+    /** "Reset section": the footer shows while this is given. */
+    readonly onReset?: (() => void) | undefined;
+    readonly resetDisabled?: boolean;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAyB/E;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,0FAA0F;IAC1F,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,iEAAiE;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B,+BAgEA"}

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useSyncExternalStore } from 'react';
+import { interpolate, usePlural, useT } from '../../../messages/index.js';
+import { Icon } from '../../../ui/index.js';
+import { Highlight } from './property-label.js';
+import { rememberedSections, setSectionOpen, subscribeSections } from './section-state.js';
+import { useSectionRegistry } from './sections-context.js';
+const sectionIcons = {
+    layout: 'layout-grid',
+    size: 'stretch-vertical',
+    spacing: 'box',
+    typography: 'type',
+    colors: 'droplet',
+    background: 'image',
+    border: 'braces',
+    effects: 'sigma',
+    shadow: 'copy',
+    visibility: 'eye',
+    motion: 'sparkles',
+};
+const deviceIcon = (layer) => layer === 'mobile' ? 'smartphone' : layer === 'tablet' ? 'tablet' : 'monitor-smartphone';
+/**
+ * One collapsible section of the Style tab: lead icon, title, a chip counting the values that
+ * exist only at the breakpoint being edited, a dot while the section holds any value, and a chevron
+ * on the right. Open/closed is a preference kept outside the document (see `section-state.ts`).
+ */
+export function StyleSection(props) {
+    const t = useT();
+    const plural = usePlural();
+    const id = useId();
+    const stored = useSyncExternalStore(subscribeSections, rememberedSections, rememberedSections);
+    const open = stored[props.name] ?? props.defaultOpen;
+    const expanded = props.searching || open;
+    const registry = useSectionRegistry();
+    useEffect(() => registry.report(props.name, open), [registry, props.name, open]);
+    const count = props.overrideCount ?? (props.override ? 1 : 0);
+    const layer = props.layer ?? '';
+    const device = layer === 'tablet' || layer === 'mobile'
+        ? t(`inspector.device.${layer}`)
+        : layer;
+    const chipLabel = interpolate(plural('inspector.overrides', count), { device });
+    return (_jsxs("section", { className: "bd-sec", "data-group": props.name, "data-override": props.override, children: [_jsx("h4", { className: "bd-sec__title", children: _jsxs("button", { type: "button", className: "bd-sec__head", "aria-expanded": expanded, "aria-controls": id, onClick: () => setSectionOpen(props.name, !open), children: [_jsx(Icon, { name: sectionIcons[props.name] ?? 'braces', className: "lead" }), _jsx("span", { children: _jsx(Highlight, { text: props.label, query: props.query }) }), count > 0 ? (_jsxs("span", { className: "bd-ovr", role: "img", "aria-label": chipLabel, children: [_jsx(Icon, { name: deviceIcon(layer) }), count] })) : null, props.modified ? (_jsx("span", { className: "bd-mod-dot", role: "img", "aria-label": t('inspector.tab.changed') })) : null, _jsx(Icon, { name: "chevron-right", className: "chev" })] }) }), _jsx("div", { id: id, className: `bd-sec__body${expanded ? ' is-open' : ''}`, children: _jsx("div", { className: "bd-sec__inner", inert: !expanded, children: _jsxs("div", { className: "bd-sec__content", children: [props.children, props.onReset !== undefined ? (_jsx("div", { className: "bd-sec__foot", children: _jsxs("button", { type: "button", className: "bd-textbtn", disabled: props.resetDisabled === true, onClick: props.onReset, children: [_jsx(Icon, { name: "rotate-ccw" }), t('inspector.resetSection')] }) })) : null] }) }) })] }));
+}

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

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type SectionRegistry } from './section-state.ts';
+/**
+ * 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 declare function StyleSectionsProvider(props: {
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** Without a provider, a section or toggle gets a private registry (a lone toggle stays disabled). */
+export declare function useSectionRegistry(): SectionRegistry;
+//# sourceMappingURL=sections-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sections-context.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/styles/sections-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAyB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIjF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAG5E;AAED,sGAAsG;AACtG,wBAAgB,kBAAkB,IAAI,eAAe,CAIpD"}