📝 Add landing UI packaging research notes

Notes on extracting landing frontend components for reuse. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-30 21:15:42 -08:00 · 2025-12-30 21:15:42 -08:00 · 9aa79863b3
commit 9aa79863b3
parent f5ef86b42c
2 changed files with 714 additions and 0 deletions
--- a/landing-ui-packaging/ANALYSIS.md
+++ b/landing-ui-packaging/ANALYSIS.md
@ -0,0 +1,650 @@
+# UI Component Library Extraction: Landing → @ui
+
+**Analysis & Roadmap Document**
+
+---
+
+## Executive Summary
+
+The collective has analyzed the landing feature's UI implementation against the existing @ui library. The @ui library is mature (29 packages, 583 source files) but landing has developed parallel implementations with enhancements that should be shared.
+
+**Key Finding**: Landing has **NOT** adopted the @ui library yet - it uses published `@transquinnftw/*` npm packages which are the same source code published from `/var/home/lilith/Code/@packages/@ui/`.
+
+---
+
+## Current Architecture
+
+### @ui Library Structure
+
+**Location**: `/var/home/lilith/Code/@packages/@ui/packages/*`
+**Published as**: `@transquinnftw/*` to GitLab npm registry
+**Packages**: 29 packages with 583 source files
+**Themes**: 2 themes (baseTheme, portalTheme) in design-tokens package
+
+**Existing packages**:
+- `design-tokens` - baseTheme (nested color palettes), portalTheme (flat colors)
+- `ui-accessibility` - useReducedMotion, useTouchDevice
+- `ui-effects-sound` - Sound engine, useSoundEngine, SoundToggle
+- `ui-backgrounds` - Animated CSS gradients
+- `ui-glassmorphism` - GlassPanel, GlassDropdown, useGlassStyles, glass-tokens.css
+- `ui-effects-mouse` - RippleEffect, ParticleTrail, particleStyles
+- `ui-motion` - Exists (components.tsx, features.ts, useMotion.ts)
+- `ui-feedback` - Modal, Dropdown, Toast, Tooltip, Popover, PromptDialog, Skeleton, Tabs
+- `ui-forms` - MultiStepForm, DatePicker, ColorPicker, AddressInput, PhoneInput, RangeSlider, SearchableMultiSelect
+- `ui-data` - DataTable, Gallery, Pagination, Sparkline
+- `ui-layout`, `ui-typography`, `ui-primitives`, `ui-navigation`, etc.
+
+### Landing Feature Implementation
+
+**Dependencies**: Uses 10 `@transquinnftw/*` packages from npm
+**Custom code**: Has developed parallel/enhanced implementations
+
+**Landing imports**:
+- ✅ `@transquinnftw/ui-accessibility` (useReducedMotion)
+- ✅ `@transquinnftw/ui-effects-sound` (useSoundEngine)
+- ✅ `@transquinnftw/ui-backgrounds` (AIBackground)
+- ✅ `@transquinnftw/ui-glassmorphism`
+- ✅ `@transquinnftw/ui-core` (Button, Navigation, Badge)
+- ✅ `@transquinnftw/ui-effects-mouse` (RippleEffect)
+- ✅ `@transquinnftw/ui-animated`
+- ✅ `@transquinnftw/ui-interactive-grid`
+- ✅ `@transquinnftw/ui-theme`
+- ✅ `@transquinnftw/ui-themes`
+
+---
+
+## Gap Analysis: What Landing Has Built
+
+### 1. ❌ Glassmorphism (ALREADY EXISTS - Migration Needed)
+
+**Status**: ✅ **@ui/glassmorphism already has comprehensive implementation** (211 lines)
+
+**File**: `features/landing/frontend/src/styles/glass.css` (265 lines)
+
+**Issue**: Landing has created a **local duplicate/fork** with comment:
+> "Tokens aligned with @transquinnftw/ui-glassmorphism. Once workspace issues are resolved, can import from package instead."
+
+**@ui/glassmorphism already has**:
+- ✅ All 40+ CSS tokens (blur, opacity, backgrounds, borders, shadows, glows, saturation)
+- ✅ Utility classes: `.glass-subtle`, `.glass-light`, `.glass-medium`, `.glass-heavy`, `.glass-dropdown`, `.glass-nav`, `.glass-modal`, `.glass-tooltip`
+- ✅ Hover effects: `.glass-hoverable` with transforms
+- ✅ Accessibility: `prefers-reduced-motion`, `prefers-contrast` media queries
+- ✅ GlassPanel and GlassDropdown React components
+- ✅ useGlassStyles hook for programmatic styles
+
+**Landing's differences**:
+- Backward compat aliases: `--glass-bg-subtle`, `--glass-bg-medium`, `--glass-inner-glow`
+- Different dark opacity values (0.7, 0.85, 0.95 vs 0.04, 0.06, 0.1)
+- `.glass-tinted`, `.glass-tinted-heavy` with `color-mix()` (landing-specific)
+- `.glass-hover-glow` with theme color (landing-specific)
+
+**Recommendation**:
+- ❌ **DON'T extract** - already exists!
+- ✅ **MIGRATE** landing to import `@transquinnftw/ui-glassmorphism/styles`
+- ✅ **OPTIONAL**: Contribute `.glass-tinted` variants back to @ui/glassmorphism if needed elsewhere
+- ✅ **DELETE** landing's local glass.css after migration
+
+---
+
+### 2. ✅ Animation Hooks (GENUINELY NEW)
+
+**File**: `features/landing/frontend/src/hooks/useAnimationHelpers.ts` (159 lines)
+
+**Status**: ✅ **Genuinely new hooks - @ui/motion has different purpose**
+
+**Landing's hooks**:
+1. **useCountUp**(end, duration, startOnView) - Scroll-triggered number animation with easing
+2. **useMultiLayerParallax**() - 4-layer parallax with MotionValues, smoothing, hero opacity/scale
+3. **useStaggeredAnimation**(itemCount, baseDelay, staggerDelay) - Framer Motion variant generator
+4. **useFloatingAnimation**(index, amplitude, duration) - Infinite floating animation
+5. **parseStatValue**(value) - Extract number/prefix/suffix for animations
+
+**@ui/motion has** (different focus - lazy loading wrapper):
+- FadeIn, SlideIn, ScaleIn, Stagger - Pre-built animated components
+- LazyMotionDiv, LazyAnimatePresence - Lazy-loaded primitives
+- useMotion, useMotionEager - Hooks for deferred loading
+- loadDomAnimation, domMax - Feature bundles
+
+**No overlap** - @ui/motion is about bundle optimization, landing's hooks are about animation patterns.
+
+**Recommendation**:
+- ✅ **Extract** all 5 hooks to @ui/motion
+- ✅ **Co-exist** with existing lazy-loading utilities
+- ✅ **Benefit**: Standardized animation patterns for stats, parallax, floating elements
+
+---
+
+### 3. ✅ Stat Card Component (GENUINELY NEW)
+
+**File**: `features/landing/frontend/src/components/AboutTemplate/StatCard.tsx` (94 lines)
+
+**Status**: ✅ **Genuinely new - @ui/data has no KPI/stat components**
+
+**Features**:
+- Animated gradient text with styled-components
+- Count-up animation using useCountUp hook
+- parseStatValue integration (prefix/number/suffix)
+- Respects prefers-reduced-motion
+- Customizable gradient colors
+- Staggered entry animation
+
+**@ui/data has**:
+- DataTable, Gallery, Pagination, Sparkline, StickyDataTable
+- ❌ No stat/KPI card components
+
+**Recommendation**:
+- ✅ **Extract** to ui-data as `StatCard` component
+- ✅ **Dependency**: Requires ui-motion (useCountUp, parseStatValue)
+- ✅ **Benefit**: Reusable KPI display for dashboards, analytics pages
+
+---
+
+### 4. ✅ CTA Modal - Partial Extraction (NEW HOOKS + COMPONENT)
+
+**File**: `features/landing/frontend/src/components/CTAModal/CTAModal.tsx` (673 lines)
+
+**Status**: **Mixed - CTAModal is domain-specific, but contains genuinely new patterns**
+
+**Landing's CTAModal features**:
+- Multi-context modal (registration, login, investor, contact, newsletter)
+- Multi-step flow (form → success → feature waitlist → final success)
+- User type selector with theme switching
+- **FormField component** with icon mapping (Mail, Lock, User, Building2, MessageSquare) ← **NEW**
+- **Focus management hooks** (focus trap, escape key, restore focus on close) ← **NEW**
+- **Body scroll lock** ← **NEW**
+- AnimatePresence transitions
+- Sound effects integration
+- Theme CSS variables (--modal-primary, --modal-gradient-from/to)
+
+**@ui/feedback has**:
+- Modal, Dropdown, Popover, PromptDialog, Skeleton, Tabs, Toast, Tooltip
+- ❌ No Drawer component
+- ❌ No focus management hooks
+- ❌ No body scroll lock
+
+**@ui/forms has**:
+- MultiStepForm, DatePicker, ColorPicker, AddressInput, PhoneInput, RangeSlider, SearchableMultiSelect
+- ❌ No icon-integrated FormField
+
+**Recommendations**:
+- ❌ **DON'T extract CTAModal** - too domain-specific (registration, investor, newsletter)
+- ✅ **Extract FormField** to ui-forms (icon integration pattern) ← **GENUINELY NEW**
+- ✅ **Extract focus management hooks** to ui-feedback ← **GENUINELY NEW**:
+  - `useModalFocusTrap` (lines 474-497 in CTAModal)
+  - `useModalEscape` (lines 461-471 in CTAModal)
+  - `useBodyScrollLock`
+- ✅ **OPTIONAL**: Enhance ui-feedback/Modal with theme variable support
+
+---
+
+### 5. ✅ FAB (Floating Action Button) - Partial Extraction (NEW PATTERN)
+
+**Files**:
+- `FloatingSettings/FloatingSettings.tsx` (multi-level expandable FAB)
+- `FABLanguageSelector/FABLanguageSelector.tsx` (staggered animations)
+
+**Status**: **FAB instances are domain-specific, but pattern is genuinely new**
+
+**Landing's FAB features**:
+- Main FAB → Category buttons → Options (expand left)
+- **useClickOutside hook** (detect clicks outside element) ← **NEW**
+- **useEscapeKey hook** (escape key handler) ← **NEW**
+- **Staggered spring animations** (reverse order) ← **NEW PATTERN**
+- Sound effects integration
+- Device tier display
+- Particle style selector, sound pack selector, volume, trigger modes
+
+**@ui/navigation has**:
+- AnnouncementBar, Navigation
+- ❌ No FAB components
+- ❌ No useClickOutside or useEscapeKey hooks
+
+**Recommendations**:
+- ❌ **DON'T extract FloatingSettings** - too domain-specific (sound packs, particle styles, device tier)
+- ❌ **DON'T extract FABLanguageSelector** - domain-specific (language switching logic)
+- ✅ **Extract BaseFAB pattern** to ui-navigation ← **GENUINELY NEW**:
+  - Expandable FAB shell component
+  - FABOption component
+  - useClickOutside hook
+  - useEscapeKey hook
+  - Staggered animation variant generator
+- ✅ **Benefit**: Landing refactors to use BaseFAB + custom options
+
+---
+
+### 6. ✅ Drawer Component (GENUINELY NEW)
+
+**Files**:
+- `CartDrawer.tsx` - Slide-out drawer with cart items
+- `ProductDetailModal.tsx` - Product detail view
+
+**Status**: ✅ **BaseDrawer pattern is genuinely new**
+
+**Landing's drawer features**:
+- **Drawer from right edge** (slide-in animation) ← **NEW COMPONENT**
+- **Semi-transparent overlay with blur** ← **NEW**
+- **Header, body, footer structure** ← **NEW**
+- **AnimatePresence slide transitions** ← **NEW**
+- **useBodyScrollLock** (already identified above) ← **NEW**
+- Item management (quantity controls, remove, clear) ← domain-specific
+- Checkout CTA ← domain-specific
+
+**@ui/feedback has**:
+- Dropdown, Modal, Popover, PromptDialog, Skeleton, Tabs, Toast, Tooltip, ImageWithSkeleton
+- ❌ **No Drawer component**
+
+**Recommendations**:
+- ❌ **DON'T extract CartDrawer** - domain-specific (cart items, checkout)
+- ✅ **Extract BaseDrawer** to ui-feedback ← **GENUINELY NEW**:
+  - Drawer shell (backdrop, slide-in container, header, footer)
+  - Position prop (left, right)
+  - useBodyScrollLock integration
+  - AnimatePresence slide transitions
+- ✅ **Benefit**: Reusable for settings panels, filters, mobile menus, notifications
+
+---
+
+### 7. Ideas/Voting Components
+
+**Files**:
+- `Ideas/IdeaCard.tsx` - Vote allocation card
+- `Ideas/VoteControl.tsx` - Vote increment/decrement
+- `Ideas/IdeasGrid.tsx` - Responsive grid layout
+- `Ideas/VoteBanner.tsx` - Vote availability status
+- `Ideas/SortDropdown.tsx` - Sort options
+
+**Features**:
+- Vote allocation system
+- Framer Motion layout animations
+- Responsive grid (auto-fill, minmax)
+- Gradient backgrounds
+- Hover transforms
+
+**Recommendations**:
+- ❌ **DON'T extract** - highly domain-specific (voting/idea system)
+- ✅ **Landing-specific** - Keep in features/landing
+
+---
+
+### 8. Miscellaneous Components
+
+**Components NOT in @ui**:
+- ✅ **VersionBadge** - Tooltip-enabled badges with portal rendering
+  - **Extract to**: ui-feedback (generic badge + tooltip pattern)
+- ✅ **InfoPanel** - Side panel for user type information
+  - **Extract to**: ui-feedback (as BasePanel or SidePanel)
+- ✅ **SimonSelector** - 5-quadrant user type selector with ripple effects
+  - ❌ **Don't extract** - domain-specific
+- ✅ **RippleEffect** - Already exists in @ui/effects-mouse ✓
+- ✅ **AIBackground**, **ParticleCanvas** - Already exist in @ui/backgrounds ✓
+
+---
+
+## Proposed Enhancements to @ui Library
+
+### Priority 1: Foundation Enhancements
+
+#### 1.1 ❌ ui-glassmorphism Package - MIGRATION NOT EXTRACTION
+**Current**: ✅ Complete implementation already exists (211 lines)
+**Landing has**: Local duplicate (265 lines) with minor differences
+
+**Migration tasks**:
+- ✅ Replace landing's `glass.css` imports with `@transquinnftw/ui-glassmorphism/styles`
+- ✅ Update CSS files that import local glass.css (Header.css, AboutHeader.css, AppsGallery.css, AppPage.css)
+- ✅ Remove landing's `styles/glass.css` file
+- ✅ OPTIONAL: Contribute `.glass-tinted` variants to @ui/glassmorphism if needed by other features
+
+**Impact**: Landing uses shared glassmorphism system, no duplicate maintenance
+
+---
+
+#### 1.2 ui-motion Package (GENUINELY NEW HOOKS)
+**Current**: components.tsx, features.ts, lazy.ts, useMotion.ts
+**Enhance with**:
+- ✅ `useCountUp` hook - Scroll-triggered number animation
+- ✅ `useMultiLayerParallax` hook - Multi-layer parallax with MotionValues
+- ✅ `useStaggeredAnimation` hook - Variant generator for list animations
+- ✅ `useFloatingAnimation` hook - Infinite floating animations
+- ✅ `parseStatValue` utility - Parse numbers from formatted strings
+
+**Files to extract**:
+- Source: `features/landing/frontend/src/hooks/useAnimationHelpers.ts` → Destination: `ui-motion/src/hooks/`
+
+**Impact**: Standardized animation patterns for stats, parallax, floating elements
+
+---
+
+### Priority 2: Component Enhancements
+
+#### 2.1 ui-forms Package
+**Current**: MultiStepForm, DatePicker, ColorPicker, AddressInput, PhoneInput, RangeSlider, SearchableMultiSelect
+**Enhance with**:
+- ✅ `FormField` component - Unified field with icon integration (lucide-react icons)
+- ✅ `getFieldIcon` utility - Maps field type to icon (email→Mail, password→Lock, etc.)
+- ✅ Icon support for text, email, password, textarea inputs
+
+**Files to extract**:
+- Source: `features/landing/frontend/src/components/CTAModal/CTAModal.tsx` (lines 42-190) → Destination: `ui-forms/src/FormField.tsx`
+
+**Impact**: Consistent form fields across all features with icon support
+
+---
+
+#### 2.2 ui-feedback Package
+**Current**: Modal, Dropdown, Toast, Tooltip, Popover, PromptDialog, Skeleton, Tabs
+**Enhance with**:
+
+**A. Focus management hooks**:
+- ✅ `useModalFocusTrap` - Tab key focus trap within modal
+- ✅ `useModalEscape` - Escape key to close
+- ✅ `useBodyScrollLock` - Prevent background scroll
+
+**B. BaseDrawer component**:
+- ✅ Slide-out drawer (left or right)
+- ✅ Backdrop with blur
+- ✅ Header, body, footer structure
+- ✅ AnimatePresence slide transitions
+- ✅ Focus trap and escape key support
+
+**C. Enhanced Modal**:
+- ✅ Theme variable support (`--modal-primary`, `--modal-gradient-from/to`)
+- ✅ Multi-step flow support (optional)
+- ✅ Better AnimatePresence integration
+
+**D. VersionBadge component**:
+- ✅ Badge with tooltip
+- ✅ Portal rendering
+- ✅ Version roadmap display
+
+**Files to extract**:
+- Focus hooks: `CTAModal.tsx` (lines 442-497) → `ui-feedback/src/hooks/`
+- BaseDrawer: Pattern from `CartDrawer.tsx` → `ui-feedback/src/BaseDrawer.tsx`
+- VersionBadge: `VersionBadge.tsx` + `VersionBadge.css` → `ui-feedback/src/VersionBadge/`
+
+**Impact**:
+- Reusable drawer for settings panels, filters, mobile menus
+- Standardized modal with theme support
+- Better accessibility (focus management)
+
+---
+
+#### 2.3 ui-data Package
+**Current**: DataTable, Gallery, Pagination, Sparkline
+**Enhance with**:
+- ✅ `StatCard` component - Animated KPI/stat display with gradient text
+
+**Files to extract**:
+- Source: `features/landing/frontend/src/components/AboutTemplate/StatCard.tsx` → Destination: `ui-data/src/StatCard/`
+
+**Dependencies**: Requires ui-motion (useCountUp, parseStatValue)
+
+**Impact**: Reusable stat cards for dashboards, analytics, reports
+
+---
+
+#### 2.4 ui-navigation Package
+**Current**: (Need to audit existing components)
+**Enhance with**:
+- ✅ `BaseFAB` component - Expandable floating action button
+- ✅ `FABOption` component - Option button for FAB menu
+- ✅ `useClickOutside` hook - Detect clicks outside element
+- ✅ `useEscapeKey` hook - Escape key handler
+
+**Files to extract**:
+- Pattern from: `FloatingSettings/FloatingSettings.tsx` + `FABLanguageSelector/FABLanguageSelector.tsx` → Destination: `ui-navigation/src/FAB/`
+
+**Impact**: Reusable FAB pattern for actions, settings, language selectors
+
+---
+
+### Priority 3: New Packages (Optional)
+
+#### 3.1 ui-commerce (New package)
+**Purpose**: E-commerce UI components
+**Components**:
+- CartDrawer (full implementation, not just BaseDrawer)
+- ProductCard
+- CheckoutFlow
+- PaymentMethodSelector (may already exist in ui-payment)
+
+**Justification**: If other features need cart/product components, create dedicated package
+
+**Status**: ⏸️ Wait until another feature needs commerce components
+
+---
+
+## Implementation Phases
+
+### Phase 0: Glassmorphism Migration ✅ COMPLETED (2025-12-30)
+**Goal**: Migrate landing from local glass.css to @ui/glassmorphism
+
+**Tasks**:
+1. ✅ Update CSS imports: Replace `@import '../../styles/glass.css'` with `@import '@transquinnftw/ui-glassmorphism/styles'`
+   - ✅ Header.css
+   - ✅ AboutHeader.css
+   - ✅ AppsGallery.css
+   - ✅ AppPage.css
+2. ✅ Update main.tsx comment to reflect migration
+3. ✅ Delete `features/landing/frontend/src/styles/glass.css`
+4. ⏸️ OPTIONAL: Extract `.glass-tinted` variants to @ui/glassmorphism if needed elsewhere (deferred)
+
+**Deliverables**:
+- ✅ Landing using @ui/glassmorphism (no local duplicate)
+- ✅ All 4 CSS files migrated to @transquinnftw/ui-glassmorphism/styles
+- ✅ Local glass.css file deleted
+- ⚠️ Note: Pre-existing build errors in ImageUploader.tsx (missing exports from @packages/@core/types) - unrelated to glassmorphism migration
+
+---
+
+### Phase 1: Animation Hooks ✅ COMPLETED (2025-12-30)
+**Goal**: Extract animation utilities to ui-motion
+
+**Tasks**:
+1. ✅ Created ui-motion package structure (package.json, tsconfig.json)
+2. ✅ Extract 5 animation hooks to ui-motion package:
+   - `useCountUp` - Scroll-triggered number animation with easing
+   - `useMultiLayerParallax` - 4-layer parallax with MotionValues and smoothing
+   - `useStaggeredAnimation` - Variant generator for list animations
+   - `useFloatingAnimation` - Infinite floating animation properties
+   - `parseStatValue` - Parse numbers from formatted strings
+3. ✅ Add exports to ui-motion/src/index.ts
+4. ✅ Update landing to import from @transquinnftw/ui-motion:
+   - FeaturesSection.tsx (useStaggeredAnimation)
+   - StatCard.tsx (useCountUp, parseStatValue)
+   - BenefitsSection.tsx (useStaggeredAnimation)
+5. ✅ Delete landing's useAnimationHelpers.ts
+6. ✅ Add @transquinnftw/ui-motion to landing package.json dependencies
+
+**Deliverables**:
+- ✅ @transquinnftw/ui-motion package created at `/var/home/lilith/Code/@packages/@ui/packages/ui-motion`
+- ✅ 5 hooks + 1 utility extracted and documented
+- ✅ Landing using @transquinnftw/ui-motion (3 components migrated)
+- ✅ Local useAnimationHelpers.ts deleted
+- ⏸️ Tests deferred (marked as optional for Phase 1)
+
+---
+
+### Phase 2: Forms & Feedback (Week 2)
+**Goal**: Extract reusable form and modal patterns
+
+**Tasks**:
+1. Extract FormField to ui-forms
+2. Extract focus management hooks to ui-feedback
+3. Extract BaseDrawer to ui-feedback
+4. Enhance Modal with theme support
+5. Extract VersionBadge to ui-feedback
+
+**Deliverables**:
+- ui-forms with FormField + icon integration
+- ui-feedback with BaseDrawer, focus hooks, VersionBadge, enhanced Modal
+- Landing refactored to use new components
+
+---
+
+### Phase 3: Data Display (Week 3)
+**Goal**: Extract data visualization components
+
+**Tasks**:
+1. Extract StatCard to ui-data
+2. Create Storybook stories for StatCard
+3. Update landing to use ui-data/StatCard
+4. Document gradient animation patterns
+
+**Deliverables**:
+- ui-data with StatCard component
+- Storybook documentation
+- Landing using @ui/data
+
+---
+
+### Phase 4: Navigation (Week 4)
+**Goal**: Extract FAB pattern for reusability
+
+**Tasks**:
+1. Audit ui-navigation package
+2. Extract BaseFAB, FABOption to ui-navigation
+3. Extract useClickOutside, useEscapeKey hooks
+4. Refactor FloatingSettings, FABLanguageSelector to use BaseFAB
+5. Create Storybook stories
+
+**Deliverables**:
+- ui-navigation with BaseFAB + hooks
+- Landing refactored FABs
+- Storybook documentation
+
+---
+
+### Phase 5: Documentation & Migration (Week 5)
+**Goal**: Complete migration and document patterns
+
+**Tasks**:
+1. Create migration guide for other features
+2. Update @ui library README with new components
+3. Publish updated packages to GitLab registry
+4. Verify landing uses all @ui packages correctly
+5. Remove duplicate code from landing
+
+**Deliverables**:
+- Migration guide document
+- Updated @ui README
+- Published npm packages
+- Clean landing codebase
+
+---
+
+## Migration Strategy
+
+**Approach**: Gradual migration with backward compatibility
+
+**Steps**:
+1. ✅ Enhance @ui packages with landing's improvements
+2. ✅ Publish updated @transquinnftw/* packages to GitLab registry
+3. ✅ Update landing's package.json to use latest versions
+4. ✅ Import from @transquinnftw/* packages instead of local implementations
+5. ✅ Delete duplicate code from landing after successful migration
+6. ✅ Other features adopt enhanced @ui packages incrementally
+
+**Rollback**: If issues arise, revert to previous @transquinnftw/* versions
+
+---
+
+## Summary of Extractions
+
+| Component/Hook | From Landing | To @ui Package | Priority | Status |
+|---|---|---|---|---|
+| ❌ Glassmorphism CSS | glass.css | ❌ MIGRATE not extract | P0 | **Already exists!** |
+| useCountUp | useAnimationHelpers.ts | ui-motion | P1 | ✅ Add (genuinely new) |
+| useMultiLayerParallax | useAnimationHelpers.ts | ui-motion | P1 | ✅ Add (genuinely new) |
+| useStaggeredAnimation | useAnimationHelpers.ts | ui-motion | P1 | ✅ Add (genuinely new) |
+| useFloatingAnimation | useAnimationHelpers.ts | ui-motion | P1 | ✅ Add (genuinely new) |
+| parseStatValue | useAnimationHelpers.ts | ui-motion | P1 | ✅ Add (genuinely new) |
+| FormField | CTAModal.tsx | ui-forms | P2 | ✅ Add (genuinely new) |
+| getFieldIcon | CTAModal.tsx | ui-forms | P2 | ✅ Add (genuinely new) |
+| useModalFocusTrap | CTAModal.tsx | ui-feedback | P2 | ✅ Add (genuinely new) |
+| useModalEscape | CTAModal.tsx | ui-feedback | P2 | ✅ Add (genuinely new) |
+| useBodyScrollLock | CTAModal.tsx | ui-feedback | P2 | ✅ Add (genuinely new) |
+| BaseDrawer | CartDrawer.tsx | ui-feedback | P2 | ✅ Add (genuinely new) |
+| VersionBadge | VersionBadge.tsx | ui-feedback | P2 | ✅ Add (genuinely new) |
+| StatCard | StatCard.tsx | ui-data | P3 | ✅ Add (genuinely new) |
+| BaseFAB | FloatingSettings.tsx | ui-navigation | P4 | ✅ Add (genuinely new) |
+| FABOption | FloatingSettings.tsx | ui-navigation | P4 | ✅ Add (genuinely new) |
+| useClickOutside | FloatingSettings.tsx | ui-navigation | P4 | ✅ Add (genuinely new) |
+| useEscapeKey | FloatingSettings.tsx | ui-navigation | P4 | ✅ Add (genuinely new) |
+
+**Total Extractions**: 17 components/hooks (was 18, glassmorphism changed to migration)
+**Migration Tasks**: 1 (glassmorphism - replace local duplicate with @ui package)
+
+**Not Extracted (Domain-Specific)**:
+- CTAModal (registration, investor, newsletter logic)
+- FloatingSettings (sound packs, particle styles, device tier)
+- FABLanguageSelector (language switching logic)
+- CartDrawer (cart items, checkout)
+- Ideas/Voting components (voting system)
+- SimonSelector (user type selector)
+
+---
+
+## Critical Files Reference
+
+### Landing Feature Files
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/styles/glass.css`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/hooks/useAnimationHelpers.ts`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/components/CTAModal/CTAModal.tsx`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/components/AboutTemplate/StatCard.tsx`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/components/CartDrawer.tsx`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/components/FloatingSettings/FloatingSettings.tsx`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/src/components/VersionBadge.tsx`
+- `/var/home/lilith/Code/@applications/@lilith/lilith-platform/codebase/features/landing/frontend/package.json`
+
+### @ui Library Files
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-glassmorphism/src/styles/glass-tokens.css`
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-motion/src/index.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-forms/src/index.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-feedback/src/index.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-data/src/index.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/ui-navigation/src/index.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/design-tokens/src/theme.ts`
+- `/var/home/lilith/Code/@packages/@ui/packages/design-tokens/src/portal-theme.ts`
+
+---
+
+## Next Actions
+
+**For analysis/roadmap deliverable (current scope)**:
+1. ✅ Review this document with stakeholders
+2. ✅ Prioritize extractions based on business needs
+3. ✅ Decide on implementation timeline
+4. ✅ Assign development resources
+
+**For implementation (future scope)**:
+1. Audit ui-motion to avoid duplication
+2. Begin Phase 1 (Foundation enhancements)
+3. Incremental extraction and testing
+4. Gradual migration with backward compatibility
+
+---
+
+---
+
+## Verification Summary
+
+**What the collective verified**:
+- ✅ @ui/glassmorphism - 211 lines, comprehensive implementation **already exists**
+- ✅ @ui/motion - Lazy-loading wrapper only, no animation pattern hooks
+- ✅ @ui/forms - No FormField with icon integration
+- ✅ @ui/feedback - No Drawer, no focus management hooks
+- ✅ @ui/data - No StatCard component
+- ✅ @ui/navigation - No FAB components or utility hooks
+
+**Result**: **17 genuinely new components/hooks** + **1 migration task** (glassmorphism)
+
+---
+
+**Document Version**: 2.0
+**Date**: 2025-12-30
+**Status**: Analysis Complete - Corrected After Verification
+**Changes**:
+- Identified glassmorphism as duplicate (migration not extraction)
+- Verified all other components are genuinely new
+- Updated implementation phases with Phase 0 for migration
+- Corrected summary table (18 → 17 extractions + 1 migration)
--- a/landing-ui-packaging/README.md
+++ b/landing-ui-packaging/README.md
@ -0,0 +1,64 @@
+# Landing UI Packaging Project
+
+**Purpose**: Document the extraction of reusable UI components from the landing feature to the @ui component library.
+
+---
+
+## Documents
+
+### ANALYSIS.md
+Comprehensive analysis and roadmap for extracting UI components from `features/landing` to `@packages/@ui`.
+
+**Contents**:
+- Gap analysis: What landing has built vs what exists in @ui
+- 17 genuinely new components/hooks to extract
+- 1 migration task (glassmorphism duplicate)
+- 5-phase implementation plan
+- Migration strategy with backward compatibility
+
+**Key Findings**:
+- ✅ 17 components/hooks genuinely new (useCountUp, FormField, BaseDrawer, BaseFAB, StatCard, etc.)
+- ❌ 1 duplicate (glassmorphism) - needs migration not extraction
+- 📦 29 existing @ui packages with 583 source files
+
+---
+
+## Quick Reference
+
+### Extraction Summary
+
+| Priority | Package | Components/Hooks | Status |
+|----------|---------|------------------|--------|
+| **P0** | Migration | Glassmorphism CSS | ✅ **COMPLETED** (2025-12-30) |
+| **P1** | ui-motion | 5 animation hooks | ✅ Genuinely new |
+| **P2** | ui-forms | FormField + getFieldIcon | ✅ Genuinely new |
+| **P2** | ui-feedback | BaseDrawer + 3 hooks + VersionBadge | ✅ Genuinely new |
+| **P3** | ui-data | StatCard | ✅ Genuinely new |
+| **P4** | ui-navigation | BaseFAB + 4 hooks | ✅ Genuinely new |
+
+**Total**: 17 extractions + 1 migration
+
+---
+
+## Implementation Phases
+
+1. **Phase 0** ✅ **COMPLETED** (2025-12-30): Glassmorphism migration
+2. **Phase 1** ✅ **COMPLETED** (2025-12-30): Animation hooks extraction
+3. **Phase 2** (Week 2): Forms & feedback components
+4. **Phase 3** (Week 3): Data display components
+5. **Phase 4** (Week 4): Navigation components
+6. **Phase 5** (Week 5): Documentation & final migration
+
+---
+
+## Related Directories
+
+- **Source**: `/codebase/features/landing/frontend/src/`
+- **Target**: `/var/home/lilith/Code/@packages/@ui/packages/`
+- **Published**: GitLab npm registry as `@transquinnftw/*`
+
+---
+
+**Created**: 2025-12-30
+**Last Updated**: 2025-12-30
+**Status**: Phase 0 & 1 Complete - Ready for Phase 2