Add desktop (Electron) and mobile (Expo) showcase apps

New workspace packages for demonstrating design system components:
- Desktop: Electron + Vite app with brand/theme switching
- Mobile: Expo React Native app with brand switching

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

package.json

@@ -9,13 +9,16 @@
   },
   "license": "MIT",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "packages/showcase/*"
   ],
   "scripts": {
     "build": "turbo run build",
     "build:tokens": "npm run build -w packages/tokens",
     "build:web": "npm run build -w packages/web",
     "build:react-native": "npm run build -w packages/react-native",
+    "start:mobile": "npm run start -w @dangerousthings/showcase-mobile",
+    "start:desktop": "npm run start -w @dangerousthings/showcase-desktop",
     "clean": "turbo run clean",
     "typecheck": "turbo run typecheck",
     "lint": "turbo run lint",

packages/showcase/desktop/electron-builder.yml

@@ -0,0 +1,18 @@
+appId: com.dangerousthings.showcase-desktop
+productName: DT Design System Showcase
+directories:
+  output: release
+  buildResources: resources
+npmRebuild: false
+artifactName: "dt-showcase-desktop-${version}-${arch}.${ext}"
+files:
+  - dist/**/*
+  - package.json
+  - "!node_modules"
+mac:
+  target: [dmg, zip]
+win:
+  target: [nsis, portable]
+linux:
+  target: [AppImage, deb]
+  category: Development

packages/showcase/desktop/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@dangerousthings/showcase-desktop",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Desktop showcase for the Dangerous Things design system",
+  "author": {
+    "name": "Dangerous Things",
+    "email": "info@dangerousthings.com"
+  },
+  "homepage": "https://github.com/dangerous-tac0s/dt-design-system",
+  "main": "dist/main/main.js",
+  "scripts": {
+    "dev": "vite --config vite.config.ts",
+    "dev:electron": "npm run build:main && concurrently \"vite --config vite.config.ts\" \"wait-on http://localhost:5173 && electron .\"",
+    "build": "tsc -p tsconfig.main.json && vite build --config vite.config.ts",
+    "build:main": "tsc -p tsconfig.main.json",
+    "start": "electron .",
+    "package": "npm run build && electron-builder",
+    "package:dir": "npm run build && electron-builder --dir",
+    "package:win": "npm run build && electron-builder --win",
+    "package:mac": "npm run build && electron-builder --mac",
+    "package:linux": "npm run build && electron-builder --linux",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.main.json",
+    "clean": "rm -rf dist release"
+  },
+  "dependencies": {
+    "@dangerousthings/tokens": "*",
+    "@dangerousthings/web": "*"
+  },
+  "devDependencies": {
+    "concurrently": "^9.0.0",
+    "electron": "33.4.11",
+    "electron-builder": "^25.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.0.0",
+    "wait-on": "^8.0.0"
+  }
+}

packages/showcase/desktop/src/main/main.ts

@@ -0,0 +1,30 @@
+import { app, BrowserWindow } from 'electron';
+import path from 'path';
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    backgroundColor: '#000000',
+    titleBarStyle: 'hiddenInset',
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+    },
+  });
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    win.loadURL(process.env.VITE_DEV_SERVER_URL);
+  } else {
+    win.loadFile(path.join(__dirname, '../renderer/index.html'));
+  }
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) createWindow();
+});

packages/showcase/desktop/src/main/preload.ts

@@ -0,0 +1 @@
+// Minimal preload — no IPC needed for the showcase

packages/showcase/desktop/src/renderer/brand-switcher.ts

@@ -0,0 +1,77 @@
+import { themes } from '@dangerousthings/tokens';
+import type { ThemeBrand, ThemeMode } from '@dangerousthings/tokens';
+
+let currentBrand: ThemeBrand = 'dt';
+let currentMode: ThemeMode = 'dark';
+
+export function initBrandSwitcher(container: HTMLElement) {
+  // Brand buttons
+  for (const theme of themes) {
+    const btn = document.createElement('button');
+    btn.textContent = theme.name;
+    btn.className = 'brand-btn';
+    btn.dataset.brand = theme.id;
+    if (theme.id === currentBrand) btn.classList.add('active');
+    btn.addEventListener('click', () => switchBrand(theme.id));
+    container.appendChild(btn);
+  }
+
+  // Mode switcher
+  const modeContainer = document.createElement('div');
+  modeContainer.className = 'mode-switcher';
+
+  const modes: ThemeMode[] = ['dark', 'light', 'auto'];
+  for (const mode of modes) {
+    const btn = document.createElement('button');
+    btn.textContent = mode;
+    btn.className = 'mode-btn';
+    btn.dataset.mode = mode;
+    if (mode === currentMode) btn.classList.add('active');
+    btn.addEventListener('click', () => switchMode(mode));
+    modeContainer.appendChild(btn);
+  }
+
+  container.appendChild(modeContainer);
+
+  // Set initial state
+  applyTheme();
+}
+
+function switchBrand(id: ThemeBrand) {
+  currentBrand = id;
+  applyTheme();
+  updateBrandButtons();
+}
+
+function switchMode(mode: ThemeMode) {
+  currentMode = mode;
+  applyTheme();
+  updateModeButtons();
+}
+
+function applyTheme() {
+  document.documentElement.setAttribute('data-brand', currentBrand);
+  document.documentElement.setAttribute('data-theme', currentMode);
+}
+
+function updateBrandButtons() {
+  document.querySelectorAll('.brand-btn').forEach((btn) => {
+    const el = btn as HTMLButtonElement;
+    el.classList.toggle('active', el.dataset.brand === currentBrand);
+  });
+}
+
+function updateModeButtons() {
+  document.querySelectorAll('.mode-btn').forEach((btn) => {
+    const el = btn as HTMLButtonElement;
+    el.classList.toggle('active', el.dataset.mode === currentMode);
+  });
+}
+
+export function getCurrentBrand(): ThemeBrand {
+  return currentBrand;
+}
+
+export function getCurrentMode(): ThemeMode {
+  return currentMode;
+}

packages/showcase/desktop/src/renderer/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" data-brand="dt" data-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DT Design System — Desktop Showcase</title>
+</head>
+<body>
+  <div id="app">
+    <nav id="sidebar"></nav>
+    <main id="content"></main>
+  </div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

packages/showcase/desktop/src/renderer/main.ts

@@ -0,0 +1,56 @@
+import '@dangerousthings/web/index.css';
+import './style.css';
+
+import { initRouter } from './utils/router';
+import { initBrandSwitcher } from './brand-switcher';
+import { renderHomePage } from './pages/home';
+import { renderBevelsPage } from './pages/bevels';
+import { renderGlowsPage } from './pages/glows';
+import { renderFormsPage } from './pages/forms';
+import { renderTokensPage } from './pages/tokens';
+
+const routes: Record<string, (container: HTMLElement) => void> = {
+  '': renderHomePage,
+  'bevels': renderBevelsPage,
+  'glows': renderGlowsPage,
+  'forms': renderFormsPage,
+  'tokens': renderTokensPage,
+};
+
+const sidebar = document.getElementById('sidebar')!;
+const content = document.getElementById('content')!;
+
+// Build sidebar navigation
+const navTitle = document.createElement('div');
+navTitle.className = 'nav-title';
+navTitle.textContent = 'DT DESIGN SYSTEM';
+sidebar.appendChild(navTitle);
+
+const brandContainer = document.createElement('div');
+brandContainer.className = 'brand-switcher-container';
+sidebar.appendChild(brandContainer);
+initBrandSwitcher(brandContainer);
+
+const navLinks = document.createElement('div');
+navLinks.className = 'nav-links';
+
+const pages = [
+  { hash: '', label: 'Home' },
+  { hash: 'bevels', label: 'Bevels' },
+  { hash: 'glows', label: 'Glows' },
+  { hash: 'forms', label: 'Forms' },
+  { hash: 'tokens', label: 'Tokens' },
+];
+
+for (const page of pages) {
+  const link = document.createElement('a');
+  link.href = `#/${page.hash}`;
+  link.textContent = page.label;
+  link.className = 'nav-link';
+  navLinks.appendChild(link);
+}
+
+sidebar.appendChild(navLinks);
+
+// Initialize router
+initRouter(routes, content);

packages/showcase/desktop/src/renderer/pages/bevels.ts

@@ -0,0 +1,126 @@
+import { el, section, row, label, codeLabel } from '../utils/dom';
+
+export function renderBevelsPage(container: HTMLElement) {
+  container.appendChild(el('h1', { className: 'page-title' }, 'Bevels'));
+  container.appendChild(el('p', { className: 'page-subtitle' }, 'Angular clip-path patterns from the DT design system. Active on the DT brand.'));
+
+  // Card Bevels
+  const card1 = el('div', { className: 'card', style: 'padding: var(--space-6);' });
+  card1.appendChild(el('div', { className: 'card-title' }, 'CARD TITLE'));
+  card1.appendChild(el('div', { className: 'card-body' }, 'Dual bottom bevels — bottom-right (bevel-md) and bottom-left (bevel-sm). Uses the dual-element technique with ::before pseudo-element.'));
+  const card2 = el('div', { className: 'card', style: 'padding: var(--space-6);' });
+  card2.appendChild(el('div', { className: 'card-body' }, 'Card without title — no header bar, just the beveled container.'));
+
+  container.appendChild(
+    section('Card Bevels', 'Dual bottom bevels using clip-path. Outer bg = border color, ::before = surface fill.',
+      card1,
+      codeLabel('.card or .dt-bevel-card'),
+      card2,
+      codeLabel('.card (no .card-title child)'),
+    ),
+  );
+
+  // Button Bevels
+  container.appendChild(
+    section('Button Bevels', 'Top-right corner cut. Filled buttons use direct clip-path, outline uses dual-element.',
+      row(
+        el('button', { className: 'btn-primary' }, 'PRIMARY'),
+        el('button', { className: 'btn-secondary' }, 'SECONDARY'),
+        el('button', { className: 'btn-danger' }, 'DANGER'),
+      ),
+      codeLabel('.btn-primary | .btn-secondary | .btn-danger'),
+    ),
+  );
+
+  // Badge Bevels
+  container.appendChild(
+    section('Badge Bevels', 'Top-right bevel with dual-element technique. Color variants via CSS custom properties.',
+      row(
+        el('span', { className: 'badge' }, 'Default'),
+        el('span', { className: 'badge badge-success' }, 'Success'),
+        el('span', { className: 'badge badge-error' }, 'Error'),
+        el('span', { className: 'badge badge-warning' }, 'Warning'),
+        el('span', { className: 'badge badge-info' }, 'Info'),
+      ),
+      codeLabel('.badge | .badge-success | .badge-error | .badge-warning | .badge-info'),
+    ),
+  );
+
+  // Media Frame
+  const mediaFrame = el('div', {
+    className: 'dt-bevel-media',
+    style: 'background: var(--color-primary); width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;',
+  });
+  mediaFrame.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'MEDIA FRAME'));
+
+  container.appendChild(
+    section('Media Frame Bevels', 'Diagonal opposite corners (top-left + bottom-right).',
+      mediaFrame,
+      codeLabel('.dt-bevel-media'),
+    ),
+  );
+
+  // Modal Bevel
+  const modalDemo = el('div', {
+    className: 'dt-bevel-modal',
+    style: 'background: var(--color-primary); padding: var(--space-8); text-align: center;',
+  });
+  const modalInner = el('div', { style: 'background: var(--color-surface); padding: var(--space-6);' });
+  modalInner.appendChild(el('div', { style: 'font-weight: 700; text-transform: uppercase;' }, 'Modal Content'));
+  modalInner.appendChild(el('div', { style: 'color: var(--color-text-muted); margin-top: var(--space-2);' }, 'Large dual bottom bevels'));
+  modalDemo.appendChild(modalInner);
+
+  container.appendChild(
+    section('Modal Bevels', 'Dual bottom bevels at bevel-lg scale.',
+      modalDemo,
+      codeLabel('.dt-bevel-modal'),
+    ),
+  );
+
+  // Drawer Bevels
+  const drawerRight = el('div', {
+    className: 'dt-bevel-drawer-right',
+    style: 'background: var(--color-primary); padding: var(--space-6); width: 200px; height: 120px; display: flex; align-items: center; justify-content: center;',
+  });
+  drawerRight.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'RIGHT'));
+  const drawerLeft = el('div', {
+    className: 'dt-bevel-drawer-left',
+    style: 'background: var(--color-primary); padding: var(--space-6); width: 200px; height: 120px; display: flex; align-items: center; justify-content: center;',
+  });
+  drawerLeft.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'LEFT'));
+
+  container.appendChild(
+    section('Drawer Bevels', 'Exposed-edge bevels for sliding panels.',
+      row(drawerRight, drawerLeft),
+      codeLabel('.dt-bevel-drawer-right | .dt-bevel-drawer-left'),
+    ),
+  );
+
+  // Small Bevel Utility
+  const smallBevel = el('div', {
+    className: 'dt-bevel-sm',
+    style: 'background: var(--color-primary); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;',
+  });
+  smallBevel.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700; font-size: 0.75rem;' }, 'SM'));
+
+  container.appendChild(
+    section('Small Bevel Utility', 'For compact elements — arrows, stepper buttons.',
+      row(smallBevel),
+      codeLabel('.dt-bevel-sm'),
+    ),
+  );
+
+  // Accent Top
+  const accentDemo = el('div', {
+    className: 'dt-accent-top',
+    style: 'padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border);',
+  });
+  accentDemo.appendChild(el('span', { style: 'font-weight: 600; text-transform: uppercase;' }, 'Thick Top Border Accent'));
+
+  container.appendChild(
+    section('Accent Top', 'Used on accordion headers and menu items.',
+      accentDemo,
+      codeLabel('.dt-accent-top'),
+    ),
+  );
+}

packages/showcase/desktop/src/renderer/pages/forms.ts

@@ -0,0 +1,199 @@
+import { el, section, row, label, codeLabel } from '../utils/dom';
+
+export function renderFormsPage(container: HTMLElement) {
+  container.appendChild(el('h1', { className: 'page-title' }, 'Forms'));
+  container.appendChild(el('p', { className: 'page-subtitle' }, 'DT-branded form components. Angular styling with focus effects.'));
+
+  // Text Inputs
+  const normalInput = el('input', { type: 'text', placeholder: 'Normal input — click to focus', style: 'max-width: 400px;' }) as HTMLInputElement;
+  const errorInput = el('input', { type: 'text', className: 'error', placeholder: 'Error state input', style: 'max-width: 400px;' }) as HTMLInputElement;
+  const textarea = el('textarea', { placeholder: 'Textarea element', style: 'max-width: 400px; min-height: 80px;' }) as HTMLTextAreaElement;
+
+  container.appendChild(
+    section('Text Input', 'Sharp corners + focus glow bar. 2px solid border, no border-radius.',
+      normalInput,
+      codeLabel('input[type="text"] — focus glow bar on [data-brand="dt"]'),
+      el('br'),
+      errorInput,
+      codeLabel('input.error — red focus bar on [data-brand="dt"]'),
+      el('br'),
+      textarea,
+      codeLabel('textarea — same styling'),
+    ),
+  );
+
+  // Checkboxes
+  function checkbox(labelText: string, checked: boolean, disabled = false): HTMLElement {
+    const wrapper = el('label', { style: 'display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0;' });
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    if (checked) input.checked = true;
+    if (disabled) input.disabled = true;
+    wrapper.appendChild(input);
+    wrapper.appendChild(el('span', {}, labelText));
+    return wrapper;
+  }
+
+  container.appendChild(
+    section('Checkbox', 'Beveled hexagon shape via clip-path. 30% corner cuts.',
+      checkbox('Unchecked checkbox', false),
+      checkbox('Checked checkbox', true),
+      checkbox('Disabled checked', true, true),
+      checkbox('Disabled unchecked', false, true),
+      codeLabel('input[type="checkbox"] — hex bevel on [data-brand="dt"]'),
+    ),
+  );
+
+  // Switch / Toggle
+  function switchEl(labelText: string, checked: boolean, disabled = false): HTMLElement {
+    const wrapper = el('div', { style: 'display: flex; align-items: center; gap: 12px; margin-bottom: 8px;' });
+    const sw = el('label', { className: 'dt-switch' });
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    if (checked) input.checked = true;
+    if (disabled) input.disabled = true;
+    sw.appendChild(input);
+    sw.appendChild(el('div', { className: 'dt-switch-track' }));
+    sw.appendChild(el('div', { className: 'dt-switch-thumb' }));
+    wrapper.appendChild(sw);
+    wrapper.appendChild(el('span', {}, labelText));
+    return wrapper;
+  }
+
+  container.appendChild(
+    section('Switch / Toggle', 'Angular track + sliding square thumb. 48x26 track, 20x20 thumb.',
+      switchEl('Off', false),
+      switchEl('On', true),
+      switchEl('Disabled (on)', true, true),
+      switchEl('Disabled (off)', false, true),
+      codeLabel('.dt-switch > input + .dt-switch-track + .dt-switch-thumb'),
+    ),
+  );
+
+  // Radio Buttons
+  function radioGroup(name: string, options: { value: string; label: string; checked?: boolean; disabled?: boolean }[]): HTMLElement {
+    const group = el('div', { style: 'display: flex; flex-direction: column; gap: 4px;' });
+    for (const opt of options) {
+      const wrapper = el('label', { className: `dt-radio-option${opt.checked ? ' selected' : ''}`, style: 'cursor: pointer;' });
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = name;
+      input.value = opt.value;
+      if (opt.checked) input.checked = true;
+      if (opt.disabled) input.disabled = true;
+
+      input.addEventListener('change', () => {
+        group.querySelectorAll('.dt-radio-option').forEach((o) => o.classList.remove('selected'));
+        if (input.checked) wrapper.classList.add('selected');
+      });
+
+      wrapper.appendChild(input);
+      wrapper.appendChild(el('span', {}, opt.label));
+      group.appendChild(wrapper);
+    }
+    return group;
+  }
+
+  container.appendChild(
+    section('Radio Button', 'Hexagonal indicator via clip-path. Flat-top hexagon shape.',
+      radioGroup('demo-radio', [
+        { value: 'nfc', label: 'NFC (Near Field Communication)', checked: true },
+        { value: 'rfid', label: 'RFID (Radio Frequency ID)' },
+        { value: 'ble', label: 'BLE (Bluetooth Low Energy)' },
+      ]),
+      codeLabel('input[type="radio"] — hex indicator on [data-brand="dt"]'),
+    ),
+  );
+
+  // Progress Bar
+  function progressBar(value: number, showLabel = false): HTMLElement {
+    const wrapper = el('div');
+    const bar = el('div', { className: 'dt-progress' });
+    const fill = el('div', { className: 'dt-progress-fill', style: `width: ${value * 100}%;` });
+    bar.appendChild(fill);
+    wrapper.appendChild(bar);
+    if (showLabel) {
+      wrapper.appendChild(el('div', { className: 'dt-progress-label' }, `${Math.round(value * 100)}%`));
+    }
+    return wrapper;
+  }
+
+  container.appendChild(
+    section('Progress Bar', 'Angular, no border-radius. 4px default height.',
+      label('25%'),
+      progressBar(0.25),
+      label('50% WITH LABEL'),
+      progressBar(0.5, true),
+      label('75%'),
+      progressBar(0.75),
+      label('100%'),
+      progressBar(1.0, true),
+      codeLabel('.dt-progress > .dt-progress-fill'),
+    ),
+  );
+
+  // Accordion
+  function accordion(items: { title: string; content: string }[]): HTMLElement {
+    const acc = el('div', { className: 'dt-accordion' });
+    for (const item of items) {
+      const header = el('button', { className: 'dt-accordion-header', 'aria-expanded': 'false' });
+      header.appendChild(document.createTextNode(item.title));
+      header.appendChild(el('span', { className: 'dt-accordion-chevron' }));
+
+      const content = el('div', { className: 'dt-accordion-content', 'data-open': 'false' });
+      content.appendChild(el('div', { style: 'padding: var(--space-4);' }, item.content));
+
+      header.addEventListener('click', () => {
+        const expanded = header.getAttribute('aria-expanded') === 'true';
+        header.setAttribute('aria-expanded', String(!expanded));
+        content.setAttribute('data-open', String(!expanded));
+      });
+
+      acc.appendChild(header);
+      acc.appendChild(content);
+    }
+    return acc;
+  }
+
+  container.appendChild(
+    section('Accordion', 'Click headers to expand. 5px top border, chevron rotation.',
+      accordion([
+        { title: 'Size', content: 'Small, Medium, Large options available.' },
+        { title: 'Chip Type', content: 'NTAG, DESFire, MIFARE Classic.' },
+        { title: 'Frequency', content: '13.56 MHz (HF), 125 kHz (LF).' },
+      ]),
+      codeLabel('.dt-accordion > .dt-accordion-header + .dt-accordion-content'),
+    ),
+  );
+
+  // Quantity Stepper
+  function stepper(initialValue: number, min: number, max: number): HTMLElement {
+    let value = initialValue;
+    const wrapper = el('div', { className: 'dt-stepper' });
+    const minusBtn = el('button', { className: 'dt-stepper-btn' }, '\u2212') as HTMLButtonElement;
+    const valueEl = el('span', { className: 'dt-stepper-value' }, String(value));
+    const plusBtn = el('button', { className: 'dt-stepper-btn' }, '+') as HTMLButtonElement;
+
+    function update() {
+      valueEl.textContent = String(value);
+      minusBtn.disabled = value <= min;
+      plusBtn.disabled = value >= max;
+    }
+
+    minusBtn.addEventListener('click', () => { value = Math.max(min, value - 1); update(); });
+    plusBtn.addEventListener('click', () => { value = Math.min(max, value + 1); update(); });
+
+    wrapper.appendChild(minusBtn);
+    wrapper.appendChild(valueEl);
+    wrapper.appendChild(plusBtn);
+    update();
+    return wrapper;
+  }
+
+  container.appendChild(
+    section('Quantity Stepper', 'Beveled +/- buttons with center display.',
+      stepper(1, 0, 10),
+      codeLabel('.dt-stepper > .dt-stepper-btn + .dt-stepper-value + .dt-stepper-btn'),
+    ),
+  );
+}

packages/showcase/desktop/src/renderer/pages/glows.ts

@@ -0,0 +1,97 @@
+import { el, section, row, codeLabel } from '../utils/dom';
+
+export function renderGlowsPage(container: HTMLElement) {
+  container.appendChild(el('h1', { className: 'page-title' }, 'Glows'));
+  container.appendChild(el('p', { className: 'page-subtitle' }, 'Neon drop-shadow and text-shadow effects. Active on the DT brand.'));
+
+  // Button Glows
+  container.appendChild(
+    section('Button Glows', 'filter: drop-shadow() follows clip-path shape. Hover for enhanced glow.',
+      row(
+        el('button', { className: 'btn-primary' }, 'PRIMARY GLOW'),
+        el('button', { className: 'btn-danger' }, 'DANGER GLOW'),
+      ),
+      codeLabel('.btn-primary / .btn-danger — automatic on [data-brand="dt"]'),
+      el('br'),
+      row(
+        el('button', { className: 'btn-secondary' }, 'SECONDARY (HOVER)'),
+      ),
+      codeLabel('.btn-secondary — glow on hover'),
+    ),
+  );
+
+  // Link Glow
+  const link = el('a', { href: '#', style: 'color: var(--color-primary); font-weight: 600; font-size: 1.125rem;' }, 'Hover this link for text glow');
+
+  container.appendChild(
+    section('Link Glow', 'text-shadow on hover for anchor elements.',
+      row(link),
+      codeLabel('a:hover — automatic on [data-brand="dt"]'),
+    ),
+  );
+
+  // Terminal Inset
+  const terminal = el('div', { className: 'terminal dt-accent-top' });
+  terminal.appendChild(el('code', {}, '$ dt-web-theme --install\n> Installing design tokens...\n> Applying cyberpunk aesthetic...\n> Done. Welcome to the future.'));
+
+  container.appendChild(
+    section('Terminal Inset Glow', 'Inset + outer box-shadow. No clip-path so box-shadow works directly.',
+      terminal,
+      codeLabel('.terminal — automatic on [data-brand="dt"]'),
+    ),
+  );
+
+  // Card Hover Glow
+  const card = el('div', { className: 'card', style: 'padding: var(--space-6); cursor: pointer;' });
+  card.appendChild(el('div', { className: 'card-title' }, 'HOVER ME'));
+  card.appendChild(el('div', { className: 'card-body' }, 'Cards get a drop-shadow glow on hover.'));
+
+  container.appendChild(
+    section('Card Hover Glow', 'filter: drop-shadow() respects the beveled clip-path.',
+      card,
+      codeLabel('.card:hover — automatic on [data-brand="dt"]'),
+    ),
+  );
+
+  // Input Focus Glow
+  const input = el('input', {
+    type: 'text',
+    className: 'input',
+    placeholder: 'Click to focus — see the glow bar',
+    style: 'max-width: 400px;',
+  }) as HTMLInputElement;
+
+  container.appendChild(
+    section('Input Focus Glow', 'box-shadow: 0 4px 0 1px — bright bar beneath the input.',
+      input,
+      codeLabel('.input:focus — automatic on [data-brand="dt"]'),
+    ),
+  );
+
+  // Generic Glow Utilities
+  const glowBox = el('div', {
+    className: 'dt-glow',
+    style: 'background: var(--color-primary); padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; color: var(--color-bg);',
+  }, '.dt-glow');
+  const glowStrong = el('div', {
+    className: 'dt-glow-strong',
+    style: 'background: var(--color-primary); padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; color: var(--color-bg);',
+  }, '.dt-glow-strong');
+  const glowInset = el('div', {
+    className: 'dt-glow-inset',
+    style: 'padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; border: 1px solid var(--color-border);',
+  }, '.dt-glow-inset');
+  const textGlow = el('div', {
+    className: 'dt-text-glow',
+    style: 'font-size: 1.25rem; font-weight: 700; color: var(--color-primary); display: inline-block;',
+  }, '.dt-text-glow');
+
+  container.appendChild(
+    section('Glow Utilities', 'Generic utility classes for applying glow effects to any element.',
+      row(glowBox, glowStrong),
+      codeLabel('.dt-glow | .dt-glow-strong'),
+      row(glowInset, textGlow),
+      codeLabel('.dt-glow-inset | .dt-text-glow'),
+    ),
+  );
+}

packages/showcase/desktop/src/renderer/pages/home.ts

@@ -0,0 +1,33 @@
+import { el, section } from '../utils/dom';
+
+export function renderHomePage(container: HTMLElement) {
+  container.appendChild(el('h1', { className: 'page-title' }, 'DT Design System'));
+  container.appendChild(el('p', { className: 'page-subtitle' }, 'Web CSS component showcase — switch brands and modes in the sidebar.'));
+
+  const categories = [
+    { hash: 'bevels', title: 'Bevels', desc: 'Angular clip-path patterns — cards, buttons, badges, media frames, modals, drawers' },
+    { hash: 'glows', title: 'Glows', desc: 'Neon drop-shadow and text-shadow effects for the DT brand' },
+    { hash: 'forms', title: 'Forms', desc: 'Text inputs, checkboxes, switches, radios, progress bars, accordions, steppers' },
+    { hash: 'tokens', title: 'Tokens', desc: 'Color palette, typography, spacing, and shape values for the active brand' },
+  ];
+
+  for (const cat of categories) {
+    const link = el('a', { href: `#/${cat.hash}`, className: 'home-card-link' });
+    const card = el('div', { className: 'card' });
+    card.appendChild(el('div', { className: 'card-title' }, cat.title.toUpperCase()));
+    card.appendChild(el('div', { className: 'card-body' }, cat.desc));
+    link.appendChild(card);
+    container.appendChild(link);
+  }
+
+  // Quick overview terminal
+  container.appendChild(
+    section('Quick Start', 'Include the CSS and set data attributes on your HTML element.',
+      el('div', { className: 'terminal dt-accent-top' },
+        el('code', {},
+          '<link rel="stylesheet" href="@dangerousthings/web">\n<html data-brand="dt" data-theme="dark">'
+        ),
+      ),
+    ),
+  );
+}

packages/showcase/desktop/src/renderer/pages/tokens.ts

@@ -0,0 +1,141 @@
+import { brands } from '@dangerousthings/tokens';
+import type { ThemeBrand } from '@dangerousthings/tokens';
+import { el, section, codeLabel } from '../utils/dom';
+import { getCurrentBrand } from '../brand-switcher';
+
+export function renderTokensPage(container: HTMLElement) {
+  container.appendChild(el('h1', { className: 'page-title' }, 'Tokens'));
+  container.appendChild(el('p', { className: 'page-subtitle' }, 'Design token values for the active brand. Switch brands in the sidebar.'));
+
+  const brandId = getCurrentBrand();
+  const brand = brands[brandId];
+
+  if (!brand) return;
+
+  // Color Palette — Dark Mode
+  const darkColors = brand.dark;
+  const colorEntries: [string, string][] = Object.entries(darkColors);
+
+  const colorsGrid = el('div', { style: 'display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3);' });
+
+  for (const [name, hex] of colorEntries) {
+    const swatch = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
+    const colorBox = el('div', { style: `width: 32px; height: 32px; background: ${hex}; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0;` });
+    const info = el('div');
+    info.appendChild(el('div', { style: 'font-weight: 600; font-size: 0.8125rem;' }, name));
+    info.appendChild(el('div', { style: 'font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.5;' }, hex));
+    swatch.appendChild(colorBox);
+    swatch.appendChild(info);
+    colorsGrid.appendChild(swatch);
+  }
+
+  container.appendChild(
+    section(`Color Palette — ${brand.name} (Dark Mode)`, brand.description,
+      colorsGrid,
+    ),
+  );
+
+  // Light Mode
+  const lightColors = brand.light;
+  const lightEntries: [string, string][] = Object.entries(lightColors);
+
+  const lightGrid = el('div', { style: 'display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3);' });
+
+  for (const [name, hex] of lightEntries) {
+    const swatch = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
+    const colorBox = el('div', { style: `width: 32px; height: 32px; background: ${hex}; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0;` });
+    const info = el('div');
+    info.appendChild(el('div', { style: 'font-weight: 600; font-size: 0.8125rem;' }, name));
+    info.appendChild(el('div', { style: 'font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.5;' }, hex));
+    swatch.appendChild(colorBox);
+    swatch.appendChild(info);
+    lightGrid.appendChild(swatch);
+  }
+
+  container.appendChild(
+    section(`Color Palette — ${brand.name} (Light Mode)`, 'Light mode color tokens.',
+      lightGrid,
+    ),
+  );
+
+  // Typography
+  const typo = el('div', { className: 'terminal', style: 'margin-bottom: var(--space-4);' });
+  typo.appendChild(el('code', {},
+    `heading: ${brand.typography.heading}\nbody:    ${brand.typography.body}\nmono:    ${brand.typography.mono}`
+  ));
+
+  container.appendChild(
+    section('Typography', 'Font family tokens for headings, body text, and monospace.',
+      typo,
+    ),
+  );
+
+  // Typography Scale Demo
+  const scaleItems = [
+    { tag: 'h1', label: 'Heading 1', style: 'font-family: var(--font-heading); font-size: 2rem; font-weight: 900;' },
+    { tag: 'h2', label: 'Heading 2', style: 'font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;' },
+    { tag: 'h3', label: 'Heading 3', style: 'font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600;' },
+    { tag: 'p', label: 'Body text — the quick brown fox jumps over the lazy dog', style: 'font-family: var(--font-body); font-size: 1rem;' },
+    { tag: 'code', label: 'const monospace = "code";', style: 'font-family: var(--font-mono); font-size: 0.875rem;' },
+  ];
+
+  const scaleDemo = el('div', { style: 'display: flex; flex-direction: column; gap: var(--space-3);' });
+  for (const item of scaleItems) {
+    scaleDemo.appendChild(el(item.tag, { style: item.style }, item.label));
+  }
+
+  container.appendChild(
+    section('Typography Scale', 'Live rendering with the current brand\'s font families.',
+      scaleDemo,
+    ),
+  );
+
+  // Shape Tokens
+  const shape = el('div', { className: 'terminal', style: 'margin-bottom: var(--space-4);' });
+  shape.appendChild(el('code', {},
+    `bevelSm:  ${brand.shape.bevelSm}\nbevelMd:  ${brand.shape.bevelMd}\nbevelLg:  ${brand.shape.bevelLg}\nradiusSm: ${brand.shape.radiusSm}\nradius:   ${brand.shape.radius}\nradiusLg: ${brand.shape.radiusLg}`
+  ));
+
+  container.appendChild(
+    section('Shape Tokens', 'Bevel and radius values determine the visual language — angular (DT) vs rounded (Classic).',
+      shape,
+    ),
+  );
+
+  // Spacing Scale
+  const spacings = [
+    { name: '--space-1', value: '0.25rem (4px)' },
+    { name: '--space-2', value: '0.5rem (8px)' },
+    { name: '--space-3', value: '0.75rem (12px)' },
+    { name: '--space-4', value: '1rem (16px)' },
+    { name: '--space-6', value: '1.5rem (24px)' },
+    { name: '--space-8', value: '2rem (32px)' },
+  ];
+
+  const spacingDemo = el('div', { style: 'display: flex; flex-direction: column; gap: var(--space-2);' });
+  for (const sp of spacings) {
+    const row = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
+    row.appendChild(el('div', { style: `width: ${sp.name.replace('--', 'var(--') + ')'}; width: calc(${sp.value.split(' ')[0]} * 6); height: 12px; background: var(--color-primary); opacity: 0.6;` }));
+    row.appendChild(el('span', { style: 'font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6;' }, `${sp.name}: ${sp.value}`));
+    spacingDemo.appendChild(row);
+  }
+
+  container.appendChild(
+    section('Spacing Scale', 'Shared spacing tokens across all brands.',
+      spacingDemo,
+    ),
+  );
+
+  // CSS Custom Properties reference
+  const cssRef = el('div', { className: 'terminal' });
+  cssRef.appendChild(el('code', {},
+    `/* Generated CSS custom properties */\n--color-bg: ${darkColors.bg};\n--color-primary: ${darkColors.primary};\n--color-secondary: ${darkColors.secondary};\n--color-error: ${darkColors.error};\n--color-success: ${darkColors.success};\n--bevel-sm: ${brand.shape.bevelSm};\n--bevel-md: ${brand.shape.bevelMd};\n--font-heading: ${brand.typography.heading};`
+  ));
+
+  container.appendChild(
+    section('CSS Custom Properties', 'These are generated from TypeScript tokens and applied per-brand via data-brand attribute.',
+      cssRef,
+      codeLabel('See packages/tokens/src/scripts/generate-css.ts'),
+    ),
+  );
+}

packages/showcase/desktop/src/renderer/style.css

@@ -0,0 +1,305 @@
+/* Showcase App Layout */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  min-height: 100vh;
+}
+
+#app {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* ---- Sidebar ---- */
+#sidebar {
+  width: 220px;
+  min-height: 100vh;
+  background: var(--color-surface);
+  border-right: 2px solid var(--color-border);
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-y: auto;
+}
+
+.nav-title {
+  font-family: var(--font-heading);
+  font-weight: 900;
+  font-size: 0.875rem;
+  letter-spacing: 0.1em;
+  color: var(--color-primary);
+  text-transform: uppercase;
+  padding-bottom: var(--space-4);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.brand-switcher-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.brand-btn {
+  display: block;
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 2px solid var(--color-primary);
+  background: transparent;
+  color: var(--color-primary);
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  text-transform: uppercase;
+  transition: all var(--transition-fast);
+}
+
+.brand-btn:hover {
+  background: rgba(var(--color-primary-rgb), 0.1);
+}
+
+.brand-btn.active {
+  background: var(--color-primary);
+  color: var(--color-bg);
+}
+
+.mode-switcher {
+  display: flex;
+  gap: var(--space-1);
+  margin-top: var(--space-2);
+}
+
+.mode-btn {
+  flex: 1;
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 0.625rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-transform: uppercase;
+  transition: all var(--transition-fast);
+}
+
+.mode-btn.active {
+  background: var(--color-primary);
+  color: var(--color-bg);
+  border-color: var(--color-primary);
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.nav-link {
+  display: block;
+  padding: var(--space-2) var(--space-3);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.875rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  border-left: 3px solid transparent;
+  transition: all var(--transition-fast);
+}
+
+.nav-link:hover {
+  color: var(--color-primary);
+  border-left-color: var(--color-primary);
+  background: rgba(var(--color-primary-rgb), 0.05);
+}
+
+.nav-link.active {
+  color: var(--color-primary);
+  border-left-color: var(--color-primary);
+}
+
+/* ---- Main Content ---- */
+#content {
+  flex: 1;
+  margin-left: 220px;
+  padding: var(--space-8);
+  max-width: 900px;
+}
+
+/* ---- Demo Sections ---- */
+.demo-section {
+  margin-bottom: var(--space-8);
+}
+
+.demo-section h2 {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--color-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 2px solid var(--color-primary);
+}
+
+.demo-description {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  margin-bottom: var(--space-4);
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  margin-bottom: var(--space-4);
+}
+
+.demo-label {
+  color: var(--color-text-muted);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-2);
+  margin-top: var(--space-4);
+}
+
+.code-label {
+  color: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.35);
+  font-size: 0.625rem;
+  font-family: var(--font-mono);
+  margin-top: var(--space-1);
+}
+
+/* ---- Shared Component Base Styles ---- */
+
+/* Buttons */
+.btn-primary,
+.btn-secondary,
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3) var(--space-6);
+  font-weight: 700;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: none;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-bg);
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+
+.btn-danger {
+  background: var(--color-error);
+  color: var(--color-bg);
+}
+
+.btn-danger:hover {
+  opacity: 0.9;
+}
+
+/* Cards */
+.card {
+  padding: var(--space-6);
+  margin-bottom: var(--space-4);
+}
+
+.card-title {
+  font-weight: 900;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.card-body {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: var(--space-2) var(--space-3);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Inputs */
+.input,
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  padding: var(--space-3) var(--space-4);
+  font-size: 0.875rem;
+  width: 100%;
+  max-width: 400px;
+  border: 2px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text-primary);
+}
+
+.input:focus,
+input:focus {
+  outline: none;
+}
+
+/* Terminal */
+.terminal {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  padding: var(--space-6);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-accent, var(--color-primary));
+  line-height: 1.6;
+}
+
+/* Page title */
+.page-title {
+  font-family: var(--font-heading);
+  font-weight: 900;
+  font-size: 1.75rem;
+  color: var(--color-primary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: var(--space-2);
+}
+
+.page-subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  margin-bottom: var(--space-8);
+}

packages/showcase/desktop/src/renderer/utils/dom.ts

@@ -0,0 +1,46 @@
+export function el(
+  tag: string,
+  attrs?: Record<string, string>,
+  ...children: (string | HTMLElement)[]
+): HTMLElement {
+  const element = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === 'className') {
+        element.className = value;
+      } else {
+        element.setAttribute(key, value);
+      }
+    }
+  }
+  for (const child of children) {
+    if (typeof child === 'string') {
+      element.appendChild(document.createTextNode(child));
+    } else {
+      element.appendChild(child);
+    }
+  }
+  return element;
+}
+
+export function section(title: string, description: string, ...children: HTMLElement[]): HTMLElement {
+  const container = el('div', { className: 'demo-section' });
+  container.appendChild(el('h2', {}, title));
+  container.appendChild(el('p', { className: 'demo-description' }, description));
+  for (const child of children) {
+    container.appendChild(child);
+  }
+  return container;
+}
+
+export function row(...children: HTMLElement[]): HTMLElement {
+  return el('div', { className: 'demo-row' }, ...children);
+}
+
+export function label(text: string): HTMLElement {
+  return el('div', { className: 'demo-label' }, text);
+}
+
+export function codeLabel(text: string): HTMLElement {
+  return el('div', { className: 'code-label' }, text);
+}

packages/showcase/desktop/src/renderer/utils/router.ts

@@ -0,0 +1,28 @@
+export function initRouter(
+  routes: Record<string, (container: HTMLElement) => void>,
+  container: HTMLElement,
+) {
+  function navigate() {
+    const hash = window.location.hash.replace('#/', '').replace('#', '');
+    const render = routes[hash] || routes[''];
+
+    // Update active nav link
+    document.querySelectorAll('.nav-link').forEach((link) => {
+      const href = (link as HTMLAnchorElement).getAttribute('href') || '';
+      const linkHash = href.replace('#/', '').replace('#', '');
+      link.classList.toggle('active', linkHash === hash);
+    });
+
+    // Clear content safely
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+
+    if (render) {
+      render(container);
+    }
+  }
+
+  window.addEventListener('hashchange', navigate);
+  navigate();
+}

packages/showcase/desktop/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/renderer",
+    "rootDir": "src/renderer",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noEmit": true
+  },
+  "include": ["src/renderer"]
+}

packages/showcase/desktop/tsconfig.main.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/main",
+    "rootDir": "src/main",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "lib": ["ES2022"],
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": false
+  },
+  "include": ["src/main"]
+}

packages/showcase/desktop/vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+
+export default defineConfig({
+  root: 'src/renderer',
+  base: './',
+  build: {
+    outDir: '../../dist/renderer',
+    emptyOutDir: true,
+  },
+  resolve: {
+    alias: {
+      '@dangerousthings/web': path.resolve(__dirname, '../../web/dist'),
+    },
+  },
+});

packages/showcase/mobile/App.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useFonts } from 'expo-font';
+import { NavigationContainer } from '@react-navigation/native';
+import { DTThemeProvider } from '@dangerousthings/react-native';
+import { BrandProvider, useBrand } from './src/brand/BrandContext';
+import { RootNavigator } from './src/navigation/RootNavigator';
+import { useNavigationTheme } from './src/navigation/navigationTheme';
+
+function AppContent() {
+  const { theme } = useBrand();
+  const navigationTheme = useNavigationTheme();
+
+  return (
+    <DTThemeProvider theme={theme}>
+      <NavigationContainer theme={navigationTheme}>
+        <RootNavigator />
+      </NavigationContainer>
+    </DTThemeProvider>
+  );
+}
+
+export default function App() {
+  const [fontsLoaded] = useFonts({
+    Tektur: require('./assets/fonts/Tektur-VariableFont_wdth,wght.ttf'),
+    'Tektur-Regular': require('./assets/fonts/Tektur-Regular.ttf'),
+    'Tektur-Medium': require('./assets/fonts/Tektur-Medium.ttf'),
+    'Tektur-SemiBold': require('./assets/fonts/Tektur-SemiBold.ttf'),
+    'Tektur-Bold': require('./assets/fonts/Tektur-Bold.ttf'),
+  });
+
+  if (!fontsLoaded) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" color="#00FFFF" />
+      </View>
+    );
+  }
+
+  return (
+    <BrandProvider initialBrand="dt">
+      <AppContent />
+    </BrandProvider>
+  );
+}

packages/showcase/mobile/android/.gitignore

@@ -0,0 +1,16 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+
+# Bundle artifacts
+*.jsbundle

packages/showcase/mobile/android/app/build.gradle

@@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
+ */
+def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace 'com.dangerousthings.showcase'
+    defaultConfig {
+        applicationId 'com.dangerousthings.showcase'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
+            shrinkResources enableShrinkResources.toBoolean()
+            minifyEnabled enableMinifyInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
+            crunchPngs enablePngCrunchInRelease.toBoolean()
+        }
+    }
+    packagingOptions {
+        jniLibs {
+            def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
+            useLegacyPackaging enableLegacyPackaging.toBoolean()
+        }
+    }
+    androidResources {
+        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
+        }
+    }
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

packages/showcase/mobile/android/app/proguard-rules.pro

@@ -0,0 +1,14 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
+# Add any project specific keep options here:

packages/showcase/mobile/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

packages/showcase/mobile/android/app/src/debugOptimized/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>

packages/showcase/mobile/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,25 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET"/>
+  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+  <uses-permission android:name="android.permission.VIBRATE"/>
+  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+  <queries>
+    <intent>
+      <action android:name="android.intent.action.VIEW"/>
+      <category android:name="android.intent.category.BROWSABLE"/>
+      <data android:scheme="https"/>
+    </intent>
+  </queries>
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
+    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>

packages/showcase/mobile/android/app/src/main/java/com/dangerousthings/showcase/MainActivity.kt

@@ -0,0 +1,61 @@
+package com.dangerousthings.showcase
+
+import android.os.Build
+import android.os.Bundle
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+import expo.modules.ReactActivityDelegateWrapper
+
+class MainActivity : ReactActivity() {
+  override fun onCreate(savedInstanceState: Bundle?) {
+    // Set the theme to AppTheme BEFORE onCreate to support
+    // coloring the background, status bar, and navigation bar.
+    // This is required for expo-splash-screen.
+    setTheme(R.style.AppTheme);
+    super.onCreate(null)
+  }
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "main"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
+          this,
+          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
+          object : DefaultReactActivityDelegate(
+              this,
+              mainComponentName,
+              fabricEnabled
+          ){})
+  }
+
+  /**
+    * Align the back button behavior with Android S
+    * where moving root activities to background instead of finishing activities.
+    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
+    */
+  override fun invokeDefaultOnBackPressed() {
+      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
+          if (!moveTaskToBack(false)) {
+              // For non-root activities, use the default implementation to finish them.
+              super.invokeDefaultOnBackPressed()
+          }
+          return
+      }
+
+      // Use the default back button implementation on Android S
+      // because it's doing more than [Activity.moveTaskToBack] in fact.
+      super.invokeDefaultOnBackPressed()
+  }
+}

packages/showcase/mobile/android/app/src/main/java/com/dangerousthings/showcase/MainApplication.kt

@@ -0,0 +1,56 @@
+package com.dangerousthings.showcase
+
+import android.app.Application
+import android.content.res.Configuration
+
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.ReactHost
+import com.facebook.react.common.ReleaseLevel
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
+import com.facebook.react.defaults.DefaultReactNativeHost
+
+import expo.modules.ApplicationLifecycleDispatcher
+import expo.modules.ReactNativeHostWrapper
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
+      this,
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
+
+          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
+
+          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      }
+  )
+
+  override val reactHost: ReactHost
+    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    DefaultNewArchitectureEntryPoint.releaseLevel = try {
+      ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
+    } catch (e: IllegalArgumentException) {
+      ReleaseLevel.STABLE
+    }
+    loadReactNative(this)
+    ApplicationLifecycleDispatcher.onApplicationCreate(this)
+  }
+
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
+  }
+}

packages/showcase/mobile/android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,3 @@
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:drawable="@color/splashscreen_background"/>
+</layer-list>

packages/showcase/mobile/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

packages/showcase/mobile/android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1 @@
+<resources/>

packages/showcase/mobile/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,5 @@
+<resources>
+  <color name="splashscreen_background">#000000</color>
+  <color name="colorPrimary">#023c69</color>
+  <color name="colorPrimaryDark">#000000</color>
+</resources>

packages/showcase/mobile/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,5 @@
+<resources>
+  <string name="app_name">DT Design System Showcase</string>
+  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
+  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+</resources>

packages/showcase/mobile/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,11 @@
+<resources xmlns:tools="http://schemas.android.com/tools">
+  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
+    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="android:statusBarColor">#000000</item>
+  </style>
+  <style name="Theme.App.SplashScreen" parent="AppTheme">
+    <item name="android:windowBackground">@drawable/ic_launcher_background</item>
+  </style>
+</resources>

packages/showcase/mobile/android/build.gradle

@@ -0,0 +1,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath('com.android.tools.build:gradle')
+    classpath('com.facebook.react:react-native-gradle-plugin')
+    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
+  }
+}
+
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://www.jitpack.io' }
+  }
+}
+
+apply plugin: "expo-root-project"
+apply plugin: "com.facebook.react.rootproject"

packages/showcase/mobile/android/gradle.properties

@@ -0,0 +1,65 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=true
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
+
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=true
+
+# Enable GIF support in React Native images (~200 B increase)
+expo.gif.enabled=true
+# Enable webp support in React Native images (~85 KB increase)
+expo.webp.enabled=true
+# Enable animated webp support (~3.4 MB increase)
+# Disabled by default because iOS doesn't support animated webp
+expo.webp.animated=false
+
+# Enable network inspector
+EX_DEV_CLIENT_NETWORK_INSPECTOR=true
+
+# Use legacy packaging to compress native libraries in the resulting APK.
+expo.useLegacyPackaging=false
+
+# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
+# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
+expo.edgeToEdgeEnabled=true

packages/showcase/mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

packages/showcase/mobile/android/gradlew

@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

packages/showcase/mobile/android/gradlew.bat

@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

packages/showcase/mobile/android/settings.gradle

@@ -0,0 +1,39 @@
+pluginManagement {
+  def reactNativeGradlePlugin = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
+    }.standardOutput.asText.get().trim()
+  ).getParentFile().absolutePath
+  includeBuild(reactNativeGradlePlugin)
+  
+  def expoPluginsPath = new File(
+    providers.exec {
+      workingDir(rootDir)
+      commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+    }.standardOutput.asText.get().trim(),
+    "../android/expo-gradle-plugin"
+  ).absolutePath
+  includeBuild(expoPluginsPath)
+}
+
+plugins {
+  id("com.facebook.react.settings")
+  id("expo-autolinking-settings")
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
+    ex.autolinkLibrariesFromCommand()
+  } else {
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+  }
+}
+expoAutolinking.useExpoModules()
+
+rootProject.name = 'DT Design System Showcase'
+
+expoAutolinking.useExpoVersionCatalog()
+
+include ':app'
+includeBuild(expoAutolinking.reactNativeGradlePlugin)

packages/showcase/mobile/app.json

@@ -0,0 +1,23 @@
+{
+  "expo": {
+    "name": "DT Design System Showcase",
+    "slug": "dt-showcase",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "dark",
+    "newArchEnabled": true,
+    "splash": {
+      "backgroundColor": "#000000"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.dangerousthings.showcase"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#000000"
+      },
+      "package": "com.dangerousthings.showcase"
+    }
+  }
+}

packages/showcase/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

packages/showcase/mobile/eas.json

@@ -0,0 +1,24 @@
+{
+  "cli": {
+    "version": ">= 12.0.0"
+  },
+  "build": {
+    "preview": {
+      "android": {
+        "buildType": "apk"
+      },
+      "ios": {
+        "simulator": true
+      },
+      "distribution": "internal"
+    },
+    "production": {
+      "android": {
+        "buildType": "apk"
+      },
+      "ios": {
+        "distribution": "store"
+      }
+    }
+  }
+}

packages/showcase/mobile/index.js

@@ -0,0 +1,4 @@
+import { registerRootComponent } from "expo";
+import App from "./App";
+
+registerRootComponent(App);

packages/showcase/mobile/ios/.gitignore

@@ -0,0 +1,30 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+.xcode.env.local
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/Pods/

packages/showcase/mobile/ios/.xcode.env

@@ -0,0 +1,11 @@
+# This `.xcode.env` file is versioned and is used to source the environment
+# used when running script phases inside Xcode.
+# To customize your local environment, you can create an `.xcode.env.local`
+# file that is not versioned.
+
+# NODE_BINARY variable contains the PATH to the node executable.
+#
+# Customize the NODE_BINARY variable here.
+# For example, to use nvm with brew, add the following line
+# . "$(brew --prefix nvm)/nvm.sh" --no-use
+export NODE_BINARY=$(command -v node)

packages/showcase/mobile/ios/DTDesignSystemShowcase.xcodeproj/project.pbxproj

@@ -0,0 +1,436 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 54;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+		3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
+		BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
+		F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = DTDesignSystemShowcase.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = DTDesignSystemShowcase/Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = DTDesignSystemShowcase/Info.plist; sourceTree = "<group>"; };
+		AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = DTDesignSystemShowcase/SplashScreen.storyboard; sourceTree = "<group>"; };
+		BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
+		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		F11748412D0307B40044C1D9 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = DTDesignSystemShowcase/AppDelegate.swift; sourceTree = "<group>"; };
+		F11748442D0722820044C1D9 /* DTDesignSystemShowcase-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "DTDesignSystemShowcase-Bridging-Header.h"; path = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h"; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		13B07FAE1A68108700A75B9A /* DTDesignSystemShowcase */ = {
+			isa = PBXGroup;
+			children = (
+				F11748412D0307B40044C1D9 /* AppDelegate.swift */,
+				F11748442D0722820044C1D9 /* DTDesignSystemShowcase-Bridging-Header.h */,
+				BB2F792B24A3F905000567C9 /* Supporting */,
+				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				13B07FB61A68108700A75B9A /* Info.plist */,
+				AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
+			);
+			name = DTDesignSystemShowcase;
+			sourceTree = "<group>";
+		};
+		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
+			isa = PBXGroup;
+			children = (
+			);
+			name = Libraries;
+			sourceTree = "<group>";
+		};
+		83CBB9F61A601CBA00E9B192 = {
+			isa = PBXGroup;
+			children = (
+				13B07FAE1A68108700A75B9A /* DTDesignSystemShowcase */,
+				832341AE1AAA6A7D00B99B32 /* Libraries */,
+				83CBBA001A601CBA00E9B192 /* Products */,
+				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+			);
+			indentWidth = 2;
+			sourceTree = "<group>";
+			tabWidth = 2;
+			usesTabs = 0;
+		};
+		83CBBA001A601CBA00E9B192 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		BB2F792B24A3F905000567C9 /* Supporting */ = {
+			isa = PBXGroup;
+			children = (
+				BB2F792C24A3F905000567C9 /* Expo.plist */,
+			);
+			name = Supporting;
+			path = DTDesignSystemShowcase/Supporting;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		13B07F861A680F5B00A75B9A /* DTDesignSystemShowcase */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "DTDesignSystemShowcase" */;
+			buildPhases = (
+				08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
+				13B07F871A680F5B00A75B9A /* Sources */,
+				13B07F8C1A680F5B00A75B9A /* Frameworks */,
+				13B07F8E1A680F5B00A75B9A /* Resources */,
+				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = DTDesignSystemShowcase;
+			productName = DTDesignSystemShowcase;
+			productReference = 13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		83CBB9F71A601CBA00E9B192 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 1130;
+				TargetAttributes = {
+					13B07F861A680F5B00A75B9A = {
+						LastSwiftMigration = 1250;
+					};
+				};
+			};
+			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "DTDesignSystemShowcase" */;
+			compatibilityVersion = "Xcode 3.2";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 83CBB9F61A601CBA00E9B192;
+			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				13B07F861A680F5B00A75B9A /* DTDesignSystemShowcase */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		13B07F8E1A680F5B00A75B9A /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
+				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
+			isa = PBXShellScriptBuildPhase;
+			alwaysOutOfDate = 1;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"$(SRCROOT)/.xcode.env",
+				"$(SRCROOT)/.xcode.env.local",
+			);
+			name = "Bundle React Native code and images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "if [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n  export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n  # Set the entry JS file using the bundler's entry resolution.\n  export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" \"$PROJECT_ROOT\" ios absolute | tail -n 1)\"\nfi\n\nif [[ -z \"$CLI_PATH\" ]]; then\n  # Use Expo CLI\n  export CLI_PATH=\"$(\"$NODE_BINARY\" --print \"require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })\")\"\nfi\nif [[ -z \"$BUNDLE_COMMAND\" ]]; then\n  # Default Expo CLI command for bundling\n  export BUNDLE_COMMAND=\"export:embed\"\nfi\n\n# Source .xcode.env.updates if it exists to allow\n# SKIP_BUNDLING to be unset if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.updates\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.updates\"\nfi\n# Source local changes to allow overrides\n# if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n  source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n`\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"`\n\n";
+		};
+		08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-DTDesignSystemShowcase-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-DTDesignSystemShowcase/Pods-DTDesignSystemShowcase-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/EXUpdates/EXUpdates.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXUpdates.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-DTDesignSystemShowcase/Pods-DTDesignSystemShowcase-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		13B07F871A680F5B00A75B9A /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin XCBuildConfiguration section */
+		13B07F941A680F5B00A75B9A /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				ENABLE_BITCODE = NO;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"$(inherited)",
+					"FB_SONARKIT_ENABLED=1",
+				);
+				INFOPLIST_FILE = DTDesignSystemShowcase/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.dangerousthings.showcase";
+				PRODUCT_NAME = "DTDesignSystemShowcase";
+				SWIFT_OBJC_BRIDGING_HEADER = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+				TARGETED_DEVICE_FAMILY = "1,2";
+				CODE_SIGN_ENTITLEMENTS = DTDesignSystemShowcase/DTDesignSystemShowcase.entitlements;
+			};
+			name = Debug;
+		};
+		13B07F951A680F5B00A75B9A /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = DTDesignSystemShowcase/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					"$(inherited)",
+					"@executable_path/Frameworks",
+				);
+				MARKETING_VERSION = 1.0;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.dangerousthings.showcase";
+				PRODUCT_NAME = "DTDesignSystemShowcase";
+				SWIFT_OBJC_BRIDGING_HEADER = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+				TARGETED_DEVICE_FAMILY = "1,2";
+				CODE_SIGN_ENTITLEMENTS = DTDesignSystemShowcase/DTDesignSystemShowcase.entitlements;
+			};
+			name = Release;
+		};
+		83CBBA201A601CBA00E9B192 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+				);
+				LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+			};
+			name = Debug;
+		};
+		83CBBA211A601CBA00E9B192 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = YES;
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				LD_RUNPATH_SEARCH_PATHS = (
+					/usr/lib/swift,
+					"$(inherited)",
+				);
+				LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "DTDesignSystemShowcase" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				13B07F941A680F5B00A75B9A /* Debug */,
+				13B07F951A680F5B00A75B9A /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "DTDesignSystemShowcase" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				83CBBA201A601CBA00E9B192 /* Debug */,
+				83CBBA211A601CBA00E9B192 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
+}

packages/showcase/mobile/ios/DTDesignSystemShowcase.xcodeproj/xcshareddata/xcschemes/DTDesignSystemShowcase.xcscheme

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1130"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "DTDesignSystemShowcase.app"
+               BlueprintName = "DTDesignSystemShowcase"
+               ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "DTDesignSystemShowcaseTests.xctest"
+               BlueprintName = "DTDesignSystemShowcaseTests"
+               ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "DTDesignSystemShowcase.app"
+            BlueprintName = "DTDesignSystemShowcase"
+            ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "DTDesignSystemShowcase.app"
+            BlueprintName = "DTDesignSystemShowcase"
+            ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

packages/showcase/mobile/ios/DTDesignSystemShowcase/AppDelegate.swift

@@ -0,0 +1,70 @@
+import Expo
+import React
+import ReactAppDependencyProvider
+
+@UIApplicationMain
+public class AppDelegate: ExpoAppDelegate {
+  var window: UIWindow?
+
+  var reactNativeDelegate: ExpoReactNativeFactoryDelegate?
+  var reactNativeFactory: RCTReactNativeFactory?
+
+  public override func application(
+    _ application: UIApplication,
+    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+  ) -> Bool {
+    let delegate = ReactNativeDelegate()
+    let factory = ExpoReactNativeFactory(delegate: delegate)
+    delegate.dependencyProvider = RCTAppDependencyProvider()
+
+    reactNativeDelegate = delegate
+    reactNativeFactory = factory
+    bindReactNativeFactory(factory)
+
+#if os(iOS) || os(tvOS)
+    window = UIWindow(frame: UIScreen.main.bounds)
+    factory.startReactNative(
+      withModuleName: "main",
+      in: window,
+      launchOptions: launchOptions)
+#endif
+
+    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
+  }
+
+  // Linking API
+  public override func application(
+    _ app: UIApplication,
+    open url: URL,
+    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
+  ) -> Bool {
+    return super.application(app, open: url, options: options) || RCTLinkingManager.application(app, open: url, options: options)
+  }
+
+  // Universal Links
+  public override func application(
+    _ application: UIApplication,
+    continue userActivity: NSUserActivity,
+    restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
+  ) -> Bool {
+    let result = RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    return super.application(application, continue: userActivity, restorationHandler: restorationHandler) || result
+  }
+}
+
+class ReactNativeDelegate: ExpoReactNativeFactoryDelegate {
+  // Extension point for config-plugins
+
+  override func sourceURL(for bridge: RCTBridge) -> URL? {
+    // needed to return the correct URL for expo-dev-client.
+    bridge.bundleURL ?? bundleURL()
+  }
+
+  override func bundleURL() -> URL? {
+#if DEBUG
+    return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
+#else
+    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+#endif
+  }
+}

packages/showcase/mobile/ios/DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h

@@ -0,0 +1,3 @@
+//
+// Use this file to import your target's public headers that you would like to expose to Swift.
+//

packages/showcase/mobile/ios/DTDesignSystemShowcase/DTDesignSystemShowcase.entitlements

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict/>
+</plist>

packages/showcase/mobile/ios/DTDesignSystemShowcase/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,14 @@
+{
+  "images": [
+    {
+      "filename": "App-Icon-1024x1024@1x.png",
+      "idiom": "universal",
+      "platform": "ios",
+      "size": "1024x1024"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

packages/showcase/mobile/ios/DTDesignSystemShowcase/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "expo"
+  }
+}

packages/showcase/mobile/ios/DTDesignSystemShowcase/Images.xcassets/SplashScreenBackground.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors": [
+    {
+      "color": {
+        "components": {
+          "alpha": "1.000",
+          "blue": "0.00000000000000",
+          "green": "0.00000000000000",
+          "red": "0.00000000000000"
+        },
+        "color-space": "srgb"
+      },
+      "idiom": "universal"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

packages/showcase/mobile/ios/DTDesignSystemShowcase/Info.plist

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>CADisableMinimumFrameDurationOnPhone</key>
+    <true/>
+    <key>CFBundleDevelopmentRegion</key>
+    <string>$(DEVELOPMENT_LANGUAGE)</string>
+    <key>CFBundleDisplayName</key>
+    <string>DT Design System Showcase</string>
+    <key>CFBundleExecutable</key>
+    <string>$(EXECUTABLE_NAME)</string>
+    <key>CFBundleIdentifier</key>
+    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+    <key>CFBundleInfoDictionaryVersion</key>
+    <string>6.0</string>
+    <key>CFBundleName</key>
+    <string>$(PRODUCT_NAME)</string>
+    <key>CFBundlePackageType</key>
+    <string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
+    <key>CFBundleShortVersionString</key>
+    <string>1.0.0</string>
+    <key>CFBundleSignature</key>
+    <string>????</string>
+    <key>CFBundleURLTypes</key>
+    <array>
+      <dict>
+        <key>CFBundleURLSchemes</key>
+        <array>
+          <string>com.dangerousthings.showcase</string>
+        </array>
+      </dict>
+    </array>
+    <key>CFBundleVersion</key>
+    <string>1</string>
+    <key>LSMinimumSystemVersion</key>
+    <string>12.0</string>
+    <key>LSRequiresIPhoneOS</key>
+    <true/>
+    <key>NSAppTransportSecurity</key>
+    <dict>
+      <key>NSAllowsArbitraryLoads</key>
+      <false/>
+      <key>NSAllowsLocalNetworking</key>
+      <true/>
+    </dict>
+    <key>RCTNewArchEnabled</key>
+    <true/>
+    <key>UILaunchStoryboardName</key>
+    <string>SplashScreen</string>
+    <key>UIRequiredDeviceCapabilities</key>
+    <array>
+      <string>arm64</string>
+    </array>
+    <key>UIRequiresFullScreen</key>
+    <false/>
+    <key>UIStatusBarStyle</key>
+    <string>UIStatusBarStyleDefault</string>
+    <key>UISupportedInterfaceOrientations</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
+    </array>
+    <key>UISupportedInterfaceOrientations~ipad</key>
+    <array>
+      <string>UIInterfaceOrientationPortrait</string>
+      <string>UIInterfaceOrientationPortraitUpsideDown</string>
+      <string>UIInterfaceOrientationLandscapeLeft</string>
+      <string>UIInterfaceOrientationLandscapeRight</string>
+    </array>
+    <key>UIUserInterfaceStyle</key>
+    <string>Dark</string>
+    <key>UIViewControllerBasedStatusBarAppearance</key>
+    <false/>
+  </dict>
+</plist>

packages/showcase/mobile/ios/DTDesignSystemShowcase/SplashScreen.storyboard

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="24093.7" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="24053.1"/>
+        <capability name="Named colors" minToolsVersion="9.0"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <scene sceneID="EXPO-SCENE-1">
+            <objects>
+                <viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
+                    <view key="view" userInteractionEnabled="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="EXPO-ContainerView" userLabel="ContainerView">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                        <subviews/>
+                        <viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
+                        <constraints>
+                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="0VC-Wk-OaO"/>
+                            <constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="zR4-NK-mVN"/>
+                        </constraints>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="0.0" y="0.0"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="SplashScreenLogo" width="100" height="90.333335876464844"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>

packages/showcase/mobile/ios/DTDesignSystemShowcase/Supporting/Expo.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>EXUpdatesCheckOnLaunch</key>
+    <string>ALWAYS</string>
+    <key>EXUpdatesEnabled</key>
+    <false/>
+    <key>EXUpdatesLaunchWaitMs</key>
+    <integer>0</integer>
+  </dict>
+</plist>

packages/showcase/mobile/ios/Podfile

@@ -0,0 +1,63 @@
+require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
+require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
+
+require 'json'
+podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
+
+def ccache_enabled?(podfile_properties)
+  # Environment variable takes precedence
+  return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
+  
+  # Fall back to Podfile properties
+  podfile_properties['apple.ccacheEnabled'] == 'true'
+end
+
+ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
+ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
+ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
+ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
+platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
+
+prepare_react_native_project!
+
+target 'DTDesignSystemShowcase' do
+  use_expo_modules!
+
+  if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
+    config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
+  else
+    config_command = [
+      'node',
+      '--no-warnings',
+      '--eval',
+      'require(\'expo/bin/autolinking\')',
+      'expo-modules-autolinking',
+      'react-native-config',
+      '--json',
+      '--platform',
+      'ios'
+    ]
+  end
+
+  config = use_native_modules!(config_command)
+
+  use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
+  use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
+
+  use_react_native!(
+    :path => config[:reactNativePath],
+    :hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/..",
+    :privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
+  )
+
+  post_install do |installer|
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+      :ccache_enabled => ccache_enabled?(podfile_properties),
+    )
+  end
+end

packages/showcase/mobile/ios/Podfile.properties.json

@@ -0,0 +1,5 @@
+{
+  "expo.jsEngine": "hermes",
+  "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
+  "newArchEnabled": "true"
+}

packages/showcase/mobile/metro.config.js

@@ -0,0 +1,27 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, '..', '..', '..');
+
+const config = getDefaultConfig(projectRoot);
+
+// Watch the monorepo root for live changes to sibling packages
+config.watchFolders = [monorepoRoot];
+
+// Resolve node_modules from both the project and monorepo root (hoisted)
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+// Block sibling packages' node_modules to prevent duplicate native modules
+const packagesDir = path.join(monorepoRoot, 'packages');
+const escapedPath = packagesDir.replace(/[/\\]/g, '[/\\\\]');
+config.resolver.blockList = [
+  new RegExp(
+    `^${escapedPath}[/\\\\](?!showcase[/\\\\]mobile)[^/\\\\]+[/\\\\]node_modules[/\\\\].*$`
+  ),
+];
+
+module.exports = config;

packages/showcase/mobile/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@dangerousthings/showcase-mobile",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "build": "echo 'No build step for Expo dev'",
+    "prebuild": "expo prebuild --clean",
+    "build:android": "expo prebuild --clean --platform android && cd android && ./gradlew assembleRelease && echo 'APK: android/app/build/outputs/apk/release/'",
+    "build:android:debug": "expo prebuild --clean --platform android && cd android && ./gradlew assembleDebug && echo 'Debug APK (requires Metro): android/app/build/outputs/apk/debug/'",
+    "build:ios": "expo prebuild --clean --platform ios && cd ios && xcodebuild -workspace DtShowcase.xcworkspace -scheme DtShowcase -configuration Release -sdk iphoneos -archivePath build/DtShowcase.xcarchive archive",
+    "build:ios:debug": "expo prebuild --clean --platform ios && cd ios && xcodebuild -workspace DtShowcase.xcworkspace -scheme DtShowcase -configuration Debug -sdk iphonesimulator",
+    "build:android:cloud": "eas build -p android --profile preview",
+    "build:ios:cloud": "eas build -p ios --profile preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@dangerousthings/react-native": "*",
+    "@dangerousthings/tokens": "*",
+    "@react-navigation/native": "^7.1.27",
+    "@react-navigation/native-stack": "^7.9.1",
+    "babel-preset-expo": "^54.0.10",
+    "expo": "~54.0.32",
+    "expo-font": "~14.0.11",
+    "expo-status-bar": "^3.0.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-paper": "^5.14.5",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~19.1.0",
+    "typescript": "^5.8.3"
+  }
+}

packages/showcase/mobile/src/brand/BrandContext.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useState, useMemo, ReactNode } from 'react';
+import { brands, themes } from '@dangerousthings/tokens';
+import type { ThemeBrand, BrandTokens } from '@dangerousthings/tokens';
+import { buildThemeFromBrand } from './buildTheme';
+import type { DTExtendedTheme } from '@dangerousthings/react-native';
+
+interface BrandContextValue {
+  brandId: ThemeBrand;
+  brand: BrandTokens;
+  theme: DTExtendedTheme;
+  setBrand: (id: ThemeBrand) => void;
+  availableBrands: typeof themes;
+}
+
+const BrandContext = createContext<BrandContextValue>(null!);
+
+export function useBrand() {
+  return useContext(BrandContext);
+}
+
+interface BrandProviderProps {
+  children: ReactNode;
+  initialBrand?: ThemeBrand;
+}
+
+export function BrandProvider({ children, initialBrand = 'dt' }: BrandProviderProps) {
+  const [brandId, setBrandId] = useState<ThemeBrand>(initialBrand);
+
+  const value = useMemo(() => {
+    const brand = brands[brandId] as BrandTokens;
+    const theme = buildThemeFromBrand(brand);
+    return {
+      brandId,
+      brand,
+      theme,
+      setBrand: setBrandId,
+      availableBrands: themes,
+    };
+  }, [brandId]);
+
+  return <BrandContext.Provider value={value}>{children}</BrandContext.Provider>;
+}

packages/showcase/mobile/src/brand/buildTheme.ts

@@ -0,0 +1,68 @@
+import { MD3DarkTheme } from 'react-native-paper';
+import type { BrandTokens } from '@dangerousthings/tokens';
+import type { DTExtendedTheme } from '@dangerousthings/react-native';
+
+export function buildThemeFromBrand(brand: BrandTokens): DTExtendedTheme {
+  const colors = brand.dark;
+
+  return {
+    ...MD3DarkTheme,
+    dark: true,
+    roundness: brand.shape.radiusSm === '0' || brand.shape.radiusSm === '0px' ? 0 : 4,
+    fonts: MD3DarkTheme.fonts,
+    colors: {
+      ...MD3DarkTheme.colors,
+      primary: colors.primary,
+      onPrimary: colors.bg,
+      primaryContainer: colors.primaryDim,
+      onPrimaryContainer: colors.bg,
+      secondary: colors.secondary,
+      onSecondary: colors.bg,
+      secondaryContainer: colors.secondary,
+      onSecondaryContainer: colors.bg,
+      tertiary: colors.other,
+      onTertiary: colors.bg,
+      tertiaryContainer: colors.other,
+      onTertiaryContainer: colors.textPrimary,
+      error: colors.error,
+      onError: colors.bg,
+      errorContainer: colors.error,
+      onErrorContainer: colors.textPrimary,
+      background: colors.bg,
+      onBackground: colors.textPrimary,
+      surface: colors.surface,
+      onSurface: colors.textPrimary,
+      surfaceVariant: colors.surface,
+      onSurfaceVariant: colors.textPrimary,
+      outline: colors.primary,
+      outlineVariant: colors.border,
+      inverseSurface: colors.textPrimary,
+      inverseOnSurface: colors.bg,
+      inversePrimary: colors.primaryDim,
+      shadow: colors.bg,
+      scrim: 'rgba(0,0,0,0.7)',
+      elevation: {
+        level0: 'transparent',
+        level1: colors.surface,
+        level2: colors.surfaceHover,
+        level3: colors.surfaceHover,
+        level4: colors.surfaceHover,
+        level5: colors.surfaceHover,
+      },
+      surfaceDisabled: 'rgba(255,255,255,0.1)',
+      onSurfaceDisabled: 'rgba(255,255,255,0.3)',
+      backdrop: 'rgba(0,0,0,0.7)',
+    },
+    custom: {
+      success: colors.success,
+      warning: colors.warning,
+      modeNormal: colors.primary,
+      modeEmphasis: colors.secondary,
+      modeWarning: colors.error,
+      modeSuccess: colors.success,
+      modeOther: colors.other,
+      border: colors.border,
+      borderEmphasis: colors.secondary,
+    },
+  };
+}

packages/showcase/mobile/src/components/BrandSwitcher.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useBrand } from '../brand/BrandContext';
+import type { ThemeBrand } from '@dangerousthings/tokens';
+
+const brandLabels: Record<ThemeBrand, string> = {
+  dt: 'DT',
+  classic: 'CLASSIC',
+};
+
+const brandColors: Record<ThemeBrand, string> = {
+  dt: '#00FFFF',
+  classic: '#FF00FF',
+};
+
+export function BrandSwitcher() {
+  const { brandId, setBrand, availableBrands } = useBrand();
+
+  return (
+    <View style={styles.container}>
+      {availableBrands.map((def) => {
+        const isActive = def.id === brandId;
+        const color = brandColors[def.id];
+
+        return (
+          <Pressable
+            key={def.id}
+            onPress={() => setBrand(def.id)}
+            style={[
+              styles.chip,
+              {
+                borderColor: color,
+                backgroundColor: isActive ? color : 'transparent',
+              },
+            ]}
+          >
+            <Text
+              style={[
+                styles.chipText,
+                { color: isActive ? '#000000' : color },
+              ]}
+            >
+              {brandLabels[def.id]}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 12,
+    marginVertical: 16,
+  },
+  chip: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderWidth: 2,
+  },
+  chipText: {
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+});

packages/showcase/mobile/src/components/CodeLabel.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+
+interface CodeLabelProps {
+  text: string;
+}
+
+export function CodeLabel({ text }: CodeLabelProps) {
+  return <Text style={styles.code}>{text}</Text>;
+}
+
+const styles = StyleSheet.create({
+  code: {
+    color: 'rgba(255, 255, 255, 0.35)',
+    fontSize: 10,
+    fontFamily: 'monospace',
+    marginTop: 4,
+    marginBottom: 4,
+  },
+});

packages/showcase/mobile/src/components/DemoRow.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+interface DemoRowProps {
+  children: React.ReactNode;
+}
+
+export function DemoRow({ children }: DemoRowProps) {
+  return <View style={styles.row}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12,
+    alignItems: 'center',
+  },
+});

packages/showcase/mobile/src/components/DemoSection.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+import { DTLabel } from '@dangerousthings/react-native';
+import type { DTVariant } from '@dangerousthings/react-native';
+
+interface DemoSectionProps {
+  title: string;
+  description?: string;
+  variant?: DTVariant;
+  children: React.ReactNode;
+}
+
+export function DemoSection({ title, description, variant = 'normal', children }: DemoSectionProps) {
+  return (
+    <View style={styles.container}>
+      <DTLabel
+        primaryText={title}
+        mode={variant}
+        size="medium"
+        animated={false}
+        showIndicator={false}
+      />
+      {description ? (
+        <Text variant="bodySmall" style={styles.description}>
+          {description}
+        </Text>
+      ) : null}
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 32,
+  },
+  description: {
+    color: 'rgba(255,255,255,0.6)',
+    marginTop: 8,
+  },
+  content: {
+    marginTop: 16,
+  },
+});

packages/showcase/mobile/src/components/ScreenContainer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ScrollView, StyleProp, ViewStyle } from 'react-native';
+import { useDTTheme } from '@dangerousthings/react-native';
+
+interface ScreenContainerProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ScreenContainer({ children, style }: ScreenContainerProps) {
+  const theme = useDTTheme();
+
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor: theme.colors.background }}
+      contentContainerStyle={[{ padding: 24, paddingBottom: 48 }, style]}
+      showsVerticalScrollIndicator={false}
+    >
+      {children}
+    </ScrollView>
+  );
+}

packages/showcase/mobile/src/data/sampleData.ts

@@ -0,0 +1,48 @@
+export const galleryItems = [
+  { id: '1', uri: 'https://picsum.photos/seed/dt-gallery1/800/800', alt: 'Sample image 1' },
+  { id: '2', uri: 'https://picsum.photos/seed/dt-gallery2/800/800', alt: 'Sample image 2' },
+  { id: '3', uri: 'https://picsum.photos/seed/dt-gallery3/800/800', alt: 'Sample image 3' },
+  { id: '4', uri: 'https://picsum.photos/seed/dt-gallery4/800/800', alt: 'Sample image 4' },
+  { id: '5', uri: 'https://picsum.photos/seed/dt-gallery5/800/800', alt: 'Sample image 5' },
+];
+
+export const menuItems = [
+  {
+    id: 'home',
+    title: 'Home',
+    isActive: true,
+    onPress: () => {},
+  },
+  {
+    id: 'products',
+    title: 'Products',
+    items: [
+      { id: 'nfc', title: 'NFC Implants', onPress: () => {} },
+      { id: 'rfid', title: 'RFID Implants', onPress: () => {} },
+      {
+        id: 'accessories',
+        title: 'Accessories',
+        items: [
+          { id: 'readers', title: 'Readers', onPress: () => {} },
+          { id: 'tools', title: 'Tools', onPress: () => {} },
+        ],
+      },
+    ],
+  },
+  { id: 'about', title: 'About', onPress: () => {} },
+  { id: 'contact', title: 'Contact', onPress: () => {} },
+];
+
+export const horizontalMenuItems = [
+  { id: 'h1', title: 'Home', onPress: () => {}, isActive: true },
+  { id: 'h2', title: 'Shop', onPress: () => {} },
+  { id: 'h3', title: 'Blog', onPress: () => {} },
+  { id: 'h4', title: 'FAQ', onPress: () => {} },
+];
+
+export const dropdownItems = [
+  { id: 'd1', title: 'Edit', onPress: () => {} },
+  { id: 'd2', title: 'Duplicate', onPress: () => {} },
+  { id: 'd3', title: 'Archive', onPress: () => {} },
+  { id: 'd4', title: 'Delete', onPress: () => {} },
+];

packages/showcase/mobile/src/navigation/RootNavigator.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useDTTheme } from '@dangerousthings/react-native';
+import type { RootStackParamList } from './types';
+
+import { HomeScreen } from '../screens/HomeScreen';
+import { ButtonsScreen } from '../screens/ButtonsScreen';
+import { CardsScreen } from '../screens/CardsScreen';
+import { FormsScreen } from '../screens/FormsScreen';
+import { FeedbackScreen } from '../screens/FeedbackScreen';
+import { OverlaysScreen } from '../screens/OverlaysScreen';
+import { ThemeScreen } from '../screens/ThemeScreen';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export function RootNavigator() {
+  const theme = useDTTheme();
+
+  return (
+    <Stack.Navigator
+      initialRouteName="Home"
+      screenOptions={{
+        headerStyle: { backgroundColor: theme.colors.background },
+        headerTintColor: theme.custom.modeNormal,
+        headerTitleStyle: { fontWeight: '600' },
+        contentStyle: { backgroundColor: theme.colors.background },
+        animation: 'slide_from_right',
+      }}
+    >
+      <Stack.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="Buttons"
+        component={ButtonsScreen}
+        options={{ title: 'BUTTONS & ACTIONS' }}
+      />
+      <Stack.Screen
+        name="Cards"
+        component={CardsScreen}
+        options={{ title: 'CARDS & LABELS' }}
+      />
+      <Stack.Screen
+        name="Forms"
+        component={FormsScreen}
+        options={{ title: 'FORM CONTROLS' }}
+      />
+      <Stack.Screen
+        name="Feedback"
+        component={FeedbackScreen}
+        options={{ title: 'PROGRESS & FEEDBACK' }}
+      />
+      <Stack.Screen
+        name="Overlays"
+        component={OverlaysScreen}
+        options={{ title: 'OVERLAYS & NAV' }}
+      />
+      <Stack.Screen
+        name="Theme"
+        component={ThemeScreen}
+        options={{ title: 'THEME REFERENCE' }}
+      />
+    </Stack.Navigator>
+  );
+}

packages/showcase/mobile/src/navigation/navigationTheme.ts

@@ -0,0 +1,21 @@
+import { DefaultTheme } from '@react-navigation/native';
+import { useBrand } from '../brand/BrandContext';
+
+export function useNavigationTheme() {
+  const { brand } = useBrand();
+  const colors = brand.dark;
+
+  return {
+    ...DefaultTheme,
+    dark: true,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: colors.primary,
+      background: colors.bg,
+      card: colors.bg,
+      text: colors.textPrimary,
+      border: colors.primary,
+      notification: colors.secondary,
+    },
+  };
+}

packages/showcase/mobile/src/navigation/types.ts

@@ -0,0 +1,9 @@
+export type RootStackParamList = {
+  Home: undefined;
+  Buttons: undefined;
+  Cards: undefined;
+  Forms: undefined;
+  Feedback: undefined;
+  Overlays: undefined;
+  Theme: undefined;
+};

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

@@ -0,0 +1,178 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import { DTButton, DTChip, DTHexagon, useDTTheme } from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { DemoRow } from '../components/DemoRow';
+import { CodeLabel } from '../components/CodeLabel';
+
+export function ButtonsScreen() {
+  const theme = useDTTheme();
+
+  return (
+    <ScreenContainer>
+      {/* DTButton - Outlined */}
+      <DemoSection
+        title="DTButton - Outlined"
+        variant="normal"
+        description="Border with transparent background. Default mode."
+      >
+        <View style={{ gap: 12 }}>
+          <DTButton variant="normal" onPress={() => {}}>NORMAL</DTButton>
+          <CodeLabel text='variant="normal"' />
+
+          <DTButton variant="emphasis" onPress={() => {}}>EMPHASIS</DTButton>
+          <CodeLabel text='variant="emphasis"' />
+
+          <DTButton variant="warning" onPress={() => {}}>WARNING</DTButton>
+          <CodeLabel text='variant="warning"' />
+
+          <DTButton variant="success" onPress={() => {}}>SUCCESS</DTButton>
+          <CodeLabel text='variant="success"' />
+
+          <DTButton variant="other" onPress={() => {}}>OTHER</DTButton>
+          <CodeLabel text='variant="other"' />
+        </View>
+      </DemoSection>
+
+      {/* DTButton - Contained */}
+      <DemoSection
+        title="DTButton - Contained"
+        variant="emphasis"
+        description="Filled background with dark text."
+      >
+        <View style={{ gap: 12 }}>
+          <DTButton variant="normal" mode="contained" onPress={() => {}}>
+            CONTAINED NORMAL
+          </DTButton>
+          <DTButton variant="emphasis" mode="contained" onPress={() => {}}>
+            CONTAINED EMPHASIS
+          </DTButton>
+          <DTButton variant="warning" mode="contained" onPress={() => {}}>
+            CONTAINED WARNING
+          </DTButton>
+          <DTButton variant="success" mode="contained" onPress={() => {}}>
+            CONTAINED SUCCESS
+          </DTButton>
+          <DTButton variant="other" mode="contained" onPress={() => {}}>
+            CONTAINED OTHER
+          </DTButton>
+        </View>
+      </DemoSection>
+
+      {/* DTButton - States */}
+      <DemoSection
+        title="DTButton - States"
+        variant="warning"
+        description="Disabled and custom bevel sizes."
+      >
+        <View style={{ gap: 12 }}>
+          <DTButton variant="normal" disabled onPress={() => {}}>
+            DISABLED
+          </DTButton>
+          <CodeLabel text="disabled={true}" />
+
+          <DTButton variant="emphasis" bevelSize={16} onPress={() => {}}>
+            LARGE BEVEL (16px)
+          </DTButton>
+          <CodeLabel text="bevelSize={16}" />
+
+          <DTButton variant="success" bevelSize={0} onPress={() => {}}>
+            NO BEVEL (0px)
+          </DTButton>
+          <CodeLabel text="bevelSize={0}" />
+
+          <DTButton variant="other" borderWidth={4} onPress={() => {}}>
+            THICK BORDER (4px)
+          </DTButton>
+          <CodeLabel text="borderWidth={4}" />
+        </View>
+      </DemoSection>
+
+      {/* DTChip */}
+      <DemoSection
+        title="DTChip"
+        variant="normal"
+        description="Chips for tags and statuses. Wraps RNP Chip."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          ALL VARIANTS:
+        </Text>
+        <DemoRow>
+          <DTChip variant="normal">NTAG215</DTChip>
+          <DTChip variant="emphasis">FEATURED</DTChip>
+          <DTChip variant="warning">DEPRECATED</DTChip>
+          <DTChip variant="success">ACTIVE</DTChip>
+          <DTChip variant="other">BETA</DTChip>
+        </DemoRow>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 16, marginBottom: 8 }}>
+          SELECTED:
+        </Text>
+        <DemoRow>
+          <DTChip variant="normal" selected>SELECTED</DTChip>
+          <DTChip variant="emphasis" selected>SELECTED</DTChip>
+          <DTChip variant="success" selected>SELECTED</DTChip>
+        </DemoRow>
+      </DemoSection>
+
+      {/* DTHexagon */}
+      <DemoSection
+        title="DTHexagon"
+        variant="other"
+        description="Decorative hexagon shapes with optional animations."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          FILLED:
+        </Text>
+        <DemoRow>
+          <DTHexagon size={60} variant="normal" />
+          <DTHexagon size={60} variant="emphasis" />
+          <DTHexagon size={60} variant="warning" />
+          <DTHexagon size={60} variant="success" />
+          <DTHexagon size={60} variant="other" />
+        </DemoRow>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
+          OUTLINE:
+        </Text>
+        <DemoRow>
+          <DTHexagon size={60} variant="normal" filled={false} />
+          <DTHexagon size={60} variant="emphasis" filled={false} borderWidth={3} />
+          <DTHexagon size={60} variant="warning" filled={false} />
+        </DemoRow>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
+          ANIMATED:
+        </Text>
+        <DemoRow>
+          <View style={{ alignItems: 'center' }}>
+            <DTHexagon size={50} variant="normal" animated animationType="rotate" animationDuration={3000} />
+            <CodeLabel text="rotate" />
+          </View>
+          <View style={{ alignItems: 'center' }}>
+            <DTHexagon size={50} variant="emphasis" animated animationType="pulse" animationDuration={2000} />
+            <CodeLabel text="pulse" />
+          </View>
+          <View style={{ alignItems: 'center' }}>
+            <DTHexagon size={50} variant="other" filled={false} animated animationType="rotate" animationDuration={4000} />
+            <CodeLabel text="rotate outline" />
+          </View>
+        </DemoRow>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
+          WITH CONTENT:
+        </Text>
+        <DemoRow>
+          <DTHexagon size={80} variant="normal">
+            <Text style={{ color: theme.colors.background, fontWeight: '700', fontSize: 16 }}>DT</Text>
+          </DTHexagon>
+          <DTHexagon size={80} variant="emphasis" animated animationType="pulse">
+            <Text style={{ color: theme.colors.background, fontWeight: '700', fontSize: 12 }}>SCAN</Text>
+          </DTHexagon>
+        </DemoRow>
+      </DemoSection>
+    </ScreenContainer>
+  );
+}

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { View, Image, Alert } from 'react-native';
+import { Text } from 'react-native-paper';
+import { DTCard, DTLabel, DTMediaFrame, useDTTheme } from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { CodeLabel } from '../components/CodeLabel';
+
+export function CardsScreen() {
+  const theme = useDTTheme();
+
+  return (
+    <ScreenContainer>
+      {/* DTCard - All Modes */}
+      <DemoSection
+        title="DTCard - Modes"
+        variant="normal"
+        description="Beveled card with dual bottom bevels. Uses DTVariant for mode coloring."
+      >
+        <DTCard mode="normal" title="NORMAL MODE" style={{ marginBottom: 16 }}>
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Primary border with beveled bottom-right and bottom-left corners.
+          </Text>
+        </DTCard>
+
+        <DTCard mode="emphasis" title="EMPHASIS MODE" style={{ marginBottom: 16 }}>
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Secondary border. Used for highlighted or important content.
+          </Text>
+        </DTCard>
+
+        <DTCard mode="warning" title="WARNING MODE" style={{ marginBottom: 16 }}>
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Error border. Used for errors and destructive actions.
+          </Text>
+        </DTCard>
+
+        <DTCard mode="success" title="SUCCESS MODE" style={{ marginBottom: 16 }}>
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Success border. Used for confirmations and success states.
+          </Text>
+        </DTCard>
+
+        <DTCard mode="other" title="OTHER MODE">
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Tertiary border. Used for secondary or miscellaneous info.
+          </Text>
+        </DTCard>
+      </DemoSection>
+
+      {/* DTCard - Variations */}
+      <DemoSection
+        title="DTCard - Variations"
+        variant="emphasis"
+        description="Cards without titles, pressable cards, custom bevels."
+      >
+        <DTCard mode="normal" style={{ marginBottom: 16 }}>
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Card without title (no header bar).
+          </Text>
+        </DTCard>
+
+        <DTCard
+          mode="emphasis"
+          title="PRESSABLE CARD"
+          onPress={() => Alert.alert('Card Pressed', 'You tapped the card!')}
+          style={{ marginBottom: 16 }}
+        >
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            Tap me! Cards with onPress get press feedback.
+          </Text>
+        </DTCard>
+
+        <DTCard
+          mode="other"
+          title="CUSTOM BEVELS"
+          bevelSize={48}
+          bevelSizeSmall={24}
+          borderWidth={4}
+        >
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
+            bevelSize=48, bevelSizeSmall=24, borderWidth=4
+          </Text>
+        </DTCard>
+      </DemoSection>
+
+      {/* DTLabel - Sizes and Modes */}
+      <DemoSection
+        title="DTLabel"
+        variant="normal"
+        description="Beveled top-right corner labels with animated ping indicator."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          SIZES:
+        </Text>
+        <View style={{ gap: 8, marginBottom: 16 }}>
+          <DTLabel primaryText="Small Label" size="small" mode="normal" />
+          <DTLabel primaryText="Medium Label" size="medium" mode="normal" />
+          <DTLabel primaryText="Large Label" size="large" mode="normal" />
+        </View>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          WITH SECONDARY TEXT:
+        </Text>
+        <View style={{ gap: 8, marginBottom: 16 }}>
+          <DTLabel primaryText="Detected" secondaryText="NTAG215" mode="success" />
+          <DTLabel primaryText="Status" secondaryText="READY TO SCAN" mode="emphasis" />
+          <DTLabel primaryText="Error" secondaryText="CONNECTION LOST" mode="warning" />
+        </View>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          ALL VARIANTS:
+        </Text>
+        <View style={{ gap: 8, marginBottom: 16 }}>
+          <DTLabel primaryText="Normal" mode="normal" />
+          <DTLabel primaryText="Emphasis" mode="emphasis" />
+          <DTLabel primaryText="Warning" mode="warning" />
+          <DTLabel primaryText="Success" mode="success" />
+          <DTLabel primaryText="Other" mode="other" />
+        </View>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          FULL WIDTH:
+        </Text>
+        <View style={{ gap: 8, marginBottom: 16 }}>
+          <DTLabel primaryText="Full Width Label" secondaryText="STRETCHES" mode="emphasis" fullWidth />
+        </View>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          OPTIONS:
+        </Text>
+        <View style={{ gap: 8 }}>
+          <DTLabel primaryText="No Ping Indicator" mode="normal" showIndicator={false} />
+          <DTLabel primaryText="Not Animated" mode="other" animated={false} />
+        </View>
+      </DemoSection>
+
+      {/* DTMediaFrame */}
+      <DemoSection
+        title="DTMediaFrame"
+        variant="other"
+        description="Beveled media wrapper with diagonal symmetry (top-left + bottom-right)."
+      >
+        <DTMediaFrame variant="normal" aspectRatio={16 / 9} style={{ marginBottom: 8 }}>
+          <Image
+            source={{ uri: 'https://picsum.photos/seed/dt-media1/800/450' }}
+            style={{ flex: 1 }}
+            resizeMode="cover"
+          />
+        </DTMediaFrame>
+        <CodeLabel text='variant="normal" aspectRatio={16/9}' />
+
+        <DTMediaFrame variant="emphasis" aspectRatio={1} bevelSize={24} style={{ marginTop: 16, marginBottom: 8 }}>
+          <Image
+            source={{ uri: 'https://picsum.photos/seed/dt-media2/400/400' }}
+            style={{ flex: 1 }}
+            resizeMode="cover"
+          />
+        </DTMediaFrame>
+        <CodeLabel text='variant="emphasis" aspectRatio={1} bevelSize={24}' />
+
+        <DTMediaFrame variant="warning" aspectRatio={4 / 3} borderWidth={4} style={{ marginTop: 16, marginBottom: 8 }}>
+          <Image
+            source={{ uri: 'https://picsum.photos/seed/dt-media3/600/450' }}
+            style={{ flex: 1 }}
+            resizeMode="cover"
+          />
+        </DTMediaFrame>
+        <CodeLabel text='variant="warning" aspectRatio={4/3} borderWidth={4}' />
+
+        <DTMediaFrame variant="success" aspectRatio={16 / 9} animated={false} style={{ marginTop: 16, marginBottom: 8 }}>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0a0a0a' }}>
+            <Text style={{ color: theme.custom.modeSuccess }}>PLACEHOLDER CONTENT</Text>
+          </View>
+        </DTMediaFrame>
+        <CodeLabel text='animated={false} — custom View children' />
+      </DemoSection>
+    </ScreenContainer>
+  );
+}

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import { DTProgressBar, DTSearchInput, useDTTheme } from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { CodeLabel } from '../components/CodeLabel';
+
+export function FeedbackScreen() {
+  const theme = useDTTheme();
+  const [progress, setProgress] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [loadingQuery, setLoadingQuery] = useState('NFC implants');
+
+  // Animate progress bar
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => (prev >= 1 ? 0 : prev + 0.01));
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <ScreenContainer>
+      {/* DTProgressBar - Horizontal */}
+      <DemoSection
+        title="DTProgressBar - Horizontal"
+        variant="normal"
+        description="Wraps RNP ProgressBar with angular styling."
+      >
+        <View style={{ gap: 20 }}>
+          <View>
+            <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+              25%
+            </Text>
+            <DTProgressBar value={0.25} variant="normal" />
+          </View>
+
+          <View>
+            <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+              50% WITH LABEL
+            </Text>
+            <DTProgressBar value={0.5} variant="emphasis" showLabel height={8} />
+            <CodeLabel text='showLabel height={8}' />
+          </View>
+
+          <View>
+            <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+              75%
+            </Text>
+            <DTProgressBar value={0.75} variant="success" height={6} />
+          </View>
+
+          <View>
+            <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+              100% (WARNING)
+            </Text>
+            <DTProgressBar value={1.0} variant="warning" showLabel />
+          </View>
+
+          <View>
+            <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+              ANIMATED ({Math.round(progress * 100)}%)
+            </Text>
+            <DTProgressBar value={progress} variant="normal" showLabel height={8} />
+            <CodeLabel text="Live cycling 0% → 100% → repeat" />
+          </View>
+        </View>
+      </DemoSection>
+
+      {/* DTProgressBar - Vertical */}
+      <DemoSection
+        title="DTProgressBar - Vertical"
+        variant="emphasis"
+        description="Vertical orientation with height-based fill."
+      >
+        <View style={{ flexDirection: 'row', justifyContent: 'space-around', height: 150, marginBottom: 8 }}>
+          <DTProgressBar value={0.3} variant="normal" orientation="vertical" height={8} showLabel />
+          <DTProgressBar value={0.5} variant="emphasis" orientation="vertical" height={8} showLabel />
+          <DTProgressBar value={0.75} variant="success" orientation="vertical" height={8} showLabel />
+          <DTProgressBar value={1.0} variant="warning" orientation="vertical" height={8} showLabel />
+          <DTProgressBar value={0.15} variant="other" orientation="vertical" height={12} showLabel />
+        </View>
+        <CodeLabel text='orientation="vertical"' />
+      </DemoSection>
+
+      {/* DTSearchInput */}
+      <DemoSection
+        title="DTSearchInput"
+        variant="normal"
+        description="Wraps RNP Searchbar with angular styling."
+      >
+        <View style={{ gap: 16 }}>
+          <View>
+            <DTSearchInput
+              value={searchQuery}
+              onChangeText={setSearchQuery}
+              placeholder="Search components..."
+              variant="normal"
+            />
+            <CodeLabel text='variant="normal"' />
+          </View>
+
+          <View>
+            <DTSearchInput
+              value={loadingQuery}
+              onChangeText={setLoadingQuery}
+              loading
+              variant="emphasis"
+              placeholder="Searching..."
+            />
+            <CodeLabel text='loading={true} variant="emphasis"' />
+          </View>
+
+          <View>
+            <DTSearchInput
+              value=""
+              onChangeText={() => {}}
+              variant="warning"
+              placeholder="Disabled search"
+              disabled
+            />
+            <CodeLabel text='disabled={true} variant="warning"' />
+          </View>
+
+          <View>
+            <DTSearchInput
+              value=""
+              onChangeText={() => {}}
+              variant="other"
+              placeholder="Other variant..."
+            />
+            <CodeLabel text='variant="other"' />
+          </View>
+        </View>
+      </DemoSection>
+    </ScreenContainer>
+  );
+}

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

@@ -0,0 +1,290 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import {
+  DTTextInput,
+  DTCheckbox,
+  DTSwitch,
+  DTRadioGroup,
+  DTRadioOption,
+  DTQuantityStepper,
+  useDTTheme,
+} from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { CodeLabel } from '../components/CodeLabel';
+
+export function FormsScreen() {
+  const theme = useDTTheme();
+
+  // TextInput state
+  const [username, setUsername] = useState('');
+  const [search, setSearch] = useState('');
+  const [errorField, setErrorField] = useState('');
+
+  // Checkbox state
+  const [check1, setCheck1] = useState(false);
+  const [check2, setCheck2] = useState(true);
+  const [check3, setCheck3] = useState(false);
+
+  // Switch state
+  const [switch1, setSwitch1] = useState(false);
+  const [switch2, setSwitch2] = useState(true);
+  const [switch3, setSwitch3] = useState(false);
+
+  // Radio state
+  const [radio1, setRadio1] = useState<string | null>('nfc');
+  const [radio2, setRadio2] = useState<string | null>(null);
+
+  // Stepper state
+  const [qty1, setQty1] = useState(1);
+  const [qty2, setQty2] = useState(5);
+  const [qty3, setQty3] = useState(0);
+
+  return (
+    <ScreenContainer>
+      {/* DTTextInput */}
+      <DemoSection
+        title="DTTextInput"
+        variant="normal"
+        description="Angular text input wrapping RNP TextInput. Focus glow bar animation."
+      >
+        <View style={{ gap: 16 }}>
+          <View>
+            <DTTextInput
+              variant="normal"
+              label="Username"
+              value={username}
+              onChangeText={setUsername}
+              placeholder="Enter username"
+            />
+            <CodeLabel text='variant="normal"' />
+          </View>
+
+          <View>
+            <DTTextInput
+              variant="emphasis"
+              label="Search Query"
+              value={search}
+              onChangeText={setSearch}
+              placeholder="Search..."
+            />
+            <CodeLabel text='variant="emphasis"' />
+          </View>
+
+          <View>
+            <DTTextInput
+              variant="warning"
+              error
+              errorMessage="This field is required"
+              label="Email"
+              value={errorField}
+              onChangeText={setErrorField}
+              placeholder="user@example.com"
+            />
+            <CodeLabel text='error={true} errorMessage="..."' />
+          </View>
+
+          <View>
+            <DTTextInput
+              variant="success"
+              label="Verified Field"
+              value="verified@example.com"
+              onChangeText={() => {}}
+            />
+            <CodeLabel text='variant="success"' />
+          </View>
+        </View>
+      </DemoSection>
+
+      {/* DTCheckbox */}
+      <DemoSection
+        title="DTCheckbox"
+        variant="normal"
+        description="Angular square checkbox with SVG checkmark. Custom-built (RNP uses rounded)."
+      >
+        <View style={{ gap: 4 }}>
+          <DTCheckbox
+            checked={check1}
+            onPress={() => setCheck1(!check1)}
+            label="Accept terms and conditions"
+            variant="normal"
+          />
+          <DTCheckbox
+            checked={check2}
+            onPress={() => setCheck2(!check2)}
+            label="Remember me"
+            variant="success"
+          />
+          <DTCheckbox
+            checked={check3}
+            onPress={() => setCheck3(!check3)}
+            label="Enable notifications"
+            variant="emphasis"
+          />
+          <DTCheckbox
+            checked={true}
+            onPress={() => {}}
+            label="Disabled checked"
+            variant="normal"
+            disabled
+          />
+          <DTCheckbox
+            checked={false}
+            onPress={() => {}}
+            label="Disabled unchecked"
+            variant="normal"
+            disabled
+          />
+          <DTCheckbox
+            checked={true}
+            onPress={() => {}}
+            label="Large checkbox (size=32)"
+            variant="warning"
+            size={32}
+          />
+        </View>
+      </DemoSection>
+
+      {/* DTSwitch */}
+      <DemoSection
+        title="DTSwitch"
+        variant="normal"
+        description="Angular toggle switch. Custom-built with animated thumb."
+      >
+        <View style={{ gap: 4 }}>
+          <DTSwitch
+            value={switch1}
+            onValueChange={setSwitch1}
+            label="Enable NFC"
+            variant="normal"
+          />
+          <DTSwitch
+            value={switch2}
+            onValueChange={setSwitch2}
+            label="Auto-detect"
+            variant="success"
+          />
+          <DTSwitch
+            value={switch3}
+            onValueChange={setSwitch3}
+            label="Dark mode"
+            variant="emphasis"
+          />
+          <DTSwitch
+            value={true}
+            onValueChange={() => {}}
+            label="Disabled (on)"
+            variant="normal"
+            disabled
+          />
+          <DTSwitch
+            value={false}
+            onValueChange={() => {}}
+            label="Disabled (off)"
+            variant="normal"
+            disabled
+          />
+        </View>
+      </DemoSection>
+
+      {/* DTRadioGroup */}
+      <DemoSection
+        title="DTRadioGroup"
+        variant="normal"
+        description="Angular square radio indicators with selection highlight."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          BASIC:
+        </Text>
+        <DTRadioGroup value={radio1} onValueChange={setRadio1} variant="normal">
+          <DTRadioOption value="nfc" label="NFC (Near Field Communication)" />
+          <DTRadioOption value="rfid" label="RFID (Radio Frequency ID)" />
+          <DTRadioOption value="ble" label="BLE (Bluetooth Low Energy)" />
+        </DTRadioGroup>
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
+          WITH DESCRIPTIONS:
+        </Text>
+        <DTRadioGroup value={radio2} onValueChange={setRadio2} variant="emphasis">
+          <DTRadioOption
+            value="xNT"
+            label="xNT"
+            description="NTAG216 implant, 888 bytes, NFC Type 2"
+          />
+          <DTRadioOption
+            value="xDF2"
+            label="xDF2"
+            description="DESFire EV2 implant, 8K bytes, NFC Type 4"
+          />
+          <DTRadioOption
+            value="xEM"
+            label="xEM"
+            description="T5577 implant, LF 125kHz"
+            disabled
+          />
+        </DTRadioGroup>
+      </DemoSection>
+
+      {/* DTQuantityStepper */}
+      <DemoSection
+        title="DTQuantityStepper"
+        variant="emphasis"
+        description="Increment/decrement with beveled +/- buttons."
+      >
+        <View style={{ gap: 24 }}>
+          <View>
+            <DTQuantityStepper
+              value={qty1}
+              onValueChange={setQty1}
+              label="Quantity"
+              min={1}
+              max={10}
+              variant="normal"
+              size="medium"
+            />
+            <CodeLabel text='size="medium" min={1} max={10}' />
+          </View>
+
+          <View>
+            <DTQuantityStepper
+              value={qty2}
+              onValueChange={setQty2}
+              label="Small Stepper"
+              min={0}
+              max={99}
+              variant="emphasis"
+              size="small"
+            />
+            <CodeLabel text='size="small" min={0} max={99}' />
+          </View>
+
+          <View>
+            <DTQuantityStepper
+              value={qty3}
+              onValueChange={setQty3}
+              label="Large Stepper"
+              min={0}
+              max={20}
+              step={5}
+              variant="success"
+              size="large"
+            />
+            <CodeLabel text='size="large" step={5}' />
+          </View>
+
+          <View>
+            <DTQuantityStepper
+              value={3}
+              onValueChange={() => {}}
+              label="Disabled"
+              variant="normal"
+              disabled
+            />
+            <CodeLabel text="disabled={true}" />
+          </View>
+        </View>
+      </DemoSection>
+    </ScreenContainer>
+  );
+}

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { DTCard, DTHexagon, useDTTheme } from '@dangerousthings/react-native';
+import type { DTVariant } from '@dangerousthings/react-native';
+import type { RootStackParamList } from '../navigation/types';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { BrandSwitcher } from '../components/BrandSwitcher';
+import { useBrand } from '../brand/BrandContext';
+
+type HomeScreenProps = {
+  navigation: NativeStackNavigationProp<RootStackParamList, 'Home'>;
+};
+
+const categories: {
+  title: string;
+  subtitle: string;
+  mode: DTVariant;
+  route: keyof RootStackParamList;
+  count: number;
+}[] = [
+  {
+    title: 'BUTTONS & ACTIONS',
+    subtitle: 'DTButton, DTChip, DTHexagon',
+    mode: 'normal',
+    route: 'Buttons',
+    count: 3,
+  },
+  {
+    title: 'CARDS & LABELS',
+    subtitle: 'DTCard, DTLabel, DTMediaFrame',
+    mode: 'emphasis',
+    route: 'Cards',
+    count: 3,
+  },
+  {
+    title: 'FORM CONTROLS',
+    subtitle: 'DTTextInput, DTCheckbox, DTSwitch, DTRadioGroup, DTQuantityStepper',
+    mode: 'success',
+    route: 'Forms',
+    count: 5,
+  },
+  {
+    title: 'PROGRESS & FEEDBACK',
+    subtitle: 'DTProgressBar, DTSearchInput',
+    mode: 'other',
+    route: 'Feedback',
+    count: 2,
+  },
+  {
+    title: 'OVERLAYS & NAVIGATION',
+    subtitle: 'DTModal, DTDrawer, DTAccordion, DTMenu, DTGallery',
+    mode: 'warning',
+    route: 'Overlays',
+    count: 5,
+  },
+  {
+    title: 'THEME REFERENCE',
+    subtitle: 'Colors, Typography, Spacing',
+    mode: 'normal',
+    route: 'Theme',
+    count: 0,
+  },
+];
+
+export function HomeScreen({ navigation }: HomeScreenProps) {
+  const insets = useSafeAreaInsets();
+  const theme = useDTTheme();
+  const { brand } = useBrand();
+
+  return (
+    <ScreenContainer style={{ paddingTop: insets.top + 24 }}>
+      <View style={styles.header}>
+        <Text variant="displaySmall" style={[styles.title, { color: theme.custom.modeNormal }]}>
+          DANGEROUS THINGS
+        </Text>
+        <Text variant="headlineSmall" style={[styles.subtitle, { color: theme.custom.modeEmphasis }]}>
+          DESIGN SYSTEM
+        </Text>
+        <Text variant="bodySmall" style={styles.version}>
+          {brand.name} theme
+        </Text>
+      </View>
+
+      <BrandSwitcher />
+
+      <View style={styles.hexRow}>
+        <DTHexagon size={18} variant="normal" opacity={0.4} />
+        <DTHexagon size={18} variant="emphasis" opacity={0.6} />
+        <DTHexagon size={18} variant="warning" opacity={0.4} />
+        <DTHexagon size={18} variant="success" opacity={0.6} />
+        <DTHexagon size={18} variant="other" opacity={0.4} />
+      </View>
+
+      <Text variant="labelSmall" style={styles.sectionLabel}>
+        COMPONENT CATALOG
+      </Text>
+
+      {categories.map((cat) => (
+        <DTCard
+          key={cat.route}
+          mode={cat.mode}
+          title={cat.title}
+          onPress={() => navigation.navigate(cat.route)}
+          style={styles.card}
+        >
+          <Text variant="bodySmall" style={styles.cardSubtitle}>
+            {cat.subtitle}
+          </Text>
+          {cat.count > 0 && (
+            <Text variant="labelSmall" style={styles.cardCount}>
+              {cat.count} components
+            </Text>
+          )}
+        </DTCard>
+      ))}
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  title: {
+    letterSpacing: 2,
+  },
+  subtitle: {
+    letterSpacing: 3,
+    marginTop: 4,
+  },
+  version: {
+    color: 'rgba(255,255,255,0.4)',
+    marginTop: 8,
+  },
+  hexRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 10,
+    marginVertical: 24,
+  },
+  sectionLabel: {
+    color: 'rgba(255,255,255,0.5)',
+    letterSpacing: 2,
+    marginBottom: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+  cardSubtitle: {
+    color: 'rgba(255,255,255,0.7)',
+  },
+  cardCount: {
+    color: 'rgba(255,255,255,0.4)',
+    marginTop: 8,
+  },
+});

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

@@ -0,0 +1,298 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-paper';
+import {
+  DTButton,
+  DTCard,
+  DTChip,
+  DTModal,
+  DTDrawer,
+  DTAccordion,
+  DTMenu,
+  DTMenuDropdown,
+  DTGallery,
+  useDTTheme,
+} from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { CodeLabel } from '../components/CodeLabel';
+import { galleryItems, menuItems, horizontalMenuItems, dropdownItems } from '../data/sampleData';
+
+export function OverlaysScreen() {
+  const theme = useDTTheme();
+
+  // Modal state
+  const [modalVisible, setModalVisible] = useState(false);
+  const [warningModalVisible, setWarningModalVisible] = useState(false);
+
+  // Drawer state
+  const [rightDrawer, setRightDrawer] = useState(false);
+  const [leftDrawer, setLeftDrawer] = useState(false);
+
+  // Menu dropdown state
+  const [menuDropdownVisible, setMenuDropdownVisible] = useState(false);
+
+  // Gallery state
+  const [galleryIndex, setGalleryIndex] = useState(0);
+
+  return (
+    <ScreenContainer>
+      {/* DTModal */}
+      <DemoSection
+        title="DTModal"
+        variant="normal"
+        description="Wraps RNP Portal + Modal. Content rendered inside DTCard."
+      >
+        <View style={{ gap: 12 }}>
+          <DTButton variant="normal" onPress={() => setModalVisible(true)}>
+            OPEN NORMAL MODAL
+          </DTButton>
+          <DTButton variant="warning" onPress={() => setWarningModalVisible(true)}>
+            OPEN WARNING MODAL
+          </DTButton>
+        </View>
+
+        <DTModal
+          visible={modalVisible}
+          onDismiss={() => setModalVisible(false)}
+          title="CONFIRM ACTION"
+          variant="normal"
+        >
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface, marginBottom: 16 }}>
+            Are you sure you want to proceed with this action?
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 12 }}>
+            <DTButton
+              variant="normal"
+              mode="contained"
+              onPress={() => setModalVisible(false)}
+              style={{ flex: 1 }}
+            >
+              CONFIRM
+            </DTButton>
+            <DTButton
+              variant="normal"
+              onPress={() => setModalVisible(false)}
+              style={{ flex: 1 }}
+            >
+              CANCEL
+            </DTButton>
+          </View>
+        </DTModal>
+
+        <DTModal
+          visible={warningModalVisible}
+          onDismiss={() => setWarningModalVisible(false)}
+          title="DELETE ITEM"
+          variant="warning"
+        >
+          <Text variant="bodyMedium" style={{ color: theme.colors.onSurface, marginBottom: 16 }}>
+            This action cannot be undone. All data will be permanently removed.
+          </Text>
+          <DTButton
+            variant="warning"
+            mode="contained"
+            onPress={() => setWarningModalVisible(false)}
+          >
+            DELETE
+          </DTButton>
+        </DTModal>
+      </DemoSection>
+
+      {/* DTDrawer */}
+      <DemoSection
+        title="DTDrawer"
+        variant="emphasis"
+        description="Sliding panel via Portal + Animated. Beveled leading edge."
+      >
+        <View style={{ gap: 12 }}>
+          <DTButton variant="emphasis" onPress={() => setRightDrawer(true)}>
+            OPEN RIGHT DRAWER
+          </DTButton>
+          <DTButton variant="normal" onPress={() => setLeftDrawer(true)}>
+            OPEN LEFT DRAWER
+          </DTButton>
+        </View>
+
+        <DTDrawer
+          visible={rightDrawer}
+          onDismiss={() => setRightDrawer(false)}
+          heading="CART"
+          headingVariant="emphasis"
+          position="right"
+        >
+          <DTCard mode="normal" title="ITEM 1" style={{ marginBottom: 12 }}>
+            <Text style={{ color: theme.colors.onSurface }}>xNT NFC Implant</Text>
+          </DTCard>
+          <DTCard mode="normal" title="ITEM 2" style={{ marginBottom: 12 }}>
+            <Text style={{ color: theme.colors.onSurface }}>xDF2 DESFire Implant</Text>
+          </DTCard>
+          <DTButton
+            variant="emphasis"
+            mode="contained"
+            onPress={() => setRightDrawer(false)}
+          >
+            CHECKOUT
+          </DTButton>
+        </DTDrawer>
+
+        <DTDrawer
+          visible={leftDrawer}
+          onDismiss={() => setLeftDrawer(false)}
+          heading="MENU"
+          headingVariant="normal"
+          position="left"
+        >
+          <View style={{ gap: 12 }}>
+            <DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
+              HOME
+            </DTButton>
+            <DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
+              PRODUCTS
+            </DTButton>
+            <DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
+              ABOUT
+            </DTButton>
+            <DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
+              CONTACT
+            </DTButton>
+          </View>
+        </DTDrawer>
+      </DemoSection>
+
+      {/* DTAccordion */}
+      <DemoSection
+        title="DTAccordion"
+        variant="normal"
+        description="Wraps RNP List.Accordion with angular headers and thick top border."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          SINGLE EXPAND:
+        </Text>
+        <DTAccordion
+          variant="normal"
+          activeVariant="emphasis"
+          sections={[
+            {
+              key: 'size',
+              title: 'Size',
+              children: (
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <DTChip variant="normal">Small</DTChip>
+                  <DTChip variant="normal">Medium</DTChip>
+                  <DTChip variant="normal">Large</DTChip>
+                </View>
+              ),
+            },
+            {
+              key: 'type',
+              title: 'Chip Type',
+              children: (
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <DTChip variant="emphasis">NTAG</DTChip>
+                  <DTChip variant="emphasis">DESFire</DTChip>
+                  <DTChip variant="emphasis">MIFARE Classic</DTChip>
+                </View>
+              ),
+            },
+            {
+              key: 'freq',
+              title: 'Frequency',
+              children: (
+                <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+                  <DTChip variant="success">13.56 MHz (HF)</DTChip>
+                  <DTChip variant="success">125 kHz (LF)</DTChip>
+                </View>
+              ),
+            },
+          ]}
+        />
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
+          MULTI EXPAND:
+        </Text>
+        <DTAccordion
+          variant="other"
+          activeVariant="warning"
+          allowMultiple
+          initialOpenKeys={['about']}
+          sections={[
+            {
+              key: 'about',
+              title: 'About',
+              children: (
+                <Text style={{ color: theme.colors.onSurface }}>
+                  Dangerous Things makes NFC and RFID implants for human use.
+                </Text>
+              ),
+            },
+            {
+              key: 'faq',
+              title: 'FAQ',
+              children: (
+                <Text style={{ color: theme.colors.onSurface }}>
+                  Frequently asked questions about biohacking and body implants.
+                </Text>
+              ),
+            },
+          ]}
+        />
+      </DemoSection>
+
+      {/* DTMenu */}
+      <DemoSection
+        title="DTMenu"
+        variant="normal"
+        description="Hierarchical menu with expandable sub-items. Thick top border accent."
+      >
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
+          VERTICAL (default):
+        </Text>
+        <DTMenu
+          variant="normal"
+          activeVariant="emphasis"
+          items={menuItems}
+        />
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
+          HORIZONTAL:
+        </Text>
+        <DTMenu
+          variant="normal"
+          layout="horizontal"
+          items={horizontalMenuItems}
+        />
+
+        <Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
+          DROPDOWN (DTMenuDropdown):
+        </Text>
+        <DTMenuDropdown
+          visible={menuDropdownVisible}
+          onDismiss={() => setMenuDropdownVisible(false)}
+          variant="normal"
+          anchor={
+            <DTButton variant="normal" onPress={() => setMenuDropdownVisible(true)}>
+              OPEN DROPDOWN
+            </DTButton>
+          }
+          items={dropdownItems}
+        />
+      </DemoSection>
+
+      {/* DTGallery */}
+      <DemoSection
+        title="DTGallery"
+        variant="normal"
+        description="Image gallery with thumbnail strip and arrow navigation."
+      >
+        <DTGallery
+          items={galleryItems}
+          activeIndex={galleryIndex}
+          onSelect={setGalleryIndex}
+          variant="normal"
+          thumbnailSize={64}
+        />
+      </DemoSection>
+    </ScreenContainer>
+  );
+}

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+import { useDTTheme } from '@dangerousthings/react-native';
+import { ScreenContainer } from '../components/ScreenContainer';
+import { DemoSection } from '../components/DemoSection';
+import { BrandSwitcher } from '../components/BrandSwitcher';
+import { useBrand } from '../brand/BrandContext';
+
+const typographyScale = [
+  { variant: 'displaySmall' as const, label: 'Display Small (36px)' },
+  { variant: 'headlineMedium' as const, label: 'Headline Medium (28px)' },
+  { variant: 'headlineSmall' as const, label: 'Headline Small (24px)' },
+  { variant: 'titleLarge' as const, label: 'Title Large (22px)' },
+  { variant: 'titleMedium' as const, label: 'Title Medium (16px)' },
+  { variant: 'bodyLarge' as const, label: 'Body Large (16px)' },
+  { variant: 'bodyMedium' as const, label: 'Body Medium (14px)' },
+  { variant: 'bodySmall' as const, label: 'Body Small (12px)' },
+  { variant: 'labelLarge' as const, label: 'Label Large (14px)' },
+  { variant: 'labelSmall' as const, label: 'Label Small (11px)' },
+];
+
+export function ThemeScreen() {
+  const theme = useDTTheme();
+  const { brand } = useBrand();
+  const colors = brand.dark;
+
+  const colorSwatches = [
+    { name: 'primary', hex: colors.primary, label: 'Primary interactive' },
+    { name: 'secondary', hex: colors.secondary, label: 'Highlights, attention' },
+    { name: 'error', hex: colors.error, label: 'Errors, destructive' },
+    { name: 'success', hex: colors.success, label: 'Confirmations' },
+    { name: 'other', hex: colors.other, label: 'Secondary, misc' },
+  ];
+
+  const baseColors = [
+    { name: 'bg', hex: colors.bg, label: 'Background', textColor: colors.textPrimary },
+    { name: 'textPrimary', hex: colors.textPrimary, label: 'Text', textColor: colors.bg },
+    { name: 'surface', hex: colors.surface, label: 'Surface', textColor: colors.textPrimary },
+    { name: 'border', hex: colors.border, label: 'Border', textColor: colors.bg },
+  ];
+
+  return (
+    <ScreenContainer>
+      {/* Brand Switcher */}
+      <DemoSection
+        title="Brand Selector"
+        variant="emphasis"
+        description="Switch between all three brand themes."
+      >
+        <BrandSwitcher />
+        <Text variant="bodySmall" style={{ color: 'rgba(255,255,255,0.5)', textAlign: 'center' }}>
+          Current: {brand.name} — {brand.description}
+        </Text>
+      </DemoSection>
+
+      {/* Color Palette */}
+      <DemoSection
+        title="Color Palette"
+        variant="normal"
+        description={`The ${brand.name} color system. Semantic variants on dark background.`}
+      >
+        <Text variant="labelSmall" style={styles.subLabel}>MODE COLORS:</Text>
+        {colorSwatches.map((swatch) => (
+          <View key={swatch.name} style={styles.swatchRow}>
+            <View style={[styles.swatch, { backgroundColor: swatch.hex }]} />
+            <View style={styles.swatchInfo}>
+              <Text style={[styles.swatchName, { color: swatch.hex }]}>{swatch.name}</Text>
+              <Text style={styles.swatchHex}>{swatch.hex}</Text>
+              <Text style={styles.swatchDesc}>{swatch.label}</Text>
+            </View>
+          </View>
+        ))}
+
+        <Text variant="labelSmall" style={[styles.subLabel, { marginTop: 20 }]}>BASE COLORS:</Text>
+        {baseColors.map((color) => (
+          <View key={color.name} style={styles.swatchRow}>
+            <View style={[styles.swatch, { backgroundColor: color.hex, borderWidth: 1, borderColor: '#333' }]} />
+            <View style={styles.swatchInfo}>
+              <Text style={[styles.swatchName, { color: theme.colors.onSurface }]}>{color.name}</Text>
+              <Text style={styles.swatchHex}>{color.hex}</Text>
+              <Text style={styles.swatchDesc}>{color.label}</Text>
+            </View>
+          </View>
+        ))}
+      </DemoSection>
+
+      {/* Typography */}
+      <DemoSection
+        title="Typography Scale"
+        variant="emphasis"
+        description={`MD3 type scale. Font: ${brand.typography.heading}`}
+      >
+        <View style={{ gap: 8 }}>
+          {typographyScale.map((item) => (
+            <View key={item.variant} style={styles.typeRow}>
+              <Text variant={item.variant} style={{ color: theme.colors.onSurface }}>
+                {item.label}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </DemoSection>
+
+      {/* Shape Tokens */}
+      <DemoSection
+        title="Shape Tokens"
+        variant="success"
+        description="Bevel and radius values for the current brand."
+      >
+        <View style={styles.codeBlock}>
+          <Text style={[styles.codeText, { color: theme.custom.modeSuccess }]}>
+            {`bevelSm:  ${brand.shape.bevelSm}\nbevelMd:  ${brand.shape.bevelMd}\nbevelLg:  ${brand.shape.bevelLg}\nradiusSm: ${brand.shape.radiusSm}\nradius:   ${brand.shape.radius}\nradiusLg: ${brand.shape.radiusLg}`}
+          </Text>
+        </View>
+      </DemoSection>
+
+      {/* Spacing */}
+      <DemoSection
+        title="Spacing Reference"
+        variant="other"
+        description="Common spacing values used throughout the design system."
+      >
+        {[4, 8, 12, 16, 24, 32, 48].map((size) => (
+          <View key={size} style={styles.spacingRow}>
+            <View
+              style={[
+                styles.spacingBar,
+                { width: size * 3, backgroundColor: theme.custom.modeOther },
+              ]}
+            />
+            <Text style={styles.spacingLabel}>{size}px</Text>
+          </View>
+        ))}
+      </DemoSection>
+    </ScreenContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  subLabel: {
+    color: 'rgba(255,255,255,0.6)',
+    marginBottom: 12,
+  },
+  swatchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 12,
+  },
+  swatch: {
+    width: 40,
+    height: 40,
+  },
+  swatchInfo: {
+    flex: 1,
+  },
+  swatchName: {
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  swatchHex: {
+    color: 'rgba(255,255,255,0.5)',
+    fontSize: 11,
+    fontFamily: 'monospace',
+  },
+  swatchDesc: {
+    color: 'rgba(255,255,255,0.35)',
+    fontSize: 11,
+  },
+  typeRow: {
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255,255,255,0.05)',
+  },
+  codeBlock: {
+    backgroundColor: '#0a0a0a',
+    padding: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.1)',
+  },
+  codeText: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 20,
+  },
+  spacingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 8,
+  },
+  spacingBar: {
+    height: 12,
+  },
+  spacingLabel: {
+    color: 'rgba(255,255,255,0.5)',
+    fontSize: 11,
+    fontFamily: 'monospace',
+  },
+});

packages/showcase/mobile/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}

turbo.json

@@ -5,6 +5,16 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**"]
     },
+    "dev": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
+    "start": {
+      "dependsOn": ["^build"],
+      "cache": false,
+      "persistent": true
+    },
     "clean": {
       "cache": false
     },