shopify-theme-devtools 1.0.0

package/dist/theme-devtools.js

@@ -0,0 +1,1836 @@
+var __defProp=Object.defineProperty,__defNormalProp=(t,e,s)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,__publicField=(t,e,s)=>__defNormalProp(t,"symbol"!=typeof e?e+"":e,s);!function(){"use strict";var t;const e=globalThis,s=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),a=new WeakMap;let o=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(s&&void 0===t){const s=void 0!==e&&1===e.length;s&&(t=a.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&a.set(e,t))}return t}toString(){return this.cssText}};const n=(t,...e)=>{const s=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new o(s,t,i)},r=s?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,i))(e)})(t):t,{is:l,defineProperty:d,getOwnPropertyDescriptor:c,getOwnPropertyNames:p,getOwnPropertySymbols:h,getPrototypeOf:u}=Object,v=globalThis,g=v.trustedTypes,b=g?g.emptyScript:"",m=v.reactiveElementPolyfillSupport,f=(t,e)=>t,x={toAttribute(t,e){switch(e){case Boolean:t=t?b:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(i){s=null}}return s}},y=(t,e)=>!l(t,e),_={attribute:!0,type:String,converter:x,reflect:!1,useDefault:!1,hasChanged:y};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),v.litPropertyMetadata??(v.litPropertyMetadata=new WeakMap);let $=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=_){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&d(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:a}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const o=null==i?void 0:i.call(this);null==a||a.call(this,e),this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??_}static _$Ei(){if(this.hasOwnProperty(f("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(f("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(f("properties"))){const t=this.properties,e=[...p(t),...h(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[e,s]of this.elementProperties){const t=this._$Eu(e,s);void 0!==t&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),null==(t=this.constructor.l)||t.forEach(t=>t(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),void 0!==this.renderRoot&&this.isConnected&&(null==(e=t.hostConnected)||e.call(t))}removeController(t){var e;null==(e=this._$EO)||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(s)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const s of i){const i=document.createElement("style"),a=e.litNonce;void 0!==a&&i.setAttribute("nonce",a),i.textContent=s.cssText,t.appendChild(i)}})(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null==(t=this._$EO)||t.forEach(t=>{var e;return null==(e=t.hostConnected)?void 0:e.call(t)})}enableUpdating(t){}disconnectedCallback(){var t;null==(t=this._$EO)||t.forEach(t=>{var e;return null==(e=t.hostDisconnected)?void 0:e.call(t)})}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){var s;const i=this.constructor.elementProperties.get(t),a=this.constructor._$Eu(t,i);if(void 0!==a&&!0===i.reflect){const o=(void 0!==(null==(s=i.converter)?void 0:s.toAttribute)?i.converter:x).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(a):this.setAttribute(a,o),this._$Em=null}}_$AK(t,e){var s,i;const a=this.constructor,o=a._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=a.getPropertyOptions(o),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null==(s=t.converter)?void 0:s.fromAttribute)?t.converter:x;this._$Em=o;const r=n.fromAttribute(e,t.type);this[o]=r??(null==(i=this._$Ej)?void 0:i.get(o))??r,this._$Em=null}}requestUpdate(t,e,s,i=!1,a){var o;if(void 0!==t){const n=this.constructor;if(!1===i&&(a=this[t]),s??(s=n.getPropertyOptions(t)),!((s.hasChanged??y)(a,e)||s.useDefault&&s.reflect&&a===(null==(o=this._$Ej)?void 0:o.get(t))&&!this.hasAttribute(n._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:a},o){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==a||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let e=!1;const s=this._$AL;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null==(t=this._$EO)||t.forEach(t=>{var e;return null==(e=t.hostUpdate)?void 0:e.call(t)}),this.update(s)):this._$EM()}catch(i){throw e=!1,this._$EM(),i}e&&this._$AE(s)}willUpdate(t){}_$AE(t){var e;null==(e=this._$EO)||e.forEach(t=>{var e;return null==(e=t.hostUpdated)?void 0:e.call(t)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach(t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[f("elementProperties")]=new Map,$[f("finalized")]=new Map,null==m||m({ReactiveElement:$}),(v.reactiveElementVersions??(v.reactiveElementVersions=[])).push("2.1.2");const w=globalThis,k=t=>t,S=w.trustedTypes,j=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,E="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+A,O=`<${C}>`,P=document,T=()=>P.createComment(""),z=t=>null===t||"object"!=typeof t&&"function"!=typeof t,M=Array.isArray,N="[ \t\n\f\r]",R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,U=/>/g,q=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),H=/'/g,D=/"/g,V=/^(?:script|style|textarea|title)$/i,I=(K=1,(t,...e)=>({_$litType$:K,strings:t,values:e})),F=Symbol.for("lit-noChange"),Q=Symbol.for("lit-nothing"),B=new WeakMap,J=P.createTreeWalker(P,129);var K;function W(t,e){if(!M(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==j?j.createHTML(e):e}class G{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let a=0,o=0;const n=t.length-1,r=this.parts,[l,d]=((t,e)=>{const s=t.length-1,i=[];let a,o=2===e?"<svg>":3===e?"<math>":"",n=R;for(let r=0;r<s;r++){const e=t[r];let s,l,d=-1,c=0;for(;c<e.length&&(n.lastIndex=c,l=n.exec(e),null!==l);)c=n.lastIndex,n===R?"!--"===l[1]?n=L:void 0!==l[1]?n=U:void 0!==l[2]?(V.test(l[2])&&(a=RegExp("</"+l[2],"g")),n=q):void 0!==l[3]&&(n=q):n===q?">"===l[0]?(n=a??R,d=-1):void 0===l[1]?d=-2:(d=n.lastIndex-l[2].length,s=l[1],n=void 0===l[3]?q:'"'===l[3]?D:H):n===D||n===H?n=q:n===L||n===U?n=R:(n=q,a=void 0);const p=n===q&&t[r+1].startsWith("/>")?" ":"";o+=n===R?e+O:d>=0?(i.push(s),e.slice(0,d)+E+e.slice(d)+A+p):e+A+(-2===d?r:p)}return[W(t,o+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=G.createElement(l,s),J.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=J.nextNode())&&r.length<n;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(E)){const e=d[o++],s=i.getAttribute(t).split(A),n=/([.?@])?(.*)/.exec(e);r.push({type:1,index:a,name:n[2],strings:s,ctor:"."===n[1]?et:"?"===n[1]?st:"@"===n[1]?it:tt}),i.removeAttribute(t)}else t.startsWith(A)&&(r.push({type:6,index:a}),i.removeAttribute(t));if(V.test(i.tagName)){const t=i.textContent.split(A),e=t.length-1;if(e>0){i.textContent=S?S.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],T()),J.nextNode(),r.push({type:2,index:++a});i.append(t[e],T())}}}else if(8===i.nodeType)if(i.data===C)r.push({type:2,index:a});else{let t=-1;for(;-1!==(t=i.data.indexOf(A,t+1));)r.push({type:7,index:a}),t+=A.length-1}a++}}static createElement(t,e){const s=P.createElement("template");return s.innerHTML=t,s}}function X(t,e,s=t,i){var a,o;if(e===F)return e;let n=void 0!==i?null==(a=s._$Co)?void 0:a[i]:s._$Cl;const r=z(e)?void 0:e._$litDirective$;return(null==n?void 0:n.constructor)!==r&&(null==(o=null==n?void 0:n._$AO)||o.call(n,!1),void 0===r?n=void 0:(n=new r(t),n._$AT(t,s,i)),void 0!==i?(s._$Co??(s._$Co=[]))[i]=n:s._$Cl=n),void 0!==n&&(e=X(t,n._$AS(t,e.values),n,i)),e}class Y{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=((null==t?void 0:t.creationScope)??P).importNode(e,!0);J.currentNode=i;let a=J.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let e;2===r.type?e=new Z(a,a.nextSibling,this,t):1===r.type?e=new r.ctor(a,r.name,r.strings,this,t):6===r.type&&(e=new at(a,this,t)),this._$AV.push(e),r=s[++n]}o!==(null==r?void 0:r.index)&&(a=J.nextNode(),o++)}return J.currentNode=P,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class Z{get _$AU(){var t;return(null==(t=this._$AM)?void 0:t._$AU)??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=Q,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=(null==i?void 0:i.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=X(this,t,e),z(t)?t===Q||null==t||""===t?(this._$AH!==Q&&this._$AR(),this._$AH=Q):t!==this._$AH&&t!==F&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>M(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==Q&&z(this._$AH)?this._$AA.nextSibling.data=t:this.T(P.createTextNode(t)),this._$AH=t}$(t){var e;const{values:s,_$litType$:i}=t,a="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=G.createElement(W(i.h,i.h[0]),this.options)),i);if((null==(e=this._$AH)?void 0:e._$AD)===a)this._$AH.p(s);else{const t=new Y(a,this),e=t.u(this.options);t.p(s),this.T(e),this._$AH=t}}_$AC(t){let e=B.get(t.strings);return void 0===e&&B.set(t.strings,e=new G(t)),e}k(t){M(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const a of t)i===e.length?e.push(s=new Z(this.O(T()),this.O(T()),this,this.options)):s=e[i],s._$AI(a),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var s;for(null==(s=this._$AP)||s.call(this,!1,!0,e);t!==this._$AB;){const e=k(t).nextSibling;k(t).remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cv=t,null==(e=this._$AP)||e.call(this,t))}}class tt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,a){this.type=1,this._$AH=Q,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=a,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=Q}_$AI(t,e=this,s,i){const a=this.strings;let o=!1;if(void 0===a)t=X(this,t,e,0),o=!z(t)||t!==this._$AH&&t!==F,o&&(this._$AH=t);else{const i=t;let n,r;for(t=a[0],n=0;n<a.length-1;n++)r=X(this,i[s+n],e,n),r===F&&(r=this._$AH[n]),o||(o=!z(r)||r!==this._$AH[n]),r===Q?t=Q:t!==Q&&(t+=(r??"")+a[n+1]),this._$AH[n]=r}o&&!i&&this.j(t)}j(t){t===Q?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===Q?void 0:t}}class st extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==Q)}}class it extends tt{constructor(t,e,s,i,a){super(t,e,s,i,a),this.type=5}_$AI(t,e=this){if((t=X(this,t,e,0)??Q)===F)return;const s=this._$AH,i=t===Q&&s!==Q||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,a=t!==Q&&(s===Q||i);i&&this.element.removeEventListener(this.name,this,s),a&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;"function"==typeof this._$AH?this._$AH.call((null==(e=this.options)?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class at{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){X(this,t)}}const ot=w.litHtmlPolyfillSupport;null==ot||ot(G,Z),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.3.2");const nt=globalThis;class rt extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,s)=>{const i=(null==s?void 0:s.renderBefore)??e;let a=i._$litPart$;if(void 0===a){const t=(null==s?void 0:s.renderBefore)??null;i._$litPart$=a=new Z(e.insertBefore(T(),t),t,void 0,s??{})}return a._$AI(t),a})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null==(t=this._$Do)||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null==(t=this._$Do)||t.setConnected(!1)}render(){return F}}rt._$litElement$=!0,rt.finalized=!0,null==(t=nt.litElementHydrateSupport)||t.call(nt,{LitElement:rt});const lt=nt.litElementPolyfillSupport;null==lt||lt({LitElement:rt}),(nt.litElementVersions??(nt.litElementVersions=[])).push("4.2.2");const dt=n`
+  :host {
+    --tdt-bg: #1a1a1a;
+    --tdt-bg-secondary: #242424;
+    --tdt-bg-hover: #2a2a2a;
+    --tdt-border: #333;
+    --tdt-text: #e0e0e0;
+    --tdt-text-muted: #888;
+    --tdt-accent: #3b82f6;
+    --tdt-accent-hover: #2563eb;
+    --tdt-success: #22c55e;
+    --tdt-warning: #eab308;
+    --tdt-danger: #ef4444;
+    --tdt-string: #a5d6ff;
+    --tdt-number: #79c0ff;
+    --tdt-boolean: #ff7b72;
+    --tdt-null: #888;
+    --tdt-key: #c792ea;
+    --tdt-font: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+    --tdt-font-size: 12px;
+    --tdt-radius: 4px;
+
+    all: initial;
+    font-family: var(--tdt-font);
+    font-size: var(--tdt-font-size);
+    line-height: 1.5;
+    color: var(--tdt-text);
+    display: block;
+  }
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background: var(--tdt-bg-secondary);
+    border: 1px solid var(--tdt-border);
+    border-radius: var(--tdt-radius);
+    padding: 6px 12px;
+    color: var(--tdt-text);
+    font-family: var(--tdt-font);
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .btn:hover:not(:disabled) {
+    background: var(--tdt-bg-hover);
+    border-color: var(--tdt-accent);
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn--sm {
+    padding: 4px 8px;
+    font-size: 10px;
+  }
+
+  .btn--danger {
+    border-color: var(--tdt-danger);
+    color: var(--tdt-danger);
+  }
+
+  .btn--danger:hover:not(:disabled) {
+    background: rgba(239, 68, 68, 0.1);
+  }
+
+  .badge {
+    font-size: 10px;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .badge--development {
+    background: rgba(34, 197, 94, 0.2);
+    color: var(--tdt-success);
+  }
+
+  .badge--unpublished {
+    background: rgba(234, 179, 8, 0.2);
+    color: var(--tdt-warning);
+  }
+
+  .badge--design {
+    background: rgba(59, 130, 246, 0.2);
+    color: var(--tdt-accent);
+  }
+
+  .empty-state {
+    color: var(--tdt-text-muted);
+    text-align: center;
+    padding: 24px;
+    font-style: italic;
+  }
+
+  input, select, textarea {
+    font-family: var(--tdt-font);
+    font-size: var(--tdt-font-size);
+  }
+
+  input[type="text"],
+  input[type="number"],
+  input[type="search"] {
+    background: var(--tdt-bg-secondary);
+    border: 1px solid var(--tdt-border);
+    border-radius: var(--tdt-radius);
+    padding: 6px 10px;
+    color: var(--tdt-text);
+  }
+
+  input:focus {
+    outline: none;
+    border-color: var(--tdt-accent);
+  }
+`;const ct=new class{constructor(){this.context=null}parse(){const t=document.getElementById("__THEME_DEVTOOLS_CONTEXT__");if(!t)return console.warn("[Theme Devtools] Context element not found"),null;try{return this.context=JSON.parse(t.textContent),this.context}catch(e){return console.error("[Theme Devtools] Failed to parse context:",e),null}}get(t){if(this.context)return t.split(".").reduce((t,e)=>null==t?void 0:t[e],this.context)}getMeta(){var t;return(null==(t=this.context)?void 0:t.meta)||{}}getObjects(){var t;return(null==(t=this.context)?void 0:t.objects)||{}}};function pt(t){try{return JSON.parse(JSON.stringify(t))}catch{return t}}const ht=new class{constructor(){this.listeners=new Set,this.currentCart=null,this.cartHistory=[],this.pollInterval=null}async fetch(){try{const t=await fetch("/cart.js",{headers:{Accept:"application/json"}});return await t.json()}catch(t){return console.error("[Theme Devtools] Cart fetch failed:",t),null}}async update(t){try{const e=await fetch("/cart/update.js",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({updates:t})}),s=await e.json();return this.setCart(s),s}catch(e){return console.error("[Theme Devtools] Cart update failed:",e),null}}async change(t,e){try{const s=await fetch("/cart/change.js",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({line:t,quantity:e})}),i=await s.json();return this.setCart(i),i}catch(s){return console.error("[Theme Devtools] Cart change failed:",s),null}}async clear(){try{const t=await fetch("/cart/clear.js",{method:"POST",headers:{Accept:"application/json"}}),e=await t.json();return this.setCart(e),e}catch(t){return console.error("[Theme Devtools] Cart clear failed:",t),null}}setCart(t){const e=this.currentCart;this.currentCart=t,e&&(this.cartHistory.push({timestamp:Date.now(),diff:this.diffCart(e,t),snapshot:pt(e)}),this.cartHistory.length>50&&this.cartHistory.shift()),this.notify(t,e)}diffCart(t,e){const s={itemCount:{old:(null==t?void 0:t.item_count)||0,new:(null==e?void 0:e.item_count)||0},totalPrice:{old:(null==t?void 0:t.total_price)||0,new:(null==e?void 0:e.total_price)||0},items:{added:[],removed:[],modified:[]}},i=new Map(((null==t?void 0:t.items)||[]).map(t=>[t.key,t])),a=new Map(((null==e?void 0:e.items)||[]).map(t=>[t.key,t]));return a.forEach((t,e)=>{const a=i.get(e);a?a.quantity!==t.quantity&&s.items.modified.push({item:t,oldQuantity:a.quantity,newQuantity:t.quantity}):s.items.added.push(t)}),i.forEach((t,e)=>{a.has(e)||s.items.removed.push(t)}),s}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}notify(t,e){this.listeners.forEach(s=>{try{s(t,e)}catch(i){console.error("[Theme Devtools] Cart listener error:",i)}})}startPolling(t=2e3){if(this.pollInterval)return;const e=async()=>{const t=await this.fetch();t&&JSON.stringify(t)!==JSON.stringify(this.currentCart)&&this.setCart(t)};e(),this.pollInterval=setInterval(e,t)}stopPolling(){this.pollInterval&&(clearInterval(this.pollInterval),this.pollInterval=null)}interceptAjax(){const t=this,e=window.fetch;window.fetch=async function(s,i){const a=await e.apply(this,arguments);if("string"==typeof s&&s.includes("/cart"))try{const e=a.clone(),s=await e.json();s&&void 0!==s.item_count&&setTimeout(()=>t.setCart(s),0)}catch{}return a};const s=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(e,i){return"string"==typeof i&&i.includes("/cart")&&this.addEventListener("load",function(){try{const e=JSON.parse(this.responseText);e&&void 0!==e.item_count&&setTimeout(()=>t.setCart(e),0)}catch{}}),s.apply(this,arguments)}}};const ut=new class{constructor(){this.overlay=null,this.currentSection=null}init(){this.overlay=document.createElement("div"),this.overlay.className="tdt-section-overlay",Object.assign(this.overlay.style,{position:"fixed",pointerEvents:"none",border:"2px solid #3b82f6",backgroundColor:"rgba(59, 130, 246, 0.1)",zIndex:"2147483646",display:"none",transition:"all 0.2s ease"}),document.body.appendChild(this.overlay)}findSections(){const t=[];Array.from(document.querySelectorAll('[id^="shopify-section-"]')).forEach(e=>{var s;const i=e.id.replace("shopify-section-",""),a=e.dataset.sectionType||(null==(s=e.className.match(/section-(\w+)/))?void 0:s[1])||"unknown",o=Array.from(e.querySelectorAll('[data-block-id], [id*="block"]'));t.push({id:i,type:a,element:e,blockCount:o.length,rect:e.getBoundingClientRect()})});return Array.from(document.querySelectorAll("[data-section-id]")).forEach(e=>{const s=e.dataset.sectionId;if(!t.find(t=>t.id===s)){const i=e.dataset.sectionType||"unknown",a=Array.from(e.querySelectorAll("[data-block-id]"));t.push({id:s,type:i,element:e,blockCount:a.length,rect:e.getBoundingClientRect()})}}),t}highlight(t){const e=this.findSections().find(e=>e.id===t);if(!e||!e.element)return void this.hide();const s=e.element.getBoundingClientRect();Object.assign(this.overlay.style,{display:"block",top:`${s.top}px`,left:`${s.left}px`,width:`${s.width}px`,height:`${s.height}px`}),this.currentSection=t,e.element.scrollIntoView({behavior:"smooth",block:"center"})}hide(){this.overlay&&(this.overlay.style.display="none"),this.currentSection=null}destroy(){this.overlay&&this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)}};class vt extends rt{constructor(){super(),this.data=null,this.path="",this.expanded=new Set}_getType(t){return null===t?"null":void 0===t?"undefined":Array.isArray(t)?"array":typeof t}_isExpandable(t){const e=this._getType(t);return("object"===e||"array"===e)&&null!==t&&Object.keys(t).length>0}_toggleExpand(t,e){e.stopPropagation();const s=new Set(this.expanded);s.has(t)?s.delete(t):s.add(t),this.expanded=s}async _copyPath(t,e){e.stopPropagation();const s=t.replace(/^objects\./,"").replace(/^meta\./,"");try{await navigator.clipboard.writeText(`{{ ${s} }}`);const t=e.target;t.classList.add("key--copied"),setTimeout(()=>t.classList.remove("key--copied"),1e3)}catch(i){console.error("Failed to copy:",i)}}_renderValue(t,e){switch(e){case"string":const e=t.length>80?t.slice(0,80)+"...":t;return I`<span class="value value--string">"${e}"</span>`;case"number":return I`<span class="value value--number">${t}</span>`;case"boolean":return I`<span class="value value--boolean">${t}</span>`;case"null":return I`<span class="value value--null">null</span>`;case"undefined":return I`<span class="value value--undefined">undefined</span>`;default:return I`<span class="value">${String(t)}</span>`}}_renderPreview(t,e){const s=Object.keys(t).length;return I`<span class="preview">${"array"===e?`Array(${s})`:`{${s} ${1===s?"key":"keys"}}`}</span>`}_renderNode(t,e,s,i=!1,a=!1){const o=this._getType(e),n=this._isExpandable(e),r=this.expanded.has(s),l=["node",i?"node--root":"",n?"node--expandable":"",r?"node--expanded":""].filter(Boolean).join(" ");return I`
+      <div 
+        class=${l}
+        @click=${n?t=>this._toggleExpand(s,t):null}
+      >
+        <span class="key" @click=${t=>this._copyPath(s,t)}>${a?`[${t}]`:t}</span>
+        <span class="separator">: </span>
+        ${n?this._renderPreview(e,o):this._renderValue(e,o)}
+        ${n&&r?I`
+          <div class="children">
+            ${this._renderObject(e,s)}
+          </div>
+        `:""}
+      </div>
+    `}_renderObject(t,e=""){if(null==t)return I`<span class="value value--null">${null===t?"null":"undefined"}</span>`;const s=this._getType(t),i=Object.entries(t);return 0===i.length?I`<span class="preview">${"array"===s?"[]":"{}"}</span>`:i.map(([t,i])=>{const a=e?`${e}.${t}`:t;return this._renderNode(t,i,a,!e,"array"===s)})}render(){return null===this.data?I`<span class="value value--null">null</span>`:void 0===this.data?I`<span class="value value--undefined">undefined</span>`:I`${this._renderObject(this.data,this.path)}`}}__publicField(vt,"properties",{data:{type:Object},path:{type:String},expanded:{type:Object,state:!0}}),__publicField(vt,"styles",[dt,n`
+      :host {
+        display: block;
+        font-family: var(--tdt-font);
+        font-size: var(--tdt-font-size);
+      }
+
+      .node {
+        padding: 2px 0;
+        padding-left: 16px;
+        position: relative;
+      }
+
+      .node--root {
+        padding-left: 0;
+      }
+
+      .node--expandable {
+        cursor: pointer;
+      }
+
+      .node--expandable::before {
+        content: '▶';
+        position: absolute;
+        left: 2px;
+        font-size: 8px;
+        color: var(--tdt-text-muted);
+        transition: transform 0.15s ease;
+      }
+
+      .node--root.node--expandable::before {
+        left: -12px;
+      }
+
+      .node--expanded::before {
+        transform: rotate(90deg);
+      }
+
+      .key {
+        color: var(--tdt-key);
+        cursor: pointer;
+        border-radius: 2px;
+        padding: 0 2px;
+        margin: 0 -2px;
+      }
+
+      .key:hover {
+        background: rgba(199, 146, 234, 0.2);
+      }
+
+      .key--copied {
+        background: rgba(34, 197, 94, 0.3) !important;
+        transition: background 0.3s ease;
+      }
+
+      .separator {
+        color: var(--tdt-text-muted);
+      }
+
+      .value {
+        word-break: break-all;
+      }
+
+      .value--string { color: var(--tdt-string); }
+      .value--number { color: var(--tdt-number); }
+      .value--boolean { color: var(--tdt-boolean); }
+      .value--null, .value--undefined { 
+        color: var(--tdt-null); 
+        font-style: italic; 
+      }
+
+      .preview {
+        color: var(--tdt-text-muted);
+        font-style: italic;
+      }
+
+      .children {
+        border-left: 1px solid var(--tdt-border);
+        margin-left: 6px;
+      }
+    `]),customElements.define("tdt-object-inspector",vt);class gt extends rt{constructor(){super(),this.objects={},this.activeObject=null,this.searchQuery=""}updated(t){if(t.has("objects")&&this.objects){const t=Object.keys(this.objects).filter(t=>null!==this.objects[t]);t.length>0&&!this.activeObject&&(this.activeObject=t[0])}}_handleSearch(t){this.searchQuery=t.target.value}_selectObject(t){this.activeObject=t}render(){if(!this.objects||0===Object.keys(this.objects).length)return I`<div class="empty-state">No Liquid objects available on this page</div>`;const t=Object.keys(this.objects),e=this.activeObject?this.objects[this.activeObject]:null;return I`
+      <input 
+        type="search" 
+        class="search" 
+        placeholder="Filter objects..."
+        .value=${this.searchQuery}
+        @input=${this._handleSearch}
+      >
+
+      <div class="object-tabs">
+        ${t.map(t=>I`
+          <button
+            class="object-tab ${this.activeObject===t?"object-tab--active":""} ${null===this.objects[t]?"object-tab--null":""}"
+            @click=${()=>this._selectObject(t)}
+          >
+            ${t}${null===this.objects[t]?" ∅":""}
+          </button>
+        `)}
+      </div>
+
+      <div class="object-content">
+        ${null===e?I`<div class="null-state">${this.activeObject} is null on this page</div>`:I`
+            <tdt-object-inspector 
+              .data=${e} 
+              .path=${"objects."+this.activeObject}
+            ></tdt-object-inspector>
+          `}
+      </div>
+    `}}__publicField(gt,"properties",{objects:{type:Object},activeObject:{type:String,state:!0},searchQuery:{type:String,state:!0}}),__publicField(gt,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .search {
+        width: 100%;
+        margin-bottom: 12px;
+      }
+
+      .object-tabs {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 12px;
+      }
+
+      .object-tab {
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        padding: 4px 10px;
+        color: var(--tdt-text-muted);
+        font-family: var(--tdt-font);
+        font-size: 11px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .object-tab:hover {
+        background: var(--tdt-bg-hover);
+        color: var(--tdt-text);
+      }
+
+      .object-tab--active {
+        background: var(--tdt-accent);
+        border-color: var(--tdt-accent);
+        color: white;
+      }
+
+      .object-tab--null {
+        opacity: 0.5;
+      }
+
+      .object-content {
+        overflow: auto;
+      }
+
+      .null-state {
+        color: var(--tdt-text-muted);
+        padding: 24px;
+        text-align: center;
+        font-style: italic;
+      }
+    `]),customElements.define("tdt-objects-panel",gt);class bt extends rt{constructor(){super(),this.sections=[],this.activeSection=null}connectedCallback(){super.connectedCallback(),this._refreshSections()}_refreshSections(){this.sections=ut.findSections()}_handleSectionClick(t){this.activeSection=t,ut.highlight(t)}_handleSectionLeave(){this.activeSection=null,ut.hide()}render(){return I`
+      <div class="header">
+        <button class="btn btn--sm" @click=${this._refreshSections}>↻ Refresh</button>
+      </div>
+
+      ${0===this.sections.length?I`<div class="empty-state">No sections found on this page</div>`:I`
+          <div class="section-list">
+            ${this.sections.map(t=>I`
+              <div
+                class="section-item ${this.activeSection===t.id?"section-item--active":""}"
+                @click=${()=>this._handleSectionClick(t.id)}
+                @mouseleave=${this._handleSectionLeave}
+              >
+                <span class="section-id">${t.id}</span>
+                <span class="section-type">${t.type}</span>
+                <span class="section-blocks">${t.blockCount} blocks</span>
+              </div>
+            `)}
+          </div>
+        `}
+    `}}__publicField(bt,"properties",{sections:{type:Array,state:!0},activeSection:{type:String,state:!0}}),__publicField(bt,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .header {
+        margin-bottom: 12px;
+      }
+
+      .section-list {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .section-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 12px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .section-item:hover {
+        background: var(--tdt-bg-hover);
+        border-color: var(--tdt-accent);
+      }
+
+      .section-item--active {
+        border-color: var(--tdt-accent);
+        background: rgba(59, 130, 246, 0.1);
+      }
+
+      .section-id {
+        font-weight: 600;
+        color: var(--tdt-text);
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .section-type {
+        color: var(--tdt-accent);
+        font-size: 11px;
+      }
+
+      .section-blocks {
+        color: var(--tdt-text-muted);
+        font-size: 11px;
+      }
+    `]),customElements.define("tdt-sections-panel",bt);class mt extends rt{constructor(){super(),this.cart=null,this.previousCart=null,this.diff=null}updated(t){if(t.has("cart")&&this.cart){const e=t.get("cart");e&&(this.previousCart=e,this.diff=ht.diffCart(e,this.cart))}}async _refresh(){const t=await ht.fetch();t&&ht.setCart(t)}async _clear(){confirm("Clear entire cart?")&&await ht.clear()}async _updateQuantity(t,e){await ht.change(t+1,e)}async _remove(t){await ht.change(t+1,0)}_formatMoney(t){return null==t?"—":`$${(t/100).toFixed(2)}`}render(){if(!this.cart)return I`<div class="empty-state">Loading cart...</div>`;const t=this.diff&&(this.diff.items.added.length>0||this.diff.items.removed.length>0||this.diff.items.modified.length>0);return I`
+      <div class="toolbar">
+        <div class="stats">
+          <span><strong>${this.cart.item_count}</strong> items</span>
+          <span><strong>${this._formatMoney(this.cart.total_price)}</strong> total</span>
+          <span>${this.cart.total_weight}g · ${this.cart.currency}</span>
+        </div>
+        <div class="actions">
+          <button class="btn btn--sm" @click=${this._refresh}>↻ Refresh</button>
+          <button class="btn btn--sm btn--danger" @click=${this._clear}>Clear</button>
+        </div>
+      </div>
+
+      ${t?I`
+        <div class="diff">
+          ${this.diff.items.added.map(t=>I`
+            <span class="diff__added">+ ${t.title} ×${t.quantity}</span>
+          `)}
+          ${this.diff.items.removed.map(t=>I`
+            <span class="diff__removed">− ${t.title}</span>
+          `)}
+          ${this.diff.items.modified.map(({item:t,oldQuantity:e,newQuantity:s})=>I`
+            <span class="diff__modified">~ ${t.title}: ${e}→${s}</span>
+          `)}
+        </div>
+      `:""}
+
+      ${0===this.cart.items.length?I`<div class="empty-state">Cart is empty</div>`:I`
+          <table>
+            <thead>
+              <tr>
+                <th class="col-img"></th>
+                <th>Product</th>
+                <th>SKU</th>
+                <th class="col-qty">Qty</th>
+                <th class="col-price">Price</th>
+                <th class="col-actions"></th>
+              </tr>
+            </thead>
+            <tbody>
+              ${this.cart.items.map((t,e)=>I`
+                <tr>
+                  <td class="col-img">
+                    ${t.image?I`<img class="item-img" src="${t.image.replace(/(\.[^.]+)$/,"_60x60$1")}" alt="">`:I`<div class="item-img"></div>`}
+                  </td>
+                  <td>
+                    <div class="item-title" title="${t.product_title}">${t.product_title}</div>
+                    ${t.variant_title?I`<div class="item-variant">${t.variant_title}</div>`:""}
+                  </td>
+                  <td class="item-sku">${t.sku||"—"}</td>
+                  <td>
+                    <input 
+                      type="number" 
+                      class="qty-input" 
+                      .value=${t.quantity}
+                      min="0"
+                      @change=${t=>this._updateQuantity(e,parseInt(t.target.value,10))}
+                    >
+                  </td>
+                  <td class="item-price">${this._formatMoney(t.line_price)}</td>
+                  <td>
+                    <button class="remove-btn" @click=${()=>this._remove(e)} title="Remove">×</button>
+                  </td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        `}
+    `}}__publicField(mt,"properties",{cart:{type:Object},previousCart:{type:Object,state:!0},diff:{type:Object,state:!0}}),__publicField(mt,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 8px 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 8px;
+        flex-wrap: wrap;
+      }
+
+      .stats {
+        display: flex;
+        gap: 12px;
+        font-size: 11px;
+        color: var(--tdt-text-muted);
+      }
+
+      .stats strong {
+        color: var(--tdt-text);
+        font-weight: 600;
+      }
+
+      .actions {
+        display: flex;
+        gap: 6px;
+        margin-left: auto;
+      }
+
+      .diff {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+        padding: 4px 8px;
+        background: var(--tdt-bg-secondary);
+        border-radius: var(--tdt-radius);
+        margin-bottom: 8px;
+        font-size: 10px;
+      }
+
+      .diff__added { color: var(--tdt-success); }
+      .diff__removed { color: var(--tdt-danger); }
+      .diff__modified { color: var(--tdt-warning); }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 11px;
+      }
+
+      th {
+        text-align: left;
+        padding: 4px 8px;
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--tdt-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        border-bottom: 1px solid var(--tdt-border);
+        background: var(--tdt-bg-secondary);
+        position: sticky;
+        top: 0;
+      }
+
+      td {
+        padding: 6px 8px;
+        border-bottom: 1px solid var(--tdt-border);
+        vertical-align: middle;
+      }
+
+      tr:hover td {
+        background: var(--tdt-bg-secondary);
+      }
+
+      .col-img { width: 32px; }
+      .col-qty { width: 50px; }
+      .col-price { width: 70px; text-align: right; }
+      .col-actions { width: 30px; text-align: center; }
+
+      .item-img {
+        width: 28px;
+        height: 28px;
+        object-fit: cover;
+        border-radius: 3px;
+        background: var(--tdt-bg);
+        display: block;
+      }
+
+      .item-title {
+        font-weight: 500;
+        color: var(--tdt-text);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 200px;
+      }
+
+      .item-variant {
+        color: var(--tdt-text-muted);
+        font-size: 10px;
+      }
+
+      .item-sku {
+        color: var(--tdt-text-muted);
+        font-size: 10px;
+        font-family: var(--tdt-font-mono);
+      }
+
+      .item-price {
+        font-weight: 600;
+        color: var(--tdt-accent);
+        text-align: right;
+      }
+
+      .qty-input {
+        width: 70px;
+        padding: 2px 4px;
+        text-align: center;
+        font-size: 11px;
+      }
+
+      .remove-btn {
+        padding: 2px 6px;
+        font-size: 10px;
+        line-height: 1;
+        background: transparent;
+        border: 1px solid var(--tdt-border);
+        color: var(--tdt-text-muted);
+        border-radius: 3px;
+        cursor: pointer;
+      }
+
+      .remove-btn:hover {
+        background: var(--tdt-danger);
+        border-color: var(--tdt-danger);
+        color: white;
+      }
+    `]),customElements.define("tdt-cart-panel",mt);class ft extends rt{constructor(){super(),this.meta={}}_renderSection(t,e){return I`
+      <div class="section">
+        <h4 class="section__title">${t}</h4>
+        <table class="table">
+          ${e.map(([t,e])=>I`
+            <tr>
+              <td class="table__label">${t}</td>
+              <td class="table__value">${e??"—"}</td>
+            </tr>
+          `)}
+        </table>
+      </div>
+    `}render(){var t,e,s,i,a,o,n,r,l,d,c,p,h,u,v,g,b,m,f,x,y,_,$,w,k,S,j;if(!this.meta)return I`<div class="empty-state">No metadata available</div>`;const E=[{title:"Theme",items:[["ID",null==(t=this.meta.theme)?void 0:t.id],["Name",null==(e=this.meta.theme)?void 0:e.name],["Role",null==(s=this.meta.theme)?void 0:s.role]]},{title:"Template",items:[["Name",null==(i=this.meta.template)?void 0:i.name],["Suffix",(null==(a=this.meta.template)?void 0:a.suffix)||"—"],["Directory",(null==(o=this.meta.template)?void 0:o.directory)||"—"]]},{title:"Request",items:[["Page Type",null==(n=this.meta.request)?void 0:n.page_type],["Path",null==(r=this.meta.request)?void 0:r.path],["Host",null==(l=this.meta.request)?void 0:l.host],["Design Mode",(null==(d=this.meta.request)?void 0:d.design_mode)?"Yes":"No"],["Visual Preview",(null==(c=this.meta.request)?void 0:c.visual_preview_mode)?"Yes":"No"]]},{title:"Localization",items:[["Locale",`${(null==(h=null==(p=this.meta.request)?void 0:p.locale)?void 0:h.name)||""} (${(null==(v=null==(u=this.meta.request)?void 0:u.locale)?void 0:v.iso_code)||""})`],["Country",`${(null==(b=null==(g=this.meta.localization)?void 0:g.country)?void 0:b.name)||""} (${(null==(f=null==(m=this.meta.localization)?void 0:m.country)?void 0:f.iso_code)||""})`],["Currency",`${(null==(_=null==(y=null==(x=this.meta.localization)?void 0:x.country)?void 0:y.currency)?void 0:_.symbol)||""} ${(null==(k=null==(w=null==($=this.meta.localization)?void 0:$.country)?void 0:w.currency)?void 0:k.iso_code)||""}`],["Market",(null==(j=null==(S=this.meta.localization)?void 0:S.market)?void 0:j.handle)||"—"]]}];return I`
+      ${E.map(t=>this._renderSection(t.title,t.items))}
+    `}}__publicField(ft,"properties",{meta:{type:Object}}),__publicField(ft,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .section {
+        margin-bottom: 16px;
+      }
+
+      .section__title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--tdt-text-muted);
+        margin: 0 0 8px 0;
+        padding-bottom: 4px;
+        border-bottom: 1px solid var(--tdt-border);
+      }
+
+      .table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+
+      .table td {
+        padding: 4px 0;
+        vertical-align: top;
+      }
+
+      .table__label {
+        color: var(--tdt-text-muted);
+        width: 120px;
+      }
+
+      .table__value {
+        color: var(--tdt-text);
+        word-break: break-all;
+      }
+    `]),customElements.define("tdt-info-panel",ft);class xt extends rt{constructor(){super(),this.metafields=null,this.searchQuery="",this.expandedPaths=new Set(["shop","product","collection","customer"]),this.copiedPath=null}_getResourceIcon(t){return{shop:"🏪",product:"📦",collection:"📂",customer:"👤",article:"📝",blog:"📰",page:"📄"}[t]||"📋"}_getTypeClass(t){if(!t)return"unknown";const e=t.toLowerCase().replace(/\s+/g,"_"),s=["string","number","integer","boolean","json","date","date_time","url","link","color","rich_text","multi_line_text","file","file_reference","list","rating"].find(t=>e.includes(t));return s||"unknown"}_toggleResource(t){const e=new Set(this.expandedPaths);e.has(t)?e.delete(t):e.add(t),this.expandedPaths=e}_toggleNamespace(t){const e=new Set(this.expandedPaths);e.has(t)?e.delete(t):e.add(t),this.expandedPaths=e}async _copyLiquidPath(t,e,s,i){i.stopPropagation();const a=`{{ ${t}.metafields.${e}.${s} }}`;try{await navigator.clipboard.writeText(a),this.copiedPath=`${t}.${e}.${s}`,setTimeout(()=>{this.copiedPath=null},1500)}catch(o){console.error("Failed to copy:",o)}}_formatValue(t,e){if(null==t)return I`<span class="value--null">null</span>`;if("object"==typeof t){const e=JSON.stringify(t,null,2),s=e.length>100;return I`
+        <span class="value--json ${s?"value--truncated":""}" 
+              title="${s?"Click to expand":""}"
+              @click=${s?()=>alert(e):null}>
+          ${s?e.slice(0,100)+"...":e}
+        </span>
+      `}if("string"==typeof t){const e=t.length>80;return I`
+        <span class="value--string" title="${e?t:""}">
+          "${e?t.slice(0,80)+"...":t}"
+        </span>
+      `}return"number"==typeof t?I`<span class="value--number">${t}</span>`:"boolean"==typeof t?I`<span class="value--boolean">${t}</span>`:I`<span>${String(t)}</span>`}_filterMetafields(t){if(!this.searchQuery.trim())return t;const e=this.searchQuery.toLowerCase(),s={};for(const[i,a]of Object.entries(t)){if(!a||"object"!=typeof a)continue;const t={};for(const[s,i]of Object.entries(a)){if(!i||"object"!=typeof i)continue;const a={};for(const[t,o]of Object.entries(i)){const i=t.toLowerCase().includes(e),n=s.toLowerCase().includes(e),r=(null==o?void 0:o.value)&&String(o.value).toLowerCase().includes(e);(i||n||r)&&(a[t]=o)}Object.keys(a).length>0&&(t[s]=a)}Object.keys(t).length>0&&(s[i]=t)}return s}_countMetafields(t){let e=0;if(!t)return e;for(const s of Object.values(t))if(s&&"object"==typeof s)for(const t of Object.values(s))t&&"object"==typeof t&&(e+=Object.keys(t).length);return e}_countResourceMetafields(t){let e=0;if(!t||"object"!=typeof t)return e;for(const s of Object.values(t))s&&"object"==typeof s&&(e+=Object.keys(s).length);return e}_renderMetafield(t,e,s,i){const a=`${t}.${e}.${s}`,o=this.copiedPath===a;return I`
+      <div class="metafield">
+        <div class="metafield__key">
+          <span 
+            class="metafield__name ${o?"metafield__name--copied":""}"
+            @click=${i=>this._copyLiquidPath(t,e,s,i)}
+            title="Click to copy Liquid path"
+          >${s}</span>
+          ${(null==i?void 0:i.type)?I`
+            <span class="metafield__type type--${this._getTypeClass(i.type)}">
+              ${i.type}
+            </span>
+          `:""}
+        </div>
+        <div class="metafield__value">
+          ${this._formatValue(null==i?void 0:i.value,null==i?void 0:i.type)}
+        </div>
+        <button 
+          class="copy-btn" 
+          @click=${i=>this._copyLiquidPath(t,e,s,i)}
+          title="Copy Liquid path"
+        >
+          ${o?"✓":"Copy"}
+        </button>
+      </div>
+    `}_renderNamespace(t,e,s){const i=`${t}.${e}`,a=this.expandedPaths.has(i),o=Object.keys(s).length;return I`
+      <div class="namespace">
+        <div class="namespace-header" @click=${()=>this._toggleNamespace(i)}>
+          <span class="expand-icon ${a?"expand-icon--open":""}">▶</span>
+          <span class="namespace-name">${e}</span>
+          <span class="resource-count">${o}</span>
+        </div>
+        ${a?I`
+          <div class="metafield-list">
+            ${Object.entries(s).map(([s,i])=>this._renderMetafield(t,e,s,i))}
+          </div>
+        `:""}
+      </div>
+    `}_renderResource(t,e){const s=this.expandedPaths.has(t),i=this._countResourceMetafields(e);return 0===i?"":I`
+      <div class="resource-group">
+        <div class="resource-header" @click=${()=>this._toggleResource(t)}>
+          <span class="resource-icon">${this._getResourceIcon(t)}</span>
+          <span class="resource-name">${t}</span>
+          <span class="resource-count">${i} metafield${1!==i?"s":""}</span>
+          <span class="expand-icon ${s?"expand-icon--open":""}">▶</span>
+        </div>
+        ${s?I`
+          <div class="namespace-list">
+            ${Object.entries(e).map(([e,s])=>this._renderNamespace(t,e,s))}
+          </div>
+        `:""}
+      </div>
+    `}render(){if(!this.metafields||0===Object.keys(this.metafields).length)return I`
+        <div class="empty-state">
+          <div class="empty-state__icon">🏷️</div>
+          <div class="empty-state__title">No Metafields Found</div>
+          <div class="empty-state__hint">
+            Metafields will appear here when available. Make sure your theme-devtools-bridge.liquid 
+            is configured with your metafield namespaces.
+          </div>
+        </div>
+      `;const t=this._filterMetafields(this.metafields),e=this._countMetafields(this.metafields),s=this._countMetafields(t),i=Object.keys(t).length>0;return I`
+      <div class="toolbar">
+        <input 
+          type="text" 
+          class="search-input" 
+          placeholder="Search metafields by namespace, key, or value..."
+          .value=${this.searchQuery}
+          @input=${t=>this.searchQuery=t.target.value}
+        >
+        <div class="stats">
+          ${this.searchQuery?I`<strong>${s}</strong> of ${e} metafields`:I`<strong>${e}</strong> metafields`}
+        </div>
+      </div>
+
+      ${i?Object.entries(t).map(([t,e])=>this._renderResource(t,e)):I`<div class="no-results">No metafields match "${this.searchQuery}"</div>`}
+    `}}__publicField(xt,"properties",{metafields:{type:Object},searchQuery:{type:String,state:!0},expandedPaths:{type:Object,state:!0},copiedPath:{type:String,state:!0}}),__publicField(xt,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 8px 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 200px;
+        padding: 6px 10px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        color: var(--tdt-text);
+        font-size: 11px;
+        font-family: var(--tdt-font);
+      }
+
+      .search-input:focus {
+        outline: none;
+        border-color: var(--tdt-accent);
+      }
+
+      .search-input::placeholder {
+        color: var(--tdt-text-muted);
+      }
+
+      .stats {
+        font-size: 11px;
+        color: var(--tdt-text-muted);
+      }
+
+      .stats strong {
+        color: var(--tdt-text);
+      }
+
+      .resource-group {
+        margin-bottom: 16px;
+      }
+
+      .resource-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .resource-header:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .resource-icon {
+        font-size: 14px;
+      }
+
+      .resource-name {
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--tdt-text);
+        flex: 1;
+      }
+
+      .resource-count {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+        background: var(--tdt-bg);
+        padding: 2px 6px;
+        border-radius: 10px;
+      }
+
+      .expand-icon {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+        transition: transform 0.15s ease;
+      }
+
+      .expand-icon--open {
+        transform: rotate(90deg);
+      }
+
+      .namespace-list {
+        margin-top: 4px;
+        margin-left: 12px;
+        border-left: 1px solid var(--tdt-border);
+        padding-left: 12px;
+      }
+
+      .namespace {
+        margin-bottom: 8px;
+      }
+
+      .namespace-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        cursor: pointer;
+        border-radius: var(--tdt-radius);
+        font-size: 11px;
+      }
+
+      .namespace-header:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .namespace-name {
+        color: var(--tdt-accent);
+        font-family: var(--tdt-font-mono);
+        font-weight: 500;
+      }
+
+      .metafield-list {
+        margin-left: 16px;
+        margin-top: 4px;
+      }
+
+      .metafield {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: var(--tdt-radius);
+        font-size: 11px;
+        border-bottom: 1px solid var(--tdt-border);
+      }
+
+      .metafield:last-child {
+        border-bottom: none;
+      }
+
+      .metafield:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .metafield__key {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 140px;
+        flex-shrink: 0;
+      }
+
+      .metafield__name {
+        color: var(--tdt-key);
+        font-family: var(--tdt-font-mono);
+        cursor: pointer;
+        padding: 1px 4px;
+        border-radius: 2px;
+      }
+
+      .metafield__name:hover {
+        background: rgba(199, 146, 234, 0.2);
+      }
+
+      .metafield__name--copied {
+        background: rgba(34, 197, 94, 0.3) !important;
+      }
+
+      .metafield__type {
+        font-size: 9px;
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .type--string { background: #2d4a3e; color: #98c379; }
+      .type--number, .type--integer { background: #3d3a2d; color: #d19a66; }
+      .type--boolean { background: #2d3a4a; color: #61afef; }
+      .type--json { background: #4a2d4a; color: #c678dd; }
+      .type--date, .type--date_time { background: #2d4a4a; color: #56b6c2; }
+      .type--url, .type--link { background: #3d2d2d; color: #e06c75; }
+      .type--color { background: #4a3d2d; color: #e5c07b; }
+      .type--rich_text, .type--multi_line_text { background: #2d3d3d; color: #abb2bf; }
+      .type--file, .type--file_reference { background: #3a3d2d; color: #98c379; }
+      .type--list { background: #3d2d4a; color: #c678dd; }
+      .type--rating { background: #4a4a2d; color: #e5c07b; }
+      .type--unknown { background: var(--tdt-bg); color: var(--tdt-text-muted); }
+
+      .metafield__value {
+        flex: 1;
+        min-width: 0;
+        word-break: break-word;
+      }
+
+      .value--string { color: var(--tdt-string); }
+      .value--number { color: var(--tdt-number); }
+      .value--boolean { color: var(--tdt-boolean); }
+      .value--null { color: var(--tdt-null); font-style: italic; }
+      .value--json { 
+        color: var(--tdt-text-muted); 
+        font-family: var(--tdt-font-mono);
+        font-size: 10px;
+      }
+      .value--truncated {
+        cursor: pointer;
+      }
+      .value--truncated:hover {
+        text-decoration: underline;
+      }
+
+      .copy-btn {
+        opacity: 0;
+        padding: 2px 6px;
+        font-size: 10px;
+        background: var(--tdt-bg);
+        border: 1px solid var(--tdt-border);
+        border-radius: 3px;
+        color: var(--tdt-text-muted);
+        cursor: pointer;
+        transition: opacity 0.15s;
+      }
+
+      .metafield:hover .copy-btn {
+        opacity: 1;
+      }
+
+      .copy-btn:hover {
+        background: var(--tdt-accent);
+        border-color: var(--tdt-accent);
+        color: white;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--tdt-text-muted);
+      }
+
+      .empty-state__icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .empty-state__title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--tdt-text);
+        margin-bottom: 8px;
+      }
+
+      .empty-state__hint {
+        font-size: 11px;
+        max-width: 300px;
+        margin: 0 auto;
+        line-height: 1.5;
+      }
+
+      .no-results {
+        padding: 20px;
+        text-align: center;
+        color: var(--tdt-text-muted);
+        font-size: 12px;
+      }
+    `]),customElements.define("tdt-metafields-panel",xt);class yt extends rt{constructor(){super(),this.settings=null,this.sectionSettings=null,this.searchQuery="",this.expandedPaths=new Set(["theme","colors","typography"]),this.activeView="theme",this.copiedPath=null,this.validationErrors=[],this._showExportModal=!1,this._showValidationModal=!1}_getTypeClass(t){if(!t)return"";return{color:"color",color_background:"color",text:"text",textarea:"textarea",richtext:"richtext",html:"html",number:"number",range:"range",checkbox:"checkbox",select:"select",radio:"radio",image_picker:"image_picker",video:"video",video_url:"video_url",url:"url",link_list:"link_list",product:"product",collection:"collection",blog:"blog",page:"page",article:"article",font_picker:"font_picker"}[t]||""}_toggleGroup(t){const e=new Set(this.expandedPaths);e.has(t)?e.delete(t):e.add(t),this.expandedPaths=e}async _copySettingPath(t,e){null==e||e.stopPropagation();const s=`{{ settings.${t} }}`;try{await navigator.clipboard.writeText(s),this.copiedPath=t,setTimeout(()=>{this.copiedPath=null},1500)}catch(i){console.error("Failed to copy:",i)}}_formatValue(t,e){if(null==t)return I`<span class="value--null">null</span>`;if("color"===e||"color_background"===e)return I`
+        <span class="value--color">
+          <span class="color-swatch" style="background: ${t}"></span>
+          <span class="value--string">${t}</span>
+        </span>
+      `;if("image_picker"===e&&t){const e="object"==typeof t?t.src:t;return I`
+        <span class="value--image">
+          ${e?I`<img class="image-preview" src="${e}" alt="">`:""}
+          <span class="value--string value--truncated">${e||"No image"}</span>
+        </span>
+      `}if("object"==typeof t)return I`<span class="value--string">${JSON.stringify(t)}</span>`;if("string"==typeof t){const e=t.length>60?t.slice(0,60)+"...":t;return I`<span class="value--string" title="${t}">"${e}"</span>`}return"number"==typeof t?I`<span class="value--number">${t}</span>`:"boolean"==typeof t?I`<span class="value--boolean">${t}</span>`:I`<span>${String(t)}</span>`}_filterSettings(t){var e;if(!this.searchQuery.trim()||!t)return t;const s=this.searchQuery.toLowerCase(),i={};for(const[a,o]of Object.entries(t)){if("object"!=typeof o||null===o)continue;const t={};for(const[i,n]of Object.entries(o)){const o=i.toLowerCase().includes(s),r=a.toLowerCase().includes(s),l=null==(e=null==n?void 0:n.label)?void 0:e.toLowerCase().includes(s),d=(null==n?void 0:n.value)&&String(n.value).toLowerCase().includes(s);(o||r||l||d)&&(t[i]=n)}Object.keys(t).length>0&&(i[a]=t)}return i}_countSettings(t){let e=0;if(!t)return e;for(const s of Object.values(t))s&&"object"==typeof s&&(e+=Object.keys(s).length);return e}_exportSettings(){const t={theme_settings:this.settings,section_settings:this.sectionSettings,exported_at:(new Date).toISOString()};this._exportData=JSON.stringify(t,null,2),this._showExportModal=!0,this.requestUpdate()}_closeExportModal(){this._showExportModal=!1,this.requestUpdate()}async _copyExport(){try{await navigator.clipboard.writeText(this._exportData),this._closeExportModal()}catch(t){console.error("Failed to copy:",t)}}_downloadExport(){const t=new Blob([this._exportData],{type:"application/json"}),e=URL.createObjectURL(t),s=document.createElement("a");s.href=e,s.download=`theme-settings-${(new Date).toISOString().split("T")[0]}.json`,s.click(),URL.revokeObjectURL(e),this._closeExportModal()}_showValidation(){this._showValidationModal=!this._showValidationModal,this.requestUpdate()}_renderSetting(t,e,s){var i;const a=this.copiedPath===t,o=this.validationErrors.some(e=>e.path===t);return I`
+      <div class="setting-item ${o?"setting-item--error":""}">
+        <div class="setting__key">
+          <span 
+            class="setting__id ${a?"setting__id--copied":""}"
+            @click=${e=>this._copySettingPath(t,e)}
+            title="Click to copy Liquid path"
+          >${t}</span>
+          ${(null==e?void 0:e.label)?I`<span class="setting__label">${e.label}</span>`:""}
+        </div>
+        ${(null==e?void 0:e.type)?I`
+          <span class="setting__type type--${this._getTypeClass(e.type)}">
+            ${e.type}
+          </span>
+        `:""}
+        <div class="setting__value">
+          ${this._formatValue((null==e?void 0:e.value)??e,null==e?void 0:e.type)}
+          ${o?I`
+            <div class="setting__error">
+              ⚠️ ${null==(i=this.validationErrors.find(e=>e.path===t))?void 0:i.message}
+            </div>
+          `:""}
+        </div>
+      </div>
+    `}_renderGroup(t,e){const s=this.expandedPaths.has(t),i=Object.keys(e).length;return I`
+      <div class="settings-group">
+        <div class="group-header" @click=${()=>this._toggleGroup(t)}>
+          <span class="group-icon">${{colors:"🎨",typography:"🔤",layout:"📐",header:"⬆️",footer:"⬇️",product:"📦",collection:"📂",cart:"🛒",social:"🔗",favicon:"⭐",checkout:"💳",theme:"🎭"}[t]||"⚙️"}</span>
+          <span class="group-name">${t}</span>
+          <span class="group-count">${i}</span>
+          <span class="expand-icon ${s?"expand-icon--open":""}">▶</span>
+        </div>
+        ${s?I`
+          <div class="settings-list">
+            ${Object.entries(e).map(([e,s])=>this._renderSetting(e,s,t))}
+          </div>
+        `:""}
+      </div>
+    `}_renderSectionSettings(){return this.sectionSettings&&0!==Object.keys(this.sectionSettings).length?Object.entries(this.sectionSettings).map(([t,e])=>{const s=this.expandedPaths.has(`section-${t}`),i=e.settings?Object.keys(e.settings).length:0;return I`
+        <div class="section-card">
+          <div class="section-header" @click=${()=>this._toggleGroup(`section-${t}`)}>
+            <span class="expand-icon ${s?"expand-icon--open":""}">▶</span>
+            <span class="section-type">${e.type||"unknown"}</span>
+            <span class="section-id">#${t}</span>
+            <span class="group-count" style="margin-left: auto">${i} settings</span>
+          </div>
+          ${s&&e.settings?I`
+            <div class="section-content">
+              ${Object.entries(e.settings).map(([t,e])=>I`
+                <div class="setting-item">
+                  <div class="setting__key">
+                    <span class="setting__id">${t}</span>
+                  </div>
+                  <div class="setting__value">
+                    ${this._formatValue(e)}
+                  </div>
+                </div>
+              `)}
+            </div>
+          `:""}
+        </div>
+      `}):I`
+        <div class="empty-state">
+          <div class="empty-state__icon">📐</div>
+          <div class="empty-state__title">No Section Settings</div>
+          <div class="empty-state__hint">
+            Section settings will appear here when available on the current page.
+          </div>
+        </div>
+      `}_renderValidationModal(){return this._showValidationModal?I`
+      <div class="validation-list">
+        ${0===this.validationErrors.length?I`<div class="no-results">✅ No validation errors found</div>`:this.validationErrors.map(t=>I`
+            <div class="validation-item">
+              <span class="validation-item__icon">⚠️</span>
+              <span class="validation-item__path">${t.path}</span>
+              <span class="validation-item__message">${t.message}</span>
+            </div>
+          `)}
+      </div>
+    `:""}_renderExportModal(){return this._showExportModal?I`
+      <div class="export-modal" @click=${this._closeExportModal}>
+        <div class="modal-content" @click=${t=>t.stopPropagation()}>
+          <div class="modal-header">
+            <span class="modal-title">📤 Export Settings</span>
+            <button class="modal-close" @click=${this._closeExportModal}>×</button>
+          </div>
+          <textarea class="modal-textarea" readonly .value=${this._exportData||""}></textarea>
+          <div class="modal-actions">
+            <button class="btn btn--sm" @click=${this._copyExport}>📋 Copy</button>
+            <button class="btn btn--sm btn--primary" @click=${this._downloadExport}>⬇️ Download</button>
+          </div>
+        </div>
+      </div>
+    `:""}render(){const t=this.settings&&Object.keys(this.settings).length>0,e=this.sectionSettings&&Object.keys(this.sectionSettings).length>0;if(!(t||e))return I`
+        <div class="empty-state">
+          <div class="empty-state__icon">🎨</div>
+          <div class="empty-state__title">No Settings Found</div>
+          <div class="empty-state__hint">
+            Theme settings will appear here when available. Make sure your theme-devtools-bridge.liquid 
+            is configured to expose settings data.
+          </div>
+        </div>
+      `;const s=this._filterSettings(this.settings);this._countSettings(this.settings),this._countSettings(s);const i=Object.keys(s||{}).length>0,a=this.validationErrors.length>0;return I`
+      <div class="toolbar">
+        <div class="view-tabs">
+          <button 
+            class="view-tab ${"theme"===this.activeView?"view-tab--active":""}"
+            @click=${()=>this.activeView="theme"}
+          >Theme</button>
+          <button 
+            class="view-tab ${"sections"===this.activeView?"view-tab--active":""}"
+            @click=${()=>this.activeView="sections"}
+          >Sections</button>
+          ${a?I`
+            <button 
+              class="view-tab ${"validation"===this.activeView?"view-tab--active":""}"
+              @click=${()=>this.activeView="validation"}
+              style="color: var(--tdt-danger)"
+            >⚠️ ${this.validationErrors.length}</button>
+          `:""}
+        </div>
+        
+        ${"theme"===this.activeView?I`
+          <input 
+            type="text" 
+            class="search-input" 
+            placeholder="Search settings..."
+            .value=${this.searchQuery}
+            @input=${t=>this.searchQuery=t.target.value}
+          >
+        `:""}
+        
+        <div class="actions">
+          <button class="btn btn--sm" @click=${()=>this._exportSettings()}>📤 Export</button>
+        </div>
+      </div>
+
+      ${a&&"validation"!==this.activeView?I`
+        <div class="validation-banner">
+          <span class="validation-banner__icon">⚠️</span>
+          <span class="validation-banner__text">
+            ${this.validationErrors.length} validation issue${1!==this.validationErrors.length?"s":""} found
+          </span>
+          <button class="validation-banner__btn" @click=${()=>this.activeView="validation"}>
+            View
+          </button>
+        </div>
+      `:""}
+
+      ${"theme"===this.activeView?I`
+        ${i?Object.entries(s).map(([t,e])=>this._renderGroup(t,e)):this.searchQuery?I`<div class="no-results">No settings match "${this.searchQuery}"</div>`:""}
+      `:""}
+
+      ${"sections"===this.activeView?this._renderSectionSettings():""}
+      
+      ${"validation"===this.activeView?this._renderValidationModal():""}
+
+      ${this._renderExportModal()}
+    `}}__publicField(yt,"properties",{settings:{type:Object},sectionSettings:{type:Object},searchQuery:{type:String,state:!0},expandedPaths:{type:Object,state:!0},activeView:{type:String,state:!0},copiedPath:{type:String,state:!0},validationErrors:{type:Array,state:!0}}),__publicField(yt,"styles",[dt,n`
+      :host {
+        display: block;
+        padding: 8px 12px;
+        height: 100%;
+        overflow: auto;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+      }
+
+      .view-tabs {
+        display: flex;
+        background: var(--tdt-bg-secondary);
+        border-radius: var(--tdt-radius);
+        padding: 2px;
+      }
+
+      .view-tab {
+        padding: 4px 12px;
+        font-size: 10px;
+        background: transparent;
+        border: none;
+        color: var(--tdt-text-muted);
+        cursor: pointer;
+        border-radius: 3px;
+        font-family: var(--tdt-font);
+      }
+
+      .view-tab:hover {
+        color: var(--tdt-text);
+      }
+
+      .view-tab--active {
+        background: var(--tdt-accent);
+        color: white;
+      }
+
+      .search-input {
+        flex: 1;
+        min-width: 150px;
+        padding: 6px 10px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        color: var(--tdt-text);
+        font-size: 11px;
+        font-family: var(--tdt-font);
+      }
+
+      .search-input:focus {
+        outline: none;
+        border-color: var(--tdt-accent);
+      }
+
+      .search-input::placeholder {
+        color: var(--tdt-text-muted);
+      }
+
+      .actions {
+        display: flex;
+        gap: 6px;
+        margin-left: auto;
+      }
+
+      .validation-banner {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: rgba(231, 76, 60, 0.1);
+        border: 1px solid rgba(231, 76, 60, 0.3);
+        border-radius: var(--tdt-radius);
+        margin-bottom: 12px;
+        font-size: 11px;
+        color: var(--tdt-danger);
+      }
+
+      .validation-banner__icon {
+        font-size: 14px;
+      }
+
+      .validation-banner__text {
+        flex: 1;
+      }
+
+      .validation-banner__btn {
+        padding: 4px 8px;
+        font-size: 10px;
+        background: transparent;
+        border: 1px solid currentColor;
+        border-radius: 3px;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .validation-banner__btn:hover {
+        background: var(--tdt-danger);
+        color: white;
+      }
+
+      .settings-group {
+        margin-bottom: 16px;
+      }
+
+      .group-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .group-header:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .group-icon {
+        font-size: 14px;
+      }
+
+      .group-name {
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--tdt-text);
+        flex: 1;
+      }
+
+      .group-count {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+        background: var(--tdt-bg);
+        padding: 2px 6px;
+        border-radius: 10px;
+      }
+
+      .expand-icon {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+        transition: transform 0.15s ease;
+      }
+
+      .expand-icon--open {
+        transform: rotate(90deg);
+      }
+
+      .settings-list {
+        margin-top: 4px;
+        margin-left: 12px;
+        border-left: 1px solid var(--tdt-border);
+        padding-left: 12px;
+      }
+
+      .setting-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 8px;
+        border-bottom: 1px solid var(--tdt-border);
+        font-size: 11px;
+      }
+
+      .setting-item:last-child {
+        border-bottom: none;
+      }
+
+      .setting-item:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .setting-item--error {
+        background: rgba(231, 76, 60, 0.05);
+        border-color: rgba(231, 76, 60, 0.2);
+      }
+
+      .setting__key {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 160px;
+        flex-shrink: 0;
+      }
+
+      .setting__id {
+        color: var(--tdt-key);
+        font-family: var(--tdt-font-mono);
+        cursor: pointer;
+        padding: 1px 4px;
+        border-radius: 2px;
+        display: inline-block;
+        width: fit-content;
+      }
+
+      .setting__id:hover {
+        background: rgba(199, 146, 234, 0.2);
+      }
+
+      .setting__id--copied {
+        background: rgba(34, 197, 94, 0.3) !important;
+      }
+
+      .setting__label {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+      }
+
+      .setting__type {
+        font-size: 9px;
+        padding: 2px 5px;
+        border-radius: 3px;
+        text-transform: uppercase;
+        letter-spacing: 0.3px;
+        font-weight: 500;
+        white-space: nowrap;
+        background: var(--tdt-bg);
+        color: var(--tdt-text-muted);
+      }
+
+      .type--color { background: #4a3d2d; color: #e5c07b; }
+      .type--text { background: #2d4a3e; color: #98c379; }
+      .type--textarea, .type--richtext, .type--html { background: #2d4a3e; color: #98c379; }
+      .type--number, .type--range { background: #3d3a2d; color: #d19a66; }
+      .type--checkbox { background: #2d3a4a; color: #61afef; }
+      .type--select, .type--radio { background: #4a2d4a; color: #c678dd; }
+      .type--image_picker, .type--video, .type--video_url { background: #3a3d2d; color: #98c379; }
+      .type--url, .type--link_list { background: #3d2d2d; color: #e06c75; }
+      .type--product, .type--collection, .type--blog, .type--page, .type--article { background: #2d4a4a; color: #56b6c2; }
+      .type--font_picker { background: #3d3d2d; color: #abb2bf; }
+
+      .setting__value {
+        flex: 1;
+        min-width: 0;
+        word-break: break-word;
+      }
+
+      .value--string { color: var(--tdt-string); }
+      .value--number { color: var(--tdt-number); }
+      .value--boolean { color: var(--tdt-boolean); }
+      .value--null { color: var(--tdt-null); font-style: italic; }
+      .value--color {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .color-swatch {
+        width: 16px;
+        height: 16px;
+        border-radius: 3px;
+        border: 1px solid var(--tdt-border);
+        display: inline-block;
+      }
+      .value--image {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .image-preview {
+        width: 32px;
+        height: 32px;
+        object-fit: cover;
+        border-radius: 3px;
+        background: var(--tdt-bg);
+      }
+      .value--truncated {
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .setting__error {
+        color: var(--tdt-danger);
+        font-size: 10px;
+        margin-top: 4px;
+      }
+
+      .section-card {
+        margin-bottom: 8px;
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        overflow: hidden;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: var(--tdt-bg-secondary);
+        cursor: pointer;
+      }
+
+      .section-header:hover {
+        background: var(--tdt-bg-hover);
+      }
+
+      .section-type {
+        font-family: var(--tdt-font-mono);
+        font-size: 11px;
+        color: var(--tdt-accent);
+      }
+
+      .section-id {
+        font-size: 10px;
+        color: var(--tdt-text-muted);
+        font-family: var(--tdt-font-mono);
+      }
+
+      .section-content {
+        padding: 8px 12px;
+        background: var(--tdt-bg);
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: var(--tdt-text-muted);
+      }
+
+      .empty-state__icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .empty-state__title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--tdt-text);
+        margin-bottom: 8px;
+      }
+
+      .empty-state__hint {
+        font-size: 11px;
+        max-width: 300px;
+        margin: 0 auto;
+        line-height: 1.5;
+      }
+
+      .no-results {
+        padding: 20px;
+        text-align: center;
+        color: var(--tdt-text-muted);
+        font-size: 12px;
+      }
+
+      .export-modal {
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+      }
+
+      .modal-content {
+        background: var(--tdt-bg);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        padding: 16px;
+        max-width: 500px;
+        width: 90%;
+        max-height: 80vh;
+        overflow: auto;
+      }
+
+      .modal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+      }
+
+      .modal-title {
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--tdt-text);
+      }
+
+      .modal-close {
+        background: transparent;
+        border: none;
+        color: var(--tdt-text-muted);
+        cursor: pointer;
+        font-size: 18px;
+        padding: 4px;
+      }
+
+      .modal-close:hover {
+        color: var(--tdt-text);
+      }
+
+      .modal-textarea {
+        width: 100%;
+        height: 200px;
+        padding: 12px;
+        background: var(--tdt-bg-secondary);
+        border: 1px solid var(--tdt-border);
+        border-radius: var(--tdt-radius);
+        color: var(--tdt-text);
+        font-family: var(--tdt-font-mono);
+        font-size: 11px;
+        resize: vertical;
+      }
+
+      .modal-textarea:focus {
+        outline: none;
+        border-color: var(--tdt-accent);
+      }
+
+      .modal-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        justify-content: flex-end;
+      }
+
+      .validation-list {
+        margin-top: 8px;
+      }
+
+      .validation-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 8px;
+        background: rgba(231, 76, 60, 0.05);
+        border: 1px solid rgba(231, 76, 60, 0.2);
+        border-radius: var(--tdt-radius);
+        margin-bottom: 6px;
+        font-size: 11px;
+      }
+
+      .validation-item__icon {
+        color: var(--tdt-danger);
+      }
+
+      .validation-item__path {
+        font-family: var(--tdt-font-mono);
+        color: var(--tdt-key);
+      }
+
+      .validation-item__message {
+        color: var(--tdt-text-muted);
+      }
+    `]),customElements.define("tdt-settings-panel",yt);class _t extends rt{constructor(){super(),this.isCollapsed=!1,this.activeTab="objects",this.context=null,this.cart=null,this._unsubscribeCart=null}connectedCallback(){super.connectedCallback(),this._init(),this._bindKeyboard(),this._restoreState()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeCart&&this._unsubscribeCart(),ht.stopPolling(),ut.destroy(),document.removeEventListener("keydown",this._handleKeydown)}_init(){this.context=ct.parse(),this.context?(ht.interceptAjax(),ht.startPolling(3e3),ht.fetch().then(t=>{t&&ht.setCart(t)}),this._unsubscribeCart=ht.subscribe(t=>{this.cart=t}),ut.init()):console.warn("[Theme Devtools] No context available")}_bindKeyboard(){this._handleKeydown=t=>{(t.metaKey||t.ctrlKey)&&t.shiftKey&&"D"===t.key&&(t.preventDefault(),this._toggleCollapse())},document.addEventListener("keydown",this._handleKeydown)}_restoreState(){"true"===localStorage.getItem("theme-devtools-collapsed")&&(this.isCollapsed=!0)}_toggleCollapse(){this.isCollapsed=!this.isCollapsed,localStorage.setItem("theme-devtools-collapsed",this.isCollapsed)}_setTab(t){this.activeTab=t}_close(){this.remove()}_formatMoney(t){return null==t?"—":`$${(t/100).toFixed(2)}`}render(){var t,e,s,i,a,o,n,r;if(!this.context)return I``;const{meta:l,objects:d,metafields:c,settings:p,sectionSettings:h}=this.context;return I`
+      <div class="dock ${this.isCollapsed?"dock--collapsed":""}">
+        <div class="dock__handle" @click=${this._toggleCollapse}>
+          <div class="dock__title">Theme Devtools</div>
+          <div class="dock__controls">
+            <button class="dock__btn" @click=${t=>{t.stopPropagation(),this._toggleCollapse()}}>
+              ${this.isCollapsed?"▲":"▼"}
+            </button>
+            <button class="dock__btn" @click=${t=>{t.stopPropagation(),this._close()}}>×</button>
+          </div>
+        </div>
+
+        <div class="header">
+          <span class="badge badge--${(null==(t=l.theme)?void 0:t.role)||"unknown"}">
+            ${(null==(e=l.theme)?void 0:e.role)||"Unknown"}
+          </span>
+          <span class="header__template">
+            ${(null==(s=l.template)?void 0:s.name)||"Unknown"}${(null==(i=l.template)?void 0:i.suffix)?`.${l.template.suffix}`:""}
+          </span>
+          <span class="header__page-type">${(null==(a=l.request)?void 0:a.page_type)||"—"}</span>
+          ${(null==(o=l.request)?void 0:o.design_mode)?I`<span class="badge badge--design">Design Mode</span>`:""}
+          <span class="header__cart">
+            🛒 ${(null==(n=this.cart)?void 0:n.item_count)||0} items • ${this._formatMoney(null==(r=this.cart)?void 0:r.total_price)}
+          </span>
+        </div>
+
+        <div class="tabs">
+          ${[{id:"objects",label:"Objects",icon:"📦"},{id:"metafields",label:"Metafields",icon:"🏷️"},{id:"settings",label:"Settings",icon:"🎨"},{id:"sections",label:"Sections",icon:"📐"},{id:"cart",label:"Cart",icon:"🛒"},{id:"info",label:"Info",icon:"ℹ️"}].map(t=>I`
+            <button 
+              class="tab ${this.activeTab===t.id?"tab--active":""}"
+              @click=${()=>this._setTab(t.id)}
+            >
+              ${t.icon} ${t.label}
+            </button>
+          `)}
+        </div>
+
+        <div class="content">
+          <tdt-objects-panel 
+            class="panel ${"objects"===this.activeTab?"panel--active":""}"
+            .objects=${d}
+          ></tdt-objects-panel>
+          
+          <tdt-metafields-panel 
+            class="panel ${"metafields"===this.activeTab?"panel--active":""}"
+            .metafields=${c}
+          ></tdt-metafields-panel>
+          
+          <tdt-settings-panel 
+            class="panel ${"settings"===this.activeTab?"panel--active":""}"
+            .settings=${p}
+            .sectionSettings=${h}
+          ></tdt-settings-panel>
+          
+          <tdt-sections-panel 
+            class="panel ${"sections"===this.activeTab?"panel--active":""}"
+          ></tdt-sections-panel>
+          
+          <tdt-cart-panel 
+            class="panel ${"cart"===this.activeTab?"panel--active":""}"
+            .cart=${this.cart}
+          ></tdt-cart-panel>
+          
+          <tdt-info-panel 
+            class="panel ${"info"===this.activeTab?"panel--active":""}"
+            .meta=${l}
+          ></tdt-info-panel>
+        </div>
+      </div>
+    `}}__publicField(_t,"properties",{isCollapsed:{type:Boolean,state:!0},activeTab:{type:String,state:!0},context:{type:Object,state:!0},cart:{type:Object,state:!0}}),__publicField(_t,"styles",[dt,n`
+      .dock {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60vh;
+        background: var(--tdt-bg);
+        border-top: 1px solid var(--tdt-border);
+        display: flex;
+        flex-direction: column;
+        z-index: 2147483647;
+        transition: transform 0.2s ease;
+      }
+
+      .dock--collapsed {
+        transform: translateY(calc(100% - 32px));
+      }
+
+      .dock__handle {
+        height: 32px;
+        background: var(--tdt-bg-secondary);
+        border-bottom: 1px solid var(--tdt-border);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 12px;
+        cursor: pointer;
+        user-select: none;
+        flex-shrink: 0;
+      }
+
+      .dock__title {
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--tdt-text-muted);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .dock__title::before {
+        content: '◆';
+        color: var(--tdt-accent);
+      }
+
+      .dock__controls {
+        display: flex;
+        gap: 8px;
+      }
+
+      .dock__btn {
+        background: transparent;
+        border: none;
+        color: var(--tdt-text-muted);
+        cursor: pointer;
+        padding: 4px 8px;
+        font-size: 14px;
+        border-radius: var(--tdt-radius);
+      }
+
+      .dock__btn:hover {
+        background: var(--tdt-bg-hover);
+        color: var(--tdt-text);
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 12px;
+        background: var(--tdt-bg-secondary);
+        border-bottom: 1px solid var(--tdt-border);
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+
+      .header__template {
+        font-weight: 600;
+        color: var(--tdt-text);
+      }
+
+      .header__page-type {
+        color: var(--tdt-text-muted);
+      }
+
+      .header__cart {
+        margin-left: auto;
+        color: var(--tdt-text-muted);
+        font-size: 11px;
+      }
+
+      .tabs {
+        display: flex;
+        background: var(--tdt-bg-secondary);
+        border-bottom: 1px solid var(--tdt-border);
+        flex-shrink: 0;
+      }
+
+      .tab {
+        background: transparent;
+        border: none;
+        color: var(--tdt-text-muted);
+        padding: 8px 16px;
+        font-size: 11px;
+        font-family: var(--tdt-font);
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+        transition: all 0.15s ease;
+      }
+
+      .tab:hover {
+        color: var(--tdt-text);
+        background: var(--tdt-bg-hover);
+      }
+
+      .tab--active {
+        color: var(--tdt-accent);
+        border-bottom-color: var(--tdt-accent);
+      }
+
+      .content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+      }
+
+      .panel {
+        flex: 1;
+        overflow: auto;
+        display: none;
+      }
+
+      .panel--active {
+        display: block;
+      }
+    `]),customElements.define("theme-devtools",_t);function $t(){const t=document.getElementById("__THEME_DEVTOOLS_ROOT__");if(!t)return void console.warn("[Theme Devtools] Root element not found");const e=document.createElement("theme-devtools");t.appendChild(e),window.__THEME_DEVTOOLS__=e}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",$t):$t()}();