nudge-ui 0.2.0

package/dist/inspector/styleEditors/GridValueField.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { FieldRow } from "../ui/FieldRow.js";
+import { TextInput } from "../ui/TextInput.js";
+import { getLayoutValue } from "./layoutValue.js";
+import { setStyle } from "../tokens/editActions.js";
+import { useFieldAtRules } from "../ui/AtRuleContext.js";
+const DEFAULT_GRID_VALUES = {
+    "grid-template-columns": "none",
+    "grid-template-rows": "none",
+    "grid-auto-columns": "auto",
+    "grid-auto-rows": "auto",
+    "grid-column": "auto",
+    "grid-row": "auto",
+};
+/**
+ * Raw CSS editor for Grid grammar. Track lists and line placement are not
+ * safely decomposable into numeric controls, so the authored expression is
+ * retained verbatim and committed as one managed longhand.
+ */
+export function GridValueField({ property, domElement: el, editTarget, selection, revision = 0, onAfterEdit, }) {
+    const atRules = useFieldAtRules(property);
+    const mixed = selection?.getProperty(property)?.value.kind === "mixed";
+    const readValue = () => {
+        const value = getLayoutValue(el, property);
+        return value.authored || value.computed || DEFAULT_GRID_VALUES[property] || "";
+    };
+    const [value, setValue] = useState(readValue);
+    const [draft, setDraft] = useState(value);
+    // Commit reads the ref, not state: Escape reverts the draft and then blurs
+    // within the same event, before React re-renders, so a state-only read
+    // would commit the pre-escape draft.
+    const draftRef = useRef(value);
+    useEffect(() => {
+        const next = readValue();
+        setValue(next);
+        updateDraft(mixed ? "" : next);
+    }, [el, mixed, property, revision]);
+    function updateDraft(next) {
+        draftRef.current = next;
+        setDraft(next);
+    }
+    function commit() {
+        const next = draftRef.current.trim();
+        if (!next) {
+            updateDraft(mixed ? "" : value);
+            return;
+        }
+        setValue(next);
+        updateDraft(next);
+        if (setStyle(editTarget ?? el, property, next))
+            onAfterEdit?.();
+    }
+    function cancel() {
+        updateDraft(mixed ? "" : value);
+    }
+    return (_jsx(FieldRow, { label: property, property: property, atRules: atRules, "data-test": `layout-grid-${property}`, children: _jsx(TextInput, { value: draft, placeholder: mixed ? "Mixed" : undefined, "data-test": `layout-grid-input-${property}`, "aria-label": property, onChange: (event) => updateDraft(event.target.value), onBlur: () => {
+                commit();
+            }, onKeyDown: (event) => {
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    cancel();
+                    event.currentTarget.blur();
+                }
+                else if (event.key === "Enter") {
+                    event.preventDefault();
+                    event.currentTarget.blur();
+                }
+            } }) }));
+}

package/dist/inspector/styleEditors/InsetSection.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { SelectedElement } from "../selection/selectionStore.js";
+export interface InsetSectionProps {
+    element: SelectedElement;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+}
+/**
+ * Keeps the positioned-element inset editor available as a standalone
+ * section for callers that render it outside SpacingBox.
+ */
+export declare function InsetSection({ element, entries, tokenRows, onAfterEdit, }: InsetSectionProps): ReactElement | null;

package/dist/inspector/styleEditors/InsetSection.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { projectInspectorValues } from "../spacing/projection.js";
+import { SpacingField } from "./SpacingBox.js";
+/**
+ * Keeps the positioned-element inset editor available as a standalone
+ * section for callers that render it outside SpacingBox.
+ */
+export function InsetSection({ element, entries = [], tokenRows = [], onAfterEdit, }) {
+    const el = element.domElement;
+    const position = getStateStyleValue(el, "position", "static").trim().toLowerCase();
+    if (position !== "relative" && position !== "sticky")
+        return null;
+    return (_jsx(SpacingField, { property: "inset", projection: projectInspectorValues(el, tokenRows).spacing.inset, domElement: el, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }));
+}

package/dist/inspector/styleEditors/LayoutBlockedIndicator.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from "react";
+export interface LayoutBlockedIndicatorProps {
+    blockedBy: string;
+}
+/** Explains why a layout preview cannot override an inline-authored value. */
+export declare function LayoutBlockedIndicator({ blockedBy }: LayoutBlockedIndicatorProps): ReactElement;

package/dist/inspector/styleEditors/LayoutBlockedIndicator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+/** Explains why a layout preview cannot override an inline-authored value. */
+export function LayoutBlockedIndicator({ blockedBy }) {
+    return (_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { disableHoverablePopup: true, children: [_jsx(Tooltip.Trigger, { type: "button", delay: 0, className: "layout-combo-blocked", "data-test": "layout-combo-blocked", "aria-label": `Blocked by inline style: ${blockedBy}`, children: _jsx("span", { className: "layout-combo-blocked__symbol", "aria-hidden": "true", children: "!" }) }), _jsx(Tooltip.Portal, { container: document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body, children: _jsx(Tooltip.Positioner, { className: "at-rule-tooltip-positioner", side: "top", align: "end", sideOffset: 7, children: _jsx(Tooltip.Popup, { className: "at-rule-tooltip", "data-test": "layout-combo-blocked-tooltip", children: _jsx("div", { className: "at-rule-tooltip__rules", children: _jsxs("div", { className: "at-rule-tooltip__rule at-rule-tooltip__rule--active", children: ["Set inline (", _jsx("code", { children: blockedBy }), "). Previews can't beat inline styles \u2014 move it to a stylesheet to edit it here."] }) }) }) }) })] }) }));
+}

package/dist/inspector/styleEditors/LayoutComboField.d.ts

@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { ControlAppearance } from "../ui/ControlSurface.js";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface LayoutComboFieldProps {
+    property: string;
+    presets: string[];
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    compact?: boolean;
+    inputOnly?: boolean;
+    alwaysShowInput?: boolean;
+    appearance?: ControlAppearance;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+export declare function LayoutComboField(props: LayoutComboFieldProps): ReactElement;

package/dist/inspector/styleEditors/LayoutComboField.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { setStyle } from "../tokens/editActions.js";
+import { completeCssValue } from "./completeCssValue.js";
+import { nudgeCssValue } from "./nudgeValue.js";
+import { valuePolicyFor } from "./valuePolicy.js";
+import { inlineAuthoredValue, meaningfulLayoutValue } from "./layoutValue.js";
+import { LayoutBlockedIndicator } from "./LayoutBlockedIndicator.js";
+import { Select } from "../ui/Select.js";
+import { TextInput } from "../ui/TextInput.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { AtRuleIndicator, useFieldAtRules } from "../ui/AtRuleContext.js";
+import { getCanvasProjectionAcknowledgementVersion, getCanvasProjectionStatus, subscribeCanvasProjectionAcknowledgements, } from "../canvas/projection.js";
+const CUSTOM_KEY = "__custom__";
+export function LayoutComboField(props) {
+    const { property, presets, domElement: el, editTarget, selection, compact, inputOnly, alwaysShowInput, appearance = "default", revision = 0, onAfterEdit, } = props;
+    const atRules = useFieldAtRules(property);
+    const mixed = selection?.getProperty(property)?.value.kind === "mixed";
+    const [currentValue, setCurrentValue] = useState(() => meaningfulLayoutValue(el, property));
+    const [customValue, setCustomValue] = useState(currentValue);
+    const [showCustom, setShowCustom] = useState(false);
+    const customInputRef = useRef(null);
+    const draftDirtyRef = useRef(false);
+    const pendingProjectionRef = useRef(null);
+    const projectionAcknowledgementVersion = useSyncExternalStore(subscribeCanvasProjectionAcknowledgements, getCanvasProjectionAcknowledgementVersion, getCanvasProjectionAcknowledgementVersion);
+    useEffect(() => {
+        draftDirtyRef.current = false;
+        pendingProjectionRef.current = null;
+    }, [el, property]);
+    useEffect(() => {
+        try {
+            if (draftDirtyRef.current)
+                return;
+            const pending = pendingProjectionRef.current;
+            if (pending && (pending.document !== el.ownerDocument || pending.property !== property)) {
+                pendingProjectionRef.current = null;
+            }
+            else if (pending) {
+                const status = getCanvasProjectionStatus(el.ownerDocument);
+                const waitingForProjection = status !== null
+                    && status.sentRevision >= pending.revision
+                    && status.appliedRevision < pending.revision;
+                if (waitingForProjection)
+                    return;
+                pendingProjectionRef.current = null;
+            }
+            const cv = meaningfulLayoutValue(el, property);
+            setCurrentValue(cv);
+            setCustomValue(mixed ? "" : cv);
+        }
+        catch {
+            // noop
+        }
+    }, [el, mixed, property, revision, projectionAcknowledgementVersion]);
+    const inPresets = presets.includes(currentValue);
+    // Inline styles always beat managed-stylesheet previews in the cascade, so
+    // an inline-authored property can never preview. Present the field as
+    // blocked (with the reason) instead of accepting edits that silently snap
+    // back to the computed value on the next revision. Recomputed every render
+    // so external style-attribute edits update the field without a remount.
+    const blockedBy = inlineAuthoredValue(el, property);
+    function commit(value) {
+        if (blockedBy)
+            return;
+        setCurrentValue(value);
+        setCustomValue(value);
+        draftDirtyRef.current = false;
+        pendingProjectionRef.current = null;
+        const change = setStyle(editTarget ?? el, property, value);
+        if (change) {
+            const status = getCanvasProjectionStatus(el.ownerDocument);
+            if (status && status.sentRevision > status.appliedRevision) {
+                pendingProjectionRef.current = {
+                    document: el.ownerDocument,
+                    property,
+                    revision: status.sentRevision,
+                };
+            }
+        }
+        onAfterEdit?.();
+    }
+    function handleSelectChange(val) {
+        if (val === CUSTOM_KEY) {
+            setShowCustom(true);
+            setTimeout(() => customInputRef.current?.focus(), 0);
+            return;
+        }
+        setShowCustom(false);
+        commit(val);
+    }
+    function handleCustomApply() {
+        const trimmed = customValue.trim();
+        if (trimmed) {
+            commit(completeCssValue(trimmed, valuePolicyFor(property)));
+        }
+        else {
+            draftDirtyRef.current = false;
+            setCustomValue(mixed ? "" : currentValue);
+        }
+        setShowCustom(false);
+    }
+    function handleCustomKeyDown(e) {
+        const direction = arrowDirection(e.key);
+        if (direction && !e.altKey && !e.ctrlKey && !e.metaKey) {
+            const next = nudgeCssValue(property, customValue, direction, e.shiftKey);
+            if (next) {
+                e.preventDefault();
+                e.stopPropagation();
+                commit(next);
+                return;
+            }
+        }
+        if (e.key === "Enter") {
+            handleCustomApply();
+        }
+        else if (e.key === "Escape") {
+            draftDirtyRef.current = false;
+            setCustomValue(mixed ? "" : currentValue);
+            setShowCustom(false);
+        }
+    }
+    const selectValue = mixed ? CUSTOM_KEY : inPresets ? currentValue : CUSTOM_KEY;
+    const customInput = (_jsx(TextInput, { ref: customInputRef, compact: compact, appearance: appearance, inputMode: "decimal", placeholder: mixed ? "Mixed" : "0", "aria-label": formatInspectorLabel(property), "data-test": `layout-combo-input-${property}`, value: customValue, disabled: blockedBy !== null, onChange: (e) => {
+            draftDirtyRef.current = true;
+            setCustomValue(e.target.value);
+        }, onBlur: handleCustomApply, onKeyDown: handleCustomKeyDown }));
+    return (_jsxs("span", { className: `layout-combo${compact ? " layout-combo--compact" : ""}${blockedBy ? " layout-combo--blocked" : ""}`, "data-test": "layout-combo", "data-property": property, children: [inputOnly ? customInput : (_jsxs(_Fragment, { children: [_jsx(Select, { compact: compact, appearance: appearance, "data-test": `layout-combo-select-${property}`, value: selectValue, options: [
+                            ...presets.map((p) => ({ value: p, label: formatInspectorLabel(p) })),
+                            { value: CUSTOM_KEY, label: "Custom…" },
+                        ], onValueChange: handleSelectChange, disabled: blockedBy !== null }), showCustom || alwaysShowInput ? (_jsx("span", { className: "layout-combo__custom", children: customInput })) : null] })), _jsx(AtRuleIndicator, { atRules: atRules }), blockedBy ? _jsx(LayoutBlockedIndicator, { blockedBy: blockedBy }) : null] }));
+}
+function arrowDirection(key) {
+    if (key === "ArrowUp" || key === "ArrowRight")
+        return 1;
+    if (key === "ArrowDown" || key === "ArrowLeft")
+        return -1;
+    return null;
+}

package/dist/inspector/styleEditors/LayoutDropdown.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { EditTarget } from "../selection/editTarget.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface LayoutDropdownProps {
+    property: string;
+    options: string[];
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    stacked?: boolean;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+export declare function LayoutDropdown(props: LayoutDropdownProps): ReactElement;

package/dist/inspector/styleEditors/LayoutDropdown.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { setStyle } from "../tokens/editActions.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { Select } from "../ui/Select.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { useFieldAtRules } from "../ui/AtRuleContext.js";
+export function LayoutDropdown(props) {
+    const { property, options, domElement: el, editTarget, selection, stacked, revision = 0, onAfterEdit } = props;
+    const atRules = useFieldAtRules(property);
+    const selectedProperty = selection?.getProperty(property);
+    const mixed = selectedProperty?.value.kind === "mixed";
+    const [value, setValue] = useState(() => getStateStyleValue(el, property, options[0]));
+    useEffect(() => {
+        try {
+            setValue(getStateStyleValue(el, property, options[0]));
+        }
+        catch {
+            // noop
+        }
+    }, [el, property, options, revision]);
+    function handleChange(next) {
+        if (next === "mixed")
+            return;
+        setValue(next);
+        setStyle(editTarget ?? el, property, next);
+        onAfterEdit?.();
+    }
+    const allOptions = mixed
+        ? ["mixed", ...options]
+        : value && !options.includes(value) ? [...options, value] : options;
+    return (_jsx(FieldRow, { label: property, property: property, atRules: atRules, className: stacked ? "field-row--stacked" : undefined, "data-test": "layout-dropdown", children: _jsx(Select, { "data-test": `layout-select-${property}`, value: mixed ? "mixed" : value, options: allOptions.map((opt) => ({ value: opt, label: formatInspectorLabel(opt) })), onValueChange: handleChange }) }));
+}

package/dist/inspector/styleEditors/LayoutSection.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { TokenEntry } from "../../css/model/index.js";
+import type { SelectedElement } from "../selection/selectionStore.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+export interface LayoutSectionProps {
+    element: SelectedElement;
+    selection?: StyleSelection | null;
+    entries?: TokenEntry[];
+    tokenRows?: ResolvedProperty[];
+    onAfterEdit?: () => void;
+}
+export declare function LayoutSection(props: LayoutSectionProps): ReactElement;