Platform Strategy

GospeLib runs on three platforms with a single design system and shared component library (@gospelib/ui). Each platform delivers the same features but with an layout and interaction model optimized for its form factor.

Feature Matrix

Feature	Phone	Tablet	Web
Full scripture reader	✅	✅	✅
Interlinear & witness modes	✅	✅	✅
Full gesture suite (5 gestures)	✅	✅	Keyboard equivalents
Annotation system	✅	✅	✅
Lexicon bubbles	✅	✅	✅
AI whispers + full assistant	✅	✅	✅
Command palette	✅	✅	✅ (⌘+K)
Collections & binders	✅	✅	✅
Come Follow Me schedule	✅	✅	✅
Split pane reader	❌	✅	✅
Persistent context panel	❌	✅	✅
Multi-panel study layout	❌	✅	✅
Full constellation graph view	Simplified	✅	✅ (full canvas)
Keyboard navigation	N/A	Optional	✅ Full
Multi-window support	❌	❌	✅

The phone never feels crippled — it has every feature. It presents them one at a time rather than simultaneously.

Phone — Capable Pocket Edition

Navigation

Default: Bottom Tab Bar (56px tall, 5 tabs)

Reader  |  Explore  |  Study  |  Search  |  Profile

Alternative: Gesture-Driven — no persistent tab bar, edge swipes for navigation.

Layout

• Single-column reader fills the entire screen
• Features surface via bottom sheets, popovers, and overlays
• Constellation graph available as simplified node view + list fallback
• Context panel replaces the current view (not alongside it)

Margins

Element	Value
Horizontal margin	20px
Top margin	28px
Bottom margin	32px
Annotation gutter	12px (standard) / 56px (study mode)

Tablet — Full Scholarly Experience

The reference platform for serious study. Three-column layout:

┌─────────────┬───────────────────────────────┬──────────────────┐
│ Books Nav   │     Scripture Reader          │  Context Panel   │
│   220px     │        (flexible)             │     360px        │
└─────────────┴───────────────────────────────┴──────────────────┘

Navigation

Default: Collapsible Side Rail — 60px collapsed (icon only) / 220px expanded (icon + label)

Context Panel

The right-side context panel is a persistent scholarly workspace that adapts to the user's current action:

User Action	Panel Content
Word selected	Lexicon entry
Verse long-pressed	Verse connections
AI invoked	Study Assistant chat
Topic selected	Topic subgraph
Search active	Search results
Nothing selected	"Tap any word or verse to begin exploring"

The panel remembers its last content when switching chapters. History is navigable via back/forward controls.

Margins

Element	Value
Horizontal margin	40px
Top margin	36px
Bottom margin	40px

Web — Power User Workshop

Identical to tablet layout, with additional capabilities:

Feature	Details
Keyboard shortcuts	All actions have keyboard equivalents
⌘+K	Universal command palette from anywhere
Constellation canvas	Full viewport, not constrained to 360px panel
Multi-window	Open multiple passages in separate browser tabs; state syncs
Print/export	Professional PDF export with GospeLib typography

Layout

┌──────────────┬────────────────────────────────┬──────────────────────┐
│ Books Panel  │     Reader (max-width: 680px)  │   Tool Panel         │
│  (persistent)│        (centered)              │   (collapsible)      │
└──────────────┴────────────────────────────────┴──────────────────────┘

Web Margins

Element	Value
Reader max-width	680px centered
Horizontal padding	48px
Vertical padding	40px

Offline Support

The mobile app pre-caches content for full offline reading:

Content	Caching Strategy
Current CFM week readings	Automatic
Recently opened books (30 days)	Automatic
Personal annotations	Always local, synced to cloud
Full lexicon index	Pre-cached (~40MB)

Graceful Degradation

Feature	Offline Behavior
Reading & annotation	Fully functional
Lexicon lookup	Fully functional (local index)
AI features	"Available when connected" message
Search (semantic)	Local index only; API results unavailable
Sync	Queued, syncs on reconnection

Navigation Modes (All Platforms)

Users choose their preferred navigation model in Settings → Appearance → Navigation Style:

Mode	Default For	Description
A: Bottom Tab Bar	Phone	5 tabs, 56px tall, standard safe area inset
B: Gesture-Driven	—	No persistent nav, edge swipes, maximum immersion
C: Collapsible Side Rail	Tablet	60px collapsed / 220px expanded, left edge
D: Context-Adaptive	—	Nav morphs based on current context (reading → minimal, explore → full graph controls)

Technology

Platform	Framework	Rendering
Phone	Expo 52 / React Native ~0.76	Native views
Tablet	Expo 52 / React Native ~0.76	Native views
Web	Next.js 15 / React 19	React Native Web

Shared components live in @gospelib/ui using React Native primitives, rendered cross-platform via React Native Web.

Related Pages

• Navigation & Layout — detailed layout specifications
• Reader Experience — reader chrome and gesture handling
• Design Tokens — layout token reference