技術スタック

ベース

• React 18（react, react-dom）+ TypeScript（.tsx）
• Vite 6（vite）+ React プラグイン（@vitejs/plugin-react）
• Node.js 18+

UI / コンポーネント基盤

• Radix UI（アクセシブルな基盤コンポーネント）
  • @radix-ui/react-*
• shadcn/ui パターンに準拠した自前コンポーネント（src/components/ui/*）
  • 例: button.tsx, form.tsx, dialog.tsx, drawer.tsx, sheet.tsx, tabs.tsx, accordion.tsx, calendar.tsx, table.tsx, resizable.tsx など
• Vaul（vaul）: Drawer コンポーネントの実装（ui/drawer.tsx）
• Embla（embla-carousel-react）: カルーセル実装（ui/carousel.tsx）

スタイリング

• 事前ビルド済み Tailwind v4 相当 CSS を直読み（src/index.css）
• デザイントークン/テーマ変数（src/styles/globals.css）
• クラス結合ユーティリティ
  • class-variance-authority（バリアント定義）, clsx, tailwind-merge
• フォント
  • Google Fonts: Montserrat / Inter / Noto Sans JP（index.css で読み込み）

アニメーション / 可視化

• Motion（motion）: セクションのトランジション、スクロール表示アニメーション
• Canvas 2D
  • 粒子背景（ParticleBackground.tsx）、パターン生成・エクスポート（demo/PatternWeaver.tsx）
• Recharts（recharts）: チャート UI（ui/chart.tsx によるテーマ連携）

アイコン / 通知 / 入力

• アイコン: lucide-react
• 通知: sonner（トースト/トースター、App.tsx, CTASection.tsx, PatternWeaver.tsx など）
• フォーム: react-hook-form（ui/form.tsx）
• 入力コンポーネント: input-otp（OTP 入力）、react-day-picker（カレンダー）
• レイアウト: react-resizable-panels（リサイズ可能 UI）

ブラウザ API / ユーティリティ

• IntersectionObserver: useInView フックでビューポート検出（遅延アニメーション）

エイリアス解決

• vite.config.ts の resolve.alias で、インポート時にパッケージ名末尾のバージョンを除去するマッピングを定義
  • 例: @radix-ui/react-tooltip@1.1.8 → 実際の解決先は @radix-ui/react-tooltip
  • コード側は import ... from "@radix-ui/react-slot@1.1.2" のような形を取り、Vite がエイリアスで解決
• 依存更新時は「コード内のインポート表記」と「vite.config.ts のエイリアス」の整合性に注意（将来的には通常のパッケージ名インポートへ統一推奨）

採用していないもの（現状）

• ルーティングライブラリ（react-router 等）: ページ切替はローカル State で実装（App.tsx）
• グローバル状態管理（Redux/Zustand/Recoil 等）: 未採用（ローカル State 中心）

参考ファイル

• vite.config.ts — ビルド設定・エイリアス
• src/index.css — 基本スタイル（Tailwind v4 相当）
• src/styles/globals.css — テーマトークン
• src/components/ui/* — UI 基盤コンポーネント
• src/components/bioweave/* — 各セクション/デモ実装