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>

packages/showcase/mobile/src/screens/CardsAdvancedScreen.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import {
+  DTCard,
+  DTChip,
+  DTBadgeOverlay,
+  DTStaggerContainer,
+  useDTTheme,
+} from '@dangerousthings/react-native';
+import type { DTVariant } from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { CodeLabel } from '../components/CodeLabel';
+
+export function CardsAdvancedScreen() {
+  const theme = useDTTheme();
+  const modes: DTVariant[] = ['normal', 'emphasis', 'warning', 'success', 'other'];
+
+  return (
+    <ScreenContainer>
+      {/* Progress Bar */}
+      <DemoSection
+        title="Progress Bar"
+        variant="normal"
+        description="Vertical left-edge progress indicator (0–1)."
+      >
+        {[0, 0.25, 0.5, 0.75, 1].map((val, i) => (
+          <DTCard
+            key={val}
+            mode={modes[i]}
+            title={`${Math.round(val * 100)}% PROGRESS`}
+            progress={val}
+            style={{ marginBottom: 12 }}
+          >
+            <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
+              progress=&#123;{val}&#125;
+            </Text>
+          </DTCard>
+        ))}
+        <CodeLabel text="<DTCard progress={0.5}> — width matches bevelSizeSmall" />
+      </DemoSection>
+
+      {/* Card Badges */}
+      <DemoSection
+        title="Card Badges"
+        variant="other"
+        description="Bottom-right chip badges. Color matches badge category, not card mode."
+      >
+        <DTCard mode="normal" title="PRODUCT CARD" style={{ marginBottom: 16 }}>
+          <View style={{ minHeight: 40 }}>
+            <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
+              Badge color independent of card mode
+            </Text>
+          </View>
+          <DTBadgeOverlay position="bottom-right">
+            <DTChip variant="warning">LAB</DTChip>
+          </DTBadgeOverlay>
+        </DTCard>
+
+        <DTCard mode="emphasis" title="PRODUCT CARD" style={{ marginBottom: 16 }}>
+          <View style={{ minHeight: 40 }}>
+            <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
+              Badge color independent of card mode
+            </Text>
+          </View>
+          <DTBadgeOverlay position="bottom-right">
+            <DTChip variant="other">BUNDLE</DTChip>
+          </DTBadgeOverlay>
+        </DTCard>
+
+        <DTCard mode="success" title="PRODUCT CARD" style={{ marginBottom: 16 }}>
+          <View style={{ minHeight: 40 }}>
+            <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
+              Badge color independent of card mode
+            </Text>
+          </View>
+          <DTBadgeOverlay position="bottom-right">
+            <DTChip variant="emphasis">NEW</DTChip>
+          </DTBadgeOverlay>
+        </DTCard>
+
+        <CodeLabel text="<DTBadgeOverlay position='bottom-right'><DTChip variant='warning'>LAB</DTChip>" />
+      </DemoSection>
+
+      {/* Stagger + Progress */}
+      <DemoSection
+        title="Staggered Cards with Progress"
+        variant="success"
+        description="Stagger container with progress bars across all modes."
+      >
+        <DTStaggerContainer>
+          {modes.map((mode) => (
+            <DTCard
+              key={mode}
+              mode={mode}
+              title={mode.toUpperCase()}
+              progress={Math.random()}
+              style={{ marginBottom: 12 }}
+            >
+              <Text variant="bodySmall" style={{ color: theme.colors.onSurface }}>
+                Staggered + progress
+              </Text>
+            </DTCard>
+          ))}
+        </DTStaggerContainer>
+        <CodeLabel text="DTStaggerContainer > DTCard progress" />
+      </DemoSection>
+    </ScreenContainer>
+  );
+}