yadflow 2.5.0 → 2.7.0

package/skills/yad-docs/templates/app/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "yadflow-docs-site",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^12.34.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

package/skills/yad-docs/templates/app/public/favicon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 180">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#6316DB;}
+	.st2{fill:#FB2576;}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="8.8225" y1="171.023" x2="69.9754" y2="119.7096">
+			<stop offset="2.964744e-03" style="stop-color:#FB2576"/>
+			<stop offset="0.2422" style="stop-color:#F82475"/>
+			<stop offset="0.412" style="stop-color:#EF2273"/>
+			<stop offset="0.5603" style="stop-color:#DF1E6F"/>
+			<stop offset="0.6963" style="stop-color:#C91969"/>
+			<stop offset="0.8238" style="stop-color:#AD1361"/>
+			<stop offset="0.9434" style="stop-color:#8A0A58"/>
+			<stop offset="1" style="stop-color:#770653"/>
+		</linearGradient>
+		<path class="st0" d="M55.3,94.9L1.6,174.3h47.6l21.6-32c5-7.5,7.6-12.8-1.1-26.2L55.3,94.9z"/>
+	</g>
+	<g>
+		<path class="st1" d="M156.7,15.5h-47.5l-30,44.3l14.4,21.2c8.7,13.3,6,18.7,1.1,26.2L156.7,15.5z"/>
+	</g>
+	<g>
+		<path class="st2" d="M93.5,80.9L49.2,15.5H1.6l68.1,100.6c8.7,13.3,6,18.7,1.1,26.2l1.7-2.6l22.1-32.6C99.6,99.6,102.3,94.3,93.5,80.9z"/>
+	</g>
+</g>
+</svg>

package/skills/yad-docs/templates/app/public/logo.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" style="enable-background:new 0 0 600 177.3;" xml:space="preserve" viewBox="1.6 -5.68 597.1 181.68">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#6316DB;}
+	.st2{fill:#FB2576;}
+</style>
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="8.8225" y1="171.023" x2="69.9754" y2="119.7096">
+			<stop offset="2.964744e-03" style="stop-color:#FB2576"/>
+			<stop offset="0.2422" style="stop-color:#F82475"/>
+			<stop offset="0.412" style="stop-color:#EF2273"/>
+			<stop offset="0.5603" style="stop-color:#DF1E6F"/>
+			<stop offset="0.6963" style="stop-color:#C91969"/>
+			<stop offset="0.8238" style="stop-color:#AD1361"/>
+			<stop offset="0.9434" style="stop-color:#8A0A58"/>
+			<stop offset="1" style="stop-color:#770653"/>
+		</linearGradient>
+		<path class="st0" d="M55.3,94.9L1.6,174.3h47.6l21.6-32c5-7.5,7.6-12.8-1.1-26.2L55.3,94.9z"/>
+	</g>
+	<g>
+		<path class="st1" d="M156.7,15.5h-47.5l-30,44.3l14.4,21.2c8.7,13.3,6,18.7,1.1,26.2L156.7,15.5z"/>
+	</g>
+	<g>
+		<path class="st2" d="M93.5,80.9L49.2,15.5H1.6l68.1,100.6c8.7,13.3,6,18.7,1.1,26.2l1.7-2.6l22.1-32.6    C99.6,99.6,102.3,94.3,93.5,80.9z"/>
+	</g>
+	<path class="st1" d="M276.8,170.6c-8.2-3.6-13.1-8.5-17.9-14.8c-4.8-6.3-7.4-13.3-8-21.1h34.9c0.4,4.2,2.4,7.6,5.8,10.2   c3.5,2.6,7.7,3.9,12.8,3.9c4.6,0,8.2-0.9,10.7-2.7c2.5-1.8,3.8-4.1,3.8-7c0-3.5-1.8-6-5.4-7.7c-3.6-1.7-9.4-3.5-17.5-5.5   c-8.6-2-15.9-4.1-21.6-6.4c-5.8-2.2-10.7-5.8-14.9-10.6c-4.2-4.8-6.3-11.3-6.3-19.6c0-6.9,1.9-13.2,5.7-18.9   c3.8-5.7,9.4-10.2,16.9-13.5c7.4-3.3,16.2-5,26.5-5c15.1,0,27.1,3.8,35.8,11.2c8.7,7.5,13.7,17.4,15,29.8H319   c-0.6-4.2-2.4-7.5-5.5-9.9c-3.1-2.4-7.2-3.7-12.2-3.7c-4.3,0-7.6,0.8-9.9,2.5c-2.3,1.7-3.5,3.9-3.5,6.8c0,3.5,1.8,6.1,5.5,7.8   c3.7,1.7,9.4,3.5,17.2,5.2c8.9,2.3,16.2,4.6,21.8,6.8c5.6,2.2,10.6,5.8,14.8,10.8c4.3,5,6.4,11.6,6.6,20c0,7.1-2,13.4-5.9,18.9   c-4,5.6-9.7,9.9-17.1,13.1c-7.4,3.2-16,4.8-25.8,4.8C294.4,176,285,174.2,276.8,170.6z"/>
+	<path class="st1" d="M386.7,170.6c-8.2-3.6-13.1-8.5-17.9-14.8c-4.8-6.3-7.4-13.3-8-21.1h34.9c0.4,4.2,2.4,7.6,5.8,10.2   c3.5,2.6,7.7,3.9,12.8,3.9c4.6,0,8.2-0.9,10.7-2.7c2.5-1.8,3.8-4.1,3.8-7c0-3.5-1.8-6-5.4-7.7c-3.6-1.7-9.4-3.5-17.5-5.5   c-8.6-2-15.9-4.1-21.6-6.4c-5.8-2.2-10.7-5.8-14.9-10.6c-4.2-4.8-6.3-11.3-6.3-19.6c0-6.9,1.9-13.2,5.7-18.9   c3.8-5.7,9.4-10.2,16.9-13.5c7.4-3.3,16.2-5,26.5-5c15.1,0,27.1,3.8,35.8,11.2c8.7,7.5,13.7,17.4,15,29.8h-34.2   c-0.6-4.2-2.4-7.5-5.5-9.9c-3.1-2.4-7.2-3.7-12.2-3.7c-4.3,0-7.6,0.8-9.9,2.5c-2.3,1.7-3.5,3.9-3.5,6.8c0,3.5,1.8,6.1,5.5,7.8   c3.7,1.7,9.4,3.5,17.2,5.2c8.9,2.3,16.2,4.6,21.8,6.8c5.6,2.2,10.6,5.8,14.8,10.8c4.3,5,6.4,11.6,6.6,20c0,7.1-2,13.4-5.9,18.9   c-4,5.6-9.7,9.9-17.1,13.1c-7.4,3.2-16,4.8-25.8,4.8C404.2,176,394.9,174.2,386.7,170.6z"/>
+	<g>
+		<rect x="475.3" y="53.6" class="st1" width="34.9" height="120.6"/>
+
+			<ellipse transform="matrix(0.9239 -0.3827 0.3827 0.9239 29.4375 190.1633)" class="st1" cx="492.7" cy="21.1" rx="20.5" ry="20.5"/>
+	</g>
+	<g>
+		<path class="st1" d="M589.1,53.6c-15.6,0-33.6,6-46.2,18.9c-13.9,14.3-19,30.7-19,45.7v56h34.9v-56c0-9.9,4.4-16.8,8.7-21    c4.4-4.3,10.6-8.7,21-8.7h10.2V53.6H589.1z"/>
+	</g>
+	<path class="st1" d="M180.8,52.8c-34.2,0-61.2,27-61.2,61.2c0,33.8,25.6,60.3,60.4,60.3h2.9l23.3-34.4h-19.2   c-9.7,0-19.2-2.6-24.3-7.7c-4.7-4.7-7.8-11.1-7.8-18.2c0-14.8,11.2-25.9,25.9-25.9c14.8,0,26,11.2,26,25.9v60.3h35.2v-60.3   C241.9,79.7,214.9,52.8,180.8,52.8z"/>
+</g>
+</svg>

package/skills/yad-docs/templates/app/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/skills/yad-docs/templates/app/src/App.tsx

@@ -0,0 +1,98 @@
+import { Routes, Route } from 'react-router-dom';
+import { FlowCanvas } from './components/Canvas/FlowCanvas';
+import { PathSelector } from './components/Sidebar/PathSelector';
+import { StepList } from './components/Sidebar/StepList';
+import { SidebarFooter } from './components/Sidebar/SidebarFooter';
+import { PlaybackBar } from './components/Controls/PlaybackBar';
+import { TopNavBar } from './components/Navigation/TopNavBar';
+import { RightPanel } from './components/DetailPanel/RightPanel';
+import { RulesLegendPanel } from './components/Reference/RulesLegendPanel';
+import { CommandPalette } from './components/shared/CommandPalette';
+import { SystemLogsTerminal } from './components/Logs/SystemLogsTerminal';
+import { SubPathDetailPage } from './pages/SubPathDetailPage';
+import { RoleSelectPage } from './pages/RoleSelectPage';
+import { StakeholderDocPage } from './pages/StakeholderDocPage';
+import { LoginPage } from './components/Auth/LoginPage';
+import { usePlayback } from './hooks/usePlayback';
+import { useFlowStore } from './store/useFlowStore';
+import { useAuthStore } from './store/useAuthStore';
+
+function Dashboard() {
+  usePlayback();
+  const isLogsPanelOpen = useFlowStore((s) => s.isLogsPanelOpen);
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {/* Left Sidebar */}
+      <aside
+        className="w-80 flex-none flex flex-col border-r z-10"
+        style={{
+          borderColor: 'var(--color-border-default)',
+          background: 'var(--color-bg-primary)',
+        }}
+      >
+        {/* Path Selection */}
+        <div className="p-4 border-b overflow-y-auto" style={{ borderColor: 'var(--color-border-default)' }}>
+          <PathSelector />
+        </div>
+
+        {/* Step Timeline */}
+        <div className="flex-1 overflow-y-auto p-4">
+          <StepList />
+        </div>
+
+        {/* Footer */}
+        <SidebarFooter />
+      </aside>
+
+      {/* Main Canvas Area */}
+      <main className="flex-1 flex flex-col overflow-hidden relative flow-grid"
+        style={{ background: '#1b172d' }}
+      >
+        {/* Canvas */}
+        <div className="flex-1 overflow-hidden">
+          <FlowCanvas />
+        </div>
+
+        {/* System Logs (collapsible) */}
+        {isLogsPanelOpen && (
+          <div className="h-48 flex-shrink-0 border-t"
+            style={{ borderColor: 'var(--color-border-default)' }}
+          >
+            <SystemLogsTerminal />
+          </div>
+        )}
+
+        {/* Playback Controls */}
+        <PlaybackBar />
+      </main>
+
+      {/* Right Detail Panel */}
+      <RightPanel />
+    </div>
+  );
+}
+
+function App() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  return (
+    <div className="flex flex-col h-screen w-screen overflow-hidden" style={{ background: 'var(--color-bg-primary)' }}>
+      <TopNavBar />
+      <Routes>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/path/:pathId" element={<SubPathDetailPage />} />
+        <Route path="/docs" element={<RoleSelectPage />} />
+        <Route path="/docs/:roleSlug" element={<StakeholderDocPage />} />
+      </Routes>
+      <RulesLegendPanel />
+      <CommandPalette />
+    </div>
+  );
+}
+
+export default App;

package/skills/yad-docs/templates/app/src/components/Auth/LoginPage.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { useAuthStore } from '../../store/useAuthStore';
+
+export function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const { login, error } = useAuthStore();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    login(username, password);
+  };
+
+  return (
+    <div
+      className="h-screen w-screen flex items-center justify-center"
+      style={{ background: 'var(--color-bg-primary)' }}
+    >
+      <div
+        className="w-full max-w-md rounded-2xl p-10 shadow-2xl"
+        style={{
+          background: 'var(--color-bg-secondary)',
+          border: '1px solid var(--color-border-default)',
+        }}
+      >
+        {/* Logo */}
+        <div className="flex justify-center mb-6">
+          <img src="/logo.svg" alt="Logo" className="h-14" />
+        </div>
+
+        {/* Title */}
+        <h1 className="text-center text-xl font-bold text-white mb-1">
+          Booking Flow Documentation
+        </h1>
+        <p className="text-center text-sm mb-8" style={{ color: 'var(--color-text-muted)' }}>
+          Sign in to access the documentation
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Username */}
+          <div>
+            <label className="block text-sm font-semibold text-white mb-2">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="Enter your username"
+              className="w-full px-4 py-3 rounded-lg text-sm text-white placeholder-slate-500 border outline-none transition-colors focus:border-[var(--color-primary)]"
+              style={{
+                background: 'var(--color-surface-highlight)',
+                borderColor: 'var(--color-border-default)',
+              }}
+              autoFocus
+            />
+          </div>
+
+          {/* Password */}
+          <div>
+            <label className="block text-sm font-semibold text-white mb-2">
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              className="w-full px-4 py-3 rounded-lg text-sm text-white placeholder-slate-500 border outline-none transition-colors focus:border-[var(--color-primary)]"
+              style={{
+                background: 'var(--color-surface-highlight)',
+                borderColor: 'var(--color-border-default)',
+              }}
+            />
+          </div>
+
+          {/* Error */}
+          {error && (
+            <p className="text-sm text-red-400 text-center">{error}</p>
+          )}
+
+          {/* Submit */}
+          <button
+            type="submit"
+            className="w-full py-3 rounded-xl text-white font-semibold text-sm transition-all hover:opacity-90 cursor-pointer"
+            style={{
+              background: 'var(--color-primary)',
+              boxShadow: '0 4px 20px rgba(97, 22, 218, 0.4)',
+            }}
+          >
+            Sign In
+          </button>
+        </form>
+
+        <p className="text-center text-xs mt-6" style={{ color: 'var(--color-text-muted)' }}>
+          Booking flow documentation portal
+        </p>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Canvas/AnimatedMessage.tsx

@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { COMPONENTS } from '../../data/components';
+
+interface AnimatedMessageProps {
+  from: string;
+  to: string;
+  label: string;
+  color: string;
+  delay: number;
+  duration: number;
+  speed: number;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+export const AnimatedMessage: React.FC<AnimatedMessageProps> = React.memo(
+  ({ from, to, label, color, delay, duration, speed, containerWidth, containerHeight }) => {
+    const coords = useMemo(() => {
+      const fromComp = COMPONENTS.find((c) => c.id === from);
+      const toComp = COMPONENTS.find((c) => c.id === to);
+      if (!fromComp || !toComp) return null;
+
+      const x1 = (fromComp.position.x / 100) * containerWidth;
+      const y1 = (fromComp.position.y / 100) * containerHeight;
+      const x2 = (toComp.position.x / 100) * containerWidth;
+      const y2 = (toComp.position.y / 100) * containerHeight;
+
+      const midX = (x1 + x2) / 2;
+      const dx = Math.abs(x2 - x1);
+      const dy = Math.abs(y2 - y1);
+      const curveFactor = Math.min(dx, dy) * 0.25;
+      const midY = (y1 + y2) / 2 - curveFactor;
+
+      return { x1, y1, x2, y2, midX, midY };
+    }, [from, to, containerWidth, containerHeight]);
+
+    if (!coords) return null;
+
+    const { x1, y1, x2, y2, midX, midY } = coords;
+    const animDelay = delay / speed / 1000;
+    const animDuration = duration / speed / 1000;
+    const pathD = `M ${x1} ${y1} Q ${midX} ${midY} ${x2} ${y2}`;
+
+    return (
+      <>
+        {/* Trail line */}
+        <svg
+          className="pointer-events-none absolute inset-0 h-full w-full"
+          style={{ zIndex: 15 }}
+        >
+          <motion.path
+            d={pathD}
+            fill="none"
+            stroke={color}
+            strokeWidth={2}
+            strokeLinecap="round"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ pathLength: 1, opacity: [0, 0.6, 0.3] }}
+            transition={{
+              duration: animDuration,
+              delay: animDelay,
+              ease: 'easeInOut',
+            }}
+          />
+        </svg>
+
+        {/* Floating message bubble */}
+        <motion.div
+          className="pointer-events-none absolute z-20 flex items-center gap-1 rounded-full px-3 py-1.5"
+          style={{
+            backgroundColor: `${color}ee`,
+            boxShadow: `0 0 20px ${color}60, 0 2px 12px rgba(0,0,0,0.4)`,
+            whiteSpace: 'nowrap',
+            left: 0,
+            top: 0,
+            translateX: '-50%',
+            translateY: '-50%',
+            border: '1px solid rgba(255,255,255,0.2)',
+          }}
+          initial={{ x: x1, y: y1, opacity: 0, scale: 0.5 }}
+          animate={{
+            x: [x1, midX, x2],
+            y: [y1, midY, y2],
+            opacity: [0, 1, 1, 0.8],
+            scale: [0.5, 1, 1, 0.9],
+          }}
+          transition={{
+            duration: animDuration,
+            delay: animDelay,
+            ease: 'easeInOut',
+          }}
+        >
+          <span className="text-[9px] font-bold leading-none text-white drop-shadow-sm">
+            {label}
+          </span>
+        </motion.div>
+      </>
+    );
+  }
+);

package/skills/yad-docs/templates/app/src/components/Canvas/ConnectionLine.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { COMPONENTS } from '../../data/components';
+
+interface ConnectionLineProps {
+  from: string;
+  to: string;
+  isActive: boolean;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+let gradientCounter = 0;
+
+export const ConnectionLine: React.FC<ConnectionLineProps> = React.memo(
+  ({ from, to, isActive, containerWidth, containerHeight }) => {
+    const gradientId = useMemo(() => `gradient-${from}-${to}-${++gradientCounter}`, [from, to]);
+
+    const path = useMemo(() => {
+      const fromComp = COMPONENTS.find((c) => c.id === from);
+      const toComp = COMPONENTS.find((c) => c.id === to);
+      if (!fromComp || !toComp) return null;
+
+      const x1 = (fromComp.position.x / 100) * containerWidth;
+      const y1 = (fromComp.position.y / 100) * containerHeight;
+      const x2 = (toComp.position.x / 100) * containerWidth;
+      const y2 = (toComp.position.y / 100) * containerHeight;
+
+      const midX = (x1 + x2) / 2;
+      const dx = Math.abs(x2 - x1);
+      const dy = Math.abs(y2 - y1);
+      const curveFactor = Math.min(dx, dy) * 0.3;
+      const midY = (y1 + y2) / 2 - curveFactor;
+
+      return `M ${x1} ${y1} Q ${midX} ${midY} ${x2} ${y2}`;
+    }, [from, to, containerWidth, containerHeight]);
+
+    if (!path) return null;
+
+    if (isActive) {
+      return (
+        <g>
+          <defs>
+            <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#6116da" stopOpacity="1" />
+              <stop offset="100%" stopColor="#ff6490" stopOpacity="1" />
+            </linearGradient>
+          </defs>
+          {/* Background dashed path */}
+          <path
+            d={path}
+            fill="none"
+            stroke="var(--color-surface-highlight)"
+            strokeWidth={1}
+            strokeDasharray="5,5"
+            opacity={0.5}
+          />
+          {/* Active gradient path */}
+          <path
+            d={path}
+            fill="none"
+            stroke={`url(#${gradientId})`}
+            strokeWidth={2}
+            opacity={0.7}
+            style={{ transition: 'all 0.3s ease' }}
+          >
+            <animate
+              attributeName="stroke-dasharray"
+              from="0, 1000"
+              to="1000, 0"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </path>
+        </g>
+      );
+    }
+
+    return (
+      <path
+        d={path}
+        fill="none"
+        stroke="var(--color-surface-highlight)"
+        strokeWidth={0.8}
+        strokeDasharray="4 4"
+        opacity={0.3}
+        style={{ transition: 'all 0.3s ease' }}
+      />
+    );
+  }
+);