Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -4,19 +4,19 @@ Shared design tokens, web CSS, and React Native components for the Dangerous Thi
 
 ## Packages
 
-| Package | Description |
-|---------|-------------|
-| [`@dangerousthings/tokens`](packages/tokens) | Canonical design tokens (colors, typography, shape) defined in TypeScript and exported as CSS custom properties |
-| [`@dangerousthings/web`](packages/web) | Web CSS themes — bevels, glows, elevation, and form styles |
-| [`@dangerousthings/react-native`](packages/react-native) | React Native components built on React Native Paper |
+| Package                                                  | Description                                                                                                     |
+| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| [`@dangerousthings/tokens`](packages/tokens)             | Canonical design tokens (colors, typography, shape) defined in TypeScript and exported as CSS custom properties |
+| [`@dangerousthings/web`](packages/web)                   | Web CSS themes — bevels, glows, animations, forms, and filter styles                                            |
+| [`@dangerousthings/react-native`](packages/react-native) | React Native components built on React Native Paper                                                             |
+| [`@dangerousthings/hex-background`](packages/hex-background) | 3D hexagon grid background using Three.js + React Three Fiber (web and React Native)                       |
 
 ## Brand Themes
 
-Three brand themes ship out of the box:
+Two brand themes ship out of the box:
 
 - **DT** — neon cyberpunk aesthetic with beveled corners and glow effects (Tektur font)
 - **Classic** — dark navy palette with magenta accents and standard border radius
-- **Supra** — Material Design 3–inspired with blue accent and rounded corners
 
 ## Getting Started
 
@@ -80,12 +80,12 @@ console.log(dt.color.brand.primary); // "#00ffff"
 
 ### Scripts
 
-| Command | Description |
-|---------|-------------|
-| `npm run build` | Build all packages (Turbo) |
-| `npm run clean` | Remove all `dist/` directories |
-| `npm run typecheck` | Run TypeScript type checking |
-| `npm run lint` | Lint all packages |
+| Command             | Description                    |
+| ------------------- | ------------------------------ |
+| `npm run build`     | Build all packages (Turbo)     |
+| `npm run clean`     | Remove all `dist/` directories |
+| `npm run typecheck` | Run TypeScript type checking   |
+| `npm run lint`      | Lint all packages              |
 
 ### Release
 
@@ -99,14 +99,18 @@ npm run release            # build + publish to npm
 
 ## React Native Components
 
-DTAccordion, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTGallery, DTHexagon, DTLabel, DTMediaFrame, DTMenu, DTModal, DTProgressBar, DTQuantityStepper, DTRadioGroup, DTSearchInput, DTSwitch, DTTextInput
+DTAccordion, DTBadgeOverlay, DTButton, DTCard, DTCheckbox, DTChip, DTDrawer, DTFeatureLegend, DTGallery, DTHexagon, DTLabel, DTMediaFrame, DTMenu, DTMobileFilterOverlay, DTModal, DTProgressBar, DTQuantityStepper, DTRadioGroup, DTSearchInput, DTStaggerContainer, DTSwitch, DTTextInput
+
+**Animation hooks:** `useScaleIn`, `usePulse`
 
 ## Web CSS Modules
 
-- `bevels.css` — angular clip-path patterns for the DT brand
-- `glows.css` — neon drop-shadow effects for clipped elements
-- `forms-dt.css` — text inputs, checkboxes, radio buttons, switches
-- `elevation.css` — shadow elevation for Supra / MD3 brand
+- `bevels.css` — angular clip-path bevels, card modes, selected states, progress bars, badge overlays, interactive bevel buttons
+- `glows.css` — neon drop-shadow and text-shadow effects (mode-aware)
+- `forms-dt.css` — text inputs, checkboxes, radio buttons, switches, menu items, filter headers
+- `animations.css` — entrance animations, stagger containers, transition utilities
+- `scrollbar.css` — thin neon scrollbar styling
+- `feature-legend.css` — product feature grid with rotated labels
 
 ## Project Structure
 
@@ -116,7 +120,8 @@ dt-design-system/
 │   ├── tokens/          # Design token definitions + CSS generation
 │   ├── web/             # CSS themes and components
 │   ├── react-native/    # React Native Paper components
-│   └── showcase/        # Demo app (placeholder)
+│   ├── hex-background/  # 3D hexagon grid (Three.js)
+│   └── showcase/        # Demo apps (desktop + mobile)
 ├── turbo.json           # Turbo pipeline config
 └── package.json         # Workspace root
 ```