@webikon/webentor-core 0.9.13 → 0.10.0

package/core-js/blocks-filters/responsive-settings/settings/presets/presets.ts

@@ -0,0 +1,52 @@
+/**
+ * Preset definitions - one-click layout configurations.
+ *
+ * Core intentionally ships no built-in presets because layout shortcuts are
+ * project-specific. Themes/plugins are expected to provide their own preset
+ * catalog through `webentor.core.responsiveSettings.layoutPresets` in the
+ * editor bootstrap where they already register `twTheme` and breakpoints.
+ *
+ * Each preset specifies which attribute values to set and optionally includes
+ * custom CSS classes for layouts that cannot be expressed with pure Tailwind
+ * utilities (for example: flex-wrap + gap + equal columns).
+ *
+ * Presets are decomposable: selecting one fills in the individual settings
+ * below, which remain editable. The `_preset` marker only tracks which preset
+ * was last applied.
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { LayoutPreset } from '../../types';
+
+// Intentionally empty: themes/projects own the preset catalog.
+export const layoutPresets: LayoutPreset[] = [];
+
+const clonePreset = (preset: LayoutPreset): LayoutPreset => ({
+  ...preset,
+  applies: Object.fromEntries(
+    Object.entries(preset.applies).map(([attributeKey, propertyMap]) => [
+      attributeKey,
+      Object.fromEntries(
+        Object.entries(propertyMap).map(([propertyName, propertyValue]) => [
+          propertyName,
+          {
+            value: { ...propertyValue.value },
+          },
+        ]),
+      ),
+    ]),
+  ),
+  customClasses: preset.customClasses ? [...preset.customClasses] : undefined,
+});
+
+export const getLayoutPresets = (
+  blockName: string,
+  twTheme: WebentorConfig['theme'],
+): LayoutPreset[] =>
+  applyFilters(
+    'webentor.core.responsiveSettings.layoutPresets',
+    layoutPresets.map(clonePreset),
+    blockName,
+    twTheme,
+  ) as LayoutPreset[];

package/core-js/blocks-filters/responsive-settings/settings/presets/registration.ts

@@ -0,0 +1,53 @@
+/**
+ * Presets module registration.
+ *
+ * panelGroup: displayLayout, order: 0 (renders first, above layout/sizing)
+ * Provides one-click layout configurations that populate the individual
+ * settings below.
+ *
+ * Support keys: dedicated 'presets' opt-in plus 'layout' so existing
+ * blocks keep the current preset UI behavior during the v2 support-key migration.
+ */
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+
+/**
+ * Preset custom classes are stored in _presetClasses and output directly.
+ * These are non-decomposable classes needed for edge cases like
+ * flex-wrap + gap + equal columns.
+ */
+const generatePresetClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  _context: ClassGenContext,
+): string[] => {
+  if (breakpoint !== 'basic') return [];
+
+  const presetClasses = attributes?._presetClasses;
+  if (!Array.isArray(presetClasses)) return [];
+
+  return presetClasses;
+};
+
+/**
+ * Presets are registered for attribute schema + class generation only.
+ * The UI (PresetSettings) is rendered directly by DisplayLayoutPanel
+ * above the breakpoint tabs, since presets apply globally.
+ */
+registry.register({
+  name: 'presets',
+  panelGroup: 'displayLayout',
+  order: 0,
+  attributeKey: '_preset',
+  supportKey: ['presets', 'layout'],
+  attributeSchema: {
+    _preset: { type: 'string', default: '' },
+    _presetClasses: { type: 'array', default: [] },
+  },
+  SettingsComponent: () => null,
+  generateClasses: generatePresetClasses,
+  hasActiveSettings: () => {
+    // Presets are rendered above the tabs (non-responsive) — never flag a tab
+    return false;
+  },
+});

package/core-js/blocks-filters/responsive-settings/settings/presets/settings.tsx

@@ -0,0 +1,100 @@
+/**
+ * PresetSettings — Quick layout preset buttons.
+ *
+ * Rendered at the top of the DisplayLayoutPanel (order: 0).
+ * Selecting a preset populates the underlying layout/flexbox/grid
+ * settings and marks the _preset attribute for tracking.
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '../../../../_utils';
+import { BlockPanelProps, LayoutPreset } from '../../types';
+import { getLayoutPresets } from './presets';
+
+/**
+ * Apply a preset's attribute values to the current block.
+ * Merges preset values into existing attributes rather than replacing,
+ * so non-preset settings are preserved.
+ */
+const applyPreset = (
+  preset: LayoutPreset,
+  attributes: Record<string, any>,
+  setAttributes: (attrs: Record<string, any>) => void,
+) => {
+  let newAttrs = { ...attributes };
+
+  // Apply each module's preset values
+  for (const [attrKey, presetValues] of Object.entries(preset.applies)) {
+    for (const [propName, propValue] of Object.entries(presetValues)) {
+      const val = propValue as any;
+      if (val?.value) {
+        for (const [bp, bpValue] of Object.entries(val.value)) {
+          newAttrs = setImmutably(
+            newAttrs,
+            [attrKey, propName, 'value', bp],
+            bpValue,
+          );
+        }
+      }
+    }
+  }
+
+  // Store preset marker and custom classes
+  newAttrs._preset = preset.id;
+  if (preset.customClasses?.length) {
+    newAttrs._presetClasses = preset.customClasses;
+  } else {
+    newAttrs._presetClasses = undefined;
+  }
+
+  setAttributes(newAttrs);
+};
+
+export const PresetSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  twTheme,
+}: BlockPanelProps) => {
+  const activePreset = attributes?._preset;
+  const presets = getLayoutPresets(name, twTheme);
+
+  if (!presets.length) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginTop: '8px', marginBottom: '8px' }}>
+      <p
+        style={{
+          fontSize: '11px',
+          textTransform: 'uppercase',
+          marginBottom: '8px',
+          color: '#757575',
+        }}
+      >
+        {__('Quick Layout Presets', 'webentor')}
+      </p>
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+        }}
+      >
+        {presets.map((preset) => (
+          <Button
+            key={preset.id}
+            variant={activePreset === preset.id ? 'primary' : 'secondary'}
+            size="small"
+            onClick={() => applyPreset(preset, attributes, setAttributes)}
+            title={preset.description}
+          >
+            {preset.label}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/core-js/blocks-filters/responsive-settings/settings/shared/gap-values.ts

@@ -0,0 +1,16 @@
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { SelectOption } from '../../types';
+import { createTwThemeValues, spacingLabel } from './tw-values';
+
+/**
+ * Shared gap value generator used by both grid and flexbox properties.
+ */
+export const getGapValues = (
+  axis: '' | 'x' | 'y' = '',
+  twTheme: WebentorConfig['theme'],
+): SelectOption[] => {
+  const prefix = axis ? `gap-${axis}` : 'gap';
+  return createTwThemeValues(twTheme, 'gap', prefix, {
+    labelFormatter: spacingLabel,
+  });
+};

package/core-js/blocks-filters/responsive-settings/settings/shared/layout-values.ts

@@ -0,0 +1,56 @@
+import { __ } from '@wordpress/i18n';
+
+import { SelectOption } from '../../types';
+
+/**
+ * Shared layout value lists used by both flexbox and grid properties.
+ * Eliminates the 5 identical function pairs that were copy-pasted between
+ * flexbox/properties.ts and grid/properties.ts.
+ */
+
+export const getJustifyContentValues = (): SelectOption[] => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Normal', 'webentor'), value: 'justify-normal' },
+  { label: __('Flex Start', 'webentor'), value: 'justify-start' },
+  { label: __('Flex End', 'webentor'), value: 'justify-end' },
+  { label: __('Center', 'webentor'), value: 'justify-center' },
+  { label: __('Space Between', 'webentor'), value: 'justify-between' },
+  { label: __('Space Around', 'webentor'), value: 'justify-around' },
+  { label: __('Space Evenly', 'webentor'), value: 'justify-evenly' },
+  { label: __('Stretch', 'webentor'), value: 'justify-stretch' },
+];
+
+export const getAlignItemsValues = (): SelectOption[] => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Flex Start', 'webentor'), value: 'items-start' },
+  { label: __('Flex End', 'webentor'), value: 'items-end' },
+  { label: __('Center', 'webentor'), value: 'items-center' },
+  { label: __('Baseline', 'webentor'), value: 'items-baseline' },
+  { label: __('Stretch', 'webentor'), value: 'items-stretch' },
+];
+
+export const getAlignContentValues = (): SelectOption[] => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Normal', 'webentor'), value: 'content-normal' },
+  { label: __('Flex Start', 'webentor'), value: 'content-start' },
+  { label: __('Flex End', 'webentor'), value: 'content-end' },
+  { label: __('Center', 'webentor'), value: 'content-center' },
+  { label: __('Space Between', 'webentor'), value: 'content-between' },
+  { label: __('Space Around', 'webentor'), value: 'content-around' },
+  { label: __('Space Evenly', 'webentor'), value: 'content-evenly' },
+  { label: __('Baseline', 'webentor'), value: 'content-baseline' },
+  { label: __('Stretch', 'webentor'), value: 'content-stretch' },
+];
+
+export const getOrderValues = (): SelectOption[] => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Order First', 'webentor'), value: 'order-first' },
+  { label: __('Order Last', 'webentor'), value: 'order-last' },
+  { label: __('Order None', 'webentor'), value: 'order-none' },
+  { label: __('Order 0', 'webentor'), value: 'order-0' },
+  { label: __('Order 1', 'webentor'), value: 'order-1' },
+  { label: __('Order 2', 'webentor'), value: 'order-2' },
+  { label: __('Order 3', 'webentor'), value: 'order-3' },
+  { label: __('Order 4', 'webentor'), value: 'order-4' },
+  { label: __('Order 5', 'webentor'), value: 'order-5' },
+];

package/core-js/blocks-filters/responsive-settings/settings/shared/tw-values.ts

@@ -0,0 +1,107 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { SelectOption, SelectOptionGroup } from '../../types';
+import { getPixelFromRemValue } from '../../utils';
+
+export interface TwThemeValueOptions {
+  sort?: boolean;
+  labelFormatter?: (key: string, rawValue: string) => string;
+}
+
+const defaultLabelFormatter = (key: string, rawValue: string) =>
+  `${key} (${getPixelFromRemValue(rawValue)})`;
+
+/**
+ * Creates a SelectOption[] from a Tailwind theme config section.
+ * Replaces the 13+ near-identical getXValues() functions scattered
+ * across display, flexbox, grid, spacing, and border property files.
+ *
+ * @param twTheme  Tailwind resolved theme
+ * @param themeKey Key inside twTheme (e.g. 'height', 'spacing', 'gap')
+ * @param prefix   CSS utility prefix (e.g. 'h', 'w', 'mt', 'gap-x')
+ * @param opts     Sorting and label formatting overrides
+ */
+export const createTwThemeValues = (
+  twTheme: WebentorConfig['theme'],
+  themeKey: string,
+  prefix: string,
+  opts?: TwThemeValueOptions,
+): SelectOption[] => {
+  const themeObj = twTheme?.[themeKey];
+  if (!themeObj) return [{ label: __('None selected', 'webentor'), value: '' }];
+
+  const keys = Object.keys(themeObj);
+  if (opts?.sort !== false) {
+    // Sort by the resolved CSS value (e.g. 0.25rem → 4, 1rem → 16)
+    keys.sort(
+      (a, b) => (parseFloat(themeObj[a]) || 0) - (parseFloat(themeObj[b]) || 0),
+    );
+  }
+
+  const formatter = opts?.labelFormatter ?? defaultLabelFormatter;
+
+  const values = keys.map((key) => ({
+    label: formatter(key, themeObj[key]),
+    value: prefix ? `${prefix}-${key}` : key,
+  }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+/** Matches pure integers (96) and floats (3.5) — rejects units like 3rem, 100% */
+const PURE_NUMBER = /^\d+(\.\d+)?$/;
+
+/**
+ * Creates grouped SelectOptionGroup[] splitting numeric vs string values.
+ * Numeric = theme key is a pure integer or float (e.g. "96", "3.5").
+ * String  = everything else (e.g. "auto", "full", "screen", "px").
+ */
+export const createGroupedTwThemeValues = (
+  twTheme: WebentorConfig['theme'],
+  themeKey: string,
+  prefix: string,
+  opts?: TwThemeValueOptions,
+): SelectOptionGroup[] => {
+  const themeObj = twTheme?.[themeKey];
+  if (!themeObj) return [];
+
+  const keys = Object.keys(themeObj);
+  if (opts?.sort !== false) {
+    keys.sort(
+      (a, b) => (parseFloat(themeObj[a]) || 0) - (parseFloat(themeObj[b]) || 0),
+    );
+  }
+
+  const formatter = opts?.labelFormatter ?? defaultLabelFormatter;
+  const numeric: SelectOption[] = [];
+  const keyword: SelectOption[] = [];
+
+  for (const key of keys) {
+    const rawValue = themeObj[key];
+    const option: SelectOption = {
+      label: formatter(key, rawValue),
+      value: prefix ? `${prefix}-${key}` : key,
+    };
+    if (PURE_NUMBER.test(key)) {
+      numeric.push(option);
+    } else {
+      keyword.push(option);
+    }
+  }
+
+  const groups: SelectOptionGroup[] = [];
+  if (numeric.length)
+    groups.push({ label: __('Numeric', 'webentor'), options: numeric });
+  if (keyword.length)
+    groups.push({ label: __('Keyword', 'webentor'), options: keyword });
+  return groups;
+};
+
+/** Label formatter for spacing-scale keys (key × 4 = px) */
+export const spacingLabel = (key: string): string => `${Number(key) * 4}px`;

package/core-js/blocks-filters/responsive-settings/settings/sizing/index.ts

@@ -0,0 +1,4 @@
+import './registration';
+
+export { SizingSettings } from './settings';
+export { getSizingProperties } from './properties';

package/core-js/blocks-filters/responsive-settings/settings/sizing/properties.ts

@@ -0,0 +1,71 @@
+/**
+ * Sizing properties — width, height, min/max dimensions.
+ *
+ * These were previously lumped under the 'display' attribute alongside
+ * the CSS display property. Now they live in their own 'sizing' attribute
+ * with a dedicated support key.
+ */
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { PropertyDefinition } from '../../types';
+import { createTwThemeValues } from '../shared/tw-values';
+
+export const getSizingProperties = (
+  twTheme: WebentorConfig['theme'],
+): PropertyDefinition[] => [
+  {
+    label: __('Height', 'webentor'),
+    name: 'height',
+    values: createTwThemeValues(twTheme, 'height', 'h'),
+    groupedValues: true,
+  },
+  {
+    label: __('Min Height', 'webentor'),
+    name: 'min-height',
+    values: createTwThemeValues(twTheme, 'minHeight', 'min-h'),
+    groupedValues: true,
+  },
+  {
+    label: __('Max Height', 'webentor'),
+    name: 'max-height',
+    values: createTwThemeValues(twTheme, 'maxHeight', 'max-h'),
+    groupedValues: true,
+  },
+  {
+    label: __('Width', 'webentor'),
+    name: 'width',
+    values: createTwThemeValues(twTheme, 'width', 'w'),
+    groupedValues: true,
+  },
+  {
+    label: __('Min Width', 'webentor'),
+    name: 'min-width',
+    values: createTwThemeValues(twTheme, 'minWidth', 'min-w'),
+    groupedValues: true,
+  },
+  {
+    label: __('Max Width', 'webentor'),
+    name: 'max-width',
+    values: createTwThemeValues(twTheme, 'maxWidth', 'max-w'),
+    groupedValues: true,
+  },
+];
+
+export const SIZING_PROPERTY_NAMES = [
+  'height',
+  'min-height',
+  'max-height',
+  'width',
+  'min-width',
+  'max-width',
+];
+
+export const hasSizingSettingsForBreakpoint = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): boolean => {
+  return SIZING_PROPERTY_NAMES.some(
+    (prop) => !!attributes?.sizing?.[prop]?.value?.[breakpoint],
+  );
+};

package/core-js/blocks-filters/responsive-settings/settings/sizing/registration.ts

@@ -0,0 +1,52 @@
+/**
+ * Sizing module registration.
+ *
+ * panelGroup: displayLayout, order: 20
+ * Handles width, height, min/max dimensions.
+ * Support key: 'sizing'
+ */
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import {
+  hasSizingSettingsForBreakpoint,
+  SIZING_PROPERTY_NAMES,
+} from './properties';
+import { SizingSettings } from './settings';
+
+const generateSizingClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  _context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+
+  const sizingAttr = attributes?.sizing || {};
+
+  for (const propName of SIZING_PROPERTY_NAMES) {
+    const propData = sizingAttr[propName];
+    if (!propData?.value) continue;
+    const bpValue = propData.value[breakpoint];
+    if (!bpValue) continue;
+
+    if (attributes?.slider?.enabled?.value?.[breakpoint]) continue;
+
+    const twBreakpoint = breakpoint === 'basic' ? '' : `${breakpoint}:`;
+    classes.push(`${twBreakpoint}${bpValue}`);
+  }
+
+  return classes;
+};
+
+registry.register({
+  name: 'sizing',
+  panelGroup: 'displayLayout',
+  order: 20,
+  attributeKey: 'sizing',
+  supportKey: 'sizing',
+  attributeSchema: {
+    sizing: { type: 'object', default: {} },
+  },
+  SettingsComponent: SizingSettings,
+  generateClasses: generateSizingClasses,
+  hasActiveSettings: hasSizingSettingsForBreakpoint,
+});

package/core-js/blocks-filters/responsive-settings/settings/sizing/settings.tsx

@@ -0,0 +1,96 @@
+/**
+ * SizingSettings — width, height, min/max dimension controls.
+ *
+ * Rendered inside the DisplayLayoutPanel at order: 20.
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { Fragment, useMemo } from '@wordpress/element';
+
+import { camelize } from '../../../../_utils';
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { ResponsiveSelectGroup } from '../../components/ResponsiveSelectGroup';
+import {
+  PropertyDefinition,
+  SelectOptionGroup,
+  SettingsComponentProps,
+} from '../../types';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { createGroupedTwThemeValues } from '../shared/tw-values';
+import { getSizingProperties } from './properties';
+
+export const SizingSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  if (!attributes?.sizing) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+  const sizingProperties = getSizingProperties(twTheme);
+
+  /** Property name → [themeKey, prefix] for grouped value generation */
+  const themeKeyMap: Record<string, [string, string]> = {
+    height: ['height', 'h'],
+    'min-height': ['minHeight', 'min-h'],
+    'max-height': ['maxHeight', 'max-h'],
+    width: ['width', 'w'],
+    'min-width': ['minWidth', 'min-w'],
+    'max-width': ['maxWidth', 'max-w'],
+  };
+
+  const valueGroups = useMemo(() => {
+    const groups: Record<string, SelectOptionGroup[]> = {};
+    for (const prop of sizingProperties) {
+      if (!prop.groupedValues) continue;
+      const mapping = themeKeyMap[prop.name];
+      if (mapping) {
+        groups[prop.name] = createGroupedTwThemeValues(
+          twTheme,
+          mapping[0],
+          mapping[1],
+        );
+      }
+    }
+    return groups;
+  }, [twTheme]);
+
+  const webentorSupports = getBlockSupport(name, 'webentor') as
+    | Record<string, any>
+    | undefined;
+  const supports = webentorSupports?.sizing;
+
+  const isPropertyVisible = (property: PropertyDefinition) => {
+    if (supports === true) return true;
+    return supports?.[camelize(property.name)] === true;
+  };
+
+  const attributeKey = 'sizing';
+
+  return (
+    <Fragment>
+      <div style={{ marginTop: '16px' }}>
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey={attributeKey}
+          properties={sizingProperties}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+          isPropertyVisible={isPropertyVisible}
+          valueGroups={valueGroups}
+        />
+      </div>
+    </Fragment>
+  );
+};

package/core-js/blocks-filters/responsive-settings/settings/spacing/index.ts

@@ -1,3 +1,8 @@
-export { SpacingPanel } from './panel';
+import './registration';
+
 export { SpacingSettings } from './settings';
-export { getSpacingProperties } from './properties';
+export {
+  getSpacingProperties,
+  getMarginSides,
+  getPaddingSides,
+} from './properties';

package/core-js/blocks-filters/responsive-settings/settings/spacing/panel.tsx

@@ -1,45 +1,5 @@
-import { PanelBody, TabPanel } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
-
-import { SpacingSettings } from './settings';
-
-export const SpacingPanel = (props: BlockPanelProps) => {
-  const { attributes, breakpoints, twTheme } = props;
-
-  if (!attributes?.spacing) {
-    return null;
-  }
-
-  const hasSpacingSettingsForBreakpoint = (breakpoint: string): boolean => {
-    return !!(
-      attributes?.spacing?.['margin-top']?.value?.[breakpoint] ||
-      attributes?.spacing?.['margin-bottom']?.value?.[breakpoint] ||
-      attributes?.spacing?.['margin-left']?.value?.[breakpoint] ||
-      attributes?.spacing?.['margin-right']?.value?.[breakpoint] ||
-      attributes?.spacing?.['padding-top']?.value?.[breakpoint] ||
-      attributes?.spacing?.['padding-bottom']?.value?.[breakpoint] ||
-      attributes?.spacing?.['padding-left']?.value?.[breakpoint] ||
-      attributes?.spacing?.['padding-right']?.value?.[breakpoint]
-    );
-  };
-
-  return (
-    <PanelBody title={__('Spacing Settings', 'webentor')} initialOpen={false}>
-      <TabPanel
-        activeClass="is-active"
-        className="w-responsive-settings-tabs"
-        initialTabName={breakpoints[0]}
-        tabs={breakpoints.map((breakpoint) => ({
-          name: breakpoint,
-          title: `${breakpoint}${hasSpacingSettingsForBreakpoint(breakpoint) ? '*' : ''}`, // Add * if spacing is set on this breakpoint
-        }))}
-      >
-        {(tab) => (
-          <SpacingSettings {...props} breakpoint={tab.name} twTheme={twTheme} />
-        )}
-      </TabPanel>
-    </PanelBody>
-  );
-};
+/**
+ * @deprecated — SpacingPanel is now provided by panels/SpacingPanel.tsx.
+ * This file is kept for backward compat with any external imports.
+ */
+export { SpacingPanel } from '../../panels/SpacingPanel';