shopify-theme-devtools 1.1.0 â 1.1.2
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.
- package/README.md +25 -145
- package/dist/theme-devtools.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,174 +1,54 @@
|
|
|
1
1
|
# Shopify Theme Devtools
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
|
|
6
|
-
In-browser devtools panel for Shopify theme development. Inspect Liquid context, metafields, theme settings, cart state, and sections while working on storefront previews.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Features
|
|
11
|
-
|
|
12
|
-
- đĻ **Object Inspector** â Tree-based viewer for Liquid objects (`cart`, `product`, `customer`, `shop`, etc.)
|
|
13
|
-
- đˇī¸ **Metafields Explorer** â Browse product, collection, shop metafields with type indicators
|
|
14
|
-
- đ¨ **Theme Settings** â View all theme settings organized by group with validation
|
|
15
|
-
- đ **Section Highlighter** â List all sections, click to highlight and scroll into view
|
|
16
|
-
- đ **Cart Toolkit** â Live cart state, change tracking, diff visualization, and actions
|
|
17
|
-
- đ **Copy as Liquid** â Click any property to copy its Liquid access path
|
|
18
|
-
- â¨ī¸ **Keyboard Shortcut** â `Cmd+Shift+D` to toggle panel
|
|
3
|
+
In-browser devtools panel for Shopify theme development. Inspect Liquid context, metafields, theme settings, cart state, and sections.
|
|
19
4
|
|
|
20
5
|
## Installation
|
|
21
6
|
|
|
22
|
-
### Option 1: npm + CDN (Recommended)
|
|
23
|
-
|
|
24
7
|
```bash
|
|
25
8
|
npm install shopify-theme-devtools
|
|
26
9
|
```
|
|
27
10
|
|
|
28
|
-
|
|
29
|
-
- jsDelivr: `https://cdn.jsdelivr.net/npm/shopify-theme-devtools@latest/dist/theme-devtools.js`
|
|
30
|
-
- unpkg: `https://unpkg.com/shopify-theme-devtools@latest/dist/theme-devtools.js`
|
|
31
|
-
|
|
32
|
-
### Option 2: Manual Download
|
|
33
|
-
|
|
34
|
-
Download the latest release from [GitHub Releases](https://github.com/yourusername/shopify-theme-devtools/releases) and upload to your CDN.
|
|
35
|
-
|
|
36
|
-
## Setup in Shopify Theme
|
|
37
|
-
|
|
38
|
-
### 1. Add the Liquid Snippet
|
|
39
|
-
|
|
40
|
-
Copy the snippet to your theme's `snippets/` folder:
|
|
41
|
-
|
|
42
|
-
```bash
|
|
43
|
-
# From npm package
|
|
44
|
-
cp node_modules/shopify-theme-devtools/src/liquid/theme-devtools-bridge.liquid snippets/
|
|
45
|
-
```
|
|
11
|
+
## Setup
|
|
46
12
|
|
|
47
|
-
|
|
13
|
+
1. Copy `src/liquid/theme-devtools-bridge.liquid` to your theme's `snippets/` folder
|
|
48
14
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
Edit `snippets/theme-devtools-bridge.liquid`:
|
|
52
|
-
|
|
53
|
-
```liquid
|
|
54
|
-
{%- assign devtools_local = false -%} {# Set to true for local development #}
|
|
55
|
-
{%- assign devtools_cdn_base = 'https://cdn.jsdelivr.net/npm/shopify-theme-devtools@latest/dist' -%}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
**Optional:** Configure metafield namespaces and theme settings to expose:
|
|
59
|
-
|
|
60
|
-
```liquid
|
|
61
|
-
{%- assign devtools_metafield_namespaces = 'custom,global,my_fields' | split: ',' -%}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
### 3. Render in Theme
|
|
65
|
-
|
|
66
|
-
Add to `layout/theme.liquid` before `</body>`:
|
|
15
|
+
2. Add to `layout/theme.liquid` before `</body>`:
|
|
67
16
|
|
|
68
17
|
```liquid
|
|
69
18
|
{% render 'theme-devtools-bridge' %}
|
|
70
19
|
```
|
|
71
20
|
|
|
72
|
-
|
|
21
|
+
Only renders on development/preview themes, safe to leave in production.
|
|
73
22
|
|
|
74
23
|
## Usage
|
|
75
24
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
`Cmd+Shift+D` (Mac) / `Ctrl+Shift+D` (Windows) â Toggle panel visibility
|
|
79
|
-
|
|
80
|
-
### Tabs
|
|
25
|
+
Toggle panel: `Cmd+Shift+D` (Mac) / `Ctrl+Shift+D` (Windows)
|
|
81
26
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
27
|
+
**Panels:**
|
|
28
|
+
- **Objects** â Inspect Liquid objects (shop, product, collection, customer, etc.)
|
|
29
|
+
- **Metafields** â Browse metafields by resource
|
|
30
|
+
- **Settings** â View theme and section settings
|
|
31
|
+
- **Sections** â List and highlight rendered sections
|
|
32
|
+
- **Cart** â Live cart state with actions
|
|
33
|
+
- **Info** â Theme, template, and request info
|
|
34
|
+
- **Analytics** â View analytics and tracking data
|
|
35
|
+
- **Apps** â Installed apps information
|
|
36
|
+
- **Cookies** â Browser cookies inspector
|
|
37
|
+
- **Storage** â LocalStorage and SessionStorage viewer
|
|
38
|
+
- **Localization** â Markets, currencies, and languages
|
|
39
|
+
- **SEO** â Meta tags and SEO information
|
|
40
|
+
- **Console** â Liquid debug console
|
|
90
41
|
|
|
91
|
-
|
|
42
|
+
Click any property to copy its Liquid path.
|
|
92
43
|
|
|
93
|
-
|
|
94
|
-
- Object property â `{{ product.title }}`
|
|
95
|
-
- Metafield â `{{ product.metafields.custom.sizing_chart }}`
|
|
96
|
-
- Setting â `{{ settings.colors_accent_1 }}`
|
|
97
|
-
|
|
98
|
-
## Local Development
|
|
99
|
-
|
|
100
|
-
### Prerequisites
|
|
101
|
-
|
|
102
|
-
- Node.js 18+
|
|
103
|
-
- npm
|
|
104
|
-
|
|
105
|
-
### Setup
|
|
44
|
+
## Development
|
|
106
45
|
|
|
107
46
|
```bash
|
|
108
|
-
git clone https://github.com/yourusername/shopify-theme-devtools.git
|
|
109
|
-
cd shopify-theme-devtools
|
|
110
47
|
npm install
|
|
48
|
+
npm run dev # Dev server at localhost:9999
|
|
49
|
+
npm run build # Production build
|
|
111
50
|
```
|
|
112
51
|
|
|
113
|
-
### Commands
|
|
114
|
-
|
|
115
|
-
```bash
|
|
116
|
-
# Development server with HMR (http://localhost:9999)
|
|
117
|
-
npm run dev
|
|
118
|
-
|
|
119
|
-
# Production build
|
|
120
|
-
npm run build
|
|
121
|
-
|
|
122
|
-
# Preview production build
|
|
123
|
-
npm run preview
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Local Development Workflow
|
|
127
|
-
|
|
128
|
-
1. Run `npm run dev` to start Vite dev server
|
|
129
|
-
2. Set `devtools_local = true` in your theme's snippet
|
|
130
|
-
3. Run `shopify theme dev` in your theme directory
|
|
131
|
-
4. Changes to JS files hot-reload automatically
|
|
132
|
-
|
|
133
|
-
## Project Structure
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
src/
|
|
137
|
-
âââ scripts/
|
|
138
|
-
â âââ components/ # Lit web components
|
|
139
|
-
â â âââ panels/ # Panel components (objects, metafields, settings, etc.)
|
|
140
|
-
â â âââ object-inspector.js
|
|
141
|
-
â â âââ theme-devtools.js
|
|
142
|
-
â âââ services/ # Context parser, Cart API, Section highlighter
|
|
143
|
-
â âââ main.js # Entry point
|
|
144
|
-
âââ styles/
|
|
145
|
-
â âââ main.css
|
|
146
|
-
âââ liquid/
|
|
147
|
-
âââ theme-devtools-bridge.liquid
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
## Technical Details
|
|
151
|
-
|
|
152
|
-
- **Lit Web Components** â Modern, reactive UI components
|
|
153
|
-
- **Shadow DOM** â Isolates devtools CSS from theme styles
|
|
154
|
-
- **Cart Tracking** â Ajax interception + polling fallback
|
|
155
|
-
- **Section Detection** â `[id^="shopify-section-"]` + `[data-section-id]`
|
|
156
|
-
- **~50KB** â Minified bundle size
|
|
157
|
-
|
|
158
|
-
## Browser Support
|
|
159
|
-
|
|
160
|
-
Chrome 80+, Firefox 78+, Safari 14+, Edge 80+
|
|
161
|
-
|
|
162
|
-
## Contributing
|
|
163
|
-
|
|
164
|
-
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
165
|
-
|
|
166
52
|
## License
|
|
167
53
|
|
|
168
|
-
[MIT](LICENSE)
|
|
169
|
-
|
|
170
|
-
## Related
|
|
171
|
-
|
|
172
|
-
- [Shopify Theme Development](https://shopify.dev/themes)
|
|
173
|
-
- [Liquid Reference](https://shopify.dev/docs/api/liquid)
|
|
174
|
-
- [Theme Check](https://github.com/Shopify/theme-check)
|
|
54
|
+
[MIT](LICENSE)
|
package/dist/theme-devtools.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __defProp=Object.defineProperty,__defNormalProp=(t,e,a)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a,__publicField=(t,e,a)=>__defNormalProp(t,"symbol"!=typeof e?e+"":e,a);!function(){"use strict";var t;const e=globalThis,a=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),s=new WeakMap;let o=class{constructor(t,e,a){if(this._$cssResult$=!0,a!==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(a&&void 0===t){const a=void 0!==e&&1===e.length;a&&(t=s.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),a&&s.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const a=1===t.length?t[0]:e.reduce((e,a,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.")})(a)+t[i+1],t[0]);return new o(a,t,i)},n=a?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const a of t.cssRules)e+=a.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:u,getPrototypeOf:h}=Object,v=globalThis,g=v.trustedTypes,m=g?g.emptyScript:"",b=v.reactiveElementPolyfillSupport,f=(t,e)=>t,_={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let a=t;switch(e){case Boolean:a=null!==t;break;case Number:a=null===t?null:Number(t);break;case Object:case Array:try{a=JSON.parse(t)}catch(i){a=null}}return a}},x=(t,e)=>!l(t,e),y={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:x};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=y){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 a=Symbol(),i=this.getPropertyDescriptor(t,a,e);void 0!==i&&d(this.prototype,t,i)}}static getPropertyDescriptor(t,e,a){const{get:i,set:s}=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==s||s.call(this,e),this.requestUpdate(t,o,a)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(f("elementProperties")))return;const t=h(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),...u(t)];for(const a of e)this.createProperty(a,t[a])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,a]of e)this.elementProperties.set(t,a)}this._$Eh=new Map;for(const[e,a]of this.elementProperties){const t=this._$Eu(e,a);void 0!==t&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const a=new Set(t.flat(1/0).reverse());for(const t of a)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const a=e.attribute;return!1===a?void 0:"string"==typeof a?a:"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 a of e.keys())this.hasOwnProperty(a)&&(t.set(a,this[a]),delete this[a]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(a)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const a of i){const i=document.createElement("style"),s=e.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=a.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,a){this._$AK(t,a)}_$ET(t,e){var a;const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const o=(void 0!==(null==(a=i.converter)?void 0:a.toAttribute)?i.converter:_).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(s):this.setAttribute(s,o),this._$Em=null}}_$AK(t,e){var a,i;const s=this.constructor,o=s._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=s.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null==(a=t.converter)?void 0:a.fromAttribute)?t.converter:_;this._$Em=o;const n=r.fromAttribute(e,t.type);this[o]=n??(null==(i=this._$Ej)?void 0:i.get(o))??n,this._$Em=null}}requestUpdate(t,e,a,i=!1,s){var o;if(void 0!==t){const r=this.constructor;if(!1===i&&(s=this[t]),a??(a=r.getPropertyOptions(t)),!((a.hasChanged??x)(s,e)||a.useDefault&&a.reflect&&s===(null==(o=this._$Ej)?void 0:o.get(t))&&!this.hasAttribute(r._$Eu(t,a))))return;this.C(t,e,a)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:a,reflect:i,wrapped:s},o){a&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==s||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||a||(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,a]of t){const{wrapped:t}=a,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,a,i)}}let e=!1;const a=this._$AL;try{e=this.shouldUpdate(a),e?(this.willUpdate(a),null==(t=this._$EO)||t.forEach(t=>{var e;return null==(e=t.hostUpdate)?void 0:e.call(t)}),this.update(a)):this._$EM()}catch(i){throw e=!1,this._$EM(),i}e&&this._$AE(a)}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==b||b({ReactiveElement:$}),(v.reactiveElementVersions??(v.reactiveElementVersions=[])).push("2.1.2");const w=globalThis,k=t=>t,S=w.trustedTypes,C=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,T="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,E="?"+A,z=`<${E}>`,L=document,j=()=>L.createComment(""),O=t=>null===t||"object"!=typeof t&&"function"!=typeof t,P=Array.isArray,I="[ \t\n\f\r]",N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,F=/-->/g,q=/>/g,D=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),M=/'/g,R=/"/g,U=/^(?:script|style|textarea|title)$/i,B=(K=1,(t,...e)=>({_$litType$:K,strings:t,values:e})),H=Symbol.for("lit-noChange"),V=Symbol.for("lit-nothing"),G=new WeakMap,J=L.createTreeWalker(L,129);var K;function Q(t,e){if(!P(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==C?C.createHTML(e):e}class W{constructor({strings:t,_$litType$:e},a){let i;this.parts=[];let s=0,o=0;const r=t.length-1,n=this.parts,[l,d]=((t,e)=>{const a=t.length-1,i=[];let s,o=2===e?"<svg>":3===e?"<math>":"",r=N;for(let n=0;n<a;n++){const e=t[n];let a,l,d=-1,c=0;for(;c<e.length&&(r.lastIndex=c,l=r.exec(e),null!==l);)c=r.lastIndex,r===N?"!--"===l[1]?r=F:void 0!==l[1]?r=q:void 0!==l[2]?(U.test(l[2])&&(s=RegExp("</"+l[2],"g")),r=D):void 0!==l[3]&&(r=D):r===D?">"===l[0]?(r=s??N,d=-1):void 0===l[1]?d=-2:(d=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?D:'"'===l[3]?R:M):r===R||r===M?r=D:r===F||r===q?r=N:(r=D,s=void 0);const p=r===D&&t[n+1].startsWith("/>")?" ":"";o+=r===N?e+z:d>=0?(i.push(a),e.slice(0,d)+T+e.slice(d)+A+p):e+A+(-2===d?n:p)}return[Q(t,o+(t[a]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=W.createElement(l,a),J.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=J.nextNode())&&n.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(T)){const e=d[o++],a=i.getAttribute(t).split(A),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:s,name:r[2],strings:a,ctor:"."===r[1]?et:"?"===r[1]?at:"@"===r[1]?it:tt}),i.removeAttribute(t)}else t.startsWith(A)&&(n.push({type:6,index:s}),i.removeAttribute(t));if(U.test(i.tagName)){const t=i.textContent.split(A),e=t.length-1;if(e>0){i.textContent=S?S.emptyScript:"";for(let a=0;a<e;a++)i.append(t[a],j()),J.nextNode(),n.push({type:2,index:++s});i.append(t[e],j())}}}else if(8===i.nodeType)if(i.data===E)n.push({type:2,index:s});else{let t=-1;for(;-1!==(t=i.data.indexOf(A,t+1));)n.push({type:7,index:s}),t+=A.length-1}s++}}static createElement(t,e){const a=L.createElement("template");return a.innerHTML=t,a}}function Y(t,e,a=t,i){var s,o;if(e===H)return e;let r=void 0!==i?null==(s=a._$Co)?void 0:s[i]:a._$Cl;const n=O(e)?void 0:e._$litDirective$;return(null==r?void 0:r.constructor)!==n&&(null==(o=null==r?void 0:r._$AO)||o.call(r,!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,a,i)),void 0!==i?(a._$Co??(a._$Co=[]))[i]=r:a._$Cl=r),void 0!==r&&(e=Y(t,r._$AS(t,e.values),r,i)),e}class X{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:a}=this._$AD,i=((null==t?void 0:t.creationScope)??L).importNode(e,!0);J.currentNode=i;let s=J.nextNode(),o=0,r=0,n=a[0];for(;void 0!==n;){if(o===n.index){let e;2===n.type?e=new Z(s,s.nextSibling,this,t):1===n.type?e=new n.ctor(s,n.name,n.strings,this,t):6===n.type&&(e=new st(s,this,t)),this._$AV.push(e),n=a[++r]}o!==(null==n?void 0:n.index)&&(s=J.nextNode(),o++)}return J.currentNode=L,i}p(t){let e=0;for(const a of this._$AV)void 0!==a&&(void 0!==a.strings?(a._$AI(t,a,e),e+=a.strings.length-2):a._$AI(t[e])),e++}}class Z{get _$AU(){var t;return(null==(t=this._$AM)?void 0:t._$AU)??this._$Cv}constructor(t,e,a,i){this.type=2,this._$AH=V,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=a,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=Y(this,t,e),O(t)?t===V||null==t||""===t?(this._$AH!==V&&this._$AR(),this._$AH=V):t!==this._$AH&&t!==H&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>P(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!==V&&O(this._$AH)?this._$AA.nextSibling.data=t:this.T(L.createTextNode(t)),this._$AH=t}$(t){var e;const{values:a,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=W.createElement(Q(i.h,i.h[0]),this.options)),i);if((null==(e=this._$AH)?void 0:e._$AD)===s)this._$AH.p(a);else{const t=new X(s,this),e=t.u(this.options);t.p(a),this.T(e),this._$AH=t}}_$AC(t){let e=G.get(t.strings);return void 0===e&&G.set(t.strings,e=new W(t)),e}k(t){P(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let a,i=0;for(const s of t)i===e.length?e.push(a=new Z(this.O(j()),this.O(j()),this,this.options)):a=e[i],a._$AI(s),i++;i<e.length&&(this._$AR(a&&a._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var a;for(null==(a=this._$AP)||a.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,a,i,s){this.type=1,this._$AH=V,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=s,a.length>2||""!==a[0]||""!==a[1]?(this._$AH=Array(a.length-1).fill(new String),this.strings=a):this._$AH=V}_$AI(t,e=this,a,i){const s=this.strings;let o=!1;if(void 0===s)t=Y(this,t,e,0),o=!O(t)||t!==this._$AH&&t!==H,o&&(this._$AH=t);else{const i=t;let r,n;for(t=s[0],r=0;r<s.length-1;r++)n=Y(this,i[a+r],e,r),n===H&&(n=this._$AH[r]),o||(o=!O(n)||n!==this._$AH[r]),n===V?t=V:t!==V&&(t+=(n??"")+s[r+1]),this._$AH[r]=n}o&&!i&&this.j(t)}j(t){t===V?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===V?void 0:t}}class at extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==V)}}class it extends tt{constructor(t,e,a,i,s){super(t,e,a,i,s),this.type=5}_$AI(t,e=this){if((t=Y(this,t,e,0)??V)===H)return;const a=this._$AH,i=t===V&&a!==V||t.capture!==a.capture||t.once!==a.once||t.passive!==a.passive,s=t!==V&&(a===V||i);i&&this.element.removeEventListener(this.name,this,a),s&&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 st{constructor(t,e,a){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=a}get _$AU(){return this._$AM._$AU}_$AI(t){Y(this,t)}}const ot=w.litHtmlPolyfillSupport;null==ot||ot(W,Z),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.3.2");const rt=globalThis;class nt 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,a)=>{const i=(null==a?void 0:a.renderBefore)??e;let s=i._$litPart$;if(void 0===s){const t=(null==a?void 0:a.renderBefore)??null;i._$litPart$=s=new Z(e.insertBefore(j(),t),t,void 0,a??{})}return s._$AI(t),s})(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 H}}nt._$litElement$=!0,nt.finalized=!0,null==(t=rt.litElementHydrateSupport)||t.call(rt,{LitElement:nt});const lt=rt.litElementPolyfillSupport;null==lt||lt({LitElement:nt}),(rt.litElementVersions??(rt.litElementVersions=[])).push("4.2.2");const dt=r`
|
|
1
|
+
var __defProp=Object.defineProperty,__defNormalProp=(t,e,a)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a,__publicField=(t,e,a)=>__defNormalProp(t,"symbol"!=typeof e?e+"":e,a);!function(){"use strict";var t;const e=globalThis,a=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),s=new WeakMap;let o=class{constructor(t,e,a){if(this._$cssResult$=!0,a!==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(a&&void 0===t){const a=void 0!==e&&1===e.length;a&&(t=s.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),a&&s.set(e,t))}return t}toString(){return this.cssText}};const r=(t,...e)=>{const a=1===t.length?t[0]:e.reduce((e,a,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.")})(a)+t[i+1],t[0]);return new o(a,t,i)},n=a?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const a of t.cssRules)e+=a.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:u,getPrototypeOf:h}=Object,v=globalThis,g=v.trustedTypes,m=g?g.emptyScript:"",b=v.reactiveElementPolyfillSupport,f=(t,e)=>t,_={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let a=t;switch(e){case Boolean:a=null!==t;break;case Number:a=null===t?null:Number(t);break;case Object:case Array:try{a=JSON.parse(t)}catch(i){a=null}}return a}},x=(t,e)=>!l(t,e),y={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:x};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=y){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 a=Symbol(),i=this.getPropertyDescriptor(t,a,e);void 0!==i&&d(this.prototype,t,i)}}static getPropertyDescriptor(t,e,a){const{get:i,set:s}=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==s||s.call(this,e),this.requestUpdate(t,o,a)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(f("elementProperties")))return;const t=h(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),...u(t)];for(const a of e)this.createProperty(a,t[a])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,a]of e)this.elementProperties.set(t,a)}this._$Eh=new Map;for(const[e,a]of this.elementProperties){const t=this._$Eu(e,a);void 0!==t&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const a=new Set(t.flat(1/0).reverse());for(const t of a)e.unshift(n(t))}else void 0!==t&&e.push(n(t));return e}static _$Eu(t,e){const a=e.attribute;return!1===a?void 0:"string"==typeof a?a:"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 a of e.keys())this.hasOwnProperty(a)&&(t.set(a,this[a]),delete this[a]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,i)=>{if(a)t.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const a of i){const i=document.createElement("style"),s=e.litNonce;void 0!==s&&i.setAttribute("nonce",s),i.textContent=a.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,a){this._$AK(t,a)}_$ET(t,e){var a;const i=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,i);if(void 0!==s&&!0===i.reflect){const o=(void 0!==(null==(a=i.converter)?void 0:a.toAttribute)?i.converter:_).toAttribute(e,i.type);this._$Em=t,null==o?this.removeAttribute(s):this.setAttribute(s,o),this._$Em=null}}_$AK(t,e){var a,i;const s=this.constructor,o=s._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=s.getPropertyOptions(o),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null==(a=t.converter)?void 0:a.fromAttribute)?t.converter:_;this._$Em=o;const n=r.fromAttribute(e,t.type);this[o]=n??(null==(i=this._$Ej)?void 0:i.get(o))??n,this._$Em=null}}requestUpdate(t,e,a,i=!1,s){var o;if(void 0!==t){const r=this.constructor;if(!1===i&&(s=this[t]),a??(a=r.getPropertyOptions(t)),!((a.hasChanged??x)(s,e)||a.useDefault&&a.reflect&&s===(null==(o=this._$Ej)?void 0:o.get(t))&&!this.hasAttribute(r._$Eu(t,a))))return;this.C(t,e,a)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:a,reflect:i,wrapped:s},o){a&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,o??e??this[t]),!0!==s||void 0!==o)||(this._$AL.has(t)||(this.hasUpdated||a||(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,a]of t){const{wrapped:t}=a,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,a,i)}}let e=!1;const a=this._$AL;try{e=this.shouldUpdate(a),e?(this.willUpdate(a),null==(t=this._$EO)||t.forEach(t=>{var e;return null==(e=t.hostUpdate)?void 0:e.call(t)}),this.update(a)):this._$EM()}catch(i){throw e=!1,this._$EM(),i}e&&this._$AE(a)}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==b||b({ReactiveElement:$}),(v.reactiveElementVersions??(v.reactiveElementVersions=[])).push("2.1.2");const w=globalThis,k=t=>t,S=w.trustedTypes,C=S?S.createPolicy("lit-html",{createHTML:t=>t}):void 0,T="$lit$",A=`lit$${Math.random().toFixed(9).slice(2)}$`,E="?"+A,z=`<${E}>`,L=document,j=()=>L.createComment(""),O=t=>null===t||"object"!=typeof t&&"function"!=typeof t,P=Array.isArray,I="[ \t\n\f\r]",N=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,F=/-->/g,q=/>/g,D=RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),M=/'/g,R=/"/g,U=/^(?:script|style|textarea|title)$/i,B=(K=1,(t,...e)=>({_$litType$:K,strings:t,values:e})),V=Symbol.for("lit-noChange"),H=Symbol.for("lit-nothing"),G=new WeakMap,J=L.createTreeWalker(L,129);var K;function Q(t,e){if(!P(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==C?C.createHTML(e):e}class W{constructor({strings:t,_$litType$:e},a){let i;this.parts=[];let s=0,o=0;const r=t.length-1,n=this.parts,[l,d]=((t,e)=>{const a=t.length-1,i=[];let s,o=2===e?"<svg>":3===e?"<math>":"",r=N;for(let n=0;n<a;n++){const e=t[n];let a,l,d=-1,c=0;for(;c<e.length&&(r.lastIndex=c,l=r.exec(e),null!==l);)c=r.lastIndex,r===N?"!--"===l[1]?r=F:void 0!==l[1]?r=q:void 0!==l[2]?(U.test(l[2])&&(s=RegExp("</"+l[2],"g")),r=D):void 0!==l[3]&&(r=D):r===D?">"===l[0]?(r=s??N,d=-1):void 0===l[1]?d=-2:(d=r.lastIndex-l[2].length,a=l[1],r=void 0===l[3]?D:'"'===l[3]?R:M):r===R||r===M?r=D:r===F||r===q?r=N:(r=D,s=void 0);const p=r===D&&t[n+1].startsWith("/>")?" ":"";o+=r===N?e+z:d>=0?(i.push(a),e.slice(0,d)+T+e.slice(d)+A+p):e+A+(-2===d?n:p)}return[Q(t,o+(t[a]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]})(t,e);if(this.el=W.createElement(l,a),J.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=J.nextNode())&&n.length<r;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(T)){const e=d[o++],a=i.getAttribute(t).split(A),r=/([.?@])?(.*)/.exec(e);n.push({type:1,index:s,name:r[2],strings:a,ctor:"."===r[1]?et:"?"===r[1]?at:"@"===r[1]?it:tt}),i.removeAttribute(t)}else t.startsWith(A)&&(n.push({type:6,index:s}),i.removeAttribute(t));if(U.test(i.tagName)){const t=i.textContent.split(A),e=t.length-1;if(e>0){i.textContent=S?S.emptyScript:"";for(let a=0;a<e;a++)i.append(t[a],j()),J.nextNode(),n.push({type:2,index:++s});i.append(t[e],j())}}}else if(8===i.nodeType)if(i.data===E)n.push({type:2,index:s});else{let t=-1;for(;-1!==(t=i.data.indexOf(A,t+1));)n.push({type:7,index:s}),t+=A.length-1}s++}}static createElement(t,e){const a=L.createElement("template");return a.innerHTML=t,a}}function Y(t,e,a=t,i){var s,o;if(e===V)return e;let r=void 0!==i?null==(s=a._$Co)?void 0:s[i]:a._$Cl;const n=O(e)?void 0:e._$litDirective$;return(null==r?void 0:r.constructor)!==n&&(null==(o=null==r?void 0:r._$AO)||o.call(r,!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,a,i)),void 0!==i?(a._$Co??(a._$Co=[]))[i]=r:a._$Cl=r),void 0!==r&&(e=Y(t,r._$AS(t,e.values),r,i)),e}class X{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:a}=this._$AD,i=((null==t?void 0:t.creationScope)??L).importNode(e,!0);J.currentNode=i;let s=J.nextNode(),o=0,r=0,n=a[0];for(;void 0!==n;){if(o===n.index){let e;2===n.type?e=new Z(s,s.nextSibling,this,t):1===n.type?e=new n.ctor(s,n.name,n.strings,this,t):6===n.type&&(e=new st(s,this,t)),this._$AV.push(e),n=a[++r]}o!==(null==n?void 0:n.index)&&(s=J.nextNode(),o++)}return J.currentNode=L,i}p(t){let e=0;for(const a of this._$AV)void 0!==a&&(void 0!==a.strings?(a._$AI(t,a,e),e+=a.strings.length-2):a._$AI(t[e])),e++}}class Z{get _$AU(){var t;return(null==(t=this._$AM)?void 0:t._$AU)??this._$Cv}constructor(t,e,a,i){this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=a,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=Y(this,t,e),O(t)?t===H||null==t||""===t?(this._$AH!==H&&this._$AR(),this._$AH=H):t!==this._$AH&&t!==V&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>P(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!==H&&O(this._$AH)?this._$AA.nextSibling.data=t:this.T(L.createTextNode(t)),this._$AH=t}$(t){var e;const{values:a,_$litType$:i}=t,s="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=W.createElement(Q(i.h,i.h[0]),this.options)),i);if((null==(e=this._$AH)?void 0:e._$AD)===s)this._$AH.p(a);else{const t=new X(s,this),e=t.u(this.options);t.p(a),this.T(e),this._$AH=t}}_$AC(t){let e=G.get(t.strings);return void 0===e&&G.set(t.strings,e=new W(t)),e}k(t){P(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let a,i=0;for(const s of t)i===e.length?e.push(a=new Z(this.O(j()),this.O(j()),this,this.options)):a=e[i],a._$AI(s),i++;i<e.length&&(this._$AR(a&&a._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){var a;for(null==(a=this._$AP)||a.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,a,i,s){this.type=1,this._$AH=H,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=s,a.length>2||""!==a[0]||""!==a[1]?(this._$AH=Array(a.length-1).fill(new String),this.strings=a):this._$AH=H}_$AI(t,e=this,a,i){const s=this.strings;let o=!1;if(void 0===s)t=Y(this,t,e,0),o=!O(t)||t!==this._$AH&&t!==V,o&&(this._$AH=t);else{const i=t;let r,n;for(t=s[0],r=0;r<s.length-1;r++)n=Y(this,i[a+r],e,r),n===V&&(n=this._$AH[r]),o||(o=!O(n)||n!==this._$AH[r]),n===H?t=H:t!==H&&(t+=(n??"")+s[r+1]),this._$AH[r]=n}o&&!i&&this.j(t)}j(t){t===H?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===H?void 0:t}}class at extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==H)}}class it extends tt{constructor(t,e,a,i,s){super(t,e,a,i,s),this.type=5}_$AI(t,e=this){if((t=Y(this,t,e,0)??H)===V)return;const a=this._$AH,i=t===H&&a!==H||t.capture!==a.capture||t.once!==a.once||t.passive!==a.passive,s=t!==H&&(a===H||i);i&&this.element.removeEventListener(this.name,this,a),s&&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 st{constructor(t,e,a){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=a}get _$AU(){return this._$AM._$AU}_$AI(t){Y(this,t)}}const ot=w.litHtmlPolyfillSupport;null==ot||ot(W,Z),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.3.2");const rt=globalThis;class nt 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,a)=>{const i=(null==a?void 0:a.renderBefore)??e;let s=i._$litPart$;if(void 0===s){const t=(null==a?void 0:a.renderBefore)??null;i._$litPart$=s=new Z(e.insertBefore(j(),t),t,void 0,a??{})}return s._$AI(t),s})(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 V}}nt._$litElement$=!0,nt.finalized=!0,null==(t=rt.litElementHydrateSupport)||t.call(rt,{LitElement:nt});const lt=rt.litElementPolyfillSupport;null==lt||lt({LitElement:nt}),(rt.litElementVersions??(rt.litElementVersions=[])).push("4.2.2");const dt=r`
|
|
2
2
|
:host {
|
|
3
3
|
--tdt-bg: #1a1a1a;
|
|
4
4
|
--tdt-bg-secondary: #242424;
|
|
@@ -4592,7 +4592,7 @@ var __defProp=Object.defineProperty,__defNormalProp=(t,e,a)=>e in t?__defProp(t,
|
|
|
4592
4592
|
.vendor-icon--pinterest { background: #e60023; color: white; }
|
|
4593
4593
|
.vendor-icon--hotjar { background: #fd3a5c; color: white; }
|
|
4594
4594
|
.vendor-icon--unknown { background: var(--tdt-bg-secondary); color: var(--tdt-text-muted); }
|
|
4595
|
-
`]),__publicField(zt,"KNOWN_APPS",{klaviyo:{name:"Klaviyo",icon:"K",patterns:["klaviyo","klviyo"]},judgeme:{name:"Judge.me",icon:"J",patterns:["judge.me","judgeme"]},recharge:{name:"ReCharge",icon:"R",patterns:["recharge","rechargepayments"]},privy:{name:"Privy",icon:"P",patterns:["privy"]},omnisend:{name:"Omnisend",icon:"O",patterns:["omnisend"]},yotpo:{name:"Yotpo",icon:"Y",patterns:["yotpo"]},loox:{name:"Loox",icon:"L",patterns:["loox"]},stamped:{name:"Stamped",icon:"S",patterns:["stamped"]},smile:{name:"Smile.io",icon:"S",patterns:["smile.io","smileio"]},gorgias:{name:"Gorgias",icon:"G",patterns:["gorgias"]},zendesk:{name:"Zendesk",icon:"Z",patterns:["zendesk","zopim"]},tidio:{name:"Tidio",icon:"T",patterns:["tidio"]},intercom:{name:"Intercom",icon:"I",patterns:["intercom"]},hotjar:{name:"Hotjar",icon:"H",patterns:["hotjar"]},facebook:{name:"Meta Pixel",icon:"M",patterns:["facebook","fbevents","connect.facebook"]},google:{name:"Google",icon:"G",patterns:["googletagmanager","google-analytics","gtag","gtm.js"]},tiktok:{name:"TikTok",icon:"T",patterns:["tiktok","analytics.tiktok"]},pinterest:{name:"Pinterest",icon:"P",patterns:["pintrk","pinterest"]},snapchat:{name:"Snapchat",icon:"S",patterns:["snapchat","sc-static"]},shopify:{name:"Shopify",icon:"S",patterns:["shopify","cdn.shopify","monorail-edge"]},afterpay:{name:"Afterpay",icon:"A",patterns:["afterpay","portal.afterpay"]},klarna:{name:"Klarna",icon:"K",patterns:["klarna"]},affirm:{name:"Affirm",icon:"A",patterns:["affirm"]},sezzle:{name:"Sezzle",icon:"S",patterns:["sezzle"]},bold:{name:"Bold",icon:"B",patterns:["boldapps","boldcommerce"]},pagefly:{name:"PageFly",icon:"P",patterns:["pagefly"]},shogun:{name:"Shogun",icon:"S",patterns:["getshogun","shogun"]}});let Lt=zt;customElements.define("tdt-apps-panel",Lt);const jt=class t extends nt{constructor(){super(),this.isCollapsed=!1,this.activeTab="objects",this.context=null,this.cart=null,this._unsubscribeCart=null,this.tabOrder=null,this.draggedTab=null,this.dragOverTab=null,this.showAdminDropdown=!1}connectedCallback(){super.connectedCallback(),this._init(),this._bindKeyboard(),this._restoreState()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeCart&&this._unsubscribeCart(),ut.stopPolling(),ht.destroy(),document.removeEventListener("keydown",this._handleKeydown)}_init(){this.context=ct.parse(),this.context?(ut.interceptAjax(),ut.startPolling(3e3),ut.fetch().then(t=>{t&&ut.setCart(t)}),this._unsubscribeCart=ut.subscribe(t=>{this.cart=t}),ht.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);const e=localStorage.getItem("theme-devtools-tab-order");if(e)try{const a=JSON.parse(e),i=t.DEFAULT_TABS.map(t=>t.id),s=a.filter(t=>i.includes(t)),o=i.filter(t=>!s.includes(t));this.tabOrder=[...s,...o]}catch{this.tabOrder=t.DEFAULT_TABS.map(t=>t.id)}else this.tabOrder=t.DEFAULT_TABS.map(t=>t.id)}_getOrderedTabs(){return this.tabOrder?this.tabOrder.map(e=>t.DEFAULT_TABS.find(t=>t.id===e)).filter(Boolean):t.DEFAULT_TABS}_handleDragStart(t,e){this.draggedTab=t,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t)}_handleDragOver(t,e){e.preventDefault(),e.dataTransfer.dropEffect="move",t!==this.draggedTab&&(this.dragOverTab=t)}_handleDragLeave(){this.dragOverTab=null}_handleDrop(t,e){if(e.preventDefault(),!this.draggedTab||this.draggedTab===t)return void this._resetDragState();const a=[...this.tabOrder],i=a.indexOf(this.draggedTab),s=a.indexOf(t);a.splice(i,1),a.splice(s,0,this.draggedTab),this.tabOrder=a,localStorage.setItem("theme-devtools-tab-order",JSON.stringify(a)),this._resetDragState()}_handleDragEnd(){this._resetDragState()}_resetDragState(){this.draggedTab=null,this.dragOverTab=null}_resetTabOrder(){this.tabOrder=t.DEFAULT_TABS.map(t=>t.id),localStorage.removeItem("theme-devtools-tab-order")}async _clearCart(){try{await fetch("/cart/clear.js",{method:"POST"}),this.cart={items:[],item_count:0,total_price:0},this._showActionFeedback("Cart cleared")}catch(t){console.error("Failed to clear cart:",t)}}_forceRefresh(){location.reload(!0)}_toggleDesignMode(){const t=new URL(window.location.href);t.searchParams.has("design_mode")?t.searchParams.delete("design_mode"):t.searchParams.set("design_mode","true"),window.location.href=t.toString()}async _copyPageJSON(){try{const t=JSON.stringify(this.context,null,2);await navigator.clipboard.writeText(t),this._showActionFeedback("JSON copied")}catch(t){console.error("Failed to copy:",t)}}
|
|
4595
|
+
`]),__publicField(zt,"KNOWN_APPS",{klaviyo:{name:"Klaviyo",icon:"K",patterns:["klaviyo","klviyo"]},judgeme:{name:"Judge.me",icon:"J",patterns:["judge.me","judgeme"]},recharge:{name:"ReCharge",icon:"R",patterns:["recharge","rechargepayments"]},privy:{name:"Privy",icon:"P",patterns:["privy"]},omnisend:{name:"Omnisend",icon:"O",patterns:["omnisend"]},yotpo:{name:"Yotpo",icon:"Y",patterns:["yotpo"]},loox:{name:"Loox",icon:"L",patterns:["loox"]},stamped:{name:"Stamped",icon:"S",patterns:["stamped"]},smile:{name:"Smile.io",icon:"S",patterns:["smile.io","smileio"]},gorgias:{name:"Gorgias",icon:"G",patterns:["gorgias"]},zendesk:{name:"Zendesk",icon:"Z",patterns:["zendesk","zopim"]},tidio:{name:"Tidio",icon:"T",patterns:["tidio"]},intercom:{name:"Intercom",icon:"I",patterns:["intercom"]},hotjar:{name:"Hotjar",icon:"H",patterns:["hotjar"]},facebook:{name:"Meta Pixel",icon:"M",patterns:["facebook","fbevents","connect.facebook"]},google:{name:"Google",icon:"G",patterns:["googletagmanager","google-analytics","gtag","gtm.js"]},tiktok:{name:"TikTok",icon:"T",patterns:["tiktok","analytics.tiktok"]},pinterest:{name:"Pinterest",icon:"P",patterns:["pintrk","pinterest"]},snapchat:{name:"Snapchat",icon:"S",patterns:["snapchat","sc-static"]},shopify:{name:"Shopify",icon:"S",patterns:["shopify","cdn.shopify","monorail-edge"]},afterpay:{name:"Afterpay",icon:"A",patterns:["afterpay","portal.afterpay"]},klarna:{name:"Klarna",icon:"K",patterns:["klarna"]},affirm:{name:"Affirm",icon:"A",patterns:["affirm"]},sezzle:{name:"Sezzle",icon:"S",patterns:["sezzle"]},bold:{name:"Bold",icon:"B",patterns:["boldapps","boldcommerce"]},pagefly:{name:"PageFly",icon:"P",patterns:["pagefly"]},shogun:{name:"Shogun",icon:"S",patterns:["getshogun","shogun"]}});let Lt=zt;customElements.define("tdt-apps-panel",Lt);const jt=class t extends nt{constructor(){super(),this.isCollapsed=!1,this.activeTab="objects",this.context=null,this.cart=null,this._unsubscribeCart=null,this.tabOrder=null,this.draggedTab=null,this.dragOverTab=null,this.showAdminDropdown=!1}connectedCallback(){super.connectedCallback(),this._init(),this._bindKeyboard(),this._restoreState()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeCart&&this._unsubscribeCart(),ut.stopPolling(),ht.destroy(),document.removeEventListener("keydown",this._handleKeydown)}_init(){this.context=ct.parse(),this.context?(ut.interceptAjax(),ut.startPolling(3e3),ut.fetch().then(t=>{t&&ut.setCart(t)}),this._unsubscribeCart=ut.subscribe(t=>{this.cart=t}),ht.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);const e=localStorage.getItem("theme-devtools-tab-order");if(e)try{const a=JSON.parse(e),i=t.DEFAULT_TABS.map(t=>t.id),s=a.filter(t=>i.includes(t)),o=i.filter(t=>!s.includes(t));this.tabOrder=[...s,...o]}catch{this.tabOrder=t.DEFAULT_TABS.map(t=>t.id)}else this.tabOrder=t.DEFAULT_TABS.map(t=>t.id)}_getOrderedTabs(){return this.tabOrder?this.tabOrder.map(e=>t.DEFAULT_TABS.find(t=>t.id===e)).filter(Boolean):t.DEFAULT_TABS}_handleDragStart(t,e){this.draggedTab=t,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t)}_handleDragOver(t,e){e.preventDefault(),e.dataTransfer.dropEffect="move",t!==this.draggedTab&&(this.dragOverTab=t)}_handleDragLeave(){this.dragOverTab=null}_handleDrop(t,e){if(e.preventDefault(),!this.draggedTab||this.draggedTab===t)return void this._resetDragState();const a=[...this.tabOrder],i=a.indexOf(this.draggedTab),s=a.indexOf(t);a.splice(i,1),a.splice(s,0,this.draggedTab),this.tabOrder=a,localStorage.setItem("theme-devtools-tab-order",JSON.stringify(a)),this._resetDragState()}_handleDragEnd(){this._resetDragState()}_resetDragState(){this.draggedTab=null,this.dragOverTab=null}_resetTabOrder(){this.tabOrder=t.DEFAULT_TABS.map(t=>t.id),localStorage.removeItem("theme-devtools-tab-order")}async _clearCart(){try{await fetch("/cart/clear.js",{method:"POST"}),this.cart={items:[],item_count:0,total_price:0},this._showActionFeedback("Cart cleared")}catch(t){console.error("Failed to clear cart:",t)}}_forceRefresh(){location.reload(!0)}_toggleDesignMode(){const t=new URL(window.location.href);t.searchParams.has("design_mode")?t.searchParams.delete("design_mode"):t.searchParams.set("design_mode","true"),window.location.href=t.toString()}async _copyPageJSON(){try{const t=JSON.stringify(this.context,null,2);await navigator.clipboard.writeText(t),this._showActionFeedback("JSON copied")}catch(t){console.error("Failed to copy:",t)}}_getShopURL(){return window.location.origin}_getAdminBaseUrl(){return`${this._getShopURL()}/admin`}_toggleAdminDropdown(t){if(null==t||t.stopPropagation(),this.showAdminDropdown=!this.showAdminDropdown,this.showAdminDropdown){const t=()=>{this.showAdminDropdown=!1,document.removeEventListener("click",t)};setTimeout(()=>document.addEventListener("click",t),0)}}_openAdminPage(t){window.open(`${this._getAdminBaseUrl()}${t}`,"_blank"),this.showAdminDropdown=!1}_openThemeEditor(){var t;const{meta:e}=this.context||{},a=null==(t=null==e?void 0:e.theme)?void 0:t.id;if(!a)return void window.open(this._getAdminBaseUrl()+"/themes","_blank");const i=window.location.pathname+window.location.search,s=`${this._getAdminBaseUrl()}/themes/${a}/editor?previewPath=${encodeURIComponent(i)}`;window.open(s,"_blank")}_openResourceInAdmin(){var t,e,a,i,s,o;const{meta:r,objects:n}=this.context||{},l=null==(t=null==r?void 0:r.request)?void 0:t.page_type;"product"===l&&(null==(e=null==n?void 0:n.product)?void 0:e.id)?this._openAdminPage(`/products/${n.product.id}`):"collection"===l&&(null==(a=null==n?void 0:n.collection)?void 0:a.id)?this._openAdminPage(`/collections/${n.collection.id}`):"article"===l&&(null==(i=null==n?void 0:n.article)?void 0:i.id)?this._openAdminPage(`/articles/${n.article.id}`):"page"===l&&(null==(s=null==n?void 0:n.page)?void 0:s.id)?this._openAdminPage(`/pages/${n.page.id}`):"blog"===l&&(null==(o=null==n?void 0:n.blog)?void 0:o.id)&&this._openAdminPage(`/blogs/${n.blog.id}`)}_getResourceLabel(){var t,e,a;return{product:"Product",collection:"Collection",article:"Article",page:"Page",blog:"Blog"}[null==(a=null==(e=null==(t=this.context)?void 0:t.meta)?void 0:e.request)?void 0:a.page_type]||null}_clearLocalStorage(){confirm("Clear all localStorage? This may log you out or reset preferences.")&&(localStorage.clear(),this._showActionFeedback("Storage cleared"))}_clearSessionStorage(){sessionStorage.clear(),this._showActionFeedback("Session cleared")}_showActionFeedback(t){const e=document.createElement("div");e.textContent=t,e.style.cssText="\n position: fixed;\n bottom: calc(60vh + 10px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--tdt-success, #22c55e);\n color: white;\n padding: 8px 16px;\n border-radius: 4px;\n font-size: 12px;\n font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;\n z-index: 2147483647;\n animation: fadeOut 2s forwards;\n ";const a=document.createElement("style");a.textContent="\n @keyframes fadeOut {\n 0%, 70% { opacity: 1; }\n 100% { opacity: 0; }\n }\n ",e.appendChild(a),document.body.appendChild(e),setTimeout(()=>e.remove(),2e3)}_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,a,i,s,o,r,n;if(!this.context)return B``;const{meta:l,objects:d,metafields:c,settings:p,sectionSettings:u,metafieldsSchema:h}=this.context,v={...d,cart:this.cart||d.cart},g=this._getOrderedTabs();return B`
|
|
4596
4596
|
<div class="dock ${this.isCollapsed?"dock--collapsed":""}">
|
|
4597
4597
|
<div class="dock__handle" @click=${this._toggleCollapse}>
|
|
4598
4598
|
<div class="dock__title">Theme Devtools</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shopify-theme-devtools",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "In-browser devtools panel for Shopify theme development - inspect Liquid context, metafields, settings, sections, and cart state",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/theme-devtools.js",
|