@jxsuite/studio 4.1.0 → 5.1.0

package/src/ui/field-row.ts

@@ -1,249 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Field-row.js — the inspector's row vocabulary, in one module.
- *
- * Three rows, and every panel that draws one imports it from here:
- *
- * - {@link renderFieldRow} — label + widget, plus §7.1's **third notification tier** (an `error` line
- *   rendered at the control) and §6.2's **provenance chip** (where this value came from). The chip
- *   itself is `panels/provenance.ts`'s: one vocabulary, two cascades, one template.
- * - {@link renderKvRow} — an editable key/value pair with a delete affordance. Custom attributes and
- *   custom CSS properties are the same row; they were two.
- * - {@link renderStaticKvRow} — the read-only name/value line. Observed Attributes, CSS Properties
- *   and CSS Parts each hand-wrote it with the same inline style declarations.
- *
- * **The error line.** The other two notification tiers are hosted records in `services/notify.ts`:
- * a toast is taken away on a timer, a problem is kept until somebody fixes it. An inline error is
- * neither, because it is not a record at all — it is a property of the value currently in the
- * field, and it lives exactly as long as that value does. Which is the point: a rejected value used
- * to be announced in a three-second grey line at the bottom of the window, hundreds of pixels from
- * the field that rejected it, and by the time you looked down the field had snapped back and the
- * reason was gone.
- *
- * **Validated on commit, never on input** (§7.1). Producers decide a value is bad on `change` or
- * blur, not on `input` — a field cannot spend the middle of every word telling you it is wrong.
- */
-
-import { html, nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
-import { renderProvenanceChip } from "../panels/provenance";
-
-import type { FieldProvenance } from "../panels/provenance";
-
-// ─── The field row ───────────────────────────────────────────────────────────
-
-/** Options for {@link renderFieldRow}. */
-export interface FieldRowOptions {
-  prop: string;
-  label: string;
-  hasValue: boolean;
-  onClear?: () => void;
-  widget: unknown;
-  /** Rendered after the label inside the label cell (e.g. the dynamic-slot mode button). */
-  labelExtra?: unknown;
-  span?: number;
-  warning?: boolean;
-  /**
-   * Where this value came from (§6.2). When omitted the row derives the `set`/`default` pair from
-   * `hasValue` and `onClear`, which is what every caller meant by them all along; a caller that can
-   * answer the richer question passes the answer.
-   */
-  provenance?: FieldProvenance | undefined;
-  /**
-   * Why the value in this control is not acceptable — §7.1's inline tier.
-   *
-   * Rendered under the widget in danger colour with `role="alert"`, so a screen reader announces it
-   * when it appears. Presence also marks the row invalid, so the state is legible without reading:
-   * `warning` says "this is unusual", `error` says "this is refused".
-   *
-   * Empty string and `undefined` both mean "no error", so a producer can pass its validator's
-   * output straight through without a ternary.
-   */
-  error?: string | undefined;
-  /**
-   * How many times this value has been refused in a row — the "message + counter" §7.1 asks for.
-   *
-   * A repeat count is the difference between "the field is still red from last time" and "it just
-   * refused me again", which is otherwise invisible when the second attempt fails the same way.
-   * Rendered from 2 up.
-   */
-  errorCount?: number | undefined;
-}
-
-/**
- * Render a universal field row with a provenance chip, label, widget, and an optional inline error.
- *
- * @param {FieldRowOptions} opts
- * @returns {import("lit-html").TemplateResult}
- */
-export function renderFieldRow({
-  prop,
-  label,
-  hasValue,
-  onClear,
-  widget,
-  labelExtra,
-  span,
-  warning,
-  provenance,
-  error,
-  errorCount,
-}: FieldRowOptions) {
-  const invalid = Boolean(error);
-  const chip: FieldProvenance | undefined =
-    provenance ??
-    (hasValue && onClear ? { onClick: onClear, state: "set", title: `Clear ${prop}` } : undefined);
-  return html`
-    <div
-      class=${classMap({
-        "style-row": true,
-        "style-row--invalid": invalid,
-        "style-row--warning": Boolean(warning) && !invalid,
-      })}
-      data-prop=${prop}
-      style=${span === 2 ? "grid-column: 1 / -1" : ""}
-    >
-      <div class="style-row-label">
-        ${chip ? renderProvenanceChip(prop, chip) : nothing}
-        <sp-field-label size="s" title=${prop}>${label}</sp-field-label>
-        ${labelExtra ?? nothing}
-      </div>
-      ${widget}
-      ${
-        invalid
-          ? html`<p class="style-row-error" role="alert">
-              ${error}${
-                errorCount !== undefined && errorCount > 1
-                  ? html`<span class="style-row-error-count">×${errorCount}</span>`
-                  : nothing
-              }
-            </p>`
-          : nothing
-      }
-    </div>
-  `;
-}
-
-// ─── The editable key/value row ──────────────────────────────────────────────
-
-/** Options for {@link renderKvRow}. */
-export interface KvRowOptions {
-  /** The pair's current key. */
-  name: string;
-  /** The pair's current value. */
-  value: string;
-  /** Commit both cells, debounced, with the current contents of each. */
-  onCommit: (name: string, value: string) => void;
-  /** Remove the pair outright. */
-  onDelete: () => void;
-  /**
-   * The value cell's placeholder, resolved from the key — a CSS property's initial value, say.
-   *
-   * A resolver rather than a string because the key is editable: typing `display` into the key cell
-   * should offer `inline` under it before anything is committed, and only the caller knows the
-   * map.
-   */
-  placeholderFor?: ((name: string) => string) | undefined;
-  /** Debounce before {@link KvRowOptions.onCommit}, in ms. */
-  debounceMs?: number;
-}
-
-/**
- * An editable key/value pair with a delete affordance — the ONE implementation.
- *
- * Custom HTML attributes and custom CSS properties are the same row and were written twice, with
- * different rename behaviour (one committed on `input`, the other on `change`) and different
- * placeholder plumbing. They now differ only in what they pass in.
- *
- * @param {KvRowOptions} opts
- */
-export function renderKvRow({
-  name,
-  value,
-  onCommit,
-  onDelete,
-  placeholderFor,
-  debounceMs = 400,
-}: KvRowOptions) {
-  let debounce: ReturnType<typeof setTimeout> | undefined;
-  let currentName = name;
-  let currentValue = value;
-  const commit = () => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => onCommit(currentName, currentValue), debounceMs);
-  };
-  return html`
-    <div class="kv-row" data-prop=${name}>
-      <sp-textfield
-        size="s"
-        class="kv-key"
-        .value=${name}
-        @input=${(e: Event) => {
-          currentName = (e.target as HTMLInputElement).value;
-          commit();
-        }}
-        @change=${
-          placeholderFor
-            ? (e: Event) => {
-                const cell = (e.target as HTMLInputElement)
-                  .closest(".kv-row")
-                  ?.querySelector(".kv-val");
-                cell?.setAttribute(
-                  "placeholder",
-                  placeholderFor((e.target as HTMLInputElement).value),
-                );
-              }
-            : nothing
-        }
-      ></sp-textfield>
-      <sp-textfield
-        size="s"
-        class="kv-val"
-        .value=${value}
-        placeholder=${placeholderFor ? placeholderFor(name) : ""}
-        @input=${(e: Event) => {
-          currentValue = (e.target as HTMLInputElement).value;
-          commit();
-        }}
-      ></sp-textfield>
-      <sp-action-button size="xs" quiet title="Remove ${name}" @click=${onDelete}>
-        <sp-icon-close slot="icon"></sp-icon-close>
-      </sp-action-button>
-    </div>
-  `;
-}
-
-// ─── The read-only key/value row ─────────────────────────────────────────────
-
-/** Options for {@link renderStaticKvRow}. */
-export interface StaticKvRowOptions {
-  /** The thing being named — an attribute, a custom property, a part. Rendered as code. */
-  name: string;
-  /** What it maps to, rendered immediately after the name ("→ count", "<button>"). */
-  detail?: string | undefined;
-  /** Its value or type, rendered hard right. */
-  value?: string | undefined;
-  /** Flags, rendered hard right after the value ("reflects"). */
-  tags?: readonly string[] | undefined;
-}
-
-/**
- * A read-only name/value line.
- *
- * Observed Attributes, CSS Properties and CSS Parts each hand-wrote this with the same
- * `display:flex;gap:6px;align-items:center;padding:2px 0;font-size:…` inline block — three copies
- * of one row, none of them addressable by a stylesheet, and so none of them able to respond to the
- * theme. They differ only in which of the three slots they fill.
- *
- * @param {StaticKvRowOptions} opts
- */
-export function renderStaticKvRow({ name, detail, value, tags }: StaticKvRowOptions) {
-  return html`
-    <div class="kv-static-row" data-prop=${name}>
-      <code class="kv-static-name">${name}</code>
-      ${detail ? html`<span class="kv-static-detail">${detail}</span>` : nothing}
-      ${value ? html`<span class="kv-static-value">${value}</span>` : nothing}
-      ${(tags ?? []).map((tag) => html`<span class="kv-static-tag">${tag}</span>`)}
-    </div>
-  `;
-}

package/src/ui/formula-palette.ts

@@ -1,213 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Formula palette — a command-palette overlay for browsing/searching the formula catalog (spec
- * §19.9). Clones the quick-search pattern: a plain overlay div (no nested sp-overlay), a search
- * field, grouped results, and keyboard navigation. Picking an entry calls `onPick` with it; the
- * caller decides what to insert.
- */
-
-import { html, render as litRender, nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map.js";
-import { live } from "lit-html/directives/live.js";
-import { ref } from "lit-html/directives/ref.js";
-import { getLayerSlot } from "./layers";
-import { rectOf } from "../utils/geometry";
-
-import type { FormulaCatalogEntry } from "./formula-catalog";
-
-export interface FormulaPaletteOpts {
-  entries: FormulaCatalogEntry[];
-  onPick: (entry: FormulaCatalogEntry) => void;
-  /** Optional anchor element the panel is positioned under; centered when absent. */
-  anchor?: HTMLElement | null;
-}
-
-let _open = false;
-let _opts: FormulaPaletteOpts | null = null;
-let _query = "";
-let _selectedIndex = 0;
-
-function getContainer() {
-  return getLayerSlot("popover", "formula-palette");
-}
-
-export function openFormulaPalette(opts: FormulaPaletteOpts) {
-  _open = true;
-  _opts = opts;
-  _query = "";
-  _selectedIndex = 0;
-  renderOverlay();
-}
-
-export function closeFormulaPalette() {
-  _open = false;
-  _opts = null;
-  renderOverlay();
-}
-
-/** Entries matching the current query (label, name, group, or description substring). */
-function filteredEntries(): FormulaCatalogEntry[] {
-  const entries = _opts?.entries ?? [];
-  const needle = _query.trim().toLowerCase();
-  if (!needle) {
-    return entries;
-  }
-  return entries.filter(
-    (e) =>
-      e.label.toLowerCase().includes(needle) ||
-      e.name.toLowerCase().includes(needle) ||
-      e.group.toLowerCase().includes(needle) ||
-      e.description.toLowerCase().includes(needle),
-  );
-}
-
-/** Group entries for display, preserving first-seen group order. */
-function groupedEntries(entries: FormulaCatalogEntry[]): [string, FormulaCatalogEntry[]][] {
-  const groups = new Map<string, FormulaCatalogEntry[]>();
-  for (const entry of entries) {
-    const bucket = groups.get(entry.group);
-    if (bucket) {
-      bucket.push(entry);
-    } else {
-      groups.set(entry.group, [entry]);
-    }
-  }
-  return [...groups.entries()];
-}
-
-function pickEntry(entry: FormulaCatalogEntry) {
-  const opts = _opts;
-  closeFormulaPalette();
-  opts?.onPick(entry);
-}
-
-function onInput(e: Event) {
-  _query = (e.target as HTMLInputElement).value;
-  _selectedIndex = 0;
-  renderOverlay();
-}
-
-function onKeydown(e: KeyboardEvent) {
-  const entries = filteredEntries();
-  switch (e.key) {
-    case "ArrowDown": {
-      e.preventDefault();
-      _selectedIndex = Math.min(_selectedIndex + 1, entries.length - 1);
-      renderOverlay();
-      break;
-    }
-    case "ArrowUp": {
-      e.preventDefault();
-      _selectedIndex = Math.max(_selectedIndex - 1, 0);
-      renderOverlay();
-      break;
-    }
-    case "Enter": {
-      e.preventDefault();
-      if (entries[_selectedIndex]) {
-        pickEntry(entries[_selectedIndex]!);
-      }
-      break;
-    }
-    case "Escape": {
-      e.preventDefault();
-      closeFormulaPalette();
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-/** Inline position style for the panel when anchored to an element. */
-function panelStyle(): string {
-  const anchor = _opts?.anchor;
-  if (!anchor) {
-    return "";
-  }
-  const rect = rectOf(anchor);
-  if (!rect || (rect.top === 0 && rect.left === 0 && rect.width === 0)) {
-    return "";
-  }
-  const left = Math.max(8, Math.min(rect.left, (globalThis.innerWidth || 1200) - 568));
-  return `position:fixed;left:${left}px;top:${rect.bottom + 4}px;margin:0`;
-}
-
-function renderOverlay() {
-  const container = getContainer();
-  if (!_open) {
-    litRender(nothing, container);
-    return;
-  }
-
-  const entries = filteredEntries();
-  const groups = groupedEntries(entries);
-  const hasQuery = _query.trim().length > 0;
-
-  const tpl = html`
-    <div class="quick-search-overlay formula-palette-overlay" @click=${closeFormulaPalette}>
-      <div
-        class="quick-search-panel formula-palette"
-        style=${panelStyle()}
-        @click=${(e: Event) => e.stopPropagation()}
-      >
-        <input
-          class="quick-search-input formula-palette-input"
-          type="text"
-          placeholder="Search formulas, operators, globals…"
-          .value=${live(_query)}
-          @input=${onInput}
-          @keydown=${onKeydown}
-          ${ref((el) => {
-            if (el) {
-              requestAnimationFrame(() => (el as HTMLInputElement).focus());
-            }
-          })}
-        />
-        <div class="quick-search-results">
-          ${
-            entries.length === 0
-              ? html`<div class="quick-search-empty">
-                  ${hasQuery ? "No results" : "No entries available"}
-                </div>`
-              : nothing
-          }
-          ${groups.map(
-            ([group, groupEntries]) => html`
-              <div class="quick-search-section-label">${group}</div>
-              ${groupEntries.map((entry) => {
-                const index = entries.indexOf(entry);
-                return html`
-                  <div
-                    class=${classMap({
-                      "quick-search-item": true,
-                      selected: index === _selectedIndex,
-                    })}
-                    @click=${() => pickEntry(entry)}
-                    @mouseenter=${() => {
-                      _selectedIndex = index;
-                      renderOverlay();
-                    }}
-                  >
-                    <span
-                      class="quick-search-name"
-                      style="font-family:var(--spectrum-code-font-family, monospace)"
-                      >${entry.label}</span
-                    >
-                    <span class="quick-search-path" title=${entry.description}
-                      >${entry.description}</span
-                    >
-                    <span class="quick-search-badge">${entry.kind}</span>
-                  </div>
-                `;
-              })}
-            `,
-          )}
-        </div>
-      </div>
-    </div>
-  `;
-
-  litRender(tpl, container);
-}

package/src/ui/icons.ts

@@ -1,52 +0,0 @@
-// 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";
-
-export 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>`,
-};

package/src/ui/jx-theme.ts

@@ -1,130 +0,0 @@
-/**
- * Jx brand theme fragment.
- *
- * Registered as the Spectrum 'app' fragment (see spectrum.ts), so it is adopted into every
- * <sp-theme> shadow root _after_ the system/color/scale fragments and wins the :host cascade. It
- * rebrands the stock Spectrum themes by overriding only the palette `-rgb` triplets: every derived
- * token in the published theme CSS (accent, focus ring, background layers, alpha-composed tints)
- * resolves through `rgba(var(--spectrum-*-rgb))`, so the whole theme follows coherently.
- *
- * Canonical brand values: sites/jxsuite.com/project.json (accent #3b82f6, accent-hover #60a5fa,
- * neutral surfaces #0a0a0a / #111111 / #1a1a1a / #222222). Intermediate stops interpolate along the
- * Tailwind blue/zinc ramps the brand palette derives from.
- *
- * **One fragment, two ramps.** The 'app' kind is registered once and adopted whatever `color` is,
- * so the brand values have to say which theme they are for or they re-invert the theme they were
- * adopted into — which is precisely what happened: this file's dark ramp used to sit on a bare
- * `:host`, so `color="light"` would have been re-darkened stop for stop even once the light
- * fragment was registered. The dark ramp stays on `:host` because it is the default the app boots
- * in (`index.html`, `DEFAULT_THEME`); light overrides it under `:host([color="light"])`, which
- * `<sp-theme>` reflects. Every stop overridden below is overridden in BOTH ramps — a stop present
- * in one and missing from the other reads the other theme's brand value.
- *
- * A Spectrum ramp is ordered by the theme's own background, not by luminance: in dark, gray 50 is
- * the darkest surface and 900 the lightest ink; in light the two ends swap. So the light ramp is
- * not the dark one reversed — it is the same brand zinc/blue scale re-anchored to the semantic
- * roles Spectrum's light theme assigns each stop.
- *
- * Dark-theme stop order: gray 50 (darkest) -> 900 (lightest); blue 100 (darkest) -> 1400
- * (lightest). Semantic anchors under this ramp:
- *
- * - Accent button fill = accent-500 (white text ~5.2:1)
- * - Focus ring = blue-800 (brand accent-hover)
- * - Studio --accent = accent-700 (exact brand blue)
- * - Accent content/visual = accent-900 (soft on-dark tint)
- */
-
-import { css } from "@spectrum-web-components/base";
-
-export const jxTheme = css`
-  :host {
-    /* Neutral (gray) ramp — Jx near-black surfaces and zinc text tones */
-    --spectrum-gray-50-rgb: 10, 10, 10; /* #0a0a0a bg-primary / base */
-    --spectrum-gray-75-rgb: 17, 17, 17; /* #111111 bg-secondary / layer-1 */
-    --spectrum-gray-100-rgb: 26, 26, 26; /* #1a1a1a surface / layer-2 */
-    --spectrum-gray-200-rgb: 34, 34, 34; /* #222222 border / surface-hover */
-    --spectrum-gray-300-rgb: 63, 63, 70; /* #3f3f46 strong border */
-    --spectrum-gray-400-rgb: 82, 82, 91; /* #52525b component border */
-    --spectrum-gray-500-rgb: 113, 113, 122; /* #71717a text-muted */
-    --spectrum-gray-600-rgb: 161, 161, 170; /* #a1a1aa text-secondary */
-    --spectrum-gray-700-rgb: 212, 212, 216; /* #d4d4d8 subtle text */
-    --spectrum-gray-800-rgb: 228, 228, 231; /* #e4e4e7 primary text */
-    --spectrum-gray-900-rgb: 250, 250, 250; /* #fafafa ink / headings */
-
-    /* Blue ramp — drives accent, informative, and the focus indicator */
-    --spectrum-blue-100-rgb: 23, 37, 84; /* #172554 */
-    --spectrum-blue-200-rgb: 30, 58, 138; /* #1e3a8a */
-    --spectrum-blue-300-rgb: 30, 64, 175; /* #1e40af */
-    --spectrum-blue-400-rgb: 29, 78, 216; /* #1d4ed8 */
-    --spectrum-blue-500-rgb: 37, 99, 235; /* #2563eb accent button fill */
-    --spectrum-blue-600-rgb: 48, 112, 241; /* #3070f1 */
-    --spectrum-blue-700-rgb: 59, 130, 246; /* #3b82f6 brand accent */
-    --spectrum-blue-800-rgb: 96, 165, 250; /* #60a5fa accent-hover / focus */
-    --spectrum-blue-900-rgb: 147, 197, 253; /* #93c5fd soft on-dark accent */
-    --spectrum-blue-1000-rgb: 191, 219, 254; /* #bfdbfe */
-    --spectrum-blue-1100-rgb: 219, 234, 254; /* #dbeafe */
-    --spectrum-blue-1200-rgb: 239, 246, 255; /* #eff6ff */
-    --spectrum-blue-1300-rgb: 248, 250, 252; /* #f8fafc */
-    --spectrum-blue-1400-rgb: 255, 255, 255; /* #ffffff */
-
-    /* Brand font stacks. Sans drops adobe-clean so Adobe Clean never renders
-       on machines that have it installed; mono leads with the vendored
-       JetBrains Mono (see index.html @font-face). Theme-independent — they
-       stay outside the per-colour blocks below. */
-    --spectrum-sans-font-family-stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    --spectrum-code-font-family-stack:
-      "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
-  }
-
-  /*
-   * Light-theme stop order: gray 50 (lightest) -> 900 (darkest); blue 100 (lightest) -> 1400
-   * (darkest). Semantic anchors under this ramp, and how they differ from dark:
-   *
-   * - Studio --bg = layer-1 = gray-100, --bg-panel = layer-2 = gray-50. Spectrum's light theme
-   *   maps the layers the other way up from its dark one, so a panel is LIGHTER than the app
-   *   behind it here and darker there. The semantic layer in tokens.css needs no branch for that.
-   * - Studio --fg = neutral-content-color-default = gray-800; --fg-dim = gray-600.
-   * - Studio --accent = accent-700 = #2563eb, one stop down the brand ramp from #3b82f6. The brand
-   *   blue itself is blue-600 here, still the hue everything reads as. The step is a CONTRAST
-   *   decision: the exact brand blue is 3.1:1 on the light app background — it clears the 3:1 WCAG
-   *   2.2 SC 1.4.11 asks of a control boundary and misses the 4.5:1 SC 1.4.3 asks of the label on
-   *   an accent button by more than the dark theme does. #2563eb is 4.7:1 on the background and
-   *   carries white text at 5.2:1, so the light theme ships without the debt the dark one carries.
-   * - Focus ring / accent-hover = blue-800 = #1d4ed8: on light a hover DARKENS, where on dark it
-   *   lightens, so this is not the same hex as the dark theme's hover and should not be.
-   *
-   * Every other hue (red, green, orange, purple, indigo, seafoam, celery) is left to Spectrum's
-   * own light ramp, which already inverts: --danger, --success, --warning and the data-explorer
-   * syntax colours become dark-on-light with nothing to do here.
-   */
-  :host([color="light"]) {
-    /* Neutral (gray) ramp — the brand zinc tones, re-anchored to light surfaces */
-    --spectrum-gray-50-rgb: 255, 255, 255; /* #ffffff panel / layer-2 */
-    --spectrum-gray-75-rgb: 250, 250, 250; /* #fafafa */
-    --spectrum-gray-100-rgb: 244, 244, 245; /* #f4f4f5 app background / layer-1 */
-    --spectrum-gray-200-rgb: 228, 228, 231; /* #e4e4e7 border / surface-hover */
-    --spectrum-gray-300-rgb: 212, 212, 216; /* #d4d4d8 strong border */
-    --spectrum-gray-400-rgb: 161, 161, 170; /* #a1a1aa component border */
-    --spectrum-gray-500-rgb: 113, 113, 122; /* #71717a text-muted */
-    --spectrum-gray-600-rgb: 82, 82, 91; /* #52525b text-secondary */
-    --spectrum-gray-700-rgb: 63, 63, 70; /* #3f3f46 subtle text */
-    --spectrum-gray-800-rgb: 39, 39, 42; /* #27272a primary text */
-    --spectrum-gray-900-rgb: 10, 10, 10; /* #0a0a0a ink / headings */
-
-    /* Blue ramp — drives accent, informative, and the focus indicator */
-    --spectrum-blue-100-rgb: 239, 246, 255; /* #eff6ff */
-    --spectrum-blue-200-rgb: 219, 234, 254; /* #dbeafe */
-    --spectrum-blue-300-rgb: 191, 219, 254; /* #bfdbfe */
-    --spectrum-blue-400-rgb: 147, 197, 253; /* #93c5fd */
-    --spectrum-blue-500-rgb: 96, 165, 250; /* #60a5fa */
-    --spectrum-blue-600-rgb: 59, 130, 246; /* #3b82f6 brand accent */
-    --spectrum-blue-700-rgb: 37, 99, 235; /* #2563eb studio --accent */
-    --spectrum-blue-800-rgb: 29, 78, 216; /* #1d4ed8 accent-hover / focus */
-    --spectrum-blue-900-rgb: 30, 64, 175; /* #1e40af strong on-light accent */
-    --spectrum-blue-1000-rgb: 30, 58, 138; /* #1e3a8a */
-    --spectrum-blue-1100-rgb: 23, 37, 84; /* #172554 */
-    --spectrum-blue-1200-rgb: 16, 26, 60; /* #101a3c */
-    --spectrum-blue-1300-rgb: 10, 17, 38; /* #0a1126 */
-    --spectrum-blue-1400-rgb: 5, 8, 19; /* #050813 */
-  }
-`;