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

package/dist/panels/inspector/inspector.js

@@ -1,39 +1,108 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { canEdit, createIndex } from '@next-buildr/core';
-import { useState } from 'react';
+import { canEdit, createIndex, p as prop, valueSchema } from '@next-buildr/core';
+import { useEffect, useRef, useState } from 'react';
+import { z } from 'zod';
 import { componentMeta, useManifest } from '../../app/manifest.js';
-import { useT } from '../../messages/index.js';
-import { useEditor, useEditorState, useSelectedNode } from '../../store/index.js';
-import { Button, ComponentIcon, Icon, IconButton, Input, Tabs } from '../../ui/index.js';
+import { MoveToDialog, useDragAvailable } from '../../dnd/index.js';
+import { interpolate, useT } from '../../messages/index.js';
+import { hasDescendants } from '../../shortcuts/navigation.js';
+import { pathTo, structureLockedIds, useEditor, useEditorState, useSelectedNode, } from '../../store/index.js';
+import { Button, ComponentIcon, Icon, IconButton, Input, Popover, SearchField, Select, Tabs, useStructureLockedNotice, } from '../../ui/index.js';
+import { AttributesField, AuthorOffNote, ClassesField, CssField } from './author-fields.js';
+import { renderControl } from './controls/index.js';
 import { PropsPanel } from './props-panel.js';
-import { translationLocale } from './value.js';
+import { readProp, translationLocale } from './value.js';
 import { TranslationBanner } from './values/translation.js';
+import { ValueEditor } from './values/value-editor.js';
+const TABS = [
+    { value: 'content', icon: 'type' },
+    { value: 'style', icon: 'image' },
+    { value: 'advanced', icon: 'braces' },
+];
+const isTab = (value) => TABS.some((entry) => entry.value === value);
+/** The collapsed inspector: the tabs as vertical icon buttons; a click opens the panel on that tab. */
+export function InspectorRail({ tab, onTabChange, onExpand }) {
+    const t = useT();
+    const names = {
+        content: t('inspector.tab.content'),
+        style: t('inspector.tab.style'),
+        advanced: t('inspector.tab.advanced'),
+    };
+    return (_jsxs("div", { className: "bd-inspector-rail", children: [_jsx(IconButton, { variant: "ghost", icon: "panel-right", label: t('inspector.expand'), onClick: onExpand }), _jsx("div", { role: "tablist", "aria-orientation": "vertical", "aria-label": t('inspector.tabs'), className: "bd-inspector-rail-tabs", children: TABS.map((entry) => (_jsx(IconButton, { variant: "ghost", icon: entry.icon, role: "tab", "aria-selected": tab === entry.value, label: names[entry.value], onClick: () => {
+                        onTabChange(entry.value);
+                        onExpand();
+                    } }, entry.value))) })] }));
+}
 /** A text attribute of the node (`name`, `anchor`); clearing it removes it. */
 function AttrField(props) {
     // What is typed stays on screen even when the command refuses it (an anchor with a capital).
     const [draft, setDraft] = useState(undefined);
     const shown = draft ?? props.value;
     const id = `${props.nodeId}-${props.attr}`;
-    return (_jsxs("div", { className: "bd-field", "data-attr": props.attr, children: [_jsx("label", { className: "bd-field-label", htmlFor: id, children: props.label }), _jsx(Input, { id: id, value: shown, disabled: props.disabled, placeholder: props.placeholder, autoComplete: "off", spellCheck: false, onChange: (event) => {
-                    setDraft(event.target.value);
-                    props.onChange(props.attr, event.target.value);
-                }, onBlur: () => setDraft(undefined) })] }));
+    return (_jsxs("div", { className: "bd-field", "data-attr": props.attr, "data-layout": "row", children: [_jsx("div", { className: "bd-field-head", children: _jsx("label", { className: "bd-field-label", htmlFor: id, children: props.label }) }), _jsx("div", { className: "bd-field-body", children: _jsx(Input, { id: id, value: shown, disabled: props.disabled, placeholder: props.placeholder, autoComplete: "off", spellCheck: false, onChange: (event) => {
+                        setDraft(event.target.value);
+                        props.onChange(props.attr, event.target.value);
+                    }, onBlur: () => setDraft(undefined) }) })] }));
 }
-/** The node's own name in the header: the same `name` attribute as the Advanced tab's field. */
-function HeaderName(props) {
-    const t = useT();
-    const [draft, setDraft] = useState(undefined);
-    return (_jsx(Input, { className: "bd-inspector-name", "aria-label": t('inspector.nodeName'), value: draft ?? props.value, disabled: props.disabled, placeholder: props.placeholder, autoComplete: "off", spellCheck: false, onChange: (event) => {
-            setDraft(event.target.value);
-            props.onChange('name', event.target.value);
-        }, onBlur: () => setDraft(undefined) }));
+/** Accordion preferences are editor state; opening a group never changes the document. */
+function AdvancedGroup({ title, icon, searching, hidden, children, }) {
+    const [open, setOpen] = useState(false);
+    const expanded = searching || open;
+    return (_jsxs("section", { className: "bd-advanced-group", hidden: hidden, children: [_jsx("h4", { children: _jsxs("button", { type: "button", className: "bd-props-toggle", "aria-expanded": expanded, onClick: () => setOpen(!open), children: [_jsx(Icon, { name: expanded ? 'chevron-down' : 'chevron-right' }), _jsx(Icon, { name: icon }), title] }) }), _jsx("div", { hidden: !expanded, children: children })] }));
+}
+/** The "more actions" menu: items are menuitems, arrows wrap, Home and End jump, focus starts on the first. */
+function ActionMenu({ label, children }) {
+    const ref = useRef(null);
+    const items = () => Array.from(ref.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: focuses the first item once, on open
+    useEffect(() => {
+        items()[0]?.focus();
+    }, []);
+    const onKeyDown = (event) => {
+        const list = items();
+        if (list.length === 0)
+            return;
+        const at = list.indexOf(document.activeElement);
+        let next;
+        if (event.key === 'ArrowDown')
+            next = at < 0 ? 0 : (at + 1) % list.length;
+        else if (event.key === 'ArrowUp')
+            next = at <= 0 ? list.length - 1 : at - 1;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = list.length - 1;
+        else
+            return;
+        event.preventDefault();
+        list[next]?.focus();
+    };
+    return (_jsx("div", { role: "menu", "aria-label": label, ref: ref, onKeyDown: onKeyDown, children: children }));
+}
+const EXCERPT_LENGTH = 24;
+/** A short, single-line excerpt of the node's own text (a plain string, never markup), for the subtitle. */
+function textExcerpt(node, meta, locale, defaultLocale) {
+    if (meta === undefined)
+        return undefined;
+    const entries = Object.entries(meta.props).filter(([, def]) => def.kind === 'text' || def.kind === 'textarea');
+    const [name, def] = entries.find(([key]) => key === 'text') ?? entries[0] ?? [];
+    if (name === undefined || def === undefined)
+        return undefined;
+    const reading = readProp(node, name, def, locale, defaultLocale);
+    if (reading.mode !== 'static' || typeof reading.value !== 'string')
+        return undefined;
+    const text = reading.value.replace(/\s+/g, ' ').trim();
+    if (text === '')
+        return undefined;
+    const chars = [...text];
+    return chars.length > EXCERPT_LENGTH ? `${chars.slice(0, EXCERPT_LENGTH).join('')}…` : text;
 }
 /**
  * The properties of the selected node (docs/editor.md#inspector): Content (the component's props
  * as controls), Style and Advanced (name, anchor, the display condition, and the props the
  * component puts in the "advanced" or "accessibility" group).
  */
-export function Inspector({ locale, defaultLocale, renderStyle }) {
+export function Inspector({ locale, defaultLocale, renderStyle, tab: controlledTab, onTabChange, headerActions, onPageSettings, onRemoveRequest, }) {
     const t = useT();
     const store = useEditor();
     const manifest = useManifest();
@@ -43,12 +112,44 @@ export function Inspector({ locale, defaultLocale, renderStyle }) {
     const selectedIds = useEditorState((state) => state.selectedIds);
     const count = selectedIds.length;
     const [notice, setNotice] = useState('');
+    const [innerTab, setInnerTab] = useState('content');
+    const [query, setQuery] = useState('');
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [moving, setMoving] = useState(false);
+    const canMove = useDragAvailable();
+    const notifyLocked = useStructureLockedNotice();
+    /** A block locked for structure is not removed, moved or duplicated: say why. */
+    const refuseLocked = () => {
+        if (structureLockedIds(store.getState().doc, selectedIds).length === 0)
+            return false;
+        notifyLocked(selectedIds);
+        return true;
+    };
+    const tab = controlledTab ?? innerTab;
     if (node === undefined) {
-        return (_jsx("div", { className: "bd-inspector", children: _jsxs("div", { className: "bd-inspector-empty", "data-state": "nothing", children: [_jsx(Icon, { name: "mouse-pointer-click", size: "md" }), _jsx("p", { className: "bd-inspector-empty-title", children: t('inspector.empty') }), _jsx("p", { className: "bd-inspector-empty-hint", children: t('inspector.emptyHint') })] }) }));
+        return (_jsx("div", { className: "bd-inspector", children: _jsxs("div", { className: "bd-inspector-empty", "data-state": "nothing", children: [_jsx(Icon, { name: "mouse-pointer-click", size: "md" }), _jsx("p", { className: "bd-inspector-empty-title", children: t('inspector.empty') }), _jsx("p", { className: "bd-inspector-empty-hint", children: t('inspector.emptyHint') }), onPageSettings !== undefined ? (_jsxs(Button, { className: "bd-inspector-page-settings", onClick: onPageSettings, children: [_jsx(Icon, { name: "sliders-vertical" }), t('inspector.pageSettings')] })) : null] }) }));
     }
     const meta = componentMeta(manifest, node.type);
     const locked = !canEdit(doc, createIndex(doc), node.id, 'content').ok;
     const disabled = readOnly || locked;
+    const styleDisabled = readOnly || !canEdit(doc, createIndex(doc), node.id, 'style').ok;
+    const excerpt = textExcerpt(node, meta, locale, defaultLocale);
+    const parentId = pathTo(doc, node.id).at(-2);
+    const parentNode = parentId === undefined ? undefined : doc.nodes[parentId];
+    const parentName = parentNode === undefined
+        ? undefined
+        : (parentNode.name ?? componentMeta(manifest, parentNode.type)?.label ?? parentNode.type);
+    const subtitle = [
+        node.name ?? meta?.label ?? node.type,
+        excerpt === undefined ? undefined : interpolate(t('inspector.excerpt'), { text: excerpt }),
+        parentName === undefined
+            ? undefined
+            : interpolate(t('inspector.inBlock'), { name: parentName }),
+    ]
+        .filter((x) => x !== undefined)
+        .join(' · ');
+    const needle = query.trim().toLowerCase();
+    const matches = (label) => needle === '' || label.toLowerCase().includes(needle);
     const report = (result) => setNotice(result.ok ? '' : (result.error?.message ?? ''));
     const write = (prop, def, value) => {
         const target = translationLocale(def, locale, defaultLocale);
@@ -98,19 +199,138 @@ export function Inspector({ locale, defaultLocale, renderStyle }) {
         if (meta === undefined) {
             return scope === 'content' ? (_jsx("p", { className: "bd-inspector-empty", children: t('inspector.unknownComponent') })) : null;
         }
-        return (_jsx(PropsPanel, { node: node, meta: meta, scope: scope, locale: locale, defaultLocale: defaultLocale, disabled: disabled, onChange: write, onReset: reset, onSetValue: setValue, onFixed: fixed }));
+        return (_jsx(PropsPanel, { node: node, meta: meta, scope: scope, locale: locale, defaultLocale: defaultLocale, disabled: disabled, query: needle, othersMatch: scope === 'advanced' &&
+                (matches(t('inspector.attr.name')) ||
+                    matches(t('inspector.attr.anchor')) ||
+                    [
+                        'inspector.visibility.title',
+                        'inspector.condition.title',
+                        'inspector.position.title',
+                        'inspector.content.htmlElement',
+                        'inspector.css.title',
+                        'inspector.classes.title',
+                        'inspector.attributes.title',
+                        'inspector.author.off.title',
+                    ].some((key) => matches(t(key))) ||
+                    (node.visibleIf !== undefined && matches(t('inspector.attr.visibleIf')))), onChange: write, onReset: reset, onSetValue: setValue, onFixed: fixed }));
     };
-    return (_jsxs("div", { className: "bd-inspector", children: [_jsxs("header", { className: "bd-inspector-head", children: [_jsxs("div", { className: "bd-inspector-headline", children: [_jsx(ComponentIcon, { meta: meta, size: "md", className: "bd-inspector-icon" }), _jsx("h3", { className: "bd-inspector-title", children: meta?.label ?? node.type }), _jsxs("div", { className: "bd-inspector-actions", children: [_jsx(IconButton, { variant: "ghost", icon: "copy", label: t('inspector.duplicate'), disabled: disabled, onClick: () => report(store.dispatch({ type: 'node.duplicate', payload: { ids: selectedIds } })) }), _jsx(IconButton, { variant: "ghost", icon: "trash-2", label: t('inspector.delete'), disabled: disabled, onClick: () => report(store.dispatch({ type: 'node.remove', payload: { ids: selectedIds } })) })] })] }), _jsx(HeaderName, { nodeId: node.id, value: node.name ?? '', placeholder: meta?.label ?? node.type, disabled: disabled, onChange: setAttr }, node.id), count > 1 ? (_jsx("p", { className: "bd-inspector-count", children: `${count} ${t('inspector.selected')}` })) : null, locked ? _jsx("p", { className: "bd-inspector-locked", children: t('inspector.locked') }) : null] }), _jsx(TranslationBanner, { locale: locale, defaultLocale: defaultLocale }), _jsx(Tabs, { label: t('inspector.tabs'), items: [
-                    { value: 'content', label: t('inspector.tab.content'), content: propsPanel('content') },
+    const search = (_jsx(SearchField, { className: "bd-inspector-search", value: query, onChange: setQuery, label: t('inspector.search'), clearLabel: t('inspector.search'), placeholder: t('inspector.search.placeholder') }));
+    const menuItem = (id, icon, label, onSelect, danger = false) => (_jsxs("button", { type: "button", role: "menuitem", className: "bd-menu-item", "data-danger": danger ? '' : undefined, disabled: disabled, onClick: () => {
+            setMenuOpen(false);
+            onSelect();
+        }, children: [_jsx(Icon, { name: icon }), _jsx("span", { className: "bd-menu-item-label", children: label })] }, id));
+    return (_jsxs("div", { className: "bd-inspector", "data-state-controls": node.type.endsWith('/button') ||
+            Object.keys(meta?.props ?? {}).some((key) => ['href', 'link', 'onClick'].includes(key)) ||
+            Object.keys(node.styles?.state ?? {}).length > 0, children: [_jsxs("header", { className: "bd-inspector-head", children: [_jsxs("div", { className: "bd-inspector-headline", children: [_jsx("span", { className: "bd-inspector-icon", children: _jsx(ComponentIcon, { meta: meta, size: "md" }) }), _jsxs("div", { className: "bd-inspector-titles", children: [_jsx("h3", { className: "bd-inspector-title", children: meta?.label ?? node.type }), _jsx("small", { className: "bd-inspector-subtitle", children: subtitle })] }), _jsxs("div", { className: "bd-inspector-actions", children: [headerActions, _jsx(Popover, { open: menuOpen, onOpenChange: setMenuOpen, align: "end", label: t('inspector.moreActions'), contentClassName: "bd-menu", trigger: _jsx(IconButton, { variant: "ghost", icon: "ellipsis", label: t('inspector.moreActions'), "aria-haspopup": "menu" }), children: _jsxs(ActionMenu, { label: t('inspector.moreActions'), children: [menuItem('duplicate', 'copy', t('menu.duplicate'), () => {
+                                                    if (!refuseLocked())
+                                                        report(store.dispatch({ type: 'node.duplicate', payload: { ids: selectedIds } }));
+                                                }), canMove
+                                                    ? menuItem('move', 'corner-left-up', t('menu.moveTo'), () => {
+                                                        if (!refuseLocked())
+                                                            setMoving(true);
+                                                    })
+                                                    : null, menuItem('delete', 'trash-2', t('menu.delete'), () => {
+                                                    if (refuseLocked())
+                                                        return;
+                                                    if (onRemoveRequest !== undefined)
+                                                        onRemoveRequest({
+                                                            ids: selectedIds,
+                                                            hasDescendants: hasDescendants(doc, selectedIds),
+                                                        });
+                                                    else
+                                                        report(store.dispatch({ type: 'node.remove', payload: { ids: selectedIds } }));
+                                                }, true)] }) })] })] }), count > 1 ? (_jsx("p", { className: "bd-inspector-count", children: `${count} ${t('inspector.selected')}` })) : null, locked ? _jsx("p", { className: "bd-inspector-locked", children: t('inspector.locked') }) : null] }), _jsx(TranslationBanner, { locale: locale, defaultLocale: defaultLocale }), _jsx(Tabs, { label: t('inspector.tabs'), value: tab, onValueChange: (next) => {
+                    if (!isTab(next))
+                        return;
+                    setInnerTab(next);
+                    onTabChange?.(next);
+                }, items: [
+                    {
+                        value: 'content',
+                        icon: 'type',
+                        label: t('inspector.tab.content'),
+                        content: (_jsxs(_Fragment, { children: [search, propsPanel('content')] })),
+                    },
                     {
                         value: 'style',
+                        icon: 'image',
+                        modified: node.styles !== undefined && Object.keys(node.styles).length > 0,
                         label: t('inspector.tab.style'),
-                        content: renderStyle?.(node) ?? (_jsx("p", { className: "bd-inspector-empty", children: t('inspector.style.pending') })),
+                        content: (_jsxs(_Fragment, { children: [search, renderStyle?.(node, query) ?? (_jsx("p", { className: "bd-inspector-empty", children: t('inspector.style.pending') }))] })),
                     },
                     {
                         value: 'advanced',
+                        icon: 'braces',
                         label: t('inspector.tab.advanced'),
-                        content: (_jsxs(_Fragment, { children: [_jsx(AttrField, { nodeId: node.id, attr: "name", label: t('inspector.attr.name'), value: node.name ?? '', disabled: disabled, onChange: setAttr }, `${node.id}-name`), _jsx(AttrField, { nodeId: node.id, attr: "anchor", label: t('inspector.attr.anchor'), value: node.anchor ?? '', disabled: disabled, placeholder: "section-1", onChange: setAttr }, `${node.id}-anchor`), node.visibleIf !== undefined ? (_jsxs("div", { className: "bd-field", "data-attr": "visibleIf", children: [_jsx("span", { className: "bd-field-label", children: t('inspector.attr.visibleIf') }), _jsx("p", { className: "bd-field-chip", children: t('inspector.attr.visibleIfSet') }), _jsx(Button, { variant: "ghost", disabled: disabled, onClick: clearCondition, children: t('inspector.attr.visibleIfRemove') })] })) : null, propsPanel('advanced')] })),
+                        content: (_jsxs(_Fragment, { children: [search, Object.entries(meta?.props ?? {})
+                                    .filter(([key]) => ['element', 'as', 'level'].includes(key))
+                                    .map(([key, def]) => (_jsxs(AdvancedGroup, { hidden: !matches(t('inspector.content.htmlElement')) &&
+                                        !matches(t('inspector.content.tag')), title: t('inspector.content.htmlElement'), icon: "braces", searching: needle !== '', children: [renderControl(def, {
+                                            id: `${node.id}-${key}-tag`,
+                                            def,
+                                            label: t('inspector.content.tag'),
+                                            describedBy: undefined,
+                                            value: readProp(node, key, def, locale, defaultLocale).value,
+                                            disabled,
+                                            onChange: (value) => write(key, def, value),
+                                        }), _jsx("p", { className: "bd-field-hint", children: t('inspector.content.tagHelp') }), _jsx("p", { className: "bd-field-hint", children: _jsx("code", { children: interpolate(t('inspector.content.tagOnPage'), {
+                                                    tag: `<${key === 'level' ? 'h' : ''}${String(readProp(node, key, def, locale, defaultLocale).value)}>`,
+                                                }) }) })] }, key))), _jsxs(AdvancedGroup, { hidden: !matches(t('inspector.visibility.title')), title: t('inspector.visibility.title'), icon: "eye", searching: needle !== '', children: [_jsx("p", { className: "bd-field-label", children: t('inspector.visibility.hideOnDevice') }), _jsx("div", { className: "bd-visibility-chips", children: ['desktop', 'tablet', 'mobile'].map((device) => {
+                                                const layer = device === 'desktop' ? {} : { bp: device };
+                                                const hidden = (device === 'desktop' ? node.styles?.base : node.styles?.bp?.[device])
+                                                    ?.visibility?.hidden ?? false;
+                                                return (_jsx(Button, { disabled: styleDisabled, "aria-pressed": hidden, "aria-label": interpolate(t(hidden
+                                                        ? 'inspector.visibility.showOn'
+                                                        : 'inspector.visibility.hideOn'), { device: t(`inspector.device.${device}`) }), onClick: () => report(store.dispatch({
+                                                        type: 'node.setStyle',
+                                                        payload: {
+                                                            id: node.id,
+                                                            layer,
+                                                            group: 'visibility',
+                                                            property: 'hidden',
+                                                            value: !hidden,
+                                                        },
+                                                    })), children: t(`inspector.device.${device}`) }, device));
+                                            }) }), _jsx("p", { className: "bd-field-hint", children: t('inspector.visibility.help') })] }), _jsxs(AdvancedGroup, { hidden: !matches(t('inspector.condition.title')), title: t('inspector.condition.title'), icon: "sliders-vertical", searching: needle !== '', children: [_jsx(ValueEditor, { def: prop.boolean(), label: t('inspector.condition.showWhen'), raw: valueSchema(z.unknown()).safeParse(node.visibleIf).data, disabled: disabled, staticControl: null, onSet: (value) => {
+                                                if (value.kind !== 'static')
+                                                    report(store.dispatch({
+                                                        type: 'node.setAttr',
+                                                        payload: { id: node.id, key: 'visibleIf', value },
+                                                    }));
+                                            }, onFixed: clearCondition }), node.visibleIf !== undefined ? (_jsx(Button, { variant: "ghost", disabled: disabled, onClick: clearCondition, children: t('inspector.attr.visibleIfRemove') })) : null] }), _jsxs(AdvancedGroup, { hidden: !matches(t('inspector.position.title')), title: t('inspector.position.title'), icon: "move", searching: needle !== '', children: [_jsx(Select, { label: t('inspector.position.label'), value: String(node.styles?.base?.layout?.position ?? 'static'), disabled: styleDisabled, options: ['static', 'relative', 'absolute', 'sticky', 'fixed'].map((value) => ({ value, label: t(`inspector.position.${value}`) })), onValueChange: (value) => report(store.dispatch({
+                                                type: 'node.setStyle',
+                                                payload: {
+                                                    id: node.id,
+                                                    layer: {},
+                                                    group: 'layout',
+                                                    property: 'position',
+                                                    value,
+                                                },
+                                            })) }), ['top', 'right', 'bottom', 'left', 'zIndex'].map((side) => (_jsxs("label", { className: "bd-advanced-position", htmlFor: `${node.id}-position-${side}`, children: [t(`inspector.position.${side}`), _jsx(Input, { id: `${node.id}-position-${side}`, "aria-label": t(`inspector.position.${side}`), disabled: styleDisabled, defaultValue: String(side === 'zIndex'
+                                                        ? (node.styles?.base?.layout?.zIndex ?? '')
+                                                        : (node.styles?.base?.layout?.inset?.[side] ?? '')), onBlur: (event) => {
+                                                        const value = event.target.value;
+                                                        const payload = {
+                                                            id: node.id,
+                                                            layer: {},
+                                                            group: 'layout',
+                                                            property: side === 'zIndex' ? 'zIndex' : 'inset',
+                                                            ...(side === 'zIndex' ? {} : { side }),
+                                                        };
+                                                        report(store.dispatch(value === ''
+                                                            ? { type: 'node.unsetStyle', payload }
+                                                            : {
+                                                                type: 'node.setStyle',
+                                                                payload: {
+                                                                    ...payload,
+                                                                    value: side === 'zIndex' ? Number(value) : value,
+                                                                },
+                                                            }));
+                                                    } }, `${node.id}-${side}-${String(side === 'zIndex' ? node.styles?.base?.layout?.zIndex : node.styles?.base?.layout?.inset?.[side])}`)] }, side)))] }), _jsxs(AdvancedGroup, { hidden: !matches(t('inspector.anchor.title')) &&
+                                        !matches(t('inspector.attr.name')) &&
+                                        !matches(t('inspector.attr.anchor')), title: t('inspector.anchor.title'), icon: "link", searching: needle !== '', children: [matches(t('inspector.attr.name')) ? (_jsx(AttrField, { nodeId: node.id, attr: "name", label: t('inspector.attr.name'), value: node.name ?? '', disabled: disabled, onChange: setAttr }, `${node.id}-name`)) : null, matches(t('inspector.attr.anchor')) ? (_jsx(AttrField, { nodeId: node.id, attr: "anchor", label: t('inspector.attr.anchor'), value: node.anchor ?? '', disabled: disabled, placeholder: t('inspector.htmlId.placeholder'), onChange: setAttr }, `${node.id}-anchor`)) : null, node.anchor ? (_jsx("p", { className: "bd-field-hint", children: interpolate(t('inspector.anchor.help'), { link: `#${node.anchor}` }) })) : null] }), store.authorCode ? (_jsxs(_Fragment, { children: [_jsx(AdvancedGroup, { hidden: !matches(t('inspector.css.title')), title: t('inspector.css.title'), icon: "braces", searching: needle !== '', children: _jsx(CssField, { node: node, disabled: styleDisabled }, node.id) }), _jsx(AdvancedGroup, { hidden: !matches(t('inspector.classes.title')), title: t('inspector.classes.title'), icon: "braces", searching: needle !== '', children: _jsx(ClassesField, { node: node, disabled: styleDisabled }, node.id) }), _jsx(AdvancedGroup, { hidden: !matches(t('inspector.attributes.title')), title: t('inspector.attributes.title'), icon: "braces", searching: needle !== '', children: _jsx(AttributesField, { node: node, disabled: styleDisabled }, node.id) })] })) : (_jsx(AdvancedGroup, { hidden: !matches(t('inspector.author.off.title')), title: t('inspector.author.off.title'), icon: "lock", searching: needle !== '', children: _jsx(AuthorOffNote, { held: node.customCss !== undefined ||
+                                            node.classes !== undefined ||
+                                            node.attributes !== undefined }) })), propsPanel('advanced')] })),
                     },
-                ] }), _jsx("div", { role: "status", className: "bd-inspector-notice", children: notice })] }));
+                ] }), _jsx("div", { role: "status", className: "bd-inspector-notice", children: notice }), canMove ? _jsx(MoveToDialog, { open: moving, onOpenChange: setMoving, ids: selectedIds }) : null] }));
 }