@manzanohq/theme-editor 0.1.7

package/dist/theme-editor.component.js

@@ -0,0 +1,910 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, css, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ManzanoElement } from "../../components/src/internal/manzano-element.js";
+const DEFAULT_TOKENS = {
+  // Brand & Semantic
+  "--mz-color-primary": "#4260a8",
+  "--mz-color-action": "#4260a8",
+  "--mz-color-on-action": "#ffffff",
+  "--mz-color-focus": "#4260a8",
+  "--mz-color-selected": "#4260a8",
+  "--mz-color-on-selected": "#ffffff",
+  "--mz-color-link": "#4260a8",
+  // Surfaces
+  "--mz-color-surface": "#ffffff",
+  "--mz-color-surface-raised": "#faf9f7",
+  "--mz-color-text": "#1c1915",
+  "--mz-color-text-secondary": "#79726b",
+  "--mz-color-border": "#d5d1cb",
+  // Status
+  "--mz-color-success": "#2d8556",
+  "--mz-color-warning": "#d59724",
+  "--mz-color-danger": "#c04b34",
+  "--mz-color-neutral": "#433d37",
+  // Typography & Spacing
+  "--mz-font-sans": "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+  "--mz-space-scale": "1",
+  "--mz-font-size-scale": "1",
+  // Shape
+  "--mz-radius-sm": "6px",
+  "--mz-radius-md": "8px",
+  "--mz-radius-lg": "12px",
+  "--mz-border-width-sm": "1px",
+  "--mz-input-bg": "#ffffff",
+  "--mz-input-border-width": "1px",
+  // Shadows
+  "--mz-shadow-sm": "0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)",
+  "--mz-shadow-md": "0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)",
+  "--mz-shadow-lg": "0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)"
+};
+const SHADOW_PRESETS = {
+  none: {
+    sm: "none",
+    md: "none",
+    lg: "none"
+  },
+  subtle: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.04)",
+    md: "0 2px 4px -1px rgb(0 0 0 / 0.06)",
+    lg: "0 6px 12px -3px rgb(0 0 0 / 0.08)"
+  },
+  medium: {
+    sm: "0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)",
+    md: "0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)",
+    lg: "0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)"
+  },
+  dramatic: {
+    sm: "0 2px 6px 0 rgb(0 0 0 / 0.16), 0 1px 3px -1px rgb(0 0 0 / 0.12)",
+    md: "0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.14)",
+    lg: "0 20px 40px -8px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.15)"
+  }
+};
+const TABS = [
+  { id: "colors", label: "Colors" },
+  { id: "typography", label: "Typography & Spacing" },
+  { id: "shape", label: "Shape" },
+  { id: "shadows", label: "Shadows" }
+];
+const editorStyles = css`
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+
+    /* Editor chrome — light mode defaults */
+    --_editor-bg: #f6f6f7;
+    --_editor-bg-raised: #ffffff;
+    --_editor-text: #1a1a1a;
+    --_editor-text-secondary: #666;
+    --_editor-text-muted: #999;
+    --_editor-border: #e0e0e0;
+    --_editor-accent: #4260a8;
+    --_editor-input-bg: #ffffff;
+    --_editor-tab-bg: #eeeeef;
+
+    color: var(--_editor-text);
+  }
+
+  /* Dark mode — activated via JS-set [dark] attribute on :host */
+  :host([dark]) {
+    --_editor-bg: #1a1a1d;
+    --_editor-bg-raised: #252528;
+    --_editor-text: #e4e4e7;
+    --_editor-text-secondary: #a1a1a8;
+    --_editor-text-muted: #71717a;
+    --_editor-border: #333336;
+    --_editor-accent: #818cf8;
+    --_editor-input-bg: #252528;
+    --_editor-tab-bg: #141416;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* ---- Full-width mode ---- */
+  :host([full-width]) .editor {
+    border: none;
+    border-radius: 0;
+  }
+
+  :host([full-width]) .editor__controls {
+    max-width: none;
+  }
+
+  /* ---- Layout ---- */
+  .editor {
+    display: flex;
+    height: 100%;
+    min-height: 540px;
+    border: 1px solid var(--_editor-border);
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--_editor-bg);
+  }
+
+  .editor__controls {
+    width: 40%;
+    min-width: 300px;
+    max-width: 480px;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--_editor-border);
+    overflow: hidden;
+  }
+
+  .editor__preview {
+    flex: 1;
+    overflow: auto;
+    background: var(--_editor-bg-raised);
+  }
+
+  /* ---- Tabs ---- */
+  .tabs {
+    display: flex;
+    background: var(--_editor-tab-bg);
+    border-bottom: 1px solid var(--_editor-border);
+    padding: 0;
+    margin: 0;
+    flex-shrink: 0;
+  }
+
+  .tabs__btn {
+    flex: 1;
+    padding: 8px 6px;
+    border: none;
+    background: transparent;
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--_editor-text-secondary);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    white-space: nowrap;
+  }
+
+  .tabs__btn:hover {
+    color: var(--_editor-text);
+  }
+
+  .tabs__btn--active {
+    color: var(--_editor-accent);
+    border-bottom-color: var(--_editor-accent);
+    background: var(--_editor-bg-raised);
+  }
+
+  /* ---- Controls panel ---- */
+  .controls {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--_editor-text-muted);
+    margin: 16px 0 8px;
+  }
+
+  .section-label:first-child {
+    margin-top: 0;
+  }
+
+  .section-desc {
+    font-size: 11px;
+    color: var(--_editor-text-muted);
+    margin: -4px 0 12px;
+    line-height: 1.4;
+  }
+
+  /* ---- Field row ---- */
+  .field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .field__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .field__label {
+    font-size: 12px;
+    color: var(--_editor-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  .field__desc {
+    display: block;
+    font-size: 10px;
+    color: var(--_editor-text-muted);
+    line-height: 1.3;
+    margin-top: 1px;
+  }
+
+  .field__control {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  /* ---- Color input ---- */
+  input[type='color'] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 32px;
+    height: 28px;
+    border: 1px solid var(--_editor-border);
+    border-radius: 4px;
+    padding: 1px;
+    cursor: pointer;
+    background: var(--_editor-input-bg);
+  }
+
+  input[type='color']::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type='color']::-webkit-color-swatch {
+    border: none;
+    border-radius: 3px;
+  }
+
+  /* ---- Hex text input ---- */
+  .hex-input {
+    width: 76px;
+    padding: 4px 6px;
+    border: 1px solid var(--_editor-border);
+    border-radius: 4px;
+    font-family: SFMono-Regular, Consolas, monospace;
+    font-size: 12px;
+    color: var(--_editor-text);
+    background: var(--_editor-input-bg);
+  }
+
+  .hex-input:focus {
+    outline: 2px solid var(--_editor-accent);
+    outline-offset: -1px;
+    border-color: var(--_editor-accent);
+  }
+
+  /* ---- Text input ---- */
+  .text-input {
+    width: 100%;
+    padding: 5px 8px;
+    border: 1px solid var(--_editor-border);
+    border-radius: 4px;
+    font: inherit;
+    font-size: 12px;
+    color: var(--_editor-text);
+    background: var(--_editor-input-bg);
+  }
+
+  .text-input:focus {
+    outline: 2px solid var(--_editor-accent);
+    outline-offset: -1px;
+    border-color: var(--_editor-accent);
+  }
+
+  /* ---- Range slider ---- */
+  .range-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .range-row__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .range-row__label {
+    font-size: 12px;
+    color: var(--_editor-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  .range-row__desc {
+    display: block;
+    font-size: 10px;
+    color: var(--_editor-text-muted);
+    line-height: 1.3;
+    margin-top: 1px;
+  }
+
+  .range-row__slider {
+    width: 120px;
+    accent-color: var(--_editor-accent);
+  }
+
+  .range-row__value {
+    font-size: 11px;
+    font-family: SFMono-Regular, Consolas, monospace;
+    color: var(--_editor-text-muted);
+    width: 44px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  /* ---- Font text field (full-width) ---- */
+  .font-field {
+    margin-bottom: 10px;
+  }
+
+  .font-field__label {
+    display: block;
+    font-size: 12px;
+    color: var(--_editor-text-secondary);
+    margin-bottom: 2px;
+  }
+
+  .font-field__desc {
+    display: block;
+    font-size: 10px;
+    color: var(--_editor-text-muted);
+    line-height: 1.3;
+    margin-bottom: 4px;
+  }
+
+  /* ---- Shadow radio presets ---- */
+  .shadow-presets {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .shadow-preset {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border: 1px solid var(--_editor-border);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+    background: var(--_editor-bg-raised);
+  }
+
+  .shadow-preset:hover {
+    border-color: var(--_editor-text-muted);
+  }
+
+  .shadow-preset--selected {
+    border-color: var(--_editor-accent);
+    background: color-mix(in srgb, var(--_editor-accent) 8%, var(--_editor-bg-raised));
+  }
+
+  .shadow-preset__radio {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid var(--_editor-border);
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .shadow-preset--selected .shadow-preset__radio {
+    border-color: var(--_editor-accent);
+  }
+
+  .shadow-preset--selected .shadow-preset__radio::after {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--_editor-accent);
+  }
+
+  .shadow-preset__label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--_editor-text);
+  }
+
+  .shadow-preset__demo {
+    width: 28px;
+    height: 20px;
+    background: var(--_editor-bg-raised);
+    border-radius: 3px;
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  /* ---- Preview area ---- */
+  .preview {
+    padding: 24px;
+    min-height: 100%;
+    background: var(--mz-color-surface-raised, #faf9f7);
+  }
+
+  .preview-section {
+    margin-bottom: 24px;
+  }
+
+  .preview-section__title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--mz-color-text-secondary, #79726b);
+    margin: 0 0 12px;
+    font-family: var(--mz-font-sans, inherit);
+  }
+
+  .preview-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .preview-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+
+  .preview-link {
+    color: var(--mz-color-link, #4260a8);
+    text-decoration: underline;
+    font-family: var(--mz-font-sans, inherit);
+    font-size: var(--mz-font-size-sm, 0.875rem);
+    cursor: pointer;
+  }
+
+  .preview-link:hover {
+    opacity: 0.8;
+  }
+
+  .preview-card-wrapper {
+    margin-top: 16px;
+  }
+`;
+class MzThemeEditor extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.themeName = "custom-theme";
+    this.fullWidth = false;
+    this.activeTab = "colors";
+    this.tokens = { ...DEFAULT_TOKENS };
+    this.shadowPreset = "medium";
+    this._syncDarkMode = () => {
+      const htmlTheme = document.documentElement.getAttribute("data-theme");
+      const isDark = htmlTheme === "dark" || !htmlTheme && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      if (isDark) {
+        this.setAttribute("dark", "");
+      } else {
+        this.removeAttribute("dark");
+      }
+    };
+  }
+  get value() {
+    return JSON.stringify(this.tokens);
+  }
+  set value(val) {
+    if (!val) return;
+    try {
+      const parsed = JSON.parse(val);
+      if (typeof parsed === "object" && parsed !== null) {
+        this.tokens = { ...DEFAULT_TOKENS, ...parsed };
+      }
+    } catch {
+    }
+  }
+  // ---------- Lifecycle ----------
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowPreset = this.detectShadowPreset();
+    this._syncDarkMode();
+    this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    this._darkQuery.addEventListener("change", this._syncDarkMode);
+    this._darkObserver = new MutationObserver(this._syncDarkMode);
+    this._darkObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._darkQuery?.removeEventListener("change", this._syncDarkMode);
+    this._darkObserver?.disconnect();
+  }
+  // ---------- Public methods ----------
+  /** Returns the current token map. */
+  getTokens() {
+    return { ...this.tokens };
+  }
+  /** Generates a full theme CSS file string. Only includes tokens that differ from defaults. */
+  getCSS() {
+    const selector = `[data-theme-custom="${this.themeName}"]`;
+    const lines = [];
+    for (const [key, val] of Object.entries(this.tokens)) {
+      if (val !== DEFAULT_TOKENS[key]) {
+        lines.push(`  ${key}: ${val};`);
+      }
+    }
+    if (lines.length === 0) {
+      return `${selector} {
+  /* No overrides \u2014 using Manzano defaults */
+}`;
+    }
+    return `${selector} {
+${lines.join("\n")}
+}`;
+  }
+  // ---------- Token mutation ----------
+  setToken(name, value) {
+    this.tokens = { ...this.tokens, [name]: value };
+    this.emitChange();
+  }
+  emitChange() {
+    this.emit("mz-theme-change", {
+      detail: { css: this.getCSS(), tokens: this.getTokens() }
+    });
+  }
+  // ---------- Shadow preset helpers ----------
+  detectShadowPreset() {
+    const sm = this.tokens["--mz-shadow-sm"];
+    for (const [preset, vals] of Object.entries(SHADOW_PRESETS)) {
+      if (vals.sm === sm) return preset;
+    }
+    return "medium";
+  }
+  applyShadowPreset(preset) {
+    const vals = SHADOW_PRESETS[preset];
+    this.shadowPreset = preset;
+    this.tokens = {
+      ...this.tokens,
+      "--mz-shadow-sm": vals.sm,
+      "--mz-shadow-md": vals.md,
+      "--mz-shadow-lg": vals.lg
+    };
+    this.emitChange();
+  }
+  // ---------- Render helpers: controls ----------
+  renderColorField(token, label, showHex, desc = "") {
+    const val = this.tokens[token] || "#000000";
+    return html`
+      <div class="field">
+        <div class="field__info">
+          <span class="field__label" title="${token}">${label}</span>
+          ${desc ? html`<span class="field__desc">${desc}</span>` : nothing}
+        </div>
+        <div class="field__control">
+          <input
+            type="color"
+            .value=${val}
+            @input=${(e) => this.setToken(token, e.target.value)}
+          />
+          ${showHex ? html`<input
+                class="hex-input"
+                type="text"
+                .value=${val}
+                @change=${(e) => {
+      let v = e.target.value.trim();
+      if (v && !v.startsWith("#")) v = "#" + v;
+      if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {
+        this.setToken(token, v);
+      }
+    }}
+              />` : nothing}
+        </div>
+      </div>
+    `;
+  }
+  renderRangeField(token, label, min, max, step, unit = "", desc = "") {
+    const raw = parseFloat(this.tokens[token]) || 0;
+    return html`
+      <div class="range-row">
+        <div class="range-row__info">
+          <span class="range-row__label" title="${token}">${label}</span>
+          ${desc ? html`<span class="range-row__desc">${desc}</span>` : nothing}
+        </div>
+        <input
+          class="range-row__slider"
+          type="range"
+          .min=${String(min)}
+          .max=${String(max)}
+          .step=${String(step)}
+          .value=${String(raw)}
+          @input=${(e) => {
+      const v = e.target.value;
+      this.setToken(token, unit ? `${v}${unit}` : v);
+    }}
+        />
+        <span class="range-row__value">${raw}${unit}</span>
+      </div>
+    `;
+  }
+  // ---------- Tab panels ----------
+  renderColorsTab() {
+    return html`
+      <div class="section-label">Brand &amp; Semantic</div>
+      ${this.renderColorField("--mz-color-primary", "Primary", true, "Base brand color. Fallback for action, focus, selected, link.")}
+      ${this.renderColorField("--mz-color-action", "Action", true, "Button fills, CTAs, progress indicators.")}
+      ${this.renderColorField("--mz-color-on-action", "On Action", false, "Text/icon color on action backgrounds.")}
+      ${this.renderColorField("--mz-color-focus", "Focus", true, "Focus rings and input focus borders.")}
+      ${this.renderColorField("--mz-color-selected", "Selected", true, "Checked checkboxes, switches, selected chips and cards.")}
+      ${this.renderColorField("--mz-color-on-selected", "On Selected", false, "Text/icon color on selected backgrounds.")}
+      ${this.renderColorField("--mz-color-link", "Link", true, "Text link color.")}
+
+      <div class="section-label">Surfaces</div>
+      ${this.renderColorField("--mz-color-surface", "Surface", false, "Page and card backgrounds.")}
+      ${this.renderColorField("--mz-color-surface-raised", "Surface Raised", false, "Elevated card and panel backgrounds.")}
+      ${this.renderColorField("--mz-color-text", "Text", false, "Primary body text color.")}
+      ${this.renderColorField("--mz-color-text-secondary", "Text Secondary", false, "Muted text, descriptions, placeholders.")}
+      ${this.renderColorField("--mz-color-border", "Border", false, "Dividers, card borders, input outlines.")}
+
+      <div class="section-label">Status</div>
+      ${this.renderColorField("--mz-color-success", "Success", false, "Success states, confirmations.")}
+      ${this.renderColorField("--mz-color-warning", "Warning", false, "Warning states, caution indicators.")}
+      ${this.renderColorField("--mz-color-danger", "Danger", false, "Error states, destructive actions.")}
+      ${this.renderColorField("--mz-color-neutral", "Neutral", false, "Neutral badge and button variant.")}
+    `;
+  }
+  renderTypographyTab() {
+    return html`
+      <div class="font-field">
+        <label class="font-field__label" title="--mz-font-sans">Font Family</label>
+        <span class="font-field__desc">Font stack for all text. Use quotes for multi-word names.</span>
+        <input
+          class="text-input"
+          type="text"
+          .value=${this.tokens["--mz-font-sans"]}
+          @change=${(e) => this.setToken("--mz-font-sans", e.target.value)}
+        />
+      </div>
+
+      ${this.renderRangeField("--mz-space-scale", "Space Scale", 0.7, 1.4, 0.01, "", "Global spacing multiplier. 0.8 = compact, 1.2 = spacious.")}
+      ${this.renderRangeField("--mz-font-size-scale", "Font Size Scale", 0.8, 1.2, 0.01, "", "Global font size multiplier.")}
+    `;
+  }
+  renderShapeTab() {
+    return html`
+      ${this.renderRangeField("--mz-radius-sm", "Radius SM", 0, 24, 1, "px", "Small elements: badges, chips, checkboxes.")}
+      ${this.renderRangeField("--mz-radius-md", "Radius MD", 0, 24, 1, "px", "Medium elements: buttons, inputs, selects.")}
+      ${this.renderRangeField("--mz-radius-lg", "Radius LG", 0, 32, 1, "px", "Large elements: cards, dialogs, panels.")}
+      ${this.renderRangeField("--mz-border-width-sm", "Border Width", 0, 4, 0.5, "px", "Default border thickness for panels and dividers.")}
+      ${this.renderColorField("--mz-input-bg", "Input Background", false, "Background fill for inputs. Use semi-transparent for dark themes.")}
+      ${this.renderRangeField("--mz-input-border-width", "Input Border Width", 0, 4, 0.5, "px", "Border thickness for form inputs.")}
+    `;
+  }
+  renderShadowsTab() {
+    const presets = [
+      { id: "none", label: "None", shadow: "none" },
+      { id: "subtle", label: "Subtle", shadow: SHADOW_PRESETS.subtle.md },
+      { id: "medium", label: "Medium", shadow: SHADOW_PRESETS.medium.md },
+      { id: "dramatic", label: "Dramatic", shadow: SHADOW_PRESETS.dramatic.md }
+    ];
+    return html`
+      <div class="section-label">Shadow Intensity</div>
+      <p class="section-desc">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>
+      <div class="shadow-presets">
+        ${presets.map(
+      (p) => html`
+            <div
+              class="shadow-preset ${this.shadowPreset === p.id ? "shadow-preset--selected" : ""}"
+              @click=${() => this.applyShadowPreset(p.id)}
+            >
+              <div class="shadow-preset__radio"></div>
+              <span class="shadow-preset__label">${p.label}</span>
+              <div class="shadow-preset__demo" style="box-shadow: ${p.shadow}"></div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  // ---------- Build the theme <style> text for the preview area ----------
+  get themeStyleText() {
+    const lines = [];
+    for (const [key, val] of Object.entries(this.tokens)) {
+      lines.push(`  ${key}: ${val};`);
+    }
+    return `.preview-themed {
+${lines.join("\n")}
+}`;
+  }
+  // ---------- Preview panel ----------
+  renderPreview() {
+    return html`
+      <style>${this.themeStyleText}</style>
+      <div class="preview preview-themed">
+        <!-- Buttons -->
+        <div class="preview-section">
+          <p class="preview-section__title">Buttons</p>
+          <div class="preview-row">
+            <mz-button variant="primary">Primary</mz-button>
+            <mz-button variant="primary" appearance="outline">Outline</mz-button>
+            <mz-button variant="primary" appearance="ghost">Ghost</mz-button>
+          </div>
+        </div>
+
+        <!-- Input -->
+        <div class="preview-section">
+          <p class="preview-section__title">Input</p>
+          <mz-input placeholder="Focus me..." style="max-width: 280px;"></mz-input>
+        </div>
+
+        <!-- Checkbox & Switch -->
+        <div class="preview-section">
+          <p class="preview-section__title">Checkbox &amp; Switch</p>
+          <div class="preview-row">
+            <mz-checkbox checked>Checked</mz-checkbox>
+            <mz-switch checked>Active</mz-switch>
+          </div>
+        </div>
+
+        <!-- Chips -->
+        <div class="preview-section">
+          <p class="preview-section__title">Chips</p>
+          <div class="preview-row">
+            <mz-chip-group>
+              <mz-chip value="a" selected>Option A</mz-chip>
+              <mz-chip value="b">Option B</mz-chip>
+              <mz-chip value="c">Option C</mz-chip>
+            </mz-chip-group>
+          </div>
+        </div>
+
+        <!-- Selectable Cards -->
+        <div class="preview-section">
+          <p class="preview-section__title">Selectable Cards</p>
+          <div class="preview-cards">
+            <mz-selectable-card selected>Card 1</mz-selectable-card>
+            <mz-selectable-card>Card 2</mz-selectable-card>
+            <mz-selectable-card>Card 3</mz-selectable-card>
+          </div>
+        </div>
+
+        <!-- Badges -->
+        <div class="preview-section">
+          <p class="preview-section__title">Badges</p>
+          <div class="preview-row">
+            <mz-badge variant="primary">Primary</mz-badge>
+            <mz-badge variant="success">Success</mz-badge>
+            <mz-badge variant="warning">Warning</mz-badge>
+            <mz-badge variant="danger">Danger</mz-badge>
+          </div>
+        </div>
+
+        <!-- Progress -->
+        <div class="preview-section">
+          <p class="preview-section__title">Progress</p>
+          <mz-progress value="65" style="max-width: 300px;"></mz-progress>
+        </div>
+
+        <!-- Link -->
+        <div class="preview-section">
+          <p class="preview-section__title">Link</p>
+          <a class="preview-link" href="javascript:void(0)">This is a themed link</a>
+        </div>
+
+        <!-- Shadows & Card -->
+        <div class="preview-section">
+          <p class="preview-section__title">Shadows &amp; Card</p>
+          <div style="display: flex; gap: 16px; align-items: start;">
+            <div style="width: 80px; height: 60px; background: var(--mz-color-surface, #fff); border-radius: var(--mz-radius-md, 8px); box-shadow: var(--mz-shadow-sm); border: 1px solid var(--mz-color-border, #ddd);"></div>
+            <div style="width: 80px; height: 60px; background: var(--mz-color-surface, #fff); border-radius: var(--mz-radius-md, 8px); box-shadow: var(--mz-shadow-md); border: 1px solid var(--mz-color-border, #ddd);"></div>
+            <div style="width: 80px; height: 60px; background: var(--mz-color-surface, #fff); border-radius: var(--mz-radius-md, 8px); box-shadow: var(--mz-shadow-lg); border: 1px solid var(--mz-color-border, #ddd);"></div>
+          </div>
+          <div style="display: flex; gap: 16px; margin-top: 4px; font-size: 10px; color: var(--mz-color-text-secondary, #999);">
+            <span style="width: 80px; text-align: center;">sm</span>
+            <span style="width: 80px; text-align: center;">md</span>
+            <span style="width: 80px; text-align: center;">lg</span>
+          </div>
+        </div>
+
+        <!-- Card container -->
+        <div class="preview-section preview-card-wrapper">
+          <p class="preview-section__title">Card</p>
+          <mz-card style="max-width: 300px;">
+            <div slot="header" style="padding: 12px 16px 0; font-weight: 600; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text, #333);">
+              Example Card
+            </div>
+            <div style="padding: 0 16px 12px; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text-secondary, #666); font-size: 14px;">
+              This card shows surface color, border radius, border width, and shadow in context.
+            </div>
+          </mz-card>
+        </div>
+      </div>
+    `;
+  }
+  // ---------- Main render ----------
+  render() {
+    let tabContent;
+    switch (this.activeTab) {
+      case "colors":
+        tabContent = this.renderColorsTab();
+        break;
+      case "typography":
+        tabContent = this.renderTypographyTab();
+        break;
+      case "shape":
+        tabContent = this.renderShapeTab();
+        break;
+      case "shadows":
+        tabContent = this.renderShadowsTab();
+        break;
+    }
+    return html`
+      <div class="editor">
+        <!-- Left: controls -->
+        <div class="editor__controls">
+          <div class="tabs" role="tablist">
+            ${TABS.map(
+      (tab) => html`
+                <button
+                  class="tabs__btn ${this.activeTab === tab.id ? "tabs__btn--active" : ""}"
+                  role="tab"
+                  aria-selected=${this.activeTab === tab.id}
+                  @click=${() => this.activeTab = tab.id}
+                >
+                  ${tab.label}
+                </button>
+              `
+    )}
+          </div>
+          <div class="controls" role="tabpanel">${tabContent}</div>
+        </div>
+
+        <!-- Right: live preview -->
+        <div class="editor__preview">${this.renderPreview()}</div>
+      </div>
+    `;
+  }
+}
+MzThemeEditor.styles = editorStyles;
+__decorateClass([
+  property({ attribute: "theme-name" })
+], MzThemeEditor.prototype, "themeName", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], MzThemeEditor.prototype, "fullWidth", 2);
+__decorateClass([
+  property({ attribute: "value" })
+], MzThemeEditor.prototype, "value", 1);
+__decorateClass([
+  state()
+], MzThemeEditor.prototype, "activeTab", 2);
+__decorateClass([
+  state()
+], MzThemeEditor.prototype, "tokens", 2);
+__decorateClass([
+  state()
+], MzThemeEditor.prototype, "shadowPreset", 2);
+export {
+  MzThemeEditor
+};
+//# sourceMappingURL=theme-editor.component.js.map