yadflow 2.5.0 → 2.7.0

package/skills/yad-docs/templates/app/src/components/Sidebar/PathSelector.tsx

@@ -0,0 +1,148 @@
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { useFlowStore } from '../../store/useFlowStore';
+import { PATHS } from '../../data/paths';
+import type { PathCategory } from '../../data/types';
+import { Icon } from '../shared/Icon';
+import { CATEGORY_ICONS } from '../../utils/iconMap';
+
+const CATEGORY_LABELS: Record<PathCategory, string> = {
+  success: 'Success',
+  'rider-cancel': 'Rider Cancellations',
+  'driver-cancel': 'Driver Cancellations',
+  timeout: 'Timeouts',
+  ops: 'Ops Actions',
+  'active-cancel': 'Active Trip Cancels',
+};
+
+const CATEGORY_ORDER: PathCategory[] = [
+  'success',
+  'rider-cancel',
+  'timeout',
+  'driver-cancel',
+  'ops',
+  'active-cancel',
+];
+
+export const PathSelector = () => {
+  const { selectedPath, selectPath } = useFlowStore();
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const grouped = useMemo(() => {
+    const groups: Record<string, typeof PATHS> = {};
+    for (const path of PATHS) {
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        if (!path.label.toLowerCase().includes(q) && !path.description.toLowerCase().includes(q)) {
+          continue;
+        }
+      }
+      if (!groups[path.category]) groups[path.category] = [];
+      groups[path.category].push(path);
+    }
+    return groups;
+  }, [searchQuery]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between mb-1">
+        <h3 className="text-slate-100 text-sm font-bold font-display uppercase tracking-wider">
+          Path Selection
+        </h3>
+        <button className="text-xs font-medium" style={{ color: 'var(--color-primary)' }}>
+          View All
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="flex items-center rounded-lg border transition-colors"
+        style={{
+          background: 'var(--color-surface-highlight)',
+          borderColor: 'transparent',
+        }}
+      >
+        <Icon name="search" size={20} className="text-slate-400 ml-3" />
+        <input
+          type="text"
+          placeholder="Search paths..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="bg-transparent border-none text-sm text-white w-full placeholder-slate-500 ml-2 p-2 focus:outline-none focus:ring-0"
+        />
+      </div>
+
+      {/* Path list */}
+      <div className="space-y-1">
+        {CATEGORY_ORDER.map((cat) => {
+          const paths = grouped[cat];
+          if (!paths || paths.length === 0) return null;
+          return (
+            <div key={cat}>
+              <div className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-wider"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                {CATEGORY_LABELS[cat]}
+              </div>
+              {paths.map((path) => {
+                const isSelected = selectedPath.id === path.id;
+                const iconName = CATEGORY_ICONS[path.category] || 'circle';
+                return (
+                  <motion.button
+                    key={path.id}
+                    onClick={() => selectPath(path.id)}
+                    className="w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg text-left transition-all relative overflow-hidden"
+                    style={{
+                      background: isSelected ? 'rgba(97,22,218,0.1)' : 'transparent',
+                      border: isSelected ? '1px solid rgba(97,22,218,0.2)' : '1px solid transparent',
+                      color: isSelected ? 'white' : 'var(--color-text-secondary)',
+                    }}
+                    whileHover={{
+                      backgroundColor: isSelected ? undefined : 'var(--color-surface-highlight)',
+                    }}
+                  >
+                    {isSelected && (
+                      <div className="absolute left-0 top-0 bottom-0 w-1"
+                        style={{ background: 'var(--color-primary)' }}
+                      />
+                    )}
+                    <div className="flex items-center gap-3">
+                      <Icon
+                        name={iconName}
+                        size={20}
+                        filled={isSelected}
+                        className={isSelected ? 'text-[var(--color-primary)]' : 'text-slate-500'}
+                      />
+                      <span className="text-sm font-medium">{path.label}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      {isSelected && (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); navigate(`/path/${path.id}`); }}
+                          className="p-1 rounded hover:bg-white/10 transition-colors"
+                          title="View details"
+                        >
+                          <Icon name="open_in_new" size={14} className="text-[var(--color-primary)]" />
+                        </button>
+                      )}
+                      {isSelected ? (
+                        <div className="h-2 w-2 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"
+                          style={{ background: '#22c55e' }}
+                        />
+                      ) : (
+                        <span className="text-[10px]" style={{ color: 'var(--color-text-muted)' }}>
+                          P{path.id}
+                        </span>
+                      )}
+                    </div>
+                  </motion.button>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/skills/yad-docs/templates/app/src/components/Sidebar/SidebarFooter.tsx

@@ -0,0 +1,40 @@
+import { Icon } from '../shared/Icon';
+import { useFlowStore } from '../../store/useFlowStore';
+
+export function SidebarFooter() {
+  const { playbackState, play, stop } = useFlowStore();
+
+  return (
+    <div className="p-4 border-t flex items-center justify-between gap-4"
+      style={{
+        borderColor: 'var(--color-border-default)',
+        background: 'var(--color-bg-primary)',
+      }}
+    >
+      <button
+        onClick={stop}
+        className="flex-1 flex items-center justify-center gap-2 h-10 rounded-lg border text-slate-200 text-sm font-medium transition-colors"
+        style={{
+          borderColor: 'var(--color-surface-highlight)',
+          background: 'var(--color-surface-dark)',
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-surface-highlight)'}
+        onMouseLeave={(e) => e.currentTarget.style.background = 'var(--color-surface-dark)'}
+      >
+        <Icon name="restart_alt" size={18} />
+        Reset Flow
+      </button>
+      <button
+        onClick={play}
+        className="flex-1 flex items-center justify-center gap-2 h-10 rounded-lg text-white text-sm font-medium transition-colors"
+        style={{
+          background: 'var(--color-primary)',
+          boxShadow: '0 4px 15px rgba(97,22,218,0.25)',
+        }}
+      >
+        <Icon name={playbackState === 'playing' ? 'pause' : 'play_arrow'} size={18} />
+        {playbackState === 'playing' ? 'Pause' : 'Resume'}
+      </button>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Sidebar/StepList.tsx

@@ -0,0 +1,234 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useFlowStore } from '../../store/useFlowStore';
+import type { ActorType } from '../../data/types';
+import { Icon } from '../shared/Icon';
+import { ACTOR_ICONS } from '../../utils/iconMap';
+
+const ACTOR_COLORS: Record<ActorType, string> = {
+  rider: '#fb2576',
+  driver: '#6316db',
+  ops: '#06b6d4',
+  system: '#f59e0b',
+};
+
+export const StepList = () => {
+  const {
+    selectedPath,
+    activeSubPathId,
+    activeStepIndex,
+    setActiveStep,
+    selectSubPath,
+    getCurrentSteps,
+  } = useFlowStore();
+
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  const hasSubPaths = selectedPath.subPaths && selectedPath.subPaths.length > 0;
+  const steps = getCurrentSteps();
+
+  // Sync expanded state: auto-expand the active step, allow user to close it
+  const isExpanded = (index: number) => {
+    if (expandedIndex !== null) return expandedIndex === index;
+    return index === activeStepIndex;
+  };
+
+  const handleStepClick = (index: number) => {
+    setActiveStep(index);
+    // Toggle: if already expanded, close it; otherwise expand it
+    if (isExpanded(index)) {
+      setExpandedIndex(-1); // -1 means "nothing expanded"
+    } else {
+      setExpandedIndex(index);
+    }
+  };
+
+  // Reset expanded state when active step changes externally (playback)
+  const prevActiveRef = { current: activeStepIndex };
+  if (prevActiveRef.current !== activeStepIndex) {
+    prevActiveRef.current = activeStepIndex;
+    if (expandedIndex !== null && expandedIndex !== activeStepIndex) {
+      // Auto-expand the new active step during playback
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-slate-400 text-xs font-bold font-display uppercase tracking-wider">
+          Sequence Timeline
+        </h3>
+        <span className="text-xs font-mono px-2 py-1 rounded"
+          style={{ color: 'var(--color-text-secondary)', background: 'var(--color-surface-highlight)' }}
+        >
+          Path {selectedPath.id}
+        </span>
+      </div>
+
+      {/* Sub-path selector */}
+      {hasSubPaths && (
+        <div className="flex flex-wrap gap-1 mb-2">
+          {selectedPath.subPaths!.map((sub) => (
+            <button
+              key={sub.id}
+              onClick={() => selectSubPath(sub.id)}
+              className="rounded-md px-2 py-1 text-[10px] font-semibold transition-colors"
+              style={{
+                background: activeSubPathId === sub.id ? `${selectedPath.color}25` : 'var(--color-surface-highlight)',
+                color: activeSubPathId === sub.id ? selectedPath.color : 'var(--color-text-secondary)',
+                border: `1px solid ${activeSubPathId === sub.id ? `${selectedPath.color}50` : 'var(--color-border-default)'}`,
+              }}
+            >
+              {sub.id.toUpperCase()}: {sub.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Timeline — uses absolute line to avoid overflow clipping */}
+      <div className="relative" style={{ paddingLeft: '36px' }}>
+        {/* Vertical timeline line */}
+        <div
+          className="absolute top-0 bottom-0"
+          style={{
+            left: '15px',
+            width: '2px',
+            background: 'var(--color-surface-highlight)',
+          }}
+        />
+
+        {steps.map((step, index) => {
+          const isCurrent = index === activeStepIndex;
+          const isCompleted = index < activeStepIndex;
+          const expanded = isExpanded(index);
+          const actorColor = ACTOR_COLORS[step.actor];
+          const actorIcon = ACTOR_ICONS[step.actor] || 'person';
+
+          return (
+            <div key={step.id} className="relative pb-4">
+              {/* Timeline dot — centered on the line at left:15px */}
+              <div
+                className="absolute"
+                style={{
+                  left: '-36px',
+                  top: '4px',
+                  width: '32px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                {isCurrent ? (
+                  <motion.div
+                    className="h-7 w-7 rounded-full flex items-center justify-center"
+                    style={{
+                      background: 'var(--color-primary)',
+                      boxShadow: '0 0 0 3px rgba(97,22,218,0.25)',
+                    }}
+                    animate={{ scale: [1, 1.08, 1] }}
+                    transition={{ duration: 2, repeat: Infinity }}
+                  >
+                    <Icon name="sync" size={14} className="text-white" />
+                  </motion.div>
+                ) : isCompleted ? (
+                  <div
+                    className="h-5 w-5 rounded-full flex items-center justify-center"
+                    style={{
+                      background: 'var(--color-surface-highlight)',
+                      border: '2px solid var(--color-border-light)',
+                    }}
+                  >
+                    <Icon name="check" size={12} className="text-slate-500" />
+                  </div>
+                ) : (
+                  <div
+                    className="h-5 w-5 rounded-full flex items-center justify-center"
+                    style={{
+                      background: 'var(--color-bg-primary)',
+                      border: '2px solid var(--color-surface-highlight)',
+                    }}
+                  >
+                    <div className="h-1.5 w-1.5 rounded-full" style={{ background: 'var(--color-surface-highlight)' }} />
+                  </div>
+                )}
+              </div>
+
+              {/* Clickable step area */}
+              <button
+                onClick={() => handleStepClick(index)}
+                className="text-left w-full block"
+              >
+                {/* Compact header — always visible */}
+                <div className={`flex items-center gap-2 ${!isCurrent && !expanded ? (isCompleted ? 'opacity-60' : 'opacity-40') : ''} hover:opacity-100 transition-opacity`}>
+                  <span className="text-xs font-bold uppercase" style={{ color: isCurrent ? 'var(--color-primary)' : 'var(--color-text-secondary)' }}>
+                    Step {index + 1}
+                  </span>
+                  <span
+                    className="text-[10px] px-1.5 py-0.5 rounded font-medium"
+                    style={{
+                      background: isCurrent ? 'var(--color-primary)' : 'var(--color-surface-highlight)',
+                      color: isCurrent ? 'white' : isCompleted ? 'var(--color-text-secondary)' : 'var(--color-text-muted)',
+                    }}
+                  >
+                    {isCurrent ? 'Current' : isCompleted ? 'Completed' : 'Pending'}
+                  </span>
+                  {/* Expand/collapse indicator */}
+                  <Icon
+                    name={expanded ? 'expand_less' : 'expand_more'}
+                    size={16}
+                    className="text-slate-500 ml-auto"
+                  />
+                </div>
+                <h4 className={`font-medium text-sm mt-1 ${isCurrent ? 'text-white font-bold' : 'text-slate-200'}`}>
+                  {step.title}
+                </h4>
+                {!expanded && (
+                  <div className="flex items-center gap-2 mt-1">
+                    <Icon name={actorIcon} size={14} className="text-slate-400" />
+                    <span className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
+                      {step.actor}
+                    </span>
+                  </div>
+                )}
+              </button>
+
+              {/* Expandable detail card */}
+              <AnimatePresence>
+                {expanded && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="overflow-hidden"
+                  >
+                    <div
+                      className="flex flex-col gap-2 p-3 mt-2 rounded-lg border"
+                      style={{
+                        background: 'var(--color-surface-dark)',
+                        borderColor: isCurrent ? 'rgba(97,22,218,0.3)' : 'var(--color-border-default)',
+                      }}
+                    >
+                      <p className="text-xs leading-relaxed" style={{ color: 'var(--color-text-secondary)' }}>
+                        {step.description}
+                      </p>
+                      <div
+                        className="flex flex-wrap items-center gap-x-3 gap-y-1 pt-2"
+                        style={{ borderTop: '1px solid var(--color-surface-highlight)' }}
+                      >
+                        <div className="flex items-center gap-1.5" style={{ color: actorColor }}>
+                          <Icon name={actorIcon} size={16} />
+                          <span className="text-xs font-medium">{step.actor}</span>
+                        </div>
+                        <Icon name="arrow_forward" size={12} className="text-slate-500" />
+                        <span className="text-xs text-slate-400 font-medium break-all">{step.bookingStatus}</span>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/skills/yad-docs/templates/app/src/components/shared/Badge.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { MessageType } from "../../data/types";
+import { MESSAGE_COLORS } from "../../data/types";
+
+interface BadgeProps {
+  type: MessageType;
+  label?: string;
+}
+
+export const Badge: React.FC<BadgeProps> = React.memo(({ type, label }) => {
+  const color = MESSAGE_COLORS[type];
+  return (
+    <span
+      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+      style={{
+        backgroundColor: `${color}20`,
+        color: color,
+        border: `1px solid ${color}40`,
+      }}
+    >
+      <span
+        className="h-1.5 w-1.5 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+      {label || type}
+    </span>
+  );
+});

package/skills/yad-docs/templates/app/src/components/shared/CommandPalette.tsx

@@ -0,0 +1,213 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useFlowStore } from '../../store/useFlowStore';
+import { PATHS } from '../../data/paths';
+import { Icon } from './Icon';
+import { CATEGORY_ICONS } from '../../utils/iconMap';
+
+export function CommandPalette() {
+  const isOpen = useFlowStore((s) => s.isCommandPaletteOpen);
+  const toggle = useFlowStore((s) => s.toggleCommandPalette);
+  const selectPath = useFlowStore((s) => s.selectPath);
+  const setActiveStep = useFlowStore((s) => s.setActiveStep);
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Keyboard shortcut to open
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        toggle();
+      }
+      if (e.key === 'Escape' && isOpen) {
+        toggle();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [isOpen, toggle]);
+
+  // Reset on open
+  useEffect(() => {
+    if (isOpen) {
+      setQuery('');
+      setSelectedIndex(0);
+    }
+  }, [isOpen]);
+
+  const results = useMemo(() => {
+    if (!query.trim()) {
+      return PATHS.map((p) => ({
+        id: `path-${p.id}`,
+        type: 'path' as const,
+        label: `Path ${p.id}: ${p.label}`,
+        description: p.description,
+        category: p.category,
+        pathId: p.id,
+      }));
+    }
+
+    const q = query.toLowerCase();
+    const items: Array<{
+      id: string;
+      type: 'path' | 'step';
+      label: string;
+      description: string;
+      category?: string;
+      pathId: number;
+      stepIndex?: number;
+    }> = [];
+
+    for (const path of PATHS) {
+      if (path.label.toLowerCase().includes(q) || path.description.toLowerCase().includes(q)) {
+        items.push({
+          id: `path-${path.id}`,
+          type: 'path',
+          label: `Path ${path.id}: ${path.label}`,
+          description: path.description,
+          category: path.category,
+          pathId: path.id,
+        });
+      }
+      for (let i = 0; i < path.steps.length; i++) {
+        const step = path.steps[i];
+        if (step.title.toLowerCase().includes(q) || step.handler.toLowerCase().includes(q)) {
+          items.push({
+            id: `step-${path.id}-${i}`,
+            type: 'step',
+            label: `${step.title}`,
+            description: `Path ${path.id} > Step ${i + 1} > ${step.handler}`,
+            pathId: path.id,
+            stepIndex: i,
+          });
+        }
+      }
+    }
+
+    return items.slice(0, 20);
+  }, [query]);
+
+  const handleSelect = useCallback((item: typeof results[0]) => {
+    selectPath(item.pathId);
+    if (item.type === 'step' && item.stepIndex !== undefined) {
+      setTimeout(() => setActiveStep(item.stepIndex!), 50);
+    }
+    toggle();
+  }, [selectPath, setActiveStep, toggle]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter' && results[selectedIndex]) {
+        handleSelect(results[selectedIndex]);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [isOpen, selectedIndex, results, handleSelect]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-black/60"
+            onClick={toggle}
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            transition={{ duration: 0.15 }}
+            className="fixed top-[15%] left-1/2 -translate-x-1/2 w-full max-w-lg z-50 rounded-xl shadow-2xl border overflow-hidden"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            {/* Search input */}
+            <div className="flex items-center gap-3 px-4 py-3 border-b"
+              style={{ borderColor: 'var(--color-border-default)' }}
+            >
+              <Icon name="search" size={20} className="text-slate-400" />
+              <input
+                type="text"
+                placeholder="Search paths, steps, handlers..."
+                value={query}
+                onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
+                className="flex-1 bg-transparent border-none text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-0"
+                autoFocus
+              />
+              <kbd className="text-[10px] text-slate-500 px-1.5 py-0.5 rounded border"
+                style={{ background: 'var(--color-bg-primary)', borderColor: 'var(--color-border-default)' }}
+              >
+                ESC
+              </kbd>
+            </div>
+
+            {/* Results */}
+            <div className="max-h-[400px] overflow-y-auto p-2">
+              {results.length === 0 ? (
+                <div className="text-center py-8 text-sm" style={{ color: 'var(--color-text-muted)' }}>
+                  No results found
+                </div>
+              ) : (
+                results.map((item, index) => (
+                  <button
+                    key={item.id}
+                    onClick={() => handleSelect(item)}
+                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors"
+                    style={{
+                      background: index === selectedIndex ? 'var(--color-surface-highlight)' : 'transparent',
+                    }}
+                    onMouseEnter={() => setSelectedIndex(index)}
+                  >
+                    <Icon
+                      name={item.type === 'path' ? (CATEGORY_ICONS[item.category || ''] || 'route') : 'arrow_forward'}
+                      size={18}
+                      className={item.type === 'path' ? 'text-[var(--color-primary)]' : 'text-slate-500'}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-white truncate">{item.label}</p>
+                      <p className="text-xs truncate" style={{ color: 'var(--color-text-muted)' }}>
+                        {item.description}
+                      </p>
+                    </div>
+                    <span className="text-[10px] uppercase font-bold px-2 py-0.5 rounded"
+                      style={{
+                        background: item.type === 'path' ? 'rgba(97,22,218,0.15)' : 'rgba(255,255,255,0.05)',
+                        color: item.type === 'path' ? 'var(--color-primary)' : 'var(--color-text-muted)',
+                      }}
+                    >
+                      {item.type}
+                    </span>
+                  </button>
+                ))
+              )}
+            </div>
+
+            {/* Footer hint */}
+            <div className="px-4 py-2 border-t flex items-center gap-4 text-[10px]"
+              style={{ borderColor: 'var(--color-border-default)', color: 'var(--color-text-muted)' }}
+            >
+              <span><kbd className="font-mono">&#8593;&#8595;</kbd> Navigate</span>
+              <span><kbd className="font-mono">&#9166;</kbd> Select</span>
+              <span><kbd className="font-mono">Esc</kbd> Close</span>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

package/skills/yad-docs/templates/app/src/components/shared/Icon.tsx

@@ -0,0 +1,21 @@
+interface IconProps {
+  name: string;
+  size?: number;
+  className?: string;
+  filled?: boolean;
+}
+
+export function Icon({ name, size = 24, className = '', filled }: IconProps) {
+  return (
+    <span
+      className={`material-symbols-outlined ${className}`}
+      style={{
+        fontSize: size,
+        fontVariationSettings: filled ? "'FILL' 1" : undefined,
+      }}
+      aria-hidden="true"
+    >
+      {name}
+    </span>
+  );
+}