@invect/ui 0.0.1

package/src/app.css

@@ -0,0 +1,560 @@
+@import 'tw-animate-css';
+
+/* Import React Flow styles globally (needed for proper rendering) */
+@import '@xyflow/react/dist/style.css';
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+
+/* Scan plugin source files so their Tailwind classes are included in the pre-built CSS */
+@source "../../plugins/auth/src/**/*.{ts,tsx}";
+@source "../../plugins/rbac/src/**/*.{ts,tsx}";
+@source "../../plugins/webhooks/src/**/*.{ts,tsx}";
+
+/* Define layers for Tailwind v4 scoping */
+@layer theme, base, components, utilities;
+
+@font-face {
+  font-family: 'Iosevka';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./assets/fonts/iosevka-latin-400-normal.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('./assets/fonts/geist-cyrillic-wght-normal.woff2') format('woff2-variations');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('./assets/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('./assets/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* CSS @property for animated border gradient angle */
+@property --border-angle {
+  inherits: false;
+  initial-value: 0deg;
+  syntax: '<angle>';
+}
+
+/* Animated border for running nodes - uses conic gradient with CSS @property */
+.node-running-border {
+  background:
+    linear-gradient(var(--card, #ffffff), var(--card, #ffffff)) padding-box,
+    conic-gradient(
+        from var(--border-angle),
+        rgba(148, 163, 184, 0.48) 80%,
+        var(--primary, #5b5bd6) 86%,
+        color-mix(in srgb, var(--primary, #5b5bd6) 50%, white) 90%,
+        var(--primary, #5b5bd6) 94%,
+        rgba(148, 163, 184, 0.48)
+      )
+      border-box;
+  border: 2px solid transparent;
+}
+
+/* Animation keyframes for the border angle */
+@keyframes border-spin {
+  to {
+    --border-angle: 360deg;
+  }
+}
+
+.animate-node-border {
+  animation: border-spin 3s linear infinite;
+}
+
+/* Custom dark mode variant scoped to .invect container */
+@custom-variant dark (&:is(.dark *));
+
+/* Scope all utilities to .invect container */
+@layer utilities {
+  .invect {
+    @tailwind utilities;
+
+    /* Theme CSS variables - light mode */
+    --imp-background: #fafafa;
+    --imp-canvas-background: #f8f9fb;
+    --imp-foreground: #1a1a2e;
+    --imp-card: #ffffff;
+    --imp-shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.06);
+    --imp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --imp-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+    --imp-shadow-floating: 0 16px 48px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
+    --imp-card-foreground: #1a1a2e;
+    --imp-popover: #ffffff;
+    --imp-popover-foreground: #1a1a2e;
+    --imp-primary: #5b5bd6;
+    --imp-primary-foreground: #ffffff;
+    --imp-secondary: #f0f0f8;
+    --imp-secondary-foreground: #1a1a2e;
+    --imp-muted: #f4f4f8;
+    --imp-muted-foreground: #6e6e80;
+    --imp-accent: #ededf7;
+    --imp-accent-foreground: #1a1a2e;
+    --imp-destructive: #e5484d;
+    --imp-destructive-foreground: #ffffff;
+    --imp-border: #e0e0ec;
+    --imp-input: #dcdce4;
+    --imp-ring: #5b5bd6;
+    --imp-sidebar: #fafafe;
+    --imp-sidebar-foreground: #1a1a2e;
+    --imp-sidebar-primary: #1a1a2e;
+    --imp-sidebar-primary-foreground: #ffffff;
+    --imp-sidebar-accent: #ededf7;
+    --imp-sidebar-accent-foreground: #5b5bd6;
+    --imp-sidebar-border: #e0e0ec;
+    --imp-sidebar-ring: #5b5bd6;
+    --background: #ffffff;
+    --canvas-background: #f8f9fb;
+    --foreground: #1a1a2e;
+    --card: #ffffff;
+    --card-foreground: #1a1a2e;
+    --popover: #ffffff;
+    --popover-foreground: #1a1a2e;
+    --primary: #5b5bd6;
+    --primary-foreground: #ffffff;
+    --secondary: #f0f0f8;
+    --secondary-foreground: #1a1a2e;
+    --muted: #f4f4f8;
+    --muted-foreground: #6e6e80;
+    --accent: #ededf7;
+    --accent-foreground: #1a1a2e;
+    --destructive: #e5484d;
+    --destructive-foreground: #ffffff;
+    --border: #e0e0ec;
+    --input: #dcdce4;
+    --ring: #5b5bd6;
+    --chart-1: #5b5bd6;
+    --chart-2: #7c7ce0;
+    --chart-3: #3e63dd;
+    --chart-4: #30a46c;
+    --chart-5: #e5484d;
+    --radius: 0.5rem;
+    --sidebar: #fafafe;
+    --sidebar-foreground: #1a1a2e;
+    --sidebar-primary: #1a1a2e;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #ededf7;
+    --sidebar-accent-foreground: #5b5bd6;
+    --sidebar-border: #e0e0ec;
+    --sidebar-ring: #5b5bd6;
+    --shadow-x: 0px;
+    --shadow-y: 1px;
+    --shadow-blur: 3px;
+    --shadow-spread: 0px;
+    --shadow-opacity: 0.08;
+    --shadow-color: #1a1a2e;
+    /* Edge selection colors - light mode */
+    --edge-selected-stroke: #5b5bd6;
+    /* Node selection colors - light mode */
+    --node-selected-border: #60a5fa;
+    --node-hover-bg: #f7f7fd;
+    /* Semantic colors */
+    --imp-success: #30a46c;
+    --imp-success-foreground: #ffffff;
+    --imp-success-muted: #d4f4e2;
+    --imp-warning: #e5a100;
+    --imp-warning-foreground: #ffffff;
+    --imp-warning-muted: #fef3cd;
+    --imp-info: #3b82f6;
+    --imp-info-foreground: #ffffff;
+    --imp-info-muted: #dbeafe;
+
+    --background: var(--imp-background);
+    --canvas-background: var(--imp-canvas-background);
+    --foreground: var(--imp-foreground);
+    --card: var(--imp-card);
+    --card-foreground: var(--imp-card-foreground);
+    --popover: var(--imp-popover);
+    --popover-foreground: var(--imp-popover-foreground);
+    --primary: var(--imp-primary);
+    --primary-foreground: var(--imp-primary-foreground);
+    --secondary: var(--imp-secondary);
+    --secondary-foreground: var(--imp-secondary-foreground);
+    --muted: var(--imp-muted);
+    --muted-foreground: var(--imp-muted-foreground);
+    --accent: var(--imp-accent);
+    --accent-foreground: var(--imp-accent-foreground);
+    --destructive: var(--imp-destructive);
+    --destructive-foreground: var(--imp-destructive-foreground);
+    --border: var(--imp-border);
+    --input: var(--imp-input);
+    --ring: var(--imp-ring);
+    --sidebar: var(--imp-sidebar);
+    --sidebar-foreground: var(--imp-sidebar-foreground);
+    --sidebar-primary: var(--imp-sidebar-primary);
+    --sidebar-primary-foreground: var(--imp-sidebar-primary-foreground);
+    --sidebar-accent: var(--imp-sidebar-accent);
+    --sidebar-accent-foreground: var(--imp-sidebar-accent-foreground);
+    --sidebar-border: var(--imp-sidebar-border);
+    --sidebar-ring: var(--imp-sidebar-ring);
+
+    /* Apply Geist Sans for UI text within .invect and reserve Iosevka for code-oriented surfaces. */
+    font-family: 'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif;
+
+    @theme inline {
+      --font-sans: 'Geist Variable', 'Geist', ui-sans-serif, system-ui, sans-serif;
+      --font-mono:
+        'Iosevka', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+        monospace;
+      --color-background: var(--background);
+      --color-foreground: var(--foreground);
+      --color-card: var(--card);
+      --color-card-foreground: var(--card-foreground);
+      --color-popover: var(--popover);
+      --color-popover-foreground: var(--popover-foreground);
+      --color-primary: var(--primary);
+      --color-primary-foreground: var(--primary-foreground);
+      --color-secondary: var(--secondary);
+      --color-secondary-foreground: var(--secondary-foreground);
+      --color-muted: var(--muted);
+      --color-muted-foreground: var(--muted-foreground);
+      --color-accent: var(--accent);
+      --color-accent-foreground: var(--accent-foreground);
+      --color-destructive: var(--destructive);
+      --color-destructive-foreground: var(--destructive-foreground);
+      --color-border: var(--border);
+      --color-input: var(--input);
+      --color-ring: var(--ring);
+      --color-chart-1: var(--chart-1);
+      --color-chart-2: var(--chart-2);
+      --color-chart-3: var(--chart-3);
+      --color-chart-4: var(--chart-4);
+      --color-chart-5: var(--chart-5);
+      --radius-sm: calc(var(--radius) - 4px);
+      --radius-md: calc(var(--radius) - 2px);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) + 4px);
+      --color-sidebar: var(--sidebar);
+      --color-sidebar-foreground: var(--sidebar-foreground);
+      --color-sidebar-primary: var(--sidebar-primary);
+      --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+      --color-sidebar-accent: var(--sidebar-accent);
+      --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+      --color-sidebar-border: var(--sidebar-border);
+      --color-sidebar-ring: var(--sidebar-ring);
+      --color-success: var(--imp-success);
+      --color-success-foreground: var(--imp-success-foreground);
+      --color-success-muted: var(--imp-success-muted);
+      --color-warning: var(--imp-warning);
+      --color-warning-foreground: var(--imp-warning-foreground);
+      --color-warning-muted: var(--imp-warning-muted);
+      --color-info: var(--imp-info);
+      --color-info-foreground: var(--imp-info-foreground);
+      --color-info-muted: var(--imp-info-muted);
+      --font-serif:
+        'Geist Variable', 'Geist', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+      /* computed shadow variables below - do not modify */
+      --shadow-2xs: var(--shadow-x) var(--shadow-y)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5)
+        var(--shadow-spread)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3)
+        calc(var(--shadow-spread) - 1px)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5)
+        calc(var(--shadow-spread) - 3px)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7)
+        calc(var(--shadow-spread) - 5px)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
+      --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8)
+        calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px)
+        color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);
+      --shadow: var(--shadow-md);
+      --color-shadow-color: var(--shadow-color);
+      --shadow-opacity: var(--shadow-opacity);
+      --shadow-spread: var(--shadow-spread);
+      --shadow-blur: var(--shadow-blur);
+      --shadow-y: var(--shadow-y);
+      --shadow-x: var(--shadow-x);
+      --animate-accordion-down: accordion-down 0.2s ease-out;
+      --animate-accordion-up: accordion-up 0.2s ease-out;
+    }
+
+    @keyframes accordion-down {
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--radix-accordion-content-height);
+      }
+    }
+    @keyframes accordion-up {
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+      to {
+        height: 0;
+      }
+    }
+
+    /* Dark mode design */
+    &.dark {
+      --imp-background: #111114;
+      --imp-canvas-background: #17171c;
+      --imp-foreground: #ececf0;
+      --imp-card: #1e1e24;
+      --imp-card-foreground: #ececf0;
+      --imp-popover: #222228;
+      --imp-popover-foreground: #ececf0;
+      --imp-primary: #7b7bde;
+      --imp-primary-foreground: #ffffff;
+      --imp-secondary: #22222c;
+      --imp-secondary-foreground: #ececf0;
+      --imp-muted: #22222c;
+      --imp-muted-foreground: #8b8b9e;
+      --imp-accent: #2c2c3a;
+      --imp-accent-foreground: #ececf0;
+      --imp-destructive: #e5484d;
+      --imp-destructive-foreground: #ffffff;
+      --imp-border: #2e2e3c;
+      --imp-input: #3a3a4a;
+      --imp-ring: #7b7bde;
+      --chart-1: #7b7bde;
+      --chart-2: #9b9be8;
+      --chart-3: #5a7de8;
+      --chart-4: #3dd68c;
+      --chart-5: #ff6369;
+      --imp-sidebar: #111114;
+      --imp-sidebar-foreground: #ececf0;
+      --imp-sidebar-primary: #ececf0;
+      --imp-sidebar-primary-foreground: #131316;
+      --imp-sidebar-accent: #26263a;
+      --imp-sidebar-accent-foreground: #7b7bde;
+      --imp-sidebar-border: #2e2e3c;
+      --imp-sidebar-ring: #9b9bb8;
+      --shadow-x: 0px;
+      --shadow-y: 1px;
+      --shadow-blur: 3px;
+      --shadow-spread: 0px;
+      --shadow-opacity: 0.2;
+      --shadow-color: #000000;
+      --imp-shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.2);
+      --imp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
+      --imp-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
+      --imp-shadow-floating:
+        0 16px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+      /* Edge selection colors - dark mode */
+      --edge-selected-stroke: #7b7bde;
+      /* Node selection colors - dark mode */
+      --node-selected-border: #60a5fa;
+      --node-hover-bg: rgba(30, 30, 36, 0.8);
+      /* Semantic colors - dark mode */
+      --imp-success: #3dd68c;
+      --imp-success-foreground: #0d2118;
+      --imp-success-muted: #1a3a2a;
+      --imp-warning: #f5c518;
+      --imp-warning-foreground: #1a1500;
+      --imp-warning-muted: #3a3000;
+      --imp-info: #60a5fa;
+      --imp-info-foreground: #0c1929;
+      --imp-info-muted: #1e3a5f;
+    }
+
+    /* Base styles scoped to .invect */
+    * {
+      @apply border-border outline-ring/50;
+    }
+
+    /* Explicitly set bg & text on the .invect container so the host app's
+       body/root colours never bleed through. This makes invect fully self-contained. */
+    background-color: var(--background);
+    color: var(--foreground);
+
+    .bg-imp-background {
+      background-color: var(--imp-background) !important;
+    }
+
+    .text-imp-foreground {
+      color: var(--imp-foreground) !important;
+    }
+
+    .bg-imp-card {
+      background-color: var(--imp-card) !important;
+    }
+
+    .bg-imp-sidebar {
+      background-color: var(--imp-sidebar) !important;
+    }
+
+    .text-imp-sidebar-foreground {
+      color: var(--imp-sidebar-foreground) !important;
+    }
+
+    .border-imp-border {
+      border-color: var(--imp-border) !important;
+    }
+
+    &.imp-shell,
+    .imp-shell {
+      background-color: var(--imp-background) !important;
+      color: var(--imp-foreground) !important;
+    }
+
+    .imp-page {
+      background-color: var(--imp-background) !important;
+    }
+
+    /* Tree view: hover highlight for all items */
+    .imp-tree-item-hover:hover {
+      background-color: var(--imp-muted);
+      border-radius: 0.375rem;
+    }
+
+    .imp-node-config-form [data-slot='input'],
+    .imp-node-config-form [data-slot='textarea'],
+    .imp-node-config-form [data-slot='select-trigger'],
+    .imp-node-config-form [role='combobox'],
+    .imp-node-config-form .cm-editor,
+    .imp-node-config-form .cm-scroller,
+    .imp-node-config-form .cm-content {
+      font-family: var(--font-mono);
+    }
+
+    .imp-sidebar-shell {
+      background-color: var(--imp-sidebar) !important;
+      color: var(--imp-sidebar-foreground) !important;
+    }
+
+    /* React Flow styles */
+    .react-flow,
+    .react-flow.dark,
+    .react-flow.light {
+      background-color: var(--canvas-background) !important;
+    }
+
+    .react-flow__node {
+      font-family: var(--font-sans);
+    }
+
+    /* Node hover and selection states */
+    .node-hover-bg:hover {
+      background-color: var(--node-hover-bg) !important;
+    }
+
+    .node-selected {
+      border-color: var(--node-selected-border) !important;
+    }
+
+    .react-flow__edge-path {
+      stroke: var(--muted-foreground);
+      stroke-width: 2.5;
+    }
+
+    .react-flow__edge.selected .react-flow__edge-path {
+      stroke: var(--edge-selected-stroke, #3b82f6);
+      fill: var(--edge-selected-stroke, #3b82f6);
+      stroke-width: 3;
+    }
+
+    .react-flow__handle {
+      box-shadow: none;
+    }
+
+    .react-flow__handle:hover {
+      box-shadow: none;
+    }
+
+    .react-flow__controls {
+      background: var(--background);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .react-flow__controls-button {
+      background: transparent;
+      border-bottom: 1px solid var(--border);
+      color: var(--foreground);
+      fill: var(--foreground);
+      transition: all 0.2s ease;
+    }
+
+    .react-flow__controls-button:hover {
+      background: var(--muted);
+    }
+
+    .react-flow__controls-button:last-child {
+      border-bottom: none;
+    }
+
+    .react-flow__controls-button svg {
+      fill: var(--foreground);
+    }
+
+    .react-flow__controls-button svg path {
+      fill: var(--foreground);
+    }
+
+    .react-flow__minimap {
+      background: var(--background);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .react-flow__minimap-mask {
+      fill: var(--muted);
+    }
+
+    .react-flow__minimap-node {
+      fill: var(--primary);
+      stroke: var(--border);
+    }
+
+    .react-flow__background {
+      background-color: var(--canvas-background) !important;
+    }
+
+    .react-flow__background pattern line {
+      stroke: var(--border);
+    }
+
+    .react-flow__background pattern circle {
+      fill: var(--border);
+    }
+
+    /* Interactive elements */
+    button,
+    a,
+    input,
+    select,
+    textarea {
+      transition: all 0.2s ease;
+    }
+
+    /* Focus states */
+    *:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+    }
+  }
+}

package/src/assets/invect-branding.ts

@@ -0,0 +1,51 @@
+export const INVECT_LOADER_DARK_SVG = `<svg width="109" height="209" viewBox="0 0 109 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M54.5007 4.5L104.501 18.7857L54.5007 33.0714L4.50073 18.7857L54.5007 4.5Z" fill="#000000" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#000000;transparent;#000000" dur="2.4s" begin="0s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M31.7735 104.5L4.50073 18.7859L54.5007 33.0716L31.7735 104.5Z" fill="#000000" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#000000;transparent;#000000" dur="2.4s" begin="0.3s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M4.50073 190.214L54.5007 33.0716L104.501 18.7859L4.50073 190.214Z" fill="#000000" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#000000;transparent;#000000" dur="2.4s" begin="0.6s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 18.7859L4.50073 190.214L54.5007 204.5Z" fill="#000000" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#000000;transparent;#000000" dur="2.4s" begin="0.9s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 190.214L54.5007 204.5Z" fill="#000000" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#000000;transparent;#000000" dur="2.4s" begin="1.2s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+</svg>`;
+
+export const INVECT_LOADER_LIGHT_SVG = `<svg width="109" height="209" viewBox="0 0 109 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M54.5007 4.5L104.501 18.7857L54.5007 33.0714L4.50073 18.7857L54.5007 4.5Z" fill="#FFFFFF" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#FFFFFF;transparent;#FFFFFF" dur="2.4s" begin="0s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M31.7735 104.5L4.50073 18.7859L54.5007 33.0716L31.7735 104.5Z" fill="#FFFFFF" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#FFFFFF;transparent;#FFFFFF" dur="2.4s" begin="0.3s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M4.50073 190.214L54.5007 33.0716L104.501 18.7859L4.50073 190.214Z" fill="#FFFFFF" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#FFFFFF;transparent;#FFFFFF" dur="2.4s" begin="0.6s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 18.7859L4.50073 190.214L54.5007 204.5Z" fill="#FFFFFF" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#FFFFFF;transparent;#FFFFFF" dur="2.4s" begin="0.9s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 190.214L54.5007 204.5Z" fill="#FFFFFF" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+		<animate attributeName="fill" values="#FFFFFF;transparent;#FFFFFF" dur="2.4s" begin="1.2s" repeatCount="indefinite" calcMode="spline" keyTimes="0;0.5;1" keySplines="0.45 0 0.2 1;0.45 0 0.2 1"/>
+	</path>
+</svg>`;
+
+export const INVECT_ICON_DARK_SVG = `<svg width="109" height="209" viewBox="0 0 109 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M54.5007 4.5L104.501 18.7857L54.5007 33.0714L4.50073 18.7857L54.5007 4.5Z" fill="none" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M31.7735 104.5L4.50073 18.7859L54.5007 33.0716L31.7735 104.5Z" fill="none" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M4.50073 190.214L54.5007 33.0716L104.501 18.7859L4.50073 190.214Z" fill="none" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 18.7859L4.50073 190.214L54.5007 204.5Z" fill="none" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 190.214L54.5007 204.5Z" fill="none" stroke="white" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+
+export const INVECT_ICON_LIGHT_SVG = `<svg width="109" height="209" viewBox="0 0 109 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M54.5007 4.5L104.501 18.7857L54.5007 33.0714L4.50073 18.7857L54.5007 4.5Z" fill="none" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M31.7735 104.5L4.50073 18.7859L54.5007 33.0716L31.7735 104.5Z" fill="none" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M4.50073 190.214L54.5007 33.0716L104.501 18.7859L4.50073 190.214Z" fill="none" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 18.7859L4.50073 190.214L54.5007 204.5Z" fill="none" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M54.5007 204.5L81.4238 104.5L104.501 190.214L54.5007 204.5Z" fill="none" stroke="#000000" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/src/assets/provider-icons/anthropic.svg

@@ -0,0 +1 @@
+<svg fill="#191919" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>

package/src/assets/provider-icons/anthropic_light.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>

package/src/assets/provider-icons/github.svg

@@ -0,0 +1 @@
+<svg fill="#181717" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

package/src/assets/provider-icons/github_light.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

package/src/assets/provider-icons/gmail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48"><path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"/><path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"/><polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/><path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z"/><path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z"/></svg>

package/src/assets/provider-icons/google_calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48"><rect x="13" y="13" fill="#fff"/><polygon fill="#1e88e5" points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616"/><path fill="#1e88e5" d="M22.943,23.745c0.625-0.574,1.013-1.37,1.013-2.249c0-1.747-1.533-3.168-3.417-3.168 c-1.602,0-2.972,1.009-3.33,2.453l1.657,0.421c0.165-0.664,0.868-1.146,1.673-1.146c0.942,0,1.709,0.646,1.709,1.44 c0,0.794-0.767,1.44-1.709,1.44h-0.997v1.728h0.997c1.081,0,1.993,0.751,1.993,1.64c0,0.904-0.866,1.64-1.931,1.64 c-0.962,0-1.784-0.61-1.914-1.418L17,26.802c0.262,1.636,1.81,2.87,3.6,2.87c2.007,0,3.64-1.511,3.64-3.368 C24.24,25.281,23.736,24.363,22.943,23.745z"/><polygon fill="#fbc02d" points="34,42 14,42 13,38 14,34 34,34 35,38"/><polygon fill="#4caf50" points="38,35 42,34 42,14 38,13 34,14 34,34"/><path fill="#1e88e5" d="M34,14l1-4l-1-4H9C7.343,6,6,7.343,6,9v25l4,1l4-1V14H34z"/><polygon fill="#e53935" points="34,34 34,42 42,34"/><path fill="#1565c0" d="M39,6h-5v8h8V9C42,7.343,40.657,6,39,6z"/><path fill="#1565c0" d="M9,42h5v-8H6v5C6,40.657,7.343,42,9,42z"/></svg>

package/src/assets/provider-icons/google_docs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="pg10I3OeSC0NOv22QZ6aWa" x1="-209.942" x2="-179.36" y1="-3.055" y2="27.526" gradientTransform="translate(208.979 6.006)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#55adfd"/><stop offset="1" stop-color="#438ffd"/></linearGradient><path fill="url(#pg10I3OeSC0NOv22QZ6aWa)" d="M39.001,13.999v27c0,1.105-0.896,2-2,2h-26	c-1.105,0-2-0.895-2-2v-34c0-1.104,0.895-2,2-2h19l2,7L39.001,13.999z"/><path fill="#fff" fill-rule="evenodd" d="M15.999,18.001v2.999	h17.002v-2.999H15.999z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M16.001,24.001v2.999	h17.002v-2.999H16.001z" clip-rule="evenodd"/><path fill="#fff" fill-rule="evenodd" d="M15.999,30.001v2.999	h12.001v-2.999H15.999z" clip-rule="evenodd"/><linearGradient id="pg10I3OeSC0NOv22QZ6aWb" x1="-197.862" x2="-203.384" y1="-4.632" y2=".89" gradientTransform="translate(234.385 12.109)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#427fdb"/><stop offset="1" stop-color="#0c52bb"/></linearGradient><path fill="url(#pg10I3OeSC0NOv22QZ6aWb)" d="M30.001,13.999l0.001-9l8.999,8.999L30.001,13.999z"/></svg>

package/src/assets/provider-icons/google_drive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48"><path fill="#1e88e5" d="M38.59,39c-0.535,0.93-0.298,1.68-1.195,2.197C36.498,41.715,35.465,42,34.39,42H13.61 c-1.074,0-2.106-0.285-3.004-0.802C9.708,40.681,9.945,39.93,9.41,39l7.67-9h13.84L38.59,39z"/><path fill="#fbc02d" d="M27.463,6.999c1.073-0.002,2.104-0.716,3.001-0.198c0.897,0.519,1.66,1.27,2.197,2.201l10.39,17.996 c0.537,0.93,0.807,1.967,0.808,3.002c0.001,1.037-1.267,2.073-1.806,3.001l-11.127-3.005l-6.924-11.993L27.463,6.999z"/><path fill="#e53935" d="M43.86,30c0,1.04-0.27,2.07-0.81,3l-3.67,6.35c-0.53,0.78-1.21,1.4-1.99,1.85L30.92,30H43.86z"/><path fill="#4caf50" d="M5.947,33.001c-0.538-0.928-1.806-1.964-1.806-3c0.001-1.036,0.27-2.073,0.808-3.004l10.39-17.996 c0.537-0.93,1.3-1.682,2.196-2.2c0.897-0.519,1.929,0.195,3.002,0.197l3.459,11.009l-6.922,11.989L5.947,33.001z"/><path fill="#1565c0" d="M17.08,30l-6.47,11.2c-0.78-0.45-1.46-1.07-1.99-1.85L4.95,33c-0.54-0.93-0.81-1.96-0.81-3H17.08z"/><path fill="#2e7d32" d="M30.46,6.8L24,18L17.53,6.8c0.78-0.45,1.66-0.73,2.6-0.79L27.46,6C28.54,6,29.57,6.28,30.46,6.8z"/></svg>

package/src/assets/provider-icons/google_sheets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48"><path fill="#43a047" d="M37,45H11c-1.657,0-3-1.343-3-3V6c0-1.657,1.343-3,3-3h19l10,10v29C40,43.657,38.657,45,37,45z"/><path fill="#c8e6c9" d="M40 13L30 13 30 3z"/><path fill="#2e7d32" d="M30 13L40 23 40 13z"/><path fill="#e8f5e9" d="M31,23H17h-2v2v2v2v2v2v2v2h18v-2v-2v-2v-2v-2v-2v-2H31z M17,25h4v2h-4V25z M17,29h4v2h-4V29z M17,33h4v2h-4V33z M31,35h-8v-2h8V35z M31,31h-8v-2h8V31z M31,27h-8v-2h8V27z"/></svg>