@manzanohq/theme-editor 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cdn/chunks/{chunk.5X2KFTEK.js → chunk.K3BVCZTI.js} +4 -3
  2. package/cdn/chunks/chunk.K3BVCZTI.js.map +7 -0
  3. package/cdn/chunks/chunk.VZVBTXUY.js +2 -0
  4. package/cdn/index.js +1 -1
  5. package/cdn/theme-editor.component.js +1 -1
  6. package/cdn/theme-editor.js +1 -1
  7. package/dist/theme-editor.component.d.ts.map +1 -1
  8. package/dist/theme-editor.component.js +2 -0
  9. package/dist/theme-editor.component.js.map +2 -2
  10. package/package.json +2 -2
  11. package/cdn/chunks/chunk.5X2KFTEK.js.map +0 -7
  12. package/cdn/chunks/chunk.YADVC6ZY.js +0 -2
  13. /package/cdn/chunks/{chunk.YADVC6ZY.js.map → chunk.VZVBTXUY.js.map} +0 -0
package/cdn/chunks/{chunk.5X2KFTEK.js → chunk.K3BVCZTI.js} RENAMED
@@ -1,4 +1,4 @@
1
- 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`
1
+ 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 f,state as g}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-input-affix-color":"#79726b","--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`
2
2
  :host {
3
3
  display: block;
4
4
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -498,6 +498,7 @@ ${t.join(`
498
498
  ${this.renderRangeField("--mz-border-width-sm","Border Width",0,4,.5,"px","Default border thickness for panels and dividers.")}
499
499
  ${this.renderColorField("--mz-input-bg","Input Background",!1,"Background fill for inputs. Use semi-transparent for dark themes.")}
500
500
  ${this.renderRangeField("--mz-input-border-width","Input Border Width",0,4,.5,"px","Border thickness for form inputs.")}
501
+ ${this.renderColorField("--mz-input-affix-color","Input Icon Color",!1,"Color of prefix/suffix icons in inputs.")}
501
502
  `}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`
502
503
  <div class="section-label">Shadow Intensity</div>
503
504
  <p class="section-desc">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>
@@ -639,5 +640,5 @@ ${e.join(`
639
640
  <!-- Right: live preview -->
640
641
  <div class="editor__preview">${this.renderPreview()}</div>
641
642
  </div>
642
- `}};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};
643
- //# sourceMappingURL=chunk.5X2KFTEK.js.map
643
+ `}};d.styles=M,s([f({attribute:"theme-name"})],d.prototype,"themeName",2),s([f({type:Boolean,reflect:!0,attribute:"full-width"})],d.prototype,"fullWidth",2),s([f({attribute:"value"})],d.prototype,"value",1),s([g()],d.prototype,"activeTab",2),s([g()],d.prototype,"tokens",2),s([g()],d.prototype,"shadowPreset",2);export{d as a};
644
+ //# sourceMappingURL=chunk.K3BVCZTI.js.map
package/cdn/chunks/chunk.K3BVCZTI.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/theme-editor.component.ts", "../../../components/src/internal/manzano-element.ts"],
4
+ "sourcesContent": ["import { html, css, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../components/src/internal/manzano-element.js';\n\n// ---------------------------------------------------------------------------\n// Default token values (Manzano light theme resolved values)\n// ---------------------------------------------------------------------------\nconst DEFAULT_TOKENS: Record<string, string> = {\n // Brand & Semantic\n '--mz-color-primary': '#4260a8',\n '--mz-color-action': '#4260a8',\n '--mz-color-on-action': '#ffffff',\n '--mz-color-focus': '#4260a8',\n '--mz-color-selected': '#4260a8',\n '--mz-color-on-selected': '#ffffff',\n '--mz-color-link': '#4260a8',\n\n // Surfaces\n '--mz-color-surface': '#ffffff',\n '--mz-color-surface-raised': '#faf9f7',\n '--mz-color-text': '#1c1915',\n '--mz-color-text-secondary': '#79726b',\n '--mz-color-border': '#d5d1cb',\n\n // Status\n '--mz-color-success': '#2d8556',\n '--mz-color-warning': '#d59724',\n '--mz-color-danger': '#c04b34',\n '--mz-color-neutral': '#433d37',\n\n // Typography & Spacing\n '--mz-font-sans': \"'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n '--mz-space-scale': '1',\n '--mz-font-size-scale': '1',\n\n // Shape\n '--mz-radius-sm': '6px',\n '--mz-radius-md': '8px',\n '--mz-radius-lg': '12px',\n '--mz-border-width-sm': '1px',\n '--mz-input-bg': '#ffffff',\n '--mz-input-border-width': '1px',\n '--mz-input-affix-color': '#79726b',\n\n // Shadows\n '--mz-shadow-sm': '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n '--mz-shadow-md': '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n '--mz-shadow-lg': '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n};\n\n// ---------------------------------------------------------------------------\n// Shadow presets\n// ---------------------------------------------------------------------------\ntype ShadowPreset = 'none' | 'subtle' | 'medium' | 'dramatic';\n\nconst SHADOW_PRESETS: Record<ShadowPreset, { sm: string; md: string; lg: string }> = {\n none: {\n sm: 'none',\n md: 'none',\n lg: 'none',\n },\n subtle: {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.04)',\n md: '0 2px 4px -1px rgb(0 0 0 / 0.06)',\n lg: '0 6px 12px -3px rgb(0 0 0 / 0.08)',\n },\n medium: {\n sm: '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n md: '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n lg: '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n },\n dramatic: {\n sm: '0 2px 6px 0 rgb(0 0 0 / 0.16), 0 1px 3px -1px rgb(0 0 0 / 0.12)',\n md: '0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.14)',\n lg: '0 20px 40px -8px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.15)',\n },\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\ntype TabId = 'colors' | 'typography' | 'shape' | 'shadows';\n\nconst TABS: { id: TabId; label: string }[] = [\n { id: 'colors', label: 'Colors' },\n { id: 'typography', label: 'Typography & Spacing' },\n { id: 'shape', label: 'Shape' },\n { id: 'shadows', label: 'Shadows' },\n];\n\n// ---------------------------------------------------------------------------\n// Styles \u2014 editor chrome uses CSS custom properties that respond to\n// prefers-color-scheme and [data-theme] for light/dark adaptivity.\n// ---------------------------------------------------------------------------\nconst editorStyles = css`\n :host {\n display: block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n\n /* Editor chrome \u2014 light mode defaults */\n --_editor-bg: #f6f6f7;\n --_editor-bg-raised: #ffffff;\n --_editor-text: #1a1a1a;\n --_editor-text-secondary: #666;\n --_editor-text-muted: #999;\n --_editor-border: #e0e0e0;\n --_editor-accent: #4260a8;\n --_editor-input-bg: #ffffff;\n --_editor-tab-bg: #eeeeef;\n\n color: var(--_editor-text);\n }\n\n /* Dark mode \u2014 activated via JS-set [dark] attribute on :host */\n :host([dark]) {\n --_editor-bg: #1a1a1d;\n --_editor-bg-raised: #252528;\n --_editor-text: #e4e4e7;\n --_editor-text-secondary: #a1a1a8;\n --_editor-text-muted: #71717a;\n --_editor-border: #333336;\n --_editor-accent: #818cf8;\n --_editor-input-bg: #252528;\n --_editor-tab-bg: #141416;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* ---- Full-width mode ---- */\n :host([full-width]) .editor {\n border: none;\n border-radius: 0;\n }\n\n :host([full-width]) .editor__controls {\n max-width: none;\n }\n\n /* ---- Layout ---- */\n .editor {\n display: flex;\n height: 100%;\n min-height: 540px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n overflow: hidden;\n background: var(--_editor-bg);\n }\n\n .editor__controls {\n width: 40%;\n min-width: 300px;\n max-width: 480px;\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--_editor-border);\n overflow: hidden;\n }\n\n .editor__preview {\n flex: 1;\n overflow: auto;\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Tabs ---- */\n .tabs {\n display: flex;\n background: var(--_editor-tab-bg);\n border-bottom: 1px solid var(--_editor-border);\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n }\n\n .tabs__btn {\n flex: 1;\n padding: 8px 6px;\n border: none;\n background: transparent;\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n color: var(--_editor-text-secondary);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n white-space: nowrap;\n }\n\n .tabs__btn:hover {\n color: var(--_editor-text);\n }\n\n .tabs__btn--active {\n color: var(--_editor-accent);\n border-bottom-color: var(--_editor-accent);\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Controls panel ---- */\n .controls {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n }\n\n .section-label {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--_editor-text-muted);\n margin: 16px 0 8px;\n }\n\n .section-label:first-child {\n margin-top: 0;\n }\n\n .section-desc {\n font-size: 11px;\n color: var(--_editor-text-muted);\n margin: -4px 0 12px;\n line-height: 1.4;\n }\n\n /* ---- Field row ---- */\n .field {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .field__info {\n flex: 1;\n min-width: 0;\n }\n\n .field__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .field__control {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n /* ---- Color input ---- */\n input[type='color'] {\n -webkit-appearance: none;\n appearance: none;\n width: 32px;\n height: 28px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n padding: 1px;\n cursor: pointer;\n background: var(--_editor-input-bg);\n }\n\n input[type='color']::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type='color']::-webkit-color-swatch {\n border: none;\n border-radius: 3px;\n }\n\n /* ---- Hex text input ---- */\n .hex-input {\n width: 76px;\n padding: 4px 6px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font-family: SFMono-Regular, Consolas, monospace;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .hex-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Text input ---- */\n .text-input {\n width: 100%;\n padding: 5px 8px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font: inherit;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .text-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Range slider ---- */\n .range-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .range-row__info {\n flex: 1;\n min-width: 0;\n }\n\n .range-row__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .range-row__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .range-row__slider {\n width: 120px;\n accent-color: var(--_editor-accent);\n }\n\n .range-row__value {\n font-size: 11px;\n font-family: SFMono-Regular, Consolas, monospace;\n color: var(--_editor-text-muted);\n width: 44px;\n text-align: right;\n flex-shrink: 0;\n }\n\n /* ---- Font text field (full-width) ---- */\n .font-field {\n margin-bottom: 10px;\n }\n\n .font-field__label {\n display: block;\n font-size: 12px;\n color: var(--_editor-text-secondary);\n margin-bottom: 2px;\n }\n\n .font-field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n\n /* ---- Shadow radio presets ---- */\n .shadow-presets {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n margin-top: 8px;\n }\n\n .shadow-preset {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n background: var(--_editor-bg-raised);\n }\n\n .shadow-preset:hover {\n border-color: var(--_editor-text-muted);\n }\n\n .shadow-preset--selected {\n border-color: var(--_editor-accent);\n background: color-mix(in srgb, var(--_editor-accent) 8%, var(--_editor-bg-raised));\n }\n\n .shadow-preset__radio {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--_editor-border);\n position: relative;\n flex-shrink: 0;\n }\n\n .shadow-preset--selected .shadow-preset__radio {\n border-color: var(--_editor-accent);\n }\n\n .shadow-preset--selected .shadow-preset__radio::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--_editor-accent);\n }\n\n .shadow-preset__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--_editor-text);\n }\n\n .shadow-preset__demo {\n width: 28px;\n height: 20px;\n background: var(--_editor-bg-raised);\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n /* ---- Preview area ---- */\n .preview {\n padding: 24px;\n min-height: 100%;\n background: var(--mz-color-surface-raised, #faf9f7);\n }\n\n .preview-section {\n margin-bottom: 24px;\n }\n\n .preview-section__title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--mz-color-text-secondary, #79726b);\n margin: 0 0 12px;\n font-family: var(--mz-font-sans, inherit);\n }\n\n .preview-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .preview-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n }\n\n .preview-link {\n color: var(--mz-color-link, #4260a8);\n text-decoration: underline;\n font-family: var(--mz-font-sans, inherit);\n font-size: var(--mz-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n\n .preview-link:hover {\n opacity: 0.8;\n }\n\n .preview-card-wrapper {\n margin-top: 16px;\n }\n`;\n\n/**\n * @summary A visual editor for Manzano CSS design tokens. Organizes tokens into\n * tabbed categories (Colors, Typography & Spacing, Shape, Shadows) with a live\n * preview panel showing Manzano components updated in real time.\n *\n * @tag mz-theme-editor\n *\n * @event mz-theme-change - Emitted when any token value changes.\n * Detail: `{ css: string, tokens: Record<string, string> }`\n */\nexport class MzThemeEditor extends ManzanoElement {\n static styles = editorStyles;\n\n // ---------- Public API ----------\n\n /** Name of the theme, used in the generated CSS selector. */\n @property({ attribute: 'theme-name' }) themeName = 'custom-theme';\n\n /** When true, the editor fills its container edge-to-edge (no border/radius). */\n @property({ type: Boolean, reflect: true, attribute: 'full-width' }) fullWidth = false;\n\n /**\n * Initial token values as a JSON string. When set, merges into the current\n * token map (values not present fall back to defaults).\n */\n @property({ attribute: 'value' })\n get value(): string {\n return JSON.stringify(this.tokens);\n }\n set value(val: string) {\n if (!val) return;\n try {\n const parsed = JSON.parse(val);\n if (typeof parsed === 'object' && parsed !== null) {\n this.tokens = { ...DEFAULT_TOKENS, ...parsed };\n }\n } catch {\n // ignore invalid JSON\n }\n }\n\n // ---------- Internal state ----------\n\n @state() private activeTab: TabId = 'colors';\n @state() tokens: Record<string, string> = { ...DEFAULT_TOKENS };\n @state() private shadowPreset: ShadowPreset = 'medium';\n\n private _darkQuery?: MediaQueryList;\n private _darkObserver?: MutationObserver;\n\n // ---------- Lifecycle ----------\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.shadowPreset = this.detectShadowPreset();\n this._syncDarkMode();\n\n // Watch system preference changes\n this._darkQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._darkQuery.addEventListener('change', this._syncDarkMode);\n\n // Watch ancestor data-theme attribute changes\n this._darkObserver = new MutationObserver(this._syncDarkMode);\n this._darkObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme']\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._darkQuery?.removeEventListener('change', this._syncDarkMode);\n this._darkObserver?.disconnect();\n }\n\n private _syncDarkMode = (): void => {\n const htmlTheme = document.documentElement.getAttribute('data-theme');\n const isDark =\n htmlTheme === 'dark' ||\n (!htmlTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n if (isDark) {\n this.setAttribute('dark', '');\n } else {\n this.removeAttribute('dark');\n }\n };\n\n // ---------- Public methods ----------\n\n /** Returns the current token map. */\n getTokens(): Record<string, string> {\n return { ...this.tokens };\n }\n\n /** Generates a full theme CSS file string. Only includes tokens that differ from defaults. */\n getCSS(): string {\n const selector = `[data-theme-custom=\"${this.themeName}\"]`;\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n if (val !== DEFAULT_TOKENS[key]) {\n lines.push(` ${key}: ${val};`);\n }\n }\n if (lines.length === 0) {\n return `${selector} {\\n /* No overrides \u2014 using Manzano defaults */\\n}`;\n }\n return `${selector} {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Token mutation ----------\n\n private setToken(name: string, value: string): void {\n this.tokens = { ...this.tokens, [name]: value };\n this.emitChange();\n }\n\n private emitChange(): void {\n this.emit('mz-theme-change', {\n detail: { css: this.getCSS(), tokens: this.getTokens() },\n });\n }\n\n // ---------- Shadow preset helpers ----------\n\n private detectShadowPreset(): ShadowPreset {\n const sm = this.tokens['--mz-shadow-sm'];\n for (const [preset, vals] of Object.entries(SHADOW_PRESETS)) {\n if (vals.sm === sm) return preset as ShadowPreset;\n }\n return 'medium';\n }\n\n private applyShadowPreset(preset: ShadowPreset): void {\n const vals = SHADOW_PRESETS[preset];\n this.shadowPreset = preset;\n this.tokens = {\n ...this.tokens,\n '--mz-shadow-sm': vals.sm,\n '--mz-shadow-md': vals.md,\n '--mz-shadow-lg': vals.lg,\n };\n this.emitChange();\n }\n\n // ---------- Render helpers: controls ----------\n\n private renderColorField(token: string, label: string, showHex: boolean, desc: string = '') {\n const val = this.tokens[token] || '#000000';\n return html`\n <div class=\"field\">\n <div class=\"field__info\">\n <span class=\"field__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"field__desc\">${desc}</span>` : nothing}\n </div>\n <div class=\"field__control\">\n <input\n type=\"color\"\n .value=${val}\n @input=${(e: Event) => this.setToken(token, (e.target as HTMLInputElement).value)}\n />\n ${showHex\n ? html`<input\n class=\"hex-input\"\n type=\"text\"\n .value=${val}\n @change=${(e: Event) => {\n let v = (e.target as HTMLInputElement).value.trim();\n if (v && !v.startsWith('#')) v = '#' + v;\n if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {\n this.setToken(token, v);\n }\n }}\n />`\n : nothing}\n </div>\n </div>\n `;\n }\n\n private renderRangeField(\n token: string,\n label: string,\n min: number,\n max: number,\n step: number,\n unit: string = '',\n desc: string = ''\n ) {\n const raw = parseFloat(this.tokens[token]) || 0;\n return html`\n <div class=\"range-row\">\n <div class=\"range-row__info\">\n <span class=\"range-row__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"range-row__desc\">${desc}</span>` : nothing}\n </div>\n <input\n class=\"range-row__slider\"\n type=\"range\"\n .min=${String(min)}\n .max=${String(max)}\n .step=${String(step)}\n .value=${String(raw)}\n @input=${(e: Event) => {\n const v = (e.target as HTMLInputElement).value;\n this.setToken(token, unit ? `${v}${unit}` : v);\n }}\n />\n <span class=\"range-row__value\">${raw}${unit}</span>\n </div>\n `;\n }\n\n // ---------- Tab panels ----------\n\n private renderColorsTab() {\n return html`\n <div class=\"section-label\">Brand &amp; Semantic</div>\n ${this.renderColorField('--mz-color-primary', 'Primary', true, 'Base brand color. Fallback for action, focus, selected, link.')}\n ${this.renderColorField('--mz-color-action', 'Action', true, 'Button fills, CTAs, progress indicators.')}\n ${this.renderColorField('--mz-color-on-action', 'On Action', false, 'Text/icon color on action backgrounds.')}\n ${this.renderColorField('--mz-color-focus', 'Focus', true, 'Focus rings and input focus borders.')}\n ${this.renderColorField('--mz-color-selected', 'Selected', true, 'Checked checkboxes, switches, selected chips and cards.')}\n ${this.renderColorField('--mz-color-on-selected', 'On Selected', false, 'Text/icon color on selected backgrounds.')}\n ${this.renderColorField('--mz-color-link', 'Link', true, 'Text link color.')}\n\n <div class=\"section-label\">Surfaces</div>\n ${this.renderColorField('--mz-color-surface', 'Surface', false, 'Page and card backgrounds.')}\n ${this.renderColorField('--mz-color-surface-raised', 'Surface Raised', false, 'Elevated card and panel backgrounds.')}\n ${this.renderColorField('--mz-color-text', 'Text', false, 'Primary body text color.')}\n ${this.renderColorField('--mz-color-text-secondary', 'Text Secondary', false, 'Muted text, descriptions, placeholders.')}\n ${this.renderColorField('--mz-color-border', 'Border', false, 'Dividers, card borders, input outlines.')}\n\n <div class=\"section-label\">Status</div>\n ${this.renderColorField('--mz-color-success', 'Success', false, 'Success states, confirmations.')}\n ${this.renderColorField('--mz-color-warning', 'Warning', false, 'Warning states, caution indicators.')}\n ${this.renderColorField('--mz-color-danger', 'Danger', false, 'Error states, destructive actions.')}\n ${this.renderColorField('--mz-color-neutral', 'Neutral', false, 'Neutral badge and button variant.')}\n `;\n }\n\n private renderTypographyTab() {\n return html`\n <div class=\"font-field\">\n <label class=\"font-field__label\" title=\"--mz-font-sans\">Font Family</label>\n <span class=\"font-field__desc\">Font stack for all text. Use quotes for multi-word names.</span>\n <input\n class=\"text-input\"\n type=\"text\"\n .value=${this.tokens['--mz-font-sans']}\n @change=${(e: Event) => this.setToken('--mz-font-sans', (e.target as HTMLInputElement).value)}\n />\n </div>\n\n ${this.renderRangeField('--mz-space-scale', 'Space Scale', 0.7, 1.4, 0.01, '', 'Global spacing multiplier. 0.8 = compact, 1.2 = spacious.')}\n ${this.renderRangeField('--mz-font-size-scale', 'Font Size Scale', 0.8, 1.2, 0.01, '', 'Global font size multiplier.')}\n `;\n }\n\n private renderShapeTab() {\n return html`\n ${this.renderRangeField('--mz-radius-sm', 'Radius SM', 0, 24, 1, 'px', 'Small elements: badges, chips, checkboxes.')}\n ${this.renderRangeField('--mz-radius-md', 'Radius MD', 0, 24, 1, 'px', 'Medium elements: buttons, inputs, selects.')}\n ${this.renderRangeField('--mz-radius-lg', 'Radius LG', 0, 32, 1, 'px', 'Large elements: cards, dialogs, panels.')}\n ${this.renderRangeField('--mz-border-width-sm', 'Border Width', 0, 4, 0.5, 'px', 'Default border thickness for panels and dividers.')}\n ${this.renderColorField('--mz-input-bg', 'Input Background', false, 'Background fill for inputs. Use semi-transparent for dark themes.')}\n ${this.renderRangeField('--mz-input-border-width', 'Input Border Width', 0, 4, 0.5, 'px', 'Border thickness for form inputs.')}\n ${this.renderColorField('--mz-input-affix-color', 'Input Icon Color', false, 'Color of prefix/suffix icons in inputs.')}\n `;\n }\n\n private renderShadowsTab() {\n const presets: { id: ShadowPreset; label: string; shadow: string }[] = [\n { id: 'none', label: 'None', shadow: 'none' },\n { id: 'subtle', label: 'Subtle', shadow: SHADOW_PRESETS.subtle.md },\n { id: 'medium', label: 'Medium', shadow: SHADOW_PRESETS.medium.md },\n { id: 'dramatic', label: 'Dramatic', shadow: SHADOW_PRESETS.dramatic.md },\n ];\n\n return html`\n <div class=\"section-label\">Shadow Intensity</div>\n <p class=\"section-desc\">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>\n <div class=\"shadow-presets\">\n ${presets.map(\n p => html`\n <div\n class=\"shadow-preset ${this.shadowPreset === p.id ? 'shadow-preset--selected' : ''}\"\n @click=${() => this.applyShadowPreset(p.id)}\n >\n <div class=\"shadow-preset__radio\"></div>\n <span class=\"shadow-preset__label\">${p.label}</span>\n <div class=\"shadow-preset__demo\" style=\"box-shadow: ${p.shadow}\"></div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n // ---------- Build the theme <style> text for the preview area ----------\n\n private get themeStyleText(): string {\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n lines.push(` ${key}: ${val};`);\n }\n return `.preview-themed {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Preview panel ----------\n\n private renderPreview() {\n // We apply tokens via an inline <style> on a wrapper div\n return html`\n <style>${this.themeStyleText}</style>\n <div class=\"preview preview-themed\">\n <!-- Buttons -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Buttons</p>\n <div class=\"preview-row\">\n <mz-button variant=\"primary\">Primary</mz-button>\n <mz-button variant=\"primary\" appearance=\"outline\">Outline</mz-button>\n <mz-button variant=\"primary\" appearance=\"ghost\">Ghost</mz-button>\n </div>\n </div>\n\n <!-- Input -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Input</p>\n <mz-input placeholder=\"Focus me...\" style=\"max-width: 280px;\"></mz-input>\n </div>\n\n <!-- Checkbox & Switch -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Checkbox &amp; Switch</p>\n <div class=\"preview-row\">\n <mz-checkbox checked>Checked</mz-checkbox>\n <mz-switch checked>Active</mz-switch>\n </div>\n </div>\n\n <!-- Chips -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Chips</p>\n <div class=\"preview-row\">\n <mz-chip-group>\n <mz-chip value=\"a\" selected>Option A</mz-chip>\n <mz-chip value=\"b\">Option B</mz-chip>\n <mz-chip value=\"c\">Option C</mz-chip>\n </mz-chip-group>\n </div>\n </div>\n\n <!-- Selectable Cards -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Selectable Cards</p>\n <div class=\"preview-cards\">\n <mz-selectable-card selected>Card 1</mz-selectable-card>\n <mz-selectable-card>Card 2</mz-selectable-card>\n <mz-selectable-card>Card 3</mz-selectable-card>\n </div>\n </div>\n\n <!-- Badges -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Badges</p>\n <div class=\"preview-row\">\n <mz-badge variant=\"primary\">Primary</mz-badge>\n <mz-badge variant=\"success\">Success</mz-badge>\n <mz-badge variant=\"warning\">Warning</mz-badge>\n <mz-badge variant=\"danger\">Danger</mz-badge>\n </div>\n </div>\n\n <!-- Progress -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Progress</p>\n <mz-progress value=\"65\" style=\"max-width: 300px;\"></mz-progress>\n </div>\n\n <!-- Link -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Link</p>\n <a class=\"preview-link\" href=\"javascript:void(0)\">This is a themed link</a>\n </div>\n\n <!-- Shadows & Card -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Shadows &amp; Card</p>\n <div style=\"display: flex; gap: 16px; align-items: start;\">\n <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>\n <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>\n <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>\n </div>\n <div style=\"display: flex; gap: 16px; margin-top: 4px; font-size: 10px; color: var(--mz-color-text-secondary, #999);\">\n <span style=\"width: 80px; text-align: center;\">sm</span>\n <span style=\"width: 80px; text-align: center;\">md</span>\n <span style=\"width: 80px; text-align: center;\">lg</span>\n </div>\n </div>\n\n <!-- Card container -->\n <div class=\"preview-section preview-card-wrapper\">\n <p class=\"preview-section__title\">Card</p>\n <mz-card style=\"max-width: 300px;\">\n <div slot=\"header\" style=\"padding: 12px 16px 0; font-weight: 600; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text, #333);\">\n Example Card\n </div>\n <div style=\"padding: 0 16px 12px; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text-secondary, #666); font-size: 14px;\">\n This card shows surface color, border radius, border width, and shadow in context.\n </div>\n </mz-card>\n </div>\n </div>\n `;\n }\n\n // ---------- Main render ----------\n\n override render() {\n let tabContent;\n switch (this.activeTab) {\n case 'colors':\n tabContent = this.renderColorsTab();\n break;\n case 'typography':\n tabContent = this.renderTypographyTab();\n break;\n case 'shape':\n tabContent = this.renderShapeTab();\n break;\n case 'shadows':\n tabContent = this.renderShadowsTab();\n break;\n }\n\n return html`\n <div class=\"editor\">\n <!-- Left: controls -->\n <div class=\"editor__controls\">\n <div class=\"tabs\" role=\"tablist\">\n ${TABS.map(\n tab => html`\n <button\n class=\"tabs__btn ${this.activeTab === tab.id ? 'tabs__btn--active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === tab.id}\n @click=${() => (this.activeTab = tab.id)}\n >\n ${tab.label}\n </button>\n `\n )}\n </div>\n <div class=\"controls\" role=\"tabpanel\">${tabContent}</div>\n </div>\n\n <!-- Right: live preview -->\n <div class=\"editor__preview\">${this.renderPreview()}</div>\n </div>\n `;\n }\n}\n", "import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Replaced at build time by esbuild\nconst MANZANO_VERSION = '__MANZANO_VERSION__';\n\n// Track registered versions to detect conflicts\nconst registeredElements = new Map<string, typeof ManzanoElement>();\n\n// Singleton reduced-motion listener\nlet reducedMotionQuery: MediaQueryList | undefined;\nlet reducedMotionValue = false;\n\nfunction getReducedMotionQuery(): MediaQueryList {\n if (!reducedMotionQuery) {\n reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n reducedMotionValue = reducedMotionQuery.matches;\n reducedMotionQuery.addEventListener('change', e => {\n reducedMotionValue = e.matches;\n });\n }\n return reducedMotionQuery;\n}\n\nexport class ManzanoElement extends LitElement {\n static version = MANZANO_VERSION;\n\n /**\n * Sub-component dependencies. Declared statically and auto-registered in the constructor.\n * Example: static dependencies = { 'mz-icon': MzIcon }\n */\n static dependencies: Record<string, typeof ManzanoElement> = {};\n\n /** Direction for RTL support, inherited from closest ancestor with dir attribute */\n @property({ reflect: true }) dir = '';\n\n /** Language for i18n, inherited from closest ancestor with lang attribute */\n @property() lang = '';\n\n constructor() {\n super();\n\n // Auto-register sub-component dependencies\n const ctor = this.constructor as typeof ManzanoElement;\n for (const [name, dep] of Object.entries(ctor.dependencies)) {\n dep.define(name, dep);\n }\n\n // Initialize reduced motion listener (once)\n if (typeof window !== 'undefined') {\n getReducedMotionQuery();\n }\n }\n\n /** Whether the user prefers reduced motion */\n get prefersReducedMotion(): boolean {\n if (typeof window === 'undefined') return false;\n getReducedMotionQuery();\n return reducedMotionValue;\n }\n\n /**\n * Register this component as a custom element, with version conflict detection.\n */\n static define(name: string, ctor: typeof ManzanoElement = this) {\n const existing = customElements.get(name);\n if (existing) {\n const existingVersion = (existing as typeof ManzanoElement).version;\n if (existingVersion !== ctor.version) {\n console.warn(\n `Manzano: \"${name}\" was already registered with version ${existingVersion}. ` +\n `Attempted to re-register with version ${ctor.version}. ` +\n `This may cause issues.`\n );\n }\n return;\n }\n\n registeredElements.set(name, ctor);\n customElements.define(name, ctor);\n }\n\n /**\n * Emit a custom event with sensible defaults for web components.\n * Returns true if the event was NOT cancelled.\n */\n emit<T>(name: string, options?: CustomEventInit<T>): boolean {\n const event = new CustomEvent(name, {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail: {},\n ...options\n });\n this.dispatchEvent(event);\n return !event.defaultPrevented;\n }\n\n /**\n * Override updateComplete to wait for undefined shadow children to upgrade.\n * Prevents test race conditions when sub-components haven't been defined yet.\n */\n override get updateComplete(): Promise<boolean> {\n return super.updateComplete.then(async result => {\n if (!this.shadowRoot) return result;\n\n const undefinedElements = this.shadowRoot.querySelectorAll(':not(:defined)');\n if (undefinedElements.length > 0) {\n const upgrades = [...undefinedElements].map(el => customElements.whenDefined(el.localName));\n await Promise.all(upgrades);\n }\n\n return result;\n });\n }\n}\n"],
5
+ "mappings": "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AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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",
6
+ "names": ["html", "css", "nothing", "property", "state", "LitElement", "property", "MANZANO_VERSION", "registeredElements", "reducedMotionQuery", "reducedMotionValue", "getReducedMotionQuery", "e", "ManzanoElement", "LitElement", "ctor", "name", "dep", "existing", "existingVersion", "options", "event", "result", "undefinedElements", "upgrades", "el", "__decorateClass", "property", "DEFAULT_TOKENS", "SHADOW_PRESETS", "TABS", "editorStyles", "css", "MzThemeEditor", "ManzanoElement", "htmlTheme", "val", "parsed", "selector", "lines", "key", "name", "value", "sm", "preset", "vals", "token", "label", "showHex", "desc", "html", "nothing", "e", "v", "min", "max", "step", "unit", "raw", "presets", "p", "tabContent", "tab", "__decorateClass", "property", "state"]
7
+ }
package/cdn/chunks/chunk.VZVBTXUY.js ADDED
@@ -0,0 +1,2 @@
1
+ import{a as e}from"./chunk.K3BVCZTI.js";e.define("mz-theme-editor");
2
+ //# sourceMappingURL=chunk.VZVBTXUY.js.map
package/cdn/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./chunks/chunk.YADVC6ZY.js";import{a as e}from"./chunks/chunk.5X2KFTEK.js";export{e as MzThemeEditor};
1
+ import"./chunks/chunk.VZVBTXUY.js";import{a as e}from"./chunks/chunk.K3BVCZTI.js";export{e as MzThemeEditor};
2
2
  //# sourceMappingURL=index.js.map
package/cdn/theme-editor.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a}from"./chunks/chunk.5X2KFTEK.js";export{a as MzThemeEditor};
1
+ import{a}from"./chunks/chunk.K3BVCZTI.js";export{a as MzThemeEditor};
2
2
  //# sourceMappingURL=theme-editor.component.js.map
package/cdn/theme-editor.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./chunks/chunk.YADVC6ZY.js";import{a}from"./chunks/chunk.5X2KFTEK.js";export{a as MzThemeEditor};
1
+ import"./chunks/chunk.VZVBTXUY.js";import{a}from"./chunks/chunk.K3BVCZTI.js";export{a as MzThemeEditor};
2
2
  //# sourceMappingURL=theme-editor.js.map
package/dist/theme-editor.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme-editor.component.d.ts","sourceRoot":"","sources":["../src/theme-editor.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AA4flF;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,0BAAgB;IAI7B,6DAA6D;IACtB,SAAS,SAAkB;IAElE,iFAAiF;IACZ,SAAS,UAAS;IAEvF;;;OAGG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAUpB;IAIQ,OAAO,CAAC,SAAS,CAAmB;IACpC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAyB;IACvD,OAAO,CAAC,YAAY,CAA0B;IAEvD,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,aAAa,CAAC,CAAmB;IAIhC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,aAAa,CAWnB;IAIF,qCAAqC;IACrC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,8FAA8F;IAC9F,MAAM,IAAI,MAAM;IAgBhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,gBAAgB;IAiCxB,OAAO,CAAC,gBAAgB;IAmCxB,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,KAAK,cAAc,GAMzB;IAID,OAAO,CAAC,aAAa;IA4GZ,MAAM;CA2ChB"}
1
+ {"version":3,"file":"theme-editor.component.d.ts","sourceRoot":"","sources":["../src/theme-editor.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kDAAkD,CAAC;AA6flF;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,0BAAgB;IAI7B,6DAA6D;IACtB,SAAS,SAAkB;IAElE,iFAAiF;IACZ,SAAS,UAAS;IAEvF;;;OAGG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAUpB;IAIQ,OAAO,CAAC,SAAS,CAAmB;IACpC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAyB;IACvD,OAAO,CAAC,YAAY,CAA0B;IAEvD,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,aAAa,CAAC,CAAmB;IAIhC,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,aAAa,CAWnB;IAIF,qCAAqC;IACrC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,8FAA8F;IAC9F,MAAM,IAAI,MAAM;IAgBhB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,gBAAgB;IAiCxB,OAAO,CAAC,gBAAgB;IAmCxB,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,KAAK,cAAc,GAMzB;IAID,OAAO,CAAC,aAAa;IA4GZ,MAAM;CA2ChB"}
package/dist/theme-editor.component.js CHANGED
@@ -42,6 +42,7 @@ const DEFAULT_TOKENS = {
42
42
  "--mz-border-width-sm": "1px",
43
43
  "--mz-input-bg": "#ffffff",
44
44
  "--mz-input-border-width": "1px",
45
+ "--mz-input-affix-color": "#79726b",
45
46
  // Shadows
46
47
  "--mz-shadow-sm": "0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)",
47
48
  "--mz-shadow-md": "0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)",
@@ -698,6 +699,7 @@ ${lines.join("\n")}
698
699
  ${this.renderRangeField("--mz-border-width-sm", "Border Width", 0, 4, 0.5, "px", "Default border thickness for panels and dividers.")}
699
700
  ${this.renderColorField("--mz-input-bg", "Input Background", false, "Background fill for inputs. Use semi-transparent for dark themes.")}
700
701
  ${this.renderRangeField("--mz-input-border-width", "Input Border Width", 0, 4, 0.5, "px", "Border thickness for form inputs.")}
702
+ ${this.renderColorField("--mz-input-affix-color", "Input Icon Color", false, "Color of prefix/suffix icons in inputs.")}
701
703
  `;
702
704
  }
703
705
  renderShadowsTab() {
package/dist/theme-editor.component.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/theme-editor.component.ts"],
4
- "sourcesContent": ["import { html, css, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../components/src/internal/manzano-element.js';\n\n// ---------------------------------------------------------------------------\n// Default token values (Manzano light theme resolved values)\n// ---------------------------------------------------------------------------\nconst DEFAULT_TOKENS: Record<string, string> = {\n // Brand & Semantic\n '--mz-color-primary': '#4260a8',\n '--mz-color-action': '#4260a8',\n '--mz-color-on-action': '#ffffff',\n '--mz-color-focus': '#4260a8',\n '--mz-color-selected': '#4260a8',\n '--mz-color-on-selected': '#ffffff',\n '--mz-color-link': '#4260a8',\n\n // Surfaces\n '--mz-color-surface': '#ffffff',\n '--mz-color-surface-raised': '#faf9f7',\n '--mz-color-text': '#1c1915',\n '--mz-color-text-secondary': '#79726b',\n '--mz-color-border': '#d5d1cb',\n\n // Status\n '--mz-color-success': '#2d8556',\n '--mz-color-warning': '#d59724',\n '--mz-color-danger': '#c04b34',\n '--mz-color-neutral': '#433d37',\n\n // Typography & Spacing\n '--mz-font-sans': \"'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n '--mz-space-scale': '1',\n '--mz-font-size-scale': '1',\n\n // Shape\n '--mz-radius-sm': '6px',\n '--mz-radius-md': '8px',\n '--mz-radius-lg': '12px',\n '--mz-border-width-sm': '1px',\n '--mz-input-bg': '#ffffff',\n '--mz-input-border-width': '1px',\n\n // Shadows\n '--mz-shadow-sm': '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n '--mz-shadow-md': '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n '--mz-shadow-lg': '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n};\n\n// ---------------------------------------------------------------------------\n// Shadow presets\n// ---------------------------------------------------------------------------\ntype ShadowPreset = 'none' | 'subtle' | 'medium' | 'dramatic';\n\nconst SHADOW_PRESETS: Record<ShadowPreset, { sm: string; md: string; lg: string }> = {\n none: {\n sm: 'none',\n md: 'none',\n lg: 'none',\n },\n subtle: {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.04)',\n md: '0 2px 4px -1px rgb(0 0 0 / 0.06)',\n lg: '0 6px 12px -3px rgb(0 0 0 / 0.08)',\n },\n medium: {\n sm: '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n md: '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n lg: '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n },\n dramatic: {\n sm: '0 2px 6px 0 rgb(0 0 0 / 0.16), 0 1px 3px -1px rgb(0 0 0 / 0.12)',\n md: '0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.14)',\n lg: '0 20px 40px -8px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.15)',\n },\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\ntype TabId = 'colors' | 'typography' | 'shape' | 'shadows';\n\nconst TABS: { id: TabId; label: string }[] = [\n { id: 'colors', label: 'Colors' },\n { id: 'typography', label: 'Typography & Spacing' },\n { id: 'shape', label: 'Shape' },\n { id: 'shadows', label: 'Shadows' },\n];\n\n// ---------------------------------------------------------------------------\n// Styles \u2014 editor chrome uses CSS custom properties that respond to\n// prefers-color-scheme and [data-theme] for light/dark adaptivity.\n// ---------------------------------------------------------------------------\nconst editorStyles = css`\n :host {\n display: block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n\n /* Editor chrome \u2014 light mode defaults */\n --_editor-bg: #f6f6f7;\n --_editor-bg-raised: #ffffff;\n --_editor-text: #1a1a1a;\n --_editor-text-secondary: #666;\n --_editor-text-muted: #999;\n --_editor-border: #e0e0e0;\n --_editor-accent: #4260a8;\n --_editor-input-bg: #ffffff;\n --_editor-tab-bg: #eeeeef;\n\n color: var(--_editor-text);\n }\n\n /* Dark mode \u2014 activated via JS-set [dark] attribute on :host */\n :host([dark]) {\n --_editor-bg: #1a1a1d;\n --_editor-bg-raised: #252528;\n --_editor-text: #e4e4e7;\n --_editor-text-secondary: #a1a1a8;\n --_editor-text-muted: #71717a;\n --_editor-border: #333336;\n --_editor-accent: #818cf8;\n --_editor-input-bg: #252528;\n --_editor-tab-bg: #141416;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* ---- Full-width mode ---- */\n :host([full-width]) .editor {\n border: none;\n border-radius: 0;\n }\n\n :host([full-width]) .editor__controls {\n max-width: none;\n }\n\n /* ---- Layout ---- */\n .editor {\n display: flex;\n height: 100%;\n min-height: 540px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n overflow: hidden;\n background: var(--_editor-bg);\n }\n\n .editor__controls {\n width: 40%;\n min-width: 300px;\n max-width: 480px;\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--_editor-border);\n overflow: hidden;\n }\n\n .editor__preview {\n flex: 1;\n overflow: auto;\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Tabs ---- */\n .tabs {\n display: flex;\n background: var(--_editor-tab-bg);\n border-bottom: 1px solid var(--_editor-border);\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n }\n\n .tabs__btn {\n flex: 1;\n padding: 8px 6px;\n border: none;\n background: transparent;\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n color: var(--_editor-text-secondary);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n white-space: nowrap;\n }\n\n .tabs__btn:hover {\n color: var(--_editor-text);\n }\n\n .tabs__btn--active {\n color: var(--_editor-accent);\n border-bottom-color: var(--_editor-accent);\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Controls panel ---- */\n .controls {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n }\n\n .section-label {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--_editor-text-muted);\n margin: 16px 0 8px;\n }\n\n .section-label:first-child {\n margin-top: 0;\n }\n\n .section-desc {\n font-size: 11px;\n color: var(--_editor-text-muted);\n margin: -4px 0 12px;\n line-height: 1.4;\n }\n\n /* ---- Field row ---- */\n .field {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .field__info {\n flex: 1;\n min-width: 0;\n }\n\n .field__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .field__control {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n /* ---- Color input ---- */\n input[type='color'] {\n -webkit-appearance: none;\n appearance: none;\n width: 32px;\n height: 28px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n padding: 1px;\n cursor: pointer;\n background: var(--_editor-input-bg);\n }\n\n input[type='color']::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type='color']::-webkit-color-swatch {\n border: none;\n border-radius: 3px;\n }\n\n /* ---- Hex text input ---- */\n .hex-input {\n width: 76px;\n padding: 4px 6px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font-family: SFMono-Regular, Consolas, monospace;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .hex-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Text input ---- */\n .text-input {\n width: 100%;\n padding: 5px 8px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font: inherit;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .text-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Range slider ---- */\n .range-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .range-row__info {\n flex: 1;\n min-width: 0;\n }\n\n .range-row__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .range-row__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .range-row__slider {\n width: 120px;\n accent-color: var(--_editor-accent);\n }\n\n .range-row__value {\n font-size: 11px;\n font-family: SFMono-Regular, Consolas, monospace;\n color: var(--_editor-text-muted);\n width: 44px;\n text-align: right;\n flex-shrink: 0;\n }\n\n /* ---- Font text field (full-width) ---- */\n .font-field {\n margin-bottom: 10px;\n }\n\n .font-field__label {\n display: block;\n font-size: 12px;\n color: var(--_editor-text-secondary);\n margin-bottom: 2px;\n }\n\n .font-field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n\n /* ---- Shadow radio presets ---- */\n .shadow-presets {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n margin-top: 8px;\n }\n\n .shadow-preset {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n background: var(--_editor-bg-raised);\n }\n\n .shadow-preset:hover {\n border-color: var(--_editor-text-muted);\n }\n\n .shadow-preset--selected {\n border-color: var(--_editor-accent);\n background: color-mix(in srgb, var(--_editor-accent) 8%, var(--_editor-bg-raised));\n }\n\n .shadow-preset__radio {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--_editor-border);\n position: relative;\n flex-shrink: 0;\n }\n\n .shadow-preset--selected .shadow-preset__radio {\n border-color: var(--_editor-accent);\n }\n\n .shadow-preset--selected .shadow-preset__radio::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--_editor-accent);\n }\n\n .shadow-preset__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--_editor-text);\n }\n\n .shadow-preset__demo {\n width: 28px;\n height: 20px;\n background: var(--_editor-bg-raised);\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n /* ---- Preview area ---- */\n .preview {\n padding: 24px;\n min-height: 100%;\n background: var(--mz-color-surface-raised, #faf9f7);\n }\n\n .preview-section {\n margin-bottom: 24px;\n }\n\n .preview-section__title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--mz-color-text-secondary, #79726b);\n margin: 0 0 12px;\n font-family: var(--mz-font-sans, inherit);\n }\n\n .preview-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .preview-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n }\n\n .preview-link {\n color: var(--mz-color-link, #4260a8);\n text-decoration: underline;\n font-family: var(--mz-font-sans, inherit);\n font-size: var(--mz-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n\n .preview-link:hover {\n opacity: 0.8;\n }\n\n .preview-card-wrapper {\n margin-top: 16px;\n }\n`;\n\n/**\n * @summary A visual editor for Manzano CSS design tokens. Organizes tokens into\n * tabbed categories (Colors, Typography & Spacing, Shape, Shadows) with a live\n * preview panel showing Manzano components updated in real time.\n *\n * @tag mz-theme-editor\n *\n * @event mz-theme-change - Emitted when any token value changes.\n * Detail: `{ css: string, tokens: Record<string, string> }`\n */\nexport class MzThemeEditor extends ManzanoElement {\n static styles = editorStyles;\n\n // ---------- Public API ----------\n\n /** Name of the theme, used in the generated CSS selector. */\n @property({ attribute: 'theme-name' }) themeName = 'custom-theme';\n\n /** When true, the editor fills its container edge-to-edge (no border/radius). */\n @property({ type: Boolean, reflect: true, attribute: 'full-width' }) fullWidth = false;\n\n /**\n * Initial token values as a JSON string. When set, merges into the current\n * token map (values not present fall back to defaults).\n */\n @property({ attribute: 'value' })\n get value(): string {\n return JSON.stringify(this.tokens);\n }\n set value(val: string) {\n if (!val) return;\n try {\n const parsed = JSON.parse(val);\n if (typeof parsed === 'object' && parsed !== null) {\n this.tokens = { ...DEFAULT_TOKENS, ...parsed };\n }\n } catch {\n // ignore invalid JSON\n }\n }\n\n // ---------- Internal state ----------\n\n @state() private activeTab: TabId = 'colors';\n @state() tokens: Record<string, string> = { ...DEFAULT_TOKENS };\n @state() private shadowPreset: ShadowPreset = 'medium';\n\n private _darkQuery?: MediaQueryList;\n private _darkObserver?: MutationObserver;\n\n // ---------- Lifecycle ----------\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.shadowPreset = this.detectShadowPreset();\n this._syncDarkMode();\n\n // Watch system preference changes\n this._darkQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._darkQuery.addEventListener('change', this._syncDarkMode);\n\n // Watch ancestor data-theme attribute changes\n this._darkObserver = new MutationObserver(this._syncDarkMode);\n this._darkObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme']\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._darkQuery?.removeEventListener('change', this._syncDarkMode);\n this._darkObserver?.disconnect();\n }\n\n private _syncDarkMode = (): void => {\n const htmlTheme = document.documentElement.getAttribute('data-theme');\n const isDark =\n htmlTheme === 'dark' ||\n (!htmlTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n if (isDark) {\n this.setAttribute('dark', '');\n } else {\n this.removeAttribute('dark');\n }\n };\n\n // ---------- Public methods ----------\n\n /** Returns the current token map. */\n getTokens(): Record<string, string> {\n return { ...this.tokens };\n }\n\n /** Generates a full theme CSS file string. Only includes tokens that differ from defaults. */\n getCSS(): string {\n const selector = `[data-theme-custom=\"${this.themeName}\"]`;\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n if (val !== DEFAULT_TOKENS[key]) {\n lines.push(` ${key}: ${val};`);\n }\n }\n if (lines.length === 0) {\n return `${selector} {\\n /* No overrides \u2014 using Manzano defaults */\\n}`;\n }\n return `${selector} {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Token mutation ----------\n\n private setToken(name: string, value: string): void {\n this.tokens = { ...this.tokens, [name]: value };\n this.emitChange();\n }\n\n private emitChange(): void {\n this.emit('mz-theme-change', {\n detail: { css: this.getCSS(), tokens: this.getTokens() },\n });\n }\n\n // ---------- Shadow preset helpers ----------\n\n private detectShadowPreset(): ShadowPreset {\n const sm = this.tokens['--mz-shadow-sm'];\n for (const [preset, vals] of Object.entries(SHADOW_PRESETS)) {\n if (vals.sm === sm) return preset as ShadowPreset;\n }\n return 'medium';\n }\n\n private applyShadowPreset(preset: ShadowPreset): void {\n const vals = SHADOW_PRESETS[preset];\n this.shadowPreset = preset;\n this.tokens = {\n ...this.tokens,\n '--mz-shadow-sm': vals.sm,\n '--mz-shadow-md': vals.md,\n '--mz-shadow-lg': vals.lg,\n };\n this.emitChange();\n }\n\n // ---------- Render helpers: controls ----------\n\n private renderColorField(token: string, label: string, showHex: boolean, desc: string = '') {\n const val = this.tokens[token] || '#000000';\n return html`\n <div class=\"field\">\n <div class=\"field__info\">\n <span class=\"field__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"field__desc\">${desc}</span>` : nothing}\n </div>\n <div class=\"field__control\">\n <input\n type=\"color\"\n .value=${val}\n @input=${(e: Event) => this.setToken(token, (e.target as HTMLInputElement).value)}\n />\n ${showHex\n ? html`<input\n class=\"hex-input\"\n type=\"text\"\n .value=${val}\n @change=${(e: Event) => {\n let v = (e.target as HTMLInputElement).value.trim();\n if (v && !v.startsWith('#')) v = '#' + v;\n if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {\n this.setToken(token, v);\n }\n }}\n />`\n : nothing}\n </div>\n </div>\n `;\n }\n\n private renderRangeField(\n token: string,\n label: string,\n min: number,\n max: number,\n step: number,\n unit: string = '',\n desc: string = ''\n ) {\n const raw = parseFloat(this.tokens[token]) || 0;\n return html`\n <div class=\"range-row\">\n <div class=\"range-row__info\">\n <span class=\"range-row__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"range-row__desc\">${desc}</span>` : nothing}\n </div>\n <input\n class=\"range-row__slider\"\n type=\"range\"\n .min=${String(min)}\n .max=${String(max)}\n .step=${String(step)}\n .value=${String(raw)}\n @input=${(e: Event) => {\n const v = (e.target as HTMLInputElement).value;\n this.setToken(token, unit ? `${v}${unit}` : v);\n }}\n />\n <span class=\"range-row__value\">${raw}${unit}</span>\n </div>\n `;\n }\n\n // ---------- Tab panels ----------\n\n private renderColorsTab() {\n return html`\n <div class=\"section-label\">Brand &amp; Semantic</div>\n ${this.renderColorField('--mz-color-primary', 'Primary', true, 'Base brand color. Fallback for action, focus, selected, link.')}\n ${this.renderColorField('--mz-color-action', 'Action', true, 'Button fills, CTAs, progress indicators.')}\n ${this.renderColorField('--mz-color-on-action', 'On Action', false, 'Text/icon color on action backgrounds.')}\n ${this.renderColorField('--mz-color-focus', 'Focus', true, 'Focus rings and input focus borders.')}\n ${this.renderColorField('--mz-color-selected', 'Selected', true, 'Checked checkboxes, switches, selected chips and cards.')}\n ${this.renderColorField('--mz-color-on-selected', 'On Selected', false, 'Text/icon color on selected backgrounds.')}\n ${this.renderColorField('--mz-color-link', 'Link', true, 'Text link color.')}\n\n <div class=\"section-label\">Surfaces</div>\n ${this.renderColorField('--mz-color-surface', 'Surface', false, 'Page and card backgrounds.')}\n ${this.renderColorField('--mz-color-surface-raised', 'Surface Raised', false, 'Elevated card and panel backgrounds.')}\n ${this.renderColorField('--mz-color-text', 'Text', false, 'Primary body text color.')}\n ${this.renderColorField('--mz-color-text-secondary', 'Text Secondary', false, 'Muted text, descriptions, placeholders.')}\n ${this.renderColorField('--mz-color-border', 'Border', false, 'Dividers, card borders, input outlines.')}\n\n <div class=\"section-label\">Status</div>\n ${this.renderColorField('--mz-color-success', 'Success', false, 'Success states, confirmations.')}\n ${this.renderColorField('--mz-color-warning', 'Warning', false, 'Warning states, caution indicators.')}\n ${this.renderColorField('--mz-color-danger', 'Danger', false, 'Error states, destructive actions.')}\n ${this.renderColorField('--mz-color-neutral', 'Neutral', false, 'Neutral badge and button variant.')}\n `;\n }\n\n private renderTypographyTab() {\n return html`\n <div class=\"font-field\">\n <label class=\"font-field__label\" title=\"--mz-font-sans\">Font Family</label>\n <span class=\"font-field__desc\">Font stack for all text. Use quotes for multi-word names.</span>\n <input\n class=\"text-input\"\n type=\"text\"\n .value=${this.tokens['--mz-font-sans']}\n @change=${(e: Event) => this.setToken('--mz-font-sans', (e.target as HTMLInputElement).value)}\n />\n </div>\n\n ${this.renderRangeField('--mz-space-scale', 'Space Scale', 0.7, 1.4, 0.01, '', 'Global spacing multiplier. 0.8 = compact, 1.2 = spacious.')}\n ${this.renderRangeField('--mz-font-size-scale', 'Font Size Scale', 0.8, 1.2, 0.01, '', 'Global font size multiplier.')}\n `;\n }\n\n private renderShapeTab() {\n return html`\n ${this.renderRangeField('--mz-radius-sm', 'Radius SM', 0, 24, 1, 'px', 'Small elements: badges, chips, checkboxes.')}\n ${this.renderRangeField('--mz-radius-md', 'Radius MD', 0, 24, 1, 'px', 'Medium elements: buttons, inputs, selects.')}\n ${this.renderRangeField('--mz-radius-lg', 'Radius LG', 0, 32, 1, 'px', 'Large elements: cards, dialogs, panels.')}\n ${this.renderRangeField('--mz-border-width-sm', 'Border Width', 0, 4, 0.5, 'px', 'Default border thickness for panels and dividers.')}\n ${this.renderColorField('--mz-input-bg', 'Input Background', false, 'Background fill for inputs. Use semi-transparent for dark themes.')}\n ${this.renderRangeField('--mz-input-border-width', 'Input Border Width', 0, 4, 0.5, 'px', 'Border thickness for form inputs.')}\n `;\n }\n\n private renderShadowsTab() {\n const presets: { id: ShadowPreset; label: string; shadow: string }[] = [\n { id: 'none', label: 'None', shadow: 'none' },\n { id: 'subtle', label: 'Subtle', shadow: SHADOW_PRESETS.subtle.md },\n { id: 'medium', label: 'Medium', shadow: SHADOW_PRESETS.medium.md },\n { id: 'dramatic', label: 'Dramatic', shadow: SHADOW_PRESETS.dramatic.md },\n ];\n\n return html`\n <div class=\"section-label\">Shadow Intensity</div>\n <p class=\"section-desc\">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>\n <div class=\"shadow-presets\">\n ${presets.map(\n p => html`\n <div\n class=\"shadow-preset ${this.shadowPreset === p.id ? 'shadow-preset--selected' : ''}\"\n @click=${() => this.applyShadowPreset(p.id)}\n >\n <div class=\"shadow-preset__radio\"></div>\n <span class=\"shadow-preset__label\">${p.label}</span>\n <div class=\"shadow-preset__demo\" style=\"box-shadow: ${p.shadow}\"></div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n // ---------- Build the theme <style> text for the preview area ----------\n\n private get themeStyleText(): string {\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n lines.push(` ${key}: ${val};`);\n }\n return `.preview-themed {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Preview panel ----------\n\n private renderPreview() {\n // We apply tokens via an inline <style> on a wrapper div\n return html`\n <style>${this.themeStyleText}</style>\n <div class=\"preview preview-themed\">\n <!-- Buttons -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Buttons</p>\n <div class=\"preview-row\">\n <mz-button variant=\"primary\">Primary</mz-button>\n <mz-button variant=\"primary\" appearance=\"outline\">Outline</mz-button>\n <mz-button variant=\"primary\" appearance=\"ghost\">Ghost</mz-button>\n </div>\n </div>\n\n <!-- Input -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Input</p>\n <mz-input placeholder=\"Focus me...\" style=\"max-width: 280px;\"></mz-input>\n </div>\n\n <!-- Checkbox & Switch -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Checkbox &amp; Switch</p>\n <div class=\"preview-row\">\n <mz-checkbox checked>Checked</mz-checkbox>\n <mz-switch checked>Active</mz-switch>\n </div>\n </div>\n\n <!-- Chips -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Chips</p>\n <div class=\"preview-row\">\n <mz-chip-group>\n <mz-chip value=\"a\" selected>Option A</mz-chip>\n <mz-chip value=\"b\">Option B</mz-chip>\n <mz-chip value=\"c\">Option C</mz-chip>\n </mz-chip-group>\n </div>\n </div>\n\n <!-- Selectable Cards -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Selectable Cards</p>\n <div class=\"preview-cards\">\n <mz-selectable-card selected>Card 1</mz-selectable-card>\n <mz-selectable-card>Card 2</mz-selectable-card>\n <mz-selectable-card>Card 3</mz-selectable-card>\n </div>\n </div>\n\n <!-- Badges -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Badges</p>\n <div class=\"preview-row\">\n <mz-badge variant=\"primary\">Primary</mz-badge>\n <mz-badge variant=\"success\">Success</mz-badge>\n <mz-badge variant=\"warning\">Warning</mz-badge>\n <mz-badge variant=\"danger\">Danger</mz-badge>\n </div>\n </div>\n\n <!-- Progress -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Progress</p>\n <mz-progress value=\"65\" style=\"max-width: 300px;\"></mz-progress>\n </div>\n\n <!-- Link -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Link</p>\n <a class=\"preview-link\" href=\"javascript:void(0)\">This is a themed link</a>\n </div>\n\n <!-- Shadows & Card -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Shadows &amp; Card</p>\n <div style=\"display: flex; gap: 16px; align-items: start;\">\n <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>\n <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>\n <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>\n </div>\n <div style=\"display: flex; gap: 16px; margin-top: 4px; font-size: 10px; color: var(--mz-color-text-secondary, #999);\">\n <span style=\"width: 80px; text-align: center;\">sm</span>\n <span style=\"width: 80px; text-align: center;\">md</span>\n <span style=\"width: 80px; text-align: center;\">lg</span>\n </div>\n </div>\n\n <!-- Card container -->\n <div class=\"preview-section preview-card-wrapper\">\n <p class=\"preview-section__title\">Card</p>\n <mz-card style=\"max-width: 300px;\">\n <div slot=\"header\" style=\"padding: 12px 16px 0; font-weight: 600; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text, #333);\">\n Example Card\n </div>\n <div style=\"padding: 0 16px 12px; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text-secondary, #666); font-size: 14px;\">\n This card shows surface color, border radius, border width, and shadow in context.\n </div>\n </mz-card>\n </div>\n </div>\n `;\n }\n\n // ---------- Main render ----------\n\n override render() {\n let tabContent;\n switch (this.activeTab) {\n case 'colors':\n tabContent = this.renderColorsTab();\n break;\n case 'typography':\n tabContent = this.renderTypographyTab();\n break;\n case 'shape':\n tabContent = this.renderShapeTab();\n break;\n case 'shadows':\n tabContent = this.renderShadowsTab();\n break;\n }\n\n return html`\n <div class=\"editor\">\n <!-- Left: controls -->\n <div class=\"editor__controls\">\n <div class=\"tabs\" role=\"tablist\">\n ${TABS.map(\n tab => html`\n <button\n class=\"tabs__btn ${this.activeTab === tab.id ? 'tabs__btn--active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === tab.id}\n @click=${() => (this.activeTab = tab.id)}\n >\n ${tab.label}\n </button>\n `\n )}\n </div>\n <div class=\"controls\" role=\"tabpanel\">${tabContent}</div>\n </div>\n\n <!-- Right: live preview -->\n <div class=\"editor__preview\">${this.renderPreview()}</div>\n </div>\n `;\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,KAAK,eAAe;AACnC,SAAS,UAAU,aAAa;AAChC,SAAS,sBAAsB;AAK/B,MAAM,iBAAyC;AAAA;AAAA,EAE7C,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA;AAAA,EAGnB,sBAAsB;AAAA,EACtB,6BAA6B;AAAA,EAC7B,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,qBAAqB;AAAA;AAAA,EAGrB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA;AAAA,EAGtB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA;AAAA,EAGxB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,2BAA2B;AAAA;AAAA,EAG3B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAOA,MAAM,iBAA+E;AAAA,EACnF,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACF;AAOA,MAAM,OAAuC;AAAA,EAC3C,EAAE,IAAI,UAAU,OAAO,SAAS;AAAA,EAChC,EAAE,IAAI,cAAc,OAAO,uBAAuB;AAAA,EAClD,EAAE,IAAI,SAAS,OAAO,QAAQ;AAAA,EAC9B,EAAE,IAAI,WAAW,OAAO,UAAU;AACpC;AAMA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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",
4
+ "sourcesContent": ["import { html, css, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../components/src/internal/manzano-element.js';\n\n// ---------------------------------------------------------------------------\n// Default token values (Manzano light theme resolved values)\n// ---------------------------------------------------------------------------\nconst DEFAULT_TOKENS: Record<string, string> = {\n // Brand & Semantic\n '--mz-color-primary': '#4260a8',\n '--mz-color-action': '#4260a8',\n '--mz-color-on-action': '#ffffff',\n '--mz-color-focus': '#4260a8',\n '--mz-color-selected': '#4260a8',\n '--mz-color-on-selected': '#ffffff',\n '--mz-color-link': '#4260a8',\n\n // Surfaces\n '--mz-color-surface': '#ffffff',\n '--mz-color-surface-raised': '#faf9f7',\n '--mz-color-text': '#1c1915',\n '--mz-color-text-secondary': '#79726b',\n '--mz-color-border': '#d5d1cb',\n\n // Status\n '--mz-color-success': '#2d8556',\n '--mz-color-warning': '#d59724',\n '--mz-color-danger': '#c04b34',\n '--mz-color-neutral': '#433d37',\n\n // Typography & Spacing\n '--mz-font-sans': \"'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n '--mz-space-scale': '1',\n '--mz-font-size-scale': '1',\n\n // Shape\n '--mz-radius-sm': '6px',\n '--mz-radius-md': '8px',\n '--mz-radius-lg': '12px',\n '--mz-border-width-sm': '1px',\n '--mz-input-bg': '#ffffff',\n '--mz-input-border-width': '1px',\n '--mz-input-affix-color': '#79726b',\n\n // Shadows\n '--mz-shadow-sm': '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n '--mz-shadow-md': '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n '--mz-shadow-lg': '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n};\n\n// ---------------------------------------------------------------------------\n// Shadow presets\n// ---------------------------------------------------------------------------\ntype ShadowPreset = 'none' | 'subtle' | 'medium' | 'dramatic';\n\nconst SHADOW_PRESETS: Record<ShadowPreset, { sm: string; md: string; lg: string }> = {\n none: {\n sm: 'none',\n md: 'none',\n lg: 'none',\n },\n subtle: {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.04)',\n md: '0 2px 4px -1px rgb(0 0 0 / 0.06)',\n lg: '0 6px 12px -3px rgb(0 0 0 / 0.08)',\n },\n medium: {\n sm: '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n md: '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n lg: '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n },\n dramatic: {\n sm: '0 2px 6px 0 rgb(0 0 0 / 0.16), 0 1px 3px -1px rgb(0 0 0 / 0.12)',\n md: '0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.14)',\n lg: '0 20px 40px -8px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.15)',\n },\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\ntype TabId = 'colors' | 'typography' | 'shape' | 'shadows';\n\nconst TABS: { id: TabId; label: string }[] = [\n { id: 'colors', label: 'Colors' },\n { id: 'typography', label: 'Typography & Spacing' },\n { id: 'shape', label: 'Shape' },\n { id: 'shadows', label: 'Shadows' },\n];\n\n// ---------------------------------------------------------------------------\n// Styles \u2014 editor chrome uses CSS custom properties that respond to\n// prefers-color-scheme and [data-theme] for light/dark adaptivity.\n// ---------------------------------------------------------------------------\nconst editorStyles = css`\n :host {\n display: block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n\n /* Editor chrome \u2014 light mode defaults */\n --_editor-bg: #f6f6f7;\n --_editor-bg-raised: #ffffff;\n --_editor-text: #1a1a1a;\n --_editor-text-secondary: #666;\n --_editor-text-muted: #999;\n --_editor-border: #e0e0e0;\n --_editor-accent: #4260a8;\n --_editor-input-bg: #ffffff;\n --_editor-tab-bg: #eeeeef;\n\n color: var(--_editor-text);\n }\n\n /* Dark mode \u2014 activated via JS-set [dark] attribute on :host */\n :host([dark]) {\n --_editor-bg: #1a1a1d;\n --_editor-bg-raised: #252528;\n --_editor-text: #e4e4e7;\n --_editor-text-secondary: #a1a1a8;\n --_editor-text-muted: #71717a;\n --_editor-border: #333336;\n --_editor-accent: #818cf8;\n --_editor-input-bg: #252528;\n --_editor-tab-bg: #141416;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* ---- Full-width mode ---- */\n :host([full-width]) .editor {\n border: none;\n border-radius: 0;\n }\n\n :host([full-width]) .editor__controls {\n max-width: none;\n }\n\n /* ---- Layout ---- */\n .editor {\n display: flex;\n height: 100%;\n min-height: 540px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n overflow: hidden;\n background: var(--_editor-bg);\n }\n\n .editor__controls {\n width: 40%;\n min-width: 300px;\n max-width: 480px;\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--_editor-border);\n overflow: hidden;\n }\n\n .editor__preview {\n flex: 1;\n overflow: auto;\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Tabs ---- */\n .tabs {\n display: flex;\n background: var(--_editor-tab-bg);\n border-bottom: 1px solid var(--_editor-border);\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n }\n\n .tabs__btn {\n flex: 1;\n padding: 8px 6px;\n border: none;\n background: transparent;\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n color: var(--_editor-text-secondary);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n white-space: nowrap;\n }\n\n .tabs__btn:hover {\n color: var(--_editor-text);\n }\n\n .tabs__btn--active {\n color: var(--_editor-accent);\n border-bottom-color: var(--_editor-accent);\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Controls panel ---- */\n .controls {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n }\n\n .section-label {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--_editor-text-muted);\n margin: 16px 0 8px;\n }\n\n .section-label:first-child {\n margin-top: 0;\n }\n\n .section-desc {\n font-size: 11px;\n color: var(--_editor-text-muted);\n margin: -4px 0 12px;\n line-height: 1.4;\n }\n\n /* ---- Field row ---- */\n .field {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .field__info {\n flex: 1;\n min-width: 0;\n }\n\n .field__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .field__control {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n /* ---- Color input ---- */\n input[type='color'] {\n -webkit-appearance: none;\n appearance: none;\n width: 32px;\n height: 28px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n padding: 1px;\n cursor: pointer;\n background: var(--_editor-input-bg);\n }\n\n input[type='color']::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type='color']::-webkit-color-swatch {\n border: none;\n border-radius: 3px;\n }\n\n /* ---- Hex text input ---- */\n .hex-input {\n width: 76px;\n padding: 4px 6px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font-family: SFMono-Regular, Consolas, monospace;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .hex-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Text input ---- */\n .text-input {\n width: 100%;\n padding: 5px 8px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font: inherit;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .text-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Range slider ---- */\n .range-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .range-row__info {\n flex: 1;\n min-width: 0;\n }\n\n .range-row__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .range-row__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .range-row__slider {\n width: 120px;\n accent-color: var(--_editor-accent);\n }\n\n .range-row__value {\n font-size: 11px;\n font-family: SFMono-Regular, Consolas, monospace;\n color: var(--_editor-text-muted);\n width: 44px;\n text-align: right;\n flex-shrink: 0;\n }\n\n /* ---- Font text field (full-width) ---- */\n .font-field {\n margin-bottom: 10px;\n }\n\n .font-field__label {\n display: block;\n font-size: 12px;\n color: var(--_editor-text-secondary);\n margin-bottom: 2px;\n }\n\n .font-field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n\n /* ---- Shadow radio presets ---- */\n .shadow-presets {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n margin-top: 8px;\n }\n\n .shadow-preset {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n background: var(--_editor-bg-raised);\n }\n\n .shadow-preset:hover {\n border-color: var(--_editor-text-muted);\n }\n\n .shadow-preset--selected {\n border-color: var(--_editor-accent);\n background: color-mix(in srgb, var(--_editor-accent) 8%, var(--_editor-bg-raised));\n }\n\n .shadow-preset__radio {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--_editor-border);\n position: relative;\n flex-shrink: 0;\n }\n\n .shadow-preset--selected .shadow-preset__radio {\n border-color: var(--_editor-accent);\n }\n\n .shadow-preset--selected .shadow-preset__radio::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--_editor-accent);\n }\n\n .shadow-preset__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--_editor-text);\n }\n\n .shadow-preset__demo {\n width: 28px;\n height: 20px;\n background: var(--_editor-bg-raised);\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n /* ---- Preview area ---- */\n .preview {\n padding: 24px;\n min-height: 100%;\n background: var(--mz-color-surface-raised, #faf9f7);\n }\n\n .preview-section {\n margin-bottom: 24px;\n }\n\n .preview-section__title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--mz-color-text-secondary, #79726b);\n margin: 0 0 12px;\n font-family: var(--mz-font-sans, inherit);\n }\n\n .preview-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .preview-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n }\n\n .preview-link {\n color: var(--mz-color-link, #4260a8);\n text-decoration: underline;\n font-family: var(--mz-font-sans, inherit);\n font-size: var(--mz-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n\n .preview-link:hover {\n opacity: 0.8;\n }\n\n .preview-card-wrapper {\n margin-top: 16px;\n }\n`;\n\n/**\n * @summary A visual editor for Manzano CSS design tokens. Organizes tokens into\n * tabbed categories (Colors, Typography & Spacing, Shape, Shadows) with a live\n * preview panel showing Manzano components updated in real time.\n *\n * @tag mz-theme-editor\n *\n * @event mz-theme-change - Emitted when any token value changes.\n * Detail: `{ css: string, tokens: Record<string, string> }`\n */\nexport class MzThemeEditor extends ManzanoElement {\n static styles = editorStyles;\n\n // ---------- Public API ----------\n\n /** Name of the theme, used in the generated CSS selector. */\n @property({ attribute: 'theme-name' }) themeName = 'custom-theme';\n\n /** When true, the editor fills its container edge-to-edge (no border/radius). */\n @property({ type: Boolean, reflect: true, attribute: 'full-width' }) fullWidth = false;\n\n /**\n * Initial token values as a JSON string. When set, merges into the current\n * token map (values not present fall back to defaults).\n */\n @property({ attribute: 'value' })\n get value(): string {\n return JSON.stringify(this.tokens);\n }\n set value(val: string) {\n if (!val) return;\n try {\n const parsed = JSON.parse(val);\n if (typeof parsed === 'object' && parsed !== null) {\n this.tokens = { ...DEFAULT_TOKENS, ...parsed };\n }\n } catch {\n // ignore invalid JSON\n }\n }\n\n // ---------- Internal state ----------\n\n @state() private activeTab: TabId = 'colors';\n @state() tokens: Record<string, string> = { ...DEFAULT_TOKENS };\n @state() private shadowPreset: ShadowPreset = 'medium';\n\n private _darkQuery?: MediaQueryList;\n private _darkObserver?: MutationObserver;\n\n // ---------- Lifecycle ----------\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.shadowPreset = this.detectShadowPreset();\n this._syncDarkMode();\n\n // Watch system preference changes\n this._darkQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._darkQuery.addEventListener('change', this._syncDarkMode);\n\n // Watch ancestor data-theme attribute changes\n this._darkObserver = new MutationObserver(this._syncDarkMode);\n this._darkObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme']\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._darkQuery?.removeEventListener('change', this._syncDarkMode);\n this._darkObserver?.disconnect();\n }\n\n private _syncDarkMode = (): void => {\n const htmlTheme = document.documentElement.getAttribute('data-theme');\n const isDark =\n htmlTheme === 'dark' ||\n (!htmlTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n if (isDark) {\n this.setAttribute('dark', '');\n } else {\n this.removeAttribute('dark');\n }\n };\n\n // ---------- Public methods ----------\n\n /** Returns the current token map. */\n getTokens(): Record<string, string> {\n return { ...this.tokens };\n }\n\n /** Generates a full theme CSS file string. Only includes tokens that differ from defaults. */\n getCSS(): string {\n const selector = `[data-theme-custom=\"${this.themeName}\"]`;\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n if (val !== DEFAULT_TOKENS[key]) {\n lines.push(` ${key}: ${val};`);\n }\n }\n if (lines.length === 0) {\n return `${selector} {\\n /* No overrides \u2014 using Manzano defaults */\\n}`;\n }\n return `${selector} {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Token mutation ----------\n\n private setToken(name: string, value: string): void {\n this.tokens = { ...this.tokens, [name]: value };\n this.emitChange();\n }\n\n private emitChange(): void {\n this.emit('mz-theme-change', {\n detail: { css: this.getCSS(), tokens: this.getTokens() },\n });\n }\n\n // ---------- Shadow preset helpers ----------\n\n private detectShadowPreset(): ShadowPreset {\n const sm = this.tokens['--mz-shadow-sm'];\n for (const [preset, vals] of Object.entries(SHADOW_PRESETS)) {\n if (vals.sm === sm) return preset as ShadowPreset;\n }\n return 'medium';\n }\n\n private applyShadowPreset(preset: ShadowPreset): void {\n const vals = SHADOW_PRESETS[preset];\n this.shadowPreset = preset;\n this.tokens = {\n ...this.tokens,\n '--mz-shadow-sm': vals.sm,\n '--mz-shadow-md': vals.md,\n '--mz-shadow-lg': vals.lg,\n };\n this.emitChange();\n }\n\n // ---------- Render helpers: controls ----------\n\n private renderColorField(token: string, label: string, showHex: boolean, desc: string = '') {\n const val = this.tokens[token] || '#000000';\n return html`\n <div class=\"field\">\n <div class=\"field__info\">\n <span class=\"field__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"field__desc\">${desc}</span>` : nothing}\n </div>\n <div class=\"field__control\">\n <input\n type=\"color\"\n .value=${val}\n @input=${(e: Event) => this.setToken(token, (e.target as HTMLInputElement).value)}\n />\n ${showHex\n ? html`<input\n class=\"hex-input\"\n type=\"text\"\n .value=${val}\n @change=${(e: Event) => {\n let v = (e.target as HTMLInputElement).value.trim();\n if (v && !v.startsWith('#')) v = '#' + v;\n if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {\n this.setToken(token, v);\n }\n }}\n />`\n : nothing}\n </div>\n </div>\n `;\n }\n\n private renderRangeField(\n token: string,\n label: string,\n min: number,\n max: number,\n step: number,\n unit: string = '',\n desc: string = ''\n ) {\n const raw = parseFloat(this.tokens[token]) || 0;\n return html`\n <div class=\"range-row\">\n <div class=\"range-row__info\">\n <span class=\"range-row__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"range-row__desc\">${desc}</span>` : nothing}\n </div>\n <input\n class=\"range-row__slider\"\n type=\"range\"\n .min=${String(min)}\n .max=${String(max)}\n .step=${String(step)}\n .value=${String(raw)}\n @input=${(e: Event) => {\n const v = (e.target as HTMLInputElement).value;\n this.setToken(token, unit ? `${v}${unit}` : v);\n }}\n />\n <span class=\"range-row__value\">${raw}${unit}</span>\n </div>\n `;\n }\n\n // ---------- Tab panels ----------\n\n private renderColorsTab() {\n return html`\n <div class=\"section-label\">Brand &amp; Semantic</div>\n ${this.renderColorField('--mz-color-primary', 'Primary', true, 'Base brand color. Fallback for action, focus, selected, link.')}\n ${this.renderColorField('--mz-color-action', 'Action', true, 'Button fills, CTAs, progress indicators.')}\n ${this.renderColorField('--mz-color-on-action', 'On Action', false, 'Text/icon color on action backgrounds.')}\n ${this.renderColorField('--mz-color-focus', 'Focus', true, 'Focus rings and input focus borders.')}\n ${this.renderColorField('--mz-color-selected', 'Selected', true, 'Checked checkboxes, switches, selected chips and cards.')}\n ${this.renderColorField('--mz-color-on-selected', 'On Selected', false, 'Text/icon color on selected backgrounds.')}\n ${this.renderColorField('--mz-color-link', 'Link', true, 'Text link color.')}\n\n <div class=\"section-label\">Surfaces</div>\n ${this.renderColorField('--mz-color-surface', 'Surface', false, 'Page and card backgrounds.')}\n ${this.renderColorField('--mz-color-surface-raised', 'Surface Raised', false, 'Elevated card and panel backgrounds.')}\n ${this.renderColorField('--mz-color-text', 'Text', false, 'Primary body text color.')}\n ${this.renderColorField('--mz-color-text-secondary', 'Text Secondary', false, 'Muted text, descriptions, placeholders.')}\n ${this.renderColorField('--mz-color-border', 'Border', false, 'Dividers, card borders, input outlines.')}\n\n <div class=\"section-label\">Status</div>\n ${this.renderColorField('--mz-color-success', 'Success', false, 'Success states, confirmations.')}\n ${this.renderColorField('--mz-color-warning', 'Warning', false, 'Warning states, caution indicators.')}\n ${this.renderColorField('--mz-color-danger', 'Danger', false, 'Error states, destructive actions.')}\n ${this.renderColorField('--mz-color-neutral', 'Neutral', false, 'Neutral badge and button variant.')}\n `;\n }\n\n private renderTypographyTab() {\n return html`\n <div class=\"font-field\">\n <label class=\"font-field__label\" title=\"--mz-font-sans\">Font Family</label>\n <span class=\"font-field__desc\">Font stack for all text. Use quotes for multi-word names.</span>\n <input\n class=\"text-input\"\n type=\"text\"\n .value=${this.tokens['--mz-font-sans']}\n @change=${(e: Event) => this.setToken('--mz-font-sans', (e.target as HTMLInputElement).value)}\n />\n </div>\n\n ${this.renderRangeField('--mz-space-scale', 'Space Scale', 0.7, 1.4, 0.01, '', 'Global spacing multiplier. 0.8 = compact, 1.2 = spacious.')}\n ${this.renderRangeField('--mz-font-size-scale', 'Font Size Scale', 0.8, 1.2, 0.01, '', 'Global font size multiplier.')}\n `;\n }\n\n private renderShapeTab() {\n return html`\n ${this.renderRangeField('--mz-radius-sm', 'Radius SM', 0, 24, 1, 'px', 'Small elements: badges, chips, checkboxes.')}\n ${this.renderRangeField('--mz-radius-md', 'Radius MD', 0, 24, 1, 'px', 'Medium elements: buttons, inputs, selects.')}\n ${this.renderRangeField('--mz-radius-lg', 'Radius LG', 0, 32, 1, 'px', 'Large elements: cards, dialogs, panels.')}\n ${this.renderRangeField('--mz-border-width-sm', 'Border Width', 0, 4, 0.5, 'px', 'Default border thickness for panels and dividers.')}\n ${this.renderColorField('--mz-input-bg', 'Input Background', false, 'Background fill for inputs. Use semi-transparent for dark themes.')}\n ${this.renderRangeField('--mz-input-border-width', 'Input Border Width', 0, 4, 0.5, 'px', 'Border thickness for form inputs.')}\n ${this.renderColorField('--mz-input-affix-color', 'Input Icon Color', false, 'Color of prefix/suffix icons in inputs.')}\n `;\n }\n\n private renderShadowsTab() {\n const presets: { id: ShadowPreset; label: string; shadow: string }[] = [\n { id: 'none', label: 'None', shadow: 'none' },\n { id: 'subtle', label: 'Subtle', shadow: SHADOW_PRESETS.subtle.md },\n { id: 'medium', label: 'Medium', shadow: SHADOW_PRESETS.medium.md },\n { id: 'dramatic', label: 'Dramatic', shadow: SHADOW_PRESETS.dramatic.md },\n ];\n\n return html`\n <div class=\"section-label\">Shadow Intensity</div>\n <p class=\"section-desc\">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>\n <div class=\"shadow-presets\">\n ${presets.map(\n p => html`\n <div\n class=\"shadow-preset ${this.shadowPreset === p.id ? 'shadow-preset--selected' : ''}\"\n @click=${() => this.applyShadowPreset(p.id)}\n >\n <div class=\"shadow-preset__radio\"></div>\n <span class=\"shadow-preset__label\">${p.label}</span>\n <div class=\"shadow-preset__demo\" style=\"box-shadow: ${p.shadow}\"></div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n // ---------- Build the theme <style> text for the preview area ----------\n\n private get themeStyleText(): string {\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n lines.push(` ${key}: ${val};`);\n }\n return `.preview-themed {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Preview panel ----------\n\n private renderPreview() {\n // We apply tokens via an inline <style> on a wrapper div\n return html`\n <style>${this.themeStyleText}</style>\n <div class=\"preview preview-themed\">\n <!-- Buttons -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Buttons</p>\n <div class=\"preview-row\">\n <mz-button variant=\"primary\">Primary</mz-button>\n <mz-button variant=\"primary\" appearance=\"outline\">Outline</mz-button>\n <mz-button variant=\"primary\" appearance=\"ghost\">Ghost</mz-button>\n </div>\n </div>\n\n <!-- Input -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Input</p>\n <mz-input placeholder=\"Focus me...\" style=\"max-width: 280px;\"></mz-input>\n </div>\n\n <!-- Checkbox & Switch -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Checkbox &amp; Switch</p>\n <div class=\"preview-row\">\n <mz-checkbox checked>Checked</mz-checkbox>\n <mz-switch checked>Active</mz-switch>\n </div>\n </div>\n\n <!-- Chips -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Chips</p>\n <div class=\"preview-row\">\n <mz-chip-group>\n <mz-chip value=\"a\" selected>Option A</mz-chip>\n <mz-chip value=\"b\">Option B</mz-chip>\n <mz-chip value=\"c\">Option C</mz-chip>\n </mz-chip-group>\n </div>\n </div>\n\n <!-- Selectable Cards -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Selectable Cards</p>\n <div class=\"preview-cards\">\n <mz-selectable-card selected>Card 1</mz-selectable-card>\n <mz-selectable-card>Card 2</mz-selectable-card>\n <mz-selectable-card>Card 3</mz-selectable-card>\n </div>\n </div>\n\n <!-- Badges -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Badges</p>\n <div class=\"preview-row\">\n <mz-badge variant=\"primary\">Primary</mz-badge>\n <mz-badge variant=\"success\">Success</mz-badge>\n <mz-badge variant=\"warning\">Warning</mz-badge>\n <mz-badge variant=\"danger\">Danger</mz-badge>\n </div>\n </div>\n\n <!-- Progress -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Progress</p>\n <mz-progress value=\"65\" style=\"max-width: 300px;\"></mz-progress>\n </div>\n\n <!-- Link -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Link</p>\n <a class=\"preview-link\" href=\"javascript:void(0)\">This is a themed link</a>\n </div>\n\n <!-- Shadows & Card -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Shadows &amp; Card</p>\n <div style=\"display: flex; gap: 16px; align-items: start;\">\n <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>\n <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>\n <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>\n </div>\n <div style=\"display: flex; gap: 16px; margin-top: 4px; font-size: 10px; color: var(--mz-color-text-secondary, #999);\">\n <span style=\"width: 80px; text-align: center;\">sm</span>\n <span style=\"width: 80px; text-align: center;\">md</span>\n <span style=\"width: 80px; text-align: center;\">lg</span>\n </div>\n </div>\n\n <!-- Card container -->\n <div class=\"preview-section preview-card-wrapper\">\n <p class=\"preview-section__title\">Card</p>\n <mz-card style=\"max-width: 300px;\">\n <div slot=\"header\" style=\"padding: 12px 16px 0; font-weight: 600; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text, #333);\">\n Example Card\n </div>\n <div style=\"padding: 0 16px 12px; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text-secondary, #666); font-size: 14px;\">\n This card shows surface color, border radius, border width, and shadow in context.\n </div>\n </mz-card>\n </div>\n </div>\n `;\n }\n\n // ---------- Main render ----------\n\n override render() {\n let tabContent;\n switch (this.activeTab) {\n case 'colors':\n tabContent = this.renderColorsTab();\n break;\n case 'typography':\n tabContent = this.renderTypographyTab();\n break;\n case 'shape':\n tabContent = this.renderShapeTab();\n break;\n case 'shadows':\n tabContent = this.renderShadowsTab();\n break;\n }\n\n return html`\n <div class=\"editor\">\n <!-- Left: controls -->\n <div class=\"editor__controls\">\n <div class=\"tabs\" role=\"tablist\">\n ${TABS.map(\n tab => html`\n <button\n class=\"tabs__btn ${this.activeTab === tab.id ? 'tabs__btn--active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === tab.id}\n @click=${() => (this.activeTab = tab.id)}\n >\n ${tab.label}\n </button>\n `\n )}\n </div>\n <div class=\"controls\" role=\"tabpanel\">${tabContent}</div>\n </div>\n\n <!-- Right: live preview -->\n <div class=\"editor__preview\">${this.renderPreview()}</div>\n </div>\n `;\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;AAAA,SAAS,MAAM,KAAK,eAAe;AACnC,SAAS,UAAU,aAAa;AAChC,SAAS,sBAAsB;AAK/B,MAAM,iBAAyC;AAAA;AAAA,EAE7C,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,mBAAmB;AAAA;AAAA,EAGnB,sBAAsB;AAAA,EACtB,6BAA6B;AAAA,EAC7B,mBAAmB;AAAA,EACnB,6BAA6B;AAAA,EAC7B,qBAAqB;AAAA;AAAA,EAGrB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA;AAAA,EAGtB,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA;AAAA,EAGxB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA;AAAA,EAG1B,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,kBAAkB;AACpB;AAOA,MAAM,iBAA+E;AAAA,EACnF,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AACF;AAOA,MAAM,OAAuC;AAAA,EAC3C,EAAE,IAAI,UAAU,OAAO,SAAS;AAAA,EAChC,EAAE,IAAI,cAAc,OAAO,uBAAuB;AAAA,EAClD,EAAE,IAAI,SAAS,OAAO,QAAQ;AAAA,EAC9B,EAAE,IAAI,WAAW,OAAO,UAAU;AACpC;AAMA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@manzanohq/theme-editor",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "Manzano Theme Editor — visual editor for Manzano CSS design tokens",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -17,7 +17,7 @@
17
17
  ],
18
18
  "peerDependencies": {
19
19
  "lit": "^3.0.0",
20
- "@manzanohq/components": "0.1.7"
20
+ "@manzanohq/components": "0.1.8"
21
21
  },
22
22
  "devDependencies": {
23
23
  "esbuild": "^0.25.0",
package/cdn/chunks/chunk.5X2KFTEK.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/theme-editor.component.ts", "../../../components/src/internal/manzano-element.ts"],
4
- "sourcesContent": ["import { html, css, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../components/src/internal/manzano-element.js';\n\n// ---------------------------------------------------------------------------\n// Default token values (Manzano light theme resolved values)\n// ---------------------------------------------------------------------------\nconst DEFAULT_TOKENS: Record<string, string> = {\n // Brand & Semantic\n '--mz-color-primary': '#4260a8',\n '--mz-color-action': '#4260a8',\n '--mz-color-on-action': '#ffffff',\n '--mz-color-focus': '#4260a8',\n '--mz-color-selected': '#4260a8',\n '--mz-color-on-selected': '#ffffff',\n '--mz-color-link': '#4260a8',\n\n // Surfaces\n '--mz-color-surface': '#ffffff',\n '--mz-color-surface-raised': '#faf9f7',\n '--mz-color-text': '#1c1915',\n '--mz-color-text-secondary': '#79726b',\n '--mz-color-border': '#d5d1cb',\n\n // Status\n '--mz-color-success': '#2d8556',\n '--mz-color-warning': '#d59724',\n '--mz-color-danger': '#c04b34',\n '--mz-color-neutral': '#433d37',\n\n // Typography & Spacing\n '--mz-font-sans': \"'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\",\n '--mz-space-scale': '1',\n '--mz-font-size-scale': '1',\n\n // Shape\n '--mz-radius-sm': '6px',\n '--mz-radius-md': '8px',\n '--mz-radius-lg': '12px',\n '--mz-border-width-sm': '1px',\n '--mz-input-bg': '#ffffff',\n '--mz-input-border-width': '1px',\n\n // Shadows\n '--mz-shadow-sm': '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n '--mz-shadow-md': '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n '--mz-shadow-lg': '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n};\n\n// ---------------------------------------------------------------------------\n// Shadow presets\n// ---------------------------------------------------------------------------\ntype ShadowPreset = 'none' | 'subtle' | 'medium' | 'dramatic';\n\nconst SHADOW_PRESETS: Record<ShadowPreset, { sm: string; md: string; lg: string }> = {\n none: {\n sm: 'none',\n md: 'none',\n lg: 'none',\n },\n subtle: {\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.04)',\n md: '0 2px 4px -1px rgb(0 0 0 / 0.06)',\n lg: '0 6px 12px -3px rgb(0 0 0 / 0.08)',\n },\n medium: {\n sm: '0 1px 3px 0 rgb(28 25 21 / 0.09), 0 1px 2px -1px rgb(28 25 21 / 0.07)',\n md: '0 4px 8px -2px rgb(28 25 21 / 0.1), 0 2px 4px -2px rgb(28 25 21 / 0.06)',\n lg: '0 12px 20px -4px rgb(28 25 21 / 0.12), 0 4px 8px -4px rgb(28 25 21 / 0.05)',\n },\n dramatic: {\n sm: '0 2px 6px 0 rgb(0 0 0 / 0.16), 0 1px 3px -1px rgb(0 0 0 / 0.12)',\n md: '0 8px 16px -4px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.14)',\n lg: '0 20px 40px -8px rgb(0 0 0 / 0.25), 0 8px 16px -6px rgb(0 0 0 / 0.15)',\n },\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\ntype TabId = 'colors' | 'typography' | 'shape' | 'shadows';\n\nconst TABS: { id: TabId; label: string }[] = [\n { id: 'colors', label: 'Colors' },\n { id: 'typography', label: 'Typography & Spacing' },\n { id: 'shape', label: 'Shape' },\n { id: 'shadows', label: 'Shadows' },\n];\n\n// ---------------------------------------------------------------------------\n// Styles \u2014 editor chrome uses CSS custom properties that respond to\n// prefers-color-scheme and [data-theme] for light/dark adaptivity.\n// ---------------------------------------------------------------------------\nconst editorStyles = css`\n :host {\n display: block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n\n /* Editor chrome \u2014 light mode defaults */\n --_editor-bg: #f6f6f7;\n --_editor-bg-raised: #ffffff;\n --_editor-text: #1a1a1a;\n --_editor-text-secondary: #666;\n --_editor-text-muted: #999;\n --_editor-border: #e0e0e0;\n --_editor-accent: #4260a8;\n --_editor-input-bg: #ffffff;\n --_editor-tab-bg: #eeeeef;\n\n color: var(--_editor-text);\n }\n\n /* Dark mode \u2014 activated via JS-set [dark] attribute on :host */\n :host([dark]) {\n --_editor-bg: #1a1a1d;\n --_editor-bg-raised: #252528;\n --_editor-text: #e4e4e7;\n --_editor-text-secondary: #a1a1a8;\n --_editor-text-muted: #71717a;\n --_editor-border: #333336;\n --_editor-accent: #818cf8;\n --_editor-input-bg: #252528;\n --_editor-tab-bg: #141416;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n /* ---- Full-width mode ---- */\n :host([full-width]) .editor {\n border: none;\n border-radius: 0;\n }\n\n :host([full-width]) .editor__controls {\n max-width: none;\n }\n\n /* ---- Layout ---- */\n .editor {\n display: flex;\n height: 100%;\n min-height: 540px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n overflow: hidden;\n background: var(--_editor-bg);\n }\n\n .editor__controls {\n width: 40%;\n min-width: 300px;\n max-width: 480px;\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--_editor-border);\n overflow: hidden;\n }\n\n .editor__preview {\n flex: 1;\n overflow: auto;\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Tabs ---- */\n .tabs {\n display: flex;\n background: var(--_editor-tab-bg);\n border-bottom: 1px solid var(--_editor-border);\n padding: 0;\n margin: 0;\n flex-shrink: 0;\n }\n\n .tabs__btn {\n flex: 1;\n padding: 8px 6px;\n border: none;\n background: transparent;\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n color: var(--_editor-text-secondary);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n transition: color 0.15s, border-color 0.15s;\n white-space: nowrap;\n }\n\n .tabs__btn:hover {\n color: var(--_editor-text);\n }\n\n .tabs__btn--active {\n color: var(--_editor-accent);\n border-bottom-color: var(--_editor-accent);\n background: var(--_editor-bg-raised);\n }\n\n /* ---- Controls panel ---- */\n .controls {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n }\n\n .section-label {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--_editor-text-muted);\n margin: 16px 0 8px;\n }\n\n .section-label:first-child {\n margin-top: 0;\n }\n\n .section-desc {\n font-size: 11px;\n color: var(--_editor-text-muted);\n margin: -4px 0 12px;\n line-height: 1.4;\n }\n\n /* ---- Field row ---- */\n .field {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .field__info {\n flex: 1;\n min-width: 0;\n }\n\n .field__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .field__control {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n /* ---- Color input ---- */\n input[type='color'] {\n -webkit-appearance: none;\n appearance: none;\n width: 32px;\n height: 28px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n padding: 1px;\n cursor: pointer;\n background: var(--_editor-input-bg);\n }\n\n input[type='color']::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n input[type='color']::-webkit-color-swatch {\n border: none;\n border-radius: 3px;\n }\n\n /* ---- Hex text input ---- */\n .hex-input {\n width: 76px;\n padding: 4px 6px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font-family: SFMono-Regular, Consolas, monospace;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .hex-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Text input ---- */\n .text-input {\n width: 100%;\n padding: 5px 8px;\n border: 1px solid var(--_editor-border);\n border-radius: 4px;\n font: inherit;\n font-size: 12px;\n color: var(--_editor-text);\n background: var(--_editor-input-bg);\n }\n\n .text-input:focus {\n outline: 2px solid var(--_editor-accent);\n outline-offset: -1px;\n border-color: var(--_editor-accent);\n }\n\n /* ---- Range slider ---- */\n .range-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n }\n\n .range-row__info {\n flex: 1;\n min-width: 0;\n }\n\n .range-row__label {\n font-size: 12px;\n color: var(--_editor-text-secondary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: block;\n }\n\n .range-row__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-top: 1px;\n }\n\n .range-row__slider {\n width: 120px;\n accent-color: var(--_editor-accent);\n }\n\n .range-row__value {\n font-size: 11px;\n font-family: SFMono-Regular, Consolas, monospace;\n color: var(--_editor-text-muted);\n width: 44px;\n text-align: right;\n flex-shrink: 0;\n }\n\n /* ---- Font text field (full-width) ---- */\n .font-field {\n margin-bottom: 10px;\n }\n\n .font-field__label {\n display: block;\n font-size: 12px;\n color: var(--_editor-text-secondary);\n margin-bottom: 2px;\n }\n\n .font-field__desc {\n display: block;\n font-size: 10px;\n color: var(--_editor-text-muted);\n line-height: 1.3;\n margin-bottom: 4px;\n }\n\n /* ---- Shadow radio presets ---- */\n .shadow-presets {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 8px;\n margin-top: 8px;\n }\n\n .shadow-preset {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n border: 1px solid var(--_editor-border);\n border-radius: 6px;\n cursor: pointer;\n transition: border-color 0.15s, background 0.15s;\n background: var(--_editor-bg-raised);\n }\n\n .shadow-preset:hover {\n border-color: var(--_editor-text-muted);\n }\n\n .shadow-preset--selected {\n border-color: var(--_editor-accent);\n background: color-mix(in srgb, var(--_editor-accent) 8%, var(--_editor-bg-raised));\n }\n\n .shadow-preset__radio {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid var(--_editor-border);\n position: relative;\n flex-shrink: 0;\n }\n\n .shadow-preset--selected .shadow-preset__radio {\n border-color: var(--_editor-accent);\n }\n\n .shadow-preset--selected .shadow-preset__radio::after {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--_editor-accent);\n }\n\n .shadow-preset__label {\n font-size: 13px;\n font-weight: 500;\n color: var(--_editor-text);\n }\n\n .shadow-preset__demo {\n width: 28px;\n height: 20px;\n background: var(--_editor-bg-raised);\n border-radius: 3px;\n margin-left: auto;\n flex-shrink: 0;\n }\n\n /* ---- Preview area ---- */\n .preview {\n padding: 24px;\n min-height: 100%;\n background: var(--mz-color-surface-raised, #faf9f7);\n }\n\n .preview-section {\n margin-bottom: 24px;\n }\n\n .preview-section__title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--mz-color-text-secondary, #79726b);\n margin: 0 0 12px;\n font-family: var(--mz-font-sans, inherit);\n }\n\n .preview-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 10px;\n }\n\n .preview-cards {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n }\n\n .preview-link {\n color: var(--mz-color-link, #4260a8);\n text-decoration: underline;\n font-family: var(--mz-font-sans, inherit);\n font-size: var(--mz-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n\n .preview-link:hover {\n opacity: 0.8;\n }\n\n .preview-card-wrapper {\n margin-top: 16px;\n }\n`;\n\n/**\n * @summary A visual editor for Manzano CSS design tokens. Organizes tokens into\n * tabbed categories (Colors, Typography & Spacing, Shape, Shadows) with a live\n * preview panel showing Manzano components updated in real time.\n *\n * @tag mz-theme-editor\n *\n * @event mz-theme-change - Emitted when any token value changes.\n * Detail: `{ css: string, tokens: Record<string, string> }`\n */\nexport class MzThemeEditor extends ManzanoElement {\n static styles = editorStyles;\n\n // ---------- Public API ----------\n\n /** Name of the theme, used in the generated CSS selector. */\n @property({ attribute: 'theme-name' }) themeName = 'custom-theme';\n\n /** When true, the editor fills its container edge-to-edge (no border/radius). */\n @property({ type: Boolean, reflect: true, attribute: 'full-width' }) fullWidth = false;\n\n /**\n * Initial token values as a JSON string. When set, merges into the current\n * token map (values not present fall back to defaults).\n */\n @property({ attribute: 'value' })\n get value(): string {\n return JSON.stringify(this.tokens);\n }\n set value(val: string) {\n if (!val) return;\n try {\n const parsed = JSON.parse(val);\n if (typeof parsed === 'object' && parsed !== null) {\n this.tokens = { ...DEFAULT_TOKENS, ...parsed };\n }\n } catch {\n // ignore invalid JSON\n }\n }\n\n // ---------- Internal state ----------\n\n @state() private activeTab: TabId = 'colors';\n @state() tokens: Record<string, string> = { ...DEFAULT_TOKENS };\n @state() private shadowPreset: ShadowPreset = 'medium';\n\n private _darkQuery?: MediaQueryList;\n private _darkObserver?: MutationObserver;\n\n // ---------- Lifecycle ----------\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.shadowPreset = this.detectShadowPreset();\n this._syncDarkMode();\n\n // Watch system preference changes\n this._darkQuery = window.matchMedia('(prefers-color-scheme: dark)');\n this._darkQuery.addEventListener('change', this._syncDarkMode);\n\n // Watch ancestor data-theme attribute changes\n this._darkObserver = new MutationObserver(this._syncDarkMode);\n this._darkObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme']\n });\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._darkQuery?.removeEventListener('change', this._syncDarkMode);\n this._darkObserver?.disconnect();\n }\n\n private _syncDarkMode = (): void => {\n const htmlTheme = document.documentElement.getAttribute('data-theme');\n const isDark =\n htmlTheme === 'dark' ||\n (!htmlTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);\n\n if (isDark) {\n this.setAttribute('dark', '');\n } else {\n this.removeAttribute('dark');\n }\n };\n\n // ---------- Public methods ----------\n\n /** Returns the current token map. */\n getTokens(): Record<string, string> {\n return { ...this.tokens };\n }\n\n /** Generates a full theme CSS file string. Only includes tokens that differ from defaults. */\n getCSS(): string {\n const selector = `[data-theme-custom=\"${this.themeName}\"]`;\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n if (val !== DEFAULT_TOKENS[key]) {\n lines.push(` ${key}: ${val};`);\n }\n }\n if (lines.length === 0) {\n return `${selector} {\\n /* No overrides \u2014 using Manzano defaults */\\n}`;\n }\n return `${selector} {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Token mutation ----------\n\n private setToken(name: string, value: string): void {\n this.tokens = { ...this.tokens, [name]: value };\n this.emitChange();\n }\n\n private emitChange(): void {\n this.emit('mz-theme-change', {\n detail: { css: this.getCSS(), tokens: this.getTokens() },\n });\n }\n\n // ---------- Shadow preset helpers ----------\n\n private detectShadowPreset(): ShadowPreset {\n const sm = this.tokens['--mz-shadow-sm'];\n for (const [preset, vals] of Object.entries(SHADOW_PRESETS)) {\n if (vals.sm === sm) return preset as ShadowPreset;\n }\n return 'medium';\n }\n\n private applyShadowPreset(preset: ShadowPreset): void {\n const vals = SHADOW_PRESETS[preset];\n this.shadowPreset = preset;\n this.tokens = {\n ...this.tokens,\n '--mz-shadow-sm': vals.sm,\n '--mz-shadow-md': vals.md,\n '--mz-shadow-lg': vals.lg,\n };\n this.emitChange();\n }\n\n // ---------- Render helpers: controls ----------\n\n private renderColorField(token: string, label: string, showHex: boolean, desc: string = '') {\n const val = this.tokens[token] || '#000000';\n return html`\n <div class=\"field\">\n <div class=\"field__info\">\n <span class=\"field__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"field__desc\">${desc}</span>` : nothing}\n </div>\n <div class=\"field__control\">\n <input\n type=\"color\"\n .value=${val}\n @input=${(e: Event) => this.setToken(token, (e.target as HTMLInputElement).value)}\n />\n ${showHex\n ? html`<input\n class=\"hex-input\"\n type=\"text\"\n .value=${val}\n @change=${(e: Event) => {\n let v = (e.target as HTMLInputElement).value.trim();\n if (v && !v.startsWith('#')) v = '#' + v;\n if (/^#[0-9a-fA-F]{3,8}$/.test(v)) {\n this.setToken(token, v);\n }\n }}\n />`\n : nothing}\n </div>\n </div>\n `;\n }\n\n private renderRangeField(\n token: string,\n label: string,\n min: number,\n max: number,\n step: number,\n unit: string = '',\n desc: string = ''\n ) {\n const raw = parseFloat(this.tokens[token]) || 0;\n return html`\n <div class=\"range-row\">\n <div class=\"range-row__info\">\n <span class=\"range-row__label\" title=\"${token}\">${label}</span>\n ${desc ? html`<span class=\"range-row__desc\">${desc}</span>` : nothing}\n </div>\n <input\n class=\"range-row__slider\"\n type=\"range\"\n .min=${String(min)}\n .max=${String(max)}\n .step=${String(step)}\n .value=${String(raw)}\n @input=${(e: Event) => {\n const v = (e.target as HTMLInputElement).value;\n this.setToken(token, unit ? `${v}${unit}` : v);\n }}\n />\n <span class=\"range-row__value\">${raw}${unit}</span>\n </div>\n `;\n }\n\n // ---------- Tab panels ----------\n\n private renderColorsTab() {\n return html`\n <div class=\"section-label\">Brand &amp; Semantic</div>\n ${this.renderColorField('--mz-color-primary', 'Primary', true, 'Base brand color. Fallback for action, focus, selected, link.')}\n ${this.renderColorField('--mz-color-action', 'Action', true, 'Button fills, CTAs, progress indicators.')}\n ${this.renderColorField('--mz-color-on-action', 'On Action', false, 'Text/icon color on action backgrounds.')}\n ${this.renderColorField('--mz-color-focus', 'Focus', true, 'Focus rings and input focus borders.')}\n ${this.renderColorField('--mz-color-selected', 'Selected', true, 'Checked checkboxes, switches, selected chips and cards.')}\n ${this.renderColorField('--mz-color-on-selected', 'On Selected', false, 'Text/icon color on selected backgrounds.')}\n ${this.renderColorField('--mz-color-link', 'Link', true, 'Text link color.')}\n\n <div class=\"section-label\">Surfaces</div>\n ${this.renderColorField('--mz-color-surface', 'Surface', false, 'Page and card backgrounds.')}\n ${this.renderColorField('--mz-color-surface-raised', 'Surface Raised', false, 'Elevated card and panel backgrounds.')}\n ${this.renderColorField('--mz-color-text', 'Text', false, 'Primary body text color.')}\n ${this.renderColorField('--mz-color-text-secondary', 'Text Secondary', false, 'Muted text, descriptions, placeholders.')}\n ${this.renderColorField('--mz-color-border', 'Border', false, 'Dividers, card borders, input outlines.')}\n\n <div class=\"section-label\">Status</div>\n ${this.renderColorField('--mz-color-success', 'Success', false, 'Success states, confirmations.')}\n ${this.renderColorField('--mz-color-warning', 'Warning', false, 'Warning states, caution indicators.')}\n ${this.renderColorField('--mz-color-danger', 'Danger', false, 'Error states, destructive actions.')}\n ${this.renderColorField('--mz-color-neutral', 'Neutral', false, 'Neutral badge and button variant.')}\n `;\n }\n\n private renderTypographyTab() {\n return html`\n <div class=\"font-field\">\n <label class=\"font-field__label\" title=\"--mz-font-sans\">Font Family</label>\n <span class=\"font-field__desc\">Font stack for all text. Use quotes for multi-word names.</span>\n <input\n class=\"text-input\"\n type=\"text\"\n .value=${this.tokens['--mz-font-sans']}\n @change=${(e: Event) => this.setToken('--mz-font-sans', (e.target as HTMLInputElement).value)}\n />\n </div>\n\n ${this.renderRangeField('--mz-space-scale', 'Space Scale', 0.7, 1.4, 0.01, '', 'Global spacing multiplier. 0.8 = compact, 1.2 = spacious.')}\n ${this.renderRangeField('--mz-font-size-scale', 'Font Size Scale', 0.8, 1.2, 0.01, '', 'Global font size multiplier.')}\n `;\n }\n\n private renderShapeTab() {\n return html`\n ${this.renderRangeField('--mz-radius-sm', 'Radius SM', 0, 24, 1, 'px', 'Small elements: badges, chips, checkboxes.')}\n ${this.renderRangeField('--mz-radius-md', 'Radius MD', 0, 24, 1, 'px', 'Medium elements: buttons, inputs, selects.')}\n ${this.renderRangeField('--mz-radius-lg', 'Radius LG', 0, 32, 1, 'px', 'Large elements: cards, dialogs, panels.')}\n ${this.renderRangeField('--mz-border-width-sm', 'Border Width', 0, 4, 0.5, 'px', 'Default border thickness for panels and dividers.')}\n ${this.renderColorField('--mz-input-bg', 'Input Background', false, 'Background fill for inputs. Use semi-transparent for dark themes.')}\n ${this.renderRangeField('--mz-input-border-width', 'Input Border Width', 0, 4, 0.5, 'px', 'Border thickness for form inputs.')}\n `;\n }\n\n private renderShadowsTab() {\n const presets: { id: ShadowPreset; label: string; shadow: string }[] = [\n { id: 'none', label: 'None', shadow: 'none' },\n { id: 'subtle', label: 'Subtle', shadow: SHADOW_PRESETS.subtle.md },\n { id: 'medium', label: 'Medium', shadow: SHADOW_PRESETS.medium.md },\n { id: 'dramatic', label: 'Dramatic', shadow: SHADOW_PRESETS.dramatic.md },\n ];\n\n return html`\n <div class=\"section-label\">Shadow Intensity</div>\n <p class=\"section-desc\">Controls the depth/elevation of cards, dropdowns, and dialogs.</p>\n <div class=\"shadow-presets\">\n ${presets.map(\n p => html`\n <div\n class=\"shadow-preset ${this.shadowPreset === p.id ? 'shadow-preset--selected' : ''}\"\n @click=${() => this.applyShadowPreset(p.id)}\n >\n <div class=\"shadow-preset__radio\"></div>\n <span class=\"shadow-preset__label\">${p.label}</span>\n <div class=\"shadow-preset__demo\" style=\"box-shadow: ${p.shadow}\"></div>\n </div>\n `\n )}\n </div>\n `;\n }\n\n // ---------- Build the theme <style> text for the preview area ----------\n\n private get themeStyleText(): string {\n const lines: string[] = [];\n for (const [key, val] of Object.entries(this.tokens)) {\n lines.push(` ${key}: ${val};`);\n }\n return `.preview-themed {\\n${lines.join('\\n')}\\n}`;\n }\n\n // ---------- Preview panel ----------\n\n private renderPreview() {\n // We apply tokens via an inline <style> on a wrapper div\n return html`\n <style>${this.themeStyleText}</style>\n <div class=\"preview preview-themed\">\n <!-- Buttons -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Buttons</p>\n <div class=\"preview-row\">\n <mz-button variant=\"primary\">Primary</mz-button>\n <mz-button variant=\"primary\" appearance=\"outline\">Outline</mz-button>\n <mz-button variant=\"primary\" appearance=\"ghost\">Ghost</mz-button>\n </div>\n </div>\n\n <!-- Input -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Input</p>\n <mz-input placeholder=\"Focus me...\" style=\"max-width: 280px;\"></mz-input>\n </div>\n\n <!-- Checkbox & Switch -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Checkbox &amp; Switch</p>\n <div class=\"preview-row\">\n <mz-checkbox checked>Checked</mz-checkbox>\n <mz-switch checked>Active</mz-switch>\n </div>\n </div>\n\n <!-- Chips -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Chips</p>\n <div class=\"preview-row\">\n <mz-chip-group>\n <mz-chip value=\"a\" selected>Option A</mz-chip>\n <mz-chip value=\"b\">Option B</mz-chip>\n <mz-chip value=\"c\">Option C</mz-chip>\n </mz-chip-group>\n </div>\n </div>\n\n <!-- Selectable Cards -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Selectable Cards</p>\n <div class=\"preview-cards\">\n <mz-selectable-card selected>Card 1</mz-selectable-card>\n <mz-selectable-card>Card 2</mz-selectable-card>\n <mz-selectable-card>Card 3</mz-selectable-card>\n </div>\n </div>\n\n <!-- Badges -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Badges</p>\n <div class=\"preview-row\">\n <mz-badge variant=\"primary\">Primary</mz-badge>\n <mz-badge variant=\"success\">Success</mz-badge>\n <mz-badge variant=\"warning\">Warning</mz-badge>\n <mz-badge variant=\"danger\">Danger</mz-badge>\n </div>\n </div>\n\n <!-- Progress -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Progress</p>\n <mz-progress value=\"65\" style=\"max-width: 300px;\"></mz-progress>\n </div>\n\n <!-- Link -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Link</p>\n <a class=\"preview-link\" href=\"javascript:void(0)\">This is a themed link</a>\n </div>\n\n <!-- Shadows & Card -->\n <div class=\"preview-section\">\n <p class=\"preview-section__title\">Shadows &amp; Card</p>\n <div style=\"display: flex; gap: 16px; align-items: start;\">\n <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>\n <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>\n <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>\n </div>\n <div style=\"display: flex; gap: 16px; margin-top: 4px; font-size: 10px; color: var(--mz-color-text-secondary, #999);\">\n <span style=\"width: 80px; text-align: center;\">sm</span>\n <span style=\"width: 80px; text-align: center;\">md</span>\n <span style=\"width: 80px; text-align: center;\">lg</span>\n </div>\n </div>\n\n <!-- Card container -->\n <div class=\"preview-section preview-card-wrapper\">\n <p class=\"preview-section__title\">Card</p>\n <mz-card style=\"max-width: 300px;\">\n <div slot=\"header\" style=\"padding: 12px 16px 0; font-weight: 600; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text, #333);\">\n Example Card\n </div>\n <div style=\"padding: 0 16px 12px; font-family: var(--mz-font-sans, inherit); color: var(--mz-color-text-secondary, #666); font-size: 14px;\">\n This card shows surface color, border radius, border width, and shadow in context.\n </div>\n </mz-card>\n </div>\n </div>\n `;\n }\n\n // ---------- Main render ----------\n\n override render() {\n let tabContent;\n switch (this.activeTab) {\n case 'colors':\n tabContent = this.renderColorsTab();\n break;\n case 'typography':\n tabContent = this.renderTypographyTab();\n break;\n case 'shape':\n tabContent = this.renderShapeTab();\n break;\n case 'shadows':\n tabContent = this.renderShadowsTab();\n break;\n }\n\n return html`\n <div class=\"editor\">\n <!-- Left: controls -->\n <div class=\"editor__controls\">\n <div class=\"tabs\" role=\"tablist\">\n ${TABS.map(\n tab => html`\n <button\n class=\"tabs__btn ${this.activeTab === tab.id ? 'tabs__btn--active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === tab.id}\n @click=${() => (this.activeTab = tab.id)}\n >\n ${tab.label}\n </button>\n `\n )}\n </div>\n <div class=\"controls\" role=\"tabpanel\">${tabContent}</div>\n </div>\n\n <!-- Right: live preview -->\n <div class=\"editor__preview\">${this.renderPreview()}</div>\n </div>\n `;\n }\n}\n", "import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n// Replaced at build time by esbuild\nconst MANZANO_VERSION = '__MANZANO_VERSION__';\n\n// Track registered versions to detect conflicts\nconst registeredElements = new Map<string, typeof ManzanoElement>();\n\n// Singleton reduced-motion listener\nlet reducedMotionQuery: MediaQueryList | undefined;\nlet reducedMotionValue = false;\n\nfunction getReducedMotionQuery(): MediaQueryList {\n if (!reducedMotionQuery) {\n reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n reducedMotionValue = reducedMotionQuery.matches;\n reducedMotionQuery.addEventListener('change', e => {\n reducedMotionValue = e.matches;\n });\n }\n return reducedMotionQuery;\n}\n\nexport class ManzanoElement extends LitElement {\n static version = MANZANO_VERSION;\n\n /**\n * Sub-component dependencies. Declared statically and auto-registered in the constructor.\n * Example: static dependencies = { 'mz-icon': MzIcon }\n */\n static dependencies: Record<string, typeof ManzanoElement> = {};\n\n /** Direction for RTL support, inherited from closest ancestor with dir attribute */\n @property({ reflect: true }) dir = '';\n\n /** Language for i18n, inherited from closest ancestor with lang attribute */\n @property() lang = '';\n\n constructor() {\n super();\n\n // Auto-register sub-component dependencies\n const ctor = this.constructor as typeof ManzanoElement;\n for (const [name, dep] of Object.entries(ctor.dependencies)) {\n dep.define(name, dep);\n }\n\n // Initialize reduced motion listener (once)\n if (typeof window !== 'undefined') {\n getReducedMotionQuery();\n }\n }\n\n /** Whether the user prefers reduced motion */\n get prefersReducedMotion(): boolean {\n if (typeof window === 'undefined') return false;\n getReducedMotionQuery();\n return reducedMotionValue;\n }\n\n /**\n * Register this component as a custom element, with version conflict detection.\n */\n static define(name: string, ctor: typeof ManzanoElement = this) {\n const existing = customElements.get(name);\n if (existing) {\n const existingVersion = (existing as typeof ManzanoElement).version;\n if (existingVersion !== ctor.version) {\n console.warn(\n `Manzano: \"${name}\" was already registered with version ${existingVersion}. ` +\n `Attempted to re-register with version ${ctor.version}. ` +\n `This may cause issues.`\n );\n }\n return;\n }\n\n registeredElements.set(name, ctor);\n customElements.define(name, ctor);\n }\n\n /**\n * Emit a custom event with sensible defaults for web components.\n * Returns true if the event was NOT cancelled.\n */\n emit<T>(name: string, options?: CustomEventInit<T>): boolean {\n const event = new CustomEvent(name, {\n bubbles: true,\n cancelable: false,\n composed: true,\n detail: {},\n ...options\n });\n this.dispatchEvent(event);\n return !event.defaultPrevented;\n }\n\n /**\n * Override updateComplete to wait for undefined shadow children to upgrade.\n * Prevents test race conditions when sub-components haven't been defined yet.\n */\n override get updateComplete(): Promise<boolean> {\n return super.updateComplete.then(async result => {\n if (!this.shadowRoot) return result;\n\n const undefinedElements = this.shadowRoot.querySelectorAll(':not(:defined)');\n if (undefinedElements.length > 0) {\n const upgrades = [...undefinedElements].map(el => customElements.whenDefined(el.localName));\n await Promise.all(upgrades);\n }\n\n return result;\n });\n }\n}\n"],
5
- "mappings": "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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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",
6
- "names": ["html", "css", "nothing", "property", "state", "LitElement", "property", "MANZANO_VERSION", "registeredElements", "reducedMotionQuery", "reducedMotionValue", "getReducedMotionQuery", "e", "ManzanoElement", "LitElement", "ctor", "name", "dep", "existing", "existingVersion", "options", "event", "result", "undefinedElements", "upgrades", "el", "__decorateClass", "property", "DEFAULT_TOKENS", "SHADOW_PRESETS", "TABS", "editorStyles", "css", "MzThemeEditor", "ManzanoElement", "htmlTheme", "val", "parsed", "selector", "lines", "key", "name", "value", "sm", "preset", "vals", "token", "label", "showHex", "desc", "html", "nothing", "e", "v", "min", "max", "step", "unit", "raw", "presets", "p", "tabContent", "tab", "__decorateClass", "property", "state"]
7
- }
package/cdn/chunks/chunk.YADVC6ZY.js DELETED
@@ -1,2 +0,0 @@
1
- import{a as e}from"./chunk.5X2KFTEK.js";e.define("mz-theme-editor");
2
- //# sourceMappingURL=chunk.YADVC6ZY.js.map