netra-artifacts 0.1.0-alpha.1 → 0.1.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlArtifactPrompt.d.ts","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACd,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;
|
|
1
|
+
{"version":3,"file":"htmlArtifactPrompt.d.ts","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACd,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAgQD,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,OAAO,GAAE,iBAAsB,GAAG,MAAM,CAqC/E;AAED,yEAAyE;AACzE,eAAO,MAAM,2BAA2B,QAA4B,CAAC"}
|
|
@@ -23,6 +23,7 @@ table{width:100%;border-collapse:collapse}
|
|
|
23
23
|
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
|
|
24
24
|
.row{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center}
|
|
25
25
|
.card{padding:var(--pad);border-radius:var(--radius,16px);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),var(--surface,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.1))}
|
|
26
|
+
.control{min-height:44px;padding:.62em 2.2em .62em .9em;border-radius:calc(var(--radius,16px)*.75);border:1px solid var(--border,rgba(255,255,255,.14));background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));color:var(--fg);font:inherit}
|
|
26
27
|
.scroll-x{overflow-x:auto}
|
|
27
28
|
</style>`;
|
|
28
29
|
function buildOutputFormat(presentation) {
|
|
@@ -43,7 +44,7 @@ A short (1-2 sentence) chat message. Mention the aesthetic direction you chose,
|
|
|
43
44
|
${SHARED_STYLE_EXAMPLE}
|
|
44
45
|
</head>
|
|
45
46
|
<body style="background:transparent;margin:0;color:var(--fg)">
|
|
46
|
-
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.scroll-x) for structure + inline style="" for per-element specifics. The OUTER wrapper must have NO background of its own. Fully responsive & compact. -->
|
|
47
|
+
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.control/.scroll-x) for structure + inline style="" for per-element specifics. The OUTER wrapper must have NO background of its own. Fully responsive & compact. -->
|
|
47
48
|
</body>
|
|
48
49
|
</html>
|
|
49
50
|
</html_artifact>`;
|
|
@@ -64,7 +65,7 @@ A short (1-2 sentence) chat message. Mention the aesthetic direction you chose,
|
|
|
64
65
|
${SHARED_STYLE_EXAMPLE}
|
|
65
66
|
</head>
|
|
66
67
|
<body style="margin:0;background:var(--bg);color:var(--fg)">
|
|
67
|
-
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.scroll-x) for structure + inline style="" for per-element specifics. Fully responsive & compact (see rules). -->
|
|
68
|
+
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.control/.scroll-x) for structure + inline style="" for per-element specifics. Fully responsive & compact (see rules). -->
|
|
68
69
|
</body>
|
|
69
70
|
</html>
|
|
70
71
|
</html_artifact>`;
|
|
@@ -88,11 +89,11 @@ PUT IN THE <style> (keep it ~16 short lines; flat rules only):
|
|
|
88
89
|
- A fluid type + space SCALE as variables on html, each a single clamp() so text/space SHRINK on phones and grow on desktop automatically — this is how one document is compact on mobile and comfortable on desktop with no breakpoints:
|
|
89
90
|
html{--s0:clamp(13px,.55vw+11.5px,16px);--s1:clamp(15px,1vw+12px,19px);--h3:clamp(17px,1.2vw+13px,22px);--h2:clamp(22px,2.4vw+14px,40px);--h1:clamp(28px,4vw+12px,56px);--gap:clamp(14px,2.5vw,30px);--pad:clamp(16px,3.5vw,36px);font-size:var(--s0);line-height:1.5}
|
|
90
91
|
- Element defaults via INHERITANCE so you don't restyle every node: h1/h2/h3 sized from --h*, p{margin:0;font-size:var(--s1)}, a{color:inherit}, table{width:100%;border-collapse:collapse}, img,svg,video{display:block;max-width:100%}.
|
|
91
|
-
- A FEW reusable layout utility classes (classes WORK now — there is a stylesheet): .wrap (max-width + centered + --pad), .stack (column + --gap), .grid (auto-fit repeat(auto-fit,minmax(min(100%,220px),1fr)) + --gap), .row (flex-wrap + --gap), .card (--pad + radius + surface + border), .scroll-x (overflow-x:auto).
|
|
92
|
+
- A FEW reusable layout utility classes (classes WORK now — there is a stylesheet): .wrap (max-width + centered + --pad), .stack (column + --gap), .grid (auto-fit repeat(auto-fit,minmax(min(100%,220px),1fr)) + --gap), .row (flex-wrap + --gap), .card (--pad + radius + surface + border), .control (polished select/input/filter button base), .scroll-x (overflow-x:auto).
|
|
92
93
|
|
|
93
94
|
DECLARE COLOR/RADIUS TOKENS INLINE on <html style="--bg:…;--fg:…;--surface:…;--border:…;--muted:…;--radius:…;--accent:…"> (the <html> tag streams first AND lets the host theme apply). The <style> scale + utilities reference these via var().
|
|
94
95
|
|
|
95
|
-
STYLE EVERYTHING ELSE INLINE: per-element specifics — exact colors, font-weight, one-off sizes, SVG attributes, individual backgrounds, the actual stat value, a single card's accent. Use the utility classes for structure (class="grid"/"stack"/"card"/"row"/"wrap"/"scroll-x"), then add inline style="" only for what is unique to THAT element.
|
|
96
|
+
STYLE EVERYTHING ELSE INLINE: per-element specifics — exact colors, font-weight, one-off sizes, SVG attributes, individual backgrounds, the actual stat value, a single card's accent. Use the utility classes for structure (class="grid"/"stack"/"card"/"row"/"wrap"/"control"/"scroll-x"), then add inline style="" only for what is unique to THAT element.
|
|
96
97
|
|
|
97
98
|
THIRD TIER — optional @media breakpoints (use SPARINGLY, only for true LAYOUT shifts the clamp scale cannot express). The clamp scale already handles fluid type + spacing, so reach for @media ONLY to RESTRUCTURE at a real breakpoint — e.g. collapse a 2-column split to stacked, drop a decorative side column, or change a grid's min track. Put any @media rules INSIDE the single shared <style> (it stays the ONLY <style> block). The artifact is measured by the iframe's own width, so use width queries (e.g. @media(max-width:560px){.split{grid-template-columns:1fr}}) and keep to 1-2 of them. Tier order: (1) inline per-element specifics → (2) shared clamp scale + utility classes → (3) @media only for structural shifts.
|
|
98
99
|
|
|
@@ -101,12 +102,24 @@ STILL FORBIDDEN (none survive the streaming + camouflage layer — never emit th
|
|
|
101
102
|
- @keyframes, @font-face, @supports, @container.
|
|
102
103
|
- Pseudo-classes/elements: :hover, :focus, :active, ::before, ::after, ::marker (no stylesheet re-runs mid-stream).
|
|
103
104
|
- javascript:, external stylesheets, a click-toggle "burger" menu. For navs use a single wrapping/scrolling .row.
|
|
105
|
+
- Bare browser-default controls. NEVER emit naked <select>, <button>, <input>, or filter controls that look like plain OS widgets (tiny rectangular default boxes). Every control must use class="control" or equivalent inline styling, with a visible surface, border, spacing, readable font, and >=44px hit area. For select arrows, place a small text glyph (▼) in an adjacent span inside a position:relative wrapper; do not use CSS data-URI arrows.
|
|
104
106
|
|
|
105
107
|
CONCRETE PATTERN (auto-fit grid of stat cards — reflows 4-up → 1-up by itself, compact on phones):
|
|
106
108
|
<div class="grid">
|
|
107
109
|
<div class="card"><div style="font-size:13px;letter-spacing:.04em;color:var(--muted)">Revenue</div><div style="font-size:var(--h2);font-weight:700">$48.9K</div><div style="font-size:13px;color:#34d399">▲ 4.2%</div></div>
|
|
108
110
|
</div>
|
|
109
|
-
Structure comes from the class; only the unique bits are inline
|
|
111
|
+
Structure comes from the class; only the unique bits are inline.
|
|
112
|
+
|
|
113
|
+
CONCRETE CONTROL PATTERN (filters/selects — polished, not browser-default):
|
|
114
|
+
<div class="row" style="--gap:10px">
|
|
115
|
+
<label style="position:relative;display:inline-flex;align-items:center">
|
|
116
|
+
<span style="position:absolute;left:-9999px">Time range</span>
|
|
117
|
+
<select class="control" style="appearance:none;-webkit-appearance:none;min-width:132px"><option>30 Days</option><option>90 Days</option></select>
|
|
118
|
+
<span aria-hidden="true" style="position:absolute;right:12px;color:var(--muted);pointer-events:none">▼</span>
|
|
119
|
+
</label>
|
|
120
|
+
<button class="control" type="button" style="padding-right:.9em">All Assets (5)</button>
|
|
121
|
+
<button class="control" type="button" style="padding-right:.9em">All Segments</button>
|
|
122
|
+
</div>`;
|
|
110
123
|
}
|
|
111
124
|
const DESIGN_DIRECTION = `DESIGN DIRECTION — make it genuinely beautiful, not generic. Avoid "AI slop" at all costs.
|
|
112
125
|
|
|
@@ -143,7 +156,7 @@ function buildFontRule(allowExternalFonts) {
|
|
|
143
156
|
}
|
|
144
157
|
function buildFormRule(allowForms) {
|
|
145
158
|
if (allowForms) {
|
|
146
|
-
return `FORMS: native HTML controls only (form, label, input, textarea, select, button) with native validation (required, pattern, min, max, type=email/tel/...).
|
|
159
|
+
return `FORMS & FILTER CONTROLS: native HTML controls only (form, label, input, textarea, select, button) with native validation (required, pattern, min, max, type=email/tel/...). Every visible control must be deliberately styled to match the artifact aesthetic: use class="control" or equivalent inline styles, min-height >=44px, rounded token radius, visible filled/gradient surface, 1px border, inherited font, and comfortable horizontal padding. Filter bars like "30 Days / All Assets / All Segments" should render as polished pills or select controls in a wrapping .row, not raw default browser boxes. For a select's dropdown arrow use a Unicode glyph in an adjacent absolute-positioned span or leave the native arrow; NEVER a data-URI SVG background-image (it breaks attribute quoting). No JavaScript validation.`;
|
|
147
160
|
}
|
|
148
161
|
return `FORMS: avoid interactive controls; present information as polished static content.`;
|
|
149
162
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlArtifactPrompt.js","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAiB7D;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAG
|
|
1
|
+
{"version":3,"file":"htmlArtifactPrompt.js","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":"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"}
|
|
@@ -27,6 +27,7 @@ table{width:100%;border-collapse:collapse}
|
|
|
27
27
|
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
|
|
28
28
|
.row{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center}
|
|
29
29
|
.card{padding:var(--pad);border-radius:var(--radius,16px);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),var(--surface,rgba(255,255,255,.04));border:1px solid var(--border,rgba(255,255,255,.1))}
|
|
30
|
+
.control{min-height:44px;padding:.62em 2.2em .62em .9em;border-radius:calc(var(--radius,16px)*.75);border:1px solid var(--border,rgba(255,255,255,.14));background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));color:var(--fg);font:inherit}
|
|
30
31
|
.scroll-x{overflow-x:auto}
|
|
31
32
|
</style>`;
|
|
32
33
|
function buildOutputFormat(presentation) {
|
|
@@ -47,7 +48,7 @@ A short (1-2 sentence) chat message. Mention the aesthetic direction you chose,
|
|
|
47
48
|
${SHARED_STYLE_EXAMPLE}
|
|
48
49
|
</head>
|
|
49
50
|
<body style="background:transparent;margin:0;color:var(--fg)">
|
|
50
|
-
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.scroll-x) for structure + inline style="" for per-element specifics. The OUTER wrapper must have NO background of its own. Fully responsive & compact. -->
|
|
51
|
+
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.control/.scroll-x) for structure + inline style="" for per-element specifics. The OUTER wrapper must have NO background of its own. Fully responsive & compact. -->
|
|
51
52
|
</body>
|
|
52
53
|
</html>
|
|
53
54
|
</html_artifact>`;
|
|
@@ -68,7 +69,7 @@ A short (1-2 sentence) chat message. Mention the aesthetic direction you chose,
|
|
|
68
69
|
${SHARED_STYLE_EXAMPLE}
|
|
69
70
|
</head>
|
|
70
71
|
<body style="margin:0;background:var(--bg);color:var(--fg)">
|
|
71
|
-
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.scroll-x) for structure + inline style="" for per-element specifics. Fully responsive & compact (see rules). -->
|
|
72
|
+
<!-- Content: use the utility classes (.wrap/.stack/.grid/.row/.card/.control/.scroll-x) for structure + inline style="" for per-element specifics. Fully responsive & compact (see rules). -->
|
|
72
73
|
</body>
|
|
73
74
|
</html>
|
|
74
75
|
</html_artifact>`;
|
|
@@ -92,11 +93,11 @@ PUT IN THE <style> (keep it ~16 short lines; flat rules only):
|
|
|
92
93
|
- A fluid type + space SCALE as variables on html, each a single clamp() so text/space SHRINK on phones and grow on desktop automatically — this is how one document is compact on mobile and comfortable on desktop with no breakpoints:
|
|
93
94
|
html{--s0:clamp(13px,.55vw+11.5px,16px);--s1:clamp(15px,1vw+12px,19px);--h3:clamp(17px,1.2vw+13px,22px);--h2:clamp(22px,2.4vw+14px,40px);--h1:clamp(28px,4vw+12px,56px);--gap:clamp(14px,2.5vw,30px);--pad:clamp(16px,3.5vw,36px);font-size:var(--s0);line-height:1.5}
|
|
94
95
|
- Element defaults via INHERITANCE so you don't restyle every node: h1/h2/h3 sized from --h*, p{margin:0;font-size:var(--s1)}, a{color:inherit}, table{width:100%;border-collapse:collapse}, img,svg,video{display:block;max-width:100%}.
|
|
95
|
-
- A FEW reusable layout utility classes (classes WORK now — there is a stylesheet): .wrap (max-width + centered + --pad), .stack (column + --gap), .grid (auto-fit repeat(auto-fit,minmax(min(100%,220px),1fr)) + --gap), .row (flex-wrap + --gap), .card (--pad + radius + surface + border), .scroll-x (overflow-x:auto).
|
|
96
|
+
- A FEW reusable layout utility classes (classes WORK now — there is a stylesheet): .wrap (max-width + centered + --pad), .stack (column + --gap), .grid (auto-fit repeat(auto-fit,minmax(min(100%,220px),1fr)) + --gap), .row (flex-wrap + --gap), .card (--pad + radius + surface + border), .control (polished select/input/filter button base), .scroll-x (overflow-x:auto).
|
|
96
97
|
|
|
97
98
|
DECLARE COLOR/RADIUS TOKENS INLINE on <html style="--bg:…;--fg:…;--surface:…;--border:…;--muted:…;--radius:…;--accent:…"> (the <html> tag streams first AND lets the host theme apply). The <style> scale + utilities reference these via var().
|
|
98
99
|
|
|
99
|
-
STYLE EVERYTHING ELSE INLINE: per-element specifics — exact colors, font-weight, one-off sizes, SVG attributes, individual backgrounds, the actual stat value, a single card's accent. Use the utility classes for structure (class="grid"/"stack"/"card"/"row"/"wrap"/"scroll-x"), then add inline style="" only for what is unique to THAT element.
|
|
100
|
+
STYLE EVERYTHING ELSE INLINE: per-element specifics — exact colors, font-weight, one-off sizes, SVG attributes, individual backgrounds, the actual stat value, a single card's accent. Use the utility classes for structure (class="grid"/"stack"/"card"/"row"/"wrap"/"control"/"scroll-x"), then add inline style="" only for what is unique to THAT element.
|
|
100
101
|
|
|
101
102
|
THIRD TIER — optional @media breakpoints (use SPARINGLY, only for true LAYOUT shifts the clamp scale cannot express). The clamp scale already handles fluid type + spacing, so reach for @media ONLY to RESTRUCTURE at a real breakpoint — e.g. collapse a 2-column split to stacked, drop a decorative side column, or change a grid's min track. Put any @media rules INSIDE the single shared <style> (it stays the ONLY <style> block). The artifact is measured by the iframe's own width, so use width queries (e.g. @media(max-width:560px){.split{grid-template-columns:1fr}}) and keep to 1-2 of them. Tier order: (1) inline per-element specifics → (2) shared clamp scale + utility classes → (3) @media only for structural shifts.
|
|
102
103
|
|
|
@@ -105,12 +106,24 @@ STILL FORBIDDEN (none survive the streaming + camouflage layer — never emit th
|
|
|
105
106
|
- @keyframes, @font-face, @supports, @container.
|
|
106
107
|
- Pseudo-classes/elements: :hover, :focus, :active, ::before, ::after, ::marker (no stylesheet re-runs mid-stream).
|
|
107
108
|
- javascript:, external stylesheets, a click-toggle "burger" menu. For navs use a single wrapping/scrolling .row.
|
|
109
|
+
- Bare browser-default controls. NEVER emit naked <select>, <button>, <input>, or filter controls that look like plain OS widgets (tiny rectangular default boxes). Every control must use class="control" or equivalent inline styling, with a visible surface, border, spacing, readable font, and >=44px hit area. For select arrows, place a small text glyph (▼) in an adjacent span inside a position:relative wrapper; do not use CSS data-URI arrows.
|
|
108
110
|
|
|
109
111
|
CONCRETE PATTERN (auto-fit grid of stat cards — reflows 4-up → 1-up by itself, compact on phones):
|
|
110
112
|
<div class="grid">
|
|
111
113
|
<div class="card"><div style="font-size:13px;letter-spacing:.04em;color:var(--muted)">Revenue</div><div style="font-size:var(--h2);font-weight:700">$48.9K</div><div style="font-size:13px;color:#34d399">▲ 4.2%</div></div>
|
|
112
114
|
</div>
|
|
113
|
-
Structure comes from the class; only the unique bits are inline
|
|
115
|
+
Structure comes from the class; only the unique bits are inline.
|
|
116
|
+
|
|
117
|
+
CONCRETE CONTROL PATTERN (filters/selects — polished, not browser-default):
|
|
118
|
+
<div class="row" style="--gap:10px">
|
|
119
|
+
<label style="position:relative;display:inline-flex;align-items:center">
|
|
120
|
+
<span style="position:absolute;left:-9999px">Time range</span>
|
|
121
|
+
<select class="control" style="appearance:none;-webkit-appearance:none;min-width:132px"><option>30 Days</option><option>90 Days</option></select>
|
|
122
|
+
<span aria-hidden="true" style="position:absolute;right:12px;color:var(--muted);pointer-events:none">▼</span>
|
|
123
|
+
</label>
|
|
124
|
+
<button class="control" type="button" style="padding-right:.9em">All Assets (5)</button>
|
|
125
|
+
<button class="control" type="button" style="padding-right:.9em">All Segments</button>
|
|
126
|
+
</div>`;
|
|
114
127
|
}
|
|
115
128
|
const DESIGN_DIRECTION = `DESIGN DIRECTION — make it genuinely beautiful, not generic. Avoid "AI slop" at all costs.
|
|
116
129
|
|
|
@@ -147,7 +160,7 @@ function buildFontRule(allowExternalFonts) {
|
|
|
147
160
|
}
|
|
148
161
|
function buildFormRule(allowForms) {
|
|
149
162
|
if (allowForms) {
|
|
150
|
-
return `FORMS: native HTML controls only (form, label, input, textarea, select, button) with native validation (required, pattern, min, max, type=email/tel/...).
|
|
163
|
+
return `FORMS & FILTER CONTROLS: native HTML controls only (form, label, input, textarea, select, button) with native validation (required, pattern, min, max, type=email/tel/...). Every visible control must be deliberately styled to match the artifact aesthetic: use class="control" or equivalent inline styles, min-height >=44px, rounded token radius, visible filled/gradient surface, 1px border, inherited font, and comfortable horizontal padding. Filter bars like "30 Days / All Assets / All Segments" should render as polished pills or select controls in a wrapping .row, not raw default browser boxes. For a select's dropdown arrow use a Unicode glyph in an adjacent absolute-positioned span or leave the native arrow; NEVER a data-URI SVG background-image (it breaks attribute quoting). No JavaScript validation.`;
|
|
151
164
|
}
|
|
152
165
|
return `FORMS: avoid interactive controls; present information as polished static content.`;
|
|
153
166
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"htmlArtifactPrompt.js","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"htmlArtifactPrompt.js","sourceRoot":"","sources":["../../src/prompts/htmlArtifactPrompt.ts"],"names":[],"mappings":";;;AAiRA,0DAqCC;AAtTD,uDAAuD;AACvD,0DAA6D;AAiB7D;;;;;;;GAOG;AACH,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;SAiBpB,CAAC;AAEV,SAAS,iBAAiB,CAAC,YAAmC;IAC5D,IAAI,YAAY,KAAK,UAAU,EAAE,CAAC;QAChC,OAAO;;;;;;;;;;;;;EAaT,oBAAoB;;;;;;iBAML,CAAC;IAChB,CAAC;IAED,OAAO;;;;;;;;;;;;;EAaP,oBAAoB;;;;;;iBAML,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,GAAG;;;;;;;;;iHAS8F,CAAC;AAElH,SAAS,gBAAgB;IACvB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsCF,CAAC;AACR,CAAC;AAED,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;4EAqBmD,CAAC;AAE7E,SAAS,aAAa,CAAC,kBAA2B;IAChD,IAAI,kBAAkB,EAAE,CAAC;QACvB,OAAO;;;;;sEAK2D,CAAC;IACrE,CAAC;IACD,OAAO,sMAAsM,+BAAiB,GAAG,CAAC;AACpO,CAAC;AAED,SAAS,aAAa,CAAC,UAAmB;IACxC,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,4yBAA4yB,CAAC;IACtzB,CAAC;IACD,OAAO,oFAAoF,CAAC;AAC9F,CAAC;AAED,SAAS,qBAAqB,CAAC,OAA8B;IAC3D,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,8MAA8M,CAAC;IACxN,CAAC;IACD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,OAAO,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC;IACrE,IAAI,OAAO,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IACtD,IAAI,OAAO,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAC/D,IAAI,OAAO,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,IAAI,OAAO,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3D,IAAI,OAAO,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5E,IAAI,OAAO,CAAC,gBAAgB;QAC1B,KAAK,CAAC,IAAI,CAAC,sBAAsB,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC/D,OAAO,yEAAyE,KAAK,CAAC,IAAI,CACxF,IAAI,CACL,oIAAoI,CAAC;AACxI,CAAC;AAED,SAAS,cAAc,CAAC,KAAqB,EAAE,YAAmC;IAChF,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IACtB,MAAM,MAAM,GAAa,EAAE,CAAC;IAC5B,IAAI,KAAK,CAAC,WAAW;QAAE,MAAM,CAAC,IAAI,CAAC,iBAAiB,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;IACzE,IAAI,KAAK,CAAC,UAAU;QAAE,MAAM,CAAC,IAAI,CAAC,oBAAoB,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1E,IAAI,KAAK,CAAC,UAAU;QAAE,MAAM,CAAC,IAAI,CAAC,oBAAoB,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1E,IAAI,KAAK,CAAC,OAAO;QAAE,MAAM,CAAC,IAAI,CAAC,kBAAkB,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IAClE,IAAI,KAAK,CAAC,MAAM;QAAE,MAAM,CAAC,IAAI,CAAC,WAAW,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IACzD,IAAI,KAAK,CAAC,KAAK;QAAE,MAAM,CAAC,IAAI,CAAC,eAAe,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3D,IAAI,KAAK,CAAC,MAAM;QAAE,MAAM,CAAC,IAAI,CAAC,sBAAsB,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IACpE,IAAI,KAAK,CAAC,OAAO;QAAE,MAAM,CAAC,IAAI,CAAC,mBAAmB,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;IACnE,IAAI,KAAK,CAAC,MAAM;QAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D,IAAI,KAAK,CAAC,UAAU;QAAE,MAAM,CAAC,IAAI,CAAC,gBAAgB,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC;IAEtE,IAAI,YAAY,KAAK,UAAU,EAAE,CAAC;QAChC,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;oKACsF,CAAC;IACnK,CAAC;IAED,OAAO;IACL,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;mWACqR,CAAC;AACpW,CAAC;AAED,SAAS,qBAAqB,CAAC,YAAmC;IAChE,IAAI,YAAY,KAAK,UAAU;QAAE,OAAO,EAAE,CAAC;IAC3C,OAAO;;;;;;iKAMwJ,CAAC;AAClK,CAAC;AAED,SAAS,yBAAyB,CAAC,YAAmC;IACpE,IAAI,YAAY,KAAK,UAAU,EAAE,CAAC;QAChC,OAAO;;;6MAGkM,CAAC;IAC5M,CAAC;IAED,OAAO,2PAA2P,CAAC;AACrQ,CAAC;AAED,MAAM,WAAW,GAAG;;;;;2DAKuC,CAAC;AAE5D,MAAM,cAAc,GAAG;;;;sJAI+H,CAAC;AAEvJ,MAAM,eAAe,GAAG;;;;;;wLAMgK,CAAC;AAEzL,+EAA+E;AAC/E,SAAgB,uBAAuB,CAAC,UAA6B,EAAE;IACrE,MAAM,EACJ,YAAY,EACZ,kBAAkB,GAAG,KAAK,EAC1B,UAAU,GAAG,IAAI,EACjB,KAAK,EACL,YAAY,GACb,GAAG,OAAO,CAAC;IAEZ,OAAO;QACL,oCAAkB;QAClB,EAAE;QACF,iBAAiB,CAAC,YAAY,CAAC;QAC/B,EAAE;QACF,UAAU;QACV,EAAE;QACF,gBAAgB,EAAE;QAClB,EAAE;QACF,cAAc;QACd,EAAE;QACF,eAAe;QACf,EAAE;QACF,WAAW;QACX,EAAE;QACF,gBAAgB;QAChB,EAAE;QACF,aAAa,CAAC,kBAAkB,CAAC;QACjC,aAAa,CAAC,UAAU,CAAC;QACzB,qBAAqB,CAAC,YAAY,CAAC;QACnC,cAAc,CAAC,KAAK,EAAE,YAAY,CAAC;QACnC,qBAAqB,CAAC,YAAY,CAAC;QACnC,yBAAyB,CAAC,YAAY,CAAC;QACvC,EAAE;QACF,mNAAmN;KACpN;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED,yEAAyE;AAC5D,QAAA,2BAA2B,GAAG,uBAAuB,EAAE,CAAC"}
|
package/package.json
CHANGED