@clef-sh/ui 0.1.13-beta.88

package/src/client/components/Sidebar.tsx

@@ -0,0 +1,337 @@
+import React from "react";
+import { theme } from "../theme";
+import type { ClefManifest, MatrixStatus, GitStatus as GitStatusType } from "@clef-sh/core";
+
+export type ViewName =
+  | "matrix"
+  | "editor"
+  | "diff"
+  | "lint"
+  | "scan"
+  | "import"
+  | "recipients"
+  | "identities"
+  | "backend"
+  | "history";
+
+interface SidebarProps {
+  activeView: ViewName;
+  setView: (view: ViewName) => void;
+  activeNs: string;
+  setNs: (ns: string) => void;
+  manifest: ClefManifest | null;
+  matrixStatuses: MatrixStatus[];
+  gitStatus: GitStatusType | null;
+  lintErrorCount: number;
+  scanIssueCount: number;
+}
+
+export function Sidebar({
+  activeView,
+  setView,
+  activeNs,
+  setNs,
+  manifest,
+  matrixStatuses,
+  gitStatus,
+  lintErrorCount,
+  scanIssueCount,
+}: SidebarProps) {
+  const uncommittedCount = gitStatus
+    ? gitStatus.staged.length + gitStatus.unstaged.length + gitStatus.untracked.length
+    : 0;
+
+  const namespaces = manifest?.namespaces ?? [];
+
+  return (
+    <div
+      style={{
+        width: 220,
+        minHeight: "100vh",
+        background: theme.surface,
+        borderRight: `1px solid ${theme.border}`,
+        display: "flex",
+        flexDirection: "column",
+        flexShrink: 0,
+      }}
+    >
+      {/* Logo */}
+      <div
+        style={{
+          padding: "20px 20px 16px",
+          borderBottom: `1px solid ${theme.border}`,
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+        }}
+      >
+        <div
+          style={{
+            width: 30,
+            height: 30,
+            background: theme.accentDim,
+            border: `1px solid ${theme.accent}44`,
+            borderRadius: 7,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: theme.accent,
+            fontSize: 15,
+          }}
+        >
+          {"\u266A"}
+        </div>
+        <div>
+          <div
+            style={{
+              fontFamily: theme.sans,
+              fontWeight: 700,
+              fontSize: 16,
+              color: theme.text,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            clef
+          </div>
+          <div
+            style={{
+              fontFamily: theme.mono,
+              fontSize: 9,
+              color: theme.textMuted,
+              marginTop: -1,
+            }}
+          >
+            {manifest?.sops.default_backend ?? "local"} / main
+          </div>
+        </div>
+      </div>
+
+      {/* Nav */}
+      <div style={{ padding: "12px 10px", flex: 1 }}>
+        <NavItem
+          icon={"\u229E"}
+          label="Matrix"
+          active={activeView === "matrix"}
+          onClick={() => setView("matrix")}
+        />
+        <NavItem
+          icon={"\u21C4"}
+          label="Diff"
+          active={activeView === "diff"}
+          onClick={() => setView("diff")}
+        />
+        <NavItem
+          icon={"\u2714"}
+          label="Lint"
+          active={activeView === "lint"}
+          onClick={() => setView("lint")}
+          badge={lintErrorCount > 0 ? String(lintErrorCount) : undefined}
+          badgeColor={theme.red}
+        />
+        <NavItem
+          icon={"\u2315"}
+          label="Scan"
+          active={activeView === "scan"}
+          onClick={() => setView("scan")}
+          badge={scanIssueCount > 0 ? String(scanIssueCount) : undefined}
+          badgeColor={theme.yellow}
+        />
+        <NavItem
+          icon={"\u2B06"}
+          label="Import"
+          active={activeView === "import"}
+          onClick={() => setView("import")}
+        />
+        <NavItem
+          icon={"\u2662"}
+          label="Recipients"
+          active={activeView === "recipients"}
+          onClick={() => setView("recipients")}
+        />
+        <NavItem
+          icon={"\u2699"}
+          label="Service IDs"
+          active={activeView === "identities"}
+          onClick={() => setView("identities")}
+          badge={
+            manifest?.service_identities?.length
+              ? String(manifest.service_identities.length)
+              : undefined
+          }
+          badgeColor={theme.purple}
+        />
+        <NavItem
+          icon={"\u21BB"}
+          label="Backend"
+          active={activeView === "backend"}
+          onClick={() => setView("backend")}
+        />
+        <NavItem
+          icon={"\u23F1"}
+          label="History"
+          active={activeView === "history"}
+          onClick={() => setView("history")}
+        />
+
+        <div style={{ marginTop: 20, marginBottom: 6, padding: "0 8px" }}>
+          <span
+            style={{
+              fontFamily: theme.sans,
+              fontSize: 10,
+              fontWeight: 600,
+              color: theme.textDim,
+              letterSpacing: "0.1em",
+              textTransform: "uppercase",
+            }}
+          >
+            Namespaces
+          </span>
+        </div>
+
+        {namespaces.map((ns) => {
+          const hasIssue = matrixStatuses.some(
+            (s) => s.cell.namespace === ns.name && s.issues.length > 0,
+          );
+          return (
+            <NavItem
+              key={ns.name}
+              icon={
+                <span
+                  style={{
+                    fontFamily: theme.mono,
+                    fontSize: 10,
+                    color: theme.textMuted,
+                  }}
+                >
+                  //
+                </span>
+              }
+              label={ns.name}
+              active={activeView === "editor" && activeNs === ns.name}
+              onClick={() => {
+                setView("editor");
+                setNs(ns.name);
+              }}
+              badge={hasIssue ? "!" : undefined}
+              badgeColor={theme.yellow}
+            />
+          );
+        })}
+      </div>
+
+      {/* Footer */}
+      <div style={{ padding: "12px 16px", borderTop: `1px solid ${theme.border}` }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            color: theme.textMuted,
+          }}
+        >
+          <span style={{ fontFamily: theme.mono, fontSize: 10 }}>
+            {uncommittedCount} uncommitted
+          </span>
+        </div>
+        <div style={{ marginTop: 5 }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              color: theme.green,
+            }}
+          >
+            <span
+              style={{
+                display: "inline-block",
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: theme.green,
+                boxShadow: `0 0 5px ${theme.green}`,
+              }}
+            />
+            <span style={{ fontFamily: theme.mono, fontSize: 10 }}>
+              {manifest?.sops.default_backend ?? "age"} key loaded
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface NavItemProps {
+  icon: React.ReactNode;
+  label: string;
+  active: boolean;
+  onClick: () => void;
+  badge?: string;
+  badgeColor?: string;
+}
+
+function NavItem({ icon, label, active, onClick, badge, badgeColor }: NavItemProps) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      data-testid={`nav-${label.toLowerCase()}`}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") onClick();
+      }}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 9,
+        padding: "7px 10px",
+        borderRadius: 6,
+        cursor: "pointer",
+        background: active ? theme.accentDim : "transparent",
+        border: active ? `1px solid ${theme.accent}22` : "1px solid transparent",
+        marginBottom: 2,
+        transition: "all 0.12s",
+        position: "relative",
+      }}
+    >
+      <span
+        style={{
+          color: active ? theme.accent : theme.textMuted,
+          display: "flex",
+          alignItems: "center",
+          width: 14,
+        }}
+      >
+        {icon}
+      </span>
+      <span
+        style={{
+          fontFamily: theme.sans,
+          fontSize: 13,
+          fontWeight: active ? 600 : 400,
+          color: active ? theme.accent : theme.text,
+          flex: 1,
+        }}
+      >
+        {label}
+      </span>
+      {badge && badgeColor && (
+        <span
+          style={{
+            fontFamily: theme.mono,
+            fontSize: 9,
+            fontWeight: 700,
+            color: badgeColor,
+            background: `${badgeColor}20`,
+            border: `1px solid ${badgeColor}44`,
+            borderRadius: 3,
+            padding: "1px 5px",
+          }}
+        >
+          {badge}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/client/components/StatusDot.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { theme } from "../theme";
+
+interface StatusDotProps {
+  status: string;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  ok: theme.green,
+  missing_keys: theme.red,
+  schema_warn: theme.yellow,
+  sops_error: theme.red,
+};
+
+export function StatusDot({ status }: StatusDotProps) {
+  const color = STATUS_COLORS[status] ?? theme.textMuted;
+  return (
+    <span
+      data-testid="status-dot"
+      style={{
+        display: "inline-block",
+        width: 7,
+        height: 7,
+        borderRadius: "50%",
+        background: color,
+        boxShadow: `0 0 6px ${color}88`,
+      }}
+    />
+  );
+}

package/src/client/components/TopBar.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { theme } from "../theme";
+
+interface TopBarProps {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+}
+
+export function TopBar({ title, subtitle, actions }: TopBarProps) {
+  return (
+    <div
+      style={{
+        height: 54,
+        borderBottom: `1px solid ${theme.border}`,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 24px",
+        gap: 16,
+        flexShrink: 0,
+      }}
+    >
+      <div style={{ flex: 1 }}>
+        <div
+          style={{
+            fontFamily: theme.sans,
+            fontWeight: 600,
+            fontSize: 14,
+            color: theme.text,
+          }}
+        >
+          {title}
+        </div>
+        {subtitle && (
+          <div
+            style={{
+              fontFamily: theme.mono,
+              fontSize: 10,
+              color: theme.textMuted,
+              marginTop: 1,
+            }}
+          >
+            {subtitle}
+          </div>
+        )}
+      </div>
+      <div style={{ display: "flex", gap: 8 }}>{actions}</div>
+    </div>
+  );
+}

package/src/client/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Clef — Secrets Manager</title>
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        background: #0a0b0d;
+        color: #e8eaf0;
+        font-family: "DM Sans", system-ui, sans-serif;
+      }
+      ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #1e2330;
+        border-radius: 3px;
+      }
+      select option {
+        background: #111318;
+      }
+      input::placeholder {
+        color: #3d4455;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/client/index.ts

@@ -0,0 +1,18 @@
+// Public API — components, design tokens, and API helpers for building custom Clef UIs.
+
+// Design system
+export { theme, ENV_COLORS, SEVERITY_META, CATEGORY_META } from "./theme";
+export type { ThemeColor } from "./theme";
+
+// Components
+export { Button } from "./components/Button";
+export { CopyButton } from "./components/CopyButton";
+export { EnvBadge } from "./components/EnvBadge";
+export { MatrixGrid } from "./components/MatrixGrid";
+export type { MatrixGridProps } from "./components/MatrixGrid";
+export { Sidebar } from "./components/Sidebar";
+export { StatusDot } from "./components/StatusDot";
+export { TopBar } from "./components/TopBar";
+
+// Types
+export type { ViewName } from "./components/Sidebar";

package/src/client/main.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { initToken } from "./api";
+
+initToken();
+
+const root = document.getElementById("root");
+if (root) {
+  ReactDOM.createRoot(root).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}

package/src/client/public/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: transparent; background-color: transparent; color-scheme: light dark;" width="11px" height="30px" viewBox="0 0 11 30" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36&quot; version=&quot;29.6.1&quot;&gt;
+  &lt;diagram name=&quot;Page-1&quot; id=&quot;wkVNsO5_5GyDIFuGEuFO&quot;&gt;
+    &lt;mxGraphModel dx=&quot;322&quot; dy=&quot;155&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;850&quot; pageHeight=&quot;1100&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;
+      &lt;root&gt;
+        &lt;mxCell id=&quot;0&quot; /&gt;
+        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;
+        &lt;mxCell id=&quot;3N7BDEdEHleT6AeHqIXh-2&quot; parent=&quot;1&quot; style=&quot;shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;editableCssRules=.*;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUuMTg1NDg3NzQ3MTkyMzgzIiBzdHJva2U9IiNGMEE1MDAiIGZpbGw9IiNGMEE1MDAiIHZlcnNpb249IjEuMSIgaGVpZ2h0PSI0MC43NjgyMTEzNjQ3NDYwOTQiIHZpZXdCb3g9IjAuMDAwMDIyODg4MTgzNTkzNzUgLTAuMDAwNDAwMDY2Mzc1NzMyNDIxOSAxNS4xODU0ODc3NDcxOTIzODMgNDAuNzY4MjExMzY0NzQ2MDk0Ij4mI3hhOzxwYXRoIGQ9Im0xMi4wNDkgMy41Mjk2YzAuMzA1IDMuMTI2My0yLjAxOSA1LjY1NjMtNC4wNzcyIDcuNzAxNC0wLjkzNDkgMC44OTctMC4xNTUgMC4xNDgtMC42NDM3IDAuNTk0LTAuMTAyMi0wLjQ3OS0wLjI5ODYtMS43MzEtMC4yODAyLTIuMTEgMC4xMzA0LTIuNjkzOSAyLjMxOTgtNi41ODc1IDQuMjM4MS04LjAyMzYgMC4zMDkgMC41NzY3IDAuNTYzIDAuNjIzMSAwLjc2MyAxLjgzODJ6bTAuNjUxIDE2LjE0MmMtMS4yMzItMC45MDYtMi44NS0xLjE0NC00LjMzMzYtMC44ODUtMC4xOTEzLTEuMjU1LTAuMzgyNy0yLjUxLTAuNTc0LTMuNzY0IDIuMzUwNi0yLjMyOSA0LjkwNjYtNS4wMzIyIDUuMDQwNi04LjUzOTQgMC4wNTktMi4yMzItMC4yNzYtNC42NzE0LTEuNjc4LTYuNDgzNi0xLjcwMDQgMC4xMjgyMy0yLjg5OTUgMi4xNTYtMy44MDE5IDMuNDE2NS0xLjQ4ODkgMi42NzA1LTEuMTQxNCA1LjkxNjktMC41NyA4Ljc5NjUtMC44MDk0IDAuOTUyLTEuOTI5NiAxLjc0My0yLjcyNzQgMi43MzQtMi4zNTYxIDIuMzA4LTQuNDA4NSA1LjQzLTQuMDA0NiA4Ljg3OCAwLjE4MzMyIDMuMzM0IDIuNTg5NCA2LjQzNCA1Ljg3MDIgNy4yMjcgMS4yNDU3IDAuMzE1IDIuNTYzOSAwLjM0NiAzLjgyNDEgMC4wOTkgMC4yMTk5IDIuMjUgMS4wMjY2IDQuNjI5IDAuMDkyNSA2LjgxMy0wLjcwMDcgMS41OTgtMi43ODc1IDMuMDA0LTQuMzMyNSAyLjE5Mi0wLjU5OTQtMC4zMTYtMC4xMTM3LTAuMDUxLTAuNDc4LTAuMjUyIDEuMDY5OC0wLjI1NyAxLjk5OTYtMS4wMzYgMi4yNi0xLjU2NSAwLjgzNzgtMS40NjQtMC4zOTk4LTMuNjM5LTIuMTU1NC0zLjM1OC0yLjI2MiAwLjA0Ni0zLjE5MDQgMy4xNC0xLjczNTYgNC42ODUgMS4zNDY4IDEuNTIgMy44MzMgMS4zMTIgNS40MzAxIDAuMzE4IDEuODEyNS0xLjE4IDIuMDM5NS0zLjU0NCAxLjgzMjUtNS41NjItMC4wNy0wLjY3OC0wLjQwMy0yLjY3LTAuNDQ0LTMuMzg3IDAuNjk3LTAuMjQ5IDAuMjA5LTAuMDU5IDEuMTkzLTAuNDQ5IDIuNjYtMS4wNTMgNC4zNTctNC4yNTkgMy41OTQtNy4xMjItMC4zMTgtMS40NjktMS4wNDQtMi45MTQtMi4zMDItMy43OTJ6bTAuNTYxIDUuNzU3YzAuMjE0IDEuOTkxLTEuMDUzIDQuMzIxLTMuMDc5IDQuOTYtMC4xMzYtMC43OTUtMC4xNzItMS4wMTEtMC4yNjI2LTEuNDc1LTAuNDgyMi0yLjQ2LTAuNzQ0LTQuOTg3LTEuMTE2LTcuNDgxIDEuNjI0Ni0wLjE2OCAzLjQ1NzYgMC41NDMgNC4wMjI2IDIuMTg0IDAuMjQ0IDAuNTc3IDAuMzQzIDEuMTk3IDAuNDM1IDEuODEyem0tNS4xNDg2IDUuMTk2Yy0yLjU0NDEgMC4xNDEtNC45OTk1LTEuNTk1LTUuNjM0My00LjA4MS0wLjc0OS0yLjE1My0wLjUyODMtNC42MyAwLjgyMDctNi41MDQgMS4xMTUxLTEuNzAyIDIuNjA2NS0zLjEwNSA0LjAyODYtNC41NDMgMC4xODMgMS4xMjcgMC4zNjYgMi4yNTQgMC41NDkgMy4zODItMi45OTA2IDAuNzgyLTUuMDA0NiA0LjcyNS0zLjIxNSA3LjQ1MSAwLjUzMjQgMC43NjQgMS45NzY1IDIuMjIzIDIuNzY1NSAxLjYzNC0xLjEwMi0wLjY4My0yLjAwMzMtMS44NTktMS44MDk1LTMuMjI3LTAuMDgyMS0xLjI4MiAxLjM2OTktMi45MTEgMi42NTEzLTMuMTk4IDAuNDM4NCAyLjg2OSAwLjk0MTMgNi4wNzMgMS4zNzk3IDguOTQzLTAuNTA1NCAwLjEtMS4wMjExIDAuMTQzLTEuNTM2IDAuMTQzeiIvPiYjeGE7PC9zdmc+;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;
+          &lt;mxGeometry height=&quot;30&quot; width=&quot;10.98&quot; x=&quot;450&quot; y=&quot;220&quot; as=&quot;geometry&quot; /&gt;
+        &lt;/mxCell&gt;
+      &lt;/root&gt;
+    &lt;/mxGraphModel&gt;
+  &lt;/diagram&gt;
+&lt;/mxfile&gt;
+"><defs></defs><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="3N7BDEdEHleT6AeHqIXh-2"><g><image x="0" y="0" width="10.98" height="30" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUuMTg1NDg3NzQ3MTkyMzgzIiBzdHJva2U9IiNGMEE1MDAiIGZpbGw9IiNGMEE1MDAiIHZlcnNpb249IjEuMSIgaGVpZ2h0PSI0MC43NjgyMTEzNjQ3NDYwOTQiIHZpZXdCb3g9IjAuMDAwMDIyODg4MTgzNTkzNzUgLTAuMDAwNDAwMDY2Mzc1NzMyNDIxOSAxNS4xODU0ODc3NDcxOTIzODMgNDAuNzY4MjExMzY0NzQ2MDk0Ij4mI3hhOzxwYXRoIGQ9Im0xMi4wNDkgMy41Mjk2YzAuMzA1IDMuMTI2My0yLjAxOSA1LjY1NjMtNC4wNzcyIDcuNzAxNC0wLjkzNDkgMC44OTctMC4xNTUgMC4xNDgtMC42NDM3IDAuNTk0LTAuMTAyMi0wLjQ3OS0wLjI5ODYtMS43MzEtMC4yODAyLTIuMTEgMC4xMzA0LTIuNjkzOSAyLjMxOTgtNi41ODc1IDQuMjM4MS04LjAyMzYgMC4zMDkgMC41NzY3IDAuNTYzIDAuNjIzMSAwLjc2MyAxLjgzODJ6bTAuNjUxIDE2LjE0MmMtMS4yMzItMC45MDYtMi44NS0xLjE0NC00LjMzMzYtMC44ODUtMC4xOTEzLTEuMjU1LTAuMzgyNy0yLjUxLTAuNTc0LTMuNzY0IDIuMzUwNi0yLjMyOSA0LjkwNjYtNS4wMzIyIDUuMDQwNi04LjUzOTQgMC4wNTktMi4yMzItMC4yNzYtNC42NzE0LTEuNjc4LTYuNDgzNi0xLjcwMDQgMC4xMjgyMy0yLjg5OTUgMi4xNTYtMy44MDE5IDMuNDE2NS0xLjQ4ODkgMi42NzA1LTEuMTQxNCA1LjkxNjktMC41NyA4Ljc5NjUtMC44MDk0IDAuOTUyLTEuOTI5NiAxLjc0My0yLjcyNzQgMi43MzQtMi4zNTYxIDIuMzA4LTQuNDA4NSA1LjQzLTQuMDA0NiA4Ljg3OCAwLjE4MzMyIDMuMzM0IDIuNTg5NCA2LjQzNCA1Ljg3MDIgNy4yMjcgMS4yNDU3IDAuMzE1IDIuNTYzOSAwLjM0NiAzLjgyNDEgMC4wOTkgMC4yMTk5IDIuMjUgMS4wMjY2IDQuNjI5IDAuMDkyNSA2LjgxMy0wLjcwMDcgMS41OTgtMi43ODc1IDMuMDA0LTQuMzMyNSAyLjE5Mi0wLjU5OTQtMC4zMTYtMC4xMTM3LTAuMDUxLTAuNDc4LTAuMjUyIDEuMDY5OC0wLjI1NyAxLjk5OTYtMS4wMzYgMi4yNi0xLjU2NSAwLjgzNzgtMS40NjQtMC4zOTk4LTMuNjM5LTIuMTU1NC0zLjM1OC0yLjI2MiAwLjA0Ni0zLjE5MDQgMy4xNC0xLjczNTYgNC42ODUgMS4zNDY4IDEuNTIgMy44MzMgMS4zMTIgNS40MzAxIDAuMzE4IDEuODEyNS0xLjE4IDIuMDM5NS0zLjU0NCAxLjgzMjUtNS41NjItMC4wNy0wLjY3OC0wLjQwMy0yLjY3LTAuNDQ0LTMuMzg3IDAuNjk3LTAuMjQ5IDAuMjA5LTAuMDU5IDEuMTkzLTAuNDQ5IDIuNjYtMS4wNTMgNC4zNTctNC4yNTkgMy41OTQtNy4xMjItMC4zMTgtMS40NjktMS4wNDQtMi45MTQtMi4zMDItMy43OTJ6bTAuNTYxIDUuNzU3YzAuMjE0IDEuOTkxLTEuMDUzIDQuMzIxLTMuMDc5IDQuOTYtMC4xMzYtMC43OTUtMC4xNzItMS4wMTEtMC4yNjI2LTEuNDc1LTAuNDgyMi0yLjQ2LTAuNzQ0LTQuOTg3LTEuMTE2LTcuNDgxIDEuNjI0Ni0wLjE2OCAzLjQ1NzYgMC41NDMgNC4wMjI2IDIuMTg0IDAuMjQ0IDAuNTc3IDAuMzQzIDEuMTk3IDAuNDM1IDEuODEyem0tNS4xNDg2IDUuMTk2Yy0yLjU0NDEgMC4xNDEtNC45OTk1LTEuNTk1LTUuNjM0My00LjA4MS0wLjc0OS0yLjE1My0wLjUyODMtNC42MyAwLjgyMDctNi41MDQgMS4xMTUxLTEuNzAyIDIuNjA2NS0zLjEwNSA0LjAyODYtNC41NDMgMC4xODMgMS4xMjcgMC4zNjYgMi4yNTQgMC41NDkgMy4zODItMi45OTA2IDAuNzgyLTUuMDA0NiA0LjcyNS0zLjIxNSA3LjQ1MSAwLjUzMjQgMC43NjQgMS45NzY1IDIuMjIzIDIuNzY1NSAxLjYzNC0xLjEwMi0wLjY4My0yLjAwMzMtMS44NTktMS44MDk1LTMuMjI3LTAuMDgyMS0xLjI4MiAxLjM2OTktMi45MTEgMi42NTEzLTMuMTk4IDAuNDM4NCAyLjg2OSAwLjk0MTMgNi4wNzMgMS4zNzk3IDguOTQzLTAuNTA1NCAwLjEtMS4wMjExIDAuMTQzLTEuNTM2IDAuMTQzeiIvPiYjeGE7PC9zdmc+" preserveAspectRatio="none"></image></g></g></g></g></g><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>