pixel-mirror 1.0.2 → 1.0.4
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/LICENSE +201 -0
- package/README.md +40 -5
- package/dist/index.js +1 -2
- package/package.json +12 -4
- package/plugins/astro.d.ts +5 -0
- package/plugins/astro.js +18 -0
- package/plugins/vite.d.ts +5 -0
- package/plugins/vite.js +3 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
59
|
+
excluding communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses
|
|
86
|
+
granted to You under this License for that Work shall terminate
|
|
87
|
+
as of the date such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for reasonable and customary use in describing the
|
|
141
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
166
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
167
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
168
|
+
or other liability obligations and/or rights consistent with this
|
|
169
|
+
License. However, in accepting such obligations, You may act only
|
|
170
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
171
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
172
|
+
defend, and hold each Contributor harmless for any liability
|
|
173
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
174
|
+
of your accepting any such warranty or additional liability.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
177
|
+
|
|
178
|
+
APPENDIX: How to apply the Apache License to your work.
|
|
179
|
+
|
|
180
|
+
To apply the Apache License to your work, attach the following
|
|
181
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
182
|
+
replaced with your own identifying information. (Don't include
|
|
183
|
+
the brackets!) The text should be enclosed in the appropriate
|
|
184
|
+
comment syntax for the file format. We also recommend that a
|
|
185
|
+
file or class name and description of purpose be included on the
|
|
186
|
+
same "printed page" as the copyright notice for easier
|
|
187
|
+
identification within third-party archives.
|
|
188
|
+
|
|
189
|
+
Copyright [yyyy] [name of copyright owner]
|
|
190
|
+
|
|
191
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
192
|
+
you may not use this file except in compliance with the License.
|
|
193
|
+
You may obtain a copy of the License at
|
|
194
|
+
|
|
195
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
196
|
+
|
|
197
|
+
Unless required by applicable law or agreed to in writing, software
|
|
198
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
199
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
200
|
+
See the License for the specific language governing permissions and
|
|
201
|
+
limitations under the License.
|
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Pixel Mirror is a lightweight tool for front-end developers that overlays design
|
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
|
-
### 1. For Vite projects
|
|
9
|
+
### 1. For [Vite](https://vite.dev/) projects
|
|
10
10
|
|
|
11
11
|
Install the package via npm:
|
|
12
12
|
|
|
@@ -17,20 +17,55 @@ npm install pixel-mirror --save-dev
|
|
|
17
17
|
Then, add Pixel Mirror's Vite plugin to your `vite.config.js`:
|
|
18
18
|
|
|
19
19
|
```js
|
|
20
|
-
import pixelMirrorPlugin from "pixel-mirror/vite";
|
|
21
20
|
import { defineConfig } from "vite";
|
|
21
|
+
import pixelMirror from "pixel-mirror/vite";
|
|
22
22
|
|
|
23
23
|
export default defineConfig({
|
|
24
|
-
plugins: [
|
|
24
|
+
plugins: [pixelMirror()],
|
|
25
25
|
// ... other configurations
|
|
26
26
|
});
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
The plugin is automatically injected into your HTML during development and will be removed in production builds.
|
|
30
30
|
|
|
31
|
-
### 2. For
|
|
31
|
+
### 2. For [Astro](https://astro.build/) projects
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
Install the package via npm:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install pixel-mirror --save-dev
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Then, add Pixel Mirror's Astro Integration to your `astro.config.mjs`:
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
import { defineConfig } from "astro/config";
|
|
43
|
+
import pixelMirror from "pixel-mirror/astro";
|
|
44
|
+
|
|
45
|
+
export default defineConfig({
|
|
46
|
+
integrations: [pixelMirror()],
|
|
47
|
+
// ... other configurations
|
|
48
|
+
});
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### 3. For [Next.js](https://nextjs.org/) projects
|
|
52
|
+
|
|
53
|
+
Inject the following code to the `<Head></Head>` section in `_document.jsx`:
|
|
54
|
+
|
|
55
|
+
``` jsx
|
|
56
|
+
// import Script from "next/script"
|
|
57
|
+
|
|
58
|
+
{process.env.NODE_ENV === "development" && (
|
|
59
|
+
<Script
|
|
60
|
+
src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"
|
|
61
|
+
strategy="afterInteractive"
|
|
62
|
+
/>
|
|
63
|
+
)}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 4. For other projects
|
|
67
|
+
|
|
68
|
+
Integrate Pixel Mirror by injecting its script into your HTML:
|
|
34
69
|
|
|
35
70
|
``` html
|
|
36
71
|
<script defer src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"></script>
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._PM--0K,._PM-BsK,._PM-CUZ>button,._PM-fL3,._PM-gUL,._PM-nRD,._PM-nSt,._PM-uxq{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;font:inherit;margin:0;outline:none;padding:0}._PM--0K:disabled,._PM-BsK:disabled,._PM-CUZ>button:disabled,._PM-fL3:disabled,._PM-gUL:disabled,._PM-nRD:disabled,._PM-nSt:disabled,._PM-uxq:disabled{cursor:default}._PM--0K:not(:disabled):active,._PM-BsK:not(:disabled):active,._PM-CUZ>button:not(:disabled):active,._PM-fL3:not(:disabled):active,._PM-gUL:not(:disabled):active,._PM-nRD:not(:disabled):active,._PM-nSt:not(:disabled):active,._PM-uxq:not(:disabled):active{transform:scale(.95)}._PM-BsK:not(:disabled):hover,._PM-nRD:not(:disabled):hover{background:#0000000a}:root{position:relative}._PM-1LW{display:none!important}._PM-aop{align-items:center;background:#fff;border:2px solid;border-radius:32px;bottom:40px;box-sizing:border-box;color:#000;display:flex;font-family:Arial,sans-serif;justify-content:center;left:16px;margin-left:auto;margin-right:auto;max-width:calc(100vw - 32px);outline:3px solid hsla(0,0%,100%,.5);position:fixed;right:16px;transform:translateZ(0);transition:all .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;will-change:width,height;z-index:2147483647}._PM-aop._PM--Uf{pointer-events:none}._PM-aop._PM-H81{bottom:auto;top:48px}._PM-aop svg{color:currentcolor;display:block;fill:none}._PM-aop *{box-sizing:border-box}._PM-6di{align-items:center;background:#fe0200;border:2px solid;border-radius:32px;bottom:96px;color:#fff;display:flex;gap:.5rem;left:50%;margin:auto;padding:.375rem .75rem;position:absolute;transform:translate(-50%);width:max-content;z-index:10}._PM--p1{font-size:15px;line-height:16px}._PM-H81 ._PM-6di{bottom:-64px}._PM-6Uc{align-items:center;display:flex;overflow-x:auto;padding:0 12px}._PM-nRD{padding:8px}._PM-nRD._PM-0BL{transform:rotate(180deg)}._PM-Ms2{position:relative}._PM-8ZO{font-size:8px;font-weight:700;left:0;line-height:1;right:0;text-align:center;top:18px}._PM-8ZO,._PM-iiG{position:absolute;z-index:1}._PM-iiG{align-items:center;background:#fff;border-left:2px solid;border-radius:12px 12px 0 0;border-right:2px solid;border-top:2px solid;bottom:100%;display:flex;left:80px;overflow:hidden;padding-left:4px;padding-right:4px;padding-top:4px}._PM-BsK{border-radius:8px;padding:4px}._PM-BsK>svg{height:24px;width:24px}._PM-ykA{position:relative}._PM-T3K{font-size:11.5px;font-weight:700;height:16px;top:0;right:0;bottom:0;left:0;line-height:16px;text-align:center}._PM-T3K,._PM-XPp{margin:auto;position:absolute;z-index:1}._PM-XPp{background:#fff;background:#000;border-radius:16px;bottom:calc(100% + 8px);color:#fff;font-family:monospace;font-size:12px;left:0;line-height:20px;padding:0 8px;pointer-events:none;right:0;white-space:nowrap;width:max-content}._PM-ZDk{position:relative;width:100%}._PM-1Gp,._PM-ZDk{border-radius:inherit;height:100%}._PM-1Gp{overflow:hidden;padding:8px}._PM--Xs{height:100%;opacity:0;overflow:auto;overscroll-behavior:contain;padding:16px;visibility:hidden;will-change:opacity visibility}._PM--Xs._PM-Pgi{opacity:1;transition:opacity .5s cubic-bezier(.4,0,.2,1) .25s,visibility 0s .25s;visibility:visible}._PM-ea1{align-items:center;bottom:-18px;display:flex;gap:16px;left:0;margin:auto;position:absolute;right:0;width:max-content;z-index:1}._PM-fL3{background:#000;border-radius:16px;color:#fff;font-size:15px;line-height:32px;width:168px}._PM-F7y{padding-bottom:24px}._PM-NMj{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}._PM-PaA{font-size:18px;line-height:32px;margin:0}._PM-gUL{align-items:center;background:#000;border-radius:16px;color:#fff;display:flex;font-size:15px;gap:4px;line-height:32px;padding:0 10px;width:116px}._PM-gUL>svg{flex:none}._PM-gUL>span{flex:1;text-align:center}._PM-gUL:active{transform:none!important}._PM-gUL #_pixel-mirror-toggle-trigger{transform:translate(-8px);transition:transform .25s cubic-bezier(.4,0,.2,1)}._PM-gUL._PM-dtI #_pixel-mirror-toggle-trigger{transform:translate(0)}._PM-CUZ{align-items:center;border-color:#000;border-radius:12px;display:flex;margin-bottom:16px;padding:8px 16px}._PM-CUZ>legend{background:#000;border-radius:6px;color:#fff;font-size:15px;line-height:24px;padding-left:8px;padding-right:8px}._PM-CUZ>input{background:transparent;border:none;display:block;flex:1;font-family:monospace;font-size:16px;line-height:24px;outline:none;padding:8px 8px 8px 0;width:100%}._PM-CUZ>button{background:#000;border-radius:16px;color:#fff;font-size:14px;line-height:24px;padding-left:12px;padding-right:12px}._PM-OwQ{border:2px solid #000;border-radius:12px;margin-top:24px;overflow:auto}._PM-XPo{border-collapse:collapse;border-spacing:0;font-size:14px;line-height:16px;min-width:100%;text-align:left;white-space:nowrap;width:max-content}._PM-92c{align-items:center;display:flex;gap:8px;justify-content:space-evenly}._PM-uxq{border-radius:8px}._PM-uxq>svg{height:20px;width:20px}._PM-uxq._PM-FWS{opacity:0}._PM-uxq._PM-FWS._PM-En3,._PM-uxq._PM-FWS:focus{opacity:1}._PM-XPo>thead>tr{border-bottom:1px solid #eee}._PM-XPo>tbody{color:#333;text-transform:capitalize}._PM-XPo>tbody>tr{border-bottom:1px solid #eee}._PM-XPo>tbody>tr:hover ._PM-FWS{opacity:1}._PM-XPo>tbody>tr._PM-En3{background:#f9f9f9}._PM-XPo th{padding:12px}._PM-XPo th:not(:last-child){border-right:1px solid #eee}._PM-XPo td{padding:8px 12px}._PM-XPo td:not(:last-child){border-right:1px solid #eee}._PM-XPo>tfoot td{padding:12px}._PM-XPo>tfoot input{border:1px solid #eee;border-radius:6px;font-size:14px;height:24px;outline:none;padding:0 8px;width:72px}._PM-XPo>tfoot input:focus{outline:2px solid #ddd}._PM-XPo>tfoot select{border:1px solid #eee;border-radius:6px;font-size:14px;height:24px;outline:none;padding:0 4px}._PM-XPo>tfoot select:focus{outline:2px solid #ddd}._PM-nSt{background:#000;border:none;border-radius:16px;color:#fff;font-size:13px;height:24px;padding-left:12px;padding-right:12px}._PM-nSt:disabled{opacity:.5}._PM-nSt:focus{outline:2px solid #999}._PM-6J2{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}._PM-9BG{cursor:pointer;position:relative}._PM--3m{aspect-ratio:3/4;border:2px solid #ddd;border-radius:16px;display:block;object-fit:cover;width:100%}._PM--0K{align-items:center;background:#000;border-radius:50%;bottom:12px;color:#fff;display:flex;justify-content:center;opacity:0;padding:6px;position:absolute;right:12px;z-index:2}._PM--0K>svg{height:20px;width:20px}._PM--0K:hover{background:#fe0200}._PM-9BG._PM-L-M{cursor:not-allowed}._PM-9BG._PM-L-M ._PM--3m{border-color:#666}._PM-9BG._PM-L-M ._PM--0K{display:none}._PM-9BG:hover ._PM--3m{border-color:#666}._PM-9BG:hover ._PM--0K{opacity:1;transition:opacity .25s cubic-bezier(.4,0,.2,1)}._PM-zF6{align-items:center;aspect-ratio:3/4;background:#fafafa;border:2px solid #ddd;border-radius:16px;color:#aaa;cursor:pointer;display:flex;flex-direction:column;justify-content:center;width:100%}._PM-cqR{background:#eee;border-radius:12px;height:64px;padding:12px;width:64px}._PM-50o{font-size:16px;line-height:24px;margin-top:8px}._PM-zF6>input{display:none}._PM-zF6:hover{border-color:#666;color:#666}._PM-Qrp{top:0;right:0;bottom:0;left:0;min-height:100vh;overflow:hidden;pointer-events:none;position:absolute;z-index:2147483646}._PM-hUT{contain:layout size;left:0;pointer-events:all;position:absolute;top:0;transition:none;-webkit-user-select:none;user-select:none;will-change:width,height,transform;z-index:1}._PM-hUT:active{outline:1px dashed #000}._PM-hUT._PM-jws{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}._PM-hUT._PM-R39{cursor:default;pointer-events:none}._PM-hUT._PM-030{outline:none!important}._PM-Bit{z-index:2}._PM-Bit,._PM-qJ0{top:0;right:0;bottom:0;left:0;position:absolute}._PM-qJ0{display:grid;z-index:3}._PM-qJ0._PM-Ej5{justify-content:center}._PM-qJ0._PM-64m{justify-content:start}._PM-qJ0._PM-SHi{justify-content:end}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
var li=Object.defineProperty;var ai=(he,R,ye)=>R in he?li(he,R,{enumerable:!0,configurable:!0,writable:!0,value:ye}):he[R]=ye;var xe=(he,R,ye)=>ai(he,typeof R!="symbol"?R+"":R,ye);(function(){"use strict";const he=(e,t)=>e===t,R=Symbol("solid-proxy"),ye=typeof Proxy=="function",mt=Symbol("solid-track"),et={equals:he};let Rt=Tt;const oe=1,tt=2,jt={owned:null,cleanups:null,context:null,owner:null};var L=null;let pt=null,kn=null,O=null,j=null,Y=null,nt=0;function ot(e,t){const n=O,o=L,i=e.length===0,r=t===void 0?o:t,s=i?jt:{owned:null,cleanups:null,context:r?r.context:null,owner:r},l=i?e:()=>e(()=>ie(()=>Be(s)));L=s,O=null;try{return Ce(l,!0)}finally{O=n,L=o}}function I(e,t){t=t?Object.assign({},et,t):et;const n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},o=i=>(typeof i=="function"&&(i=i(n.value)),Nt(n,i));return[It.bind(n),o]}function x(e,t,n){const o=bt(e,t,!1,oe);De(o)}function Ae(e,t,n){Rt=$n;const o=bt(e,t,!1,oe);o.user=!0,Y?Y.push(o):De(o)}function ge(e,t,n){n=n?Object.assign({},et,n):et;const o=bt(e,t,!0,0);return o.observers=null,o.observerSlots=null,o.comparator=n.equals||void 0,De(o),It.bind(o)}function Sn(e){return Ce(e,!1)}function ie(e){if(O===null)return e();const t=O;O=null;try{return e()}finally{O=t}}function Oe(e){Ae(()=>ie(e))}function Ee(e){return L===null||(L.cleanups===null?L.cleanups=[e]:L.cleanups.push(e)),e}function _t(){return O}function It(){if(this.sources&&this.state)if(this.state===oe)De(this);else{const e=j;j=null,Ce(()=>rt(this),!1),j=e}if(O){const e=this.observers?this.observers.length:0;O.sources?(O.sources.push(this),O.sourceSlots.push(e)):(O.sources=[this],O.sourceSlots=[e]),this.observers?(this.observers.push(O),this.observerSlots.push(O.sources.length-1)):(this.observers=[O],this.observerSlots=[O.sources.length-1])}return this.value}function Nt(e,t,n){let o=e.value;return(!e.comparator||!e.comparator(o,t))&&(e.value=t,e.observers&&e.observers.length&&Ce(()=>{for(let i=0;i<e.observers.length;i+=1){const r=e.observers[i],s=pt&&pt.running;s&&pt.disposed.has(r),(s?!r.tState:!r.state)&&(r.pure?j.push(r):Y.push(r),r.observers&&Ut(r)),s||(r.state=oe)}if(j.length>1e6)throw j=[],new Error},!1)),t}function De(e){if(!e.fn)return;Be(e);const t=nt;Pn(e,e.value,t)}function Pn(e,t,n){let o;const i=L,r=O;O=L=e;try{o=e.fn(t)}catch(s){return e.pure&&(e.state=oe,e.owned&&e.owned.forEach(Be),e.owned=null),e.updatedAt=n+1,Ht(s)}finally{O=r,L=i}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?Nt(e,o):e.value=o,e.updatedAt=n)}function bt(e,t,n,o=oe,i){const r={fn:e,state:o,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:L,context:L?L.context:null,pure:n};return L===null||L!==jt&&(L.owned?L.owned.push(r):L.owned=[r]),r}function it(e){if(e.state===0)return;if(e.state===tt)return rt(e);if(e.suspense&&ie(e.suspense.inFallback))return e.suspense.effects.push(e);const t=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<nt);)e.state&&t.push(e);for(let n=t.length-1;n>=0;n--)if(e=t[n],e.state===oe)De(e);else if(e.state===tt){const o=j;j=null,Ce(()=>rt(e,t[0]),!1),j=o}}function Ce(e,t){if(j)return e();let n=!1;t||(j=[]),Y?n=!0:Y=[],nt++;try{const o=e();return Mn(n),o}catch(o){n||(Y=null),j=null,Ht(o)}}function Mn(e){if(j&&(Tt(j),j=null),e)return;const t=Y;Y=null,t.length&&Ce(()=>Rt(t),!1)}function Tt(e){for(let t=0;t<e.length;t++)it(e[t])}function $n(e){let t,n=0;for(t=0;t<e.length;t++){const o=e[t];o.user?e[n++]=o:it(o)}for(t=0;t<n;t++)it(e[t])}function rt(e,t){e.state=0;for(let n=0;n<e.sources.length;n+=1){const o=e.sources[n];if(o.sources){const i=o.state;i===oe?o!==t&&(!o.updatedAt||o.updatedAt<nt)&&it(o):i===tt&&rt(o,t)}}}function Ut(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=tt,n.pure?j.push(n):Y.push(n),n.observers&&Ut(n))}}function Be(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),o=e.sourceSlots.pop(),i=n.observers;if(i&&i.length){const r=i.pop(),s=n.observerSlots.pop();o<i.length&&(r.sourceSlots[s]=o,i[o]=r,n.observerSlots[o]=s)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)Be(e.tOwned[t]);delete e.tOwned}if(e.owned){for(t=e.owned.length-1;t>=0;t--)Be(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}e.state=0}function xn(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function Ht(e,t=L){throw xn(e)}const An=Symbol("fallback");function Wt(e){for(let t=0;t<e.length;t++)e[t]()}function On(e,t,n={}){let o=[],i=[],r=[],s=0,l=t.length>1?[]:null;return Ee(()=>Wt(r)),()=>{let c=e()||[],v=c.length,d,a;return c[mt],ie(()=>{let m,$,A,D,U,S,P,b,Z;if(v===0)s!==0&&(Wt(r),r=[],o=[],i=[],s=0,l&&(l=[])),n.fallback&&(o=[An],i[0]=ot(q=>(r[0]=q,n.fallback())),s=1);else if(s===0){for(i=new Array(v),a=0;a<v;a++)o[a]=c[a],i[a]=ot(g);s=v}else{for(A=new Array(v),D=new Array(v),l&&(U=new Array(v)),S=0,P=Math.min(s,v);S<P&&o[S]===c[S];S++);for(P=s-1,b=v-1;P>=S&&b>=S&&o[P]===c[b];P--,b--)A[b]=i[P],D[b]=r[P],l&&(U[b]=l[P]);for(m=new Map,$=new Array(b+1),a=b;a>=S;a--)Z=c[a],d=m.get(Z),$[a]=d===void 0?-1:d,m.set(Z,a);for(d=S;d<=P;d++)Z=o[d],a=m.get(Z),a!==void 0&&a!==-1?(A[a]=i[d],D[a]=r[d],l&&(U[a]=l[d]),a=$[a],m.set(Z,a)):r[d]();for(a=S;a<v;a++)a in A?(i[a]=A[a],r[a]=D[a],l&&(l[a]=U[a],l[a](a))):i[a]=ot(g);i=i.slice(0,s=v),o=c.slice(0)}return i});function g(m){if(r[a]=m,l){const[$,A]=I(a);return l[a]=A,t(c[a],$)}return t(c[a])}}}function p(e,t){return ie(()=>e(t||{}))}function st(){return!0}const En={get(e,t,n){return t===R?n:e.get(t)},has(e,t){return t===R?!0:e.has(t)},set:st,deleteProperty:st,getOwnPropertyDescriptor(e,t){return{configurable:!0,enumerable:!0,get(){return e.get(t)},set:st,deleteProperty:st}},ownKeys(e){return e.keys()}};function kt(e){return(e=typeof e=="function"?e():e)?e:{}}function Dn(){for(let e=0,t=this.length;e<t;++e){const n=this[e]();if(n!==void 0)return n}}function Bn(...e){let t=!1;for(let s=0;s<e.length;s++){const l=e[s];t=t||!!l&&R in l,e[s]=typeof l=="function"?(t=!0,ge(l)):l}if(ye&&t)return new Proxy({get(s){for(let l=e.length-1;l>=0;l--){const c=kt(e[l])[s];if(c!==void 0)return c}},has(s){for(let l=e.length-1;l>=0;l--)if(s in kt(e[l]))return!0;return!1},keys(){const s=[];for(let l=0;l<e.length;l++)s.push(...Object.keys(kt(e[l])));return[...new Set(s)]}},En);const n={},o=Object.create(null);for(let s=e.length-1;s>=0;s--){const l=e[s];if(!l)continue;const c=Object.getOwnPropertyNames(l);for(let v=c.length-1;v>=0;v--){const d=c[v];if(d==="__proto__"||d==="constructor")continue;const a=Object.getOwnPropertyDescriptor(l,d);if(!o[d])o[d]=a.get?{enumerable:!0,configurable:!0,get:Dn.bind(n[d]=[a.get.bind(l)])}:a.value!==void 0?a:void 0;else{const g=n[d];g&&(a.get?g.push(a.get.bind(l)):a.value!==void 0&&g.push(()=>a.value))}}}const i={},r=Object.keys(o);for(let s=r.length-1;s>=0;s--){const l=r[s],c=o[l];c&&c.get?Object.defineProperty(i,l,c):i[l]=c?c.value:void 0}return i}const Ln=e=>`Stale read from <${e}>.`;function St(e){const t="fallback"in e&&{fallback:()=>e.fallback};return ge(On(()=>e.each,e.children,t||void 0))}function F(e){const t=e.keyed,n=ge(()=>e.when,void 0,{equals:(o,i)=>t?o===i:!o==!i});return ge(()=>{const o=n();if(o){const i=e.children;return typeof i=="function"&&i.length>0?ie(()=>i(t?o:()=>{if(!ie(n))throw Ln("Show");return e.when})):i}return e.fallback},void 0,void 0)}const Gn=new Set(["innerHTML","textContent","innerText","children"]),Rn=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),jn=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),In={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function Nn(e,t,n){let o=n.length,i=t.length,r=o,s=0,l=0,c=t[i-1].nextSibling,v=null;for(;s<i||l<r;){if(t[s]===n[l]){s++,l++;continue}for(;t[i-1]===n[r-1];)i--,r--;if(i===s){const d=r<o?l?n[l-1].nextSibling:n[r-l]:c;for(;l<r;)e.insertBefore(n[l++],d)}else if(r===l)for(;s<i;)(!v||!v.has(t[s]))&&t[s].remove(),s++;else if(t[s]===n[r-1]&&n[l]===t[i-1]){const d=t[--i].nextSibling;e.insertBefore(n[l++],t[s++].nextSibling),e.insertBefore(n[--r],d),t[i]=n[r]}else{if(!v){v=new Map;let a=l;for(;a<r;)v.set(n[a],a++)}const d=v.get(t[s]);if(d!=null)if(l<d&&d<r){let a=s,g=1,m;for(;++a<i&&a<r&&!((m=v.get(t[a]))==null||m!==d+g);)g++;if(g>d-l){const $=t[s];for(;l<d;)e.insertBefore(n[l++],$)}else e.replaceChild(n[l++],t[s++])}else s++;else t[s++].remove()}}}const Vt="_$DX_DELEGATE";function Tn(e,t,n,o={}){let i;return ot(r=>{i=r,t===document?e():_(t,e(),t.firstChild?null:void 0,n)},o.owner),()=>{i(),t.textContent=""}}function k(e,t,n){let o;const i=()=>{const s=document.createElement("template");return s.innerHTML=e,s.content.firstChild},r=()=>(o||(o=i())).cloneNode(!0);return r.cloneNode=r,r}function Zt(e,t=window.document){const n=t[Vt]||(t[Vt]=new Set);for(let o=0,i=e.length;o<i;o++){const r=e[o];n.has(r)||(n.add(r),t.addEventListener(r,Kn))}}function V(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function Un(e,t,n,o){o==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,o)}function Hn(e,t,n){n?e.setAttribute(t,""):e.removeAttribute(t)}function w(e,t){t==null?e.removeAttribute("class"):e.className=t}function Wn(e,t,n,o){if(o)Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n;else if(Array.isArray(n)){const i=n[0];e.addEventListener(t,n[0]=r=>i.call(e,n[1],r))}else e.addEventListener(t,n,typeof n!="function"&&n)}function Vn(e,t,n={}){const o=Object.keys(t||{}),i=Object.keys(n);let r,s;for(r=0,s=i.length;r<s;r++){const l=i[r];!l||l==="undefined"||t[l]||(zt(e,l,!1),delete n[l])}for(r=0,s=o.length;r<s;r++){const l=o[r],c=!!t[l];!l||l==="undefined"||n[l]===c||!c||(zt(e,l,!0),n[l]=c)}return n}function Pt(e,t,n){if(!t)return n?V(e,"style"):t;const o=e.style;if(typeof t=="string")return o.cssText=t;typeof n=="string"&&(o.cssText=n=void 0),n||(n={}),t||(t={});let i,r;for(r in n)t[r]==null&&o.removeProperty(r),delete n[r];for(r in t)i=t[r],i!==n[r]&&(o.setProperty(r,i),n[r]=i);return n}function E(e,t={},n,o){const i={};return x(()=>typeof t.ref=="function"&&Zn(t.ref,e)),x(()=>zn(e,t,n,!0,i,!0)),i}function Zn(e,t,n){return ie(()=>e(t,n))}function _(e,t,n,o){if(n!==void 0&&!o&&(o=[]),typeof t!="function")return lt(e,t,o,n);x(i=>lt(e,t(),i,n),o)}function zn(e,t,n,o,i={},r=!1){t||(t={});for(const s in i)if(!(s in t)){if(s==="children")continue;i[s]=qt(e,s,null,i[s],n,r,t)}for(const s in t){if(s==="children")continue;const l=t[s];i[s]=qt(e,s,l,i[s],n,r,t)}}function qn(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function zt(e,t,n){const o=t.trim().split(/\s+/);for(let i=0,r=o.length;i<r;i++)e.classList.toggle(o[i],n)}function qt(e,t,n,o,i,r,s){let l,c,v,d;if(t==="style")return Pt(e,n,o);if(t==="classList")return Vn(e,n,o);if(n===o)return o;if(t==="ref")r||n(e);else if(t.slice(0,3)==="on:"){const a=t.slice(3);o&&e.removeEventListener(a,o,typeof o!="function"&&o),n&&e.addEventListener(a,n,typeof n!="function"&&n)}else if(t.slice(0,10)==="oncapture:"){const a=t.slice(10);o&&e.removeEventListener(a,o,!0),n&&e.addEventListener(a,n,!0)}else if(t.slice(0,2)==="on"){const a=t.slice(2).toLowerCase(),g=jn.has(a);if(!g&&o){const m=Array.isArray(o)?o[0]:o;e.removeEventListener(a,m)}(g||n)&&(Wn(e,a,n,g),g&&Zt([a]))}else if(t.slice(0,5)==="attr:")V(e,t.slice(5),n);else if(t.slice(0,5)==="bool:")Hn(e,t.slice(5),n);else if((d=t.slice(0,5)==="prop:")||(v=Gn.has(t))||!i||(l=e.nodeName.includes("-")||"is"in s))d&&(t=t.slice(5),c=!0),t==="class"||t==="className"?w(e,n):l&&!c&&!v?e[qn(t)]=n:e[t]=n;else{const a=t.indexOf(":")>-1&&In[t.split(":")[0]];a?Un(e,a,t,n):V(e,Rn[t]||t,n)}return n}function Kn(e){let t=e.target;const n=`$$${e.type}`,o=e.target,i=e.currentTarget,r=c=>Object.defineProperty(e,"target",{configurable:!0,value:c}),s=()=>{const c=t[n];if(c&&!t.disabled){const v=t[`${n}Data`];if(v!==void 0?c.call(t,v,e):c.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&r(t.host),!0},l=()=>{for(;s()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),e.composedPath){const c=e.composedPath();r(c[0]);for(let v=0;v<c.length-2&&(t=c[v],!!s());v++){if(t._$host){t=t._$host,l();break}if(t.parentNode===i)break}}else l();r(o)}function lt(e,t,n,o,i){for(;typeof n=="function";)n=n();if(t===n)return n;const r=typeof t,s=o!==void 0;if(e=s&&n[0]&&n[0].parentNode||e,r==="string"||r==="number"){if(r==="number"&&(t=t.toString(),t===n))return n;if(s){let l=n[0];l&&l.nodeType===3?l.data!==t&&(l.data=t):l=document.createTextNode(t),n=me(e,n,o,l)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||r==="boolean")n=me(e,n,o);else{if(r==="function")return x(()=>{let l=t();for(;typeof l=="function";)l=l();n=lt(e,l,n,o)}),()=>n;if(Array.isArray(t)){const l=[],c=n&&Array.isArray(n);if(Mt(l,t,n,i))return x(()=>n=lt(e,l,n,o,!0)),()=>n;if(l.length===0){if(n=me(e,n,o),s)return n}else c?n.length===0?Kt(e,l,o):Nn(e,n,l):(n&&me(e),Kt(e,l));n=l}else if(t.nodeType){if(Array.isArray(n)){if(s)return n=me(e,n,o,t);me(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function Mt(e,t,n,o){let i=!1;for(let r=0,s=t.length;r<s;r++){let l=t[r],c=n&&n[e.length],v;if(!(l==null||l===!0||l===!1))if((v=typeof l)=="object"&&l.nodeType)e.push(l);else if(Array.isArray(l))i=Mt(e,l,c)||i;else if(v==="function")if(o){for(;typeof l=="function";)l=l();i=Mt(e,Array.isArray(l)?l:[l],Array.isArray(c)?c:[c])||i}else e.push(l),i=!0;else{const d=String(l);c&&c.nodeType===3&&c.data===d?e.push(c):e.push(document.createTextNode(d))}}return i}function Kt(e,t,n=null){for(let o=0,i=t.length;o<i;o++)e.insertBefore(t[o],n)}function me(e,t,n,o){if(n===void 0)return e.textContent="";const i=o||document.createTextNode("");if(t.length){let r=!1;for(let s=t.length-1;s>=0;s--){const l=t[s];if(i!==l){const c=l.parentNode===e;!r&&!s?c?e.replaceChild(i,l):e.insertBefore(i,n):c&&l.remove()}else r=!0}}else e.insertBefore(i,n);return[i]}function Ft(e){var t,n,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=Ft(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function N(){for(var e,t,n=0,o="",i=arguments.length;n<i;n++)(e=arguments[n])&&(t=Ft(e))&&(o&&(o+=" "),o+=t);return o}function Fn(e){var n;return((n=e.split(".").pop())==null?void 0:n.toLowerCase())==="png"?"image/png":"image/jpeg"}const Xt={id:"default",width:"1140px",columns:12,gutterWidth:"24px",isGutterOnOutside:!0,position:"center"};class T{constructor(){}static async init(){this.db=await new Promise((t,n)=>{const o=indexedDB.open(this.DB_NAME,this.VERSION);o.onerror=()=>n(o.error),o.onsuccess=()=>t(o.result),o.onupgradeneeded=i=>{const r=i.target.result;r.objectStoreNames.contains(this.DESIGN_STORE_NAME)||r.createObjectStore(this.DESIGN_STORE_NAME,{keyPath:"id"}),r.objectStoreNames.contains(this.GRID_STORE_NAME)||r.createObjectStore(this.GRID_STORE_NAME,{keyPath:"id"}).add({...Xt,createdAt:Date.now()})}})}static async uploadDesign(t){const n=t.map(async s=>{const l=await s.arrayBuffer();return{id:crypto.randomUUID(),buffer:l,mimeType:Fn(s.name),createdAt:Date.now()}}),o=await Promise.all(n),i=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite"),r=i.objectStore(this.DESIGN_STORE_NAME);return await Promise.all([new Promise((s,l)=>{i.oncomplete=()=>s(),i.onerror=()=>l(i.error)}),...o.map(s=>new Promise((l,c)=>{const v=r.add(s);v.onsuccess=()=>l(),v.onerror=()=>c(v.error)}))]),o.sort((s,l)=>l.createdAt-s.createdAt)}static async getDesign(t){const n=this.db.transaction(this.DESIGN_STORE_NAME,"readonly").objectStore(this.DESIGN_STORE_NAME);return new Promise((o,i)=>{const r=n.get(t);r.onerror=()=>i(r.error),r.onsuccess=()=>o(r.result)})}static async getAllDesigns(){const t=this.db.transaction(this.DESIGN_STORE_NAME,"readonly").objectStore(this.DESIGN_STORE_NAME);return new Promise((n,o)=>{const i=t.getAll();i.onerror=()=>o(i.error),i.onsuccess=()=>n(i.result.sort((r,s)=>s.createdAt-r.createdAt))})}static async deleteDesign(t){const o=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite").objectStore(this.DESIGN_STORE_NAME);await new Promise((i,r)=>{const s=o.delete(t);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)})}static async deleteAllDesigns(){const n=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite").objectStore(this.DESIGN_STORE_NAME);await new Promise((o,i)=>{const r=n.clear();r.onsuccess=()=>o(),r.onerror=()=>i(r.error)})}static async addGridSet(t){const n={...t,id:crypto.randomUUID(),createdAt:Date.now()},i=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);return await new Promise((r,s)=>{const l=i.add(n);l.onsuccess=()=>r(),l.onerror=()=>s(l.error)}),n}static async getGridSet(t){const n=this.db.transaction(this.GRID_STORE_NAME,"readonly").objectStore(this.GRID_STORE_NAME);return new Promise((o,i)=>{const r=n.get(t);r.onerror=()=>i(r.error),r.onsuccess=()=>o(r.result)})}static async getAllGridSets(){const t=this.db.transaction(this.GRID_STORE_NAME,"readonly").objectStore(this.GRID_STORE_NAME);return new Promise((n,o)=>{const i=t.getAll();i.onerror=()=>o(i.error),i.onsuccess=()=>n(i.result.sort((r,s)=>r.createdAt-s.createdAt))})}static async deleteGridSet(t){const o=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);await new Promise((i,r)=>{const s=o.delete(t);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)})}static async resetGridSets(){const n=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);await new Promise((i,r)=>{const s=n.clear();s.onsuccess=()=>i(),s.onerror=()=>r(s.error)});const o={...Xt,createdAt:Date.now()};return await new Promise((i,r)=>{const s=n.add(o);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)}),[o]}}xe(T,"DB_NAME","PixelMirrorDB"),xe(T,"DESIGN_STORE_NAME","designs"),xe(T,"GRID_STORE_NAME","grids"),xe(T,"VERSION",1),xe(T,"db");const $t=Symbol("store-raw"),pe=Symbol("store-node"),J=Symbol("store-has"),Yt=Symbol("store-self");function Jt(e){let t=e[R];if(!t&&(Object.defineProperty(e,R,{value:t=new Proxy(e,Jn)}),!Array.isArray(e))){const n=Object.keys(e),o=Object.getOwnPropertyDescriptors(e);for(let i=0,r=n.length;i<r;i++){const s=n[i];o[s].get&&Object.defineProperty(e,s,{enumerable:o[s].enumerable,get:o[s].get.bind(t)})}}return t}function at(e){let t;return e!=null&&typeof e=="object"&&(e[R]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function Le(e,t=new Set){let n,o,i,r;if(n=e!=null&&e[$t])return n;if(!at(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let s=0,l=e.length;s<l;s++)i=e[s],(o=Le(i,t))!==i&&(e[s]=o)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const s=Object.keys(e),l=Object.getOwnPropertyDescriptors(e);for(let c=0,v=s.length;c<v;c++)r=s[c],!l[r].get&&(i=e[r],(o=Le(i,t))!==i&&(e[r]=o))}return e}function dt(e,t){let n=e[t];return n||Object.defineProperty(e,t,{value:n=Object.create(null)}),n}function Ge(e,t,n){if(e[t])return e[t];const[o,i]=I(n,{equals:!1,internal:!0});return o.$=i,e[t]=o}function Xn(e,t){const n=Reflect.getOwnPropertyDescriptor(e,t);return!n||n.get||!n.configurable||t===R||t===pe||(delete n.value,delete n.writable,n.get=()=>e[R][t]),n}function Qt(e){_t()&&Ge(dt(e,pe),Yt)()}function Yn(e){return Qt(e),Reflect.ownKeys(e)}const Jn={get(e,t,n){if(t===$t)return e;if(t===R)return n;if(t===mt)return Qt(e),n;const o=dt(e,pe),i=o[t];let r=i?i():e[t];if(t===pe||t===J||t==="__proto__")return r;if(!i){const s=Object.getOwnPropertyDescriptor(e,t);_t()&&(typeof r!="function"||e.hasOwnProperty(t))&&!(s&&s.get)&&(r=Ge(o,t,r)())}return at(r)?Jt(r):r},has(e,t){return t===$t||t===R||t===mt||t===pe||t===J||t==="__proto__"?!0:(_t()&&Ge(dt(e,J),t)(),t in e)},set(){return!0},deleteProperty(){return!0},ownKeys:Yn,getOwnPropertyDescriptor:Xn};function ct(e,t,n,o=!1){if(!o&&e[t]===n)return;const i=e[t],r=e.length;n===void 0?(delete e[t],e[J]&&e[J][t]&&i!==void 0&&e[J][t].$()):(e[t]=n,e[J]&&e[J][t]&&i===void 0&&e[J][t].$());let s=dt(e,pe),l;if((l=Ge(s,t,i))&&l.$(()=>n),Array.isArray(e)&&e.length!==r){for(let c=e.length;c<r;c++)(l=s[c])&&l.$();(l=Ge(s,"length",r))&&l.$(e.length)}(l=s[Yt])&&l.$()}function en(e,t){const n=Object.keys(t);for(let o=0;o<n.length;o+=1){const i=n[o];ct(e,i,t[i])}}function Qn(e,t){if(typeof t=="function"&&(t=t(e)),t=Le(t),Array.isArray(t)){if(e===t)return;let n=0,o=t.length;for(;n<o;n++){const i=t[n];e[n]!==i&&ct(e,n,i)}ct(e,"length",o)}else en(e,t)}function Re(e,t,n=[]){let o,i=e;if(t.length>1){o=t.shift();const s=typeof o,l=Array.isArray(e);if(Array.isArray(o)){for(let c=0;c<o.length;c++)Re(e,[o[c]].concat(t),n);return}else if(l&&s==="function"){for(let c=0;c<e.length;c++)o(e[c],c)&&Re(e,[c].concat(t),n);return}else if(l&&s==="object"){const{from:c=0,to:v=e.length-1,by:d=1}=o;for(let a=c;a<=v;a+=d)Re(e,[a].concat(t),n);return}else if(t.length>1){Re(e[o],t,[o].concat(n));return}i=e[o],n=[o].concat(n)}let r=t[0];typeof r=="function"&&(r=r(i,n),r===i)||o===void 0&&r==null||(r=Le(r),o===void 0||at(i)&&at(r)&&!Array.isArray(r)?en(i,r):ct(e,o,r))}function tn(...[e,t]){const n=Le(e||{}),o=Array.isArray(n),i=Jt(n);function r(...s){Sn(()=>{o&&s.length===1?Qn(n,s[0]):Re(n,s)})}return[i,r]}const nn="_J-",on={designId:void 0,designOpacity:.5,designPosition:{x:0,y:0},designScale:1,showDesignOverlay:!1,lockDesignOverlay:!1,showVerticalRhythmOverlay:!1,verticalRhythmHeight:"8px",verticalRhythmColor:"rgba(255, 0, 0, .05)",showGridSystemOverlay:!1,activeGridSystemId:"default",gridSystemColor:"rgba(255, 0, 0, .05)",appPosition:"bottom"};function eo(e){const t=localStorage.getItem(nn+e);return t?JSON.parse(t):on[e]}const to=Object.keys(on).reduce((e,t)=>({...e,[t]:eo(t)}),{}),[f,no]=tn(to);function G(e){Object.entries(e).forEach(([t,n])=>{localStorage.setItem(nn+t,JSON.stringify(n))}),no(t=>({...t,...e}))}const oo={showAlignmentPopover:!1,showGridSettingsPanel:!1,showAllDesignsPanel:!1,designUrl:void 0,designSize:{width:0,height:0},designOriginalSize:{width:0,height:0},designBufferedPosition:{x:0,y:0},isSolidMode:!1,isZoomMode:!1,isDragging:!1,enableAnimation:!1,errorMessage:void 0},[C,M]=tn(oo),u={designCard__button:"_PM--0K",addGridButton:"_PM-nSt",table__button:"_PM-uxq",fieldset:"_PM-CUZ",gridSettingBox__toggleButton:"_PM-gUL",panel__button:"_PM-fL3",alignmentButton:"_PM-BsK",menuButton:"_PM-nRD",hide:"_PM-1LW",app:"_PM-aop",noEvents:"_PM--Uf",top:"_PM-H81",toast:"_PM-6di",toast__message:"_PM--p1",menuBar:"_PM-6Uc",rotate:"_PM-0BL",opacityButton:"_PM-Ms2",opacityButton__value:"_PM-8ZO",alignmentPopover:"_PM-iiG",scaleButton:"_PM-ykA",scaleButton__value:"_PM-T3K",coordinates:"_PM-XPp",panel:"_PM-ZDk",panel__contentWrapper:"_PM-1Gp",panel__content:"_PM--Xs",show:"_PM-Pgi",panel__footer:"_PM-ea1",gridSettingBox:"_PM-F7y",gridSettingBox__header:"_PM-NMj",gridSettingBox__heading:"_PM-PaA",enabled:"_PM-dtI",tableWrapper:"_PM-OwQ",table:"_PM-XPo",table__bgroup:"_PM-92c",activeGridButton:"_PM-FWS",active:"_PM-En3",allDesignsList:"_PM-6J2",designCard:"_PM-9BG",designCard__img:"_PM--3m",current:"_PM-L-M",uploadButton:"_PM-zF6",uploadButton__icon:"_PM-cqR",uploadButton__text:"_PM-50o",overlayContainer:"_PM-Qrp",designOverlay:"_PM-hUT",animation:"_PM-jws",locked:"_PM-R39",solid:"_PM-030",verticalRhythmOverlay:"_PM-Bit",gridSystemOverlay:"_PM-qJ0",center:"_PM-Ej5",left:"_PM-64m",right:"_PM-SHi"};var io=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"stroke=currentColor stroke-width=1.5></path><circle cx=16.5 cy=7.5 r=1.5 stroke=currentColor stroke-width=1.5></circle><path d="M16 22C15.3805 19.7749 13.9345 17.7821 11.8765 16.3342C9.65761 14.7729 6.87163 13.9466 4.01569 14.0027C3.67658 14.0019 3.33776 14.0127 3 14.0351"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M13 18C14.7015 16.6733 16.5345 15.9928 18.3862 16.0001C19.4362 15.999 20.4812 16.2216 21.5 16.6617"stroke=currentColor stroke-width=1.5 stroke-linejoin=round>');const ro=(e={})=>(()=>{var t=io();return E(t,e,!0),t})();var so=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><circle cx=16.5 cy=7.5 r=1.5 stroke=currentColor stroke-width=1.5></circle><path d="M2 14.1354C2.66663 14.0455 3.3406 14.0011 4.01569 14.0027C6.87163 13.9466 9.65761 14.7729 11.8765 16.3342C13.9345 17.7821 15.3805 19.7749 16 22"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M13.5 17.5C14.5 16.5 15.1772 16.2768 16 16"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M20 20.2131C18.6012 21.5 16.3635 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1087C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.6364 2.5 5.3987 3.78701 3.99988"stroke=currentColor stroke-width=1.5></path><path d="M20.0002 16C20.5427 16 21.048 16.2945 21.3967 16.5638C21.5 15.3693 21.5 13.8825 21.5 12C21.5 7.52166 21.5 5.28249 20.1088 3.89124C18.7175 2.5 16.4783 2.5 12 2.5C9.59086 2.5 7.82972 2.5 6.5 2.71659"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M2 2L22 22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const lo=(e={})=>(()=>{var t=so();return E(t,e,!0),t})();var ao=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M22 16C21.4102 15.3932 19.8403 13 19 13C18.1597 13 16.5898 15.3932 16 16M19 14L19 21"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M15.0035 21H12.0027C7.28739 21 4.92973 21 3.46487 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38042 4.53806C2.6516 4.05227 3.05255 3.65142 3.53848 3.38032C4.22017 3 5.12865 3 6.94562 3C8.10968 3 8.69172 3 9.20122 3.19101C10.3645 3.62712 10.8442 4.68358 11.3691 5.73313L12.0027 7M8.00163 7H16.754C18.8613 7 19.9149 7 20.6718 7.50559C20.9995 7.72447 21.2808 8.00572 21.4997 8.33329C21.8937 8.92282 21.9808 9.69244 22 11"stroke=currentColor stroke-width=1.5 stroke-linecap=round>');const co=(e={})=>(()=>{var t=ao();return E(t,e,!0),t})();var uo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M4.00781 4.99913C4.59743 4.39256 6.16671 2.00049 7.00666 2.00049C7.84661 2.00049 9.41589 4.39256 10.0055 4.99913M7.00666 2.84907V21.9995"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M19.0023 13.995C19.6088 14.5846 22.0011 16.1538 22.0011 16.9937C22.0011 17.8336 19.6088 19.4028 19.0023 19.9923M21.1906 16.9939H1.99805"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const ho=(e={})=>(()=>{var t=uo();return E(t,e,!0),t})();var go=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M16.502 7.99988C17.3458 7.99988 18.3198 7.9165 18.801 8.74988C19.002 9.09795 19.002 9.56526 19.002 10.4999V11.4999C19.002 12.4345 19.002 12.9018 18.801 13.2499C18.3198 14.0832 17.3458 13.9999 16.502 13.9999C15.6581 13.9999 14.6841 14.0832 14.2029 13.2499C14.002 12.9018 14.002 12.4345 14.002 11.4999L14.002 10.4999C14.002 9.56526 14.002 9.09795 14.2029 8.74988C14.6841 7.9165 15.6581 7.99988 16.502 7.99988Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M7.50195 7.99988C8.34585 7.99988 9.31984 7.9165 9.80099 8.74988C10.002 9.09795 10.002 9.56526 10.002 10.4999L10.002 17.4999C10.002 18.4345 10.002 18.9018 9.80099 19.2499C9.31984 20.0832 8.34585 19.9999 7.50195 19.9999C6.65806 19.9999 5.68406 20.0832 5.20292 19.2499C5.00195 18.9018 5.00195 18.4345 5.00195 17.4999L5.00195 10.4999C5.00195 9.56526 5.00195 9.09795 5.20292 8.74988C5.68406 7.9165 6.65806 7.99988 7.50195 7.99988Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 4L2 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const fo=(e={})=>(()=>{var t=go();return E(t,e,!0),t})();var vo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M16.502 10.0023C17.3458 10.0023 18.3198 9.91895 18.801 10.7523C19.002 11.1004 19.002 11.5677 19.002 12.5023V13.5023C19.002 14.4369 19.002 14.9042 18.801 15.2523C18.3198 16.0857 17.3458 16.0023 16.502 16.0023C15.6581 16.0023 14.6841 16.0857 14.2029 15.2523C14.002 14.9042 14.002 14.4369 14.002 13.5023L14.002 12.5023C14.002 11.5677 14.002 11.1004 14.2029 10.7523C14.6841 9.91895 15.6581 10.0023 16.502 10.0023Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M7.50195 4.00232C8.34585 4.00232 9.31984 3.91895 9.80099 4.75232C10.002 5.10039 10.002 5.5677 10.002 6.50232L10.002 13.5023C10.002 14.4369 10.002 14.9042 9.80099 15.2523C9.31984 16.0857 8.34585 16.0023 7.50195 16.0023C6.65806 16.0023 5.68406 16.0857 5.20292 15.2523C5.00195 14.9042 5.00195 14.4369 5.00195 13.5023L5.00195 6.50232C5.00195 5.5677 5.00195 5.10039 5.20292 4.75232C5.68406 3.91895 6.65806 4.00232 7.50195 4.00232Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 20L2 20"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const wo=(e={})=>(()=>{var t=vo();return E(t,e,!0),t})();var yo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M8.00232 7.5C8.00232 6.65611 7.91895 5.68211 8.75232 5.20096C9.10039 5 9.5677 5 10.5023 5H11.5023C12.4369 5 12.9042 5 13.2523 5.20096C14.0857 5.68211 14.0023 6.65611 14.0023 7.5C14.0023 8.34389 14.0857 9.31789 13.2523 9.79904C12.9042 10 12.4369 10 11.5023 10H10.5023C9.5677 10 9.10039 10 8.75232 9.79904C7.91895 9.31789 8.00232 8.34389 8.00232 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M8.00232 16.5C8.00232 15.6561 7.91895 14.6821 8.75232 14.201C9.10039 14 9.5677 14 10.5023 14H17.5023C18.4369 14 18.9042 14 19.2523 14.201C20.0857 14.6821 20.0023 15.6561 20.0023 16.5C20.0023 17.3439 20.0857 18.3179 19.2523 18.799C18.9042 19 18.4369 19 17.5023 19H10.5023C9.5677 19 9.10039 19 8.75232 18.799C7.91895 18.3179 8.00232 17.3439 8.00232 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4 2V22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Co=(e={})=>(()=>{var t=yo();return E(t,e,!0),t})();var mo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M10.0004 7.5C10.0004 6.65611 9.91699 5.68211 10.7504 5.20096C11.0984 5 11.5657 5 12.5004 5H13.5004C14.435 5 14.9023 5 15.2504 5.20096C16.0837 5.68211 16.0004 6.65611 16.0004 7.5C16.0004 8.34389 16.0837 9.31789 15.2504 9.79904C14.9023 10 14.435 10 13.5004 10H12.5004C11.5657 10 11.0984 10 10.7504 9.79904C9.91699 9.31789 10.0004 8.34389 10.0004 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4.00036 16.5C4.00036 15.6561 3.91699 14.6821 4.75036 14.201C5.09844 14 5.56575 14 6.50036 14H13.5004C14.435 14 14.9023 14 15.2504 14.201C16.0837 14.6821 16.0004 15.6561 16.0004 16.5C16.0004 17.3439 16.0837 18.3179 15.2504 18.799C14.9023 19 14.435 19 13.5004 19H6.50036C5.56575 19 5.09844 19 4.75036 18.799C3.91699 18.3179 4.00036 17.3439 4.00036 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M20 2V22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const po=(e={})=>(()=>{var t=mo();return E(t,e,!0),t})();var _o=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 19L12 22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M12 10L12 14"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M12 2L12 5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M8.00036 7.5C8.00036 6.65611 7.91699 5.68211 8.75036 5.20096C9.09844 5 9.56575 5 10.5004 5H13.5004C14.435 5 14.9023 5 15.2504 5.20096C16.0837 5.68211 16.0004 6.65611 16.0004 7.5C16.0004 8.34389 16.0837 9.31789 15.2504 9.79904C14.9023 10 14.435 10 13.5004 10H10.5004C9.56575 10 9.09844 10 8.75036 9.79904C7.91699 9.31789 8.00036 8.34389 8.00036 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4.00036 16.5C4.00036 15.6561 3.91699 14.6821 4.75036 14.201C5.09844 14 5.56575 14 6.50036 14H17.5004C18.435 14 18.9023 14 19.2504 14.201C20.0837 14.6821 20.0004 15.6561 20.0004 16.5C20.0004 17.3439 20.0837 18.3179 19.2504 18.799C18.9023 19 18.435 19 17.5004 19H6.50036C5.56575 19 5.09844 19 4.75036 18.799C3.91699 18.3179 4.00036 17.3439 4.00036 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const bo=(e={})=>(()=>{var t=_o();return E(t,e,!0),t})();var ko=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const So=(e={})=>(()=>{var t=ko();return E(t,e,!0),t})();var Po=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 16.5V14.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M4.2678 18.8447C4.49268 20.515 5.87612 21.8235 7.55965 21.9009C8.97626 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.8789 17.7547 20 16.6376 20 15.5C20 14.3624 19.8789 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97626 9.03397 7.55965 9.09909C5.87612 9.17649 4.49268 10.485 4.2678 12.1553C4.12104 13.2453 3.99999 14.3624 3.99999 15.5C3.99999 16.6376 4.12104 17.7547 4.2678 18.8447Z"stroke=currentColor stroke-width=1.5></path><path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Mo=(e={})=>(()=>{var t=Po();return E(t,e,!0),t})();var $o=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 16.5V14.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12105 13.2453 4 14.3624 4 15.5C4 16.6376 4.12105 17.7547 4.26781 18.8447Z"stroke=currentColor stroke-width=1.5></path><path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C13.9593 2 15.5 3.5 16 5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const xo=(e={})=>(()=>{var t=$o();return E(t,e,!0),t})();var Ao=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M6.08938 14.9992C5.71097 14.1486 5.5 13.2023 5.5 12.2051C5.5 8.50154 8.41015 5.49921 12 5.49921C15.5899 5.49921 18.5 8.50154 18.5 12.2051C18.5 13.2023 18.289 14.1486 17.9106 14.9992"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M12 1.99921V2.99921"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 11.9992H21"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M3 11.9992H2"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M19.0704 4.92792L18.3633 5.63503"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M5.6368 5.636L4.92969 4.92889"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M14.517 19.3056C15.5274 18.9788 15.9326 18.054 16.0466 17.1238C16.0806 16.8459 15.852 16.6154 15.572 16.6154L8.47685 16.6156C8.18725 16.6156 7.95467 16.8614 7.98925 17.1489C8.1009 18.0773 8.3827 18.7555 9.45345 19.3056M14.517 19.3056C14.517 19.3056 9.62971 19.3056 9.45345 19.3056M14.517 19.3056C14.3955 21.2506 13.8338 22.0209 12.0068 21.9993C10.0526 22.0354 9.60303 21.0833 9.45345 19.3056"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Oo=(e={})=>(()=>{var t=Ao();return E(t,e,!0),t})();var Eo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28248 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28248 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M2.5 8.99976L21.5 8.99976"stroke=currentColor stroke-width=1.5></path><path d="M2.5 14.9998L21.5 14.9998"stroke=currentColor stroke-width=1.5></path><path d="M16 21.5L16 2.5"stroke=currentColor stroke-width=1.5></path><path d="M8 21.4998L8 2.49976"stroke=currentColor stroke-width=1.5>');const Do=(e={})=>(()=>{var t=Eo();return E(t,e,!0),t})();var Bo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M9.66676 22L14.3334 22M3.01509 16.5C2.99793 16.0004 2.99705 15.5001 2.99855 15M20.9849 16.5C21.0021 16.0004 21.003 15.5001 21.0015 15M3.53709 19.2547C4.02122 20.213 4.80249 20.9914 5.76305 21.4718M18.1797 21.5C19.1665 21.0221 19.9692 20.232 20.4629 19.2547"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M5.50502 12C3.64422 12 3.00695 11.4596 3.00695 9.5C3.00695 6.96832 2.75702 4.04633 5.25521 2.60289C6.29863 2 7.69947 2 10.5012 2L13.4988 2C16.3005 2 17.7014 2 18.7448 2.60289C21.243 4.04633 20.9931 6.96832 20.9931 9.5C20.9931 11.3622 20.453 12 18.495 12L5.50502 12Z"stroke=currentColor stroke-width=1.5>');const Lo=(e={})=>(()=>{var t=Bo();return E(t,e,!0),t})();var Go=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=20 height=20 color=#000000 fill=none><path d="M5.32171 9.6829C7.73539 5.41196 8.94222 3.27648 10.5983 2.72678C11.5093 2.42437 12.4907 2.42437 13.4017 2.72678C15.0578 3.27648 16.2646 5.41196 18.6783 9.6829C21.092 13.9538 22.2988 16.0893 21.9368 17.8293C21.7376 18.7866 21.2469 19.6548 20.535 20.3097C19.241 21.5 16.8274 21.5 12 21.5C7.17265 21.5 4.75897 21.5 3.46496 20.3097C2.75308 19.6548 2.26239 18.7866 2.06322 17.8293C1.70119 16.0893 2.90803 13.9538 5.32171 9.6829Z"stroke=currentColor stroke-width=2></path><path d="M11.992 16H12.001"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path><path d="M12 13L12 8.99997"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');const Ro=(e={})=>(()=>{var t=Go();return E(t,e,!0),t})();var jo=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M9.5 16.5L9.5 10.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M14.5 16.5L14.5 10.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round>');const rn=(e={})=>(()=>{var t=jo();return E(t,e,!0),t})();var Io=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z"stroke=currentColor stroke-width=1.5></path><path d="M8 12.5L10.5 15L16 9"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const No=(e={})=>(()=>{var t=Io();return E(t,e,!0),t})();var To=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M13 3.00231C12.5299 3 12.0307 3 11.5 3C7.02166 3 4.78249 3 3.39124 4.39124C2 5.78249 2 8.02166 2 12.5C2 16.9783 2 19.2175 3.39124 20.6088C4.78249 22 7.02166 22 11.5 22C15.9783 22 18.2175 22 19.6088 20.6088C20.9472 19.2703 20.998 17.147 20.9999 13"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M2 14.1354C2.61902 14.0455 3.24484 14.0011 3.87171 14.0027C6.52365 13.9466 9.11064 14.7729 11.1711 16.3342C13.082 17.7821 14.4247 19.7749 15 22"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M21 16.8962C19.8246 16.3009 18.6088 15.9988 17.3862 16.0001C15.5345 15.9928 13.7015 16.6733 12 18"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M17 4.5C17.4915 3.9943 18.7998 2 19.5 2M22 4.5C21.5085 3.9943 20.2002 2 19.5 2M19.5 2V10"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Uo=(e={})=>(()=>{var t=To();return E(t,e,!0),t})();var Ho=k('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path id=_pixel-mirror-toggle-trigger d="M19 12C19 13.6569 17.6569 15 16 15C14.3431 15 13 13.6569 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12Z"stroke=currentColor stroke-width=1.5></path><path d="M16 6H8C4.68629 6 2 8.68629 2 12C2 15.3137 4.68629 18 8 18H16C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6Z"stroke=currentColor stroke-width=1.5>');const sn=(e={})=>(()=>{var t=Ho();return E(t,e,!0),t})();var xt=k("<div>"),Wo=k("<div id=_pixel-mirror-app><div><button></button><button></button><button><span></span></button><button></button><button><span>x</span></button><button></button><button></button><button></button></div><div>x:<!>, y:</div><div id=_pixel-mirror-popover><button></button><button></button><button></button><button></button><button>"),Vo=k("<div><div><div><div><div><h3>Vertical Rhythm</h3><button><span></span></button></div><fieldset><legend>Vertical Rhythm Height</legend><input type=text><button>Update</button></fieldset><fieldset><legend>Vertical Rhythm Color</legend><input type=text><button>Update</button></fieldset></div><div><div><h3>Grid System</h3><button><span></span></button></div><fieldset><legend>Grid System Color</legend><input type=text><button>Update</button></fieldset><div><table><thead><tr><th>Width</th><th>Columns</th><th>Gutter Width</th><th>Outer Gutter</th><th>Position</th><th></th></tr></thead><tbody></tbody><tfoot><tr><td><input type=text placeholder=1140px></td><td><input type=text placeholder=12></td><td><input type=text placeholder=24px></td><td><select><option value=1>Yes</option><option value=0>No</option></select></td><td><select><option value=center>Center</option><option value=left>Left</option><option value=right>Right</option></select></td><td colspan=2><button>Add Grid</button></td></tr></tfoot></table></div></div></div></div><div><button>Reset Grid Settings</button><button>Close"),Zo=k("<tr><td></td><td></td><td></td><td></td><td></td><td><button></button><button>"),zo=k('<div><img alt=""><button>'),qo=k("<button>Clear Designs"),Ko=k("<div><div><div><div><label><span>Upload</span><input type=file accept=image/jpeg,image/png multiple></label></div></div></div><div><button>Close"),Fo=k('<img alt="">'),Xo=k("<div><div>"),Yo=k("<div id=_pixel-mirror-toast><span>");function z(e){const t=e instanceof Error?e.message:"An error occurred.";M("errorMessage",t),console.error(t)}function Jo(){const[e,t]=I(!1),n=ge(()=>C.showAllDesignsPanel?{width:"800px",height:"600px"}:C.showGridSettingsPanel?{width:"680px",height:"600px"}:{width:"380px",height:"48px"});Oe(()=>{T.init().then(()=>t(!0)).catch(z)});const o=g=>{g.target.closest("#_pixel-mirror-app")||(M({showAllDesignsPanel:!1,showGridSettingsPanel:!1}),window.removeEventListener("mousedown",o))};Ae(()=>{!C.showAllDesignsPanel&&!C.showGridSettingsPanel||(window.addEventListener("mousedown",o),Ee(()=>{window.removeEventListener("mousedown",o)}))});const i=()=>{G({showDesignOverlay:!f.showDesignOverlay})},r=()=>{G({lockDesignOverlay:!f.lockDesignOverlay})},s=()=>{G({designOpacity:.5})},l=()=>{f.showDesignOverlay&&M("showAlignmentPopover",!0)},c=g=>{const m=g.relatedTarget;m!=null&&m.closest("#_pixel-mirror-popover")||M("showAlignmentPopover",!1)},v=g=>{const{clientWidth:m,scrollHeight:$}=document.documentElement,{width:A,height:D}=C.designSize,{x:U,y:S}=f.designPosition,P={top:{x:U,y:0},right:{x:m-A,y:S},bottom:{x:U,y:$-D},left:{x:0,y:S},center:{x:(m-A)/2|0,y:S},"top-center":{x:(m-A)/2|0,y:0}}[g];P.x===U&&P.y===S||(M({designBufferedPosition:P,enableAnimation:!0}),G({designPosition:P}))},d=()=>{const g=f.designScale===.5?1:.5;M({designSize:{width:C.designOriginalSize.width*g,height:C.designOriginalSize.height*g},enableAnimation:!0}),G({designScale:g})},a=()=>{const g=f.appPosition==="top"?"bottom":"top";G({appPosition:g})};return p(F,{get when(){return e()},get children(){return[(()=>{var g=xt();return _(g,p(ni,{}),null),_(g,p(F,{get when(){return f.showVerticalRhythmOverlay&&!C.isZoomMode},get children(){return p(oi,{})}}),null),_(g,p(F,{get when(){return f.showGridSystemOverlay&&!C.isZoomMode},get children(){return p(ii,{})}}),null),x(()=>w(g,u.overlayContainer)),g})(),(()=>{var g=Wo(),m=g.firstChild,$=m.firstChild,A=$.nextSibling,D=A.nextSibling,U=D.firstChild,S=D.nextSibling,P=S.nextSibling,b=P.firstChild,Z=b.firstChild,q=P.nextSibling,Q=q.nextSibling,re=Q.nextSibling,X=m.nextSibling,_e=X.firstChild,B=_e.nextSibling;B.nextSibling;var W=X.nextSibling,K=W.firstChild,se=K.nextSibling,le=se.nextSibling,fe=le.nextSibling,ae=fe.nextSibling;return _(g,p(F,{get when(){return!!C.errorMessage},get children(){return p(ri,{})}}),m),$.$$click=i,_($,p(F,{get when(){return f.showDesignOverlay},get fallback(){return p(lo,{})},get children(){return p(ro,{})}})),A.$$click=r,_(A,p(F,{get when(){return f.lockDesignOverlay},get fallback(){return p(xo,{})},get children(){return p(Mo,{})}})),D.$$click=s,_(U,()=>Math.floor(f.designOpacity*100)),_(D,p(Oo,{}),null),S.addEventListener("mouseleave",c),S.addEventListener("mouseenter",l),S.$$click=()=>v("top-center"),_(S,p(ho,{})),P.$$click=d,_(b,(()=>{var y=ge(()=>f.designScale===.5);return()=>y()?".5":f.designScale.toString()})(),Z),_(P,p(So,{}),null),q.$$click=()=>M("showGridSettingsPanel",!0),_(q,p(Do,{})),Q.$$click=()=>M("showAllDesignsPanel",!0),_(Q,p(co,{})),re.$$click=a,_(re,p(Lo,{})),_(X,()=>C.designBufferedPosition.x,B),_(X,()=>C.designBufferedPosition.y,null),W.addEventListener("mouseleave",c),K.$$click=()=>v("left"),_(K,p(Co,{})),se.$$click=()=>v("top"),_(se,p(fo,{})),le.$$click=()=>v("center"),_(le,p(bo,{})),fe.$$click=()=>v("bottom"),_(fe,p(wo,{})),ae.$$click=()=>v("right"),_(ae,p(po,{})),_(g,p(F,{get when(){return C.showGridSettingsPanel},get children(){return p(Qo,{})}}),null),_(g,p(F,{get when(){return C.showAllDesignsPanel},get children(){return p(ti,{})}}),null),x(y=>{var be=N(u.app,C.isSolidMode&&u.hide,C.isDragging&&u.noEvents,f.appPosition==="top"&&u.top),At=n(),ee=N(u.menuBar,(C.showAllDesignsPanel||C.showGridSettingsPanel)&&u.hide),ut=u.menuButton,ve=!C.designUrl,ht=u.menuButton,te=!f.showDesignOverlay,gt=N(u.menuButton,u.opacityButton),je=!f.showDesignOverlay,ke=u.opacityButton__value,Ie=u.menuButton,we=!f.showDesignOverlay,Ne=N(u.menuButton,u.scaleButton),de=!f.showDesignOverlay,ft=u.scaleButton__value,ne=u.menuButton,vt=u.menuButton,Te=N(u.menuButton,f.appPosition==="top"&&u.rotate),Ue=N(u.coordinates,(!f.showDesignOverlay||C.showAlignmentPopover||C.showAllDesignsPanel||C.showGridSettingsPanel)&&u.hide),wt=N(u.alignmentPopover,!C.showAlignmentPopover&&u.hide),He=u.alignmentButton,yt=u.alignmentButton,Ct=u.alignmentButton,We=u.alignmentButton,Se=u.alignmentButton;return be!==y.e&&w(g,y.e=be),y.t=Pt(g,At,y.t),ee!==y.a&&w(m,y.a=ee),ut!==y.o&&w($,y.o=ut),ve!==y.i&&($.disabled=y.i=ve),ht!==y.n&&w(A,y.n=ht),te!==y.s&&(A.disabled=y.s=te),gt!==y.h&&w(D,y.h=gt),je!==y.r&&(D.disabled=y.r=je),ke!==y.d&&w(U,y.d=ke),Ie!==y.l&&w(S,y.l=Ie),we!==y.u&&(S.disabled=y.u=we),Ne!==y.c&&w(P,y.c=Ne),de!==y.w&&(P.disabled=y.w=de),ft!==y.m&&w(b,y.m=ft),ne!==y.f&&w(q,y.f=ne),vt!==y.y&&w(Q,y.y=vt),Te!==y.g&&w(re,y.g=Te),Ue!==y.p&&w(X,y.p=Ue),wt!==y.b&&w(W,y.b=wt),He!==y.T&&w(K,y.T=He),yt!==y.A&&w(se,y.A=yt),Ct!==y.O&&w(le,y.O=Ct),We!==y.I&&w(fe,y.I=We),Se!==y.S&&w(ae,y.S=Se),y},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0,l:void 0,u:void 0,c:void 0,w:void 0,m:void 0,f:void 0,y:void 0,g:void 0,p:void 0,b:void 0,T:void 0,A:void 0,O:void 0,I:void 0,S:void 0}),g})()]}})}function Qo(){const[e,t]=I(f.verticalRhythmHeight),[n,o]=I(f.verticalRhythmColor),[i,r]=I([]),[s,l]=I(f.gridSystemColor),[c,v]=I(""),[d,a]=I(""),[g,m]=I(""),[$,A]=I(!0),[D,U]=I("center");Oe(()=>{T.getAllGridSets().then(B=>r(B)).catch(z)});const S=()=>{G({showVerticalRhythmOverlay:!f.showVerticalRhythmOverlay})},P=()=>{G({verticalRhythmHeight:e()})},b=()=>{G({verticalRhythmColor:n()})},Z=()=>{G({showGridSystemOverlay:!f.showGridSystemOverlay})},q=()=>{G({gridSystemColor:s()})},Q=()=>{const B={width:/^\d+$/.test(c())?`${c()}px`:c(),columns:+d(),gutterWidth:/^\d+$/.test(g())?`${g()}px`:g(),isGutterOnOutside:$(),position:D()};T.addGridSet(B).then(W=>{r(K=>[...K,W]),v(""),a(""),m(""),A(!0),U("center")}).catch(z)},re=B=>{T.deleteGridSet(B).then(()=>{r(W=>W.filter(K=>K.id!==B))}).catch(z)},X=B=>{G({activeGridSystemId:B})},_e=()=>{T.resetGridSets().then(B=>{r(B),G({activeGridSystemId:"default"})}).catch(z)};return(()=>{var B=Vo(),W=B.firstChild,K=W.firstChild,se=K.firstChild,le=se.firstChild,fe=le.firstChild,ae=fe.nextSibling,y=ae.firstChild,be=le.nextSibling,At=be.firstChild,ee=At.nextSibling,ut=ee.nextSibling,ve=be.nextSibling,ht=ve.firstChild,te=ht.nextSibling,gt=te.nextSibling,je=se.nextSibling,ke=je.firstChild,Ie=ke.firstChild,we=Ie.nextSibling,Ne=we.firstChild,de=ke.nextSibling,ft=de.firstChild,ne=ft.nextSibling,vt=ne.nextSibling,Te=de.nextSibling,Ue=Te.firstChild,wt=Ue.firstChild,He=wt.nextSibling,yt=He.nextSibling,Ct=yt.firstChild,We=Ct.firstChild,Se=We.firstChild,ln=We.nextSibling,Ot=ln.firstChild,an=ln.nextSibling,Et=an.firstChild,dn=an.nextSibling,cn=dn.firstChild,un=dn.nextSibling,hn=un.firstChild,si=un.nextSibling,Dt=si.firstChild,gn=W.nextSibling,Bt=gn.firstChild,fn=Bt.nextSibling;return ae.$$click=S,_(ae,p(sn,{}),y),_(y,()=>f.showVerticalRhythmOverlay?"Enabled":"Disabled"),ee.$$input=h=>t(h.target.value),V(ee,"spellcheck",!1),ut.$$click=P,te.$$input=h=>o(h.target.value),V(te,"spellcheck",!1),gt.$$click=b,we.$$click=Z,_(we,p(sn,{}),Ne),_(Ne,()=>f.showGridSystemOverlay?"Enabled":"Disabled"),ne.$$input=h=>l(h.target.value),V(ne,"spellcheck",!1),vt.$$click=q,_(He,()=>p(St,{get each(){return i()},children:h=>(()=>{var Pe=Zo(),Ve=Pe.firstChild,Ze=Ve.nextSibling,ze=Ze.nextSibling,qe=ze.nextSibling,Ke=qe.nextSibling,Fe=Ke.nextSibling,ce=Fe.firstChild,ue=ce.nextSibling;return _(Ve,()=>h.width),_(Ze,()=>h.columns),_(ze,()=>h.gutterWidth),_(qe,()=>h.isGutterOnOutside?"Yes":"No"),_(Ke,()=>h.position),ce.$$click=()=>re(h.id),_(ce,p(rn,{})),ue.$$click=()=>X(h.id),_(ue,p(No,{})),x(H=>{var Me=N(f.activeGridSystemId===h.id&&u.active),$e=u.table__bgroup,Xe=u.table__button,Ye=i().length==1||f.activeGridSystemId===h.id,Je=N(u.table__button,u.activeGridButton,f.activeGridSystemId===h.id&&u.active),Qe=f.activeGridSystemId===h.id;return Me!==H.e&&w(Pe,H.e=Me),$e!==H.t&&w(Fe,H.t=$e),Xe!==H.a&&w(ce,H.a=Xe),Ye!==H.o&&(ce.disabled=H.o=Ye),Je!==H.i&&w(ue,H.i=Je),Qe!==H.n&&(ue.disabled=H.n=Qe),H},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0}),Pe})()})),Se.$$input=h=>v(h.target.value),V(Se,"spellcheck",!1),Ot.$$input=h=>a(h.target.value),V(Ot,"spellcheck",!1),Et.$$input=h=>m(h.target.value),V(Et,"spellcheck",!1),cn.addEventListener("change",h=>A(!!+h.target.value)),hn.addEventListener("change",h=>U(h.target.value)),Dt.$$click=Q,Bt.$$click=_e,fn.$$click=()=>M("showGridSettingsPanel",!1),x(h=>{var Pe=u.panel,Ve=u.panel__contentWrapper,Ze=N(u.panel__content,!!i().length&&u.show),ze=u.gridSettingBox,qe=u.gridSettingBox__header,Ke=u.gridSettingBox__heading,Fe=N(u.gridSettingBox__toggleButton,f.showVerticalRhythmOverlay&&u.enabled),ce=u.fieldset,ue=e()!==f.verticalRhythmHeight?"italic":void 0,H=u.fieldset,Me=n(),$e=n()!==f.verticalRhythmColor?"italic":void 0,Xe=u.gridSettingBox,Ye=u.gridSettingBox__header,Je=u.gridSettingBox__heading,Qe=N(u.gridSettingBox__toggleButton,f.showGridSystemOverlay&&u.enabled),vn=u.fieldset,Lt=s(),Gt=s()!==f.gridSystemColor?"italic":void 0,wn=u.tableWrapper,yn=u.table,Cn=u.addGridButton,mn=!c()||!d()||!g(),pn=u.panel__footer,_n=u.panel__button,bn=u.panel__button;return Pe!==h.e&&w(B,h.e=Pe),Ve!==h.t&&w(W,h.t=Ve),Ze!==h.a&&w(K,h.a=Ze),ze!==h.o&&w(se,h.o=ze),qe!==h.i&&w(le,h.i=qe),Ke!==h.n&&w(fe,h.n=Ke),Fe!==h.s&&w(ae,h.s=Fe),ce!==h.h&&w(be,h.h=ce),ue!==h.r&&((h.r=ue)!=null?ee.style.setProperty("font-style",ue):ee.style.removeProperty("font-style")),H!==h.d&&w(ve,h.d=H),Me!==h.l&&((h.l=Me)!=null?ve.style.setProperty("background",Me):ve.style.removeProperty("background")),$e!==h.u&&((h.u=$e)!=null?te.style.setProperty("font-style",$e):te.style.removeProperty("font-style")),Xe!==h.c&&w(je,h.c=Xe),Ye!==h.w&&w(ke,h.w=Ye),Je!==h.m&&w(Ie,h.m=Je),Qe!==h.f&&w(we,h.f=Qe),vn!==h.y&&w(de,h.y=vn),Lt!==h.g&&((h.g=Lt)!=null?de.style.setProperty("background",Lt):de.style.removeProperty("background")),Gt!==h.p&&((h.p=Gt)!=null?ne.style.setProperty("font-style",Gt):ne.style.removeProperty("font-style")),wn!==h.b&&w(Te,h.b=wn),yn!==h.T&&w(Ue,h.T=yn),Cn!==h.A&&w(Dt,h.A=Cn),mn!==h.O&&(Dt.disabled=h.O=mn),pn!==h.I&&w(gn,h.I=pn),_n!==h.S&&w(Bt,h.S=_n),bn!==h.W&&w(fn,h.W=bn),h},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0,l:void 0,u:void 0,c:void 0,w:void 0,m:void 0,f:void 0,y:void 0,g:void 0,p:void 0,b:void 0,T:void 0,A:void 0,O:void 0,I:void 0,S:void 0,W:void 0}),x(()=>ee.value=e()),x(()=>te.value=n()),x(()=>ne.value=s()),x(()=>Se.value=c()),x(()=>Ot.value=d()),x(()=>Et.value=g()),x(()=>cn.value=Number($())),x(()=>hn.value=D()),B})()}function ei(e){const[t,n]=I("");return Oe(()=>{const o=new Blob([e.buffer],{type:e.mimeType}),i=URL.createObjectURL(o);n(i)}),Ee(()=>{URL.revokeObjectURL(t())}),(()=>{var o=zo(),i=o.firstChild,r=i.nextSibling;return i.$$click=()=>e.selectDesign(e.id),V(i,"draggable",!1),r.$$click=()=>e.deleteDesign(e.id),_(r,p(rn,{})),x(s=>{var l=N(u.designCard,f.designId===e.id&&u.current),c=u.designCard__img,v=t(),d=u.designCard__button,a=f.designId===e.id;return l!==s.e&&w(o,s.e=l),c!==s.t&&w(i,s.t=c),v!==s.a&&V(i,"src",s.a=v),d!==s.o&&w(r,s.o=d),a!==s.i&&(r.disabled=s.i=a),s},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),o})()}function ti(){const[e,t]=I(!1),[n,o]=I([]);Oe(()=>{T.getAllDesigns().then(a=>{o(a),t(!0)}).catch(z)});const i=a=>{a.length!==0&&T.uploadDesign(a).then(g=>o(m=>[...g,...m])).catch(z)},r=a=>{const g=a.target,m=Array.from(g.files||[]);i(m)},s=a=>{var m;a.preventDefault(),a.stopPropagation();const g=Array.from(((m=a.dataTransfer)==null?void 0:m.files)||[]).filter($=>["image/jpeg","image/png"].includes($.type));i(g)},l=a=>{a.preventDefault(),a.stopPropagation()},c=a=>{f.designId!==a&&(G({designId:a,showDesignOverlay:!0}),M("showAllDesignsPanel",!1))},v=a=>{T.deleteDesign(a).then(()=>o(g=>g.filter(m=>m.id!==a))).catch(z)},d=()=>{T.deleteAllDesigns().then(()=>{o([]),G({designId:"",showDesignOverlay:!1}),C.designUrl&&(URL.revokeObjectURL(C.designUrl),M("designUrl",void 0))}).catch(z)};return(()=>{var a=Ko(),g=a.firstChild,m=g.firstChild,$=m.firstChild,A=$.firstChild,D=A.firstChild,U=D.nextSibling,S=g.nextSibling,P=S.firstChild;return m.addEventListener("dragover",l),m.addEventListener("drop",s),_(A,p(Uo,{get class(){return u.uploadButton__icon}}),D),U.addEventListener("change",r),_($,()=>p(St,{get each(){return n()},children:b=>p(ei,Bn(b,{selectDesign:c,deleteDesign:v}))}),null),_(S,p(F,{get when(){return!!n().length},get children(){var b=qo();return b.$$click=d,x(()=>w(b,u.panel__button)),b}}),P),P.$$click=()=>M("showAllDesignsPanel",!1),x(b=>{var Z=u.panel,q=u.panel__contentWrapper,Q=N(u.panel__content,e()&&u.show),re=u.allDesignsList,X=u.uploadButton,_e=u.uploadButton__text,B=u.panel__footer,W=u.panel__button;return Z!==b.e&&w(a,b.e=Z),q!==b.t&&w(g,b.t=q),Q!==b.a&&w(m,b.a=Q),re!==b.o&&w($,b.o=re),X!==b.i&&w(A,b.i=X),_e!==b.n&&w(D,b.n=_e),B!==b.s&&w(S,b.s=B),W!==b.h&&w(P,b.h=W),b},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0}),a})()}function ni(){Ae(()=>{f.designId&&T.getDesign(f.designId).then(d=>{if(!d)throw new Error("Failed to load design image.");const a=new Blob([d.buffer],{type:d.mimeType}),g=URL.createObjectURL(a);M("designUrl",g)}).catch(z)}),Ae(()=>{f.showDesignOverlay?(window.addEventListener("keydown",s),window.addEventListener("keyup",l)):(window.removeEventListener("keydown",s),window.removeEventListener("keyup",l))}),Ee(()=>{window.removeEventListener("keydown",s),window.removeEventListener("keyup",l)});const e=ge(()=>({width:`${C.designSize.width}px`,height:`${C.designSize.height}px`,opacity:C.isSolidMode?1:f.designOpacity,transform:`translate3D(${C.designBufferedPosition.x}px, ${C.designBufferedPosition.y}px, 0)`,cursor:C.isSolidMode?C.isZoomMode?"zoom-out":"zoom-in":C.isDragging?"grabbing":"grab"})),t=d=>{const a=d.target;M({designSize:{width:a.naturalWidth*f.designScale,height:a.naturalHeight*f.designScale},designOriginalSize:{width:a.naturalWidth,height:a.naturalHeight},designBufferedPosition:f.designPosition})},n=d=>{d.button===0&&(C.isSolidMode?C.isZoomMode?(M({isZoomMode:!1,designSize:{width:C.designOriginalSize.width*f.designScale,height:C.designOriginalSize.height*f.designScale},designBufferedPosition:f.designPosition,enableAnimation:!0}),window.removeEventListener("mousemove",i)):M({isZoomMode:!0,designSize:{width:C.designSize.width*2,height:C.designSize.height*2},designBufferedPosition:{x:innerWidth/2-(d.clientX-C.designBufferedPosition.x)*2,y:innerHeight/2-(d.clientY-C.designBufferedPosition.y)*2},enableAnimation:!0}):f.lockDesignOverlay||(M("isDragging",!0),window.addEventListener("mousemove",o)))},o=d=>{M("designBufferedPosition",a=>({x:a.x+d.movementX,y:a.y+d.movementY}))},i=d=>{M("designBufferedPosition",a=>({x:a.x-d.movementX,y:a.y-d.movementY}))},r=d=>{d.button!==0||!C.isDragging||(M("isDragging",!1),G({designPosition:C.designBufferedPosition}),window.removeEventListener("mousemove",o))},s=d=>{if(!["INPUT","SELECT"].includes(d.target.tagName))if(d.key==="Control")window.addEventListener("wheel",c,{passive:!1});else if(d.key===" ")d.preventDefault(),C.isDragging||M("isSolidMode",!0);else if(d.key.startsWith("Arrow")){d.preventDefault();const[a,g]={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]}[d.key]||[0,0];M("designBufferedPosition",{x:f.designPosition.x+a,y:f.designPosition.y+g})}else d.key==="Escape"&&G({lockDesignOverlay:!f.lockDesignOverlay})},l=d=>{["INPUT","SELECT"].includes(d.target.tagName)||(d.key==="Control"?window.removeEventListener("wheel",c):d.key===" "?C.isZoomMode?(M({isSolidMode:!1,isZoomMode:!1,designSize:{width:C.designOriginalSize.width*f.designScale,height:C.designOriginalSize.height*f.designScale},designBufferedPosition:f.designPosition,enableAnimation:!0}),window.removeEventListener("mousemove",i)):M("isSolidMode",!1):d.key.startsWith("Arrow")&&G({designPosition:C.designBufferedPosition}))},c=d=>{d.preventDefault();const a=d.deltaY>0?.05:-.05,g=Math.round((f.designOpacity+a)*100)/100;G({designOpacity:Math.max(.1,Math.min(.9,g))})},v=()=>{M("enableAnimation",!1),C.isZoomMode&&window.addEventListener("mousemove",i)};return(()=>{var d=Fo();return d.addEventListener("transitionend",v),d.addEventListener("mouseleave",r),d.$$mouseup=r,d.$$mousedown=n,d.addEventListener("load",t),V(d,"draggable",!1),x(a=>{var g=C.designUrl,m=N(u.designOverlay,C.isSolidMode&&u.solid,C.enableAnimation&&u.animation,f.lockDesignOverlay&&!C.isSolidMode&&u.locked,(!C.designUrl||!f.showDesignOverlay)&&u.hide),$=e();return g!==a.e&&V(d,"src",a.e=g),m!==a.t&&w(d,a.t=m),a.a=Pt(d,$,a.a),a},{e:void 0,t:void 0,a:void 0}),d})()}function oi(){return(()=>{var e=xt();return x(t=>{var n=u.verticalRhythmOverlay,o=`linear-gradient(to bottom, ${f.verticalRhythmColor} ${f.verticalRhythmHeight}, transparent ${f.verticalRhythmHeight})`,i=`100% ${f.verticalRhythmHeight.replace(/\d+/,r=>String(+r*2))}`;return n!==t.e&&w(e,t.e=n),o!==t.t&&((t.t=o)!=null?e.style.setProperty("background-image",o):e.style.removeProperty("background-image")),i!==t.a&&((t.a=i)!=null?e.style.setProperty("background-size",i):e.style.removeProperty("background-size")),t},{e:void 0,t:void 0,a:void 0}),e})()}function ii(){const[e,t]=I(void 0);return Ae(()=>{f.activeGridSystemId&&T.getGridSet(f.activeGridSystemId).then(n=>{if(!n)throw new Error("Failed to load grid system.");t(n)}).catch(z)}),p(F,{get when(){return!!e()},get children(){var n=Xo(),o=n.firstChild;return o.style.setProperty("box-sizing","border-box"),o.style.setProperty("display","flex"),_(o,p(St,{get each(){return Array.from({length:e().columns})},children:()=>(()=>{var i=xt();return i.style.setProperty("flex","1"),x(r=>(r=f.gridSystemColor)!=null?i.style.setProperty("background",r):i.style.removeProperty("background")),i})()})),x(i=>{var r=N(u.gridSystemOverlay,u[e().position]),s=e().width,l=e().isGutterOnOutside?e().gutterWidth.replace(/\d+/,d=>String(+d/2)):void 0,c=e().isGutterOnOutside?e().gutterWidth.replace(/\d+/,d=>String(+d/2)):void 0,v=e().gutterWidth;return r!==i.e&&w(n,i.e=r),s!==i.t&&((i.t=s)!=null?o.style.setProperty("width",s):o.style.removeProperty("width")),l!==i.a&&((i.a=l)!=null?o.style.setProperty("padding-left",l):o.style.removeProperty("padding-left")),c!==i.o&&((i.o=c)!=null?o.style.setProperty("padding-right",c):o.style.removeProperty("padding-right")),v!==i.i&&((i.i=v)!=null?o.style.setProperty("gap",v):o.style.removeProperty("gap")),i},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),n}})}function ri(){Oe(()=>{window.addEventListener("mousedown",e),Ee(()=>{window.removeEventListener("mousedown",e)})});const e=t=>{t.target.closest("#_pixel-mirror-toast")||M("errorMessage",void 0)};return(()=>{var t=Yo(),n=t.firstChild;return _(t,p(Ro,{}),n),_(n,()=>C.errorMessage),x(o=>{var i=u.toast,r=u.toast__message;return i!==o.e&&w(t,o.e=i),r!==o.t&&w(n,o.t=r),o},{e:void 0,t:void 0}),t})()}Zt(["click","input","mousedown","mouseup"]),Tn(()=>p(Jo,{}),document.body)})();
|
|
1
|
+
var Qo=Object.defineProperty;var ei=(te,L,ae)=>L in te?Qo(te,L,{enumerable:!0,configurable:!0,writable:!0,value:ae}):te[L]=ae;var me=(te,L,ae)=>ei(te,typeof L!="symbol"?L+"":L,ae);(function(){"use strict";const te=(e,t)=>e===t,L=Symbol("solid-proxy"),ae=typeof Proxy=="function",tt=Symbol("solid-track"),Ne={equals:te};let pt=yt;const J=1,Te=2,bt={owned:null,cleanups:null,context:null,owner:null};var O=null;let nt=null,Qt=null,A=null,R=null,q=null,ze=0;function Be(e,t){const n=A,o=O,i=e.length===0,r=t===void 0?o:t,s=i?bt:{owned:null,cleanups:null,context:r?r.context:null,owner:r},l=i?e:()=>e(()=>Q(()=>Se(s)));O=s,A=null;try{return de(l,!0)}finally{A=n,O=o}}function G(e,t){t=t?Object.assign({},Ne,t):Ne;const n={value:e,observers:null,observerSlots:null,comparator:t.equals||void 0},o=i=>(typeof i=="function"&&(i=i(n.value)),vt(n,i));return[wt.bind(n),o]}function S(e,t,n){const o=it(e,t,!1,J);_e(o)}function Ce(e,t,n){pt=on;const o=it(e,t,!1,J);o.user=!0,q?q.push(o):_e(o)}function ne(e,t,n){n=n?Object.assign({},Ne,n):Ne;const o=it(e,t,!0,0);return o.observers=null,o.observerSlots=null,o.comparator=n.equals||void 0,_e(o),wt.bind(o)}function en(e){return de(e,!1)}function Q(e){if(A===null)return e();const t=A;A=null;try{return e()}finally{A=t}}function xe(e){Ce(()=>Q(e))}function ke(e){return O===null||(O.cleanups===null?O.cleanups=[e]:O.cleanups.push(e)),e}function ot(){return A}function wt(){if(this.sources&&this.state)if(this.state===J)_e(this);else{const e=R;R=null,de(()=>He(this),!1),R=e}if(A){const e=this.observers?this.observers.length:0;A.sources?(A.sources.push(this),A.sourceSlots.push(e)):(A.sources=[this],A.sourceSlots=[e]),this.observers?(this.observers.push(A),this.observerSlots.push(A.sources.length-1)):(this.observers=[A],this.observerSlots=[A.sources.length-1])}return this.value}function vt(e,t,n){let o=e.value;return(!e.comparator||!e.comparator(o,t))&&(e.value=t,e.observers&&e.observers.length&&de(()=>{for(let i=0;i<e.observers.length;i+=1){const r=e.observers[i],s=nt&&nt.running;s&&nt.disposed.has(r),(s?!r.tState:!r.state)&&(r.pure?R.push(r):q.push(r),r.observers&&mt(r)),s||(r.state=J)}if(R.length>1e6)throw R=[],new Error},!1)),t}function _e(e){if(!e.fn)return;Se(e);const t=ze;tn(e,e.value,t)}function tn(e,t,n){let o;const i=O,r=A;A=O=e;try{o=e.fn(t)}catch(s){return e.pure&&(e.state=J,e.owned&&e.owned.forEach(Se),e.owned=null),e.updatedAt=n+1,Ct(s)}finally{A=r,O=i}(!e.updatedAt||e.updatedAt<=n)&&(e.updatedAt!=null&&"observers"in e?vt(e,o):e.value=o,e.updatedAt=n)}function it(e,t,n,o=J,i){const r={fn:e,state:o,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:O,context:O?O.context:null,pure:n};return O===null||O!==bt&&(O.owned?O.owned.push(r):O.owned=[r]),r}function Ue(e){if(e.state===0)return;if(e.state===Te)return He(e);if(e.suspense&&Q(e.suspense.inFallback))return e.suspense.effects.push(e);const t=[e];for(;(e=e.owner)&&(!e.updatedAt||e.updatedAt<ze);)e.state&&t.push(e);for(let n=t.length-1;n>=0;n--)if(e=t[n],e.state===J)_e(e);else if(e.state===Te){const o=R;R=null,de(()=>He(e,t[0]),!1),R=o}}function de(e,t){if(R)return e();let n=!1;t||(R=[]),q?n=!0:q=[],ze++;try{const o=e();return nn(n),o}catch(o){n||(q=null),R=null,Ct(o)}}function nn(e){if(R&&(yt(R),R=null),e)return;const t=q;q=null,t.length&&de(()=>pt(t),!1)}function yt(e){for(let t=0;t<e.length;t++)Ue(e[t])}function on(e){let t,n=0;for(t=0;t<e.length;t++){const o=e[t];o.user?e[n++]=o:Ue(o)}for(t=0;t<n;t++)Ue(e[t])}function He(e,t){e.state=0;for(let n=0;n<e.sources.length;n+=1){const o=e.sources[n];if(o.sources){const i=o.state;i===J?o!==t&&(!o.updatedAt||o.updatedAt<ze)&&Ue(o):i===Te&&He(o,t)}}}function mt(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=Te,n.pure?R.push(n):q.push(n),n.observers&&mt(n))}}function Se(e){let t;if(e.sources)for(;e.sources.length;){const n=e.sources.pop(),o=e.sourceSlots.pop(),i=n.observers;if(i&&i.length){const r=i.pop(),s=n.observerSlots.pop();o<i.length&&(r.sourceSlots[s]=o,i[o]=r,n.observerSlots[o]=s)}}if(e.tOwned){for(t=e.tOwned.length-1;t>=0;t--)Se(e.tOwned[t]);delete e.tOwned}if(e.owned){for(t=e.owned.length-1;t>=0;t--)Se(e.owned[t]);e.owned=null}if(e.cleanups){for(t=e.cleanups.length-1;t>=0;t--)e.cleanups[t]();e.cleanups=null}e.state=0}function rn(e){return e instanceof Error?e:new Error(typeof e=="string"?e:"Unknown error",{cause:e})}function Ct(e,t=O){throw rn(e)}const sn=Symbol("fallback");function xt(e){for(let t=0;t<e.length;t++)e[t]()}function ln(e,t,n={}){let o=[],i=[],r=[],s=0,l=t.length>1?[]:null;return ke(()=>xt(r)),()=>{let d=e()||[],g=d.length,c,a;return d[tt],Q(()=>{let p,_,$,M,z,C,x,D,V;if(g===0)s!==0&&(xt(r),r=[],o=[],i=[],s=0,l&&(l=[])),n.fallback&&(o=[sn],i[0]=Be(oe=>(r[0]=oe,n.fallback())),s=1);else if(s===0){for(i=new Array(g),a=0;a<g;a++)o[a]=d[a],i[a]=Be(h);s=g}else{for($=new Array(g),M=new Array(g),l&&(z=new Array(g)),C=0,x=Math.min(s,g);C<x&&o[C]===d[C];C++);for(x=s-1,D=g-1;x>=C&&D>=C&&o[x]===d[D];x--,D--)$[D]=i[x],M[D]=r[x],l&&(z[D]=l[x]);for(p=new Map,_=new Array(D+1),a=D;a>=C;a--)V=d[a],c=p.get(V),_[a]=c===void 0?-1:c,p.set(V,a);for(c=C;c<=x;c++)V=o[c],a=p.get(V),a!==void 0&&a!==-1?($[a]=i[c],M[a]=r[c],l&&(z[a]=l[c]),a=_[a],p.set(V,a)):r[c]();for(a=C;a<g;a++)a in $?(i[a]=$[a],r[a]=M[a],l&&(l[a]=z[a],l[a](a))):i[a]=Be(h);i=i.slice(0,s=g),o=d.slice(0)}return i});function h(p){if(r[a]=p,l){const[_,$]=G(a);return l[a]=$,t(d[a],_)}return t(d[a])}}}function w(e,t){return Q(()=>e(t||{}))}function Ve(){return!0}const an={get(e,t,n){return t===L?n:e.get(t)},has(e,t){return t===L?!0:e.has(t)},set:Ve,deleteProperty:Ve,getOwnPropertyDescriptor(e,t){return{configurable:!0,enumerable:!0,get(){return e.get(t)},set:Ve,deleteProperty:Ve}},ownKeys(e){return e.keys()}};function rt(e){return(e=typeof e=="function"?e():e)?e:{}}function dn(){for(let e=0,t=this.length;e<t;++e){const n=this[e]();if(n!==void 0)return n}}function cn(...e){let t=!1;for(let s=0;s<e.length;s++){const l=e[s];t=t||!!l&&L in l,e[s]=typeof l=="function"?(t=!0,ne(l)):l}if(ae&&t)return new Proxy({get(s){for(let l=e.length-1;l>=0;l--){const d=rt(e[l])[s];if(d!==void 0)return d}},has(s){for(let l=e.length-1;l>=0;l--)if(s in rt(e[l]))return!0;return!1},keys(){const s=[];for(let l=0;l<e.length;l++)s.push(...Object.keys(rt(e[l])));return[...new Set(s)]}},an);const n={},o=Object.create(null);for(let s=e.length-1;s>=0;s--){const l=e[s];if(!l)continue;const d=Object.getOwnPropertyNames(l);for(let g=d.length-1;g>=0;g--){const c=d[g];if(c==="__proto__"||c==="constructor")continue;const a=Object.getOwnPropertyDescriptor(l,c);if(!o[c])o[c]=a.get?{enumerable:!0,configurable:!0,get:dn.bind(n[c]=[a.get.bind(l)])}:a.value!==void 0?a:void 0;else{const h=n[c];h&&(a.get?h.push(a.get.bind(l)):a.value!==void 0&&h.push(()=>a.value))}}}const i={},r=Object.keys(o);for(let s=r.length-1;s>=0;s--){const l=r[s],d=o[l];d&&d.get?Object.defineProperty(i,l,d):i[l]=d?d.value:void 0}return i}const un=e=>`Stale read from <${e}>.`;function st(e){const t="fallback"in e&&{fallback:()=>e.fallback};return ne(ln(()=>e.each,e.children,t||void 0))}function H(e){const t=e.keyed,n=ne(()=>e.when,void 0,{equals:(o,i)=>t?o===i:!o==!i});return ne(()=>{const o=n();if(o){const i=e.children;return typeof i=="function"&&i.length>0?Q(()=>i(t?o:()=>{if(!Q(n))throw un("Show");return e.when})):i}return e.fallback},void 0,void 0)}const hn=new Set(["innerHTML","textContent","innerText","children"]),gn=Object.assign(Object.create(null),{className:"class",htmlFor:"for"}),fn=new Set(["beforeinput","click","dblclick","contextmenu","focusin","focusout","input","keydown","keyup","mousedown","mousemove","mouseout","mouseover","mouseup","pointerdown","pointermove","pointerout","pointerover","pointerup","touchend","touchmove","touchstart"]),pn={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"};function bn(e,t,n){let o=n.length,i=t.length,r=o,s=0,l=0,d=t[i-1].nextSibling,g=null;for(;s<i||l<r;){if(t[s]===n[l]){s++,l++;continue}for(;t[i-1]===n[r-1];)i--,r--;if(i===s){const c=r<o?l?n[l-1].nextSibling:n[r-l]:d;for(;l<r;)e.insertBefore(n[l++],c)}else if(r===l)for(;s<i;)(!g||!g.has(t[s]))&&t[s].remove(),s++;else if(t[s]===n[r-1]&&n[l]===t[i-1]){const c=t[--i].nextSibling;e.insertBefore(n[l++],t[s++].nextSibling),e.insertBefore(n[--r],c),t[i]=n[r]}else{if(!g){g=new Map;let a=l;for(;a<r;)g.set(n[a],a++)}const c=g.get(t[s]);if(c!=null)if(l<c&&c<r){let a=s,h=1,p;for(;++a<i&&a<r&&!((p=g.get(t[a]))==null||p!==c+h);)h++;if(h>c-l){const _=t[s];for(;l<c;)e.insertBefore(n[l++],_)}else e.replaceChild(n[l++],t[s++])}else s++;else t[s++].remove()}}}const kt="_$DX_DELEGATE";function wn(e,t,n,o={}){let i;return Be(r=>{i=r,t===document?e():v(t,e(),t.firstChild?null:void 0,n)},o.owner),()=>{i(),t.textContent=""}}function y(e,t,n){let o;const i=()=>{const s=document.createElement("template");return s.innerHTML=e,s.content.firstChild},r=()=>(o||(o=i())).cloneNode(!0);return r.cloneNode=r,r}function _t(e,t=window.document){const n=t[kt]||(t[kt]=new Set);for(let o=0,i=e.length;o<i;o++){const r=e[o];n.has(r)||(n.add(r),t.addEventListener(r,Sn))}}function B(e,t,n){n==null?e.removeAttribute(t):e.setAttribute(t,n)}function vn(e,t,n,o){o==null?e.removeAttributeNS(t,n):e.setAttributeNS(t,n,o)}function yn(e,t,n){n?e.setAttribute(t,""):e.removeAttribute(t)}function j(e,t){t==null?e.removeAttribute("class"):e.className=t}function mn(e,t,n,o){if(o)Array.isArray(n)?(e[`$$${t}`]=n[0],e[`$$${t}Data`]=n[1]):e[`$$${t}`]=n;else if(Array.isArray(n)){const i=n[0];e.addEventListener(t,n[0]=r=>i.call(e,n[1],r))}else e.addEventListener(t,n,typeof n!="function"&&n)}function Cn(e,t,n={}){const o=Object.keys(t||{}),i=Object.keys(n);let r,s;for(r=0,s=i.length;r<s;r++){const l=i[r];!l||l==="undefined"||t[l]||(St(e,l,!1),delete n[l])}for(r=0,s=o.length;r<s;r++){const l=o[r],d=!!t[l];!l||l==="undefined"||n[l]===d||!d||(St(e,l,!0),n[l]=d)}return n}function lt(e,t,n){if(!t)return n?B(e,"style"):t;const o=e.style;if(typeof t=="string")return o.cssText=t;typeof n=="string"&&(o.cssText=n=void 0),n||(n={}),t||(t={});let i,r;for(r in n)t[r]==null&&o.removeProperty(r),delete n[r];for(r in t)i=t[r],i!==n[r]&&(o.setProperty(r,i),n[r]=i);return n}function E(e,t={},n,o){const i={};return S(()=>typeof t.ref=="function"&&xn(t.ref,e)),S(()=>kn(e,t,n,!0,i,!0)),i}function xn(e,t,n){return Q(()=>e(t,n))}function v(e,t,n,o){if(n!==void 0&&!o&&(o=[]),typeof t!="function")return Ze(e,t,o,n);S(i=>Ze(e,t(),i,n),o)}function kn(e,t,n,o,i={},r=!1){t||(t={});for(const s in i)if(!(s in t)){if(s==="children")continue;i[s]=$t(e,s,null,i[s],n,r,t)}for(const s in t){if(s==="children")continue;const l=t[s];i[s]=$t(e,s,l,i[s],n,r,t)}}function _n(e){return e.toLowerCase().replace(/-([a-z])/g,(t,n)=>n.toUpperCase())}function St(e,t,n){const o=t.trim().split(/\s+/);for(let i=0,r=o.length;i<r;i++)e.classList.toggle(o[i],n)}function $t(e,t,n,o,i,r,s){let l,d,g,c;if(t==="style")return lt(e,n,o);if(t==="classList")return Cn(e,n,o);if(n===o)return o;if(t==="ref")r||n(e);else if(t.slice(0,3)==="on:"){const a=t.slice(3);o&&e.removeEventListener(a,o,typeof o!="function"&&o),n&&e.addEventListener(a,n,typeof n!="function"&&n)}else if(t.slice(0,10)==="oncapture:"){const a=t.slice(10);o&&e.removeEventListener(a,o,!0),n&&e.addEventListener(a,n,!0)}else if(t.slice(0,2)==="on"){const a=t.slice(2).toLowerCase(),h=fn.has(a);if(!h&&o){const p=Array.isArray(o)?o[0]:o;e.removeEventListener(a,p)}(h||n)&&(mn(e,a,n,h),h&&_t([a]))}else if(t.slice(0,5)==="attr:")B(e,t.slice(5),n);else if(t.slice(0,5)==="bool:")yn(e,t.slice(5),n);else if((c=t.slice(0,5)==="prop:")||(g=hn.has(t))||!i||(l=e.nodeName.includes("-")||"is"in s))c&&(t=t.slice(5),d=!0),t==="class"||t==="className"?j(e,n):l&&!d&&!g?e[_n(t)]=n:e[t]=n;else{const a=t.indexOf(":")>-1&&pn[t.split(":")[0]];a?vn(e,a,t,n):B(e,gn[t]||t,n)}return n}function Sn(e){let t=e.target;const n=`$$${e.type}`,o=e.target,i=e.currentTarget,r=d=>Object.defineProperty(e,"target",{configurable:!0,value:d}),s=()=>{const d=t[n];if(d&&!t.disabled){const g=t[`${n}Data`];if(g!==void 0?d.call(t,g,e):d.call(t,e),e.cancelBubble)return}return t.host&&typeof t.host!="string"&&!t.host._$host&&t.contains(e.target)&&r(t.host),!0},l=()=>{for(;s()&&(t=t._$host||t.parentNode||t.host););};if(Object.defineProperty(e,"currentTarget",{configurable:!0,get(){return t||document}}),e.composedPath){const d=e.composedPath();r(d[0]);for(let g=0;g<d.length-2&&(t=d[g],!!s());g++){if(t._$host){t=t._$host,l();break}if(t.parentNode===i)break}}else l();r(o)}function Ze(e,t,n,o,i){for(;typeof n=="function";)n=n();if(t===n)return n;const r=typeof t,s=o!==void 0;if(e=s&&n[0]&&n[0].parentNode||e,r==="string"||r==="number"){if(r==="number"&&(t=t.toString(),t===n))return n;if(s){let l=n[0];l&&l.nodeType===3?l.data!==t&&(l.data=t):l=document.createTextNode(t),n=ce(e,n,o,l)}else n!==""&&typeof n=="string"?n=e.firstChild.data=t:n=e.textContent=t}else if(t==null||r==="boolean")n=ce(e,n,o);else{if(r==="function")return S(()=>{let l=t();for(;typeof l=="function";)l=l();n=Ze(e,l,n,o)}),()=>n;if(Array.isArray(t)){const l=[],d=n&&Array.isArray(n);if(at(l,t,n,i))return S(()=>n=Ze(e,l,n,o,!0)),()=>n;if(l.length===0){if(n=ce(e,n,o),s)return n}else d?n.length===0?At(e,l,o):bn(e,n,l):(n&&ce(e),At(e,l));n=l}else if(t.nodeType){if(Array.isArray(n)){if(s)return n=ce(e,n,o,t);ce(e,n,null,t)}else n==null||n===""||!e.firstChild?e.appendChild(t):e.replaceChild(t,e.firstChild);n=t}}return n}function at(e,t,n,o){let i=!1;for(let r=0,s=t.length;r<s;r++){let l=t[r],d=n&&n[e.length],g;if(!(l==null||l===!0||l===!1))if((g=typeof l)=="object"&&l.nodeType)e.push(l);else if(Array.isArray(l))i=at(e,l,d)||i;else if(g==="function")if(o){for(;typeof l=="function";)l=l();i=at(e,Array.isArray(l)?l:[l],Array.isArray(d)?d:[d])||i}else e.push(l),i=!0;else{const c=String(l);d&&d.nodeType===3&&d.data===c?e.push(d):e.push(document.createTextNode(c))}}return i}function At(e,t,n=null){for(let o=0,i=t.length;o<i;o++)e.insertBefore(t[o],n)}function ce(e,t,n,o){if(n===void 0)return e.textContent="";const i=o||document.createTextNode("");if(t.length){let r=!1;for(let s=t.length-1;s>=0;s--){const l=t[s];if(i!==l){const d=l.parentNode===e;!r&&!s?d?e.replaceChild(i,l):e.insertBefore(i,n):d&&l.remove()}else r=!0}}else e.insertBefore(i,n);return[i]}function Et(e){var t,n,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=Et(e[t]))&&(o&&(o+=" "),o+=n)}else for(n in e)e[n]&&(o&&(o+=" "),o+=n);return o}function I(){for(var e,t,n=0,o="",i=arguments.length;n<i;n++)(e=arguments[n])&&(t=Et(e))&&(o&&(o+=" "),o+=t);return o}function $n(e){var n;return((n=e.split(".").pop())==null?void 0:n.toLowerCase())==="png"?"image/png":"image/jpeg"}const Ot={id:"default",width:"1140px",columns:12,gutterWidth:"24px",isGutterOnOutside:!0,position:"center"};class N{constructor(){}static async init(){this.db=await new Promise((t,n)=>{const o=indexedDB.open(this.DB_NAME,this.VERSION);o.onerror=()=>n(o.error),o.onsuccess=()=>t(o.result),o.onupgradeneeded=i=>{const r=i.target.result;r.objectStoreNames.contains(this.DESIGN_STORE_NAME)||r.createObjectStore(this.DESIGN_STORE_NAME,{keyPath:"id"}),r.objectStoreNames.contains(this.GRID_STORE_NAME)||r.createObjectStore(this.GRID_STORE_NAME,{keyPath:"id"}).add({...Ot,createdAt:Date.now()})}})}static async uploadDesign(t){const n=t.map(async s=>{const l=await s.arrayBuffer();return{id:crypto.randomUUID(),buffer:l,mimeType:$n(s.name),createdAt:Date.now()}}),o=await Promise.all(n),i=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite"),r=i.objectStore(this.DESIGN_STORE_NAME);return await Promise.all([new Promise((s,l)=>{i.oncomplete=()=>s(),i.onerror=()=>l(i.error)}),...o.map(s=>new Promise((l,d)=>{const g=r.add(s);g.onsuccess=()=>l(),g.onerror=()=>d(g.error)}))]),o.sort((s,l)=>l.createdAt-s.createdAt)}static async getDesign(t){const n=this.db.transaction(this.DESIGN_STORE_NAME,"readonly").objectStore(this.DESIGN_STORE_NAME);return new Promise((o,i)=>{const r=n.get(t);r.onerror=()=>i(r.error),r.onsuccess=()=>o(r.result)})}static async getAllDesigns(){const t=this.db.transaction(this.DESIGN_STORE_NAME,"readonly").objectStore(this.DESIGN_STORE_NAME);return new Promise((n,o)=>{const i=t.getAll();i.onerror=()=>o(i.error),i.onsuccess=()=>n(i.result.sort((r,s)=>s.createdAt-r.createdAt))})}static async deleteDesign(t){const o=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite").objectStore(this.DESIGN_STORE_NAME);await new Promise((i,r)=>{const s=o.delete(t);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)})}static async deleteAllDesigns(){const n=this.db.transaction(this.DESIGN_STORE_NAME,"readwrite").objectStore(this.DESIGN_STORE_NAME);await new Promise((o,i)=>{const r=n.clear();r.onsuccess=()=>o(),r.onerror=()=>i(r.error)})}static async addGridSet(t){const n={...t,id:crypto.randomUUID(),createdAt:Date.now()},i=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);return await new Promise((r,s)=>{const l=i.add(n);l.onsuccess=()=>r(),l.onerror=()=>s(l.error)}),n}static async getGridSet(t){const n=this.db.transaction(this.GRID_STORE_NAME,"readonly").objectStore(this.GRID_STORE_NAME);return new Promise((o,i)=>{const r=n.get(t);r.onerror=()=>i(r.error),r.onsuccess=()=>o(r.result)})}static async getAllGridSets(){const t=this.db.transaction(this.GRID_STORE_NAME,"readonly").objectStore(this.GRID_STORE_NAME);return new Promise((n,o)=>{const i=t.getAll();i.onerror=()=>o(i.error),i.onsuccess=()=>n(i.result.sort((r,s)=>r.createdAt-s.createdAt))})}static async deleteGridSet(t){const o=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);await new Promise((i,r)=>{const s=o.delete(t);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)})}static async resetGridSets(){const n=this.db.transaction(this.GRID_STORE_NAME,"readwrite").objectStore(this.GRID_STORE_NAME);await new Promise((i,r)=>{const s=n.clear();s.onsuccess=()=>i(),s.onerror=()=>r(s.error)});const o={...Ot,createdAt:Date.now()};return await new Promise((i,r)=>{const s=n.add(o);s.onsuccess=()=>i(),s.onerror=()=>r(s.error)}),[o]}}me(N,"DB_NAME","PixelMirrorDB"),me(N,"DESIGN_STORE_NAME","designs"),me(N,"GRID_STORE_NAME","grids"),me(N,"VERSION",1),me(N,"db");const dt=Symbol("store-raw"),ue=Symbol("store-node"),K=Symbol("store-has"),Pt=Symbol("store-self");function Mt(e){let t=e[L];if(!t&&(Object.defineProperty(e,L,{value:t=new Proxy(e,On)}),!Array.isArray(e))){const n=Object.keys(e),o=Object.getOwnPropertyDescriptors(e);for(let i=0,r=n.length;i<r;i++){const s=n[i];o[s].get&&Object.defineProperty(e,s,{enumerable:o[s].enumerable,get:o[s].get.bind(t)})}}return t}function We(e){let t;return e!=null&&typeof e=="object"&&(e[L]||!(t=Object.getPrototypeOf(e))||t===Object.prototype||Array.isArray(e))}function $e(e,t=new Set){let n,o,i,r;if(n=e!=null&&e[dt])return n;if(!We(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let s=0,l=e.length;s<l;s++)i=e[s],(o=$e(i,t))!==i&&(e[s]=o)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const s=Object.keys(e),l=Object.getOwnPropertyDescriptors(e);for(let d=0,g=s.length;d<g;d++)r=s[d],!l[r].get&&(i=e[r],(o=$e(i,t))!==i&&(e[r]=o))}return e}function qe(e,t){let n=e[t];return n||Object.defineProperty(e,t,{value:n=Object.create(null)}),n}function Ae(e,t,n){if(e[t])return e[t];const[o,i]=G(n,{equals:!1,internal:!0});return o.$=i,e[t]=o}function An(e,t){const n=Reflect.getOwnPropertyDescriptor(e,t);return!n||n.get||!n.configurable||t===L||t===ue||(delete n.value,delete n.writable,n.get=()=>e[L][t]),n}function Dt(e){ot()&&Ae(qe(e,ue),Pt)()}function En(e){return Dt(e),Reflect.ownKeys(e)}const On={get(e,t,n){if(t===dt)return e;if(t===L)return n;if(t===tt)return Dt(e),n;const o=qe(e,ue),i=o[t];let r=i?i():e[t];if(t===ue||t===K||t==="__proto__")return r;if(!i){const s=Object.getOwnPropertyDescriptor(e,t);ot()&&(typeof r!="function"||e.hasOwnProperty(t))&&!(s&&s.get)&&(r=Ae(o,t,r)())}return We(r)?Mt(r):r},has(e,t){return t===dt||t===L||t===tt||t===ue||t===K||t==="__proto__"?!0:(ot()&&Ae(qe(e,K),t)(),t in e)},set(){return!0},deleteProperty(){return!0},ownKeys:En,getOwnPropertyDescriptor:An};function Ke(e,t,n,o=!1){if(!o&&e[t]===n)return;const i=e[t],r=e.length;n===void 0?(delete e[t],e[K]&&e[K][t]&&i!==void 0&&e[K][t].$()):(e[t]=n,e[K]&&e[K][t]&&i===void 0&&e[K][t].$());let s=qe(e,ue),l;if((l=Ae(s,t,i))&&l.$(()=>n),Array.isArray(e)&&e.length!==r){for(let d=e.length;d<r;d++)(l=s[d])&&l.$();(l=Ae(s,"length",r))&&l.$(e.length)}(l=s[Pt])&&l.$()}function Lt(e,t){const n=Object.keys(t);for(let o=0;o<n.length;o+=1){const i=n[o];Ke(e,i,t[i])}}function Pn(e,t){if(typeof t=="function"&&(t=t(e)),t=$e(t),Array.isArray(t)){if(e===t)return;let n=0,o=t.length;for(;n<o;n++){const i=t[n];e[n]!==i&&Ke(e,n,i)}Ke(e,"length",o)}else Lt(e,t)}function Ee(e,t,n=[]){let o,i=e;if(t.length>1){o=t.shift();const s=typeof o,l=Array.isArray(e);if(Array.isArray(o)){for(let d=0;d<o.length;d++)Ee(e,[o[d]].concat(t),n);return}else if(l&&s==="function"){for(let d=0;d<e.length;d++)o(e[d],d)&&Ee(e,[d].concat(t),n);return}else if(l&&s==="object"){const{from:d=0,to:g=e.length-1,by:c=1}=o;for(let a=d;a<=g;a+=c)Ee(e,[a].concat(t),n);return}else if(t.length>1){Ee(e[o],t,[o].concat(n));return}i=e[o],n=[o].concat(n)}let r=t[0];typeof r=="function"&&(r=r(i,n),r===i)||o===void 0&&r==null||(r=$e(r),o===void 0||We(i)&&We(r)&&!Array.isArray(r)?Lt(i,r):Ke(e,o,r))}function jt(...[e,t]){const n=$e(e||{}),o=Array.isArray(n),i=Mt(n);function r(...s){en(()=>{o&&s.length===1?Pn(n,s[0]):Ee(n,s)})}return[i,r]}const Rt="_J-",Gt={designId:void 0,designOpacity:.5,designPosition:{x:0,y:0},designScale:1,showDesignOverlay:!1,lockDesignOverlay:!1,showVerticalRhythmOverlay:!1,verticalRhythmHeight:"8px",verticalRhythmColor:"rgba(255, 0, 0, .05)",showGridSystemOverlay:!1,activeGridSystemId:"default",gridSystemColor:"rgba(255, 0, 0, .05)",appPosition:"bottom"};function Mn(e){const t=localStorage.getItem(Rt+e);return t?JSON.parse(t):Gt[e]}const Dn=Object.keys(Gt).reduce((e,t)=>({...e,[t]:Mn(t)}),{}),[u,Ln]=jt(Dn);function P(e){Object.entries(e).forEach(([t,n])=>{localStorage.setItem(Rt+t,JSON.stringify(n))}),Ln(t=>({...t,...e}))}const jn={showAlignmentPopover:!1,showGridSettingsPanel:!1,showAllDesignsPanel:!1,designUrl:void 0,designSize:{width:0,height:0},designOriginalSize:{width:0,height:0},designBufferedPosition:{x:0,y:0},isSolidMode:!1,isZoomMode:!1,isDragging:!1,enableAnimation:!1,errorMessage:void 0},[f,k]=jt(jn);var Rn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"stroke=currentColor stroke-width=1.5></path><circle cx=16.5 cy=7.5 r=1.5 stroke=currentColor stroke-width=1.5></circle><path d="M16 22C15.3805 19.7749 13.9345 17.7821 11.8765 16.3342C9.65761 14.7729 6.87163 13.9466 4.01569 14.0027C3.67658 14.0019 3.33776 14.0127 3 14.0351"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M13 18C14.7015 16.6733 16.5345 15.9928 18.3862 16.0001C19.4362 15.999 20.4812 16.2216 21.5 16.6617"stroke=currentColor stroke-width=1.5 stroke-linejoin=round>');const Gn=(e={})=>(()=>{var t=Rn();return E(t,e,!0),t})();var In=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><circle cx=16.5 cy=7.5 r=1.5 stroke=currentColor stroke-width=1.5></circle><path d="M2 14.1354C2.66663 14.0455 3.3406 14.0011 4.01569 14.0027C6.87163 13.9466 9.65761 14.7729 11.8765 16.3342C13.9345 17.7821 15.3805 19.7749 16 22"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M13.5 17.5C14.5 16.5 15.1772 16.2768 16 16"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M20 20.2131C18.6012 21.5 16.3635 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1087C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.6364 2.5 5.3987 3.78701 3.99988"stroke=currentColor stroke-width=1.5></path><path d="M20.0002 16C20.5427 16 21.048 16.2945 21.3967 16.5638C21.5 15.3693 21.5 13.8825 21.5 12C21.5 7.52166 21.5 5.28249 20.1088 3.89124C18.7175 2.5 16.4783 2.5 12 2.5C9.59086 2.5 7.82972 2.5 6.5 2.71659"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M2 2L22 22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Nn=(e={})=>(()=>{var t=In();return E(t,e,!0),t})();var Tn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M22 16C21.4102 15.3932 19.8403 13 19 13C18.1597 13 16.5898 15.3932 16 16M19 14L19 21"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M15.0035 21H12.0027C7.28739 21 4.92973 21 3.46487 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38042 4.53806C2.6516 4.05227 3.05255 3.65142 3.53848 3.38032C4.22017 3 5.12865 3 6.94562 3C8.10968 3 8.69172 3 9.20122 3.19101C10.3645 3.62712 10.8442 4.68358 11.3691 5.73313L12.0027 7M8.00163 7H16.754C18.8613 7 19.9149 7 20.6718 7.50559C20.9995 7.72447 21.2808 8.00572 21.4997 8.33329C21.8937 8.92282 21.9808 9.69244 22 11"stroke=currentColor stroke-width=1.5 stroke-linecap=round>');const zn=(e={})=>(()=>{var t=Tn();return E(t,e,!0),t})();var Bn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M4.00781 4.99913C4.59743 4.39256 6.16671 2.00049 7.00666 2.00049C7.84661 2.00049 9.41589 4.39256 10.0055 4.99913M7.00666 2.84907V21.9995"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M19.0023 13.995C19.6088 14.5846 22.0011 16.1538 22.0011 16.9937C22.0011 17.8336 19.6088 19.4028 19.0023 19.9923M21.1906 16.9939H1.99805"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Un=(e={})=>(()=>{var t=Bn();return E(t,e,!0),t})();var Hn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M16.502 7.99988C17.3458 7.99988 18.3198 7.9165 18.801 8.74988C19.002 9.09795 19.002 9.56526 19.002 10.4999V11.4999C19.002 12.4345 19.002 12.9018 18.801 13.2499C18.3198 14.0832 17.3458 13.9999 16.502 13.9999C15.6581 13.9999 14.6841 14.0832 14.2029 13.2499C14.002 12.9018 14.002 12.4345 14.002 11.4999L14.002 10.4999C14.002 9.56526 14.002 9.09795 14.2029 8.74988C14.6841 7.9165 15.6581 7.99988 16.502 7.99988Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M7.50195 7.99988C8.34585 7.99988 9.31984 7.9165 9.80099 8.74988C10.002 9.09795 10.002 9.56526 10.002 10.4999L10.002 17.4999C10.002 18.4345 10.002 18.9018 9.80099 19.2499C9.31984 20.0832 8.34585 19.9999 7.50195 19.9999C6.65806 19.9999 5.68406 20.0832 5.20292 19.2499C5.00195 18.9018 5.00195 18.4345 5.00195 17.4999L5.00195 10.4999C5.00195 9.56526 5.00195 9.09795 5.20292 8.74988C5.68406 7.9165 6.65806 7.99988 7.50195 7.99988Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 4L2 4"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Vn=(e={})=>(()=>{var t=Hn();return E(t,e,!0),t})();var Zn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M16.502 10.0023C17.3458 10.0023 18.3198 9.91895 18.801 10.7523C19.002 11.1004 19.002 11.5677 19.002 12.5023V13.5023C19.002 14.4369 19.002 14.9042 18.801 15.2523C18.3198 16.0857 17.3458 16.0023 16.502 16.0023C15.6581 16.0023 14.6841 16.0857 14.2029 15.2523C14.002 14.9042 14.002 14.4369 14.002 13.5023L14.002 12.5023C14.002 11.5677 14.002 11.1004 14.2029 10.7523C14.6841 9.91895 15.6581 10.0023 16.502 10.0023Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M7.50195 4.00232C8.34585 4.00232 9.31984 3.91895 9.80099 4.75232C10.002 5.10039 10.002 5.5677 10.002 6.50232L10.002 13.5023C10.002 14.4369 10.002 14.9042 9.80099 15.2523C9.31984 16.0857 8.34585 16.0023 7.50195 16.0023C6.65806 16.0023 5.68406 16.0857 5.20292 15.2523C5.00195 14.9042 5.00195 14.4369 5.00195 13.5023L5.00195 6.50232C5.00195 5.5677 5.00195 5.10039 5.20292 4.75232C5.68406 3.91895 6.65806 4.00232 7.50195 4.00232Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 20L2 20"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Wn=(e={})=>(()=>{var t=Zn();return E(t,e,!0),t})();var qn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M8.00232 7.5C8.00232 6.65611 7.91895 5.68211 8.75232 5.20096C9.10039 5 9.5677 5 10.5023 5H11.5023C12.4369 5 12.9042 5 13.2523 5.20096C14.0857 5.68211 14.0023 6.65611 14.0023 7.5C14.0023 8.34389 14.0857 9.31789 13.2523 9.79904C12.9042 10 12.4369 10 11.5023 10H10.5023C9.5677 10 9.10039 10 8.75232 9.79904C7.91895 9.31789 8.00232 8.34389 8.00232 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M8.00232 16.5C8.00232 15.6561 7.91895 14.6821 8.75232 14.201C9.10039 14 9.5677 14 10.5023 14H17.5023C18.4369 14 18.9042 14 19.2523 14.201C20.0857 14.6821 20.0023 15.6561 20.0023 16.5C20.0023 17.3439 20.0857 18.3179 19.2523 18.799C18.9042 19 18.4369 19 17.5023 19H10.5023C9.5677 19 9.10039 19 8.75232 18.799C7.91895 18.3179 8.00232 17.3439 8.00232 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4 2V22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Kn=(e={})=>(()=>{var t=qn();return E(t,e,!0),t})();var Fn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M10.0004 7.5C10.0004 6.65611 9.91699 5.68211 10.7504 5.20096C11.0984 5 11.5657 5 12.5004 5H13.5004C14.435 5 14.9023 5 15.2504 5.20096C16.0837 5.68211 16.0004 6.65611 16.0004 7.5C16.0004 8.34389 16.0837 9.31789 15.2504 9.79904C14.9023 10 14.435 10 13.5004 10H12.5004C11.5657 10 11.0984 10 10.7504 9.79904C9.91699 9.31789 10.0004 8.34389 10.0004 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4.00036 16.5C4.00036 15.6561 3.91699 14.6821 4.75036 14.201C5.09844 14 5.56575 14 6.50036 14H13.5004C14.435 14 14.9023 14 15.2504 14.201C16.0837 14.6821 16.0004 15.6561 16.0004 16.5C16.0004 17.3439 16.0837 18.3179 15.2504 18.799C14.9023 19 14.435 19 13.5004 19H6.50036C5.56575 19 5.09844 19 4.75036 18.799C3.91699 18.3179 4.00036 17.3439 4.00036 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M20 2V22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Yn=(e={})=>(()=>{var t=Fn();return E(t,e,!0),t})();var Xn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 19L12 22"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M12 10L12 14"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M12 2L12 5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M8.00036 7.5C8.00036 6.65611 7.91699 5.68211 8.75036 5.20096C9.09844 5 9.56575 5 10.5004 5H13.5004C14.435 5 14.9023 5 15.2504 5.20096C16.0837 5.68211 16.0004 6.65611 16.0004 7.5C16.0004 8.34389 16.0837 9.31789 15.2504 9.79904C14.9023 10 14.435 10 13.5004 10H10.5004C9.56575 10 9.09844 10 8.75036 9.79904C7.91699 9.31789 8.00036 8.34389 8.00036 7.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M4.00036 16.5C4.00036 15.6561 3.91699 14.6821 4.75036 14.201C5.09844 14 5.56575 14 6.50036 14H17.5004C18.435 14 18.9023 14 19.2504 14.201C20.0837 14.6821 20.0004 15.6561 20.0004 16.5C20.0004 17.3439 20.0837 18.3179 19.2504 18.799C18.9023 19 18.435 19 17.5004 19H6.50036C5.56575 19 5.09844 19 4.75036 18.799C3.91699 18.3179 4.00036 17.3439 4.00036 16.5Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const Jn=(e={})=>(()=>{var t=Xn();return E(t,e,!0),t})();var Qn=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const eo=(e={})=>(()=>{var t=Qn();return E(t,e,!0),t})();var to=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 16.5V14.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M4.2678 18.8447C4.49268 20.515 5.87612 21.8235 7.55965 21.9009C8.97626 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.8789 17.7547 20 16.6376 20 15.5C20 14.3624 19.8789 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97626 9.03397 7.55965 9.09909C5.87612 9.17649 4.49268 10.485 4.2678 12.1553C4.12104 13.2453 3.99999 14.3624 3.99999 15.5C3.99999 16.6376 4.12104 17.7547 4.2678 18.8447Z"stroke=currentColor stroke-width=1.5></path><path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5V9"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const no=(e={})=>(()=>{var t=to();return E(t,e,!0),t})();var oo=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M12 16.5V14.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12105 13.2453 4 14.3624 4 15.5C4 16.6376 4.12105 17.7547 4.26781 18.8447Z"stroke=currentColor stroke-width=1.5></path><path d="M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C13.9593 2 15.5 3.5 16 5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const io=(e={})=>(()=>{var t=oo();return E(t,e,!0),t})();var ro=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M6.08938 14.9992C5.71097 14.1486 5.5 13.2023 5.5 12.2051C5.5 8.50154 8.41015 5.49921 12 5.49921C15.5899 5.49921 18.5 8.50154 18.5 12.2051C18.5 13.2023 18.289 14.1486 17.9106 14.9992"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M12 1.99921V2.99921"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M22 11.9992H21"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M3 11.9992H2"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M19.0704 4.92792L18.3633 5.63503"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M5.6368 5.636L4.92969 4.92889"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M14.517 19.3056C15.5274 18.9788 15.9326 18.054 16.0466 17.1238C16.0806 16.8459 15.852 16.6154 15.572 16.6154L8.47685 16.6156C8.18725 16.6156 7.95467 16.8614 7.98925 17.1489C8.1009 18.0773 8.3827 18.7555 9.45345 19.3056M14.517 19.3056C14.517 19.3056 9.62971 19.3056 9.45345 19.3056M14.517 19.3056C14.3955 21.2506 13.8338 22.0209 12.0068 21.9993C10.0526 22.0354 9.60303 21.0833 9.45345 19.3056"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const so=(e={})=>(()=>{var t=ro();return E(t,e,!0),t})();var lo=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28248 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28248 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088Z"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round></path><path d="M2.5 8.99976L21.5 8.99976"stroke=currentColor stroke-width=1.5></path><path d="M2.5 14.9998L21.5 14.9998"stroke=currentColor stroke-width=1.5></path><path d="M16 21.5L16 2.5"stroke=currentColor stroke-width=1.5></path><path d="M8 21.4998L8 2.49976"stroke=currentColor stroke-width=1.5>');const ao=(e={})=>(()=>{var t=lo();return E(t,e,!0),t})();var co=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M9.66676 22L14.3334 22M3.01509 16.5C2.99793 16.0004 2.99705 15.5001 2.99855 15M20.9849 16.5C21.0021 16.0004 21.003 15.5001 21.0015 15M3.53709 19.2547C4.02122 20.213 4.80249 20.9914 5.76305 21.4718M18.1797 21.5C19.1665 21.0221 19.9692 20.232 20.4629 19.2547"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M5.50502 12C3.64422 12 3.00695 11.4596 3.00695 9.5C3.00695 6.96832 2.75702 4.04633 5.25521 2.60289C6.29863 2 7.69947 2 10.5012 2L13.4988 2C16.3005 2 17.7014 2 18.7448 2.60289C21.243 4.04633 20.9931 6.96832 20.9931 9.5C20.9931 11.3622 20.453 12 18.495 12L5.50502 12Z"stroke=currentColor stroke-width=1.5>');const uo=(e={})=>(()=>{var t=co();return E(t,e,!0),t})();var ho=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=20 height=20 color=#000000 fill=none><path d="M5.32171 9.6829C7.73539 5.41196 8.94222 3.27648 10.5983 2.72678C11.5093 2.42437 12.4907 2.42437 13.4017 2.72678C15.0578 3.27648 16.2646 5.41196 18.6783 9.6829C21.092 13.9538 22.2988 16.0893 21.9368 17.8293C21.7376 18.7866 21.2469 19.6548 20.535 20.3097C19.241 21.5 16.8274 21.5 12 21.5C7.17265 21.5 4.75897 21.5 3.46496 20.3097C2.75308 19.6548 2.26239 18.7866 2.06322 17.8293C1.70119 16.0893 2.90803 13.9538 5.32171 9.6829Z"stroke=currentColor stroke-width=2></path><path d="M11.992 16H12.001"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path><path d="M12 13L12 8.99997"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');const go=(e={})=>(()=>{var t=ho();return E(t,e,!0),t})();var fo=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M9.5 16.5L9.5 10.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M14.5 16.5L14.5 10.5"stroke=currentColor stroke-width=1.5 stroke-linecap=round>');const It=(e={})=>(()=>{var t=fo();return E(t,e,!0),t})();var po=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z"stroke=currentColor stroke-width=1.5></path><path d="M8 12.5L10.5 15L16 9"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const bo=(e={})=>(()=>{var t=po();return E(t,e,!0),t})();var wo=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path d="M13 3.00231C12.5299 3 12.0307 3 11.5 3C7.02166 3 4.78249 3 3.39124 4.39124C2 5.78249 2 8.02166 2 12.5C2 16.9783 2 19.2175 3.39124 20.6088C4.78249 22 7.02166 22 11.5 22C15.9783 22 18.2175 22 19.6088 20.6088C20.9472 19.2703 20.998 17.147 20.9999 13"stroke=currentColor stroke-width=1.5 stroke-linecap=round></path><path d="M2 14.1354C2.61902 14.0455 3.24484 14.0011 3.87171 14.0027C6.52365 13.9466 9.11064 14.7729 11.1711 16.3342C13.082 17.7821 14.4247 19.7749 15 22"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M21 16.8962C19.8246 16.3009 18.6088 15.9988 17.3862 16.0001C15.5345 15.9928 13.7015 16.6733 12 18"stroke=currentColor stroke-width=1.5 stroke-linejoin=round></path><path d="M17 4.5C17.4915 3.9943 18.7998 2 19.5 2M22 4.5C21.5085 3.9943 20.2002 2 19.5 2M19.5 2V10"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>');const vo=(e={})=>(()=>{var t=wo();return E(t,e,!0),t})();var yo=y('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"width=28 height=28 color=#000000 fill=none><path id=toggle-trigger d="M19 12C19 13.6569 17.6569 15 16 15C14.3431 15 13 13.6569 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12Z"stroke=currentColor stroke-width=1.5></path><path d="M16 6H8C4.68629 6 2 8.68629 2 12C2 15.3137 4.68629 18 8 18H16C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6Z"stroke=currentColor stroke-width=1.5>');const Nt=(e={})=>(()=>{var t=yo();return E(t,e,!0),t})();var mo=y("<div class=overlay-container>"),Co=y("<div id=app-bar><div><button class=menu-button></button><button class=menu-button></button><button><span class=opacity-button__value></span></button><button class=menu-button></button><button><span class=scale-button__value>x</span></button><button class=menu-button></button><button class=menu-button></button><button></button></div><div>x:<!>, y:</div><div id=popover><button class=alignment-button></button><button class=alignment-button></button><button class=alignment-button></button><button class=alignment-button></button><button class=alignment-button>"),xo=y("<div class=panel><div class=panel__content-wrapper><div><div class=grid-setting-box><div class=grid-setting-box__header><h3 class=grid-setting-box__heading>Vertical Rhythm</h3><button><span></span></button></div><fieldset class=fieldset><legend>Vertical Rhythm Height</legend><input type=text><button>Update</button></fieldset><fieldset class=fieldset><legend>Vertical Rhythm Color</legend><input type=text><button>Update</button></fieldset></div><div class=grid-setting-box><div class=grid-setting-box__header><h3 class=grid-setting-box__heading>Grid System</h3><button><span></span></button></div><fieldset class=fieldset><legend>Grid System Color</legend><input type=text><button>Update</button></fieldset><div class=table-wrapper><table class=table><thead><tr><th>Width</th><th>Columns</th><th>Gutter Width</th><th>Outer Gutter</th><th>Position</th><th></th></tr></thead><tbody></tbody><tfoot><tr><td><input type=text placeholder=1140px></td><td><input type=text placeholder=12></td><td><input type=text placeholder=24px></td><td><select><option value=1>Yes</option><option value=0>No</option></select></td><td><select><option value=center>Center</option><option value=left>Left</option><option value=right>Right</option></select></td><td colspan=2><button class=add-grid-button>Add Grid</button></td></tr></tfoot></table></div></div></div></div><div class=panel__footer><button class=panel__button>Reset Grid Settings</button><button class=panel__button>Close"),ko=y("<tr><td></td><td></td><td></td><td></td><td></td><td class=table__bgroup><button class=table__button></button><button>"),_o=y('<div><img class=design-card__img alt=""><button class=design-card__button>'),So=y("<button class=panel__button>Clear Designs"),$o=y("<div class=panel><div class=panel__content-wrapper><div><div class=all-designs-list><label class=upload-button><span class=upload-button__text>Upload</span><input type=file accept=image/jpeg,image/png multiple></label></div></div></div><div class=panel__footer><button class=panel__button>Close"),Ao=y('<img alt="">'),Eo=y("<div class=vertical-rhythm-overlay>"),Oo=y("<div><div>"),Po=y("<div>"),Mo=y("<div id=toast class=toast><span class=toast__message>");function U(e){const t=e instanceof Error?e.message:"An error occurred.";k("errorMessage",t),console.error(t)}function Do(){const[e,t]=G(!1),n=ne(()=>f.showAllDesignsPanel?{width:"800px",height:"600px"}:f.showGridSettingsPanel?{width:"680px",height:"600px"}:{width:"380px",height:"48px"});xe(()=>{N.init().then(()=>t(!0)).catch(U)});const o=h=>{h.composedPath().find(p=>p instanceof Element&&p.id==="app-bar")||(k({showAllDesignsPanel:!1,showGridSettingsPanel:!1}),window.removeEventListener("mousedown",o))};Ce(()=>{!f.showAllDesignsPanel&&!f.showGridSettingsPanel||(window.addEventListener("mousedown",o),ke(()=>{window.removeEventListener("mousedown",o)}))});const i=()=>{P({showDesignOverlay:!u.showDesignOverlay})},r=()=>{P({lockDesignOverlay:!u.lockDesignOverlay})},s=()=>{P({designOpacity:.5})},l=()=>{u.showDesignOverlay&&k("showAlignmentPopover",!0)},d=h=>{const p=h.relatedTarget;p!=null&&p.closest("#popover")||k("showAlignmentPopover",!1)},g=h=>{const{clientWidth:p,scrollHeight:_}=document.documentElement,{width:$,height:M}=f.designSize,{x:z,y:C}=u.designPosition,x={top:{x:z,y:0},right:{x:p-$,y:C},bottom:{x:z,y:_-M},left:{x:0,y:C},center:{x:(p-$)/2|0,y:C},"top-center":{x:(p-$)/2|0,y:0}}[h];x.x===z&&x.y===C||(k({designBufferedPosition:x,enableAnimation:!0}),P({designPosition:x}))},c=()=>{const h=u.designScale===.5?1:.5;k({designSize:{width:f.designOriginalSize.width*h,height:f.designOriginalSize.height*h},enableAnimation:!0}),P({designScale:h})},a=()=>{const h=u.appPosition==="top"?"bottom":"top";P({appPosition:h})};return w(H,{get when(){return e()},get children(){return[(()=>{var h=mo();return v(h,w(Go,{}),null),v(h,w(H,{get when(){return u.showVerticalRhythmOverlay&&!f.isZoomMode},get children(){return w(Io,{})}}),null),v(h,w(H,{get when(){return u.showGridSystemOverlay&&!f.isZoomMode},get children(){return w(No,{})}}),null),h})(),(()=>{var h=Co(),p=h.firstChild,_=p.firstChild,$=_.nextSibling,M=$.nextSibling,z=M.firstChild,C=M.nextSibling,x=C.nextSibling,D=x.firstChild,V=D.firstChild,oe=x.nextSibling,Oe=oe.nextSibling,Pe=Oe.nextSibling,ie=p.nextSibling,ct=ie.firstChild,T=ct.nextSibling;T.nextSibling;var Z=ie.nextSibling,W=Z.firstChild,he=W.nextSibling,ge=he.nextSibling,Me=ge.nextSibling,re=Me.nextSibling;return v(h,w(H,{get when(){return!!f.errorMessage},get children(){return w(To,{})}}),p),_.$$click=i,v(_,w(H,{get when(){return u.showDesignOverlay},get fallback(){return w(Nn,{})},get children(){return w(Gn,{})}})),$.$$click=r,v($,w(H,{get when(){return u.lockDesignOverlay},get fallback(){return w(io,{})},get children(){return w(no,{})}})),M.$$click=s,v(z,()=>Math.floor(u.designOpacity*100)),v(M,w(so,{}),null),C.addEventListener("mouseleave",d),C.addEventListener("mouseenter",l),C.$$click=()=>g("top-center"),v(C,w(Un,{})),x.$$click=c,v(D,(()=>{var m=ne(()=>u.designScale===.5);return()=>m()?".5":u.designScale.toString()})(),V),v(x,w(eo,{}),null),oe.$$click=()=>k("showGridSettingsPanel",!0),v(oe,w(ao,{})),Oe.$$click=()=>k("showAllDesignsPanel",!0),v(Oe,w(zn,{})),Pe.$$click=a,v(Pe,w(uo,{})),v(ie,()=>f.designBufferedPosition.x,T),v(ie,()=>f.designBufferedPosition.y,null),Z.addEventListener("mouseleave",d),W.$$click=()=>g("left"),v(W,w(Kn,{})),he.$$click=()=>g("top"),v(he,w(Vn,{})),ge.$$click=()=>g("center"),v(ge,w(Jn,{})),Me.$$click=()=>g("bottom"),v(Me,w(Wn,{})),re.$$click=()=>g("right"),v(re,w(Yn,{})),v(h,w(H,{get when(){return f.showGridSettingsPanel},get children(){return w(Lo,{})}}),null),v(h,w(H,{get when(){return f.showAllDesignsPanel},get children(){return w(Ro,{})}}),null),S(m=>{var De=I("app-bar",f.isSolidMode&&"hide",f.isDragging&&"no-events",u.appPosition==="top"&&"top"),ut=n(),F=I("menu-bar",(f.showAllDesignsPanel||f.showGridSettingsPanel)&&"hide"),Fe=!f.designUrl,fe=!u.showDesignOverlay,Ye=I("menu-button","opacity-button"),Y=!u.showDesignOverlay,Xe=!u.showDesignOverlay,Je=I("menu-button","scale-button"),Le=!u.showDesignOverlay,Qe=I("menu-button",u.appPosition==="top"&&"rotate"),se=I("coordinates",(!u.showDesignOverlay||f.showAlignmentPopover||f.showAllDesignsPanel||f.showGridSettingsPanel)&&"hide"),je=I("alignment-popover",!f.showAlignmentPopover&&"hide");return De!==m.e&&j(h,m.e=De),m.t=lt(h,ut,m.t),F!==m.a&&j(p,m.a=F),Fe!==m.o&&(_.disabled=m.o=Fe),fe!==m.i&&($.disabled=m.i=fe),Ye!==m.n&&j(M,m.n=Ye),Y!==m.s&&(M.disabled=m.s=Y),Xe!==m.h&&(C.disabled=m.h=Xe),Je!==m.r&&j(x,m.r=Je),Le!==m.d&&(x.disabled=m.d=Le),Qe!==m.l&&j(Pe,m.l=Qe),se!==m.u&&j(ie,m.u=se),je!==m.c&&j(Z,m.c=je),m},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0,d:void 0,l:void 0,u:void 0,c:void 0}),h})()]}})}function Lo(){const[e,t]=G(u.verticalRhythmHeight),[n,o]=G(u.verticalRhythmColor),[i,r]=G([]),[s,l]=G(u.gridSystemColor),[d,g]=G(""),[c,a]=G(""),[h,p]=G(""),[_,$]=G(!0),[M,z]=G("center");xe(()=>{N.getAllGridSets().then(T=>r(T)).catch(U)});const C=()=>{P({showVerticalRhythmOverlay:!u.showVerticalRhythmOverlay})},x=()=>{P({verticalRhythmHeight:e()})},D=()=>{P({verticalRhythmColor:n()})},V=()=>{P({showGridSystemOverlay:!u.showGridSystemOverlay})},oe=()=>{P({gridSystemColor:s()})},Oe=()=>{const T={width:/^\d+$/.test(d())?`${d()}px`:d(),columns:+c(),gutterWidth:/^\d+$/.test(h())?`${h()}px`:h(),isGutterOnOutside:_(),position:M()};N.addGridSet(T).then(Z=>{r(W=>[...W,Z]),g(""),a(""),p(""),$(!0),z("center")}).catch(U)},Pe=T=>{N.deleteGridSet(T).then(()=>{r(Z=>Z.filter(W=>W.id!==T))}).catch(U)},ie=T=>{P({activeGridSystemId:T})},ct=()=>{N.resetGridSets().then(T=>{r(T),P({activeGridSystemId:"default"})}).catch(U)};return(()=>{var T=xo(),Z=T.firstChild,W=Z.firstChild,he=W.firstChild,ge=he.firstChild,Me=ge.firstChild,re=Me.nextSibling,m=re.firstChild,De=ge.nextSibling,ut=De.firstChild,F=ut.nextSibling,Fe=F.nextSibling,fe=De.nextSibling,Ye=fe.firstChild,Y=Ye.nextSibling,Xe=Y.nextSibling,Je=he.nextSibling,Le=Je.firstChild,Qe=Le.firstChild,se=Qe.nextSibling,je=se.firstChild,et=Le.nextSibling,Ho=et.firstChild,pe=Ho.nextSibling,Vo=pe.nextSibling,Zo=et.nextSibling,Wo=Zo.firstChild,qo=Wo.firstChild,Tt=qo.nextSibling,Ko=Tt.nextSibling,Fo=Ko.firstChild,zt=Fo.firstChild,ht=zt.firstChild,Bt=zt.nextSibling,gt=Bt.firstChild,Ut=Bt.nextSibling,ft=Ut.firstChild,Ht=Ut.nextSibling,Vt=Ht.firstChild,Zt=Ht.nextSibling,Wt=Zt.firstChild,Yo=Zt.nextSibling,qt=Yo.firstChild,Xo=Z.nextSibling,Kt=Xo.firstChild,Jo=Kt.nextSibling;return re.$$click=C,v(re,w(Nt,{}),m),v(m,()=>u.showVerticalRhythmOverlay?"Enabled":"Disabled"),F.$$input=b=>t(b.target.value),B(F,"spellcheck",!1),Fe.$$click=x,Y.$$input=b=>o(b.target.value),B(Y,"spellcheck",!1),Xe.$$click=D,se.$$click=V,v(se,w(Nt,{}),je),v(je,()=>u.showGridSystemOverlay?"Enabled":"Disabled"),pe.$$input=b=>l(b.target.value),B(pe,"spellcheck",!1),Vo.$$click=oe,v(Tt,()=>w(st,{get each(){return i()},children:b=>(()=>{var be=ko(),Re=be.firstChild,we=Re.nextSibling,ve=we.nextSibling,ye=ve.nextSibling,Ge=ye.nextSibling,Ie=Ge.nextSibling,ee=Ie.firstChild,le=ee.nextSibling;return v(Re,()=>b.width),v(we,()=>b.columns),v(ve,()=>b.gutterWidth),v(ye,()=>b.isGutterOnOutside?"Yes":"No"),v(Ge,()=>b.position),ee.$$click=()=>Pe(b.id),v(ee,w(It,{})),le.$$click=()=>ie(b.id),v(le,w(bo,{})),S(X=>{var Ft=I(u.activeGridSystemId===b.id&&"active"),Yt=i().length==1||u.activeGridSystemId===b.id,Xt=I("table__button","active-grid-button",u.activeGridSystemId===b.id&&"active"),Jt=u.activeGridSystemId===b.id;return Ft!==X.e&&j(be,X.e=Ft),Yt!==X.t&&(ee.disabled=X.t=Yt),Xt!==X.a&&j(le,X.a=Xt),Jt!==X.o&&(le.disabled=X.o=Jt),X},{e:void 0,t:void 0,a:void 0,o:void 0}),be})()})),ht.$$input=b=>g(b.target.value),B(ht,"spellcheck",!1),gt.$$input=b=>a(b.target.value),B(gt,"spellcheck",!1),ft.$$input=b=>p(b.target.value),B(ft,"spellcheck",!1),Vt.addEventListener("change",b=>$(!!+b.target.value)),Wt.addEventListener("change",b=>z(b.target.value)),qt.$$click=Oe,Kt.$$click=ct,Jo.$$click=()=>k("showGridSettingsPanel",!1),S(b=>{var be=I("panel__content",!!i().length&&"show"),Re=I("grid-setting-box__toggle-button",u.showVerticalRhythmOverlay&&"enabled"),we=e()!==u.verticalRhythmHeight?"italic":void 0,ve=n(),ye=n()!==u.verticalRhythmColor?"italic":void 0,Ge=I("grid-setting-box__toggle-button",u.showGridSystemOverlay&&"enabled"),Ie=s(),ee=s()!==u.gridSystemColor?"italic":void 0,le=!d()||!c()||!h();return be!==b.e&&j(W,b.e=be),Re!==b.t&&j(re,b.t=Re),we!==b.a&&((b.a=we)!=null?F.style.setProperty("font-style",we):F.style.removeProperty("font-style")),ve!==b.o&&((b.o=ve)!=null?fe.style.setProperty("background",ve):fe.style.removeProperty("background")),ye!==b.i&&((b.i=ye)!=null?Y.style.setProperty("font-style",ye):Y.style.removeProperty("font-style")),Ge!==b.n&&j(se,b.n=Ge),Ie!==b.s&&((b.s=Ie)!=null?et.style.setProperty("background",Ie):et.style.removeProperty("background")),ee!==b.h&&((b.h=ee)!=null?pe.style.setProperty("font-style",ee):pe.style.removeProperty("font-style")),le!==b.r&&(qt.disabled=b.r=le),b},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0,h:void 0,r:void 0}),S(()=>F.value=e()),S(()=>Y.value=n()),S(()=>pe.value=s()),S(()=>ht.value=d()),S(()=>gt.value=c()),S(()=>ft.value=h()),S(()=>Vt.value=Number(_())),S(()=>Wt.value=M()),T})()}function jo(e){const[t,n]=G("");return xe(()=>{const o=new Blob([e.buffer],{type:e.mimeType}),i=URL.createObjectURL(o);n(i)}),ke(()=>{URL.revokeObjectURL(t())}),(()=>{var o=_o(),i=o.firstChild,r=i.nextSibling;return i.$$click=()=>e.selectDesign(e.id),B(i,"draggable",!1),r.$$click=()=>e.deleteDesign(e.id),v(r,w(It,{})),S(s=>{var l=I("design-card",u.designId===e.id&&"current"),d=t(),g=u.designId===e.id;return l!==s.e&&j(o,s.e=l),d!==s.t&&B(i,"src",s.t=d),g!==s.a&&(r.disabled=s.a=g),s},{e:void 0,t:void 0,a:void 0}),o})()}function Ro(){const[e,t]=G(!1),[n,o]=G([]);xe(()=>{N.getAllDesigns().then(a=>{o(a),t(!0)}).catch(U)});const i=a=>{a.length!==0&&N.uploadDesign(a).then(h=>o(p=>[...h,...p])).catch(U)},r=a=>{const h=a.target,p=Array.from(h.files||[]);i(p)},s=a=>{var p;a.preventDefault(),a.stopPropagation();const h=Array.from(((p=a.dataTransfer)==null?void 0:p.files)||[]).filter(_=>["image/jpeg","image/png"].includes(_.type));i(h)},l=a=>{a.preventDefault(),a.stopPropagation()},d=a=>{u.designId!==a&&(P({designId:a,showDesignOverlay:!0}),k("showAllDesignsPanel",!1))},g=a=>{N.deleteDesign(a).then(()=>o(h=>h.filter(p=>p.id!==a))).catch(U)},c=()=>{N.deleteAllDesigns().then(()=>{o([]),P({designId:"",showDesignOverlay:!1}),f.designUrl&&(URL.revokeObjectURL(f.designUrl),k("designUrl",void 0))}).catch(U)};return(()=>{var a=$o(),h=a.firstChild,p=h.firstChild,_=p.firstChild,$=_.firstChild,M=$.firstChild,z=M.nextSibling,C=h.nextSibling,x=C.firstChild;return p.addEventListener("dragover",l),p.addEventListener("drop",s),v($,w(vo,{class:"upload-button__icon"}),M),z.addEventListener("change",r),v(_,()=>w(st,{get each(){return n()},children:D=>w(jo,cn(D,{selectDesign:d,deleteDesign:g}))}),null),v(C,w(H,{get when(){return!!n().length},get children(){var D=So();return D.$$click=c,D}}),x),x.$$click=()=>k("showAllDesignsPanel",!1),S(()=>j(p,I("panel__content",e()&&"show"))),a})()}function Go(){Ce(()=>{u.designId&&N.getDesign(u.designId).then(c=>{if(!c)throw new Error("Failed to load design image.");const a=new Blob([c.buffer],{type:c.mimeType}),h=URL.createObjectURL(a);k("designUrl",h)}).catch(U)}),Ce(()=>{u.showDesignOverlay?(window.addEventListener("keydown",s),window.addEventListener("keyup",l)):(window.removeEventListener("keydown",s),window.removeEventListener("keyup",l))}),ke(()=>{window.removeEventListener("keydown",s),window.removeEventListener("keyup",l)});const e=ne(()=>({width:`${f.designSize.width}px`,height:`${f.designSize.height}px`,opacity:f.isSolidMode?1:u.designOpacity,transform:`translate3D(${f.designBufferedPosition.x}px, ${f.designBufferedPosition.y}px, 0)`,cursor:f.isSolidMode?f.isZoomMode?"zoom-out":"zoom-in":f.isDragging?"grabbing":"grab"})),t=c=>{const a=c.target;k({designSize:{width:a.naturalWidth*u.designScale,height:a.naturalHeight*u.designScale},designOriginalSize:{width:a.naturalWidth,height:a.naturalHeight},designBufferedPosition:u.designPosition})},n=c=>{c.button===0&&(f.isSolidMode?f.isZoomMode?(k({isZoomMode:!1,designSize:{width:f.designOriginalSize.width*u.designScale,height:f.designOriginalSize.height*u.designScale},designBufferedPosition:u.designPosition,enableAnimation:!0}),window.removeEventListener("mousemove",i)):k({isZoomMode:!0,designSize:{width:f.designSize.width*2,height:f.designSize.height*2},designBufferedPosition:{x:innerWidth/2-(c.clientX-f.designBufferedPosition.x)*2,y:innerHeight/2-(c.clientY-f.designBufferedPosition.y)*2},enableAnimation:!0}):u.lockDesignOverlay||(k("isDragging",!0),window.addEventListener("mousemove",o)))},o=c=>{k("designBufferedPosition",a=>({x:a.x+c.movementX,y:a.y+c.movementY}))},i=c=>{k("designBufferedPosition",a=>({x:a.x-c.movementX,y:a.y-c.movementY}))},r=c=>{c.button!==0||!f.isDragging||(k("isDragging",!1),P({designPosition:f.designBufferedPosition}),window.removeEventListener("mousemove",o))},s=c=>{if(!c.composedPath().find(a=>a instanceof Element&&["INPUT","SELECT"].includes(a.tagName)))if(c.key==="Control")window.addEventListener("wheel",d,{passive:!1});else if(c.key===" ")c.preventDefault(),f.isDragging||k("isSolidMode",!0);else if(c.key.startsWith("Arrow")){c.preventDefault();const[a,h]={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]}[c.key]||[0,0];k("designBufferedPosition",{x:u.designPosition.x+a,y:u.designPosition.y+h})}else c.key==="Escape"&&P({lockDesignOverlay:!u.lockDesignOverlay})},l=c=>{["INPUT","SELECT"].includes(c.target.tagName)||(c.key==="Control"?window.removeEventListener("wheel",d):c.key===" "?f.isZoomMode?(k({isSolidMode:!1,isZoomMode:!1,designSize:{width:f.designOriginalSize.width*u.designScale,height:f.designOriginalSize.height*u.designScale},designBufferedPosition:u.designPosition,enableAnimation:!0}),window.removeEventListener("mousemove",i)):k("isSolidMode",!1):c.key.startsWith("Arrow")&&P({designPosition:f.designBufferedPosition}))},d=c=>{c.preventDefault();const a=c.deltaY>0?.05:-.05,h=Math.round((u.designOpacity+a)*100)/100;P({designOpacity:Math.max(.1,Math.min(.9,h))})},g=()=>{k("enableAnimation",!1),f.isZoomMode&&window.addEventListener("mousemove",i)};return(()=>{var c=Ao();return c.addEventListener("transitionend",g),c.addEventListener("mouseleave",r),c.$$mouseup=r,c.$$mousedown=n,c.addEventListener("load",t),B(c,"draggable",!1),S(a=>{var h=f.designUrl,p=I("design-overlay",f.isSolidMode&&"solid",f.enableAnimation&&"animation",u.lockDesignOverlay&&!f.isSolidMode&&"locked",(!f.designUrl||!u.showDesignOverlay)&&"hide"),_=e();return h!==a.e&&B(c,"src",a.e=h),p!==a.t&&j(c,a.t=p),a.a=lt(c,_,a.a),a},{e:void 0,t:void 0,a:void 0}),c})()}function Io(){return(()=>{var e=Eo();return S(t=>{var n=`linear-gradient(to bottom, ${u.verticalRhythmColor} ${u.verticalRhythmHeight}, transparent ${u.verticalRhythmHeight})`,o=`100% ${u.verticalRhythmHeight.replace(/\d+/,i=>String(+i*2))}`;return n!==t.e&&((t.e=n)!=null?e.style.setProperty("background-image",n):e.style.removeProperty("background-image")),o!==t.t&&((t.t=o)!=null?e.style.setProperty("background-size",o):e.style.removeProperty("background-size")),t},{e:void 0,t:void 0}),e})()}function No(){const[e,t]=G(void 0);return Ce(()=>{u.activeGridSystemId&&N.getGridSet(u.activeGridSystemId).then(n=>{if(!n)throw new Error("Failed to load grid system.");t(n)}).catch(U)}),w(H,{get when(){return!!e()},get children(){var n=Oo(),o=n.firstChild;return o.style.setProperty("box-sizing","border-box"),o.style.setProperty("display","flex"),v(o,w(st,{get each(){return Array.from({length:e().columns})},children:()=>(()=>{var i=Po();return i.style.setProperty("flex","1"),S(r=>(r=u.gridSystemColor)!=null?i.style.setProperty("background",r):i.style.removeProperty("background")),i})()})),S(i=>{var r=I("grid-system-overlay",e().position),s=e().width,l=e().isGutterOnOutside?e().gutterWidth.replace(/\d+/,c=>String(+c/2)):void 0,d=e().isGutterOnOutside?e().gutterWidth.replace(/\d+/,c=>String(+c/2)):void 0,g=e().gutterWidth;return r!==i.e&&j(n,i.e=r),s!==i.t&&((i.t=s)!=null?o.style.setProperty("width",s):o.style.removeProperty("width")),l!==i.a&&((i.a=l)!=null?o.style.setProperty("padding-left",l):o.style.removeProperty("padding-left")),d!==i.o&&((i.o=d)!=null?o.style.setProperty("padding-right",d):o.style.removeProperty("padding-right")),g!==i.i&&((i.i=g)!=null?o.style.setProperty("gap",g):o.style.removeProperty("gap")),i},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),n}})}function To(){const e=()=>{k("errorMessage",void 0)};return xe(()=>{window.addEventListener("mousedown",e),ke(()=>{window.removeEventListener("mousedown",e)})}),(()=>{var t=Mo(),n=t.firstChild;return v(t,w(go,{}),n),v(n,()=>f.errorMessage),t})()}_t(["click","input","mousedown","mouseup"]);const zo=".alignment-button:not(:disabled):hover,.menu-button:not(:disabled):hover{background:#0000000a}*{box-sizing:border-box}button{background:none;border:none;cursor:pointer;font:inherit;margin:0;outline:none;padding:0}button:disabled{cursor:default}button:not(:disabled):active{transform:scale(.95)}svg{color:currentcolor;display:block;fill:none}.hide{display:none!important}.app-bar{align-items:center;background:#fff;border:2px solid;border-radius:32px;bottom:40px;box-sizing:border-box;color:#000;display:flex;font-family:Arial,sans-serif;justify-content:center;left:16px;margin-left:auto;margin-right:auto;max-width:calc(100vw - 32px);outline:3px solid hsla(0,0%,100%,.5);position:fixed;right:16px;transform:translateZ(0);transition:all .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;will-change:width,height;z-index:2147483647}.app-bar.no-events{pointer-events:none}.app-bar.top{bottom:auto;top:48px}.toast{align-items:center;background:#fe0200;border:2px solid;border-radius:32px;bottom:96px;color:#fff;display:flex;gap:.5rem;left:50%;margin:auto;padding:.375rem .75rem;position:absolute;transform:translate(-50%);width:max-content;z-index:10}.toast__message{font-size:15px;line-height:16px}.top .toast{bottom:-64px}.menu-bar{align-items:center;display:flex;overflow-x:auto;padding:0 12px}.menu-button{padding:8px}.menu-button.rotate{transform:rotate(180deg)}.opacity-button{position:relative}.opacity-button__value{font-size:8px;font-weight:700;left:0;line-height:1;position:absolute;right:0;text-align:center;top:18px;z-index:1}.alignment-popover{align-items:center;background:#fff;border-left:2px solid;border-radius:12px 12px 0 0;border-right:2px solid;border-top:2px solid;bottom:100%;display:flex;left:80px;overflow:hidden;padding-left:4px;padding-right:4px;padding-top:4px;position:absolute;z-index:1}.alignment-button{border-radius:8px;padding:4px}.alignment-button>svg{height:24px;width:24px}.scale-button{position:relative}.scale-button__value{font-size:11.5px;font-weight:700;height:16px;top:0;right:0;bottom:0;left:0;line-height:16px;text-align:center}.coordinates,.scale-button__value{margin:auto;position:absolute;z-index:1}.coordinates{background:#fff;background:#000;border-radius:16px;bottom:calc(100% + 8px);color:#fff;font-family:monospace;font-size:12px;left:0;line-height:20px;padding:0 8px;pointer-events:none;right:0;white-space:nowrap;width:max-content}.panel{position:relative;width:100%}.panel,.panel__content-wrapper{border-radius:inherit;height:100%}.panel__content-wrapper{overflow:hidden;padding:8px}.panel__content{height:100%;opacity:0;overflow:auto;overscroll-behavior:contain;padding:16px;visibility:hidden;will-change:opacity visibility}.panel__content.show{opacity:1;transition:opacity .5s cubic-bezier(.4,0,.2,1) .25s,visibility 0s .25s;visibility:visible}.panel__footer{align-items:center;bottom:-18px;display:flex;gap:16px;left:0;margin:auto;position:absolute;right:0;width:max-content;z-index:1}.panel__button{background:#000;border-radius:16px;color:#fff;font-size:15px;line-height:32px;width:168px}.grid-setting-box{padding-bottom:24px}.grid-setting-box__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.grid-setting-box__heading{font-size:18px;line-height:32px;margin:0}.grid-setting-box__toggle-button{align-items:center;background:#000;border-radius:16px;color:#fff;display:flex;font-size:15px;gap:4px;line-height:32px;padding:0 10px;width:116px}.grid-setting-box__toggle-button>svg{flex:none}.grid-setting-box__toggle-button>span{flex:1;text-align:center}.grid-setting-box__toggle-button:active{transform:none!important}.grid-setting-box__toggle-button #toggle-trigger{transform:translate(-8px);transition:transform .25s cubic-bezier(.4,0,.2,1)}.grid-setting-box__toggle-button.enabled #toggle-trigger{transform:translate(0)}.fieldset{align-items:center;border-color:#000;border-radius:12px;display:flex;margin-bottom:16px;padding:8px 16px}.fieldset>legend{background:#000;border-radius:6px;color:#fff;font-size:15px;line-height:24px;padding-left:8px;padding-right:8px}.fieldset>input{background:transparent;border:none;display:block;flex:1;font-family:monospace;font-size:16px;line-height:24px;outline:none;padding:8px 8px 8px 0;width:100%}.fieldset>button{background:#000;border-radius:16px;color:#fff;font-size:14px;line-height:24px;padding-left:12px;padding-right:12px}.table-wrapper{border:2px solid #000;border-radius:12px;margin-top:24px;overflow:auto}.table{border-collapse:collapse;border-spacing:0;font-size:14px;line-height:16px;min-width:100%;text-align:left;white-space:nowrap;width:max-content}.table__bgroup{align-items:center;display:flex;gap:8px;justify-content:space-evenly}.table__button{border-radius:8px}.table__button>svg{height:20px;width:20px}.table__button.active-grid-button{opacity:0}.table__button.active-grid-button.active,.table__button.active-grid-button:focus{opacity:1}.table>thead>tr{border-bottom:1px solid #eee}.table>tbody{color:#333;text-transform:capitalize}.table>tbody>tr{border-bottom:1px solid #eee}.table>tbody>tr:hover .active-grid-button{opacity:1}.table>tbody>tr.active{background:#f9f9f9}.table th{padding:12px}.table th:not(:last-child){border-right:1px solid #eee}.table td{padding:8px 12px}.table td:not(:last-child){border-right:1px solid #eee}.table>tfoot td{padding:12px}.table>tfoot input{border:1px solid #eee;border-radius:6px;font-size:14px;height:24px;outline:none;padding:0 8px;width:72px}.table>tfoot input:focus{outline:2px solid #ddd}.table>tfoot select{border:1px solid #eee;border-radius:6px;font-size:14px;height:24px;outline:none;padding:0 4px}.table>tfoot select:focus{outline:2px solid #ddd}.add-grid-button{background:#000;border:none;border-radius:16px;color:#fff;font-size:13px;height:24px;padding-left:12px;padding-right:12px}.add-grid-button:disabled{opacity:.5}.add-grid-button:focus{outline:2px solid #999}.all-designs-list{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}.design-card{cursor:pointer;position:relative}.design-card__img{aspect-ratio:3/4;border:2px solid #ddd;border-radius:16px;display:block;object-fit:cover;width:100%}.design-card__button{align-items:center;background:#000;border-radius:50%;bottom:12px;color:#fff;display:flex;justify-content:center;opacity:0;padding:6px;position:absolute;right:12px;z-index:2}.design-card__button>svg{height:20px;width:20px}.design-card__button:hover{background:#fe0200}.design-card.current{cursor:not-allowed}.design-card.current .design-card__img{border-color:#666}.design-card.current .design-card__button{display:none}.design-card:hover .design-card__img{border-color:#666}.design-card:hover .design-card__button{opacity:1;transition:opacity .25s cubic-bezier(.4,0,.2,1)}.upload-button{align-items:center;aspect-ratio:3/4;background:#fafafa;border:2px solid #ddd;border-radius:16px;color:#aaa;cursor:pointer;display:flex;flex-direction:column;justify-content:center;width:100%}.upload-button__icon{background:#eee;border-radius:12px;height:64px;padding:12px;width:64px}.upload-button__text{font-size:16px;line-height:24px;margin-top:8px}.upload-button>input{display:none}.upload-button:hover{border-color:#666;color:#666}.overlay-container{top:0;right:0;bottom:0;left:0;min-height:100vh;overflow:hidden;pointer-events:none;position:absolute;z-index:2147483646}.design-overlay{contain:layout size;left:0;pointer-events:all;position:absolute;top:0;transition:none;-webkit-user-select:none;user-select:none;will-change:width,height,transform;z-index:1}.design-overlay:active{outline:1px dashed #000}.design-overlay.animation{transition:width .25s cubic-bezier(.4,0,.2,1),height .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}.design-overlay.locked{cursor:default;pointer-events:none}.design-overlay.solid{outline:none!important}.vertical-rhythm-overlay{top:0;right:0;bottom:0;left:0;position:absolute;z-index:2}.grid-system-overlay{display:grid;top:0;right:0;bottom:0;left:0;position:absolute;z-index:3}.grid-system-overlay.center{justify-content:center}.grid-system-overlay.left{justify-content:start}.grid-system-overlay.right{justify-content:end}";document.documentElement.style.position="relative";class Bo extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),n=document.createElement("style");n.textContent=zo,t.appendChild(n),wn(()=>w(Do,{}),t)}}customElements.define("pixel-mirror",Bo);const Uo=document.createElement("pixel-mirror");document.body.appendChild(Uo)})();
|
package/package.json
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixel-mirror",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Pixel Mirror helps developers achieve pixel-perfect UIs by easily overlaying design mockups.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./dist/index.js",
|
|
8
|
-
"./vite":
|
|
8
|
+
"./vite": {
|
|
9
|
+
"types": "./plugins/vite.d.ts",
|
|
10
|
+
"default": "./plugins/vite.js"
|
|
11
|
+
},
|
|
12
|
+
"./astro": {
|
|
13
|
+
"types": "./plugins/astro.d.ts",
|
|
14
|
+
"default": "./plugins/astro.js"
|
|
15
|
+
}
|
|
9
16
|
},
|
|
10
17
|
"keywords": [
|
|
11
18
|
"solid",
|
|
@@ -20,6 +27,8 @@
|
|
|
20
27
|
"bugs": {
|
|
21
28
|
"url": "https://github.com/p233-studio/pixel-mirror/issues"
|
|
22
29
|
},
|
|
30
|
+
"license": "Apache-2.0",
|
|
31
|
+
"author": "Peiwen Lu",
|
|
23
32
|
"devDependencies": {
|
|
24
33
|
"clsx": "^2.1.1",
|
|
25
34
|
"cssnano": "^7.0.6",
|
|
@@ -40,13 +49,12 @@
|
|
|
40
49
|
"typescript": "^5.7.2",
|
|
41
50
|
"typescript-eslint": "^8.18.2",
|
|
42
51
|
"vite": "^6.0.5",
|
|
43
|
-
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
44
52
|
"vite-plugin-solid": "^2.11.0",
|
|
45
53
|
"vite-plugin-solid-svg": "^0.8.1"
|
|
46
54
|
},
|
|
47
55
|
"lint-staged": {
|
|
48
56
|
"*.{ts,tsx}": [
|
|
49
|
-
"eslint --fix --max-warnings 0
|
|
57
|
+
"eslint --fix --max-warnings 0"
|
|
50
58
|
],
|
|
51
59
|
"*.scss": [
|
|
52
60
|
"stylelint --fix"
|
package/plugins/astro.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default function pixelMirror() {
|
|
2
|
+
return {
|
|
3
|
+
name: "pixel-mirror",
|
|
4
|
+
hooks: {
|
|
5
|
+
"astro:config:setup": ({ command, injectScript }) => {
|
|
6
|
+
if (command === "dev") {
|
|
7
|
+
injectScript(
|
|
8
|
+
"head-inline",
|
|
9
|
+
`const script = document.createElement("script");
|
|
10
|
+
script.src = "/node_modules/pixel-mirror/dist/index.js";
|
|
11
|
+
script.defer = true;
|
|
12
|
+
document.head.appendChild(script);`
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
}
|
package/plugins/vite.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
export default function
|
|
1
|
+
export default function pixelMirror() {
|
|
2
2
|
return {
|
|
3
|
-
name: "
|
|
3
|
+
name: "pixel-mirror",
|
|
4
4
|
transformIndexHtml(html) {
|
|
5
5
|
if (process.env.NODE_ENV !== "production") {
|
|
6
|
-
return html.replace(
|
|
7
|
-
"</body>",
|
|
8
|
-
`<script type="module" src="/node_modules/@p233-studio/pixel-mirror/dist/index.js"></script></body>`
|
|
9
|
-
);
|
|
6
|
+
return html.replace("</head>", `<script defer src="/node_modules/pixel-mirror/dist/index.js"></script></head>`);
|
|
10
7
|
}
|
|
11
8
|
return html;
|
|
12
9
|
}
|