@manzanohq/theme-editor 0.1.7

package/cdn/chunks/chunk.5X2KFTEK.js

@@ -0,0 +1,643 @@
+var $=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var s=(p,m,e,t)=>{for(var r=t>1?void 0:t?S(m,e):m,o=p.length-1,n;o>=0;o--)(n=p[o])&&(r=(t?n(m,e,r):n(r))||r);return t&&r&&$(m,e,r),r};import{html as i,css as P,nothing as b}from"lit";import{property as g,state as f}from"lit/decorators.js";import{LitElement as C}from"lit";import{property as z}from"lit/decorators.js";var F="__MANZANO_VERSION__",T=new Map,h,v=!1;function y(){return h||(h=window.matchMedia("(prefers-reduced-motion: reduce)"),v=h.matches,h.addEventListener("change",p=>{v=p.matches})),h}var l=class extends C{constructor(){super();this.dir="";this.lang="";let e=this.constructor;for(let[t,r]of Object.entries(e.dependencies))r.define(t,r);typeof window<"u"&&y()}get prefersReducedMotion(){return typeof window>"u"?!1:(y(),v)}static define(e,t=this){let r=customElements.get(e);if(r){let o=r.version;o!==t.version&&console.warn(`Manzano: "${e}" was already registered with version ${o}. Attempted to re-register with version ${t.version}. This may cause issues.`);return}T.set(e,t),customElements.define(e,t)}emit(e,t){let r=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:{},...t});return this.dispatchEvent(r),!r.defaultPrevented}get updateComplete(){return super.updateComplete.then(async e=>{if(!this.shadowRoot)return e;let t=this.shadowRoot.querySelectorAll(":not(:defined)");if(t.length>0){let r=[...t].map(o=>customElements.whenDefined(o.localName));await Promise.all(r)}return e})}};l.version=F,l.dependencies={},s([z({reflect:!0})],l.prototype,"dir",2),s([z()],l.prototype,"lang",2);var x={"--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","--mz-color-surface":"#ffffff","--mz-color-surface-raised":"#faf9f7","--mz-color-text":"#1c1915","--mz-color-text-secondary":"#79726b","--mz-color-border":"#d5d1cb","--mz-color-success":"#2d8556","--mz-color-warning":"#d59724","--mz-color-danger":"#c04b34","--mz-color-neutral":"#433d37","--mz-font-sans":"'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif","--mz-space-scale":"1","--mz-font-size-scale":"1","--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","--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)"},u={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)"}},R=[{id:"colors",label:"Colors"},{id:"typography",label:"Typography & Spacing"},{id:"shape",label:"Shape"},{id:"shadows",label:"Shadows"}],M=P`
+  :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;
+  }
+`,d=class extends l{constructor(){super(...arguments);this.themeName="custom-theme";this.fullWidth=!1;this.activeTab="colors";this.tokens={...x};this.shadowPreset="medium";this._syncDarkMode=()=>{let e=document.documentElement.getAttribute("data-theme");e==="dark"||!e&&window.matchMedia("(prefers-color-scheme: dark)").matches?this.setAttribute("dark",""):this.removeAttribute("dark")}}get value(){return JSON.stringify(this.tokens)}set value(e){if(e)try{let t=JSON.parse(e);typeof t=="object"&&t!==null&&(this.tokens={...x,...t})}catch{}}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:!0,attributeFilter:["data-theme"]})}disconnectedCallback(){super.disconnectedCallback(),this._darkQuery?.removeEventListener("change",this._syncDarkMode),this._darkObserver?.disconnect()}getTokens(){return{...this.tokens}}getCSS(){let e=`[data-theme-custom="${this.themeName}"]`,t=[];for(let[r,o]of Object.entries(this.tokens))o!==x[r]&&t.push(`  ${r}: ${o};`);return t.length===0?`${e} {
+  /* No overrides \u2014 using Manzano defaults */
+}`:`${e} {
+${t.join(`
+`)}
+}`}setToken(e,t){this.tokens={...this.tokens,[e]:t},this.emitChange()}emitChange(){this.emit("mz-theme-change",{detail:{css:this.getCSS(),tokens:this.getTokens()}})}detectShadowPreset(){let e=this.tokens["--mz-shadow-sm"];for(let[t,r]of Object.entries(u))if(r.sm===e)return t;return"medium"}applyShadowPreset(e){let t=u[e];this.shadowPreset=e,this.tokens={...this.tokens,"--mz-shadow-sm":t.sm,"--mz-shadow-md":t.md,"--mz-shadow-lg":t.lg},this.emitChange()}renderColorField(e,t,r,o=""){let n=this.tokens[e]||"#000000";return i`
+      <div class="field">
+        <div class="field__info">
+          <span class="field__label" title="${e}">${t}</span>
+          ${o?i`<span class="field__desc">${o}</span>`:b}
+        </div>
+        <div class="field__control">
+          <input
+            type="color"
+            .value=${n}
+            @input=${c=>this.setToken(e,c.target.value)}
+          />
+          ${r?i`<input
+                class="hex-input"
+                type="text"
+                .value=${n}
+                @change=${c=>{let a=c.target.value.trim();a&&!a.startsWith("#")&&(a="#"+a),/^#[0-9a-fA-F]{3,8}$/.test(a)&&this.setToken(e,a)}}
+              />`:b}
+        </div>
+      </div>
+    `}renderRangeField(e,t,r,o,n,c="",a=""){let w=parseFloat(this.tokens[e])||0;return i`
+      <div class="range-row">
+        <div class="range-row__info">
+          <span class="range-row__label" title="${e}">${t}</span>
+          ${a?i`<span class="range-row__desc">${a}</span>`:b}
+        </div>
+        <input
+          class="range-row__slider"
+          type="range"
+          .min=${String(r)}
+          .max=${String(o)}
+          .step=${String(n)}
+          .value=${String(w)}
+          @input=${k=>{let _=k.target.value;this.setToken(e,c?`${_}${c}`:_)}}
+        />
+        <span class="range-row__value">${w}${c}</span>
+      </div>
+    `}renderColorsTab(){return i`
+      <div class="section-label">Brand &amp; Semantic</div>
+      ${this.renderColorField("--mz-color-primary","Primary",!0,"Base brand color. Fallback for action, focus, selected, link.")}
+      ${this.renderColorField("--mz-color-action","Action",!0,"Button fills, CTAs, progress indicators.")}
+      ${this.renderColorField("--mz-color-on-action","On Action",!1,"Text/icon color on action backgrounds.")}
+      ${this.renderColorField("--mz-color-focus","Focus",!0,"Focus rings and input focus borders.")}
+      ${this.renderColorField("--mz-color-selected","Selected",!0,"Checked checkboxes, switches, selected chips and cards.")}
+      ${this.renderColorField("--mz-color-on-selected","On Selected",!1,"Text/icon color on selected backgrounds.")}
+      ${this.renderColorField("--mz-color-link","Link",!0,"Text link color.")}
+
+      <div class="section-label">Surfaces</div>
+      ${this.renderColorField("--mz-color-surface","Surface",!1,"Page and card backgrounds.")}
+      ${this.renderColorField("--mz-color-surface-raised","Surface Raised",!1,"Elevated card and panel backgrounds.")}
+      ${this.renderColorField("--mz-color-text","Text",!1,"Primary body text color.")}
+      ${this.renderColorField("--mz-color-text-secondary","Text Secondary",!1,"Muted text, descriptions, placeholders.")}
+      ${this.renderColorField("--mz-color-border","Border",!1,"Dividers, card borders, input outlines.")}
+
+      <div class="section-label">Status</div>
+      ${this.renderColorField("--mz-color-success","Success",!1,"Success states, confirmations.")}
+      ${this.renderColorField("--mz-color-warning","Warning",!1,"Warning states, caution indicators.")}
+      ${this.renderColorField("--mz-color-danger","Danger",!1,"Error states, destructive actions.")}
+      ${this.renderColorField("--mz-color-neutral","Neutral",!1,"Neutral badge and button variant.")}
+    `}renderTypographyTab(){return i`
+      <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",.7,1.4,.01,"","Global spacing multiplier. 0.8 = compact, 1.2 = spacious.")}
+      ${this.renderRangeField("--mz-font-size-scale","Font Size Scale",.8,1.2,.01,"","Global font size multiplier.")}
+    `}renderShapeTab(){return i`
+      ${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,.5,"px","Default border thickness for panels and dividers.")}
+      ${this.renderColorField("--mz-input-bg","Input Background",!1,"Background fill for inputs. Use semi-transparent for dark themes.")}
+      ${this.renderRangeField("--mz-input-border-width","Input Border Width",0,4,.5,"px","Border thickness for form inputs.")}
+    `}renderShadowsTab(){let e=[{id:"none",label:"None",shadow:"none"},{id:"subtle",label:"Subtle",shadow:u.subtle.md},{id:"medium",label:"Medium",shadow:u.medium.md},{id:"dramatic",label:"Dramatic",shadow:u.dramatic.md}];return i`
+      <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">
+        ${e.map(t=>i`
+            <div
+              class="shadow-preset ${this.shadowPreset===t.id?"shadow-preset--selected":""}"
+              @click=${()=>this.applyShadowPreset(t.id)}
+            >
+              <div class="shadow-preset__radio"></div>
+              <span class="shadow-preset__label">${t.label}</span>
+              <div class="shadow-preset__demo" style="box-shadow: ${t.shadow}"></div>
+            </div>
+          `)}
+      </div>
+    `}get themeStyleText(){let e=[];for(let[t,r]of Object.entries(this.tokens))e.push(`  ${t}: ${r};`);return`.preview-themed {
+${e.join(`
+`)}
+}`}renderPreview(){return i`
+      <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>
+    `}render(){let e;switch(this.activeTab){case"colors":e=this.renderColorsTab();break;case"typography":e=this.renderTypographyTab();break;case"shape":e=this.renderShapeTab();break;case"shadows":e=this.renderShadowsTab();break}return i`
+      <div class="editor">
+        <!-- Left: controls -->
+        <div class="editor__controls">
+          <div class="tabs" role="tablist">
+            ${R.map(t=>i`
+                <button
+                  class="tabs__btn ${this.activeTab===t.id?"tabs__btn--active":""}"
+                  role="tab"
+                  aria-selected=${this.activeTab===t.id}
+                  @click=${()=>this.activeTab=t.id}
+                >
+                  ${t.label}
+                </button>
+              `)}
+          </div>
+          <div class="controls" role="tabpanel">${e}</div>
+        </div>
+
+        <!-- Right: live preview -->
+        <div class="editor__preview">${this.renderPreview()}</div>
+      </div>
+    `}};d.styles=M,s([g({attribute:"theme-name"})],d.prototype,"themeName",2),s([g({type:Boolean,reflect:!0,attribute:"full-width"})],d.prototype,"fullWidth",2),s([g({attribute:"value"})],d.prototype,"value",1),s([f()],d.prototype,"activeTab",2),s([f()],d.prototype,"tokens",2),s([f()],d.prototype,"shadowPreset",2);export{d as a};
+//# sourceMappingURL=chunk.5X2KFTEK.js.map