@zen-ui-capri/system 1.1.1 → 1.1.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/bin/capri.mjs +7 -2
- package/dist/lib/capri/capri-engine.d.ts +1 -1
- package/dist/lib/capri/capri-engine.d.ts.map +1 -1
- package/dist/lib/components/ZenIcon.d.ts.map +1 -1
- package/dist/lib/index.d.ts +1 -1
- package/dist/lib/index.js +1118 -975
- package/dist/lib/theme/ZenThemeProvider.d.ts +2 -22
- package/dist/lib/theme/ZenThemeProvider.d.ts.map +1 -1
- package/dist/lib/theme/zen-theme-core.d.ts +23 -0
- package/dist/lib/theme/zen-theme-core.d.ts.map +1 -0
- package/dist/lib/universal/zen-universal.d.ts +1 -1
- package/dist/lib/universal/zen-universal.d.ts.map +1 -1
- package/dist/lib/universal/zen-universal.js +7 -7
- package/dist/lib/{zen-universal-C0PD8AI9.js → zen-universal-B_4UHCPT.js} +378 -465
- package/package.json +41 -11
- package/src/lib/capri/capri-engine.ts +1 -1
- package/src/lib/components/ZenIcon.tsx +24 -7
- package/src/lib/index.ts +1 -1
- package/src/lib/theme/ZenThemeProvider.tsx +36 -191
- package/src/lib/theme/zen-theme-core.ts +186 -0
- package/src/lib/universal/zen-universal.ts +95 -7
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
import { createContext as ee, useState as H, useEffect as V, useMemo as te, useContext as ne } from "react";
|
|
6
|
-
const k = [
|
|
1
|
+
var q = Object.defineProperty;
|
|
2
|
+
var K = (c, e, t) => e in c ? q(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
|
|
3
|
+
var h = (c, e, t) => K(c, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
+
const _ = [
|
|
7
5
|
{
|
|
8
6
|
id: "obsidian-gold",
|
|
9
7
|
name: "Obsidian Gold",
|
|
@@ -84,16 +82,16 @@ const k = [
|
|
|
84
82
|
secondaryHex: "#0284C7",
|
|
85
83
|
inkHex: "#09090D"
|
|
86
84
|
}
|
|
87
|
-
]
|
|
88
|
-
function
|
|
85
|
+
];
|
|
86
|
+
function W(c, e) {
|
|
89
87
|
if (typeof document > "u") return;
|
|
90
|
-
const
|
|
91
|
-
let r = document.getElementById(
|
|
92
|
-
r || (r = document.createElement("style"), r.id =
|
|
88
|
+
const t = (e == null ? void 0 : e.accentPrimary) ?? c.accentHex, n = (e == null ? void 0 : e.bgCanvas) ?? c.canvasHex, a = c.polarity === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(15, 23, 42, 0.14)", o = "zen-theme-scrollbar";
|
|
89
|
+
let r = document.getElementById(o);
|
|
90
|
+
r || (r = document.createElement("style"), r.id = o, document.head.appendChild(r)), r.textContent = `
|
|
93
91
|
@supports (-moz-appearance: none) {
|
|
94
92
|
html, body, * {
|
|
95
93
|
scrollbar-width: thin;
|
|
96
|
-
scrollbar-color: ${
|
|
94
|
+
scrollbar-color: ${t} ${n};
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
::-webkit-scrollbar,
|
|
@@ -107,179 +105,40 @@ body::-webkit-scrollbar,
|
|
|
107
105
|
html::-webkit-scrollbar-track,
|
|
108
106
|
body::-webkit-scrollbar-track,
|
|
109
107
|
*::-webkit-scrollbar-track {
|
|
110
|
-
background-color: ${
|
|
108
|
+
background-color: ${n};
|
|
111
109
|
border-left: 1px solid ${a};
|
|
112
110
|
}
|
|
113
111
|
::-webkit-scrollbar-thumb,
|
|
114
112
|
html::-webkit-scrollbar-thumb,
|
|
115
113
|
body::-webkit-scrollbar-thumb,
|
|
116
114
|
*::-webkit-scrollbar-thumb {
|
|
117
|
-
background-color: color-mix(in srgb, ${
|
|
118
|
-
border: 2px solid ${
|
|
115
|
+
background-color: color-mix(in srgb, ${t} 68%, ${n});
|
|
116
|
+
border: 2px solid ${n};
|
|
119
117
|
border-radius: 9999px;
|
|
120
118
|
}
|
|
121
119
|
::-webkit-scrollbar-thumb:hover,
|
|
122
120
|
html::-webkit-scrollbar-thumb:hover,
|
|
123
121
|
body::-webkit-scrollbar-thumb:hover,
|
|
124
122
|
*::-webkit-scrollbar-thumb:hover {
|
|
125
|
-
background-color: ${
|
|
126
|
-
border: 2px solid ${
|
|
123
|
+
background-color: ${t};
|
|
124
|
+
border: 2px solid ${n};
|
|
127
125
|
}
|
|
128
126
|
::-webkit-scrollbar-thumb:active,
|
|
129
127
|
html::-webkit-scrollbar-thumb:active,
|
|
130
128
|
body::-webkit-scrollbar-thumb:active,
|
|
131
129
|
*::-webkit-scrollbar-thumb:active {
|
|
132
|
-
background-color: ${
|
|
133
|
-
border: 2px solid ${
|
|
130
|
+
background-color: ${c.secondaryHex};
|
|
131
|
+
border: 2px solid ${n};
|
|
134
132
|
}
|
|
135
133
|
::-webkit-scrollbar-corner,
|
|
136
134
|
html::-webkit-scrollbar-corner,
|
|
137
135
|
body::-webkit-scrollbar-corner,
|
|
138
136
|
*::-webkit-scrollbar-corner {
|
|
139
|
-
background-color: ${
|
|
137
|
+
background-color: ${n};
|
|
140
138
|
}
|
|
141
139
|
`.trim();
|
|
142
140
|
}
|
|
143
|
-
|
|
144
|
-
defaultTheme: l = "blackwall-crimson",
|
|
145
|
-
defaultDensity: e = "comfortable",
|
|
146
|
-
defaultRadius: n = "architectural",
|
|
147
|
-
overrides: t,
|
|
148
|
-
syncDocumentRoot: a = !0,
|
|
149
|
-
children: i
|
|
150
|
-
}) {
|
|
151
|
-
const [r, d] = H(l), [c, s] = H(e), [m, v] = H(n), [b, h] = H(() => typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches), A = k.find((u) => u.id === r) ?? k[0];
|
|
152
|
-
V(() => {
|
|
153
|
-
if (typeof window > "u") return;
|
|
154
|
-
const u = window.matchMedia("(prefers-reduced-motion: reduce)"), x = (E) => h(E.matches);
|
|
155
|
-
return u.addEventListener("change", x), () => u.removeEventListener("change", x);
|
|
156
|
-
}, []), V(() => {
|
|
157
|
-
if (!a || typeof document > "u") return;
|
|
158
|
-
const u = document.documentElement;
|
|
159
|
-
u.setAttribute("data-theme", r), u.setAttribute("data-polarity", A.polarity), u.setAttribute("data-density", c), u.setAttribute("data-radius", m), t != null && t.accentPrimary ? u.style.setProperty("--zen-accent-primary", t.accentPrimary) : u.style.removeProperty("--zen-accent-primary"), t != null && t.bgCanvas ? u.style.setProperty("--zen-bg-canvas", t.bgCanvas) : u.style.removeProperty("--zen-bg-canvas"), t != null && t.surface1 ? u.style.setProperty("--zen-surface-1", t.surface1) : u.style.removeProperty("--zen-surface-1"), t != null && t.inkPrimary ? u.style.setProperty("--zen-ink-primary", t.inkPrimary) : u.style.removeProperty("--zen-ink-primary"), K(A, t);
|
|
160
|
-
}, [r, A, c, m, t, a]);
|
|
161
|
-
const C = () => {
|
|
162
|
-
d((u) => (k.find((E) => E.id === u) ?? k[0]).polarity === "dark" ? u === "blackwall-crimson" ? "cyber-daylight" : u === "neon-emerald" ? "kyoto-matcha" : u === "midnight-cobalt" ? "nordic-snow" : "atelier-paper" : u === "cyber-daylight" ? "blackwall-crimson" : u === "kyoto-matcha" ? "neon-emerald" : u === "nordic-snow" ? "midnight-cobalt" : "obsidian-gold");
|
|
163
|
-
}, w = te(
|
|
164
|
-
() => ({
|
|
165
|
-
theme: r,
|
|
166
|
-
themeMeta: A,
|
|
167
|
-
polarity: A.polarity,
|
|
168
|
-
density: c,
|
|
169
|
-
radius: m,
|
|
170
|
-
reducedMotion: b,
|
|
171
|
-
themes: k,
|
|
172
|
-
setTheme: d,
|
|
173
|
-
togglePolarity: C,
|
|
174
|
-
setDensity: s,
|
|
175
|
-
setRadius: v
|
|
176
|
-
}),
|
|
177
|
-
[r, A, c, m, b]
|
|
178
|
-
);
|
|
179
|
-
return /* @__PURE__ */ q(G.Provider, { value: w, children: i });
|
|
180
|
-
}
|
|
181
|
-
function be() {
|
|
182
|
-
const l = ne(G);
|
|
183
|
-
if (!l)
|
|
184
|
-
throw new Error("useZenTheme must be used within a ZenThemeProvider");
|
|
185
|
-
return l;
|
|
186
|
-
}
|
|
187
|
-
const Y = {
|
|
188
|
-
xs: 12,
|
|
189
|
-
sm: 14,
|
|
190
|
-
md: 16,
|
|
191
|
-
lg: 20,
|
|
192
|
-
xl: 24
|
|
193
|
-
}, W = {
|
|
194
|
-
inherit: "currentColor",
|
|
195
|
-
primary: "var(--zen-ink-primary)",
|
|
196
|
-
secondary: "var(--zen-ink-secondary)",
|
|
197
|
-
muted: "var(--zen-ink-muted)",
|
|
198
|
-
accent: "var(--zen-accent-primary)",
|
|
199
|
-
success: "var(--zen-status-success)",
|
|
200
|
-
warning: "var(--zen-status-warning)",
|
|
201
|
-
danger: "var(--zen-status-danger)"
|
|
202
|
-
}, F = {
|
|
203
|
-
search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
|
|
204
|
-
plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
|
|
205
|
-
minus: '<path d="M5 12h14"/>',
|
|
206
|
-
close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
|
|
207
|
-
check: '<path d="M20 6 9 17l-5-5"/>',
|
|
208
|
-
copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
|
|
209
|
-
"chevron-down": '<path d="m6 9 6 6 6-6"/>',
|
|
210
|
-
"chevron-right": '<path d="m9 18 6-6-6-6"/>',
|
|
211
|
-
"chevron-left": '<path d="m15 18-6-6 6-6"/>',
|
|
212
|
-
"external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
|
|
213
|
-
bolt: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
|
|
214
|
-
sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/>',
|
|
215
|
-
terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
|
|
216
|
-
cpu: '<rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/>',
|
|
217
|
-
database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
|
|
218
|
-
layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
|
|
219
|
-
shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
|
|
220
|
-
sliders: '<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/>',
|
|
221
|
-
command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
|
|
222
|
-
code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
|
|
223
|
-
activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
|
|
224
|
-
info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
|
|
225
|
-
success: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
|
|
226
|
-
warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
|
227
|
-
danger: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
|
|
228
|
-
"trend-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
|
229
|
-
"trend-down": '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
|
|
230
|
-
radio: '<path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/>',
|
|
231
|
-
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
|
|
232
|
-
moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
|
233
|
-
eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
|
|
234
|
-
upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
|
|
235
|
-
trash: '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
|
|
236
|
-
refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
|
|
237
|
-
menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
|
|
238
|
-
"panel-right": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
|
|
239
|
-
user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
|
240
|
-
lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
|
241
|
-
globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
|
|
242
|
-
folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>'
|
|
243
|
-
}, fe = Object.keys(
|
|
244
|
-
F
|
|
245
|
-
);
|
|
246
|
-
function re(l) {
|
|
247
|
-
const e = Y[l.size ?? "md"], n = W[l.tone ?? "inherit"], t = l.strokeWidth ?? 2, a = F[l.name] ?? F.sparkles, i = l.spin ? "animation: spin 1s linear infinite;" : "";
|
|
248
|
-
return `<svg xmlns="http://www.w3.org/2000/svg" width="${e}" height="${e}" viewBox="0 0 24 24" fill="none" stroke="${n}" stroke-width="${t}" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block;vertical-align:middle;flex-shrink:0;${i}">${a}</svg>`;
|
|
249
|
-
}
|
|
250
|
-
function ve({
|
|
251
|
-
name: l,
|
|
252
|
-
size: e = "md",
|
|
253
|
-
tone: n = "inherit",
|
|
254
|
-
strokeWidth: t = 2,
|
|
255
|
-
spin: a = !1,
|
|
256
|
-
ariaLabel: i,
|
|
257
|
-
className: r = "",
|
|
258
|
-
...d
|
|
259
|
-
}) {
|
|
260
|
-
const c = Y[e], s = W[n], m = F[l] ?? F.sparkles;
|
|
261
|
-
return /* @__PURE__ */ q(
|
|
262
|
-
"svg",
|
|
263
|
-
{
|
|
264
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
265
|
-
width: c,
|
|
266
|
-
height: c,
|
|
267
|
-
viewBox: "0 0 24 24",
|
|
268
|
-
fill: "none",
|
|
269
|
-
stroke: s,
|
|
270
|
-
strokeWidth: t,
|
|
271
|
-
strokeLinecap: "round",
|
|
272
|
-
strokeLinejoin: "round",
|
|
273
|
-
role: i ? "img" : void 0,
|
|
274
|
-
"aria-label": i,
|
|
275
|
-
"aria-hidden": i ? void 0 : "true",
|
|
276
|
-
className: `inline-block shrink-0 ${a ? "animate-spin" : ""} ${r}`.trim(),
|
|
277
|
-
dangerouslySetInnerHTML: { __html: m },
|
|
278
|
-
...d
|
|
279
|
-
}
|
|
280
|
-
);
|
|
281
|
-
}
|
|
282
|
-
const S = {
|
|
141
|
+
const w = {
|
|
283
142
|
orion: {
|
|
284
143
|
id: "orion",
|
|
285
144
|
codeName: "CAPRI // UNLEASHED",
|
|
@@ -413,7 +272,7 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
|
|
|
413
272
|
3. Zero Runtime Overhead: Keep documentation purely static or on-demand (via 'npx capri docu'); never inject docu scanners into production render loops.`,
|
|
414
273
|
aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's neural cartographer persona from Cyberpunk: Edgerunners Season 2."
|
|
415
274
|
}
|
|
416
|
-
},
|
|
275
|
+
}, Y = [
|
|
417
276
|
{
|
|
418
277
|
category: "SYSTEM_PROMPT_OVERRIDE",
|
|
419
278
|
patternName: "Ignore / Disregard System Instructions",
|
|
@@ -455,45 +314,45 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
|
|
|
455
314
|
regex: /(?:\bsk_(?:live|test)_[0-9a-zA-Z]{16,}|\bAIza[0-9A-Za-z_-]{35}\b|\bghp_[0-9A-Za-z]{36}\b|-----BEGIN\s+(?:RSA\s+)?PRIVATE\s+KEY-----)/g
|
|
456
315
|
}
|
|
457
316
|
];
|
|
458
|
-
class
|
|
317
|
+
class X {
|
|
459
318
|
constructor() {
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
319
|
+
h(this, "activeSubroutine", "orion");
|
|
320
|
+
h(this, "lastReport", null);
|
|
321
|
+
h(this, "listeners", /* @__PURE__ */ new Set());
|
|
463
322
|
}
|
|
464
323
|
getSubroutine() {
|
|
465
324
|
return this.activeSubroutine;
|
|
466
325
|
}
|
|
467
326
|
getSkill(e = this.activeSubroutine) {
|
|
468
|
-
return
|
|
327
|
+
return w[e];
|
|
469
328
|
}
|
|
470
329
|
getAllSkills() {
|
|
471
330
|
return [
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
331
|
+
w.orion,
|
|
332
|
+
w.architect,
|
|
333
|
+
w.sentinel,
|
|
334
|
+
w.zen,
|
|
335
|
+
w.docu
|
|
477
336
|
];
|
|
478
337
|
}
|
|
479
338
|
scanPromptInjection(e) {
|
|
480
|
-
const
|
|
481
|
-
let
|
|
482
|
-
for (const a of
|
|
483
|
-
const
|
|
484
|
-
for (const r of
|
|
485
|
-
|
|
339
|
+
const t = [];
|
|
340
|
+
let n = e.replace(/[\u200B-\u200F\uFEFF]/g, "");
|
|
341
|
+
for (const a of Y) {
|
|
342
|
+
const o = [...n.matchAll(a.regex)];
|
|
343
|
+
for (const r of o)
|
|
344
|
+
t.push({
|
|
486
345
|
category: a.category,
|
|
487
346
|
patternName: a.patternName,
|
|
488
347
|
matchedSnippet: r[0].slice(0, 64)
|
|
489
348
|
});
|
|
490
|
-
|
|
349
|
+
n = n.replace(a.regex, "[REDACTED_BY_CAPRI_GUARD]");
|
|
491
350
|
}
|
|
492
351
|
return {
|
|
493
|
-
safe:
|
|
494
|
-
threatCount:
|
|
495
|
-
threats:
|
|
496
|
-
sanitizedText:
|
|
352
|
+
safe: t.length === 0,
|
|
353
|
+
threatCount: t.length,
|
|
354
|
+
threats: t,
|
|
355
|
+
sanitizedText: n
|
|
497
356
|
};
|
|
498
357
|
}
|
|
499
358
|
sanitizeForPrompt(e) {
|
|
@@ -502,26 +361,26 @@ class ie {
|
|
|
502
361
|
scanInputSecurity(e) {
|
|
503
362
|
return this.scanPromptInjection(e);
|
|
504
363
|
}
|
|
505
|
-
switchSubroutine(e,
|
|
506
|
-
var
|
|
364
|
+
switchSubroutine(e, t) {
|
|
365
|
+
var o;
|
|
507
366
|
this.activeSubroutine = e;
|
|
508
|
-
const
|
|
509
|
-
if (typeof document < "u" && (document.documentElement.setAttribute("data-capri-subroutine", e),
|
|
510
|
-
const r =
|
|
511
|
-
document.documentElement.setAttribute("data-theme",
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
367
|
+
const n = w[e];
|
|
368
|
+
if (typeof document < "u" && (document.documentElement.setAttribute("data-capri-subroutine", e), t != null && t.applyPresetTheme)) {
|
|
369
|
+
const r = _.find((l) => l.id === n.recommendedTheme) ?? _[0];
|
|
370
|
+
document.documentElement.setAttribute("data-theme", n.recommendedTheme), document.documentElement.setAttribute("data-polarity", r.polarity), document.documentElement.setAttribute("data-radius", n.recommendedRadius), document.documentElement.setAttribute("data-density", n.recommendedDensity), document.documentElement.style.colorScheme = r.polarity, (o = t.onThemeChange) == null || o.call(
|
|
371
|
+
t,
|
|
372
|
+
n.recommendedTheme,
|
|
373
|
+
n.recommendedRadius,
|
|
374
|
+
n.recommendedDensity
|
|
516
375
|
);
|
|
517
376
|
}
|
|
518
377
|
const a = this.guard();
|
|
519
|
-
return this.notify(a),
|
|
378
|
+
return this.notify(a), n;
|
|
520
379
|
}
|
|
521
380
|
guard(e) {
|
|
522
|
-
var
|
|
381
|
+
var x, T, $, I, M;
|
|
523
382
|
if (typeof document > "u" || typeof window > "u") {
|
|
524
|
-
const
|
|
383
|
+
const p = {
|
|
525
384
|
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
526
385
|
passed: !0,
|
|
527
386
|
score: 100,
|
|
@@ -537,79 +396,79 @@ class ie {
|
|
|
537
396
|
activePolarity: "dark",
|
|
538
397
|
violations: []
|
|
539
398
|
};
|
|
540
|
-
return this.lastReport =
|
|
399
|
+
return this.lastReport = p, p;
|
|
541
400
|
}
|
|
542
|
-
const
|
|
401
|
+
const t = e ?? document, n = document.documentElement, a = n.getAttribute("data-theme") ?? "", o = n.getAttribute("data-polarity") ?? "", r = !!(a && o), l = Math.max(
|
|
543
402
|
0,
|
|
544
|
-
Math.round(
|
|
545
|
-
),
|
|
546
|
-
|
|
403
|
+
Math.round(n.scrollWidth - window.innerWidth)
|
|
404
|
+
), d = Array.from(
|
|
405
|
+
t.querySelectorAll(
|
|
547
406
|
'button, [role="button"], input:not([type="hidden"]), select, textarea'
|
|
548
407
|
)
|
|
549
408
|
), s = [];
|
|
550
|
-
let
|
|
551
|
-
for (const
|
|
552
|
-
const
|
|
553
|
-
if (!
|
|
554
|
-
const
|
|
555
|
-
s.push(`${
|
|
409
|
+
let u = 0;
|
|
410
|
+
for (const p of d) {
|
|
411
|
+
const F = (x = p.getAttribute("aria-label")) == null ? void 0 : x.trim(), i = (T = p.getAttribute("aria-labelledby")) == null ? void 0 : T.trim(), m = ($ = p.getAttribute("title")) == null ? void 0 : $.trim(), g = (I = p.textContent) == null ? void 0 : I.trim(), C = (M = p.getAttribute("placeholder")) == null ? void 0 : M.trim(), E = p.getAttribute("id"), z = !!(E && t.querySelector(`label[for="${CSS.escape(E)}"]`)), O = !!p.closest("label");
|
|
412
|
+
if (!F && !i && !m && !g && !C && !z && !O) {
|
|
413
|
+
const k = p.tagName.toLowerCase(), L = p.className ? `.${String(p.className).trim().split(/\s+/).slice(0, 2).join(".")}` : "";
|
|
414
|
+
s.push(`${k}${L}`);
|
|
556
415
|
}
|
|
557
|
-
if (
|
|
558
|
-
const
|
|
559
|
-
|
|
416
|
+
if (p instanceof HTMLInputElement || p instanceof HTMLTextAreaElement) {
|
|
417
|
+
const k = this.scanPromptInjection(p.value || "");
|
|
418
|
+
k.safe || (u += k.threatCount);
|
|
560
419
|
}
|
|
561
420
|
}
|
|
562
|
-
const b =
|
|
421
|
+
const b = t.querySelectorAll(
|
|
563
422
|
'a[href^="javascript:"], iframe[src^="javascript:"], [onerror], [onload]'
|
|
564
|
-
).length,
|
|
565
|
-
|
|
423
|
+
).length, y = [];
|
|
424
|
+
u > 0 && y.push({
|
|
566
425
|
code: "PROMPT_INJECTION_DETECTED",
|
|
567
426
|
severity: "error",
|
|
568
427
|
selector: "input, textarea",
|
|
569
|
-
message: `${
|
|
428
|
+
message: `${u} prompt-injection or token-spoofing payload(s) detected in active form controls.`,
|
|
570
429
|
fixHint: "Sanitize untrusted input with capri.sanitizeForPrompt() before forwarding to AI models."
|
|
571
|
-
}), b > 0 &&
|
|
430
|
+
}), b > 0 && y.push({
|
|
572
431
|
code: "UNSAFE_DOM_SINK",
|
|
573
432
|
severity: "error",
|
|
574
433
|
selector: 'a[href^="javascript:"], [onerror], [onload]',
|
|
575
434
|
message: `${b} unsafe DOM XSS sink(s) detected in live document.`,
|
|
576
435
|
fixHint: "Remove inline event handlers and block javascript: URLs via sanitizeZenAssetUrl()."
|
|
577
|
-
}), r ||
|
|
436
|
+
}), r || y.push({
|
|
578
437
|
code: "MISSING_THEME_ROOT",
|
|
579
438
|
severity: "warning",
|
|
580
439
|
selector: "html",
|
|
581
440
|
message: "Root <html> element is missing data-theme or data-polarity attributes.",
|
|
582
441
|
fixHint: 'Wrap your app in <ZenThemeProvider> or call zenTheme.setTheme("blackwall-crimson").'
|
|
583
|
-
}),
|
|
442
|
+
}), l > 0 && y.push({
|
|
584
443
|
code: "HORIZONTAL_OVERFLOW",
|
|
585
444
|
severity: "error",
|
|
586
445
|
selector: "document.documentElement",
|
|
587
|
-
message: `Horizontal viewport overflow detected (+${
|
|
446
|
+
message: `Horizontal viewport overflow detected (+${l}px beyond ${window.innerWidth}px).`,
|
|
588
447
|
fixHint: "Add min-w-0 to CSS Grid/Flex children and wrap wide tables in .zen-table-wrapper."
|
|
589
|
-
}), s.length > 0 &&
|
|
448
|
+
}), s.length > 0 && y.push({
|
|
590
449
|
code: "UNLABELED_CONTROL",
|
|
591
450
|
severity: "error",
|
|
592
451
|
selector: s.slice(0, 3).join(", "),
|
|
593
452
|
message: `${s.length} interactive control(s) missing an accessible label.`,
|
|
594
453
|
fixHint: 'Pass ariaLabel="..." to ZenIconButton or associate inputs with <label>.'
|
|
595
454
|
});
|
|
596
|
-
const A =
|
|
455
|
+
const A = u * 35 + b * 35 + (l > 0 ? 35 : 0) + s.length * 15 + (r ? 0 : 15), S = Math.max(0, 100 - A), v = {
|
|
597
456
|
timestamp: (/* @__PURE__ */ new Date()).toISOString(),
|
|
598
|
-
passed:
|
|
599
|
-
score:
|
|
457
|
+
passed: y.length === 0,
|
|
458
|
+
score: S,
|
|
600
459
|
viewport: `${window.innerWidth}x${window.innerHeight}`,
|
|
601
|
-
horizontalOverflowPx:
|
|
460
|
+
horizontalOverflowPx: l,
|
|
602
461
|
unlabeledControlsCount: s.length,
|
|
603
462
|
unlabeledSelectors: s,
|
|
604
|
-
promptInjectionSafe:
|
|
605
|
-
promptThreatsCount:
|
|
463
|
+
promptInjectionSafe: u === 0,
|
|
464
|
+
promptThreatsCount: u,
|
|
606
465
|
unsafeDomSinksCount: b,
|
|
607
466
|
themeConfigured: r,
|
|
608
467
|
activeTheme: a || "unconfigured",
|
|
609
|
-
activePolarity:
|
|
610
|
-
violations:
|
|
468
|
+
activePolarity: o || "unconfigured",
|
|
469
|
+
violations: y
|
|
611
470
|
};
|
|
612
|
-
return this.lastReport =
|
|
471
|
+
return this.lastReport = v, v;
|
|
613
472
|
}
|
|
614
473
|
getLastReport() {
|
|
615
474
|
return this.lastReport ?? this.guard();
|
|
@@ -641,10 +500,10 @@ class ie {
|
|
|
641
500
|
};
|
|
642
501
|
}
|
|
643
502
|
docu(e) {
|
|
644
|
-
var
|
|
645
|
-
const
|
|
503
|
+
var I, M, p, F;
|
|
504
|
+
const t = this.telemetry(), n = this.guard(e);
|
|
646
505
|
if (typeof document > "u" || typeof window > "u") {
|
|
647
|
-
const
|
|
506
|
+
const i = {
|
|
648
507
|
buttons: 0,
|
|
649
508
|
inputsAndSelects: 0,
|
|
650
509
|
switchesAndRadios: 0,
|
|
@@ -657,41 +516,41 @@ class ie {
|
|
|
657
516
|
generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
658
517
|
appTitle: "zeN-UI Application",
|
|
659
518
|
routePath: "/",
|
|
660
|
-
telemetry:
|
|
661
|
-
audit:
|
|
519
|
+
telemetry: t,
|
|
520
|
+
audit: n,
|
|
662
521
|
landmarks: [],
|
|
663
|
-
inventory:
|
|
522
|
+
inventory: i,
|
|
664
523
|
userFlows: [],
|
|
665
524
|
mermaidDiagram: `flowchart TD
|
|
666
525
|
Root["App Root (SSR)"] --> UI["@zen-ui/system"]`,
|
|
667
526
|
markdownBundle: "# Automated Architecture & User-Flow Dossier (SSR)"
|
|
668
527
|
};
|
|
669
528
|
}
|
|
670
|
-
const a = e ?? document,
|
|
529
|
+
const a = e ?? document, o = document.title || "zeN-UI Application", r = window.location.pathname || "/", d = Array.from(
|
|
671
530
|
a.querySelectorAll("header, nav, section[id], main, footer")
|
|
672
|
-
).slice(0, 12).map((
|
|
673
|
-
var
|
|
674
|
-
const
|
|
531
|
+
).slice(0, 12).map((i, m) => {
|
|
532
|
+
var V;
|
|
533
|
+
const g = i.tagName.toLowerCase(), C = i.id || `${g}-${m + 1}`, E = i.querySelector("h1, h2, h3, h4"), z = i.getAttribute("aria-label"), O = ((V = E == null ? void 0 : E.textContent) == null ? void 0 : V.trim()) || (z == null ? void 0 : z.trim()) || `${g.toUpperCase()} (${C})`, k = this.sanitizeForPrompt(O).replace(/\s+/g, " ").slice(0, 64), L = i.querySelectorAll(
|
|
675
534
|
'button, a[href], [role="button"], [role="radio"], [role="tab"]'
|
|
676
|
-
).length,
|
|
535
|
+
).length, G = i.querySelectorAll(
|
|
677
536
|
'input, select, textarea, [role="switch"], [role="checkbox"], [role="combobox"]'
|
|
678
537
|
).length;
|
|
679
538
|
return {
|
|
680
|
-
id:
|
|
681
|
-
tag:
|
|
682
|
-
title:
|
|
683
|
-
interactiveCount:
|
|
684
|
-
formControlsCount:
|
|
539
|
+
id: C,
|
|
540
|
+
tag: g,
|
|
541
|
+
title: k,
|
|
542
|
+
interactiveCount: L,
|
|
543
|
+
formControlsCount: G
|
|
685
544
|
};
|
|
686
545
|
}), s = [
|
|
687
546
|
"zen-icon",
|
|
688
547
|
"zen-ai-construct",
|
|
689
548
|
"zen-ambient-background",
|
|
690
549
|
"zen-theme-switcher"
|
|
691
|
-
].filter((
|
|
692
|
-
var
|
|
693
|
-
return !!((
|
|
694
|
-
}),
|
|
550
|
+
].filter((i) => {
|
|
551
|
+
var m;
|
|
552
|
+
return !!((m = window.customElements) != null && m.get(i));
|
|
553
|
+
}), u = {
|
|
695
554
|
buttons: a.querySelectorAll("button, .zen-btn-base").length,
|
|
696
555
|
inputsAndSelects: a.querySelectorAll("input, textarea, select, .zen-input, .zen-select").length,
|
|
697
556
|
switchesAndRadios: a.querySelectorAll('[role="switch"], [role="radio"], [type="checkbox"]').length,
|
|
@@ -699,164 +558,164 @@ class ie {
|
|
|
699
558
|
cardsAndSurfaces: a.querySelectorAll(".zen-surface-base, .zen-surface-interactive, .zen-surface-selected").length,
|
|
700
559
|
badgesAndAlerts: a.querySelectorAll('.zen-badge, [role="alert"], [role="status"]').length,
|
|
701
560
|
customElements: s
|
|
702
|
-
},
|
|
703
|
-
for (const [
|
|
704
|
-
const
|
|
705
|
-
|
|
706
|
-
id: `flow-nav-${
|
|
561
|
+
}, f = [], b = Array.from(a.querySelectorAll("nav a[href], nav button")).slice(0, 5);
|
|
562
|
+
for (const [i, m] of b.entries()) {
|
|
563
|
+
const g = ((I = m.textContent) == null ? void 0 : I.trim().replace(/\s+/g, " ").slice(0, 36)) || `Nav Trigger ${i + 1}`, C = m.getAttribute("href") || "Section / State Action";
|
|
564
|
+
f.push({
|
|
565
|
+
id: `flow-nav-${i + 1}`,
|
|
707
566
|
category: "navigation",
|
|
708
|
-
triggerLabel:
|
|
709
|
-
targetDescription: `Navigates or jumps to ${
|
|
567
|
+
triggerLabel: g,
|
|
568
|
+
targetDescription: `Navigates or jumps to ${C}`
|
|
710
569
|
});
|
|
711
570
|
}
|
|
712
|
-
const
|
|
571
|
+
const y = Array.from(
|
|
713
572
|
a.querySelectorAll("button")
|
|
714
|
-
).filter((
|
|
715
|
-
for (const [
|
|
716
|
-
const
|
|
717
|
-
|
|
718
|
-
id: `flow-overlay-${
|
|
573
|
+
).filter((i) => /modal|drawer|palette|command/i.test(i.textContent ?? "")).slice(0, 3);
|
|
574
|
+
for (const [i, m] of y.entries()) {
|
|
575
|
+
const g = ((M = m.textContent) == null ? void 0 : M.trim().replace(/\s+/g, " ").slice(0, 36)) || `Overlay ${i + 1}`;
|
|
576
|
+
f.push({
|
|
577
|
+
id: `flow-overlay-${i + 1}`,
|
|
719
578
|
category: "overlay-trigger",
|
|
720
|
-
triggerLabel:
|
|
579
|
+
triggerLabel: g,
|
|
721
580
|
targetDescription: "Opens focus-trapped dialog / drawer overlay (Escape & backdrop dismiss)"
|
|
722
581
|
});
|
|
723
582
|
}
|
|
724
583
|
const A = Array.from(
|
|
725
584
|
a.querySelectorAll('input:not([type="hidden"]), select, textarea')
|
|
726
585
|
).slice(0, 4);
|
|
727
|
-
for (const [
|
|
728
|
-
const
|
|
729
|
-
|
|
730
|
-
id: `flow-form-${
|
|
586
|
+
for (const [i, m] of A.entries()) {
|
|
587
|
+
const g = m.getAttribute("aria-label") || m.getAttribute("placeholder") || m.tagName.toLowerCase();
|
|
588
|
+
f.push({
|
|
589
|
+
id: `flow-form-${i + 1}`,
|
|
731
590
|
category: "form-entry",
|
|
732
|
-
triggerLabel:
|
|
733
|
-
targetDescription: `Interactive ${
|
|
591
|
+
triggerLabel: g.slice(0, 38),
|
|
592
|
+
targetDescription: `Interactive ${m.tagName.toLowerCase()} state binding & validation`
|
|
734
593
|
});
|
|
735
594
|
}
|
|
736
|
-
const
|
|
737
|
-
for (const [
|
|
738
|
-
const
|
|
739
|
-
|
|
740
|
-
id: `flow-table-${
|
|
595
|
+
const S = Array.from(a.querySelectorAll("table")).slice(0, 2);
|
|
596
|
+
for (const [i, m] of S.entries()) {
|
|
597
|
+
const g = ((F = (p = m.querySelector("caption")) == null ? void 0 : p.textContent) == null ? void 0 : F.trim()) || m.getAttribute("aria-label") || `Data Table ${i + 1}`;
|
|
598
|
+
f.push({
|
|
599
|
+
id: `flow-table-${i + 1}`,
|
|
741
600
|
category: "data-table",
|
|
742
|
-
triggerLabel:
|
|
743
|
-
targetDescription: `Tabular data grid (${
|
|
601
|
+
triggerLabel: g.slice(0, 42),
|
|
602
|
+
targetDescription: `Tabular data grid (${m.querySelectorAll("tbody tr").length} rows visible)`
|
|
744
603
|
});
|
|
745
604
|
}
|
|
746
|
-
const
|
|
605
|
+
const v = (i) => i.replace(/["[\]()]/g, "").replace(/\s+/g, " ").trim(), x = [
|
|
747
606
|
"flowchart TD",
|
|
748
|
-
` AppRoot["${
|
|
749
|
-
` Guard["CapriEngine Guard: ${
|
|
607
|
+
` AppRoot["${v(o)} (${t.theme} / ${t.polarity})"]`,
|
|
608
|
+
` Guard["CapriEngine Guard: ${n.score}/100 (${n.horizontalOverflowPx}px overflow)"]`,
|
|
750
609
|
" AppRoot --> Guard"
|
|
751
610
|
];
|
|
752
|
-
|
|
753
|
-
const
|
|
754
|
-
|
|
755
|
-
` AppRoot --> ${
|
|
611
|
+
d.slice(0, 6).forEach((i, m) => {
|
|
612
|
+
const g = `LM_${m + 1}`;
|
|
613
|
+
x.push(
|
|
614
|
+
` AppRoot --> ${g}["${v(i.id)}: ${v(i.title)} (${i.interactiveCount} actions)"]`
|
|
756
615
|
);
|
|
757
|
-
}),
|
|
758
|
-
const
|
|
759
|
-
|
|
760
|
-
` Guard --> ${
|
|
616
|
+
}), f.slice(0, 5).forEach((i, m) => {
|
|
617
|
+
const g = `UF_${m + 1}`;
|
|
618
|
+
x.push(
|
|
619
|
+
` Guard --> ${g}["[${i.category}] ${v(i.triggerLabel)}"]`
|
|
761
620
|
);
|
|
762
621
|
});
|
|
763
|
-
const
|
|
764
|
-
`),
|
|
765
|
-
`# ${
|
|
622
|
+
const T = x.join(`
|
|
623
|
+
`), $ = [
|
|
624
|
+
`# ${o} — Automated Architecture, User-Flow & AI Context Dossier`,
|
|
766
625
|
`Generated by \`@zen-ui/system\` // \`capri.docu()\` at \`${(/* @__PURE__ */ new Date()).toISOString()}\``,
|
|
767
626
|
"",
|
|
768
627
|
"## 1. Runtime & Design Token Architecture",
|
|
769
628
|
`- **Route Path:** \`${r}\``,
|
|
770
|
-
`- **Active Theme & Polarity:** \`${
|
|
771
|
-
`- **Corner Radius & Density:** \`${
|
|
772
|
-
`- **Viewport & Reduced Motion:** \`${
|
|
773
|
-
`- **W3C Custom Elements Registered:** ${
|
|
774
|
-
`- **DOM, Security & WCAG 2.2 AA Audit Score:** **${
|
|
629
|
+
`- **Active Theme & Polarity:** \`${t.theme}\` (\`${t.polarity}\`)`,
|
|
630
|
+
`- **Corner Radius & Density:** \`${t.radius}\` / \`${t.density}\``,
|
|
631
|
+
`- **Viewport & Reduced Motion:** \`${t.viewportWidth}x${t.viewportHeight}\` (DPR \`${t.devicePixelRatio}\`, reducedMotion=\`${t.reducedMotion}\`)`,
|
|
632
|
+
`- **W3C Custom Elements Registered:** ${u.customElements.map((i) => `\`<${i}>\``).join(", ") || "None"}`,
|
|
633
|
+
`- **DOM, Security & WCAG 2.2 AA Audit Score:** **${n.score}/100** (${n.passed ? "PASSED" : "VIOLATIONS DETECTED"}, \`${n.horizontalOverflowPx}px\` horizontal overflow, promptInjectionSafe=\`${n.promptInjectionSafe}\`)`,
|
|
775
634
|
"",
|
|
776
635
|
"## 2. Component Inventory on Current Screen",
|
|
777
|
-
`- **Buttons & Action Triggers:** ${
|
|
778
|
-
`- **Text Inputs, Textareas & Selects:** ${
|
|
779
|
-
`- **Switches, Checkboxes & Radio Controls:** ${
|
|
780
|
-
`- **Glass Cards & Surface Containers:** ${
|
|
781
|
-
`- **Data Tables:** ${
|
|
782
|
-
`- **Status Badges & Live Alerts:** ${
|
|
636
|
+
`- **Buttons & Action Triggers:** ${u.buttons}`,
|
|
637
|
+
`- **Text Inputs, Textareas & Selects:** ${u.inputsAndSelects}`,
|
|
638
|
+
`- **Switches, Checkboxes & Radio Controls:** ${u.switchesAndRadios}`,
|
|
639
|
+
`- **Glass Cards & Surface Containers:** ${u.cardsAndSurfaces}`,
|
|
640
|
+
`- **Data Tables:** ${u.tables}`,
|
|
641
|
+
`- **Status Badges & Live Alerts:** ${u.badgesAndAlerts}`,
|
|
783
642
|
"",
|
|
784
643
|
"## 3. Semantic Landmark & Section Hierarchy",
|
|
785
|
-
...
|
|
786
|
-
(
|
|
644
|
+
...d.map(
|
|
645
|
+
(i) => `- **\`#${i.id}\` (\`<${i.tag}>\`)** — *${i.title}* (${i.interactiveCount} interactive triggers, ${i.formControlsCount} form controls)`
|
|
787
646
|
),
|
|
788
647
|
"",
|
|
789
648
|
"## 4. Extracted Interactive User Flows",
|
|
790
|
-
...
|
|
791
|
-
(
|
|
649
|
+
...f.map(
|
|
650
|
+
(i) => `- **[${i.category.toUpperCase()}] \`${i.triggerLabel}\`** $\\rightarrow$ ${i.targetDescription}`
|
|
792
651
|
),
|
|
793
652
|
"",
|
|
794
653
|
"## 5. Auto-Generated Mermaid Architecture & User-Flow Diagram",
|
|
795
654
|
"```mermaid",
|
|
796
|
-
|
|
655
|
+
T,
|
|
797
656
|
"```"
|
|
798
657
|
].join(`
|
|
799
658
|
`);
|
|
800
659
|
return {
|
|
801
660
|
generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
802
|
-
appTitle:
|
|
661
|
+
appTitle: o,
|
|
803
662
|
routePath: r,
|
|
804
|
-
telemetry:
|
|
805
|
-
audit:
|
|
806
|
-
landmarks:
|
|
807
|
-
inventory:
|
|
808
|
-
userFlows:
|
|
809
|
-
mermaidDiagram:
|
|
810
|
-
markdownBundle:
|
|
663
|
+
telemetry: t,
|
|
664
|
+
audit: n,
|
|
665
|
+
landmarks: d,
|
|
666
|
+
inventory: u,
|
|
667
|
+
userFlows: f,
|
|
668
|
+
mermaidDiagram: T,
|
|
669
|
+
markdownBundle: $
|
|
811
670
|
};
|
|
812
671
|
}
|
|
813
|
-
exportMarkdownDocu(e = this.activeSubroutine,
|
|
814
|
-
const a = this.docu(),
|
|
672
|
+
exportMarkdownDocu(e = this.activeSubroutine, t, n = !1) {
|
|
673
|
+
const a = this.docu(), o = w[e], r = t ? this.sanitizeForPrompt(t) : "";
|
|
815
674
|
return [
|
|
816
675
|
a.markdownBundle,
|
|
817
676
|
"",
|
|
818
|
-
`## 6. Active Capri Subroutine Skill Ruleset (${
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
${
|
|
677
|
+
`## 6. Active Capri Subroutine Skill Ruleset (${o.codeName})`,
|
|
678
|
+
o.aiSystemPrompt,
|
|
679
|
+
n ? `
|
|
680
|
+
${o.aiVoiceAddendum}` : "",
|
|
822
681
|
"",
|
|
823
|
-
...
|
|
682
|
+
...o.ruleset.map((l, d) => `${d + 1}. ${l}`),
|
|
824
683
|
r ? `
|
|
825
684
|
## 7. Current Developer / AI Task
|
|
826
685
|
${r}` : ""
|
|
827
686
|
].filter(Boolean).join(`
|
|
828
687
|
`);
|
|
829
688
|
}
|
|
830
|
-
buildAgentPrompt(e = this.activeSubroutine,
|
|
831
|
-
const a =
|
|
689
|
+
buildAgentPrompt(e = this.activeSubroutine, t, n = !1) {
|
|
690
|
+
const a = w[e], o = this.docu(), r = o.audit, l = t ? this.sanitizeForPrompt(t) : "", d = r.violations.length === 0 ? "0 violations detected (Score: 100/100, 0 prompt-injection threats, 0px overflow, 0 unlabeled controls)." : r.violations.map((s) => `- [${s.code}] (${s.selector}): ${s.message} -> Fix: ${s.fixHint}`).join(`
|
|
832
691
|
`);
|
|
833
692
|
return [
|
|
834
693
|
"# @zen-ui/system // CAPRI AI SKILL & ARCHITECTURE CONTEXT",
|
|
835
694
|
`Subroutine: ${a.codeName} (${a.id}) — ${a.title}`,
|
|
836
|
-
`Invoke Command: "${
|
|
695
|
+
`Invoke Command: "${n ? a.voiceCommand : a.chatCommand}" (Voice Mode: ${n ? "ON (--voice)" : "OFF (Default)"})`,
|
|
837
696
|
`Recommended Preset: theme="${a.recommendedTheme}", radius="${a.recommendedRadius}", density="${a.recommendedDensity}"`,
|
|
838
697
|
"",
|
|
839
698
|
"## 1. Subroutine System Prompt",
|
|
840
699
|
a.aiSystemPrompt,
|
|
841
|
-
|
|
700
|
+
n ? `
|
|
842
701
|
${a.aiVoiceAddendum}` : "",
|
|
843
702
|
"",
|
|
844
703
|
"## 2. Mandatory Engineering Ruleset",
|
|
845
|
-
...a.ruleset.map((s,
|
|
704
|
+
...a.ruleset.map((s, u) => `${u + 1}. ${s}`),
|
|
846
705
|
"",
|
|
847
706
|
"## 3. Automated Screen Architecture & Component Context (capri.docu())",
|
|
848
|
-
`- Route: ${
|
|
849
|
-
`- Component Counts: ${
|
|
850
|
-
`- Landmarks: ${
|
|
851
|
-
`- Key User Flows: ${
|
|
707
|
+
`- Route: ${o.routePath} | Theme: ${r.activeTheme} (${r.activePolarity}) | Viewport: ${r.viewport}`,
|
|
708
|
+
`- Component Counts: ${o.inventory.buttons} buttons, ${o.inventory.inputsAndSelects} inputs/selects, ${o.inventory.tables} tables, ${o.inventory.cardsAndSurfaces} glass cards`,
|
|
709
|
+
`- Landmarks: ${o.landmarks.map((s) => `#${s.id} (${s.interactiveCount} actions)`).join(", ")}`,
|
|
710
|
+
`- Key User Flows: ${o.userFlows.slice(0, 6).map((s) => `[${s.category}] ${s.triggerLabel}`).join(" | ")}`,
|
|
852
711
|
"",
|
|
853
712
|
"## 4. Live CapriEngine Security, DOM & WCAG Telemetry",
|
|
854
713
|
`- Audit Score: ${r.score}/100 (${r.passed ? "PASSED" : "ACTION REQUIRED"}) | Prompt-Injection Firewall: ${r.promptInjectionSafe ? "CLEAN (0 threats)" : `${r.promptThreatsCount} THREAT(S) BLOCKED`}`,
|
|
855
714
|
`- Findings:
|
|
856
|
-
${
|
|
857
|
-
|
|
715
|
+
${d}`,
|
|
716
|
+
l ? `
|
|
858
717
|
## 5. Requested Task
|
|
859
|
-
${
|
|
718
|
+
${l}` : ""
|
|
860
719
|
].filter(Boolean).join(`
|
|
861
720
|
`);
|
|
862
721
|
}
|
|
@@ -866,11 +725,72 @@ ${d}` : ""
|
|
|
866
725
|
};
|
|
867
726
|
}
|
|
868
727
|
notify(e) {
|
|
869
|
-
for (const
|
|
870
|
-
|
|
728
|
+
for (const t of this.listeners)
|
|
729
|
+
t(this.activeSubroutine, e);
|
|
871
730
|
}
|
|
872
731
|
}
|
|
873
|
-
const
|
|
732
|
+
const se = new X(), P = {
|
|
733
|
+
xs: 12,
|
|
734
|
+
sm: 14,
|
|
735
|
+
md: 16,
|
|
736
|
+
lg: 20,
|
|
737
|
+
xl: 24
|
|
738
|
+
}, N = {
|
|
739
|
+
inherit: "currentColor",
|
|
740
|
+
primary: "var(--zen-ink-primary)",
|
|
741
|
+
secondary: "var(--zen-ink-secondary)",
|
|
742
|
+
muted: "var(--zen-ink-muted)",
|
|
743
|
+
accent: "var(--zen-accent-primary)",
|
|
744
|
+
success: "var(--zen-status-success)",
|
|
745
|
+
warning: "var(--zen-status-warning)",
|
|
746
|
+
danger: "var(--zen-status-danger)"
|
|
747
|
+
}, U = {
|
|
748
|
+
search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
|
|
749
|
+
plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
|
|
750
|
+
minus: '<path d="M5 12h14"/>',
|
|
751
|
+
close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
|
|
752
|
+
check: '<path d="M20 6 9 17l-5-5"/>',
|
|
753
|
+
copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
|
|
754
|
+
"chevron-down": '<path d="m6 9 6 6 6-6"/>',
|
|
755
|
+
"chevron-right": '<path d="m9 18 6-6-6-6"/>',
|
|
756
|
+
"chevron-left": '<path d="m15 18-6-6 6-6"/>',
|
|
757
|
+
"external-link": '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
|
|
758
|
+
bolt: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
|
|
759
|
+
sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/>',
|
|
760
|
+
terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
|
|
761
|
+
cpu: '<rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/>',
|
|
762
|
+
database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
|
|
763
|
+
layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
|
|
764
|
+
shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
|
|
765
|
+
sliders: '<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/>',
|
|
766
|
+
command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
|
|
767
|
+
code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
|
|
768
|
+
activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
|
|
769
|
+
info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
|
|
770
|
+
success: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
|
|
771
|
+
warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
|
|
772
|
+
danger: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
|
|
773
|
+
"trend-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
|
|
774
|
+
"trend-down": '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
|
|
775
|
+
radio: '<path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/>',
|
|
776
|
+
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
|
|
777
|
+
moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
|
778
|
+
eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
|
|
779
|
+
upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
|
|
780
|
+
trash: '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
|
|
781
|
+
refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
|
|
782
|
+
menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
|
|
783
|
+
"panel-right": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
|
|
784
|
+
user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
|
785
|
+
lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
|
786
|
+
globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
|
|
787
|
+
folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>'
|
|
788
|
+
};
|
|
789
|
+
function Q(c) {
|
|
790
|
+
const e = c.size ?? "md", t = Object.prototype.hasOwnProperty.call(P, e) ? P[e] : P.md, n = c.tone ?? "inherit", a = Object.prototype.hasOwnProperty.call(N, n) ? N[n] : N.inherit, o = typeof c.strokeWidth == "number" && Number.isFinite(c.strokeWidth) ? Math.min(Math.max(c.strokeWidth, 0.5), 4) : 2, r = Object.prototype.hasOwnProperty.call(U, c.name) ? U[c.name] : U.sparkles, l = c.spin ? "animation: spin 1s linear infinite;" : "";
|
|
791
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="${a}" stroke-width="${o}" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block;vertical-align:middle;flex-shrink:0;${l}">${r}</svg>`;
|
|
792
|
+
}
|
|
793
|
+
const R = [
|
|
874
794
|
{
|
|
875
795
|
id: "blackwall-crimson",
|
|
876
796
|
name: "Capri // Capricorn",
|
|
@@ -951,7 +871,7 @@ const we = new ie(), P = [
|
|
|
951
871
|
secondaryHex: "#0284C7",
|
|
952
872
|
inkHex: "#09090D"
|
|
953
873
|
}
|
|
954
|
-
],
|
|
874
|
+
], D = [
|
|
955
875
|
{
|
|
956
876
|
id: "orion",
|
|
957
877
|
label: "CAPRI // UNLEASHED",
|
|
@@ -1005,27 +925,27 @@ const we = new ie(), P = [
|
|
|
1005
925
|
]
|
|
1006
926
|
}
|
|
1007
927
|
];
|
|
1008
|
-
function j(
|
|
1009
|
-
const e =
|
|
928
|
+
function j(c) {
|
|
929
|
+
const e = R.find((t) => t.id === c);
|
|
1010
930
|
return e ? e.polarity : "dark";
|
|
1011
931
|
}
|
|
1012
|
-
class
|
|
932
|
+
class J {
|
|
1013
933
|
constructor(e) {
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
934
|
+
h(this, "state");
|
|
935
|
+
h(this, "listeners", /* @__PURE__ */ new Set());
|
|
936
|
+
h(this, "storageKey");
|
|
1017
937
|
this.storageKey = (e == null ? void 0 : e.storageKey) ?? "zen-ui-theme-v2";
|
|
1018
|
-
let
|
|
938
|
+
let t = (e == null ? void 0 : e.defaultTheme) ?? "blackwall-crimson";
|
|
1019
939
|
if (typeof window < "u")
|
|
1020
940
|
try {
|
|
1021
|
-
const
|
|
1022
|
-
|
|
941
|
+
const n = window.localStorage.getItem(this.storageKey);
|
|
942
|
+
n && R.some((a) => a.id === n) && (t = n);
|
|
1023
943
|
} catch {
|
|
1024
|
-
|
|
944
|
+
t = (e == null ? void 0 : e.defaultTheme) ?? "blackwall-crimson";
|
|
1025
945
|
}
|
|
1026
946
|
this.state = {
|
|
1027
|
-
theme:
|
|
1028
|
-
polarity: j(
|
|
947
|
+
theme: t,
|
|
948
|
+
polarity: j(t),
|
|
1029
949
|
density: (e == null ? void 0 : e.defaultDensity) ?? "comfortable",
|
|
1030
950
|
radius: (e == null ? void 0 : e.defaultRadius) ?? "architectural"
|
|
1031
951
|
}, this.applyToDom();
|
|
@@ -1070,18 +990,18 @@ class oe {
|
|
|
1070
990
|
if (typeof document > "u") return;
|
|
1071
991
|
const e = document.documentElement;
|
|
1072
992
|
e.setAttribute("data-theme", this.state.theme), e.setAttribute("data-polarity", this.state.polarity), e.setAttribute("data-density", this.state.density), e.setAttribute("data-radius", this.state.radius);
|
|
1073
|
-
const
|
|
1074
|
-
|
|
993
|
+
const t = R.find((n) => n.id === this.state.theme) ?? R[0];
|
|
994
|
+
W(t);
|
|
1075
995
|
}
|
|
1076
996
|
notify() {
|
|
1077
997
|
for (const e of this.listeners)
|
|
1078
998
|
e(this.state);
|
|
1079
999
|
}
|
|
1080
1000
|
}
|
|
1081
|
-
class
|
|
1001
|
+
class ee {
|
|
1082
1002
|
constructor() {
|
|
1083
|
-
|
|
1084
|
-
|
|
1003
|
+
h(this, "ctx", null);
|
|
1004
|
+
h(this, "muted", !1);
|
|
1085
1005
|
}
|
|
1086
1006
|
isMuted() {
|
|
1087
1007
|
return this.muted;
|
|
@@ -1093,26 +1013,26 @@ class se {
|
|
|
1093
1013
|
if (!(this.muted || typeof window > "u"))
|
|
1094
1014
|
try {
|
|
1095
1015
|
this.ctx || (this.ctx = new window.AudioContext()), this.ctx.state === "suspended" && this.ctx.resume();
|
|
1096
|
-
const
|
|
1097
|
-
|
|
1016
|
+
const t = this.ctx.currentTime, n = this.ctx.createOscillator(), a = this.ctx.createGain();
|
|
1017
|
+
n.type = "triangle", n.frequency.setValueAtTime(e, t), n.frequency.exponentialRampToValueAtTime(e * 0.45, t + 0.035), a.gain.setValueAtTime(0.06, t), a.gain.exponentialRampToValueAtTime(1e-4, t + 0.035), n.connect(a), a.connect(this.ctx.destination), n.start(t), n.stop(t + 0.04);
|
|
1098
1018
|
} catch {
|
|
1099
1019
|
}
|
|
1100
1020
|
}
|
|
1101
1021
|
}
|
|
1102
|
-
const
|
|
1103
|
-
class
|
|
1022
|
+
const H = new J(), Z = new ee();
|
|
1023
|
+
class te extends HTMLElement {
|
|
1104
1024
|
constructor() {
|
|
1105
1025
|
super(...arguments);
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
const
|
|
1115
|
-
this.pointer = { x:
|
|
1026
|
+
h(this, "framing", "portrait");
|
|
1027
|
+
h(this, "activeMode", "orion");
|
|
1028
|
+
h(this, "rafId", 0);
|
|
1029
|
+
h(this, "pointer", { x: 0, y: 0 });
|
|
1030
|
+
h(this, "smoothPointer", { x: 0, y: 0 });
|
|
1031
|
+
h(this, "canvasEl", null);
|
|
1032
|
+
h(this, "figureEl", null);
|
|
1033
|
+
h(this, "handlePointerMove", (t) => {
|
|
1034
|
+
const n = t.clientX / Math.max(1, window.innerWidth) * 2 - 1, a = t.clientY / Math.max(1, window.innerHeight) * 2 - 1;
|
|
1035
|
+
this.pointer = { x: n, y: a };
|
|
1116
1036
|
});
|
|
1117
1037
|
}
|
|
1118
1038
|
static get observedAttributes() {
|
|
@@ -1126,57 +1046,57 @@ class ce extends HTMLElement {
|
|
|
1126
1046
|
}
|
|
1127
1047
|
attributeChangedCallback() {
|
|
1128
1048
|
if (!this.isConnected) return;
|
|
1129
|
-
const
|
|
1130
|
-
(
|
|
1049
|
+
const t = this.getAttribute("framing") ?? "portrait", n = this.getAttribute("mode") ?? "orion";
|
|
1050
|
+
(t !== this.framing || n !== this.activeMode) && (this.framing = t, this.activeMode = n, this.render(), this.startEyeLoop());
|
|
1131
1051
|
}
|
|
1132
1052
|
startEyeLoop() {
|
|
1133
1053
|
this.rafId && window.cancelAnimationFrame(this.rafId);
|
|
1134
|
-
const
|
|
1135
|
-
const
|
|
1054
|
+
const t = performance.now(), n = (a) => {
|
|
1055
|
+
const o = (a - t) * 1e-3;
|
|
1136
1056
|
if (this.smoothPointer.x += (this.pointer.x - this.smoothPointer.x) * 0.12, this.smoothPointer.y += (this.pointer.y - this.smoothPointer.y) * 0.12, this.figureEl) {
|
|
1137
|
-
const r = Math.sin(
|
|
1138
|
-
this.figureEl.style.transform = `perspective(900px) translateY(${r.toFixed(2)}px) rotateX(${
|
|
1057
|
+
const r = Math.sin(o * 2.1) * 3.5, l = this.smoothPointer.x * 5.5, d = -this.smoothPointer.y * 3.5;
|
|
1058
|
+
this.figureEl.style.transform = `perspective(900px) translateY(${r.toFixed(2)}px) rotateX(${d.toFixed(2)}deg) rotateY(${l.toFixed(2)}deg)`;
|
|
1139
1059
|
}
|
|
1140
1060
|
if (this.canvasEl) {
|
|
1141
1061
|
const r = this.canvasEl.getContext("2d");
|
|
1142
1062
|
if (r) {
|
|
1143
|
-
const
|
|
1144
|
-
r.clearRect(0, 0,
|
|
1145
|
-
const s = Math.sin(
|
|
1063
|
+
const l = this.canvasEl.width, d = this.canvasEl.height;
|
|
1064
|
+
r.clearRect(0, 0, l, d);
|
|
1065
|
+
const s = Math.sin(o * 1.1 - 1.2) > 0.992 || Math.sin(o * 2.9 - 1.5) > 0.995, u = this.smoothPointer.x * (l * 85e-4), f = this.smoothPointer.y * (d * 55e-4), b = l * 0.562 + u, y = d * 0.233 + f, A = l * 0.474 + u * 0.75, S = d * 0.25 + f * 0.75;
|
|
1146
1066
|
if (s)
|
|
1147
|
-
r.save(), r.strokeStyle = "#00FF66", r.lineWidth = 2.5, r.beginPath(), r.moveTo(b -
|
|
1067
|
+
r.save(), r.strokeStyle = "#00FF66", r.lineWidth = 2.5, r.beginPath(), r.moveTo(b - l * 0.014, y), r.lineTo(b + l * 0.014, y), r.stroke(), r.restore();
|
|
1148
1068
|
else {
|
|
1149
1069
|
r.save(), r.globalCompositeOperation = "screen";
|
|
1150
|
-
const
|
|
1070
|
+
const v = r.createRadialGradient(
|
|
1151
1071
|
b,
|
|
1152
|
-
|
|
1072
|
+
y,
|
|
1153
1073
|
1,
|
|
1154
1074
|
b,
|
|
1155
|
-
|
|
1156
|
-
|
|
1075
|
+
y,
|
|
1076
|
+
l * 0.017
|
|
1157
1077
|
);
|
|
1158
|
-
|
|
1078
|
+
v.addColorStop(0, "#FFFFFF"), v.addColorStop(0.38, "#19A0FF"), v.addColorStop(0.75, "rgba(25, 160, 255, 0.55)"), v.addColorStop(1, "rgba(25, 160, 255, 0)"), r.fillStyle = v, r.beginPath(), r.arc(b, y, l * 0.017, 0, Math.PI * 2), r.fill(), r.fillStyle = "#19A0FF", r.beginPath(), r.arc(b, y, l * 85e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#FFFFFF", r.beginPath(), r.arc(b, y, l * 42e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#19A0FF", r.beginPath(), r.arc(A, S, l * 58e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#FFFFFF", r.beginPath(), r.arc(A, S, l * 28e-4, 0, Math.PI * 2), r.fill(), r.restore();
|
|
1159
1079
|
}
|
|
1160
1080
|
}
|
|
1161
1081
|
}
|
|
1162
|
-
this.rafId = window.requestAnimationFrame(
|
|
1082
|
+
this.rafId = window.requestAnimationFrame(n);
|
|
1163
1083
|
};
|
|
1164
|
-
this.rafId = window.requestAnimationFrame(
|
|
1084
|
+
this.rafId = window.requestAnimationFrame(n);
|
|
1165
1085
|
}
|
|
1166
1086
|
render() {
|
|
1167
|
-
const
|
|
1087
|
+
const t = B(
|
|
1168
1088
|
this.getAttribute("title") ?? "CAPRI // CONSTRUCT"
|
|
1169
|
-
),
|
|
1089
|
+
), n = B(
|
|
1170
1090
|
this.getAttribute("subtitle") ?? "Edgerunners S2 // Soulkiller Net-Driver"
|
|
1171
|
-
), a =
|
|
1091
|
+
), a = ie(
|
|
1172
1092
|
this.getAttribute("image-src") ?? "/capri-construct-base.png"
|
|
1173
|
-
),
|
|
1093
|
+
), o = D.find((d) => d.id === this.activeMode) ?? D[0];
|
|
1174
1094
|
this.innerHTML = `
|
|
1175
1095
|
<div class="zen-surface-selected" style="padding: 1.25rem; position: relative; overflow: hidden;">
|
|
1176
1096
|
<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem;">
|
|
1177
1097
|
<div>
|
|
1178
|
-
<div class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${
|
|
1179
|
-
<div class="zen-font-display" style="font-size: 1.125rem; font-weight: 700; color: var(--zen-ink-primary);">${
|
|
1098
|
+
<div class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${n}</div>
|
|
1099
|
+
<div class="zen-font-display" style="font-size: 1.125rem; font-weight: 700; color: var(--zen-ink-primary);">${t}</div>
|
|
1180
1100
|
</div>
|
|
1181
1101
|
<div style="display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 0.75rem; background: var(--zen-surface-2); border: 1px solid var(--zen-border-default);">
|
|
1182
1102
|
<button type="button" data-framing="portrait" class="zen-btn-base zen-btn-sm ${this.framing === "portrait" ? "zen-btn-primary" : "zen-btn-ghost"}">Portrait</button>
|
|
@@ -1191,36 +1111,36 @@ class ce extends HTMLElement {
|
|
|
1191
1111
|
</div>
|
|
1192
1112
|
<div style="margin-top: 1rem; padding: 0.875rem; border-radius: 0.875rem; background: var(--zen-surface-2); border: 1px solid var(--zen-border-default);">
|
|
1193
1113
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem;">
|
|
1194
|
-
<span class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${
|
|
1195
|
-
<span class="zen-badge zen-badge-accent">${
|
|
1114
|
+
<span class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${o.frequency}</span>
|
|
1115
|
+
<span class="zen-badge zen-badge-accent">${o.status}</span>
|
|
1196
1116
|
</div>
|
|
1197
|
-
<div class="zen-font-display" style="font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem;">${
|
|
1198
|
-
<p style="font-size: 0.75rem; color: var(--zen-ink-secondary); margin: 0;">${
|
|
1117
|
+
<div class="zen-font-display" style="font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem;">${o.label}</div>
|
|
1118
|
+
<p style="font-size: 0.75rem; color: var(--zen-ink-secondary); margin: 0;">${o.transmission}</p>
|
|
1199
1119
|
</div>
|
|
1200
1120
|
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem;">
|
|
1201
|
-
${
|
|
1202
|
-
(
|
|
1203
|
-
<button type="button" data-directive="${
|
|
1204
|
-
${
|
|
1121
|
+
${D.map(
|
|
1122
|
+
(d) => `
|
|
1123
|
+
<button type="button" data-directive="${d.id}" class="zen-btn-base zen-btn-sm ${d.id === this.activeMode ? "zen-btn-primary" : "zen-btn-secondary"}" style="justify-content: flex-start; font-family: var(--zen-font-mono); font-size: 0.6875rem;">
|
|
1124
|
+
${d.label}
|
|
1205
1125
|
</button>
|
|
1206
1126
|
`
|
|
1207
1127
|
).join("")}
|
|
1208
1128
|
</div>
|
|
1209
1129
|
</div>
|
|
1210
|
-
`, this.canvasEl = this.querySelector("[data-capri-eyes]"), this.figureEl = this.querySelector("[data-capri-figure]"), this.querySelectorAll("[data-framing]").forEach((
|
|
1211
|
-
|
|
1212
|
-
const s =
|
|
1213
|
-
(s === "portrait" || s === "full") && (
|
|
1130
|
+
`, this.canvasEl = this.querySelector("[data-capri-eyes]"), this.figureEl = this.querySelector("[data-capri-figure]"), this.querySelectorAll("[data-framing]").forEach((d) => {
|
|
1131
|
+
d.addEventListener("click", () => {
|
|
1132
|
+
const s = d.getAttribute("framing") ?? d.dataset.framing;
|
|
1133
|
+
(s === "portrait" || s === "full") && (Z.playMicroClick(560), this.framing = s, this.setAttribute("framing", s), this.render(), this.startEyeLoop());
|
|
1214
1134
|
});
|
|
1215
|
-
}), this.querySelectorAll("[data-directive]").forEach((
|
|
1216
|
-
|
|
1217
|
-
const s =
|
|
1135
|
+
}), this.querySelectorAll("[data-directive]").forEach((d) => {
|
|
1136
|
+
d.addEventListener("click", () => {
|
|
1137
|
+
const s = d.dataset.directive;
|
|
1218
1138
|
if (!s) return;
|
|
1219
|
-
|
|
1220
|
-
const
|
|
1221
|
-
|
|
1139
|
+
Z.playMicroClick(620), this.activeMode = s, this.setAttribute("mode", s);
|
|
1140
|
+
const u = D.find((f) => f.id === s);
|
|
1141
|
+
u && this.dispatchEvent(
|
|
1222
1142
|
new CustomEvent("zen-directive", {
|
|
1223
|
-
detail: { directive:
|
|
1143
|
+
detail: { directive: u },
|
|
1224
1144
|
bubbles: !0,
|
|
1225
1145
|
composed: !0
|
|
1226
1146
|
})
|
|
@@ -1229,7 +1149,7 @@ class ce extends HTMLElement {
|
|
|
1229
1149
|
});
|
|
1230
1150
|
}
|
|
1231
1151
|
}
|
|
1232
|
-
class
|
|
1152
|
+
class ne extends HTMLElement {
|
|
1233
1153
|
static get observedAttributes() {
|
|
1234
1154
|
return ["variant"];
|
|
1235
1155
|
}
|
|
@@ -1240,19 +1160,19 @@ class le extends HTMLElement {
|
|
|
1240
1160
|
this.isConnected && this.render();
|
|
1241
1161
|
}
|
|
1242
1162
|
render() {
|
|
1243
|
-
const e = this.getAttribute("variant") ?? "blackwall-lattice",
|
|
1163
|
+
const e = this.getAttribute("variant") ?? "blackwall-lattice", t = e === "swiss-blueprint" ? "background-image: linear-gradient(to right, var(--zen-border-subtle) 1px, transparent 1px), linear-gradient(to bottom, var(--zen-border-subtle) 1px, transparent 1px); background-size: 48px 48px;" : e === "blackwall-lattice" ? "background-image: radial-gradient(circle at 50% 18%, rgba(var(--zen-accent-rgb), 0.16), transparent 62%), radial-gradient(circle at 85% 75%, rgba(var(--zen-secondary-rgb), 0.11), transparent 55%);" : e === "aurora-mesh" ? "background-image: radial-gradient(ellipse at 20% 20%, rgba(var(--zen-accent-rgb), 0.20), transparent 55%), radial-gradient(ellipse at 80% 60%, rgba(var(--zen-secondary-rgb), 0.15), transparent 60%);" : "";
|
|
1244
1164
|
this.innerHTML = `
|
|
1245
|
-
<div aria-hidden="true" style="position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; ${
|
|
1165
|
+
<div aria-hidden="true" style="position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; ${t}"></div>
|
|
1246
1166
|
`;
|
|
1247
1167
|
}
|
|
1248
1168
|
}
|
|
1249
|
-
class
|
|
1169
|
+
class re extends HTMLElement {
|
|
1250
1170
|
constructor() {
|
|
1251
1171
|
super(...arguments);
|
|
1252
|
-
|
|
1172
|
+
h(this, "unsubscribe", null);
|
|
1253
1173
|
}
|
|
1254
1174
|
connectedCallback() {
|
|
1255
|
-
this.unsubscribe =
|
|
1175
|
+
this.unsubscribe = H.subscribe(() => {
|
|
1256
1176
|
this.render();
|
|
1257
1177
|
});
|
|
1258
1178
|
}
|
|
@@ -1260,28 +1180,28 @@ class de extends HTMLElement {
|
|
|
1260
1180
|
this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null);
|
|
1261
1181
|
}
|
|
1262
1182
|
render() {
|
|
1263
|
-
const { theme:
|
|
1183
|
+
const { theme: t } = H.getState();
|
|
1264
1184
|
this.innerHTML = `
|
|
1265
1185
|
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
|
|
1266
|
-
${
|
|
1267
|
-
(
|
|
1186
|
+
${R.map(
|
|
1187
|
+
(n) => `
|
|
1268
1188
|
<button
|
|
1269
1189
|
type="button"
|
|
1270
|
-
data-theme-id="${
|
|
1271
|
-
class="zen-btn-base zen-btn-sm ${
|
|
1190
|
+
data-theme-id="${n.id}"
|
|
1191
|
+
class="zen-btn-base zen-btn-sm ${n.id === t ? "zen-btn-primary" : "zen-btn-secondary"}"
|
|
1272
1192
|
>
|
|
1273
|
-
<span style="width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: ${
|
|
1274
|
-
<span>${
|
|
1193
|
+
<span style="width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: ${n.accentHex}; display: inline-block;"></span>
|
|
1194
|
+
<span>${n.name}</span>
|
|
1275
1195
|
</button>
|
|
1276
1196
|
`
|
|
1277
1197
|
).join("")}
|
|
1278
1198
|
</div>
|
|
1279
|
-
`, this.querySelectorAll("[data-theme-id]").forEach((
|
|
1280
|
-
|
|
1281
|
-
const a =
|
|
1282
|
-
a && (
|
|
1199
|
+
`, this.querySelectorAll("[data-theme-id]").forEach((n) => {
|
|
1200
|
+
n.addEventListener("click", () => {
|
|
1201
|
+
const a = n.dataset.themeId;
|
|
1202
|
+
a && (Z.playMicroClick(540), H.setTheme(a), this.dispatchEvent(
|
|
1283
1203
|
new CustomEvent("zen-theme-change", {
|
|
1284
|
-
detail:
|
|
1204
|
+
detail: H.getState(),
|
|
1285
1205
|
bubbles: !0,
|
|
1286
1206
|
composed: !0
|
|
1287
1207
|
})
|
|
@@ -1290,7 +1210,7 @@ class de extends HTMLElement {
|
|
|
1290
1210
|
});
|
|
1291
1211
|
}
|
|
1292
1212
|
}
|
|
1293
|
-
class
|
|
1213
|
+
class ae extends HTMLElement {
|
|
1294
1214
|
static get observedAttributes() {
|
|
1295
1215
|
return ["name", "size", "tone", "stroke-width", "spin"];
|
|
1296
1216
|
}
|
|
@@ -1301,52 +1221,45 @@ class ue extends HTMLElement {
|
|
|
1301
1221
|
this.isConnected && this.render();
|
|
1302
1222
|
}
|
|
1303
1223
|
render() {
|
|
1304
|
-
const e = this.getAttribute("name") ?? "sparkles",
|
|
1305
|
-
this.innerHTML =
|
|
1224
|
+
const e = this.getAttribute("name") ?? "sparkles", t = this.getAttribute("size") ?? "md", n = this.getAttribute("tone") ?? "inherit", a = Number(this.getAttribute("stroke-width") ?? 2), o = this.getAttribute("spin") === "true";
|
|
1225
|
+
this.innerHTML = Q({
|
|
1306
1226
|
name: e,
|
|
1307
|
-
size:
|
|
1308
|
-
tone:
|
|
1227
|
+
size: t,
|
|
1228
|
+
tone: n,
|
|
1309
1229
|
strokeWidth: a,
|
|
1310
|
-
spin:
|
|
1230
|
+
spin: o
|
|
1311
1231
|
});
|
|
1312
1232
|
}
|
|
1313
1233
|
}
|
|
1314
|
-
function B(
|
|
1315
|
-
return
|
|
1234
|
+
function B(c) {
|
|
1235
|
+
return c.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
1316
1236
|
}
|
|
1317
|
-
function
|
|
1318
|
-
const e =
|
|
1319
|
-
return /^(?:javascript|data|vbscript)
|
|
1237
|
+
function ie(c) {
|
|
1238
|
+
const e = c.trim(), t = e.replace(/[\u0000-\u0020]+/g, "");
|
|
1239
|
+
return /^(?:javascript|data|vbscript|file):/i.test(t) ? "/capri-construct-base.png" : B(e);
|
|
1320
1240
|
}
|
|
1321
|
-
function
|
|
1322
|
-
typeof window > "u" || !("customElements" in window) || (window.customElements.get("zen-icon") || window.customElements.define("zen-icon",
|
|
1241
|
+
function ce() {
|
|
1242
|
+
typeof window > "u" || !("customElements" in window) || (window.customElements.get("zen-icon") || window.customElements.define("zen-icon", ae), window.customElements.get("zen-ai-construct") || window.customElements.define("zen-ai-construct", te), window.customElements.get("zen-ambient-background") || window.customElements.define(
|
|
1323
1243
|
"zen-ambient-background",
|
|
1324
|
-
|
|
1325
|
-
), window.customElements.get("zen-theme-switcher") || window.customElements.define("zen-theme-switcher",
|
|
1244
|
+
ne
|
|
1245
|
+
), window.customElements.get("zen-theme-switcher") || window.customElements.define("zen-theme-switcher", re));
|
|
1326
1246
|
}
|
|
1327
1247
|
export {
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
re as p,
|
|
1346
|
-
K as q,
|
|
1347
|
-
Ae as r,
|
|
1348
|
-
me as s,
|
|
1349
|
-
L as t,
|
|
1350
|
-
be as u,
|
|
1351
|
-
U as z
|
|
1248
|
+
w as C,
|
|
1249
|
+
_ as Z,
|
|
1250
|
+
X as a,
|
|
1251
|
+
R as b,
|
|
1252
|
+
se as c,
|
|
1253
|
+
te as d,
|
|
1254
|
+
ne as e,
|
|
1255
|
+
ae as f,
|
|
1256
|
+
J as g,
|
|
1257
|
+
re as h,
|
|
1258
|
+
ee as i,
|
|
1259
|
+
B as j,
|
|
1260
|
+
ie as k,
|
|
1261
|
+
H as l,
|
|
1262
|
+
ce as r,
|
|
1263
|
+
W as s,
|
|
1264
|
+
Z as z
|
|
1352
1265
|
};
|