machinaos 0.0.76 → 0.0.78

package/client/src/components/SquareNode.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { nodePropsEqual } from './nodeMemoEquality';
 import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
+import { NodeData, NodeStyle } from '../types/NodeTypes';
 import { useAppStore } from '../store/useAppStore';
 import { useAppTheme } from '../hooks/useAppTheme';
 import EditableNodeLabel from './ui/EditableNodeLabel';
@@ -9,6 +9,7 @@ import { useWebSocket, useWhatsAppStatus, useNodeStatus } from '../contexts/WebS
 import { getCachedNodeSpec, isNodeInBackendGroup, resolveNodeDescription, useNodeSpec } from '../lib/nodeSpec';
 import { NodeIcon } from '../assets/icons';
 import { AI_MODEL_PROVIDER_MAP } from '../lib/aiModelProviders';
+import { useProviderStored } from '../hooks/useCatalogueQuery';
 
 // Nodes with 'tool' in their group can connect to AI Agent/Zeenie tool handles
 const hasToolGroup = (definition: any): boolean => {
@@ -31,7 +32,13 @@ const CREDENTIAL_TO_PROVIDER: Record<string, string> = {
 
 const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
   const theme = useAppTheme();
-  const { setSelectedNode, setRenamingNodeId, updateNodeData } = useAppStore();
+  // Slice selectors so an unrelated store mutation (sidebar toggle,
+  // workflow rename, parameter save on another node) does NOT re-render
+  // every canvas node. Setters are stable refs — single-field selector
+  // is the cheapest read.
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
+  const setRenamingNodeId = useAppStore((s) => s.setRenamingNodeId);
+  const updateNodeData = useAppStore((s) => s.updateNodeData);
   const isDisabled = data?.disabled === true;
 
   // Get Android status + API key status from the broad WebSocket
@@ -139,11 +146,12 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
     return '';
   }, [definition?.credentials, type]);
 
-  // "Is a credential configured for this provider?" is read from the
-  // WS-context apiKeyStatuses map — populated synchronously by
-  // validateApiKeyAsync + the api_key_status broadcast. The canvas node
-  // never fetches decrypted keys; that's the credentials modal's job.
-  const hasApiKey = !!(providerId && getApiKeyStatus(providerId)?.hasKey);
+  // "Is a credential configured for this provider?" reads from the
+  // server-driven catalogue (single source of truth — the `stored`
+  // flag is computed from `auth_service.has_valid_key()` on every
+  // catalogue read). The retired `apiKeyStatuses[id].hasKey` mirror
+  // duplicated this answer with no synchronisation contract.
+  const hasApiKey = useProviderStored(providerId);
   const isConfigured = hasApiKey && !!data && Object.keys(data).length > 0;
 
   const handleParametersClick = (e: React.MouseEvent) => {
@@ -151,45 +159,39 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
     setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
   };
 
-  // Get status indicator color based on execution state
-  const getStatusIndicatorColor = () => {
-    // For executing or waiting state, show blue/cyan
-    if (executionStatus === 'executing' || executionStatus === 'waiting') {
-      return theme.dracula.cyan;
-    }
-    if (executionStatus === 'success') {
-      return theme.dracula.green;
-    }
-    if (executionStatus === 'error') {
-      return theme.dracula.red;
+  // Bucket execution + connection state into one of five status tokens
+  // consumed by `.sq-node-pip[data-status="..."]` in base.css. Per-theme
+  // CSS overrides these without fighting inline `backgroundColor`.
+  // Buckets: 'idle' | 'executing' | 'waiting' | 'success' | 'error'.
+  // Matches TriggerNode/StartNode/ToolkitNode contract (Wave 26.B).
+  const pipStatus: 'idle' | 'executing' | 'waiting' | 'success' | 'error' = (() => {
+    if (executionStatus === 'executing' || executionStatus === 'waiting' || isGlowing) {
+      return 'executing';
     }
+    if (executionStatus === 'success') return 'success';
+    if (executionStatus === 'error') return 'error';
 
-    // Idle state - use Android or configuration status
+    // Idle bucket — derive from connection / configuration signals.
     if (isAndroidNode) {
-      return isAndroidConnected ? theme.dracula.green : theme.dracula.red;
+      return isAndroidConnected ? 'success' : 'error';
     }
-
-    // WhatsApp nodes - use WebSocket connection status
     if (isWhatsAppNode) {
-      if (whatsappStatus.connected) return theme.dracula.green;
-      if (whatsappStatus.pairing) return theme.dracula.orange;
-      return theme.dracula.red;
+      if (whatsappStatus.connected) return 'success';
+      if (whatsappStatus.pairing) return 'waiting';
+      return 'error';
     }
-
-    // Google Maps nodes - use WebSocket API key validation status
     if (isGoogleMapsNode && googleMapsKeyStatus) {
-      return googleMapsKeyStatus.valid ? theme.dracula.green : theme.dracula.red;
+      return googleMapsKeyStatus.valid ? 'success' : 'error';
     }
-
-    // AI Model nodes - use reactive WebSocket API key status
     if (isAIModelNode) {
-      if (aiKeyStatus?.valid && aiKeyStatus?.hasKey) return theme.dracula.green;
-      if (aiKeyStatus?.hasKey) return theme.dracula.orange;
-      return theme.dracula.red;
+      if (aiKeyStatus?.valid && hasApiKey) return 'success';
+      if (hasApiKey) return 'waiting';
+      return 'error';
     }
-
-    return isConfigured ? theme.dracula.green : hasApiKey ? theme.dracula.orange : theme.dracula.red;
-  };
+    if (isConfigured) return 'success';
+    if (hasApiKey) return 'waiting';
+    return 'idle';
+  })();
 
   const getStatusTitle = () => {
     switch (executionStatus) {
@@ -218,12 +220,14 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
             ? 'Google Maps API key validated'
             : `API key invalid: ${googleMapsKeyStatus.message || 'Validation failed'}`;
         }
-        // AI Model nodes - use reactive WebSocket API key status
+        // AI Model nodes - "is stored" from catalogue (hasApiKey),
+        // "is validated" from apiKeyStatuses. Independent concerns
+        // post-Wave-12; the two sources don't drift across tabs.
         if (isAIModelNode) {
-          if (aiKeyStatus?.valid && aiKeyStatus?.hasKey) {
+          if (aiKeyStatus?.valid && hasApiKey) {
             return `${aiProviderId?.charAt(0).toUpperCase()}${aiProviderId?.slice(1)} API key validated`;
           }
-          if (aiKeyStatus?.hasKey) {
+          if (hasApiKey) {
             return 'API key found, validation pending';
           }
           return 'API key required - configure in Credentials';
@@ -248,8 +252,16 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
   const nodeColor = definition?.defaults?.color || '#1A73E8';
 
   return (
+    // `sq-node` + `selected` co-classes are the design-handoff structural
+    // hooks for per-theme square-node decorations (rivets on Steampunk
+    // sq-node-box::before/::after, hanko seal on Edo, REC LED + surv-blink
+    // on Surveillance, tombstone shape on Rot, gold-foil emblem on
+    // Renaissance, neon underglow on Cyber, etc.).
     <div
+      className={`sq-node ${selected ? 'selected' : ''}`}
+      data-executing={isExecuting ? '' : undefined}
       style={{
+        '--node-color': nodeColor,
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
@@ -257,23 +269,16 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '11px',
         cursor: 'pointer',
-      }}
+      } as NodeStyle}
     >
       {/* Main Square Node */}
       <div
+        className="sq-node-box"
         style={{
+          '--node-color': nodeColor,
           position: 'relative',
           width: theme.nodeSize.square,
           height: theme.nodeSize.square,
-          borderRadius: theme.borderRadius.lg,
-          background: theme.isDarkMode
-            ? `linear-gradient(135deg, ${nodeColor}25 0%, ${theme.colors.background} 100%)`
-            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}08 100%)`,
-          border: `2px solid ${isExecuting
-            ? (theme.isDarkMode ? theme.dracula.cyan : '#2563eb')
-            : selected
-              ? theme.colors.focus
-              : theme.isDarkMode ? nodeColor + '80' : `${nodeColor}40`}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -281,18 +286,8 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
           fontSize: theme.nodeSize.squareIcon,
           fontWeight: '600',
           transition: 'all 0.2s ease',
-          boxShadow: isExecuting
-            ? theme.isDarkMode
-              ? `0 4px 12px ${theme.dracula.cyan}66, 0 0 0 3px ${theme.dracula.cyan}4D`
-              : `0 0 0 3px rgba(37, 99, 235, 0.5), 0 4px 16px rgba(37, 99, 235, 0.35)`
-            : selected
-              ? `0 4px 12px ${theme.colors.focusRing}, 0 0 0 1px ${theme.colors.focusRing}`
-              : theme.isDarkMode
-                ? `0 2px 8px ${nodeColor}40`
-                : `0 2px 8px ${nodeColor}20, 0 4px 12px rgba(0,0,0,0.06)`,
-          animation: isExecuting ? 'pulse 1.5s ease-in-out infinite' : 'none',
           opacity: isDisabled ? 0.5 : 1,
-        }}
+        } as NodeStyle}
       >
         {/* Disabled Overlay */}
         {isDisabled && (
@@ -318,7 +313,9 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
         {/* Service Icon */}
         <NodeIcon icon={iconRef} className="h-7 w-7 text-3xl" />
 
-        {/* Parameters Button */}
+        {/* Parameters Button — visual styles (background, border, hover)
+            owned by `.sq-node-gear` in base.css + per-theme overrides.
+            Inline keeps positioning + sizing only. */}
         <button
           onClick={handleParametersClick}
           style={{
@@ -327,71 +324,55 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
             right: '-8px',
             width: theme.nodeSize.paramButton,
             height: theme.nodeSize.paramButton,
-            borderRadius: theme.borderRadius.sm,
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
-            border: `1px solid ${theme.isDarkMode ? theme.colors.border : '#d1d5db'}`,
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
             fontSize: theme.fontSize.xs,
-            color: theme.colors.textSecondary,
-            fontWeight: '400',
-            transition: theme.transitions.fast,
             zIndex: 30,
-            boxShadow: theme.isDarkMode
-              ? `0 1px 3px ${theme.colors.shadow}`
-              : '0 1px 4px rgba(0,0,0,0.1)'
           }}
           title="Edit Service Parameters"
+          className="sq-node-gear"
         >
           ⚙️
         </button>
 
-        {/* Configuration/Execution Status Indicator */}
+        {/* Configuration/Execution Status Indicator.
+            Background color is owned by `.sq-node-pip[data-status="..."]`
+            in base.css (and per-theme overrides). We pass only the
+            execution/connection bucket here — no inline color. */}
         <div
+          className="sq-node-pip"
+          data-status={pipStatus}
           style={{
             position: 'absolute',
             top: '-4px',
             left: '-4px',
             width: theme.nodeSize.statusIndicator,
             height: theme.nodeSize.statusIndicator,
-            borderRadius: '50%',
-            backgroundColor: getStatusIndicatorColor(),
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            boxShadow: isExecuting
-              ? theme.isDarkMode
-                ? `0 0 6px ${theme.dracula.cyan}80`
-                : '0 0 4px rgba(37, 99, 235, 0.5)'
-              : theme.isDarkMode
-                ? `0 1px 2px ${theme.colors.shadow}`
-                : '0 1px 3px rgba(0,0,0,0.15)',
             zIndex: 30,
-            animation: isExecuting ? 'pulse 1s ease-in-out infinite' : 'none',
           }}
           title={getStatusTitle()}
         />
 
-        {/* Square Input Handle */}
-        <Handle
-          id="input-main"
-          type="target"
-          position={Position.Left}
-          isConnectable={isConnectable}
-          style={{
-            position: 'absolute',
-            left: '-6px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            width: theme.nodeSize.handle,
-            height: theme.nodeSize.handle,
-            backgroundColor: theme.isDarkMode ? theme.colors.background : '#ffffff',
-            border: `2px solid ${theme.isDarkMode ? theme.colors.textSecondary : '#6b7280'}`,
-            borderRadius: '50%',
-            zIndex: 20
-          }}
-          title="Service Input"
-        />
+        {/* Square Input Handle (gated by spec.hideInputHandle, mirrors
+            the hideOutputHandle pattern below — auto-derived True for
+            usable_as_tool=True nodes via BaseNode.__init_subclass__). */}
+        {!getCachedNodeSpec(type || '')?.hideInputHandle && (
+          <Handle
+            id="input-main"
+            type="target"
+            position={Position.Left}
+            isConnectable={isConnectable}
+            className="sq-node-handle in"
+            style={{
+              position: 'absolute',
+              left: '-6px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              width: theme.nodeSize.handle,
+              height: theme.nodeSize.handle,
+              zIndex: 20
+            }}
+            title="Service Input"
+          />
+        )}
 
         {/* Square Output Handle (Wave 10.E: spec.hideOutputHandle replaces the
             local NO_OUTPUT_NODE_TYPES list) */}
@@ -401,18 +382,17 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
             type="source"
             position={Position.Right}
             isConnectable={isConnectable}
+            className="sq-node-handle out"
             style={{
+              '--node-color': isConfigured ? nodeColor : theme.colors.textSecondary,
               position: 'absolute',
               right: '-6px',
               top: '50%',
               transform: 'translateY(-50%)',
               width: theme.nodeSize.handle,
               height: theme.nodeSize.handle,
-              backgroundColor: isConfigured ? nodeColor : theme.colors.textSecondary,
-              border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-              borderRadius: '50%',
               zIndex: 20
-            }}
+            } as NodeStyle}
             title="Service Output"
           />
         )}
@@ -422,7 +402,10 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
             `nodeColor` carries the spec's brand color (Android green for
             Android services, dracula accents elsewhere). The tooltip
             reads from the spec's top-position output handle when one is
-            declared there; otherwise falls back to a generic label. */}
+            declared there; otherwise falls back to a generic label.
+            Visual styles (background, border, radius) owned by
+            `.sq-node-handle.out` in base.css + per-theme overrides — we
+            pass `--node-color` for the CSS var only. */}
         {isToolCapable && (() => {
           const spec = getCachedNodeSpec(type || '');
           const topOut = spec?.handles?.find(h => h.kind === 'output' && h.position === 'top');
@@ -433,18 +416,17 @@ const SquareNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectab
               type="source"
               position={Position.Top}
               isConnectable={isConnectable}
+              className="sq-node-handle out"
               style={{
+                '--node-color': nodeColor,
                 position: 'absolute',
                 top: '-6px',
                 left: '50%',
                 transform: 'translateX(-50%)',
                 width: theme.nodeSize.handle,
                 height: theme.nodeSize.handle,
-                backgroundColor: nodeColor,
-                border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-                borderRadius: '50%',
                 zIndex: 20,
-              }}
+              } as NodeStyle}
               title={tooltip}
             />
           );

package/client/src/components/StartNode.tsx

@@ -1,18 +1,26 @@
 import React, { memo, useCallback } from 'react';
 import { nodePropsEqual } from './nodeMemoEquality';
 import { Handle, Position, NodeProps } from 'reactflow';
-import { NodeData } from '../types/NodeTypes';
+import { NodeData, NodeStyle } from '../types/NodeTypes';
 import { useAppStore } from '../store/useAppStore';
 import { useAppTheme } from '../hooks/useAppTheme';
 import { PlayCircle } from 'lucide-react';
+import { resolveNodeDescription } from '../lib/nodeSpec';
 import EditableNodeLabel from './ui/EditableNodeLabel';
 
 const StartNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectable, selected }) => {
-  const { setSelectedNode, setRenamingNodeId, updateNodeData } = useAppStore();
+  const setSelectedNode = useAppStore((s) => s.setSelectedNode);
+  const setRenamingNodeId = useAppStore((s) => s.setRenamingNodeId);
+  const updateNodeData = useAppStore((s) => s.updateNodeData);
   const theme = useAppTheme();
 
   const defaultLabel = 'Start';
 
+  // Definition-driven color (Wave 26.A): backend NodeSpec is SSOT for
+  // node color. Falls back to dracula cyan if the spec hasn't loaded.
+  const definition = resolveNodeDescription(type || '');
+  const nodeColor = definition?.defaults?.color || theme.dracula.cyan;
+
   const handleLabelChange = useCallback(
     (newLabel: string) => updateNodeData(id, { label: newLabel }),
     [id, updateNodeData]
@@ -28,11 +36,17 @@ const StartNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectabl
     setSelectedNode({ id, type, data, position: { x: 0, y: 0 } });
   };
 
-  const nodeColor = theme.dracula.cyan; // Cyan color for start node (neutral "begin" color)
-
   return (
+    // `sq-node` + `selected` co-classes activate per-theme square-node
+    // decorations (Renaissance wax seal, Steampunk rivets, Edo hanko
+    // seal, Surveillance REC LED, Cyber neon underglow). Visual styling
+    // (background, border, radius, shadow) lives in base.css
+    // `.sq-node-box { ... }` defaults + per-theme overrides and reads
+    // `var(--node-color)` for the per-definition accent.
     <div
+      className={`sq-node ${selected ? 'selected' : ''}`}
       style={{
+        '--node-color': nodeColor,
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
@@ -40,82 +54,60 @@ const StartNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectabl
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: '11px',
         cursor: 'pointer',
-      }}
+      } as NodeStyle}
     >
-      {/* Main Square Node */}
+      {/* Main Square Node — layout only; visuals live in CSS. */}
       <div
+        className="sq-node-box"
         style={{
           position: 'relative',
           width: '60px',
           height: '60px',
-          borderRadius: '8px',
-          background: theme.isDarkMode
-            ? `linear-gradient(135deg, ${nodeColor}20 0%, ${theme.colors.background} 100%)`
-            : `linear-gradient(145deg, #ffffff 0%, ${nodeColor}10 100%)`,
-          border: `2px solid ${selected
-            ? theme.colors.focus
-            : theme.isDarkMode ? `${nodeColor}60` : `${nodeColor}50`}`,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           color: theme.colors.text,
           fontSize: '28px',
           fontWeight: '600',
-          transition: 'all 0.2s ease',
-          boxShadow: selected
-            ? `0 4px 12px ${theme.colors.focusRing}, 0 0 0 1px ${theme.colors.focusRing}`
-            : theme.isDarkMode
-              ? `0 2px 8px ${nodeColor}30`
-              : `0 2px 8px ${nodeColor}25, 0 4px 12px rgba(0,0,0,0.06)`,
         }}
       >
-        {/* Play Icon */}
+        {/* Play Icon (color reads from definition-driven nodeColor) */}
         <PlayCircle className="h-7 w-7" style={{ color: nodeColor }} />
 
-        {/* Parameters Button */}
+        {/* Parameters Button — CSS owns bg/border via .sq-node-gear */}
         <button
           onClick={handleParametersClick}
+          className="sq-node-gear"
           style={{
             position: 'absolute',
             top: '-8px',
             right: '-8px',
             width: '16px',
             height: '16px',
-            borderRadius: '3px',
-            backgroundColor: theme.isDarkMode ? theme.colors.backgroundAlt : '#ffffff',
-            border: `1px solid ${theme.isDarkMode ? theme.colors.border : `${nodeColor}40`}`,
             cursor: 'pointer',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             fontSize: '8px',
-            color: theme.colors.textSecondary,
             fontWeight: '400',
-            transition: 'all 0.2s ease',
             zIndex: 30,
-            boxShadow: theme.isDarkMode
-              ? `0 1px 3px ${theme.colors.shadow}`
-              : `0 1px 4px ${nodeColor}20`
           }}
           title="Edit Parameters"
         >
-          {'\u2699\uFE0F'}
+          {'⚙️'}
         </button>
 
-        {/* Status Indicator - always green for start */}
+        {/* Status Indicator — Start is always "ready" (success bucket).
+            CSS owns bg color via per-status rule on .sq-node-pip. */}
         <div
+          className="sq-node-pip"
+          data-status="success"
           style={{
             position: 'absolute',
             top: '-4px',
             left: '-4px',
             width: '10px',
             height: '10px',
-            borderRadius: '50%',
-            backgroundColor: nodeColor,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            boxShadow: theme.isDarkMode
-              ? `0 1px 2px ${theme.colors.shadow}`
-              : '0 1px 3px rgba(0,0,0,0.15)',
             zIndex: 30,
           }}
           title="Workflow start point"
@@ -134,12 +126,13 @@ const StartNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectabl
           }}
         />
 
-        {/* Output Handle */}
+        {/* Output Handle — CSS owns bg/border via .sq-node-handle.out */}
         <Handle
           id="output-main"
           type="source"
           position={Position.Right}
           isConnectable={isConnectable}
+          className="sq-node-handle out"
           style={{
             position: 'absolute',
             right: '-6px',
@@ -147,10 +140,7 @@ const StartNode: React.FC<NodeProps<NodeData>> = ({ id, type, data, isConnectabl
             transform: 'translateY(-50%)',
             width: '8px',
             height: '8px',
-            backgroundColor: nodeColor,
-            border: `2px solid ${theme.isDarkMode ? theme.colors.background : '#ffffff'}`,
-            borderRadius: '50%',
-            zIndex: 20
+            zIndex: 20,
           }}
           title="Workflow Output"
         />

package/client/src/components/SvgFilterDefs.tsx

@@ -0,0 +1,54 @@
+/**
+ * Mounts a hidden inline <svg><defs> block once at the app root so per-
+ * theme CSS rules like `filter: url(#ink-blot)` resolve. The SVG itself
+ * has zero pixel footprint (width=0 height=0); the filter definitions
+ * inside <defs> are document-wide referenceable by ID.
+ *
+ * Filter IDs declared:
+ *   #ink-blot - Renaissance edge warble (turbulence + displacement map)
+ *   #noise    - Wasteland paper-grain turbulence
+ *   #crt      - Cyber chromatic aberration / scanline
+ *
+ * Audit: only `#ink-blot` is currently referenced in the upstream design
+ * handoff CSS (renaissance.css line 271). `#noise` and `#crt` are shipped
+ * preemptively so per-theme CSS can adopt them without a second wave.
+ */
+import React from 'react';
+
+export const SvgFilterDefs: React.FC = () => (
+  <svg
+    width={0}
+    height={0}
+    aria-hidden="true"
+    style={{ position: 'absolute', overflow: 'hidden' }}
+  >
+    <defs>
+      <filter id="ink-blot">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.02 0.04"
+          numOctaves="2"
+          seed="3"
+        />
+        <feDisplacementMap in="SourceGraphic" scale="2" />
+      </filter>
+      <filter id="noise">
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.9"
+          numOctaves="2"
+          stitchTiles="stitch"
+        />
+        <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0" />
+      </filter>
+      <filter id="crt">
+        <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+        <feOffset in="SourceGraphic" dx="-1" dy="0" result="r" />
+        <feOffset in="SourceGraphic" dx="1" dy="0" result="b" />
+        <feBlend in="r" in2="b" mode="screen" />
+      </filter>
+    </defs>
+  </svg>
+);
+
+export default SvgFilterDefs;