designmd-forge 1.2.0

package/dist/data/designs/ios-trello-expo.md

@@ -0,0 +1,332 @@
+# Trello (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Trello's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-haptics`, `react-native-reanimated` v3, and `react-native-gesture-handler` for drag.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  // Action & board
+  action:        '#0C66E4',
+  actionPressed: '#0055CC',
+  actionTint:    '#E9F2FF',
+  boardBlue:     '#0079BF', // default backdrop
+
+  // Surfaces & text
+  card:          '#FFFFFF',
+  list:          '#F1F2F4',
+  sunken:        '#EBECF0',
+  divider:       '#DFE1E6',
+  border:        '#C1C7D0',
+  textPrimary:   '#172B4D',
+  textSecondary: '#5E6C84',
+  textTertiary:  '#8993A4',
+
+  // Card label palette (functional)
+  labelGreen:  '#4BCE97',
+  labelYellow: '#F5CD47',
+  labelOrange: '#FEA362',
+  labelRed:    '#F87168',
+  labelPurple: '#9F8FEF',
+  labelBlue:   '#579DFF',
+
+  // Semantic
+  success: '#1F845A',
+  dueSoon: '#B65C02',
+  overdue: '#C9372C',
+} as const;
+
+// Trello's signature navy-tinted shadow color
+export const SHADOW_NAVY = 'rgba(9,30,66,1)'; // apply with shadowOpacity
+
+export type TrelloColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Trello uses the system font deliberately. RN's default `System` resolves to SF Pro on iOS; Inter is the closest substitute if you bundle a webfont.
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const base = { color: '#172B4D' } satisfies TextStyle;
+
+export const typography = {
+  sheetTitle: { ...base, fontWeight: '700', fontSize: 24, lineHeight: 29, letterSpacing: -0.3 },
+  boardName:  { color: '#FFFFFF', fontWeight: '700', fontSize: 20, lineHeight: 24, letterSpacing: -0.2 },
+  section:    { ...base, fontWeight: '700', fontSize: 17, lineHeight: 22, letterSpacing: -0.1 },
+  listTitle:  { ...base, fontWeight: '600', fontSize: 15, lineHeight: 20 },
+  cardTitle:  { ...base, fontWeight: '600', fontSize: 15, lineHeight: 20 },
+  body:       { ...base, fontWeight: '400', fontSize: 15, lineHeight: 22 },
+  button:     { color: '#FFFFFF', fontWeight: '600', fontSize: 16, lineHeight: 20 },
+  badge:      { fontWeight: '600', fontSize: 12, lineHeight: 14, color: '#5E6C84' },
+  subtitle:   { fontWeight: '400', fontSize: 13, lineHeight: 17, color: '#5E6C84' },
+  labelUpper: { ...base, fontWeight: '700', fontSize: 11, lineHeight: 13, letterSpacing: 0.4, textTransform: 'uppercase' as const },
+  composer:   { ...base, fontWeight: '400', fontSize: 15, lineHeight: 21 },
+  caption:    { fontWeight: '400', fontSize: 11, lineHeight: 14, color: '#5E6C84' },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Card (with drag lift)
+
+```tsx
+// components/Card.tsx
+import { Text, View } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function Card({
+  title, labels, due, checklist, isDragging,
+}: { title: string; labels: string[]; due?: string; checklist?: string; isDragging?: boolean }) {
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: withSpring(isDragging ? 1.03 : 1, { damping: 16 }) }],
+    shadowColor: SHADOW_NAVY_BASE,
+    shadowOpacity: isDragging ? 0.25 : 0.13,
+    shadowRadius: isDragging ? 24 : 1,
+    shadowOffset: { width: 0, height: isDragging ? 12 : 1 },
+    elevation: isDragging ? 12 : 1,
+  }));
+
+  return (
+    <Animated.View style={[{ backgroundColor: colors.card, borderRadius: 8, paddingHorizontal: 12, paddingVertical: 8, gap: 8 }, style]}>
+      {labels.length > 0 && (
+        <View style={{ flexDirection: 'row', gap: 4 }}>
+          {labels.map((c, i) => (
+            <View key={i} style={{ width: 36, height: 8, borderRadius: 4, backgroundColor: c }} />
+          ))}
+        </View>
+      )}
+      <Text style={typography.cardTitle} numberOfLines={4}>{title}</Text>
+      {(due || checklist) && (
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          {due && (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Ionicons name="time-outline" size={12} color={colors.dueSoon} />
+              <Text style={[typography.badge, { color: colors.dueSoon }]}>{due}</Text>
+            </View>
+          )}
+          {checklist && (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Ionicons name="checkbox-outline" size={12} color={colors.textSecondary} />
+              <Text style={typography.badge}>{checklist}</Text>
+            </View>
+          )}
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+const SHADOW_NAVY_BASE = '#091E42';
+```
+
+### List / Column
+
+```tsx
+// components/List.tsx
+import { useState } from 'react';
+import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { Card } from './Card';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function List({ title, cards }: { title: string; cards: any[] }) {
+  const [composing, setComposing] = useState(false);
+  const [draft, setDraft] = useState('');
+
+  return (
+    <View style={{ width: 272, backgroundColor: colors.list, borderRadius: 12,
+      shadowColor: '#091E42', shadowOpacity: 0.08, shadowRadius: 2, shadowOffset: { width: 0, height: 1 } }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingTop: 8, gap: 6 }}>
+        <Text style={typography.listTitle}>{title}</Text>
+        <Text style={typography.badge}>{cards.length}</Text>
+        <View style={{ flex: 1 }} />
+        <Ionicons name="ellipsis-horizontal" size={16} color={colors.textSecondary} />
+      </View>
+
+      <ScrollView showsVerticalScrollIndicator={false} style={{ maxHeight: 520 }} contentContainerStyle={{ padding: 8, gap: 8 }}>
+        {cards.map((c, i) => (
+          <Card key={i} title={c.title} labels={c.labels} due={c.due} checklist={c.checklist} />
+        ))}
+      </ScrollView>
+
+      {composing ? (
+        <View style={{ padding: 8, gap: 8 }}>
+          <TextInput
+            value={draft}
+            onChangeText={setDraft}
+            placeholder="Enter a title for this card…"
+            placeholderTextColor={colors.textSecondary}
+            multiline
+            style={[typography.composer, { backgroundColor: colors.card, borderColor: colors.action, borderWidth: 2, borderRadius: 8, padding: 8 }]}
+          />
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Pressable style={{ backgroundColor: colors.action, borderRadius: 8, paddingHorizontal: 16, height: 36, justifyContent: 'center' }}>
+              <Text style={typography.button}>Add card</Text>
+            </Pressable>
+            <Pressable onPress={() => setComposing(false)}>
+              <Ionicons name="close" size={20} color={colors.textSecondary} />
+            </Pressable>
+          </View>
+        </View>
+      ) : (
+        <Pressable onPress={() => setComposing(true)} style={{ flexDirection: 'row', alignItems: 'center', gap: 8, padding: 12 }}>
+          <Ionicons name="add" size={16} color={colors.textSecondary} />
+          <Text style={[typography.body, { color: colors.textSecondary }]}>Add a card</Text>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+```
+
+### Board (horizontal scroll, backdrop)
+
+```tsx
+// components/Board.tsx
+import { ScrollView, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { List } from './List';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function Board({ boardName, lists, backdrop = colors.boardBlue }: { boardName: string; lists: any[]; backdrop?: string }) {
+  return (
+    <View style={{ flex: 1, backgroundColor: backdrop }}>
+      {/* If a photo backdrop, layer <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.16)' }} /> */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', height: 44, paddingHorizontal: 12, gap: 12 }}>
+        <Ionicons name="chevron-back" size={20} color="#FFF" />
+        <Text style={typography.boardName}>{boardName}</Text>
+        <View style={{ flex: 1 }} />
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: 'rgba(255,255,255,0.16)', borderRadius: 8, paddingHorizontal: 12, height: 32 }}>
+          <Ionicons name="filter" size={14} color="#FFF" />
+          <Text style={[typography.badge, { color: '#FFF' }]}>Filter</Text>
+        </View>
+        <Ionicons name="ellipsis-horizontal" size={20} color="#FFF" />
+      </View>
+
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ padding: 8, gap: 8, alignItems: 'flex-start' }}>
+        {lists.map((l, i) => (
+          <List key={i} title={l.title} cards={l.cards} />
+        ))}
+        <View style={{ width: 272, height: 44, backgroundColor: 'rgba(255,255,255,0.16)', borderRadius: 12, justifyContent: 'center', paddingHorizontal: 12 }}>
+          <Text style={[typography.body, { color: '#FFF' }]}>+ Add list</Text>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+```
+
+### Card Detail Sheet
+
+```tsx
+// Use a bottom-sheet lib (e.g. @gorhom/bottom-sheet) presented over a dimmed board.
+import { ScrollView, Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function CardDetailSheet({ title, progress }: { title: string; progress: number }) {
+  return (
+    <ScrollView style={{ backgroundColor: colors.card }} contentContainerStyle={{ padding: 16, gap: 20 }}>
+      <Text style={typography.sheetTitle}>{title}</Text>
+      <Text style={typography.labelUpper}>Checklist</Text>
+      <View style={{ height: 6, borderRadius: 3, backgroundColor: colors.sunken, overflow: 'hidden' }}>
+        <View style={{ width: `${progress * 100}%`, height: '100%', backgroundColor: colors.success }} />
+      </View>
+      <Text style={typography.labelUpper}>Activity</Text>
+      {/* comment rows */}
+    </ScrollView>
+  );
+}
+```
+
+## 4. Drag-and-Drop Lift
+
+```tsx
+// With react-native-gesture-handler + Reanimated: on long-press, set isDragging.
+// Visual contract: scale 1.03 + navy Level-3 shadow + a placeholder gap in the list.
+import { View } from 'react-native';
+import { colors } from '../theme/colors';
+
+export function DropPlaceholder() {
+  return <View style={{ height: 48, borderRadius: 8, backgroundColor: 'rgba(9,30,66,0.14)' }} />;
+}
+```
+
+## 5. Navigation (no bottom tab)
+
+```tsx
+// Trello has NO bottom tab bar. The board is the primary surface.
+// expo-router: a stack; boards list -> push a board that owns the screen.
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+export default function Layout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />          {/* Boards / Home */}
+      <Stack.Screen name="board/[id]" />     {/* Board owns the screen, scrolls horizontally */}
+    </Stack>
+  );
+}
+// Do NOT add expo-router Tabs — there is no bottom tab bar in Trello.
+```
+
+## 6. Motion
+
+```tsx
+// Card lift on drag — Card: scale withSpring(1.03) + shadow ramp, ~220ms settle
+
+// Card drop — withSpring settle, shadow returns to rest values
+
+// Card detail present — bottom-sheet slide ~300ms over a rgba(0,0,0,0.4) dim
+
+// Composer expand
+import { LayoutAnimation } from 'react-native';
+const openComposer = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setComposing(true); };
+
+// Checklist progress: animate width with withTiming(200)
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+```
+
+Haptics: `Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)` when a card is picked up; `Haptics.selectionAsync()` when it snaps into a new slot.
+
+## 7. Icon Library
+
+Use `@expo/vector-icons` (Ionicons). Map to Trello's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Back | `chevron-back` |
+| Board overflow | `ellipsis-horizontal` |
+| Filter (on board) | `filter` |
+| Search | `search` |
+| Add card / list | `add` |
+| Close composer | `close` |
+| Due date badge | `time-outline` |
+| Checklist badge | `checkbox-outline` |
+| Comment badge | `chatbubble-outline` |
+| Member | `person-circle` |
+| Attachment | `attach` |
+| Move card | `arrow-redo-outline` |
+| Checklist item | `checkbox` / `square-outline` |
+
+## 8. Platform Notes
+
+- **No bottom tab bar**: do not add `expo-router` `Tabs` — Trello navigates via the top bar and the horizontal board. The board is the primary scrollable surface
+- **Backdrop owns the screen**: the board background (solid `#0079BF`, gradient, or an `ImageBackground`) fills the whole board area; layer a `rgba(0,0,0,0.16)` scrim over photos so white lists/cards keep contrast
+- **Status bar**: `<StatusBar style="light" />` from `expo-status-bar` while a colored board is shown (white header content); switch to `dark` on white list/settings screens
+- **Safe area**: wrap with `SafeAreaView`; the board scrolls beneath the on-board header which respects the notch/Island; no tab bar to clear at the bottom
+- **Navy-tinted shadows**: always use `shadowColor: '#091E42'` (Trello navy), never pure black, so cards read on both colored backdrops and pale lists
+- **Drag performance**: drive the lift with Reanimated shared values on the UI thread; keep the placeholder a cheap solid `rgba(9,30,66,0.14)` block
+- **Dynamic Type**: RN respects font scaling; cards grow taller to fit. Set `allowFontScaling={false}` on badges and label chips where layout is rigid
+- **Accessibility**: a card's `accessibilityLabel` should read "Card, <title>, 2 labels, due tomorrow, checklist 3 of 8"; expose "Move card" as an `accessibilityActions` entry since drag is hard for screen readers; never rely on label color alone — show label text in expanded mode

package/dist/data/designs/ios-trello-swiftui.md

@@ -0,0 +1,359 @@
+# Trello (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Trello's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Action & Board
+    static let trlAction        = Color(red: 0.047, green: 0.400, blue: 0.894) // #0C66E4
+    static let trlActionPressed = Color(red: 0.000, green: 0.333, blue: 0.800) // #0055CC
+    static let trlActionTint    = Color(red: 0.914, green: 0.949, blue: 1.000) // #E9F2FF
+    static let trlBoardBlue     = Color(red: 0.000, green: 0.475, blue: 0.749) // #0079BF (default backdrop)
+
+    // MARK: - Surfaces & Text
+    static let trlCard      = Color.white                                  // #FFFFFF
+    static let trlList      = Color(red: 0.945, green: 0.949, blue: 0.957) // #F1F2F4
+    static let trlSunken    = Color(red: 0.922, green: 0.925, blue: 0.941) // #EBECF0
+    static let trlDivider   = Color(red: 0.875, green: 0.882, blue: 0.902) // #DFE1E6
+    static let trlBorder    = Color(red: 0.757, green: 0.780, blue: 0.816) // #C1C7D0
+    static let trlTextPrimary   = Color(red: 0.090, green: 0.169, blue: 0.302) // #172B4D
+    static let trlTextSecondary = Color(red: 0.369, green: 0.424, blue: 0.518) // #5E6C84
+    static let trlTextTertiary  = Color(red: 0.537, green: 0.576, blue: 0.643) // #8993A4
+
+    // MARK: - Card Label Palette (functional)
+    static let trlLabelGreen  = Color(red: 0.294, green: 0.808, blue: 0.592) // #4BCE97
+    static let trlLabelYellow = Color(red: 0.961, green: 0.804, blue: 0.278) // #F5CD47
+    static let trlLabelOrange = Color(red: 0.996, green: 0.639, blue: 0.384) // #FEA362
+    static let trlLabelRed    = Color(red: 0.973, green: 0.443, blue: 0.408) // #F87168
+    static let trlLabelPurple = Color(red: 0.624, green: 0.561, blue: 0.937) // #9F8FEF
+    static let trlLabelBlue   = Color(red: 0.341, green: 0.616, blue: 1.000) // #579DFF
+
+    // MARK: - Semantic
+    static let trlSuccess = Color(red: 0.122, green: 0.518, blue: 0.353) // #1F845A
+    static let trlDueSoon = Color(red: 0.714, green: 0.361, blue: 0.008) // #B65C02
+    static let trlOverdue = Color(red: 0.788, green: 0.216, blue: 0.173) // #C9372C
+}
+
+// Trello's signature navy-tinted shadow
+extension Color {
+    static func trlShadow(_ opacity: Double) -> Color {
+        Color(red: 0.035, green: 0.118, blue: 0.259).opacity(opacity) // rgba(9,30,66,a)
+    }
+}
+```
+
+## 2. Typography
+
+Trello uses the system font deliberately (legibility on any backdrop). Use SF Pro via `.system`; Inter is the closest web substitute.
+
+```swift
+extension Font {
+    static let trlSheetTitle  = Font.system(size: 24, weight: .bold)
+    static let trlBoardName   = Font.system(size: 20, weight: .bold)
+    static let trlSection     = Font.system(size: 17, weight: .bold)
+    static let trlListTitle   = Font.system(size: 15, weight: .semibold)
+    static let trlCardTitle   = Font.system(size: 15, weight: .semibold)
+    static let trlBody        = Font.system(size: 15, weight: .regular)
+    static let trlButton      = Font.system(size: 16, weight: .semibold)
+    static let trlBadge       = Font.system(size: 12, weight: .semibold)
+    static let trlSubtitle    = Font.system(size: 13, weight: .regular)
+    static let trlLabelUpper  = Font.system(size: 11, weight: .bold)
+    static let trlComposer    = Font.system(size: 15, weight: .regular)
+    static let trlCaption     = Font.system(size: 11, weight: .regular)
+}
+```
+
+## 3. Signature Components
+
+### Card (the core object, with drag lift)
+
+```swift
+struct TrelloCard: View {
+    let title: String
+    let labels: [Color]
+    let due: String?
+    let checklist: String? // e.g. "3/8"
+    var isDragging: Bool = false
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            if !labels.isEmpty {
+                HStack(spacing: 4) {
+                    ForEach(labels.indices, id: \.self) { i in
+                        RoundedRectangle(cornerRadius: 4)
+                            .fill(labels[i])
+                            .frame(width: 36, height: 8)
+                    }
+                }
+            }
+            Text(title)
+                .font(.trlCardTitle)
+                .foregroundStyle(.trlTextPrimary)
+                .lineLimit(4)
+            if due != nil || checklist != nil {
+                HStack(spacing: 8) {
+                    if let due {
+                        HStack(spacing: 4) {
+                            Image(systemName: "clock").font(.system(size: 11))
+                            Text(due).font(.trlBadge)
+                        }
+                        .foregroundStyle(.trlDueSoon)
+                    }
+                    if let checklist {
+                        HStack(spacing: 4) {
+                            Image(systemName: "checklist").font(.system(size: 11))
+                            Text(checklist).font(.trlBadge)
+                        }
+                        .foregroundStyle(.trlTextSecondary)
+                    }
+                }
+            }
+        }
+        .padding(.horizontal, 12)
+        .padding(.vertical, 8)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(RoundedRectangle(cornerRadius: 8).fill(Color.trlCard))
+        .scaleEffect(isDragging ? 1.03 : 1)
+        .shadow(
+            color: .trlShadow(isDragging ? 0.25 : 0.13),
+            radius: isDragging ? 24 : 1,
+            y: isDragging ? 12 : 1
+        )
+        .animation(.spring(response: 0.22, dampingFraction: 0.8), value: isDragging)
+    }
+}
+```
+
+### List / Column
+
+```swift
+struct TrelloList: View {
+    let title: String
+    let count: Int
+    let cards: [TrelloCardModel]   // your model
+    @State private var composing = false
+    @State private var draft = ""
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            HStack {
+                Text(title).font(.trlListTitle).foregroundStyle(.trlTextPrimary)
+                Text("\(count)").font(.trlBadge).foregroundStyle(.trlTextSecondary)
+                Spacer()
+                Image(systemName: "ellipsis").font(.system(size: 16)).foregroundStyle(.trlTextSecondary)
+            }
+            .padding(.horizontal, 8)
+            .padding(.top, 8)
+
+            ScrollView(showsIndicators: false) {
+                VStack(spacing: 8) {
+                    ForEach(cards) { card in
+                        TrelloCard(title: card.title, labels: card.labels, due: card.due, checklist: card.checklist)
+                    }
+                }
+                .padding(.horizontal, 8)
+            }
+
+            if composing {
+                VStack(spacing: 8) {
+                    TextField("Enter a title for this card…", text: $draft, axis: .vertical)
+                        .font(.trlComposer)
+                        .padding(8)
+                        .background(RoundedRectangle(cornerRadius: 8).fill(Color.trlCard)
+                            .overlay(RoundedRectangle(cornerRadius: 8).strokeBorder(Color.trlAction, lineWidth: 2)))
+                    HStack {
+                        Button("Add card") { /* add */ }
+                            .font(.trlButton).foregroundStyle(.white)
+                            .padding(.horizontal, 16).frame(height: 36)
+                            .background(RoundedRectangle(cornerRadius: 8).fill(Color.trlAction))
+                        Button { composing = false } label: { Image(systemName: "xmark").foregroundStyle(.trlTextSecondary) }
+                    }
+                }
+                .padding(8)
+            } else {
+                Button { composing = true } label: {
+                    HStack { Image(systemName: "plus"); Text("Add a card") }
+                        .font(.trlBody).foregroundStyle(.trlTextSecondary)
+                        .padding(8)
+                }
+            }
+        }
+        .frame(width: 272, alignment: .top)
+        .background(RoundedRectangle(cornerRadius: 12).fill(Color.trlList))
+        .shadow(color: .trlShadow(0.08), radius: 2, y: 1)
+    }
+}
+```
+
+### Board (horizontal scroll, backdrop)
+
+```swift
+struct TrelloBoard: View {
+    let boardName: String
+    let lists: [ListModel]
+    var backdrop: Color = .trlBoardBlue   // or an Image-backed background
+
+    var body: some View {
+        ZStack(alignment: .top) {
+            backdrop.ignoresSafeArea()
+            // optional scrim for photo backdrops:
+            // Color.black.opacity(0.16).ignoresSafeArea()
+
+            VStack(spacing: 0) {
+                // On-board header
+                HStack(spacing: 12) {
+                    Image(systemName: "chevron.left").foregroundStyle(.white)
+                    Text(boardName).font(.trlBoardName).foregroundStyle(.white)
+                    Spacer()
+                    OnBoardChip(label: "Filter", systemImage: "line.3.horizontal.decrease")
+                    Image(systemName: "ellipsis").foregroundStyle(.white)
+                }
+                .padding(.horizontal, 12)
+                .frame(height: 44)
+
+                ScrollView(.horizontal, showsIndicators: false) {
+                    HStack(alignment: .top, spacing: 8) {
+                        ForEach(lists) { list in
+                            TrelloList(title: list.title, count: list.cards.count, cards: list.cards)
+                        }
+                        AddListChip()
+                    }
+                    .padding(8)
+                }
+            }
+        }
+    }
+}
+
+struct OnBoardChip: View {
+    let label: String
+    let systemImage: String
+    var body: some View {
+        HStack(spacing: 6) {
+            Image(systemName: systemImage)
+            Text(label).font(.trlBadge)
+        }
+        .foregroundStyle(.white)
+        .padding(.horizontal, 12)
+        .frame(height: 32)
+        .background(RoundedRectangle(cornerRadius: 8).fill(Color.white.opacity(0.16)))
+    }
+}
+```
+
+### Card Detail Sheet
+
+```swift
+struct CardDetailSheet: View {
+    let title: String
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20) {
+                Text(title).font(.trlSheetTitle).foregroundStyle(.trlTextPrimary)
+
+                Text("CHECKLIST").font(.trlLabelUpper).foregroundStyle(.trlTextSecondary)
+                ProgressView(value: 0.375)
+                    .tint(.trlSuccess)
+
+                Text("ACTIVITY").font(.trlLabelUpper).foregroundStyle(.trlTextSecondary)
+                // comment rows…
+            }
+            .padding(16)
+        }
+        .background(Color.trlCard)
+        .presentationDetents([.large])
+        .presentationCornerRadius(16)
+    }
+}
+```
+
+## 4. Drag-and-Drop Lift
+
+```swift
+// Use .onLongPressGesture to enter drag, drive isDragging on the card.
+// SwiftUI's draggable/dropDestination (iOS 16+) or a manual DragGesture both work;
+// the visual contract is: scale 1.03 + Level-3 navy shadow + a placeholder gap.
+
+struct DropPlaceholder: View {
+    var body: some View {
+        RoundedRectangle(cornerRadius: 8)
+            .fill(Color.trlShadow(0.14)) // rgba(9,30,66,0.14)-ish gap
+            .frame(height: 48)
+            .transition(.opacity.combined(with: .scale))
+    }
+}
+```
+
+## 5. Navigation (no bottom tab)
+
+```swift
+// Trello has NO bottom TabView. The board is the primary surface.
+// App-level navigation is a top bar / drawer:
+
+struct RootView: View {
+    var body: some View {
+        NavigationStack {
+            BoardsListView()           // Boards / Home reached here
+                .navigationTitle("Boards")
+                .toolbar {
+                    ToolbarItem(placement: .topBarTrailing) {
+                        Button { /* search */ } label: { Image(systemName: "magnifyingglass") }
+                    }
+                }
+        }
+        // Pushing a board makes the board own the screen with horizontal scroll.
+    }
+}
+```
+
+## 6. Motion
+
+```swift
+// Card lift on drag — TrelloCard: scale 1.03 + shadow ramp, spring(response: 0.22)
+
+// Card drop — settle spring ~0.22s, shadow returns to rest
+
+// Card detail present — .presentationDetents + default sheet slide (~300ms)
+
+// Composer expand
+withAnimation(.easeInOut(duration: 0.18)) { composing = true }
+
+// Checklist progress
+ProgressView(value: progress).tint(.trlSuccess)
+    .animation(.easeInOut(duration: 0.2), value: progress)
+```
+
+Haptics: `.sensoryFeedback(.impact(weight: .medium), trigger: isDragging)` when a card is picked up; `.selection` when it snaps into a new slot.
+
+## 7. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Back | `chevron.left` | 18pt |
+| Board overflow | `ellipsis` | 16–20pt |
+| Filter (on board) | `line.3.horizontal.decrease` | 16pt |
+| Search | `magnifyingglass` | 18pt |
+| Add card / list | `plus` | 16pt |
+| Close composer | `xmark` | 16pt |
+| Due date badge | `clock` | 11pt |
+| Checklist badge | `checklist` | 11pt |
+| Comment badge | `text.bubble` | 11pt |
+| Member | `person.crop.circle.fill` | 24pt |
+| Attachment | `paperclip` | 16pt |
+| Move card | `arrow.right.square` | 16pt |
+| Checklist item | `checkmark.square` / `square` | 18pt |
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (`.draggable`/`.dropDestination`, `.presentationDetents`, `.sensoryFeedback` is iOS 17 — fall back to `UIImpactFeedbackGenerator`)
+- Support Dynamic Type on card titles, body, and sheet content — cards grow taller to fit; keep badges and label chips fixed
+- VoiceOver: a card announces "Card, <title>, 2 labels, due tomorrow, checklist 3 of 8"; expose drag as a custom action ("Move card") since drag-and-drop is hard for VoiceOver; the board name reads with `.accessibilityAddTraits(.isHeader)`
+- Contrast: navy ink `#172B4D` on white cards passes WCAG AAA; on-board white text requires the scrim — never place white text on a light photo without `rgba(0,0,0,0.16+)` behind it. `#5E6C84` secondary on white passes AA at 12pt+ (validate badges)
+- Color independence: label colors must not be the *only* signal — show label text in expanded mode for color-blind users
+- Reduce Motion: when `accessibilityReduceMotion` is on, replace the drag scale with an opacity change and skip the placeholder scale transition
+- Touch targets: whole card is the drag/tap target (≥44pt); on-board 32pt chips get a 44pt hit area; checklist boxes get 44pt