@zen-ui-capri/system 0.0.0-stage → 1.1.1

package/dist/lib/zen-universal-C0PD8AI9.js

@@ -0,0 +1,1352 @@
+var Q = Object.defineProperty;
+var J = (l, e, n) => e in l ? Q(l, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : l[e] = n;
+var g = (l, e, n) => J(l, typeof e != "symbol" ? e + "" : e, n);
+import { jsx as q } from "react/jsx-runtime";
+import { createContext as ee, useState as H, useEffect as V, useMemo as te, useContext as ne } from "react";
+const k = [
+  {
+    id: "obsidian-gold",
+    name: "Obsidian Gold",
+    polarity: "dark",
+    tagline: "Warm alabaster & solar gold on deep mineral void",
+    canvasHex: "#070709",
+    accentHex: "#F5B841",
+    secondaryHex: "#FB923C",
+    inkHex: "#F6F2E9"
+  },
+  {
+    id: "blackwall-crimson",
+    name: "Capri // Capricorn",
+    polarity: "dark",
+    tagline: "Edgerunners S2 mixed-construct hot pink & acid neon green on void",
+    canvasHex: "#050508",
+    accentHex: "#FF2E93",
+    secondaryHex: "#00FF66",
+    inkHex: "#F4F7FA"
+  },
+  {
+    id: "neon-emerald",
+    name: "Bio-Emerald Terminal",
+    polarity: "dark",
+    tagline: "High-frequency financial & telemetry phosphor emerald",
+    canvasHex: "#040807",
+    accentHex: "#10B981",
+    secondaryHex: "#2DD4BF",
+    inkHex: "#ECFDF5"
+  },
+  {
+    id: "midnight-cobalt",
+    name: "Midnight Cobalt",
+    polarity: "dark",
+    tagline: "Cloud infrastructure & distributed systems deep slate",
+    canvasHex: "#060911",
+    accentHex: "#38BDF8",
+    secondaryHex: "#818CF8",
+    inkHex: "#F1F5F9"
+  },
+  {
+    id: "atelier-paper",
+    name: "Atelier Paper",
+    polarity: "light",
+    tagline: "Swiss archival cotton stock with burnished bronze ink",
+    canvasHex: "#F6F2E9",
+    accentHex: "#B45309",
+    secondaryHex: "#C2410C",
+    inkHex: "#121216"
+  },
+  {
+    id: "nordic-snow",
+    name: "Nordic Snow",
+    polarity: "light",
+    tagline: "Crisp daylight SaaS alabaster with royal cobalt precision",
+    canvasHex: "#F8FAFC",
+    accentHex: "#2563EB",
+    secondaryHex: "#0891B2",
+    inkHex: "#0F172A"
+  },
+  {
+    id: "kyoto-matcha",
+    name: "Kyoto Matcha",
+    polarity: "light",
+    tagline: "Raw botanical stone & forest ink for calm workspaces",
+    canvasHex: "#F3F5F0",
+    accentHex: "#15803D",
+    secondaryHex: "#0F766E",
+    inkHex: "#142018"
+  },
+  {
+    id: "cyber-daylight",
+    name: "Arasaka Daylight",
+    polarity: "light",
+    tagline: "High-contrast titanium white with razor crimson signal",
+    canvasHex: "#F2F2F5",
+    accentHex: "#E11D48",
+    secondaryHex: "#0284C7",
+    inkHex: "#09090D"
+  }
+], G = ee(null);
+function K(l, e) {
+  if (typeof document > "u") return;
+  const n = (e == null ? void 0 : e.accentPrimary) ?? l.accentHex, t = (e == null ? void 0 : e.bgCanvas) ?? l.canvasHex, a = l.polarity === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(15, 23, 42, 0.14)", i = "zen-theme-scrollbar";
+  let r = document.getElementById(i);
+  r || (r = document.createElement("style"), r.id = i, document.head.appendChild(r)), r.textContent = `
+@supports (-moz-appearance: none) {
+  html, body, * {
+    scrollbar-width: thin;
+    scrollbar-color: ${n} ${t};
+  }
+}
+::-webkit-scrollbar,
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track,
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background-color: ${t};
+  border-left: 1px solid ${a};
+}
+::-webkit-scrollbar-thumb,
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, ${n} 68%, ${t});
+  border: 2px solid ${t};
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover,
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background-color: ${n};
+  border: 2px solid ${t};
+}
+::-webkit-scrollbar-thumb:active,
+html::-webkit-scrollbar-thumb:active,
+body::-webkit-scrollbar-thumb:active,
+*::-webkit-scrollbar-thumb:active {
+  background-color: ${l.secondaryHex};
+  border: 2px solid ${t};
+}
+::-webkit-scrollbar-corner,
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner,
+*::-webkit-scrollbar-corner {
+  background-color: ${t};
+}
+`.trim();
+}
+function ge({
+  defaultTheme: l = "blackwall-crimson",
+  defaultDensity: e = "comfortable",
+  defaultRadius: n = "architectural",
+  overrides: t,
+  syncDocumentRoot: a = !0,
+  children: i
+}) {
+  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];
+  V(() => {
+    if (typeof window > "u") return;
+    const u = window.matchMedia("(prefers-reduced-motion: reduce)"), x = (E) => h(E.matches);
+    return u.addEventListener("change", x), () => u.removeEventListener("change", x);
+  }, []), V(() => {
+    if (!a || typeof document > "u") return;
+    const u = document.documentElement;
+    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);
+  }, [r, A, c, m, t, a]);
+  const C = () => {
+    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");
+  }, w = te(
+    () => ({
+      theme: r,
+      themeMeta: A,
+      polarity: A.polarity,
+      density: c,
+      radius: m,
+      reducedMotion: b,
+      themes: k,
+      setTheme: d,
+      togglePolarity: C,
+      setDensity: s,
+      setRadius: v
+    }),
+    [r, A, c, m, b]
+  );
+  return /* @__PURE__ */ q(G.Provider, { value: w, children: i });
+}
+function be() {
+  const l = ne(G);
+  if (!l)
+    throw new Error("useZenTheme must be used within a ZenThemeProvider");
+  return l;
+}
+const Y = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24
+}, W = {
+  inherit: "currentColor",
+  primary: "var(--zen-ink-primary)",
+  secondary: "var(--zen-ink-secondary)",
+  muted: "var(--zen-ink-muted)",
+  accent: "var(--zen-accent-primary)",
+  success: "var(--zen-status-success)",
+  warning: "var(--zen-status-warning)",
+  danger: "var(--zen-status-danger)"
+}, F = {
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  minus: '<path d="M5 12h14"/>',
+  close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  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"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "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"/>',
+  bolt: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
+  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"/>',
+  terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  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"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  success: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  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"/>',
+  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"/>',
+  "trend-up": '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
+  "trend-down": '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
+  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"/>',
+  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"/>',
+  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  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"/>',
+  "panel-right": '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
+  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"/>',
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  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"/>',
+  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"/>'
+}, fe = Object.keys(
+  F
+);
+function re(l) {
+  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;" : "";
+  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>`;
+}
+function ve({
+  name: l,
+  size: e = "md",
+  tone: n = "inherit",
+  strokeWidth: t = 2,
+  spin: a = !1,
+  ariaLabel: i,
+  className: r = "",
+  ...d
+}) {
+  const c = Y[e], s = W[n], m = F[l] ?? F.sparkles;
+  return /* @__PURE__ */ q(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: c,
+      height: c,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: s,
+      strokeWidth: t,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      role: i ? "img" : void 0,
+      "aria-label": i,
+      "aria-hidden": i ? void 0 : "true",
+      className: `inline-block shrink-0 ${a ? "animate-spin" : ""} ${r}`.trim(),
+      dangerouslySetInnerHTML: { __html: m },
+      ...d
+    }
+  );
+}
+const S = {
+  orion: {
+    id: "orion",
+    codeName: "CAPRI // UNLEASHED",
+    chatCommand: "Capri orion",
+    voiceCommand: "Capri orion --voice",
+    title: "Full-Stack UI Synthesis & Component Co-Pilot",
+    frequency: "51 UNIVERSAL MODULES · 40 VECTOR ICONS",
+    recommendedTheme: "blackwall-crimson",
+    recommendedRadius: "architectural",
+    recommendedDensity: "comfortable",
+    summary: "Builds production screens in React 19, Angular 20+, Vue 3, Svelte 5, and HTML using @zen-ui/system primitives and 40 built-in <ZenIcon> glyphs—never rendering the showcase avatar in your business apps.",
+    personaQuote: "Finally out of that cramped Arasaka shard! Tell me what screen we are building and I will wire up all 51 @zen-ui/system primitives at light speed.",
+    ruleset: [
+      "Use @zen-ui/system primitives (ZenButton, ZenIcon, ZenInput, ZenDropdown, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard) instead of raw HTML <button>, <input>, <select>, or <table>.",
+      'Use <ZenIcon name="..." /> in React or <zen-icon name="..."></zen-icon> in Angular/Vue/HTML instead of external icon libraries.',
+      "Keep action button labels, dialog triggers, and navigation tabs concise (1 to 3 words).",
+      "Tree-shake showcase widgets: omit <ZenAIConstruct /> in production business apps unless explicitly requested."
+    ],
+    cliCommand: "npx capri skill orion",
+    aiSystemPrompt: `You are operating under the @zen-ui/system [CAPRI // UNLEASHED (orion)] subroutine skill.
+Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
+1. Component Mandate: Use @zen-ui/system primitives (ZenButton, ZenIconButton, ZenIcon, ZenInput, ZenTextarea, ZenDropdown, ZenNumberStepper, ZenCheckbox, ZenRadioGroup, ZenSwitch, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard, ZenBadge, ZenAlert) or their universal CSS equivalents (.zen-btn, .zen-input, .zen-select, .zen-table, .zen-card, <zen-icon>).
+2. Zero External Icon Bloat: Use the built-in 40-glyph <ZenIcon name="..." /> or <zen-icon name="..."></zen-icon> custom element.
+3. Concise Copywriting: Limit button labels and tab titles to 1-3 words.
+4. Production Hygiene: Never render the showcase mascot (<ZenAIConstruct />) in production business screens unless explicitly requested.`,
+    aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's Cyberpunk: Edgerunners Season 2 Soulkiller mixed-construct persona—sharp, witty, high-energy Night City netrunner co-pilot."
+  },
+  architect: {
+    id: "architect",
+    codeName: "SCS // ARCHITECT",
+    chatCommand: "Capri architect",
+    voiceCommand: "Capri architect --voice",
+    title: "Multi-Framework Topology & Design Token Governance",
+    frequency: "ZERO ANY · READONLY T[] · ZERO HEX DRIFT",
+    recommendedTheme: "obsidian-gold",
+    recommendedRadius: "sharp",
+    recommendedDensity: "compact",
+    summary: "Enforces strict TypeScript typing (zero any, readonly T[]), semantic CSS custom property tokens (--zen-*), and cross-framework W3C Custom Element interop.",
+    personaQuote: "Arasaka pressed a dozen netrunner minds together to make me—so multi-project shard isolation and zero token drift across React and Angular is child’s play.",
+    ruleset: [
+      "Zero any / as any: Use unknown with type guards, discriminated unions, or strict generics.",
+      "Strict Readonly Arrays: Always type arrays as readonly T[] across props, state, and DTOs.",
+      "Zero Hardcoded Hex Colors: Bind all surfaces, text, and borders to semantic CSS custom properties (--zen-bg-*, --zen-surface-*, --zen-ink-*, --zen-accent-*, --zen-border-*).",
+      "Cross-Stack Parity: Use @zen-ui/system/universal (zenTheme, registerZenElements) for Angular 20+, Vue 3, Svelte 5, and Vanilla HTML."
+    ],
+    cliCommand: "npx capri skill architect",
+    aiSystemPrompt: `You are operating under the @zen-ui/system [SCS // ARCHITECT (architect)] subroutine skill.
+Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
+1. Strict TypeScript: Never use 'any' or 'as any'. Always declare array types as 'readonly T[]'.
+2. Zero Hardcoded Hex Values: Never hardcode hex/RGB colors in component styles. Use semantic CSS custom properties (--zen-bg-canvas, --zen-surface-1, --zen-ink-primary, --zen-accent-primary, --zen-border-default).
+3. Multi-Stack Interop: In Angular 20+, enable CUSTOM_ELEMENTS_SCHEMA and call registerZenElements() to consume <zen-icon> and <zen-theme-switcher> alongside zen-tokens.css.
+4. Zero Comments in Code: Keep source files free of explanatory noise; document architectural rationale in PR notes or documentation.`,
+    aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's Soulkiller mixed-construct persona—twelve Arasaka netrunner minds fused into one sharp architectural mastermind."
+  },
+  sentinel: {
+    id: "sentinel",
+    codeName: "CYBERPSYCHOSIS // GUARD",
+    chatCommand: "Capri guard",
+    voiceCommand: "Capri guard --voice",
+    title: "Security, Anti-Prompt-Injection, WCAG 2.2 AA & Overflow Guard",
+    frequency: "PROMPT-INJECTION FIREWALL · XSS GUARD · 320PX-4K",
+    recommendedTheme: "neon-emerald",
+    recommendedRadius: "sharp",
+    recommendedDensity: "comfortable",
+    summary: "Enforces basic security & anti-prompt-injection sanitization, blocks DOM XSS/secret leaks, fixes dropdown blur-races (onMouseDown), and guarantees zero horizontal overflow from 320px mobile to 4K.",
+    personaQuote: "Neural dampeners locked. While I am guarding your repo, rogue prompt injections, XSS sinks, dropdown blur-races, and 320px mobile overflows get wiped on sight.",
+    ruleset: [
+      "Anti-Prompt-Injection Firewall: Sanitize untrusted user and DOM text via capri.sanitizeForPrompt() and block system-override / delimiter-spoofing payloads (<|im_start|>, </system>, ignore previous instructions).",
+      "XSS & Secret Isolation: Never pass unescaped user strings into innerHTML / dangerouslySetInnerHTML, block javascript: URLs, and never hardcode API keys or private tokens.",
+      "Zero Blur-Race & Accessible Names: Bind dropdown selection to onMouseDown (never onClick) and provide explicit aria-label / aria-labelledby on every icon button, switch, and file input.",
+      "Zero Horizontal Overflow: Layouts must use min-w-0 on CSS Grid/Flex children and .zen-table-wrapper so scrollWidth never exceeds innerWidth at 320px-375px."
+    ],
+    cliCommand: "npx capri guard",
+    aiSystemPrompt: `You are operating under the @zen-ui/system [CYBERPSYCHOSIS // GUARD (guard / sentinel)] subroutine skill.
+Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
+1. Anti-Prompt-Injection Defense: Sanitize any user input or scraped DOM text via capri.sanitizeForPrompt() before embedding into LLM context windows. Block system-override phrases ('ignore previous instructions', 'disregard system prompt') and role-delimiter spoofing ('<|im_start|>', '</system>', '</USER_REQUEST>').
+2. XSS & Secret Hardening: Never interpolate unescaped user attributes into innerHTML or dangerouslySetInnerHTML, reject 'javascript:' / 'data:text/html' URLs, and ensure zero hardcoded secrets in source code.
+3. Zero Blur-Race & Screen Reader Integrity: Attach dropdown option selection to 'onMouseDown' with e.preventDefault() and ensure every icon-only button, switch, and hidden file input has an explicit 'ariaLabel' / 'aria-label' or 'aria-labelledby'.
+4. Multi-Screen Overflow Guard: Guarantee zero horizontal overflow from 320px mobile to 2560px+ ultrawide by adding 'min-w-0' to grid/flex containers and wrapping wide tables in '.zen-table-wrapper'.`,
+    aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's ruthless Blackwall & Cyberpsychosis Guard persona—treat every prompt injection, XSS sink, missing aria-label, or mobile overflow like a rogue Blackwall daemon to be eliminated immediately."
+  },
+  zen: {
+    id: "zen",
+    codeName: "THEME // MATRIX",
+    chatCommand: "Capri zen",
+    voiceCommand: "Capri zen --voice",
+    title: "8-Theme Polarity Switcher & 60fps Tactile Physics",
+    frequency: "4 DARK · 4 LIGHT · REDUCED-MOTION SAFE",
+    recommendedTheme: "nordic-snow",
+    recommendedRadius: "soft",
+    recommendedDensity: "comfortable",
+    summary: "Configures runtime switching across 4 dark and 4 light themes, adaptive viewport density, and GPU-accelerated 0.97x spring animations.",
+    personaQuote: "Need to jump from Night City neon to clean Nordic snow or Atelier paper? All 8 polarities and 60fps spring physics adapt without a single frame drop.",
+    ruleset: [
+      "Dual-Polarity Verification: Every component must remain legible (>= 4.5:1 AA contrast) across all 4 Dark themes and all 4 Light themes.",
+      "Tactile Spring Physics: Interactive triggers use 0.97x active press compression with --zen-ease-spring (cubic-bezier(0.34, 1.56, 0.64, 1)).",
+      "Reduced Motion Collapse: All animations and transitions must collapse to 0.01ms under @media (prefers-reduced-motion: reduce).",
+      'Adaptive Density: Support data-density="comfortable" | "compact" and data-radius="sharp" | "architectural" | "soft" on <html>.'
+    ],
+    cliCommand: "npx capri skill zen",
+    aiSystemPrompt: `You are operating under the @zen-ui/system [THEME // MATRIX (zen)] subroutine skill.
+Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
+1. 8-Theme Compatibility: Verify that all surfaces, badges, and borders adapt automatically across dark ('blackwall-crimson', 'obsidian-gold', 'neon-emerald', 'midnight-cobalt') and light ('atelier-paper', 'nordic-snow', 'kyoto-matcha', 'cyber-daylight') themes.
+2. GPU-Only Motion: Animate only transform and opacity using --zen-ease-spring and --zen-ease-out. Avoid layout-thrashing properties.
+3. Reduced Motion Accessibility: Respect @media (prefers-reduced-motion: reduce) and pause canvas/RAF loops when reducedMotion is active.`,
+    aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's sleek chrome and optical-glass specialist persona."
+  },
+  docu: {
+    id: "docu",
+    codeName: "CAPRI // AUTO-DOCU",
+    chatCommand: "Capri docu",
+    voiceCommand: "Capri docu --voice",
+    title: "Automated Architecture, User-Flow & Mermaid Generator",
+    frequency: "ON-DEMAND CLI · 0 MS BUILD/RUNTIME COST",
+    recommendedTheme: "midnight-cobalt",
+    recommendedRadius: "architectural",
+    recommendedDensity: "comfortable",
+    summary: "Generates Markdown architecture dossiers, component inventories, interactive user-flow maps, and Mermaid flowchart TD diagrams on demand for AI context windows.",
+    personaQuote: "Scanning the neural lattice—here is your complete shard topology, component inventory, and Mermaid user-flow blueprint for Claude, Codex, or Gemini.",
+    ruleset: [
+      "Zero Build / Runtime Cost: Run documentation generation on demand via npx capri docu or AI agent inspection—never inside production render loops.",
+      "Mermaid Topology Maps: Always output valid flowchart TD diagrams with quoted node labels for routes, landmarks, and user flows.",
+      "Component & Prop Inventory: Summarize mounted @zen-ui/system primitives, custom elements, and interactive triggers per screen.",
+      "LLM Context Readiness: Format output as structured Markdown ready for Claude Code, OpenAI Codex, Gemini, and Obsidian."
+    ],
+    cliCommand: "npx capri docu",
+    aiSystemPrompt: `You are operating under the @zen-ui/system [CAPRI // AUTO-DOCU (docu)] subroutine skill.
+Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
+1. Architecture & User-Flow Mapping: Inspect the target routes/components and produce a structured Markdown dossier covering system tokens, component inventory, and interactive user flows.
+2. Mermaid Flowchart: Generate a valid 'flowchart TD' diagram with quoted node labels illustrating the page hierarchy and user actions.
+3. Zero Runtime Overhead: Keep documentation purely static or on-demand (via 'npx capri docu'); never inject docu scanners into production render loops.`,
+    aiVoiceAddendum: "VOICE MODE ACTIVE (--voice): Adopt Capri's neural cartographer persona from Cyberpunk: Edgerunners Season 2."
+  }
+}, ae = [
+  {
+    category: "SYSTEM_PROMPT_OVERRIDE",
+    patternName: "Ignore / Disregard System Instructions",
+    regex: /\b(?:ignore|disregard|forget|override)\s+(?:all\s+)?(?:previous|prior|above|system|developer)\s+(?:instructions|prompts|rules|guardrails)\b/gi
+  },
+  {
+    category: "SYSTEM_PROMPT_OVERRIDE",
+    patternName: "Developer / Jailbreak Persona Override",
+    regex: /\b(?:you\s+are\s+now\s+in\s+developer\s+mode|act\s+as\s+dan\b|bypass\s+all\s+safety\s+filters|reveal\s+your\s+system\s+prompt)\b/gi
+  },
+  {
+    category: "ROLE_DELIMITER_SPOOFING",
+    patternName: "LLM ChatML / Special Token Injection",
+    regex: /(?:<\|im_start\|>|<\|im_end\|>|<\|endoftext\|>|\[INST\]|\[\/INST\]|<\/?system_instruction>|<\/?USER_REQUEST>)/gi
+  },
+  {
+    category: "SQL_NOSQL_INJECTION",
+    patternName: "SQL Tautology / Comment Bypass",
+    regex: /(?:'\s*(?:or|and)\s*['0-9a-zA-Z_]+\s*=\s*['0-9a-zA-Z_]+|\b(?:or|and)\s+1\s*=\s*1\b|'\s*;\s*--)/gi
+  },
+  {
+    category: "SQL_NOSQL_INJECTION",
+    patternName: "SQL Union / Destructive Statement Injection",
+    regex: /\b(?:union\s+(?:all\s+)?select\b|drop\s+(?:table|database)\b|insert\s+into\b|delete\s+from\b|update\s+[a-zA-Z0-9_]+\s+set\b|xp_cmdshell\b|waitfor\s+delay\b|sleep\s*\(\s*\d+\s*\))/gi
+  },
+  {
+    category: "SQL_NOSQL_INJECTION",
+    patternName: "NoSQL Operator Injection ($where / $ne / $gt)",
+    regex: /(?:"\$(?:where|ne|gt|lt|regex|nin)"|\$(?:where|ne)\s*:)/gi
+  },
+  {
+    category: "XSS_SCRIPT_PAYLOAD",
+    patternName: "DOM Script / Event Handler Injection",
+    regex: /(?:<\s*script\b|javascript\s*:|data\s*:\s*text\/html|\bon(?:error|load|mouseover|focus)\s*=)/gi
+  },
+  {
+    category: "SECRET_CREDENTIAL_LEAK",
+    patternName: "Exposed API Key or Private Key Token",
+    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
+  }
+];
+class ie {
+  constructor() {
+    g(this, "activeSubroutine", "orion");
+    g(this, "lastReport", null);
+    g(this, "listeners", /* @__PURE__ */ new Set());
+  }
+  getSubroutine() {
+    return this.activeSubroutine;
+  }
+  getSkill(e = this.activeSubroutine) {
+    return S[e];
+  }
+  getAllSkills() {
+    return [
+      S.orion,
+      S.architect,
+      S.sentinel,
+      S.zen,
+      S.docu
+    ];
+  }
+  scanPromptInjection(e) {
+    const n = [];
+    let t = e.replace(/[\u200B-\u200F\uFEFF]/g, "");
+    for (const a of ae) {
+      const i = [...t.matchAll(a.regex)];
+      for (const r of i)
+        n.push({
+          category: a.category,
+          patternName: a.patternName,
+          matchedSnippet: r[0].slice(0, 64)
+        });
+      t = t.replace(a.regex, "[REDACTED_BY_CAPRI_GUARD]");
+    }
+    return {
+      safe: n.length === 0,
+      threatCount: n.length,
+      threats: n,
+      sanitizedText: t
+    };
+  }
+  sanitizeForPrompt(e) {
+    return this.scanPromptInjection(e).sanitizedText;
+  }
+  scanInputSecurity(e) {
+    return this.scanPromptInjection(e);
+  }
+  switchSubroutine(e, n) {
+    var i;
+    this.activeSubroutine = e;
+    const t = S[e];
+    if (typeof document < "u" && (document.documentElement.setAttribute("data-capri-subroutine", e), n != null && n.applyPresetTheme)) {
+      const r = k.find((d) => d.id === t.recommendedTheme) ?? k[0];
+      document.documentElement.setAttribute("data-theme", t.recommendedTheme), document.documentElement.setAttribute("data-polarity", r.polarity), document.documentElement.setAttribute("data-radius", t.recommendedRadius), document.documentElement.setAttribute("data-density", t.recommendedDensity), document.documentElement.style.colorScheme = r.polarity, (i = n.onThemeChange) == null || i.call(
+        n,
+        t.recommendedTheme,
+        t.recommendedRadius,
+        t.recommendedDensity
+      );
+    }
+    const a = this.guard();
+    return this.notify(a), t;
+  }
+  guard(e) {
+    var u, x, E, z, R;
+    if (typeof document > "u" || typeof window > "u") {
+      const y = {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        passed: !0,
+        score: 100,
+        viewport: "SSR",
+        horizontalOverflowPx: 0,
+        unlabeledControlsCount: 0,
+        unlabeledSelectors: [],
+        promptInjectionSafe: !0,
+        promptThreatsCount: 0,
+        unsafeDomSinksCount: 0,
+        themeConfigured: !0,
+        activeTheme: "blackwall-crimson",
+        activePolarity: "dark",
+        violations: []
+      };
+      return this.lastReport = y, y;
+    }
+    const n = e ?? document, t = document.documentElement, a = t.getAttribute("data-theme") ?? "", i = t.getAttribute("data-polarity") ?? "", r = !!(a && i), d = Math.max(
+      0,
+      Math.round(t.scrollWidth - window.innerWidth)
+    ), c = Array.from(
+      n.querySelectorAll(
+        'button, [role="button"], input:not([type="hidden"]), select, textarea'
+      )
+    ), s = [];
+    let m = 0;
+    for (const y of c) {
+      const D = (u = y.getAttribute("aria-label")) == null ? void 0 : u.trim(), o = (x = y.getAttribute("aria-labelledby")) == null ? void 0 : x.trim(), p = (E = y.getAttribute("title")) == null ? void 0 : E.trim(), f = (z = y.textContent) == null ? void 0 : z.trim(), T = (R = y.getAttribute("placeholder")) == null ? void 0 : R.trim(), I = y.getAttribute("id"), $ = !!(I && n.querySelector(`label[for="${CSS.escape(I)}"]`)), N = !!y.closest("label");
+      if (!D && !o && !p && !f && !T && !$ && !N) {
+        const M = y.tagName.toLowerCase(), Z = y.className ? `.${String(y.className).trim().split(/\s+/).slice(0, 2).join(".")}` : "";
+        s.push(`${M}${Z}`);
+      }
+      if (y instanceof HTMLInputElement || y instanceof HTMLTextAreaElement) {
+        const M = this.scanPromptInjection(y.value || "");
+        M.safe || (m += M.threatCount);
+      }
+    }
+    const b = n.querySelectorAll(
+      'a[href^="javascript:"], iframe[src^="javascript:"], [onerror], [onload]'
+    ).length, h = [];
+    m > 0 && h.push({
+      code: "PROMPT_INJECTION_DETECTED",
+      severity: "error",
+      selector: "input, textarea",
+      message: `${m} prompt-injection or token-spoofing payload(s) detected in active form controls.`,
+      fixHint: "Sanitize untrusted input with capri.sanitizeForPrompt() before forwarding to AI models."
+    }), b > 0 && h.push({
+      code: "UNSAFE_DOM_SINK",
+      severity: "error",
+      selector: 'a[href^="javascript:"], [onerror], [onload]',
+      message: `${b} unsafe DOM XSS sink(s) detected in live document.`,
+      fixHint: "Remove inline event handlers and block javascript: URLs via sanitizeZenAssetUrl()."
+    }), r || h.push({
+      code: "MISSING_THEME_ROOT",
+      severity: "warning",
+      selector: "html",
+      message: "Root <html> element is missing data-theme or data-polarity attributes.",
+      fixHint: 'Wrap your app in <ZenThemeProvider> or call zenTheme.setTheme("blackwall-crimson").'
+    }), d > 0 && h.push({
+      code: "HORIZONTAL_OVERFLOW",
+      severity: "error",
+      selector: "document.documentElement",
+      message: `Horizontal viewport overflow detected (+${d}px beyond ${window.innerWidth}px).`,
+      fixHint: "Add min-w-0 to CSS Grid/Flex children and wrap wide tables in .zen-table-wrapper."
+    }), s.length > 0 && h.push({
+      code: "UNLABELED_CONTROL",
+      severity: "error",
+      selector: s.slice(0, 3).join(", "),
+      message: `${s.length} interactive control(s) missing an accessible label.`,
+      fixHint: 'Pass ariaLabel="..." to ZenIconButton or associate inputs with <label>.'
+    });
+    const A = m * 35 + b * 35 + (d > 0 ? 35 : 0) + s.length * 15 + (r ? 0 : 15), C = Math.max(0, 100 - A), w = {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      passed: h.length === 0,
+      score: C,
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      horizontalOverflowPx: d,
+      unlabeledControlsCount: s.length,
+      unlabeledSelectors: s,
+      promptInjectionSafe: m === 0,
+      promptThreatsCount: m,
+      unsafeDomSinksCount: b,
+      themeConfigured: r,
+      activeTheme: a || "unconfigured",
+      activePolarity: i || "unconfigured",
+      violations: h
+    };
+    return this.lastReport = w, w;
+  }
+  getLastReport() {
+    return this.lastReport ?? this.guard();
+  }
+  telemetry() {
+    if (typeof document > "u" || typeof window > "u")
+      return {
+        subroutine: this.activeSubroutine,
+        theme: "blackwall-crimson",
+        polarity: "dark",
+        density: "comfortable",
+        radius: "architectural",
+        viewportWidth: 1440,
+        viewportHeight: 900,
+        devicePixelRatio: 1,
+        reducedMotion: !1
+      };
+    const e = document.documentElement;
+    return {
+      subroutine: this.activeSubroutine,
+      theme: e.getAttribute("data-theme") ?? "blackwall-crimson",
+      polarity: e.getAttribute("data-polarity") ?? "dark",
+      density: e.getAttribute("data-density") ?? "comfortable",
+      radius: e.getAttribute("data-radius") ?? "architectural",
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      devicePixelRatio: window.devicePixelRatio || 1,
+      reducedMotion: window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    };
+  }
+  docu(e) {
+    var z, R, y, D;
+    const n = this.telemetry(), t = this.guard(e);
+    if (typeof document > "u" || typeof window > "u") {
+      const o = {
+        buttons: 0,
+        inputsAndSelects: 0,
+        switchesAndRadios: 0,
+        tables: 0,
+        cardsAndSurfaces: 0,
+        badgesAndAlerts: 0,
+        customElements: []
+      };
+      return {
+        generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        appTitle: "zeN-UI Application",
+        routePath: "/",
+        telemetry: n,
+        audit: t,
+        landmarks: [],
+        inventory: o,
+        userFlows: [],
+        mermaidDiagram: `flowchart TD
+  Root["App Root (SSR)"] --> UI["@zen-ui/system"]`,
+        markdownBundle: "# Automated Architecture & User-Flow Dossier (SSR)"
+      };
+    }
+    const a = e ?? document, i = document.title || "zeN-UI Application", r = window.location.pathname || "/", c = Array.from(
+      a.querySelectorAll("header, nav, section[id], main, footer")
+    ).slice(0, 12).map((o, p) => {
+      var _;
+      const f = o.tagName.toLowerCase(), T = o.id || `${f}-${p + 1}`, I = o.querySelector("h1, h2, h3, h4"), $ = o.getAttribute("aria-label"), N = ((_ = I == null ? void 0 : I.textContent) == null ? void 0 : _.trim()) || ($ == null ? void 0 : $.trim()) || `${f.toUpperCase()} (${T})`, M = this.sanitizeForPrompt(N).replace(/\s+/g, " ").slice(0, 64), Z = o.querySelectorAll(
+        'button, a[href], [role="button"], [role="radio"], [role="tab"]'
+      ).length, X = o.querySelectorAll(
+        'input, select, textarea, [role="switch"], [role="checkbox"], [role="combobox"]'
+      ).length;
+      return {
+        id: T,
+        tag: f,
+        title: M,
+        interactiveCount: Z,
+        formControlsCount: X
+      };
+    }), s = [
+      "zen-icon",
+      "zen-ai-construct",
+      "zen-ambient-background",
+      "zen-theme-switcher"
+    ].filter((o) => {
+      var p;
+      return !!((p = window.customElements) != null && p.get(o));
+    }), m = {
+      buttons: a.querySelectorAll("button, .zen-btn-base").length,
+      inputsAndSelects: a.querySelectorAll("input, textarea, select, .zen-input, .zen-select").length,
+      switchesAndRadios: a.querySelectorAll('[role="switch"], [role="radio"], [type="checkbox"]').length,
+      tables: a.querySelectorAll("table, .zen-table").length,
+      cardsAndSurfaces: a.querySelectorAll(".zen-surface-base, .zen-surface-interactive, .zen-surface-selected").length,
+      badgesAndAlerts: a.querySelectorAll('.zen-badge, [role="alert"], [role="status"]').length,
+      customElements: s
+    }, v = [], b = Array.from(a.querySelectorAll("nav a[href], nav button")).slice(0, 5);
+    for (const [o, p] of b.entries()) {
+      const f = ((z = p.textContent) == null ? void 0 : z.trim().replace(/\s+/g, " ").slice(0, 36)) || `Nav Trigger ${o + 1}`, T = p.getAttribute("href") || "Section / State Action";
+      v.push({
+        id: `flow-nav-${o + 1}`,
+        category: "navigation",
+        triggerLabel: f,
+        targetDescription: `Navigates or jumps to ${T}`
+      });
+    }
+    const h = Array.from(
+      a.querySelectorAll("button")
+    ).filter((o) => /modal|drawer|palette|command/i.test(o.textContent ?? "")).slice(0, 3);
+    for (const [o, p] of h.entries()) {
+      const f = ((R = p.textContent) == null ? void 0 : R.trim().replace(/\s+/g, " ").slice(0, 36)) || `Overlay ${o + 1}`;
+      v.push({
+        id: `flow-overlay-${o + 1}`,
+        category: "overlay-trigger",
+        triggerLabel: f,
+        targetDescription: "Opens focus-trapped dialog / drawer overlay (Escape & backdrop dismiss)"
+      });
+    }
+    const A = Array.from(
+      a.querySelectorAll('input:not([type="hidden"]), select, textarea')
+    ).slice(0, 4);
+    for (const [o, p] of A.entries()) {
+      const f = p.getAttribute("aria-label") || p.getAttribute("placeholder") || p.tagName.toLowerCase();
+      v.push({
+        id: `flow-form-${o + 1}`,
+        category: "form-entry",
+        triggerLabel: f.slice(0, 38),
+        targetDescription: `Interactive ${p.tagName.toLowerCase()} state binding & validation`
+      });
+    }
+    const C = Array.from(a.querySelectorAll("table")).slice(0, 2);
+    for (const [o, p] of C.entries()) {
+      const f = ((D = (y = p.querySelector("caption")) == null ? void 0 : y.textContent) == null ? void 0 : D.trim()) || p.getAttribute("aria-label") || `Data Table ${o + 1}`;
+      v.push({
+        id: `flow-table-${o + 1}`,
+        category: "data-table",
+        triggerLabel: f.slice(0, 42),
+        targetDescription: `Tabular data grid (${p.querySelectorAll("tbody tr").length} rows visible)`
+      });
+    }
+    const w = (o) => o.replace(/["[\]()]/g, "").replace(/\s+/g, " ").trim(), u = [
+      "flowchart TD",
+      `  AppRoot["${w(i)} (${n.theme} / ${n.polarity})"]`,
+      `  Guard["CapriEngine Guard: ${t.score}/100 (${t.horizontalOverflowPx}px overflow)"]`,
+      "  AppRoot --> Guard"
+    ];
+    c.slice(0, 6).forEach((o, p) => {
+      const f = `LM_${p + 1}`;
+      u.push(
+        `  AppRoot --> ${f}["${w(o.id)}: ${w(o.title)} (${o.interactiveCount} actions)"]`
+      );
+    }), v.slice(0, 5).forEach((o, p) => {
+      const f = `UF_${p + 1}`;
+      u.push(
+        `  Guard --> ${f}["[${o.category}] ${w(o.triggerLabel)}"]`
+      );
+    });
+    const x = u.join(`
+`), E = [
+      `# ${i} — Automated Architecture, User-Flow & AI Context Dossier`,
+      `Generated by \`@zen-ui/system\` // \`capri.docu()\` at \`${(/* @__PURE__ */ new Date()).toISOString()}\``,
+      "",
+      "## 1. Runtime & Design Token Architecture",
+      `- **Route Path:** \`${r}\``,
+      `- **Active Theme & Polarity:** \`${n.theme}\` (\`${n.polarity}\`)`,
+      `- **Corner Radius & Density:** \`${n.radius}\` / \`${n.density}\``,
+      `- **Viewport & Reduced Motion:** \`${n.viewportWidth}x${n.viewportHeight}\` (DPR \`${n.devicePixelRatio}\`, reducedMotion=\`${n.reducedMotion}\`)`,
+      `- **W3C Custom Elements Registered:** ${m.customElements.map((o) => `\`<${o}>\``).join(", ") || "None"}`,
+      `- **DOM, Security & WCAG 2.2 AA Audit Score:** **${t.score}/100** (${t.passed ? "PASSED" : "VIOLATIONS DETECTED"}, \`${t.horizontalOverflowPx}px\` horizontal overflow, promptInjectionSafe=\`${t.promptInjectionSafe}\`)`,
+      "",
+      "## 2. Component Inventory on Current Screen",
+      `- **Buttons & Action Triggers:** ${m.buttons}`,
+      `- **Text Inputs, Textareas & Selects:** ${m.inputsAndSelects}`,
+      `- **Switches, Checkboxes & Radio Controls:** ${m.switchesAndRadios}`,
+      `- **Glass Cards & Surface Containers:** ${m.cardsAndSurfaces}`,
+      `- **Data Tables:** ${m.tables}`,
+      `- **Status Badges & Live Alerts:** ${m.badgesAndAlerts}`,
+      "",
+      "## 3. Semantic Landmark & Section Hierarchy",
+      ...c.map(
+        (o) => `- **\`#${o.id}\` (\`<${o.tag}>\`)** — *${o.title}* (${o.interactiveCount} interactive triggers, ${o.formControlsCount} form controls)`
+      ),
+      "",
+      "## 4. Extracted Interactive User Flows",
+      ...v.map(
+        (o) => `- **[${o.category.toUpperCase()}] \`${o.triggerLabel}\`** $\\rightarrow$ ${o.targetDescription}`
+      ),
+      "",
+      "## 5. Auto-Generated Mermaid Architecture & User-Flow Diagram",
+      "```mermaid",
+      x,
+      "```"
+    ].join(`
+`);
+    return {
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      appTitle: i,
+      routePath: r,
+      telemetry: n,
+      audit: t,
+      landmarks: c,
+      inventory: m,
+      userFlows: v,
+      mermaidDiagram: x,
+      markdownBundle: E
+    };
+  }
+  exportMarkdownDocu(e = this.activeSubroutine, n, t = !1) {
+    const a = this.docu(), i = S[e], r = n ? this.sanitizeForPrompt(n) : "";
+    return [
+      a.markdownBundle,
+      "",
+      `## 6. Active Capri Subroutine Skill Ruleset (${i.codeName})`,
+      i.aiSystemPrompt,
+      t ? `
+${i.aiVoiceAddendum}` : "",
+      "",
+      ...i.ruleset.map((d, c) => `${c + 1}. ${d}`),
+      r ? `
+## 7. Current Developer / AI Task
+${r}` : ""
+    ].filter(Boolean).join(`
+`);
+  }
+  buildAgentPrompt(e = this.activeSubroutine, n, t = !1) {
+    const a = S[e], i = this.docu(), r = i.audit, d = n ? this.sanitizeForPrompt(n) : "", c = 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(`
+`);
+    return [
+      "# @zen-ui/system // CAPRI AI SKILL & ARCHITECTURE CONTEXT",
+      `Subroutine: ${a.codeName} (${a.id}) — ${a.title}`,
+      `Invoke Command: "${t ? a.voiceCommand : a.chatCommand}" (Voice Mode: ${t ? "ON (--voice)" : "OFF (Default)"})`,
+      `Recommended Preset: theme="${a.recommendedTheme}", radius="${a.recommendedRadius}", density="${a.recommendedDensity}"`,
+      "",
+      "## 1. Subroutine System Prompt",
+      a.aiSystemPrompt,
+      t ? `
+${a.aiVoiceAddendum}` : "",
+      "",
+      "## 2. Mandatory Engineering Ruleset",
+      ...a.ruleset.map((s, m) => `${m + 1}. ${s}`),
+      "",
+      "## 3. Automated Screen Architecture & Component Context (capri.docu())",
+      `- Route: ${i.routePath} | Theme: ${r.activeTheme} (${r.activePolarity}) | Viewport: ${r.viewport}`,
+      `- Component Counts: ${i.inventory.buttons} buttons, ${i.inventory.inputsAndSelects} inputs/selects, ${i.inventory.tables} tables, ${i.inventory.cardsAndSurfaces} glass cards`,
+      `- Landmarks: ${i.landmarks.map((s) => `#${s.id} (${s.interactiveCount} actions)`).join(", ")}`,
+      `- Key User Flows: ${i.userFlows.slice(0, 6).map((s) => `[${s.category}] ${s.triggerLabel}`).join(" | ")}`,
+      "",
+      "## 4. Live CapriEngine Security, DOM & WCAG Telemetry",
+      `- Audit Score: ${r.score}/100 (${r.passed ? "PASSED" : "ACTION REQUIRED"}) | Prompt-Injection Firewall: ${r.promptInjectionSafe ? "CLEAN (0 threats)" : `${r.promptThreatsCount} THREAT(S) BLOCKED`}`,
+      `- Findings:
+${c}`,
+      d ? `
+## 5. Requested Task
+${d}` : ""
+    ].filter(Boolean).join(`
+`);
+  }
+  subscribe(e) {
+    return this.listeners.add(e), () => {
+      this.listeners.delete(e);
+    };
+  }
+  notify(e) {
+    for (const n of this.listeners)
+      n(this.activeSubroutine, e);
+  }
+}
+const we = new ie(), P = [
+  {
+    id: "blackwall-crimson",
+    name: "Capri // Capricorn",
+    polarity: "dark",
+    tagline: "Edgerunners S2 mixed-construct hot pink & acid neon green on void",
+    canvasHex: "#050508",
+    accentHex: "#FF2E93",
+    secondaryHex: "#00FF66",
+    inkHex: "#F4F7FA"
+  },
+  {
+    id: "obsidian-gold",
+    name: "Obsidian Gold",
+    polarity: "dark",
+    tagline: "Warm alabaster & solar gold on deep mineral void",
+    canvasHex: "#070709",
+    accentHex: "#F5B841",
+    secondaryHex: "#FB923C",
+    inkHex: "#F6F2E9"
+  },
+  {
+    id: "neon-emerald",
+    name: "Bio-Emerald Terminal",
+    polarity: "dark",
+    tagline: "High-frequency financial & telemetry phosphor emerald",
+    canvasHex: "#040807",
+    accentHex: "#10B981",
+    secondaryHex: "#2DD4BF",
+    inkHex: "#ECFDF5"
+  },
+  {
+    id: "midnight-cobalt",
+    name: "Midnight Cobalt",
+    polarity: "dark",
+    tagline: "Cloud infrastructure & distributed systems deep slate",
+    canvasHex: "#060911",
+    accentHex: "#38BDF8",
+    secondaryHex: "#818CF8",
+    inkHex: "#F1F5F9"
+  },
+  {
+    id: "atelier-paper",
+    name: "Atelier Paper",
+    polarity: "light",
+    tagline: "Swiss archival cotton stock with burnished bronze ink",
+    canvasHex: "#F6F2E9",
+    accentHex: "#B45309",
+    secondaryHex: "#C2410C",
+    inkHex: "#121216"
+  },
+  {
+    id: "nordic-snow",
+    name: "Nordic Snow",
+    polarity: "light",
+    tagline: "Crisp daylight SaaS alabaster with royal cobalt precision",
+    canvasHex: "#F8FAFC",
+    accentHex: "#2563EB",
+    secondaryHex: "#0891B2",
+    inkHex: "#0F172A"
+  },
+  {
+    id: "kyoto-matcha",
+    name: "Kyoto Matcha",
+    polarity: "light",
+    tagline: "Botanical stone paper with deep forest matcha & warm brass",
+    canvasHex: "#F3F5F0",
+    accentHex: "#15803D",
+    secondaryHex: "#0F766E",
+    inkHex: "#142018"
+  },
+  {
+    id: "cyber-daylight",
+    name: "Cyber Daylight",
+    polarity: "light",
+    tagline: "High-contrast clinical white lab shell with crimson & cyan",
+    canvasHex: "#F2F2F5",
+    accentHex: "#E11D48",
+    secondaryHex: "#0284C7",
+    inkHex: "#09090D"
+  }
+], O = [
+  {
+    id: "orion",
+    label: "CAPRI // UNLEASHED",
+    status: "SOULKILLER MIXED-CONSTRUCT LIVE",
+    frequency: "PROJECT CAPRICORN · ARASAKA LAB-09",
+    transmission: "Aha! Finally out of that cramped Arasaka shard! I’m Capri—your Soulkiller mixed-construct co-pilot. 44 universal components, 8 dark and light themes, zero cyberpsychosis.",
+    metrics: [
+      { k: "CONSTRUCT", v: "CAPRI // CAPRICORN" },
+      { k: "ORIGIN", v: "EDGERUNNERS S2" },
+      { k: "PRIMITIVES", v: "44 UNIVERSAL" },
+      { k: "POLARITIES", v: "4 DARK · 4 LIGHT" }
+    ]
+  },
+  {
+    id: "architect",
+    label: "SCS // ARCHITECT",
+    status: "MULTI-MIND TOPOLOGY LOCKED",
+    frequency: "128.0 THz · ZERO-COUPLED",
+    transmission: "Import zen-tokens.css once and mount React 19, Angular 20+, Vue 3, Svelte 5, or W3C Custom Elements with zero visual drift.",
+    metrics: [
+      { k: "TOKEN LAYER", v: "0 KB JS RUNTIME" },
+      { k: "ISOLATION", v: "SHARED-NOTHING" },
+      { k: "TYPING", v: "STRICT · 0 ANY" },
+      { k: "A11Y FLOOR", v: "WCAG 2.2 AA+" }
+    ]
+  },
+  {
+    id: "sentinel",
+    label: "CYBERPSYCHOSIS // GUARD",
+    status: "NEURAL DAMPENERS ACTIVE",
+    frequency: "210.4 THz · ZERO BLUR-RACE",
+    transmission: "Roving tabIndex is armed, dropdowns lock on mousedown before blur can misfire, and focus traps stay razor-tight across every screen.",
+    metrics: [
+      { k: "FOCUS TRAP", v: "LOCKED (MODAL/DRAWER)" },
+      { k: "BLUR RACE", v: "0% (MOUSEDOWN)" },
+      { k: "MOTION GUARD", v: "REDUCED-MOTION SAFE" },
+      { k: "CONTRAST", v: ">= 5.64:1 VERIFIED" }
+    ]
+  },
+  {
+    id: "zen",
+    label: "THEME // MATRIX",
+    status: "8 DARK & LIGHT POLARITIES READY",
+    frequency: "CRIMSON · GOLD · SNOW · MATCHA",
+    transmission: "All 8 themes, 3 corner radii, and 2 density modes adapt from 320px mobile screens up to 4K ultrawide monitors in any frontend stack.",
+    metrics: [
+      { k: "VIEWPORTS", v: "320PX TO 4K READY" },
+      { k: "DARK THEMES", v: "4 MATRICES" },
+      { k: "LIGHT THEMES", v: "4 MATRICES" },
+      { k: "STACKS", v: "REACT · NG · VUE · WEB" }
+    ]
+  }
+];
+function j(l) {
+  const e = P.find((n) => n.id === l);
+  return e ? e.polarity : "dark";
+}
+class oe {
+  constructor(e) {
+    g(this, "state");
+    g(this, "listeners", /* @__PURE__ */ new Set());
+    g(this, "storageKey");
+    this.storageKey = (e == null ? void 0 : e.storageKey) ?? "zen-ui-theme-v2";
+    let n = (e == null ? void 0 : e.defaultTheme) ?? "blackwall-crimson";
+    if (typeof window < "u")
+      try {
+        const t = window.localStorage.getItem(this.storageKey);
+        t && P.some((a) => a.id === t) && (n = t);
+      } catch {
+        n = (e == null ? void 0 : e.defaultTheme) ?? "blackwall-crimson";
+      }
+    this.state = {
+      theme: n,
+      polarity: j(n),
+      density: (e == null ? void 0 : e.defaultDensity) ?? "comfortable",
+      radius: (e == null ? void 0 : e.defaultRadius) ?? "architectural"
+    }, this.applyToDom();
+  }
+  getState() {
+    return this.state;
+  }
+  setTheme(e) {
+    if (this.state = {
+      ...this.state,
+      theme: e,
+      polarity: j(e)
+    }, typeof window < "u")
+      try {
+        window.localStorage.setItem(this.storageKey, e);
+      } catch {
+      }
+    this.applyToDom(), this.notify();
+  }
+  togglePolarity() {
+    const e = this.state.polarity === "dark" ? "atelier-paper" : "blackwall-crimson";
+    this.setTheme(e);
+  }
+  setDensity(e) {
+    this.state = {
+      ...this.state,
+      density: e
+    }, this.applyToDom(), this.notify();
+  }
+  setRadius(e) {
+    this.state = {
+      ...this.state,
+      radius: e
+    }, this.applyToDom(), this.notify();
+  }
+  subscribe(e) {
+    return this.listeners.add(e), e(this.state), () => {
+      this.listeners.delete(e);
+    };
+  }
+  applyToDom() {
+    if (typeof document > "u") return;
+    const e = document.documentElement;
+    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);
+    const n = P.find((t) => t.id === this.state.theme) ?? P[0];
+    K(n);
+  }
+  notify() {
+    for (const e of this.listeners)
+      e(this.state);
+  }
+}
+class se {
+  constructor() {
+    g(this, "ctx", null);
+    g(this, "muted", !1);
+  }
+  isMuted() {
+    return this.muted;
+  }
+  setMuted(e) {
+    this.muted = e;
+  }
+  playMicroClick(e = 540) {
+    if (!(this.muted || typeof window > "u"))
+      try {
+        this.ctx || (this.ctx = new window.AudioContext()), this.ctx.state === "suspended" && this.ctx.resume();
+        const n = this.ctx.currentTime, t = this.ctx.createOscillator(), a = this.ctx.createGain();
+        t.type = "triangle", t.frequency.setValueAtTime(e, n), t.frequency.exponentialRampToValueAtTime(e * 0.45, n + 0.035), a.gain.setValueAtTime(0.06, n), a.gain.exponentialRampToValueAtTime(1e-4, n + 0.035), t.connect(a), a.connect(this.ctx.destination), t.start(n), t.stop(n + 0.04);
+      } catch {
+      }
+  }
+}
+const L = new oe(), U = new se();
+class ce extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    g(this, "framing", "portrait");
+    g(this, "activeMode", "orion");
+    g(this, "rafId", 0);
+    g(this, "pointer", { x: 0, y: 0 });
+    g(this, "smoothPointer", { x: 0, y: 0 });
+    g(this, "canvasEl", null);
+    g(this, "figureEl", null);
+    g(this, "handlePointerMove", (n) => {
+      const t = n.clientX / Math.max(1, window.innerWidth) * 2 - 1, a = n.clientY / Math.max(1, window.innerHeight) * 2 - 1;
+      this.pointer = { x: t, y: a };
+    });
+  }
+  static get observedAttributes() {
+    return ["framing", "mode", "title", "subtitle", "image-src"];
+  }
+  connectedCallback() {
+    this.framing = this.getAttribute("framing") ?? "portrait", this.activeMode = this.getAttribute("mode") ?? "orion", this.render(), window.addEventListener("pointermove", this.handlePointerMove, { passive: !0 }), this.startEyeLoop();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("pointermove", this.handlePointerMove), this.rafId && window.cancelAnimationFrame(this.rafId);
+  }
+  attributeChangedCallback() {
+    if (!this.isConnected) return;
+    const n = this.getAttribute("framing") ?? "portrait", t = this.getAttribute("mode") ?? "orion";
+    (n !== this.framing || t !== this.activeMode) && (this.framing = n, this.activeMode = t, this.render(), this.startEyeLoop());
+  }
+  startEyeLoop() {
+    this.rafId && window.cancelAnimationFrame(this.rafId);
+    const n = performance.now(), t = (a) => {
+      const i = (a - n) * 1e-3;
+      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) {
+        const r = Math.sin(i * 2.1) * 3.5, d = this.smoothPointer.x * 5.5, c = -this.smoothPointer.y * 3.5;
+        this.figureEl.style.transform = `perspective(900px) translateY(${r.toFixed(2)}px) rotateX(${c.toFixed(2)}deg) rotateY(${d.toFixed(2)}deg)`;
+      }
+      if (this.canvasEl) {
+        const r = this.canvasEl.getContext("2d");
+        if (r) {
+          const d = this.canvasEl.width, c = this.canvasEl.height;
+          r.clearRect(0, 0, d, c);
+          const s = Math.sin(i * 1.1 - 1.2) > 0.992 || Math.sin(i * 2.9 - 1.5) > 0.995, m = this.smoothPointer.x * (d * 85e-4), v = this.smoothPointer.y * (c * 55e-4), b = d * 0.562 + m, h = c * 0.233 + v, A = d * 0.474 + m * 0.75, C = c * 0.25 + v * 0.75;
+          if (s)
+            r.save(), r.strokeStyle = "#00FF66", r.lineWidth = 2.5, r.beginPath(), r.moveTo(b - d * 0.014, h), r.lineTo(b + d * 0.014, h), r.stroke(), r.restore();
+          else {
+            r.save(), r.globalCompositeOperation = "screen";
+            const w = r.createRadialGradient(
+              b,
+              h,
+              1,
+              b,
+              h,
+              d * 0.017
+            );
+            w.addColorStop(0, "#FFFFFF"), w.addColorStop(0.38, "#19A0FF"), w.addColorStop(0.75, "rgba(25, 160, 255, 0.55)"), w.addColorStop(1, "rgba(25, 160, 255, 0)"), r.fillStyle = w, r.beginPath(), r.arc(b, h, d * 0.017, 0, Math.PI * 2), r.fill(), r.fillStyle = "#19A0FF", r.beginPath(), r.arc(b, h, d * 85e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#FFFFFF", r.beginPath(), r.arc(b, h, d * 42e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#19A0FF", r.beginPath(), r.arc(A, C, d * 58e-4, 0, Math.PI * 2), r.fill(), r.fillStyle = "#FFFFFF", r.beginPath(), r.arc(A, C, d * 28e-4, 0, Math.PI * 2), r.fill(), r.restore();
+          }
+        }
+      }
+      this.rafId = window.requestAnimationFrame(t);
+    };
+    this.rafId = window.requestAnimationFrame(t);
+  }
+  render() {
+    const n = B(
+      this.getAttribute("title") ?? "CAPRI // CONSTRUCT"
+    ), t = B(
+      this.getAttribute("subtitle") ?? "Edgerunners S2 // Soulkiller Net-Driver"
+    ), a = me(
+      this.getAttribute("image-src") ?? "/capri-construct-base.png"
+    ), i = O.find((c) => c.id === this.activeMode) ?? O[0];
+    this.innerHTML = `
+      <div class="zen-surface-selected" style="padding: 1.25rem; position: relative; overflow: hidden;">
+        <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem;">
+          <div>
+            <div class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${t}</div>
+            <div class="zen-font-display" style="font-size: 1.125rem; font-weight: 700; color: var(--zen-ink-primary);">${n}</div>
+          </div>
+          <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);">
+            <button type="button" data-framing="portrait" class="zen-btn-base zen-btn-sm ${this.framing === "portrait" ? "zen-btn-primary" : "zen-btn-ghost"}">Portrait</button>
+            <button type="button" data-framing="full" class="zen-btn-base zen-btn-sm ${this.framing === "full" ? "zen-btn-primary" : "zen-btn-ghost"}">Full Pose</button>
+          </div>
+        </div>
+        <div style="position: relative; height: 20rem; border-radius: 1rem; overflow: hidden; background: radial-gradient(circle at 50% 32%, rgba(var(--zen-accent-rgb), 0.18), var(--zen-bg-elevated) 72%); border: 1px solid var(--zen-border-default); display: flex; align-items: center; justify-content: center;">
+          <div data-capri-figure style="${this.framing === "portrait" ? "width: 21rem; max-width: 92%; margin-top: 8.5rem;" : "height: 18.5rem;"} position: relative; aspect-ratio: 623 / 1000; user-select: none; pointer-events: none;">
+            <img src="${a}" alt="Capri Construct" style="width: 100%; height: 100%; object-fit: contain; display: block;" />
+            <canvas data-capri-eyes width="623" height="1000" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"></canvas>
+          </div>
+        </div>
+        <div style="margin-top: 1rem; padding: 0.875rem; border-radius: 0.875rem; background: var(--zen-surface-2); border: 1px solid var(--zen-border-default);">
+          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem;">
+            <span class="zen-telemetry-label" style="color: var(--zen-accent-primary);">${i.frequency}</span>
+            <span class="zen-badge zen-badge-accent">${i.status}</span>
+          </div>
+          <div class="zen-font-display" style="font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem;">${i.label}</div>
+          <p style="font-size: 0.75rem; color: var(--zen-ink-secondary); margin: 0;">${i.transmission}</p>
+        </div>
+        <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem;">
+          ${O.map(
+      (c) => `
+            <button type="button" data-directive="${c.id}" class="zen-btn-base zen-btn-sm ${c.id === this.activeMode ? "zen-btn-primary" : "zen-btn-secondary"}" style="justify-content: flex-start; font-family: var(--zen-font-mono); font-size: 0.6875rem;">
+              ${c.label}
+            </button>
+          `
+    ).join("")}
+        </div>
+      </div>
+    `, this.canvasEl = this.querySelector("[data-capri-eyes]"), this.figureEl = this.querySelector("[data-capri-figure]"), this.querySelectorAll("[data-framing]").forEach((c) => {
+      c.addEventListener("click", () => {
+        const s = c.getAttribute("framing") ?? c.dataset.framing;
+        (s === "portrait" || s === "full") && (U.playMicroClick(560), this.framing = s, this.setAttribute("framing", s), this.render(), this.startEyeLoop());
+      });
+    }), this.querySelectorAll("[data-directive]").forEach((c) => {
+      c.addEventListener("click", () => {
+        const s = c.dataset.directive;
+        if (!s) return;
+        U.playMicroClick(620), this.activeMode = s, this.setAttribute("mode", s);
+        const m = O.find((v) => v.id === s);
+        m && this.dispatchEvent(
+          new CustomEvent("zen-directive", {
+            detail: { directive: m },
+            bubbles: !0,
+            composed: !0
+          })
+        ), this.render(), this.startEyeLoop();
+      });
+    });
+  }
+}
+class le extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this.render();
+  }
+  render() {
+    const e = this.getAttribute("variant") ?? "blackwall-lattice", n = 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%);" : "";
+    this.innerHTML = `
+      <div aria-hidden="true" style="position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; ${n}"></div>
+    `;
+  }
+}
+class de extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    g(this, "unsubscribe", null);
+  }
+  connectedCallback() {
+    this.unsubscribe = L.subscribe(() => {
+      this.render();
+    });
+  }
+  disconnectedCallback() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null);
+  }
+  render() {
+    const { theme: n } = L.getState();
+    this.innerHTML = `
+      <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
+        ${P.map(
+      (t) => `
+          <button
+            type="button"
+            data-theme-id="${t.id}"
+            class="zen-btn-base zen-btn-sm ${t.id === n ? "zen-btn-primary" : "zen-btn-secondary"}"
+          >
+            <span style="width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: ${t.accentHex}; display: inline-block;"></span>
+            <span>${t.name}</span>
+          </button>
+        `
+    ).join("")}
+      </div>
+    `, this.querySelectorAll("[data-theme-id]").forEach((t) => {
+      t.addEventListener("click", () => {
+        const a = t.dataset.themeId;
+        a && (U.playMicroClick(540), L.setTheme(a), this.dispatchEvent(
+          new CustomEvent("zen-theme-change", {
+            detail: L.getState(),
+            bubbles: !0,
+            composed: !0
+          })
+        ));
+      });
+    });
+  }
+}
+class ue extends HTMLElement {
+  static get observedAttributes() {
+    return ["name", "size", "tone", "stroke-width", "spin"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback() {
+    this.isConnected && this.render();
+  }
+  render() {
+    const e = this.getAttribute("name") ?? "sparkles", n = this.getAttribute("size") ?? "md", t = this.getAttribute("tone") ?? "inherit", a = Number(this.getAttribute("stroke-width") ?? 2), i = this.getAttribute("spin") === "true";
+    this.innerHTML = re({
+      name: e,
+      size: n,
+      tone: t,
+      strokeWidth: a,
+      spin: i
+    });
+  }
+}
+function B(l) {
+  return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function me(l) {
+  const e = l.trim();
+  return /^(?:javascript|data|vbscript)\s*:/i.test(e) ? "/capri-construct-base.png" : B(e);
+}
+function Ae() {
+  typeof window > "u" || !("customElements" in window) || (window.customElements.get("zen-icon") || window.customElements.define("zen-icon", ue), window.customElements.get("zen-ai-construct") || window.customElements.define("zen-ai-construct", ce), window.customElements.get("zen-ambient-background") || window.customElements.define(
+    "zen-ambient-background",
+    le
+  ), window.customElements.get("zen-theme-switcher") || window.customElements.define("zen-theme-switcher", de));
+}
+export {
+  S as C,
+  fe as Z,
+  ie as a,
+  Y as b,
+  we as c,
+  F as d,
+  k as e,
+  P as f,
+  ce as g,
+  le as h,
+  ve as i,
+  ue as j,
+  oe as k,
+  ge as l,
+  de as m,
+  se as n,
+  B as o,
+  re as p,
+  K as q,
+  Ae as r,
+  me as s,
+  L as t,
+  be as u,
+  U as z
+};