@jxsuite/studio 0.0.1

package/src/ui/icons.js

@@ -0,0 +1,83 @@
+// packages/studio/icons.js
+// Icon templates for style sidebar button groups.
+// Uses Spectrum workflow icons where available; custom SVGs for flex-specific concepts.
+
+import { html } from "lit";
+
+// Helper for custom filled-rect icons (alignment/justify diagrams) where no Spectrum match exists
+const _R = (/** @type {any} */ d) =>
+  html`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="none"
+  >
+    ${d}
+  </svg>`;
+
+// Helper for custom stroke icons
+const _S = (/** @type {any} */ d) =>
+  html`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    ${d}
+  </svg>`;
+
+const icons = {
+  // ─── Arrows — flexDirection ───
+  "arrow-right": html`<sp-icon-arrow-right slot="icon"></sp-icon-arrow-right>`,
+  "arrow-left": html`<sp-icon-arrow-left slot="icon"></sp-icon-arrow-left>`,
+  "arrow-down": html`<sp-icon-arrow-down slot="icon"></sp-icon-arrow-down>`,
+  "arrow-up": html`<sp-icon-arrow-up slot="icon"></sp-icon-arrow-up>`,
+
+  // ─── Text align — textAlign ───
+  "text-align-left": html`<sp-icon-text-align-left slot="icon"></sp-icon-text-align-left>`,
+  "text-align-center": html`<sp-icon-text-align-center slot="icon"></sp-icon-text-align-center>`,
+  "text-align-right": html`<sp-icon-text-align-right slot="icon"></sp-icon-text-align-right>`,
+  "text-align-justify": html`<sp-icon-text-align-justify slot="icon"></sp-icon-text-align-justify>`,
+
+  // ─── flexWrap ───
+  "wrap-text": html`<sp-icon-flip-vertical slot="icon"></sp-icon-flip-vertical>`,
+
+  // ─── alignItems / alignSelf — vertical alignment within container ───
+  "align-start-v": html`<sp-icon-align-top slot="icon"></sp-icon-align-top>`,
+  "align-end-v": html`<sp-icon-align-bottom slot="icon"></sp-icon-align-bottom>`,
+  "align-center-v": html`<sp-icon-align-middle slot="icon"></sp-icon-align-middle>`,
+  "align-stretch-v": html`<sp-icon-distribute-vertically
+    slot="icon"
+  ></sp-icon-distribute-vertically>`,
+  "align-baseline": html`<sp-icon-text-baseline-shift slot="icon"></sp-icon-text-baseline-shift>`,
+
+  // ─── justifyContent — horizontal distribution within container ───
+  "justify-start": html`<sp-icon-align-left slot="icon"></sp-icon-align-left>`,
+  "justify-end": html`<sp-icon-align-right slot="icon"></sp-icon-align-right>`,
+  "justify-center": html`<sp-icon-align-center slot="icon"></sp-icon-align-center>`,
+  "justify-between": html`<sp-icon-distribute-space-horiz
+    slot="icon"
+  ></sp-icon-distribute-space-horiz>`,
+  "justify-around": html`<sp-icon-distribute-horizontally
+    slot="icon"
+  ></sp-icon-distribute-horizontally>`,
+  "justify-evenly": html`<sp-icon-distribute-horizontal-center
+    slot="icon"
+  ></sp-icon-distribute-horizontal-center>`,
+
+  // ─── display mode icons ───
+  "display-flex": html`<sp-icon-view-column slot="icon"></sp-icon-view-column>`,
+  "display-grid": html`<sp-icon-view-grid slot="icon"></sp-icon-view-grid>`,
+  "display-block": html`<sp-icon-box slot="icon"></sp-icon-box>`,
+  "display-inline": html`<sp-icon-remove slot="icon"></sp-icon-remove>`,
+  "display-none": html`<sp-icon-visibility-off slot="icon"></sp-icon-visibility-off>`,
+};
+
+export default icons;

package/src/ui/jx-styled-combobox.js

@@ -0,0 +1,142 @@
+/**
+ * Jx-styled-combobox — 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.
+ *
+ * Usage: html`<jx-styled-combobox size="s" .value=${"italic"} placeholder="normal" .options=${[{
+ * value: "italic", label: "Italic", style: "font-style: italic" }]} @change=${handler}
+ * @input=${handler}
+ *
+ * > </jx-styled-combobox>`
+ *
+ * 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";
+
+/** @typedef {{ value: string; label: string; style?: string } | { divider: true }} ComboOption */
+
+export class JxStyledCombobox extends LitElement {
+  static properties = {
+    value: { type: String },
+    placeholder: { type: String },
+    size: { type: String },
+    options: { attribute: false },
+  };
+
+  constructor() {
+    super();
+    /** @type {string} */ this.value = "";
+    /** @type {string} */ this.placeholder = "";
+    /** @type {string} */ this.size = "s";
+    /** @type {ComboOption[]} */ this.options = [];
+    /** @type {string} */
+    this._menuId = "jx-combo-" + Math.random().toString(36).slice(2, 8);
+  }
+
+  /** No shadow DOM — render directly into light DOM */
+  createRenderRoot() {
+    return this;
+  }
+
+  /** Check if current value matches a predefined option */
+  get _isPicker() {
+    return (
+      !!this.value &&
+      this.options.some((/** @type {any} */ o) => !o.divider && 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((/** @type {any} */ o) => !o.divider && o.value === this.value);
+    return /** @type {any} */ (opt)?.style || "";
+  }
+
+  /** Render menu items from options array */
+  _renderMenuItems() {
+    return this.options.map((/** @type {any} */ opt) =>
+      opt.divider
+        ? 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(/** @type {any} */ e) {
+    e.stopPropagation(); // prevent sp-picker's raw event from reaching consumer
+    this.value = e.target.value;
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+
+  /** Combobox mode: sp-menu @change handler */
+  _handleMenuChange(/** @type {any} */ e) {
+    e.stopPropagation(); // prevent sp-menu's raw event from reaching consumer
+    if (!e.target.value) return;
+    this.value = e.target.value;
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+
+  /** Combobox mode: textfield @input handler */
+  _handleInput(/** @type {any} */ e) {
+    e.stopPropagation(); // prevent sp-textfield's raw event from reaching consumer
+    this.value = e.target.value;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  }
+
+  /** Set popover min-width to match trigger width (replicates sp-picker behavior) */
+  _setPopoverWidth(/** @type {any} */ e) {
+    const group = this.querySelector(".jx-combobox-group");
+    const w = group ? /** @type {HTMLElement} */ (group).offsetWidth : 0;
+    const popover = e.target.querySelector("sp-popover");
+    if (popover && w) popover.style.minWidth = `${w}px`;
+  }
+
+  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}
+          @click=${(/** @type {Event} */ e) => 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>
+    `;
+  }
+}

package/src/ui/spectrum.js

@@ -0,0 +1,238 @@
+/**
+ * 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 scaleMediumCSS from "@spectrum-web-components/theme/src/scale-medium.css.js";
+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";
+import { Tooltip } from "@spectrum-web-components/tooltip/src/Tooltip.js";
+import { Overlay } from "@spectrum-web-components/overlay/src/Overlay.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";
+
+// Icons
+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 { IconRefresh } from "@spectrum-web-components/icons-workflow/src/elements/IconRefresh.js";
+import { IconAdd } from "@spectrum-web-components/icons-workflow/src/elements/IconAdd.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 { IconBack } from "@spectrum-web-components/icons-workflow/src/elements/IconBack.js";
+import { IconProperties } from "@spectrum-web-components/icons-workflow/src/elements/IconProperties.js";
+import { IconEvent } from "@spectrum-web-components/icons-workflow/src/elements/IconEvent.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 { 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 { 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";
+
+// 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";
+
+// Custom studio components
+import { JxStyledCombobox } from "./jx-styled-combobox.js";
+
+// 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-tooltip", Tooltip],
+  ["sp-overlay", Overlay],
+  ["sp-picker-button", PickerButton],
+  ["sp-accordion", Accordion],
+  ["sp-accordion-item", AccordionItem],
+  ["sp-action-bar", ActionBar],
+  ["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-refresh", IconRefresh],
+  ["sp-icon-add", IconAdd],
+  ["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-back", IconBack],
+  ["sp-icon-properties", IconProperties],
+  ["sp-icon-event", IconEvent],
+  ["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-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-view-column", IconViewColumn],
+  ["sp-icon-box", IconBox],
+  ["sp-icon-visibility", IconVisibility],
+  ["sp-icon-visibility-off", IconVisibilityOff],
+  ["sp-icon-artboard", IconArtboard],
+  ["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-styled-combobox", JxStyledCombobox],
+];
+
+for (const [tag, ctor] of /** @type {[string, CustomElementConstructor][]} */ (components)) {
+  if (!customElements.get(tag)) defineElement(tag, /** @type {any} */ (ctor));
+}
+
+// Register theme fragments (these are also side-effect-only in the original modules)
+Theme.registerThemeFragment("spectrum", "system", themeSpectrumCSS);
+Theme.registerThemeFragment("dark", "color", themeDarkCSS);
+Theme.registerThemeFragment("medium", "scale", scaleMediumCSS);
+
+export { components };

package/src/utils/studio-utils.js

@@ -0,0 +1,185 @@
+/**
+ * Studio-utils.js — Pure utility functions extracted from studio.js
+ *
+ * These are all side-effect-free functions used by style/properties/events panels.
+ */
+
+/**
+ * CamelCase → kebab-case for inline style attributes
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+export function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (/** @type {string} */ c) => "-" + c.toLowerCase());
+}
+
+/**
+ * Convert camelCase property name to "Title Case" label (e.g. "backgroundColor" → "Background
+ * Color")
+ *
+ * @param {string} prop
+ * @returns {string}
+ */
+export function camelToLabel(prop) {
+  return prop
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (/** @type {string} */ c) => c.toUpperCase());
+}
+
+/**
+ * Convert a kebab-case CSS value to Title Case for picker display (e.g. "border-box" → "Border
+ * Box")
+ *
+ * @param {string} val
+ * @returns {string}
+ */
+export function kebabToLabel(val) {
+  return val.replace(
+    /(^|-)(\w)/g,
+    (/** @type {string} */ _, /** @type {string} */ sep, /** @type {string} */ c) =>
+      (sep ? " " : "") + c.toUpperCase(),
+  );
+}
+
+/**
+ * Get display label from metadata entry or prop name
+ *
+ * @param {any} entry
+ * @param {string} prop
+ * @returns {string}
+ */
+export function propLabel(entry, prop) {
+  return entry?.$label || camelToLabel(prop);
+}
+
+/**
+ * Label for HTML attributes — handles kebab-case (aria-label → "Aria Label")
+ *
+ * @param {any} entry
+ * @param {string} attr
+ * @returns {string}
+ */
+export function attrLabel(entry, attr) {
+  if (entry?.$label) return entry.$label;
+  if (attr.includes("-"))
+    return attr.replace(
+      /(^|-)(\w)/g,
+      (/** @type {string} */ _, /** @type {string} */ sep, /** @type {string} */ c) =>
+        (sep ? " " : "") + c.toUpperCase(),
+    );
+  return camelToLabel(attr);
+}
+
+/**
+ * Abbreviate a CSS value for button-group display
+ *
+ * @param {string} val
+ * @returns {string}
+ */
+export function abbreviateValue(val) {
+  /** @type {Record<string, string>} */
+  const map = {
+    inline: "inl",
+    "inline-block": "i-blk",
+    "inline-flex": "i-flx",
+    "inline-grid": "i-grd",
+    contents: "cnt",
+    "flow-root": "flow",
+    nowrap: "no-wr",
+    "wrap-reverse": "wr-rev",
+    "flex-start": "start",
+    "flex-end": "end",
+    "space-between": "betw",
+    "space-around": "arnd",
+    "space-evenly": "even",
+    stretch: "str",
+    baseline: "base",
+    normal: "norm",
+    "row-reverse": "row-r",
+    "column-reverse": "col-r",
+    column: "col",
+  };
+  return map[val] || val;
+}
+
+/**
+ * Determine input widget type from a css-meta entry
+ *
+ * @param {any} entry
+ * @returns {string}
+ */
+export function inferInputType(entry) {
+  if (entry.$shorthand === true) return "shorthand";
+  if (entry.$input === "button-group") return "button-group";
+  if (entry.format === "color") return "color";
+  if (entry.$units !== undefined) return "number-unit";
+  if (entry.type === "number") return "number";
+  if (Array.isArray(entry.enum)) return "select";
+  if (Array.isArray(entry.examples) || Array.isArray(entry.presets)) return "combobox";
+  return "text";
+}
+
+/**
+ * Convert a human-readable name to a CSS variable name. E.g. "Geometric Humanist" →
+ * "--font-geometric-humanist"
+ *
+ * @param {string} name
+ * @param {string} prefix - E.g. "--font-"
+ * @returns {string}
+ */
+export function friendlyNameToVar(name, prefix) {
+  const slug = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+  if (!slug) return "";
+  return `${prefix}${slug}`;
+}
+
+/**
+ * Convert a CSS variable name back to a display name. E.g. "--font-geometric-humanist" with prefix
+ * "--font-" → "Geometric Humanist"
+ *
+ * @param {string} varName
+ * @param {string} prefix
+ * @returns {string}
+ */
+export function varDisplayName(varName, prefix) {
+  return (
+    varName
+      .replace(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`), "")
+      .replace(/^--/, "")
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (/** @type {any} */ c) => c.toUpperCase()) || varName
+  );
+}
+
+/**
+ * Parse a CEM type.text string into a structured descriptor.
+ *
+ * @param {string | undefined | null} typeText
+ * @returns {{ kind: "combobox"; options: string[] }
+ *   | { kind: "boolean" }
+ *   | { kind: "number" }
+ *   | { kind: "text" }}
+ */
+export function parseCemType(typeText) {
+  if (!typeText) return { kind: "text" };
+  const t = typeText
+    .trim()
+    .replace(/\s*\|\s*undefined\b/g, "")
+    .trim();
+  if (t === "boolean") return { kind: "boolean" };
+  if (t === "number") return { kind: "number" };
+  // Detect enum: "'a' | 'b' | 'c'" — pipe-separated quoted literals
+  const enumMatch = t.match(/^'[^']*'(\s*\|\s*'[^']*')+$/);
+  if (enumMatch) {
+    const options = [...t.matchAll(/'([^']*)'/g)].map((m) => m[1]);
+    return { kind: "combobox", options };
+  }
+  return { kind: "text" };
+}