nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/styleEditors/GridSection.js

@@ -1,14 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { IconSettings, IconSpacingHorizontal, IconSpacingVertical } from "@tabler/icons-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSpacingHorizontal, IconSpacingVertical } from "@tabler/icons-react";
 import { GridPicker } from "./GridPicker.js";
 import { GapField } from "./GapField.js";
 import { LayoutDropdown } from "./LayoutDropdown.js";
 import { GridValueField } from "./GridValueField.js";
-import { GridChildSection } from "./GridChildSection.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
-import { IconButton } from "../ui/IconButton.js";
-import { InspectorPopover } from "../ui/InspectorPopover.js";
 const GRID_AUTO_FLOW_OPTIONS = ["row", "column", "row dense", "column dense"];
 const GRID_CONTENT_ALIGNMENT_OPTIONS = [
     "normal",
@@ -21,7 +17,24 @@ const GRID_CONTENT_ALIGNMENT_OPTIONS = [
     "space-evenly",
 ];
 const GRID_ITEM_ALIGNMENT_OPTIONS = ["normal", "stretch", "start", "end", "center", "self-start", "self-end"];
-export function GridSection({ domElement: el, editTarget, selection, entries, tokenRows, showContainer, showChild, revision = 0, onAfterEdit, }) {
-    const [advancedOpen, setAdvancedOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [showContainer ? _jsx("div", { className: "layout__group layout__grid", "data-test": "layout-grid-container", children: _jsxs("div", { className: "layout__grid-primary", children: [_jsxs("div", { className: "layout__grid-picker-column", children: [_jsxs("div", { className: "layout__grid-heading", children: [_jsx("div", { className: "editor__title", children: "Grid" }), _jsx(InspectorPopover, { "data-test": "layout-grid-settings", side: "bottom", align: "end", triggerTooltip: "Grid settings", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Grid settings", "data-active": advancedOpen, "data-test": "layout-grid-settings", children: _jsx(IconSettings, { size: 16, stroke: 1.8, "aria-hidden": "true" }) })), open: advancedOpen, onOpenChange: setAdvancedOpen, children: _jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [_jsx(GridValueField, { property: "grid-template-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-template-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-columns", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }), _jsx(GridValueField, { property: "grid-auto-rows", domElement: el, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: [_jsx(LayoutDropdown, { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit }), _jsx(LayoutDropdown, { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS, domElement: el, editTarget: editTarget, selection: selection, stacked: true, revision: revision, onAfterEdit: onAfterEdit })] })] }) })] }), _jsx(GridPicker, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit })] }), _jsxs("div", { className: "layout__grid-gap", "data-test": "layout-grid-gap", children: [_jsx("div", { className: "layout__grid-heading", "data-test": "layout-grid-gap-heading", "aria-hidden": "true", children: _jsx("div", { className: "editor__title" }) }), _jsxs("div", { className: "layout__grid-gap-fields", children: [_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-row-gap", children: _jsx(GapField, { property: "row-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingVertical, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-row-gap" })), onAfterEdit: onAfterEdit }) }), _jsx(ControlSurface, { className: "layout__spacing-field", "data-test": "layout-grid-column-gap", children: _jsx(GapField, { property: "column-gap", domElement: el, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(IconSpacingHorizontal, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": "layout-spacing-icon-column-gap" })), onAfterEdit: onAfterEdit }) })] })] })] }) }) : null, showChild ? _jsx(GridChildSection, { domElement: el, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }) : null] }));
+const GRID_ALIGNMENT_FIELDS = [
+    { property: "justify-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS },
+    { property: "align-content", options: GRID_CONTENT_ALIGNMENT_OPTIONS },
+    { property: "justify-items", options: GRID_ITEM_ALIGNMENT_OPTIONS },
+    { property: "align-items", options: GRID_ITEM_ALIGNMENT_OPTIONS },
+];
+const GRID_TRACK_PROPERTIES = ["grid-template-columns", "grid-template-rows"];
+const GRID_AUTO_TRACK_PROPERTIES = ["grid-auto-columns", "grid-auto-rows"];
+/** Track templates, flow and content alignment: the grid container settings the cell picker does not cover. */
+export function GridAdvancedFields({ domElement, editTarget, selection, revision = 0, onAfterEdit, }) {
+    const shared = { domElement, editTarget, selection, revision, onAfterEdit };
+    return (_jsxs("div", { className: "layout__grid-advanced", "data-test": "layout-grid-advanced", children: [_jsx("div", { className: "editor__title", children: "Advanced grid CSS" }), _jsxs("div", { className: "layout__grid-fields", children: [GRID_TRACK_PROPERTIES.map((property) => _jsx(GridValueField, { property: property, ...shared }, property)), _jsx(LayoutDropdown, { property: "grid-auto-flow", options: GRID_AUTO_FLOW_OPTIONS, ...shared }), GRID_AUTO_TRACK_PROPERTIES.map((property) => _jsx(GridValueField, { property: property, ...shared }, property))] }), _jsx("div", { className: "layout__grid-alignment", "data-test": "layout-grid-alignment", children: GRID_ALIGNMENT_FIELDS.map(({ property, options }) => (_jsx(LayoutDropdown, { property: property, options: [...options], stacked: true, ...shared }, property))) })] }));
+}
+/** The cell picker beside the row and column gap fields. */
+export function GridContainerControls({ domElement, editTarget, selection, entries, tokenRows, revision = 0, onAfterEdit, }) {
+    const gaps = [
+        { property: "row-gap", Icon: IconSpacingVertical },
+        { property: "column-gap", Icon: IconSpacingHorizontal },
+    ];
+    return (_jsxs("div", { className: "layout__grid-primary", "data-test": "layout-grid-container", children: [_jsx(GridPicker, { domElement: domElement, editTarget: editTarget, revision: revision, onAfterEdit: onAfterEdit }), _jsx("div", { className: "layout__grid-gap-fields", "data-test": "layout-grid-gap", children: gaps.map(({ property, Icon }) => (_jsx(ControlSurface, { className: "layout__spacing-field", "data-test": `layout-grid-${property}`, children: _jsx(GapField, { property: property, domElement: domElement, editTarget: editTarget, selection: selection, entries: entries, tokenRows: tokenRows, leading: (_jsx(Icon, { className: "layout__spacing-icon", size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true", "data-test": `layout-spacing-icon-${property}` })), onAfterEdit: onAfterEdit }) }, property))) })] }));
 }

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

@@ -9,9 +9,5 @@ export interface GridValueFieldProps {
     revision?: number;
     onAfterEdit?: () => void;
 }
-/**
- * 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.
- */
+/** Grid track lists and line placement are not safely decomposable into numeric controls. */
 export declare function GridValueField({ property, domElement: el, editTarget, selection, revision, onAfterEdit, }: GridValueFieldProps): ReactElement;

package/dist/inspector/styleEditors/GridValueField.js

@@ -15,11 +15,7 @@ const DEFAULT_GRID_VALUES = {
     "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.
- */
+/** Grid track lists and line placement are not safely decomposable into numeric controls. */
 export function GridValueField({ property, domElement: el, editTarget, selection, revision = 0, onAfterEdit, }) {
     const atRules = useFieldAtRules(property);
     const mixed = selection?.getProperty(property)?.value.kind === "mixed";
@@ -30,9 +26,7 @@ export function GridValueField({ property, domElement: el, editTarget, selection
     };
     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.
+    // Commit reads the ref, not state: Escape reverts then blurs in one event, before React re-renders.
     const draftRef = useRef(value);
     useEffect(() => {
         const next = readValue();

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

@@ -13,6 +13,5 @@ interface ImageBackgroundEditorProps {
     onCss(value: string): boolean;
     onSizing(declarations: StyleDeclaration[]): boolean;
 }
-/** Preview uploaded images through the existing workspace style edits. */
 export declare function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }: ImageBackgroundEditorProps): ReactElement;
 export {};

package/dist/inspector/styleEditors/ImageBackgroundEditor.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { IconPhoto, IconUpload } from "@tabler/icons-react";
 import { TokenValueField } from "../tokens/TokenField.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getActiveDraftChanges } from "../drafts/store.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { Button } from "../ui/Button.js";
 import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
@@ -32,7 +32,6 @@ function imageName(src, base) {
         return "Background image";
     }
 }
-/** Preview uploaded images through the existing workspace style edits. */
 export function ImageBackgroundEditor({ element, elements, value, mixed, sizingValues, onUpload, onCss, onSizing }) {
     const input = useRef(null);
     const reader = useRef(null);

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

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

package/dist/inspector/styleEditors/LayoutBlockedIndicator.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InlineStyleWarning } from "../ui/InlineStyleWarning.js";
-/** Explains why a layout preview cannot override an inline-authored value. */
 export function LayoutBlockedIndicator({ blockedBy }) {
     return (_jsx(InlineStyleWarning, { blockedBy: blockedBy, dataTest: "layout-combo-blocked", tooltipDataTest: "layout-combo-blocked-tooltip", className: "layout-combo-blocked", symbolClassName: "layout-combo-blocked__symbol" }));
 }

package/dist/inspector/styleEditors/LayoutComboField.js

@@ -55,11 +55,6 @@ export function LayoutComboField(props) {
         }
     }, [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 = inlineBlockedBy(selection?.domElements ?? [el], property);
     function commit(value) {
         if (blockedBy)

package/dist/inspector/styleEditors/LayoutModeRow.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 LayoutModeRowProps {
+    domElement: HTMLElement;
+    editTarget?: EditTarget;
+    selection?: StyleSelection | null;
+    isFlexContainer: boolean;
+    isGridContainer: boolean;
+    revision?: number;
+    onAfterEdit?: () => void;
+}
+/** One row picks how the element lays out its children; the rest of the display options sit behind the menu. */
+export declare function LayoutModeRow(props: LayoutModeRowProps): ReactElement;

package/dist/inspector/styleEditors/LayoutModeRow.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconDots, IconLayoutColumns, IconLayoutGrid, IconLayoutRows, IconSquare } from "@tabler/icons-react";
+import { GridAdvancedFields } from "./GridSection.js";
+import { LayoutDropdown } from "./LayoutDropdown.js";
+import { POSITION_OPTIONS, Z_INDEX_PRESETS } from "./PositionControls.js";
+import { layoutModeEdits, layoutModeOf } from "./layoutMode.js";
+import { LayoutValueField, useComputedLayoutValue } from "./FlexControls.js";
+import { inlineBlockedBy } from "./inlineAuthored.js";
+import { setStyles } from "../tokens/editActions.js";
+import { IconButton } from "../ui/IconButton.js";
+import { InspectorPopover } from "../ui/InspectorPopover.js";
+import { SegmentedControl } from "../ui/SegmentedControl.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { inlineStyleWarningContent } from "../ui/InlineStyleWarning.js";
+const DISPLAY_OPTIONS = ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "none", "contents"];
+const OVERFLOW_OPTIONS = ["visible", "hidden", "clip", "scroll", "auto"];
+const FLEX_DIRECTION_OPTIONS = ["row", "row-reverse", "column", "column-reverse"];
+const FLEX_WRAP_OPTIONS = ["nowrap", "wrap", "wrap-reverse"];
+const ALIGN_ITEMS_OPTIONS = ["stretch", "flex-start", "center", "flex-end", "baseline"];
+const ALIGN_CONTENT_OPTIONS = ["normal", "stretch", "flex-start", "flex-end", "center", "space-between", "space-around"];
+const ICON_PROPS = { size: 16, stroke: 1.8, "aria-hidden": true };
+const MODE_OPTIONS = [
+    { value: "block", label: "Block", icon: _jsx(IconSquare, { ...ICON_PROPS }), testId: "layout-mode-block" },
+    { value: "row", label: "Flex row", icon: _jsx(IconLayoutColumns, { ...ICON_PROPS }), testId: "layout-mode-row" },
+    { value: "column", label: "Flex column", icon: _jsx(IconLayoutRows, { ...ICON_PROPS }), testId: "layout-mode-column" },
+    { value: "grid", label: "Grid", icon: _jsx(IconLayoutGrid, { ...ICON_PROPS }), testId: "layout-mode-grid" },
+];
+/** One row picks how the element lays out its children; the rest of the display options sit behind the menu. */
+export function LayoutModeRow(props) {
+    return (_jsxs("div", { className: "layout__mode-row", "data-test": "layout-mode", children: [_jsx(LayoutModeControl, { ...props }), _jsx(LayoutOptionsMenu, { ...props })] }));
+}
+function LayoutModeControl({ domElement, editTarget, selection, revision = 0, onAfterEdit }) {
+    const [display] = useComputedLayoutValue(domElement, "display", "block", revision);
+    const [direction] = useComputedLayoutValue(domElement, "flex-direction", "row", revision);
+    const selectedDisplay = selection?.getProperty("display")?.value;
+    const selectedDirection = selection?.getProperty("flex-direction")?.value;
+    const sharedDisplay = selectedDisplay?.kind === "common" ? selectedDisplay.value : display;
+    const sharedDirection = selectedDirection?.kind === "common" ? selectedDirection.value : direction;
+    const mixedDisplay = selectedDisplay?.kind === "mixed";
+    const mixedDirection = selectedDirection?.kind === "mixed" && sharedDisplay.endsWith("flex");
+    const known = !mixedDisplay && !mixedDirection;
+    const mode = known ? layoutModeOf(sharedDisplay, sharedDirection) : null;
+    const blockedBy = inlineBlockedBy(selection?.domElements ?? [domElement], "display", "flex-direction");
+    function selectMode(next) {
+        if (blockedBy)
+            return;
+        const edits = layoutModeEdits(known ? { display: sharedDisplay, flexDirection: sharedDirection } : null, next);
+        if (edits.length === 0)
+            return;
+        setStyles(editTarget ?? domElement, [...edits]);
+        onAfterEdit?.();
+    }
+    return (_jsx(Tooltip, { content: inlineStyleWarningContent(blockedBy), disabled: blockedBy === null, children: _jsx(SegmentedControl, { value: mode, "aria-label": "Layout mode", "data-test": "layout-mode-control", className: "layout__mode-control", disabled: blockedBy !== null, tooltips: true, options: MODE_OPTIONS, onChange: selectMode }) }));
+}
+function LayoutOptionsMenu({ domElement, editTarget, selection, isFlexContainer, isGridContainer, revision = 0, onAfterEdit, }) {
+    const [open, setOpen] = useState(false);
+    const shared = { domElement, editTarget, selection, revision, onAfterEdit, stacked: true };
+    return (_jsx(InspectorPopover, { "data-test": "layout-options", side: "left", align: "start", triggerTooltip: "Layout options", triggerElement: (_jsx(IconButton, { variant: "quiet", size: "default", label: "Layout options", "data-active": open, "data-test": "layout-options", children: _jsx(IconDots, { size: 16, stroke: 2, "aria-hidden": "true" }) })), open: open, onOpenChange: setOpen, children: _jsxs("div", { className: "layout__options", "data-test": "layout-options-content", children: [_jsx("div", { className: "editor__title", children: "Layout options" }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "display", options: DISPLAY_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "overflow", options: OVERFLOW_OPTIONS, ...shared })] }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "position", options: POSITION_OPTIONS, ...shared }), _jsx(LayoutValueField, { label: "Z-index", property: "z-index", presets: Z_INDEX_PRESETS, inputOnly: true, domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit })] }), isFlexContainer ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "flex-direction", options: FLEX_DIRECTION_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "flex-wrap", options: FLEX_WRAP_OPTIONS, ...shared })] }), _jsxs("div", { className: "layout__options-pair", children: [_jsx(LayoutDropdown, { property: "align-items", options: ALIGN_ITEMS_OPTIONS, ...shared }), _jsx(LayoutDropdown, { property: "align-content", options: ALIGN_CONTENT_OPTIONS, ...shared })] })] })) : null, isGridContainer ? _jsx(GridAdvancedFields, { domElement: domElement, editTarget: editTarget, selection: selection, revision: revision, onAfterEdit: onAfterEdit }) : null] }) }));
+}

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

@@ -1,7 +1,6 @@
 import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
+import type { ResolvedProperty, 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;
@@ -10,4 +9,5 @@ export interface LayoutSectionProps {
     tokenRows?: ResolvedProperty[];
     onAfterEdit?: () => void;
 }
+/** The element's box: sizing, how it lays out and pads its children, its margin, and its position when not static. */
 export declare function LayoutSection(props: LayoutSectionProps): ReactElement;