@invect/ui 0.0.1

package/src/components/nodes/UniversalNode.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { memo } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import { Card } from '../ui/card';
+import { useNodeRegistry } from '../../contexts/NodeRegistryContext';
+import { GraphNodeType, NodeExecutionStatus } from '@invect/core/types';
+import type { NodeDefinition, NodeHandleDefinition } from '../../types/node-definition.types';
+import { cn } from '../../lib/utils';
+import { Loader2 } from 'lucide-react';
+import { ProviderIcon } from '../shared/ProviderIcon';
+
+// Stable style objects for Handles - avoids creating new objects on every render
+const INPUT_HANDLE_STYLE = { top: '50%', transform: 'translate(-54%, -50%)' } as const;
+const OUTPUT_HANDLE_STYLE_SINGLE = { top: '50%', transform: 'translate(54%, -50%)' } as const;
+const OUTPUT_HANDLE_INNER_STYLE = { transform: 'translateX(54%)' } as const;
+
+// Invisible handle styles for loading placeholder
+const HIDDEN_HANDLE_STYLE_TRUE = {
+  top: '30%',
+  transform: 'translate(54%, -50%)',
+  opacity: 0,
+  width: 1,
+  height: 1,
+} as const;
+const HIDDEN_HANDLE_STYLE_FALSE = {
+  top: '70%',
+  transform: 'translate(54%, -50%)',
+  opacity: 0,
+  width: 1,
+  height: 1,
+} as const;
+
+const HANDLE_CLASS =
+  '!bg-background !w-4 !h-4 !border-2 !border-muted-foreground !rounded-full !transition-all hover:!w-[18px] hover:!h-[18px] hover:!border-primary !shadow-none !ring-0';
+
+// Height calculation for nodes with >2 outputs (e.g. switch with multiple cases)
+const MULTI_OUTPUT_PADDING = 16; // px padding above first handle and below last
+const MULTI_OUTPUT_HANDLE_SPACING = 24; // px between each output handle
+
+/** Compute node height based on output count. Must match react-flow-renderer.service.ts */
+function getNodeHeight(outputCount: number): number {
+  if (outputCount <= 2) {
+    return 60;
+  }
+  return MULTI_OUTPUT_PADDING * 2 + (outputCount - 1) * MULTI_OUTPUT_HANDLE_SPACING;
+}
+
+const DEFAULT_CATEGORY_COLOR = 'bg-muted text-muted-foreground';
+
+function getProviderAccentColor(providerId?: string): string {
+  switch (providerId) {
+    case 'core':
+      return 'border-l-blue-500';
+    case 'http':
+      return 'border-l-blue-500';
+    case 'triggers':
+      return 'border-l-emerald-500';
+    case 'gmail':
+    case 'google-drive':
+    case 'google-docs':
+    case 'google-sheets':
+    case 'google-calendar':
+      return 'border-l-amber-500';
+    case 'slack':
+      return 'border-l-purple-500';
+    case 'github':
+      return 'border-l-gray-500';
+    case 'linear':
+      return 'border-l-violet-500';
+    case 'microsoft':
+      return 'border-l-sky-500';
+    case 'postgres':
+      return 'border-l-teal-500';
+    default:
+      return 'border-l-muted-foreground';
+  }
+}
+
+interface UniversalNodeData extends Record<string, unknown> {
+  type?: string;
+  display_name?: string;
+  executionStatus?: NodeExecutionStatus;
+  params?: {
+    [key: string]: unknown;
+  };
+}
+
+/**
+ * Resolve output handles for a node. For nodes with `dynamicOutputs`, handles
+ * are derived from the node's params (e.g. switch cases) instead of the static
+ * definition. Falls back to the definition's `outputs` array.
+ */
+function resolveOutputHandles(
+  definition: NodeDefinition,
+  params: Record<string, unknown> | undefined,
+): NodeHandleDefinition[] {
+  if (!definition.dynamicOutputs) {
+    return definition.outputs ?? [];
+  }
+
+  // Switch node: derive handles from params.cases + default
+  if (definition.type === 'core.switch') {
+    const cases = (params?.cases as Array<{ slug: string; label: string }>) ?? [];
+    return [
+      ...cases.map((c) => ({ id: c.slug, label: c.label, type: 'any' })),
+      { id: 'default', label: 'Default', type: 'any' },
+    ];
+  }
+
+  return definition.outputs ?? [];
+}
+
+/**
+ * Loading placeholder shown while node definition is being fetched.
+ * Renders a minimal node card with a spinner.
+ * IMPORTANT: Must render Handle components to prevent React Flow edge errors.
+ * The handles are invisible but allow edges to connect while loading.
+ * We render ALL possible handle IDs that any node type might use.
+ */
+const NodeLoadingPlaceholder = memo(
+  ({ data, selected }: { data: UniversalNodeData; selected: boolean }) => {
+    const label = data.display_name || data.type || 'Loading...';
+    const nodeType = data.type || 'Loading';
+
+    // Compute dynamic height for switch nodes
+    const switchOutputCount =
+      data.type === 'core.switch' && Array.isArray(data.params?.cases)
+        ? (data.params.cases as unknown[]).length + 1
+        : 0;
+    const placeholderHeight = switchOutputCount > 2 ? getNodeHeight(switchOutputCount) : 60;
+
+    return (
+      <Card
+        className={`relative w-[240px] flex-row py-0 items-center cursor-move transition-colors bg-card hover:bg-card/80 ${
+          selected
+            ? 'border-blue-500 dark:border-blue-400 shadow-lg shadow-blue-500/25 dark:shadow-blue-400/30'
+            : 'border-sidebar-ring hover:border-muted-foreground'
+        }`}
+        style={{ height: placeholderHeight }}
+      >
+        {/* Input handle */}
+        <Handle
+          id="input"
+          type="target"
+          position={Position.Left}
+          style={INPUT_HANDLE_STYLE}
+          className={HANDLE_CLASS}
+        />
+
+        <div className="flex items-center gap-3 px-3 py-0 overflow-hidden">
+          <div className="flex items-center justify-center w-10 h-10 shrink-0 rounded-xl bg-muted">
+            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-semibold tracking-tight truncate text-card-foreground">
+              {label}
+            </div>
+            <div className="font-mono text-xs tracking-tight truncate text-muted-foreground">
+              {nodeType}
+            </div>
+          </div>
+        </div>
+
+        {/* Standard output handle - visible */}
+        <Handle
+          id="output"
+          type="source"
+          position={Position.Right}
+          style={OUTPUT_HANDLE_STYLE_SINGLE}
+          className={HANDLE_CLASS}
+        />
+
+        {/* IF_ELSE node handles - hidden but functional */}
+        <Handle
+          id="true_output"
+          type="source"
+          position={Position.Right}
+          style={HIDDEN_HANDLE_STYLE_TRUE}
+        />
+        <Handle
+          id="false_output"
+          type="source"
+          position={Position.Right}
+          style={HIDDEN_HANDLE_STYLE_FALSE}
+        />
+
+        {/* Switch node handles - derived from params.cases */}
+        {data.type === 'core.switch' &&
+          Array.isArray(data.params?.cases) &&
+          (data.params.cases as Array<{ slug: string }>).map((c) => (
+            <Handle
+              key={c.slug}
+              id={c.slug}
+              type="source"
+              position={Position.Right}
+              style={{ ...HIDDEN_HANDLE_STYLE_TRUE, opacity: 0, width: 1, height: 1 }}
+            />
+          ))}
+        {data.type === 'core.switch' && (
+          <Handle
+            id="default"
+            type="source"
+            position={Position.Right}
+            style={{ ...HIDDEN_HANDLE_STYLE_FALSE, opacity: 0, width: 1, height: 1 }}
+          />
+        )}
+      </Card>
+    );
+  },
+);
+
+NodeLoadingPlaceholder.displayName = 'NodeLoadingPlaceholder';
+
+export const UniversalNode = memo(({ data, selected }: NodeProps) => {
+  const typedData = data as UniversalNodeData;
+  const nodeType = typedData.type || GraphNodeType.TEMPLATE_STRING;
+
+  const { getNodeDefinition, isLoading: registryLoading } = useNodeRegistry();
+  const definition = getNodeDefinition(nodeType);
+
+  // Show loading placeholder if registry is still loading or definition not found
+  if (registryLoading || !definition) {
+    return <NodeLoadingPlaceholder data={typedData} selected={selected ?? false} />;
+  }
+
+  // Get display name from node data or fall back to definition label
+  const label = typedData.display_name || definition.label || 'Unknown Node';
+  const providerId = definition.provider?.id;
+  const iconColorClass =
+    providerId === 'core' || providerId === 'triggers'
+      ? 'bg-accent text-primary'
+      : DEFAULT_CATEGORY_COLOR;
+
+  // Get handle definitions — for dynamicOutputs nodes, derive from params
+  const inputHandle = definition.input;
+  const outputs = resolveOutputHandles(definition, typedData.params);
+
+  const hasIncomingHandle = !!inputHandle;
+
+  // Check execution status for running state
+  const isRunning =
+    typedData.executionStatus === NodeExecutionStatus.RUNNING ||
+    typedData.executionStatus === NodeExecutionStatus.PENDING ||
+    typedData.executionStatus === NodeExecutionStatus.BATCH_SUBMITTED;
+  const isSuccess = typedData.executionStatus === NodeExecutionStatus.SUCCESS;
+  const isError = typedData.executionStatus === NodeExecutionStatus.FAILED;
+  const isSkipped = typedData.executionStatus === NodeExecutionStatus.SKIPPED;
+
+  const outputHandleConfigs = outputs.map((output, index) => {
+    if (outputs.length === 1) {
+      return { output, topStyle: '50%' };
+    }
+    // >2 outputs: use pixel positioning (node grows taller to fit)
+    if (outputs.length > 2) {
+      const topPx = MULTI_OUTPUT_PADDING + index * MULTI_OUTPUT_HANDLE_SPACING;
+      return { output, topStyle: `${topPx}px` };
+    }
+    // 2 outputs (e.g. if_else): percentage positioning within standard 60px height
+    const EDGE_OFFSET = 28; // Keep outer handles closer to node edges without clipping
+    const availableSpace = 100 - EDGE_OFFSET * 2;
+    const topPercent = EDGE_OFFSET + (index / (outputs.length - 1)) * availableSpace;
+    return { output, topStyle: `${topPercent}%` };
+  });
+
+  const nodeHeight = getNodeHeight(outputs.length);
+
+  return (
+    <Card
+      className={cn(
+        'relative w-[200px] flex-row py-0 items-center cursor-move transition-colors node-hover-bg bg-card shadow-md border-l-4',
+        getProviderAccentColor(definition?.provider?.id),
+        // Default border
+        !isRunning &&
+          !isSuccess &&
+          !isError &&
+          !isSkipped &&
+          'border-sidebar-ring hover:border-primary/80',
+        // Running state - animated gradient border
+        isRunning &&
+          'node-running-border animate-node-border rounded-xl border-y border-r border-transparent',
+        // Success state - green border
+        isSuccess && 'border-y-2 border-r-2 border-success',
+        // Error state - red border
+        isError && 'border-y-2 border-r-2 border-destructive',
+        // Skipped state - greyed out with dashed border
+        isSkipped && 'border-y-2 border-r-2 border-dashed border-muted-foreground/50 opacity-50',
+        // Selection state - change existing border color to blue for visibility
+        selected && !isRunning && !isSuccess && !isError && !isSkipped && 'node-selected',
+      )}
+      style={{ height: nodeHeight }}
+    >
+      {/* Unified Input Handle */}
+      {hasIncomingHandle && (
+        <Handle
+          id={inputHandle?.id || 'input'}
+          type="target"
+          position={Position.Left}
+          style={INPUT_HANDLE_STYLE}
+          className={HANDLE_CLASS}
+        />
+      )}
+
+      <div className="flex items-center gap-2 px-3 py-0 overflow-hidden">
+        <div
+          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${iconColorClass}`}
+        >
+          <ProviderIcon
+            providerId={definition.provider?.id}
+            svgIcon={definition.provider?.svgIcon}
+            icon={definition.icon}
+            className="w-6 h-6"
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-xs font-semibold tracking-tight truncate text-card-foreground">
+            {label}
+          </div>
+          <div className="font-mono text-xs tracking-tight truncate text-muted-foreground">
+            {nodeType}
+          </div>
+        </div>
+      </div>
+
+      {/* Output Handles */}
+      {outputHandleConfigs.map(({ output, topStyle }) => {
+        // Show labels when there are multiple outputs (e.g., If/Else True/False)
+        const showLabel = outputs.length > 1;
+        return (
+          <div
+            key={output.id}
+            className="absolute right-0"
+            style={{ top: topStyle, transform: 'translateY(-50%)' }}
+          >
+            <div className="relative flex items-center">
+              <Handle
+                id={output.id}
+                type="source"
+                position={Position.Right}
+                style={OUTPUT_HANDLE_INNER_STYLE}
+                className="!relative !bg-background !w-4 !h-4 !border-2 !border-muted-foreground !rounded-full !transition-colors hover:!bg-muted hover:!border-foreground !shadow-none !ring-0"
+              />
+              {showLabel && (
+                <div className="absolute px-1 text-xs border rounded left-8 text-card-foreground whitespace-nowrap bg-card border-sidebar-ring">
+                  {output.label}
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </Card>
+  );
+});
+
+UniversalNode.displayName = 'UniversalNode';

package/src/components/nodes/createContextAwareNodes.ts

@@ -0,0 +1,19 @@
+import { NODE_COMPONENTS } from './nodeRegistry';
+import { withNodeContext } from './withNodeContext';
+
+/**
+ * Create context-wrapped node components for all known node types.
+ * Returns the base mapping; for dynamic action-based types that aren't
+ * in NODE_COMPONENTS, use `getContextAwareComponent()` at lookup time.
+ */
+// eslint-disable-next-line typescript/no-explicit-any -- React node components require generic any props
+export function createContextAwareNodes(): Record<string, React.ComponentType<any>> {
+  return Object.entries(NODE_COMPONENTS).reduce(
+    (acc, [nodeType, Component]) => {
+      acc[nodeType] = withNodeContext(Component);
+      return acc;
+    },
+    // eslint-disable-next-line typescript/no-explicit-any -- React node components require generic any props
+    {} as Record<string, React.ComponentType<any>>,
+  );
+}

package/src/components/nodes/index.ts

@@ -0,0 +1,45 @@
+import { Node, NodeProps } from '@xyflow/react';
+import { NodeExecutionStatus } from '@invect/core/types';
+
+// New universal node component
+export { UniversalNode } from './UniversalNode';
+
+// Agent node with tools box
+export { AgentNode } from './AgentNode';
+export { NodeAppendix, type AppendixPosition } from './NodeAppendix';
+export { AgentToolsBox, type AgentToolDisplay, type ToolCategory } from './AgentToolsBox';
+export { type ToolDefinition, type AddedToolInstance } from './ToolSelectorModal';
+export { ToolParamField, type AddCredentialRequest } from './ToolParamField';
+
+// Node status indicator for showing execution status
+export {
+  NodeStatusIndicator,
+  type NodeStatusIndicatorStatus,
+  type NodeStatusIndicatorLoadingVariant,
+} from './NodeStatusIndicator';
+
+// Context-based node utilities
+export {
+  NodeViewProvider,
+  useNodeViewContext,
+  type NodeViewMode,
+  type NodeViewProviderProps,
+} from './NodeViewContext';
+export { withNodeContext } from './withNodeContext';
+export { createContextAwareNodes } from './createContextAwareNodes';
+
+// Export from node registry
+export { NODE_COMPONENTS, getNodeComponent, type NodeComponentType } from './nodeRegistry';
+
+// Common node data interface
+export interface BaseNodeData {
+  // display_name?: string;
+  description?: string;
+  icon?: string;
+  status?: string;
+  executionStatus?: NodeExecutionStatus;
+  executionOutput?: unknown;
+  executionError?: string;
+}
+
+export type FBNodeProps<T> = NodeProps<Node<T & BaseNodeData & Record<string, unknown>>>;

package/src/components/nodes/nodeRegistry.ts

@@ -0,0 +1,50 @@
+import { UniversalNode } from './UniversalNode';
+import { AgentNode } from './AgentNode';
+import { GraphNodeType } from '@invect/core/types';
+
+/**
+ * Default component for known AGENT node type.
+ * All other nodes (including dynamic action-based nodes) use UniversalNode.
+ */
+const AGENT_TYPE = GraphNodeType.AGENT;
+
+/**
+ * Base node component mapping for all known GraphNodeType values.
+ * Provider-action nodes (e.g. "gmail.list_messages") are resolved
+ * dynamically at runtime — see `getNodeComponent()`.
+ */
+// eslint-disable-next-line typescript/no-explicit-any -- React node components require generic any props
+const BASE_COMPONENTS: Record<string, React.ComponentType<any>> = {
+  [GraphNodeType.TEMPLATE_STRING]: UniversalNode,
+  [GraphNodeType.MODEL]: UniversalNode,
+  [GraphNodeType.SQL_QUERY]: UniversalNode,
+  [GraphNodeType.IF_ELSE]: UniversalNode,
+  [GraphNodeType.INPUT]: UniversalNode,
+  [GraphNodeType.OUTPUT]: UniversalNode,
+  [GraphNodeType.JQ]: UniversalNode,
+  [GraphNodeType.HTTP_REQUEST]: UniversalNode,
+  [GraphNodeType.AGENT]: AgentNode,
+  [GraphNodeType.GMAIL]: UniversalNode,
+};
+
+/**
+ * Legacy export — static mapping of known enum node types.
+ * For dynamic node type resolution (including action-based types),
+ * use `getNodeComponent()` instead.
+ */
+export const NODE_COMPONENTS = BASE_COMPONENTS;
+
+/**
+ * Resolve the React component for a given node type string.
+ * Returns the custom component for known special types (e.g. AGENT),
+ * or UniversalNode as the default for everything else.
+ */
+// eslint-disable-next-line typescript/no-explicit-any -- React node components require generic any props
+export function getNodeComponent(nodeType: string): React.ComponentType<any> {
+  if (nodeType === AGENT_TYPE) {
+    return AgentNode;
+  }
+  return BASE_COMPONENTS[nodeType] ?? UniversalNode;
+}
+
+export type NodeComponentType = string;

package/src/components/nodes/withNodeContext.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { NodeToolbar, Position } from '@xyflow/react';
+import { Pencil } from 'lucide-react';
+import { useNodeViewContext } from './NodeViewContext';
+
+export function withNodeContext<
+  P extends {
+    data?: Record<string, unknown>;
+    onEdit?: (...args: unknown[]) => void;
+    isStatusView?: boolean;
+    id: string;
+  },
+>(Component: React.ComponentType<P>) {
+  const Wrapped = React.forwardRef<HTMLDivElement, P>((props, _ref) => {
+    const { mode, onEdit, onEditNode, stripExecutionData } = useNodeViewContext();
+
+    // Process data based on context
+    let processedData = props.data;
+    if (stripExecutionData && props.data) {
+      const { executionStatus: _, executionOutput, executionError, ...cleanData } = props.data;
+      processedData = cleanData;
+    }
+
+    // Determine props based on context
+    const contextProps = {
+      ...props,
+      data: processedData,
+      onEdit: mode === 'edit' ? onEdit : undefined,
+      isStatusView: mode === 'view' || mode === 'readonly',
+    } as P;
+
+    // In view mode with onEditNode, render a NodeToolbar with an Edit button
+    if ((mode === 'view' || mode === 'readonly') && onEditNode) {
+      return (
+        <>
+          <Component {...contextProps} />
+          <NodeToolbar position={Position.Bottom} align="center" offset={8}>
+            <button
+              onClick={() => onEditNode(props.id)}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+            >
+              <Pencil className="w-3.5 h-3.5" />
+              Edit
+            </button>
+          </NodeToolbar>
+        </>
+      );
+    }
+
+    return <Component {...contextProps} />;
+  });
+
+  Wrapped.displayName = `WithNodeContext(${Component.displayName || Component.name || 'Component'})`;
+  return Wrapped;
+}

package/src/components/shared/InvectLoader.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { memo } from 'react';
+import { cn } from '../../lib/utils';
+import { useOptionalTheme } from '../../contexts/ThemeProvider';
+import { INVECT_LOADER_DARK_SVG, INVECT_LOADER_LIGHT_SVG } from '../../assets/invect-branding';
+
+export interface InvectLoaderProps {
+  className?: string;
+  iconClassName?: string;
+  label?: string;
+  labelClassName?: string;
+  variant?: 'theme' | 'dark' | 'light';
+}
+
+function resolveLoaderMarkup(variant: 'theme' | 'dark' | 'light', resolvedTheme: 'dark' | 'light') {
+  if (variant === 'dark') {
+    return INVECT_LOADER_DARK_SVG;
+  }
+
+  if (variant === 'light') {
+    return INVECT_LOADER_LIGHT_SVG;
+  }
+
+  return resolvedTheme === 'dark' ? INVECT_LOADER_DARK_SVG : INVECT_LOADER_LIGHT_SVG;
+}
+
+export const InvectLoader = memo(function InvectLoader({
+  className,
+  iconClassName,
+  label = 'Loading...',
+  labelClassName,
+  variant = 'theme',
+}: InvectLoaderProps) {
+  const theme = useOptionalTheme();
+  const resolvedTheme = theme?.resolvedTheme ?? 'light';
+  const svgMarkup = resolveLoaderMarkup(variant, resolvedTheme);
+
+  return (
+    <div className={cn('flex flex-col items-center justify-center gap-3', className)} role="status">
+      <span
+        aria-hidden="true"
+        className={cn(
+          'inline-flex shrink-0 items-center justify-center h-12 [&>svg]:h-full [&>svg]:w-full',
+          iconClassName,
+        )}
+        style={{ aspectRatio: '109 / 209' }}
+        dangerouslySetInnerHTML={{ __html: svgMarkup }}
+      />
+      {label ? (
+        <span className={cn('text-sm text-muted-foreground', labelClassName)}>{label}</span>
+      ) : (
+        <span className="sr-only">Loading</span>
+      )}
+    </div>
+  );
+});
+
+InvectLoader.displayName = 'InvectLoader';

package/src/components/shared/InvectLogo.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { memo } from 'react';
+import { cn } from '../../lib/utils';
+import { useOptionalTheme } from '../../contexts/ThemeProvider';
+import { INVECT_ICON_DARK_SVG, INVECT_ICON_LIGHT_SVG } from '../../assets/invect-branding';
+
+export interface InvectLogoProps {
+  className?: string;
+  iconClassName?: string;
+  labelClassName?: string;
+  showLabel?: boolean;
+  label?: string;
+  variant?: 'theme' | 'dark' | 'light';
+}
+
+function resolveLogoMarkup(variant: 'theme' | 'dark' | 'light', resolvedTheme: 'dark' | 'light') {
+  if (variant === 'dark') {
+    return INVECT_ICON_DARK_SVG;
+  }
+
+  if (variant === 'light') {
+    return INVECT_ICON_LIGHT_SVG;
+  }
+
+  return resolvedTheme === 'dark' ? INVECT_ICON_DARK_SVG : INVECT_ICON_LIGHT_SVG;
+}
+
+export const InvectLogo = memo(function InvectLogo({
+  className,
+  iconClassName,
+  labelClassName,
+  showLabel = false,
+  label = 'Invect',
+  variant = 'theme',
+}: InvectLogoProps) {
+  const theme = useOptionalTheme();
+  const resolvedTheme = theme?.resolvedTheme ?? 'light';
+  const svgMarkup = resolveLogoMarkup(variant, resolvedTheme);
+
+  return (
+    <div className={cn('flex items-center gap-3', className)}>
+      <span
+        aria-hidden="true"
+        className={cn(
+          'flex shrink-0 items-center justify-center h-6 [&>svg]:h-full [&>svg]:w-full',
+          iconClassName,
+        )}
+        style={{ aspectRatio: '109 / 209' }}
+        dangerouslySetInnerHTML={{ __html: svgMarkup }}
+      />
+      {showLabel ? (
+        <span className={cn('text-lg font-semibold tracking-tight', labelClassName)}>{label}</span>
+      ) : null}
+    </div>
+  );
+});
+
+InvectLogo.displayName = 'InvectLogo';