[Do NOT Merge] Mini editor widget

.eslintrc.cjs

@@ -56,7 +56,7 @@ module.exports = {
     '*.config.js',
     '**/templates-as-a-service/library/',
     'express/code/libs/color-components/**',
-    'express/code/scripts/color-shared/spectrum/**',
+    'express/code/scripts/shared/spectrum/**',
     'express/code/scripts/color-shared/components/**',
     'express/code/scripts/widgets/**',
   ],

express/code/blocks/color-blindness/color-blindness.js

@@ -5,7 +5,7 @@ import { createColorConflictsAdapter } from '../../scripts/color-shared/adapters
 import ColorThemeExpressController from '../../scripts/color-shared/controllers/ColorThemeExpressController.js';
 import { createStripContainerRenderer } from '../../scripts/color-shared/renderers/createStripContainerRenderer.js';
 import { getConflictPairs, TYPE_ORDER } from '../../scripts/color-shared/services/createColorBlindnessService.js';
-import { announceToScreenReader } from '../../scripts/color-shared/spectrum/utils/a11y.js';
+import { announceToScreenReader } from '../../scripts/shared/spectrum/utils/a11y.js';
 import { createColorPaletteParamApi } from '../../scripts/color-shared/utils/utilities.js';
 import adoptHeadline from '../../scripts/color-shared/utils/adoptHeadline.js';
 import loadColorBlindnessPlaceholders from '../../scripts/color-shared/i18n/loadColorBlindnessPlaceholders.js';

express/code/blocks/color-contrast-checker/renderers/components/createColorInput.js

@@ -1,8 +1,8 @@
 import { createTag } from '../../../../scripts/utils.js';
 import { createContrastCheckerPlaceholders } from '../../utils/placeholders.js';
-import { createThemeWrapper } from '../../../../scripts/color-shared/spectrum/utils/theme.js';
-import { trapFocus } from '../../../../scripts/color-shared/spectrum/utils/a11y.js';
-import { loadPicker } from '../../../../scripts/color-shared/spectrum/load-spectrum.js';
+import { createThemeWrapper } from '../../../../scripts/shared/spectrum/utils/theme.js';
+import { trapFocus } from '../../../../scripts/shared/spectrum/utils/a11y.js';
+import { loadPicker } from '../../../../scripts/shared/spectrum/load-spectrum.js';
 import {
   isMobileOrTabletViewport,
   isMobileViewport,

express/code/blocks/color-contrast-checker/renderers/createCheckerRenderer.js

@@ -1,14 +1,14 @@
 import { createTag } from '../../../scripts/utils.js';
 import createBaseRenderer from '../../../scripts/color-shared/renderers/createBaseRenderer.js';
-import { announceToScreenReader } from '../../../scripts/color-shared/spectrum/index.js';
+import { announceToScreenReader } from '../../../scripts/shared/spectrum/index.js';
 import { ensureHash, isMobileOrTabletViewport, isMobileViewport } from '../../../scripts/color-shared/utils/utilities.js';
 import { generateTints, hexToRgb, rgbToHsv, hsvToRgb, rgbToHex } from '../utils/contrastUtils.js';
 import createSuggestionsTab from './components/createSuggestionsTab.js';
 import createSetRatioTab from './components/createSetRatioTab.js';
 import { createColorInput } from './components/createColorInput.js';
-import { createExpressTabs } from '../../../scripts/color-shared/spectrum/components/express-tabs.js';
-import { loadActionButton, loadBadge, loadTooltip } from '../../../scripts/color-shared/spectrum/load-spectrum.js';
-import { createThemeWrapper } from '../../../scripts/color-shared/spectrum/utils/theme.js';
+import { createExpressTabs } from '../../../scripts/shared/spectrum/components/express-tabs.js';
+import { loadActionButton, loadBadge, loadTooltip } from '../../../scripts/shared/spectrum/load-spectrum.js';
+import { createThemeWrapper } from '../../../scripts/shared/spectrum/utils/theme.js';
 import { createContrastCheckerPlaceholders } from '../utils/placeholders.js';
 import { FAIL, createDefaultActionMenuConfig } from '../utils/contrastConstants.js';
 import { createColorChannelSliderAdapter } from '../../../scripts/color-shared/adapters/litComponentAdapters.js';

express/code/blocks/color-explore/color-explore.js

@@ -12,7 +12,7 @@ import { buildPaletteEditUrl, decorateAnalyticsAttributes } from '../../scripts/
 import { createFiltersComponent } from '../../scripts/color-shared/components/createFiltersComponent.js';
 import { createLoadingScreenComponent } from '../../scripts/color-shared/components/createLoadingScreenComponent.js';
 import loadMiloStyle from '../../scripts/color-shared/utils/loadMiloStyle.js';
-import { loadIconsRail } from '../../scripts/color-shared/spectrum/load-spectrum.js';
+import { loadIconsRail } from '../../scripts/shared/spectrum/load-spectrum.js';
 import loadColorExplorePlaceholders from '../../scripts/color-shared/i18n/loadColorExplorePlaceholders.js';
 import loadColorSwatchRailPlaceholders from '../../scripts/color-shared/i18n/loadColorSwatchRailPlaceholders.js';
 import loadColorFiltersPlaceholders from '../../scripts/color-shared/i18n/loadColorFiltersPlaceholders.js';

express/code/blocks/color-explore/renderers/createGradientsRenderer.js

@@ -2,8 +2,8 @@ import { createTag } from '../../../scripts/utils.js';
 import createBaseRenderer from './createBaseRenderer.js';
 import { createGradientStripElements } from '../../../scripts/color-shared/components/gradients/gradient-strip.js';
 import { createLoadMoreComponent } from '../../../scripts/color-shared/components/createLoadMoreComponent.js';
-import { loadIconsRail } from '../../../scripts/color-shared/spectrum/load-spectrum.js';
-import { createExpressTooltip } from '../../../scripts/color-shared/spectrum/components/express-tooltip.js';
+import { loadIconsRail } from '../../../scripts/shared/spectrum/load-spectrum.js';
+import { createExpressTooltip } from '../../../scripts/shared/spectrum/components/express-tooltip.js';
 import { decorateAnalyticsAttributes, interpolate } from '../../../scripts/color-shared/utils/utilities.js';
 import { createLoadingScreenComponent } from '../../../scripts/color-shared/components/createLoadingScreenComponent.js';
 import { createColorExplorePlaceholders } from '../../../scripts/color-shared/i18n/loadColorExplorePlaceholders.js';

express/code/blocks/color-extract/color-extract.js

@@ -6,7 +6,7 @@ import {
 import parseBlockConfig from './helpers/parseConfig.js';
 import createHistoryManager from './helpers/historyManager.js';
 import { createUploadDropzone } from '../../scripts/color-shared/components/image-upload/image-upload.js';
-import { showExpressToast } from '../../scripts/color-shared/spectrum/components/express-toast.js';
+import { showExpressToast } from '../../scripts/shared/spectrum/components/express-toast.js';
 import { decorateAnalyticsAttributes, createColorPaletteParamApi, PARAM_NAME, isMobileOrTabletViewport } from '../../scripts/color-shared/utils/utilities.js';
 import loadColorExtractPlaceholders, { DEFAULT_PLACEHOLDERS as COLOR_EXTRACT_DEFAULTS } from '../../scripts/color-shared/i18n/loadColorExtractPlaceholders.js';
 import loadImageUploadPlaceholders, { DEFAULT_PLACEHOLDERS as IMAGE_UPLOAD_DEFAULTS } from '../../scripts/color-shared/i18n/loadImageUploadPlaceholders.js';

express/code/blocks/color-extract/helpers/toolbar.js

@@ -1,5 +1,5 @@
 import { createTag, getLibs } from '../../../scripts/utils.js';
-import { createExpressTooltip } from '../../../scripts/color-shared/spectrum/components/express-tooltip.js';
+import { createExpressTooltip } from '../../../scripts/shared/spectrum/components/express-tooltip.js';
 import { UNDO_ICON, REDO_ICON } from '../../../scripts/color-shared/components/actionMenuIcons.js';
 import { decorateAnalyticsAttributes } from '../../../scripts/color-shared/utils/utilities.js';
 import { DEFAULT_PLACEHOLDERS as COLOR_EXTRACT_DEFAULTS } from '../../../scripts/color-shared/i18n/loadColorExtractPlaceholders.js';

express/code/blocks/color-libraries/color-libraries.js

@@ -5,12 +5,12 @@ import {
   LIBRARY_SIZE,
   LIBRARY_VIEW,
 } from '../../scripts/color-shared/components/libraries/createLibrariesComponent.js';
-import { loadIconsRail, loadMenu, loadTooltip, loadButton, loadActionButton } from '../../scripts/color-shared/spectrum/load-spectrum.js';
+import { loadIconsRail, loadMenu, loadTooltip, loadButton, loadActionButton } from '../../scripts/shared/spectrum/load-spectrum.js';
 import loadMiloStyle from '../../scripts/color-shared/utils/loadMiloStyle.js';
 import loadColorLibrariesPlaceholders from '../../scripts/color-shared/i18n/loadColorLibrariesPlaceholders.js';
 import { createSearchBar, createDeepLinkManager } from '../../scripts/color-shared/components/search-bar/index.js';
 import { libraryGradientToModalGradient } from '../../scripts/color-shared/components/libraries/libraryDownloadUtils.js';
-import { announceToScreenReader } from '../../scripts/color-shared/spectrum/utils/a11y.js';
+import { announceToScreenReader } from '../../scripts/shared/spectrum/utils/a11y.js';
 import { ensureIms, serviceManager } from '../../libs/services/index.js';
 
 const LIBRARIES_CSS = 'scripts/color-shared/components/libraries/libraries.css';
@@ -464,7 +464,7 @@ export default async function decorate(block) {
       { showExpressToast },
     ] = await Promise.all([
       import('../../scripts/color-shared/services/createLibrariesDataService.js'),
-      import('../../scripts/color-shared/spectrum/components/express-toast.js'),
+      import('../../scripts/shared/spectrum/components/express-toast.js'),
     ]);
 
     const undoDelete = async () => {

express/code/blocks/color-wheel/color-wheel.js

@@ -54,7 +54,7 @@ const heavyModulesPromise1 = Promise.all([
 // Layout shell + tabs: register the outer Spectrum chrome first
 const heavyModulesPromise2a = Promise.all([
   import('../../scripts/color-shared/shell/layouts/createColorToolLayout.js'),
-  import('../../scripts/color-shared/spectrum/components/express-tabs.js'),
+  import('../../scripts/shared/spectrum/components/express-tabs.js'),
 ]);
 // Color adapters + strip renderer: the core interaction layer
 const heavyModulesPromise2b = Promise.all([
@@ -65,7 +65,7 @@ const heavyModulesPromise2b = Promise.all([
 // Image extract + tooltip: used only when switching tabs or on desktop hover
 const heavyModulesPromise2c = Promise.all([
   import('./createImageExtractComponent.js'),
-  import('../../scripts/color-shared/spectrum/components/express-tooltip.js'),
+  import('../../scripts/shared/spectrum/components/express-tooltip.js'),
 ]);
 
 // Always yields to a new task — uses scheduler.yield() when available,

express/code/blocks/font-generator/ARCHITECTURE.md

@@ -158,7 +158,7 @@ On desktop, Filters renders inline alongside the CTA Banner. On mobile/tablet, i
 
 ### Font size slider
 
-`createExpressSlider` already exists in `scripts/color-shared/spectrum/components/express-slider.js` and is exported from the barrel (`spectrum/index.js`). Font generator is its first consumer. Wire it in `toolbar.js`:
+`createExpressSlider` already exists in `scripts/shared/spectrum/components/express-slider.js` and is exported from the barrel (`spectrum/index.js`). Font generator is its first consumer. Wire it in `toolbar.js`:
 
 - `onInput` → `setState({ fontSize: value })` for live card updates
 - Subscribe to store → `slider.setValue()` to sync on URL init
@@ -177,7 +177,7 @@ Follow the same shape as `loadSlider()` or `loadButton()` — call `loadCoreDeps
 
 **3. Create `express-accordion.js`**
 
-Add `scripts/color-shared/spectrum/components/express-accordion.js` and export it from `spectrum/index.js`. Model it on `express-slider.js`: call `loadAccordion()` and `loadOverrideStyles`, create the `sp-accordion` / `sp-accordion-item` elements inside a theme wrapper, wire the `toggle` event, and return `{ element, destroy }`.
+Add `scripts/shared/spectrum/components/express-accordion.js` and export it from `spectrum/index.js`. Model it on `express-slider.js`: call `loadAccordion()` and `loadOverrideStyles`, create the `sp-accordion` / `sp-accordion-item` elements inside a theme wrapper, wire the `toggle` event, and return `{ element, destroy }`.
 
 The accordion's open/closed state stays out of the store — it's transient UI, same as `panelOpen`.
 

express/code/blocks/font-generator/filters.js

@@ -1,6 +1,6 @@
 import { createTag, getLibs } from '../../scripts/utils.js';
 import { getState, setState, subscribe, getCategories } from './state.js';
-import { createExpressAccordion } from '../../scripts/color-shared/spectrum/index.js';
+import { createExpressAccordion } from '../../scripts/shared/spectrum/index.js';
 import { setDaaLL } from '../../scripts/utils/analytics.js';
 
 const ADOBE_FONTS_HREF = 'https://fonts.adobe.com';

express/code/blocks/font-generator/panel.js

@@ -5,7 +5,7 @@ import {
   handleEscapeClose,
   disableBackgroundScroll,
   restoreBackgroundScroll,
-} from '../../scripts/color-shared/spectrum/utils/a11y.js';
+} from '../../scripts/shared/spectrum/utils/a11y.js';
 
 const CLOSE_ICON_SVG = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M7.39832 6L11.33 2.06836C11.7162 1.68262 11.7162 1.05566 11.33 0.669923C10.9442 0.283203 10.3173 0.283203 9.93152 0.669923L5.99988 4.60156L2.06824 0.669923C1.6825 0.283203 1.05554 0.283203 0.669799 0.669923C0.283569 1.05566 0.283569 1.68262 0.669799 2.06836L4.60144 6L0.669799 9.93164C0.283569 10.3174 0.283569 10.9443 0.669799 11.3301C0.862669 11.5234 1.11609 11.6201 1.36902 11.6201C1.62195 11.6201 1.87537 11.5234 2.06824 11.3301L5.99988 7.39844L9.93152 11.3301C10.1244 11.5234 10.3778 11.6201 10.6307 11.6201C10.8837 11.6201 11.1371 11.5234 11.33 11.3301C11.7162 10.9443 11.7162 10.3174 11.33 9.93164L7.39832 6Z"/></svg>';
 

express/code/blocks/font-generator/textInput.js

@@ -1,6 +1,6 @@
 import { getState, setState } from './state.js';
 import { DEFAULT_PLACEHOLDERS } from './placeholders.js';
-import { attachRovingTabIndex } from '../../scripts/color-shared/spectrum/utils/a11y.js';
+import { attachRovingTabIndex } from '../../scripts/shared/spectrum/utils/a11y.js';
 
 const BASE_PATH = '/express/code/blocks/font-generator';
 const STYLESHEET_HREF = `${BASE_PATH}/textInput.css`;

express/code/blocks/swp-demo/swp-demo.js

@@ -22,7 +22,7 @@ import {
   createExpressSearch,
   createExpressTextfield,
   createExpressMenu,
-} from '../../scripts/color-shared/spectrum/index.js';
+} from '../../scripts/shared/spectrum/index.js';
 
 // ── Helpers ──────────────────────────────────────────────────────────
 

express/code/libs/color-components/components/color-swatch-rail/index.js

@@ -3,10 +3,10 @@ import { LitElement, html } from '../../../deps/lit-all.min.js';
 import { getContrastTextColor, isSuperLight } from '../../utils/ColorConversions.js';
 import { getFirstFocusableInGroup } from '../../utils/util.js';
 import { style } from './styles.css.js';
-import { showExpressToast } from '../../../../scripts/color-shared/spectrum/components/express-toast.js';
-import { loadIconsRail } from '../../../../scripts/color-shared/spectrum/load-spectrum.js';
-import { createExpressTooltip } from '../../../../scripts/color-shared/spectrum/components/express-tooltip.js';
-import { announceToScreenReader, clearScreenReaderAnnouncement } from '../../../../scripts/color-shared/spectrum/utils/a11y.js';
+import { showExpressToast } from '../../../../scripts/shared/spectrum/components/express-toast.js';
+import { loadIconsRail } from '../../../../scripts/shared/spectrum/load-spectrum.js';
+import { createExpressTooltip } from '../../../../scripts/shared/spectrum/components/express-tooltip.js';
+import { announceToScreenReader, clearScreenReaderAnnouncement } from '../../../../scripts/shared/spectrum/utils/a11y.js';
 import {
   TYPE_ORDER,
   getConflictPairs,

express/code/scripts/color-shared/SPECTRUM_2_IMPORT_AND_CONSUMPTION.md

@@ -15,7 +15,7 @@ How Spectrum Web Components v2 is loaded and used by Color Explorer.
 
 ## System Architecture
 
-The Spectrum 2 system lives in `express/code/scripts/color-shared/spectrum/`:
+The Spectrum 2 system lives in `express/code/scripts/shared/spectrum/`:
 
 ```
 spectrum/

express/code/scripts/color-shared/adapters/litComponentAdapters.js

@@ -1,6 +1,6 @@
 import { createGradientEditor } from '../components/gradients/gradient-editor.js';
-import { wrapInTheme } from '../spectrum/utils/theme.js';
-import { loadIconsRail } from '../spectrum/load-spectrum.js';
+import { wrapInTheme } from '../../shared/spectrum/utils/theme.js';
+import { loadIconsRail } from '../../shared/spectrum/load-spectrum.js';
 import {
   getPreferredColorMode,
   setPreferredColorMode,

express/code/scripts/color-shared/components/base-color/index.js

@@ -9,7 +9,7 @@ import {
   rgbToLab,
   labToRGB,
 } from '../../../../libs/color-components/utils/ColorConversions.js';
-import { loadMenu, loadButton, loadColorArea, loadColorSlider, loadTextfield } from '../../spectrum/load-spectrum.js';
+import { loadMenu, loadButton, loadColorArea, loadColorSlider, loadTextfield } from '../../../shared/spectrum/load-spectrum.js';
 import { DEFAULT_PLACEHOLDERS as BASE_COLOR_DEFAULTS } from '../../i18n/loadBaseColorPlaceholders.js';
 import '../color-channel-slider/index.js';
 

express/code/scripts/color-shared/components/color-conflicts/index.js

@@ -1,9 +1,9 @@
 import { LitElement, html } from '../../../../libs/deps/lit-all.min.js';
 import { style } from './styles.css.js';
-import { loadBadge, loadTooltip } from '../../spectrum/load-spectrum.js';
+import { loadBadge, loadTooltip } from '../../../shared/spectrum/load-spectrum.js';
 import { DEFAULT_SHARED_PLACEHOLDERS as CB_DEFAULTS } from '../../i18n/loadColorBlindnessPlaceholders.js';
 
-const TOOLTIP_CSS_PATH = '/express/code/scripts/color-shared/spectrum/styles/tooltip.css';
+const TOOLTIP_CSS_PATH = '/express/code/scripts/shared/spectrum/styles/tooltip.css';
 
 class ColorConflicts extends LitElement {
   static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };

express/code/scripts/color-shared/components/color-edit/index.js

@@ -6,8 +6,8 @@ import {
   hsbToRGB,
   hsbToHEX,
 } from '../../../../libs/color-components/utils/ColorConversions.js';
-import { loadSwatch, loadMenu, loadTextfield } from '../../spectrum/load-spectrum.js';
-import { trapFocus, disableBackgroundScroll, restoreBackgroundScroll } from '../../spectrum/utils/a11y.js';
+import { loadSwatch, loadMenu, loadTextfield } from '../../../shared/spectrum/load-spectrum.js';
+import { trapFocus, disableBackgroundScroll, restoreBackgroundScroll } from '../../../shared/spectrum/utils/a11y.js';
 import { DEFAULT_PLACEHOLDERS as COLOR_EDIT_DEFAULTS } from '../../i18n/loadColorEditPlaceholders.js';
 import '../base-color/index.js';
 

express/code/scripts/color-shared/components/createActionMenuComponent.js

@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { createTag, getLibs } from '../../utils.js';
 import loadMiloStyle from '../utils/loadMiloStyle.js';
-import { createExpressButton, createExpressTooltip } from '../spectrum/index.js';
+import { createExpressButton, createExpressTooltip } from '../../shared/spectrum/index.js';
 import { createActionMenuState } from './createActionMenuState.js';
-import { attachRovingTabIndex } from '../spectrum/utils/a11y.js';
+import { attachRovingTabIndex } from '../../shared/spectrum/utils/a11y.js';
 import { createColorPaletteParamApi, decorateAnalyticsAttributes } from '../utils/utilities.js';
 import {
   COLOR_ICON,

express/code/scripts/color-shared/components/createActionMenuState.js

@@ -1,5 +1,5 @@
 import BlockMediator from '../../block-mediator.min.js';
-import { announceToScreenReader } from '../spectrum/utils/a11y.js';
+import { announceToScreenReader } from '../../shared/spectrum/utils/a11y.js';
 
 export function createActionMenuState(stateKey = 'action-menu', { transformPalette } = {}) {
   const eventNamespace = stateKey;

express/code/scripts/color-shared/components/createFiltersComponent.js

@@ -18,10 +18,10 @@
  */
 
 import { createTag } from '../../utils.js';
-import { createExpressPicker } from '../spectrum/components/express-picker.js';
-import { createExpressTooltip } from '../spectrum/components/express-tooltip.js';
-import { loadIconsRail, loadPicker } from '../spectrum/load-spectrum.js';
-import { createThemeWrapper } from '../spectrum/utils/theme.js';
+import { createExpressPicker } from '../../shared/spectrum/components/express-picker.js';
+import { createExpressTooltip } from '../../shared/spectrum/components/express-tooltip.js';
+import { loadIconsRail, loadPicker } from '../../shared/spectrum/load-spectrum.js';
+import { createThemeWrapper } from '../../shared/spectrum/utils/theme.js';
 import { decorateAnalyticsAttributes, interpolate } from '../utils/utilities.js';
 import { createColorFiltersPlaceholders } from '../i18n/loadColorFiltersPlaceholders.js';