@jxsuite/studio 4.0.0 → 5.0.0

package/src/ui/spectrum.ts

@@ -1,340 +0,0 @@
-/**
- * Spectrum.js — Explicit Spectrum Web Component registration
- *
- * Bun's bundler tree-shakes bare side-effect imports (`import "..."`) because the Spectrum
- * `sp-*.js` entry files export nothing — they only call `customElements.define()` as a side effect.
- * To prevent the bundler from dropping them, we import the class constructors and collect them into
- * an exported array that the main module references.
- */
-
-import { Theme } from "@spectrum-web-components/theme/src/Theme.js";
-import themeSpectrumCSS from "@spectrum-web-components/theme/src/theme.css.js";
-import themeDarkCSS from "@spectrum-web-components/theme/src/theme-dark.css.js";
-import themeLightCSS from "@spectrum-web-components/theme/src/theme-light.css.js";
-import scaleMediumCSS from "@spectrum-web-components/theme/src/scale-medium.css.js";
-import { jxTheme } from "./jx-theme";
-import { Tabs } from "@spectrum-web-components/tabs/src/Tabs.js";
-import { Tab } from "@spectrum-web-components/tabs/src/Tab.js";
-import { TabPanel } from "@spectrum-web-components/tabs/src/TabPanel.js";
-import { ActionButton } from "@spectrum-web-components/action-button/src/ActionButton.js";
-import { ActionGroup } from "@spectrum-web-components/action-group/src/ActionGroup.js";
-import { Search } from "@spectrum-web-components/search/src/Search.js";
-import { Popover } from "@spectrum-web-components/popover/src/Popover.js";
-import { Menu } from "@spectrum-web-components/menu/src/Menu.js";
-import { MenuItem } from "@spectrum-web-components/menu/src/MenuItem.js";
-import { MenuDivider } from "@spectrum-web-components/menu/src/MenuDivider.js";
-import { MenuGroup } from "@spectrum-web-components/menu/src/MenuGroup.js";
-import { Textfield } from "@spectrum-web-components/textfield/src/Textfield.js";
-import { Swatch } from "@spectrum-web-components/swatch/src/Swatch.js";
-import { SwatchGroup } from "@spectrum-web-components/swatch/src/SwatchGroup.js";
-import { ColorArea } from "@spectrum-web-components/color-area/src/ColorArea.js";
-import { ColorSlider } from "@spectrum-web-components/color-slider/src/ColorSlider.js";
-import { ColorHandle } from "@spectrum-web-components/color-handle/src/ColorHandle.js";
-import { NumberField } from "@spectrum-web-components/number-field/src/NumberField.js";
-import { Picker } from "@spectrum-web-components/picker/src/Picker.js";
-import { Combobox } from "@spectrum-web-components/combobox/src/Combobox.js";
-import { FieldLabel } from "@spectrum-web-components/field-label/src/FieldLabel.js";
-import { Checkbox } from "@spectrum-web-components/checkbox/src/Checkbox.js";
-import { Switch as SpSwitch } from "@spectrum-web-components/switch/src/Switch.js";
-import { Divider } from "@spectrum-web-components/divider/src/Divider.js";
-/* SIDE-EFFECT IMPORT, deliberately unlike every other row in this file.
-   Registering `sp-tooltip` ourselves from the class-only module made Studio the first definer, and
-   the package's OWN registering entry is reached later by a dynamic import (the textfield's
-   truncated-value controller) — which then calls `customElements.define` for a name we already
-   took, and throws `NotSupportedError` in the console during ordinary panel use. Our loop's
-   `customElements.get` guard cannot help: the second define is Spectrum's own call inside
-   node_modules. The tooltip package declares `sideEffects: ["./sp-*.js", …]`, so this import
-   survives bundling, and putting Spectrum's module in the static graph makes it the single definer
-   while the later dynamic import hits the module cache. */
-import "@spectrum-web-components/tooltip/sp-tooltip.js";
-import { Overlay } from "@spectrum-web-components/overlay/src/Overlay.js";
-import { OverlayTrigger } from "@spectrum-web-components/overlay/src/OverlayTrigger.js";
-import { Dialog } from "@spectrum-web-components/dialog/src/Dialog.js";
-import { DialogWrapper } from "@spectrum-web-components/dialog/src/DialogWrapper.js";
-import { HelpText } from "@spectrum-web-components/help-text/src/HelpText.js";
-import { Button } from "@spectrum-web-components/button/src/Button.js";
-import { Underlay } from "@spectrum-web-components/underlay/src/Underlay.js";
-import { PickerButton } from "@spectrum-web-components/picker-button/src/PickerButton.js";
-import { Accordion } from "@spectrum-web-components/accordion/src/Accordion.js";
-import { AccordionItem } from "@spectrum-web-components/accordion/src/AccordionItem.js";
-import { ActionBar } from "@spectrum-web-components/action-bar/src/ActionBar.js";
-import { Toast } from "@spectrum-web-components/toast/src/Toast.js";
-import { ProgressCircle } from "@spectrum-web-components/progress-circle/src/ProgressCircle.js";
-import { Table } from "@spectrum-web-components/table/src/Table.js";
-import { TableHead } from "@spectrum-web-components/table/src/TableHead.js";
-import { TableHeadCell } from "@spectrum-web-components/table/src/TableHeadCell.js";
-import { TableBody } from "@spectrum-web-components/table/src/TableBody.js";
-import { TableRow } from "@spectrum-web-components/table/src/TableRow.js";
-import { TableCell } from "@spectrum-web-components/table/src/TableCell.js";
-
-// Icons
-import { IconRailBottom } from "@spectrum-web-components/icons-workflow/src/elements/IconRailBottom.js";
-import { IconRailLeft } from "@spectrum-web-components/icons-workflow/src/elements/IconRailLeft.js";
-import { IconRailRight } from "@spectrum-web-components/icons-workflow/src/elements/IconRailRight.js";
-import { IconFolder } from "@spectrum-web-components/icons-workflow/src/elements/IconFolder.js";
-import { IconFolderOpen } from "@spectrum-web-components/icons-workflow/src/elements/IconFolderOpen.js";
-import { IconDocument } from "@spectrum-web-components/icons-workflow/src/elements/IconDocument.js";
-import { IconFileCode } from "@spectrum-web-components/icons-workflow/src/elements/IconFileCode.js";
-import { IconFileTxt } from "@spectrum-web-components/icons-workflow/src/elements/IconFileTxt.js";
-import { IconImage } from "@spectrum-web-components/icons-workflow/src/elements/IconImage.js";
-import { IconFileSingleWebPage } from "@spectrum-web-components/icons-workflow/src/elements/IconFileSingleWebPage.js";
-import { IconViewAllTags } from "@spectrum-web-components/icons-workflow/src/elements/IconViewAllTags.js";
-import { IconRefresh } from "@spectrum-web-components/icons-workflow/src/elements/IconRefresh.js";
-import { IconAdd } from "@spectrum-web-components/icons-workflow/src/elements/IconAdd.js";
-import { IconUpload } from "@spectrum-web-components/icons-workflow/src/elements/IconUpload.js";
-import { IconLayers } from "@spectrum-web-components/icons-workflow/src/elements/IconLayers.js";
-import { IconViewGrid } from "@spectrum-web-components/icons-workflow/src/elements/IconViewGrid.js";
-import { IconBrackets } from "@spectrum-web-components/icons-workflow/src/elements/IconBrackets.js";
-import { IconData } from "@spectrum-web-components/icons-workflow/src/elements/IconData.js";
-import { IconChevronDown } from "@spectrum-web-components/icons-workflow/src/elements/IconChevronDown.js";
-import { IconDelete } from "@spectrum-web-components/icons-workflow/src/elements/IconDelete.js";
-import { IconClose } from "@spectrum-web-components/icons-workflow/src/elements/IconClose.js";
-import { IconChevronRight } from "@spectrum-web-components/icons-workflow/src/elements/IconChevronRight.js";
-import { IconEdit } from "@spectrum-web-components/icons-workflow/src/elements/IconEdit.js";
-import { IconSaveFloppy } from "@spectrum-web-components/icons-workflow/src/elements/IconSaveFloppy.js";
-import { IconUndo } from "@spectrum-web-components/icons-workflow/src/elements/IconUndo.js";
-import { IconRedo } from "@spectrum-web-components/icons-workflow/src/elements/IconRedo.js";
-import { IconDuplicate } from "@spectrum-web-components/icons-workflow/src/elements/IconDuplicate.js";
-import { IconCopy } from "@spectrum-web-components/icons-workflow/src/elements/IconCopy.js";
-import { IconExport } from "@spectrum-web-components/icons-workflow/src/elements/IconExport.js";
-import { IconPreview } from "@spectrum-web-components/icons-workflow/src/elements/IconPreview.js";
-import { IconCode } from "@spectrum-web-components/icons-workflow/src/elements/IconCode.js";
-import { IconBrush } from "@spectrum-web-components/icons-workflow/src/elements/IconBrush.js";
-import { IconGears } from "@spectrum-web-components/icons-workflow/src/elements/IconGears.js";
-import { IconSettings } from "@spectrum-web-components/icons-workflow/src/elements/IconSettings.js";
-import { IconInfo } from "@spectrum-web-components/icons-workflow/src/elements/IconInfo.js";
-import { IconBack } from "@spectrum-web-components/icons-workflow/src/elements/IconBack.js";
-import { IconProperties } from "@spectrum-web-components/icons-workflow/src/elements/IconProperties.js";
-import { IconMore } from "@spectrum-web-components/icons-workflow/src/elements/IconMore.js";
-
-// Layout / alignment icons
-import { IconArrowRight } from "@spectrum-web-components/icons-workflow/src/elements/IconArrowRight.js";
-import { IconArrowLeft } from "@spectrum-web-components/icons-workflow/src/elements/IconArrowLeft.js";
-import { IconArrowDown } from "@spectrum-web-components/icons-workflow/src/elements/IconArrowDown.js";
-import { IconArrowUp } from "@spectrum-web-components/icons-workflow/src/elements/IconArrowUp.js";
-import { IconTextAlignLeft } from "@spectrum-web-components/icons-workflow/src/elements/IconTextAlignLeft.js";
-import { IconTextAlignCenter } from "@spectrum-web-components/icons-workflow/src/elements/IconTextAlignCenter.js";
-import { IconTextAlignRight } from "@spectrum-web-components/icons-workflow/src/elements/IconTextAlignRight.js";
-import { IconTextAlignJustify } from "@spectrum-web-components/icons-workflow/src/elements/IconTextAlignJustify.js";
-import { IconAlignTop } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignTop.js";
-import { IconAlignBottom } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignBottom.js";
-import { IconPlay } from "@spectrum-web-components/icons-workflow/src/elements/IconPlay.js";
-import { IconSearch } from "@spectrum-web-components/icons-workflow/src/elements/IconSearch.js";
-import { IconShare } from "@spectrum-web-components/icons-workflow/src/elements/IconShare.js";
-import { IconShowMenu } from "@spectrum-web-components/icons-workflow/src/elements/IconShowMenu.js";
-import { IconAlignMiddle } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignMiddle.js";
-import { IconAlignLeft } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignLeft.js";
-import { IconAlignRight } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignRight.js";
-import { IconAlignCenter } from "@spectrum-web-components/icons-workflow/src/elements/IconAlignCenter.js";
-import { IconDistributeSpaceHoriz } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeSpaceHoriz.js";
-import { IconDistributeSpaceVert } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeSpaceVert.js";
-import { IconDistributeHorizontally } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeHorizontally.js";
-import { IconDistributeVertically } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeVertically.js";
-import { IconDistributeBottomEdge } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeBottomEdge.js";
-import { IconDistributeTopEdge } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeTopEdge.js";
-import { IconDistributeHorizontalCenter } from "@spectrum-web-components/icons-workflow/src/elements/IconDistributeHorizontalCenter.js";
-import { IconTextBaselineShift } from "@spectrum-web-components/icons-workflow/src/elements/IconTextBaselineShift.js";
-import { IconFlipVertical } from "@spectrum-web-components/icons-workflow/src/elements/IconFlipVertical.js";
-import { IconRemove } from "@spectrum-web-components/icons-workflow/src/elements/IconRemove.js";
-import { IconFullScreen } from "@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js";
-import { IconViewColumn } from "@spectrum-web-components/icons-workflow/src/elements/IconViewColumn.js";
-import { IconBox } from "@spectrum-web-components/icons-workflow/src/elements/IconBox.js";
-import { IconVisibility } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibility.js";
-import { IconVisibilityOff } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibilityOff.js";
-import { IconArtboard } from "@spectrum-web-components/icons-workflow/src/elements/IconArtboard.js";
-import { IconChat } from "@spectrum-web-components/icons-workflow/src/elements/IconChat.js";
-import { IconSend } from "@spectrum-web-components/icons-workflow/src/elements/IconSend.js";
-import { IconStop } from "@spectrum-web-components/icons-workflow/src/elements/IconStop.js";
-import { IconHistory } from "@spectrum-web-components/icons-workflow/src/elements/IconHistory.js";
-import { IconAttach } from "@spectrum-web-components/icons-workflow/src/elements/IconAttach.js";
-import { IconViewList } from "@spectrum-web-components/icons-workflow/src/elements/IconViewList.js";
-import { IconRectangle } from "@spectrum-web-components/icons-workflow/src/elements/IconRectangle.js";
-
-// Inline formatting icons
-import { IconTextBold } from "@spectrum-web-components/icons-workflow/src/elements/IconTextBold.js";
-import { IconTextItalic } from "@spectrum-web-components/icons-workflow/src/elements/IconTextItalic.js";
-import { IconTextUnderline } from "@spectrum-web-components/icons-workflow/src/elements/IconTextUnderline.js";
-import { IconTextStrikethrough } from "@spectrum-web-components/icons-workflow/src/elements/IconTextStrikethrough.js";
-import { IconTextSuperscript } from "@spectrum-web-components/icons-workflow/src/elements/IconTextSuperscript.js";
-import { IconTextSubscript } from "@spectrum-web-components/icons-workflow/src/elements/IconTextSubscript.js";
-import { IconLink } from "@spectrum-web-components/icons-workflow/src/elements/IconLink.js";
-import { IconDownload } from "@spectrum-web-components/icons-workflow/src/elements/IconDownload.js";
-import { IconCheckmark } from "@spectrum-web-components/icons-workflow/src/elements/IconCheckmark.js";
-
-// Custom studio components
-import { JxValueSelector } from "./value-selector";
-import { JxColorPopover } from "./color-selector";
-
-// UI icons (used internally by Spectrum components like accordion, picker, combobox)
-import { IconChevron100 } from "@spectrum-web-components/icons-ui/src/elements/IconChevron100.js";
-
-// Register all components. Using defineElement from Spectrum's base package
-// Ensures duplicate registration is handled gracefully.
-import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
-
-const components = [
-  ["sp-theme", Theme],
-  ["sp-tabs", Tabs],
-  ["sp-tab", Tab],
-  ["sp-tab-panel", TabPanel],
-  ["sp-action-button", ActionButton],
-  ["sp-action-group", ActionGroup],
-  ["sp-search", Search],
-  ["sp-popover", Popover],
-  ["sp-menu", Menu],
-  ["sp-menu-item", MenuItem],
-  ["sp-menu-divider", MenuDivider],
-  ["sp-menu-group", MenuGroup],
-  ["sp-textfield", Textfield],
-  ["sp-swatch", Swatch],
-  ["sp-swatch-group", SwatchGroup],
-  ["sp-color-area", ColorArea],
-  ["sp-color-slider", ColorSlider],
-  ["sp-color-handle", ColorHandle],
-  ["sp-number-field", NumberField],
-  ["sp-picker", Picker],
-  ["sp-combobox", Combobox],
-  ["sp-field-label", FieldLabel],
-  ["sp-checkbox", Checkbox],
-  ["sp-switch", SpSwitch],
-  ["sp-divider", Divider],
-  ["sp-overlay", Overlay],
-  ["overlay-trigger", OverlayTrigger],
-  ["sp-dialog", Dialog],
-  ["sp-dialog-wrapper", DialogWrapper],
-  ["sp-help-text", HelpText],
-  ["sp-button", Button],
-  ["sp-underlay", Underlay],
-  ["sp-picker-button", PickerButton],
-  ["sp-accordion", Accordion],
-  ["sp-accordion-item", AccordionItem],
-  ["sp-action-bar", ActionBar],
-  ["sp-toast", Toast],
-  ["sp-progress-circle", ProgressCircle],
-  ["sp-table", Table],
-  ["sp-table-head", TableHead],
-  ["sp-table-head-cell", TableHeadCell],
-  ["sp-table-body", TableBody],
-  ["sp-table-row", TableRow],
-  ["sp-table-cell", TableCell],
-  ["sp-icon-rail-bottom", IconRailBottom],
-  ["sp-icon-rail-left", IconRailLeft],
-  ["sp-icon-rail-right", IconRailRight],
-  ["sp-icon-folder", IconFolder],
-  ["sp-icon-folder-open", IconFolderOpen],
-  ["sp-icon-document", IconDocument],
-  ["sp-icon-file-code", IconFileCode],
-  ["sp-icon-file-txt", IconFileTxt],
-  ["sp-icon-image", IconImage],
-  ["sp-icon-file-single-web-page", IconFileSingleWebPage],
-  ["sp-icon-view-all-tags", IconViewAllTags],
-  ["sp-icon-refresh", IconRefresh],
-  ["sp-icon-add", IconAdd],
-  ["sp-icon-upload", IconUpload],
-  ["sp-icon-layers", IconLayers],
-  ["sp-icon-view-grid", IconViewGrid],
-  ["sp-icon-brackets", IconBrackets],
-  ["sp-icon-data", IconData],
-  ["sp-icon-chevron-down", IconChevronDown],
-  ["sp-icon-chevron-right", IconChevronRight],
-  ["sp-icon-delete", IconDelete],
-  ["sp-icon-close", IconClose],
-  ["sp-icon-edit", IconEdit],
-  ["sp-icon-save-floppy", IconSaveFloppy],
-  ["sp-icon-undo", IconUndo],
-  ["sp-icon-redo", IconRedo],
-  ["sp-icon-duplicate", IconDuplicate],
-  ["sp-icon-copy", IconCopy],
-  ["sp-icon-export", IconExport],
-  ["sp-icon-preview", IconPreview],
-  ["sp-icon-code", IconCode],
-  ["sp-icon-brush", IconBrush],
-  ["sp-icon-gears", IconGears],
-  ["sp-icon-settings", IconSettings],
-  ["sp-icon-info", IconInfo],
-  ["sp-icon-back", IconBack],
-  ["sp-icon-properties", IconProperties],
-  ["sp-icon-more", IconMore],
-  ["sp-icon-arrow-right", IconArrowRight],
-  ["sp-icon-arrow-left", IconArrowLeft],
-  ["sp-icon-arrow-down", IconArrowDown],
-  ["sp-icon-arrow-up", IconArrowUp],
-  ["sp-icon-text-align-left", IconTextAlignLeft],
-  ["sp-icon-text-align-center", IconTextAlignCenter],
-  ["sp-icon-text-align-right", IconTextAlignRight],
-  ["sp-icon-text-align-justify", IconTextAlignJustify],
-  ["sp-icon-align-top", IconAlignTop],
-  ["sp-icon-align-bottom", IconAlignBottom],
-  ["sp-icon-play", IconPlay],
-  ["sp-icon-search", IconSearch],
-  ["sp-icon-share", IconShare],
-  ["sp-icon-show-menu", IconShowMenu],
-  ["sp-icon-align-middle", IconAlignMiddle],
-  ["sp-icon-align-left", IconAlignLeft],
-  ["sp-icon-align-right", IconAlignRight],
-  ["sp-icon-align-center", IconAlignCenter],
-  ["sp-icon-distribute-space-horiz", IconDistributeSpaceHoriz],
-  ["sp-icon-distribute-space-vert", IconDistributeSpaceVert],
-  ["sp-icon-distribute-horizontally", IconDistributeHorizontally],
-  ["sp-icon-distribute-vertically", IconDistributeVertically],
-  ["sp-icon-distribute-bottom-edge", IconDistributeBottomEdge],
-  ["sp-icon-distribute-top-edge", IconDistributeTopEdge],
-  ["sp-icon-distribute-horizontal-center", IconDistributeHorizontalCenter],
-  ["sp-icon-text-baseline-shift", IconTextBaselineShift],
-  ["sp-icon-flip-vertical", IconFlipVertical],
-  ["sp-icon-remove", IconRemove],
-  ["sp-icon-full-screen", IconFullScreen],
-  ["sp-icon-download", IconDownload],
-  ["sp-icon-checkmark", IconCheckmark],
-  ["sp-icon-view-column", IconViewColumn],
-  ["sp-icon-rectangle", IconRectangle],
-  ["sp-icon-box", IconBox],
-  ["sp-icon-visibility", IconVisibility],
-  ["sp-icon-visibility-off", IconVisibilityOff],
-  ["sp-icon-artboard", IconArtboard],
-  ["sp-icon-chat", IconChat],
-  ["sp-icon-send", IconSend],
-  ["sp-icon-stop", IconStop],
-  ["sp-icon-history", IconHistory],
-  ["sp-icon-attach", IconAttach],
-  ["sp-icon-view-list", IconViewList],
-  ["sp-icon-text-bold", IconTextBold],
-  ["sp-icon-text-italic", IconTextItalic],
-  ["sp-icon-text-underline", IconTextUnderline],
-  ["sp-icon-text-strikethrough", IconTextStrikethrough],
-  ["sp-icon-text-superscript", IconTextSuperscript],
-  ["sp-icon-text-subscript", IconTextSubscript],
-  ["sp-icon-link", IconLink],
-  // UI icons (internal component chrome)
-  ["sp-icon-chevron100", IconChevron100],
-  // Custom studio components
-  ["jx-value-selector", JxValueSelector],
-  ["jx-color-popover", JxColorPopover],
-];
-
-for (const [tag, ctor] of components as [string, CustomElementConstructor][]) {
-  if (!customElements.get(tag)) {
-    defineElement(tag, ctor);
-  }
-}
-
-/* Register theme fragments (these are also side-effect-only in the original modules).
-
-   BOTH colour fragments, because `<sp-theme color>` adopts the fragment REGISTERED UNDER THAT NAME
-   and silently adopts none when the name is unknown. Only "dark" was registered here, so
-   Preferences → Appearance → Light set a valid attribute onto a theme that had no light stops:
-   every `--spectrum-*` colour token went undefined at once, the studio semantic layer in
-   `styles/tokens.css` collapsed to its dark hex fallbacks, and the chrome did not change. Spectrum
-   itself said so — "you have set color='light' but the associated system fragment has not been
-   loaded" — into a console nobody was reading. A colour declared in `CHROME_THEMES` must have its
-   fragment registered here. */
-Theme.registerThemeFragment("spectrum", "system", themeSpectrumCSS);
-Theme.registerThemeFragment("dark", "color", themeDarkCSS);
-Theme.registerThemeFragment("light", "color", themeLightCSS);
-Theme.registerThemeFragment("medium", "scale", scaleMediumCSS);
-/* Jx brand overrides. The 'app' kind must be registered under the literal
-   name "app" and, registered last, is adopted after the fragments above so
-   its :host declarations win the cascade (see src/ui/jx-theme.ts). */
-Theme.registerThemeFragment("app", "app", jxTheme);
-
-export { components };

package/src/ui/value-selector.ts

@@ -1,174 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Value Selector — Dual-mode styled combobox custom element.
- *
- * Renders as sp-picker when the current value matches a predefined option, or as a textfield +
- * dropdown overlay (manual combobox) when it doesn't. Both modes share identical styled menu items,
- * ensuring visual consistency.
- *
- * The option list is a set of SUGGESTIONS, never a whitelist: both modes emit `change` on commit
- * (picker selection, menu selection, or blur/Enter in the textfield) and combobox mode also emits
- * `input` while typing, so a caller can offer a short list of common values without forbidding the
- * rest — which is what lets a control like the event-name field stop being a list of ten.
- *
- * Usage: html`<jx-value-selector size="s" .value=${"italic"} placeholder="normal" .options=${[{
- * value: "italic", label: "Italic", style: "font-style: italic" }]} @change=${handler}
- * @input=${handler}
- *
- * > </jx-value-selector>`
- *
- * Options format: { value: string, label: string, style?: string } — menu item { divider: true } —
- * menu divider
- */
-
-import { LitElement, html } from "lit";
-import { live } from "lit/directives/live.js";
-
-type ComboOption = { value: string; label: string; style?: string } | { divider: true };
-
-export class JxValueSelector extends LitElement {
-  static override properties = {
-    options: { attribute: false },
-    placeholder: { type: String },
-    size: { type: String },
-    value: { type: String },
-  };
-
-  declare value: string;
-  declare placeholder: string;
-  declare size: string;
-  declare options: ComboOption[];
-  declare _menuId: string;
-
-  constructor() {
-    super();
-    this.value = "";
-    this.placeholder = "";
-    this.size = "s";
-    this.options = [];
-    this._menuId = `jx-combo-${Math.random().toString(36).slice(2, 8)}`;
-  }
-
-  /** No shadow DOM — render directly into light DOM */
-  override createRenderRoot() {
-    return this;
-  }
-
-  /** Check if current value matches a predefined option */
-  get _isPicker() {
-    return (
-      Boolean(this.value) &&
-      this.options.some((o: ComboOption) => !("divider" in o) && o.value === this.value)
-    );
-  }
-
-  /** Get the selected option's style string for the picker button preview */
-  get _selectedStyle() {
-    if (!this._isPicker) {
-      return "";
-    }
-    const opt = this.options.find((o: ComboOption) => !("divider" in o) && o.value === this.value);
-    return (opt as { value: string; label: string; style?: string } | undefined)?.style || "";
-  }
-
-  /** Render menu items from options array */
-  _renderMenuItems() {
-    return this.options.map((opt: ComboOption) =>
-      "divider" in opt
-        ? html`<sp-menu-divider></sp-menu-divider>`
-        : html`<sp-menu-item value=${opt.value} style=${opt.style || ""}
-            >${opt.label}</sp-menu-item
-          >`,
-    );
-  }
-
-  /** Picker mode: sp-picker @change handler */
-  _handlePickerChange(e: Event) {
-    e.stopPropagation();
-    this.value = (e.target as HTMLInputElement).value;
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-  }
-
-  /** Combobox mode: sp-menu @change handler */
-  _handleMenuChange(e: Event) {
-    e.stopPropagation();
-    if (!(e.target as HTMLInputElement).value) {
-      return;
-    }
-    this.value = (e.target as HTMLInputElement).value;
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-  }
-
-  /** Combobox mode: textfield @input handler */
-  _handleInput(e: Event) {
-    e.stopPropagation();
-    this.value = (e.target as HTMLInputElement).value;
-    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
-  }
-
-  /**
-   * Combobox mode: textfield @change handler (blur / Enter).
-   *
-   * Without this, a typed value only ever reached listeners as `input`. Every consumer that binds
-   * `@change` — the pattern for "commit this to the document" everywhere else in the app — saw
-   * nothing at all, so the free-form half of this dual-mode control was decorative: you could type
-   * a value the option list did not contain and it would never be written down.
-   */
-  _handleTextChange(e: Event) {
-    e.stopPropagation();
-    this.value = (e.target as HTMLInputElement).value;
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-  }
-
-  /** Set popover min-width to match trigger width (replicates sp-picker behavior) */
-  _setPopoverWidth(e: Event) {
-    const group = this.querySelector(".jx-combobox-group");
-    const w = group ? (group as HTMLElement).offsetWidth : 0;
-    const popover = (e.target as HTMLElement).querySelector("sp-popover");
-    if (popover && w) {
-      (popover as HTMLElement).style.minWidth = `${w}px`;
-    }
-  }
-
-  override render() {
-    if (this._isPicker) {
-      return html`
-        <sp-picker
-          class="jx-combobox-picker"
-          size=${this.size}
-          style=${this._selectedStyle}
-          .value=${live(this.value)}
-          @change=${this._handlePickerChange}
-        >
-          ${this._renderMenuItems()}
-        </sp-picker>
-      `;
-    }
-
-    return html`
-      <div class="jx-combobox-group" id=${this._menuId}>
-        <sp-textfield
-          size=${this.size}
-          placeholder=${this.placeholder}
-          .value=${live(this.value || "")}
-          @input=${this._handleInput}
-          @change=${this._handleTextChange}
-          @click=${(e: Event) => e.stopPropagation()}
-        ></sp-textfield>
-        <sp-picker-button size=${this.size}></sp-picker-button>
-        <sp-overlay
-          trigger="${this._menuId}@click"
-          placement="bottom-start"
-          type="auto"
-          @sp-opened=${this._setPopoverWidth}
-        >
-          <sp-popover class="jx-combobox-popover">
-            <sp-menu size=${this.size} @change=${this._handleMenuChange}>
-              ${this._renderMenuItems()}
-            </sp-menu>
-          </sp-popover>
-        </sp-overlay>
-      </div>
-    `;
-  }
-}