@mr.dj2u/library-registry 0.0.0

package/assets/mds/src/features/onboarding/account-setup-screen.tsx

@@ -0,0 +1,54 @@
+import { useRouter } from 'expo-router';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+export default function AccountSetupScreen() {
+  const router = useRouter();
+
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Account setup</Text>
+      <Text style={styles.body}>
+        This is the production-ready handoff point after legal acceptance. Replace this with your
+        real auth and profile onboarding flow.
+      </Text>
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => router.replace('/')}
+        style={styles.homeButton}>
+        <Text style={styles.homeButtonText}>Continue to home</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#ffffff',
+    flex: 1,
+    gap: 12,
+    padding: 20,
+  },
+  title: {
+    color: '#111827',
+    fontSize: 26,
+    fontWeight: '800',
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  homeButton: {
+    alignItems: 'center',
+    backgroundColor: '#2563eb',
+    borderRadius: 12,
+    marginTop: 12,
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+  },
+  homeButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+});

package/assets/mds/src/features/onboarding/agreement-screen.tsx

@@ -0,0 +1,6 @@
+import { LegalDocumentView } from './components/legal-document-view';
+import { onboardingLegalDocuments } from './legal-documents';
+
+export default function AgreementScreen() {
+  return <LegalDocumentView document={onboardingLegalDocuments.agreement} />;
+}

package/assets/mds/src/features/onboarding/components/legal-document-view.tsx

@@ -0,0 +1,103 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import type { LegalDocument } from '../legal-documents';
+
+interface LegalDocumentViewProps {
+  document: LegalDocument;
+}
+
+function LegalDocumentMeta({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.metaItem}>
+      <Text style={styles.metaLabel}>{label}</Text>
+      <Text style={styles.metaValue}>{value}</Text>
+    </View>
+  );
+}
+
+function LegalSectionItem({ title, body }: { title: string; body: string }) {
+  return (
+    <View style={styles.section}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <Text style={styles.sectionBody}>{body}</Text>
+    </View>
+  );
+}
+
+export function LegalDocumentView({ document }: LegalDocumentViewProps) {
+  return (
+    <ScrollView contentContainerStyle={styles.content} style={styles.screen}>
+      <Text style={styles.title}>{document.title}</Text>
+      <Text style={styles.summary}>{document.summary}</Text>
+      <View style={styles.metaRow}>
+        <LegalDocumentMeta label="Effective" value={document.effectiveDate} />
+        <LegalDocumentMeta label="Last updated" value={document.lastUpdated} />
+      </View>
+      {document.sections.map((section) => (
+        <LegalSectionItem key={section.id} title={section.title} body={section.body} />
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+  },
+  content: {
+    gap: 14,
+    padding: 20,
+    paddingTop: 84,
+  },
+  title: {
+    color: '#0f172a',
+    fontSize: 28,
+    fontWeight: '800',
+  },
+  summary: {
+    color: '#334155',
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  metaRow: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  metaItem: {
+    backgroundColor: '#e2e8f0',
+    borderRadius: 10,
+    gap: 2,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  metaLabel: {
+    color: '#475569',
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+  },
+  metaValue: {
+    color: '#0f172a',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  section: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e2e8f0',
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 7,
+    padding: 14,
+  },
+  sectionTitle: {
+    color: '#0f172a',
+    fontSize: 17,
+    fontWeight: '800',
+  },
+  sectionBody: {
+    color: '#334155',
+    fontSize: 14,
+    lineHeight: 21,
+  },
+});

package/assets/mds/src/features/onboarding/legal-documents.ts

@@ -0,0 +1,80 @@
+export interface LegalDocumentSection {
+  id: string;
+  title: string;
+  body: string;
+}
+
+export interface LegalDocument {
+  id: 'agreement' | 'terms';
+  title: string;
+  summary: string;
+  effectiveDate: string;
+  lastUpdated: string;
+  sections: LegalDocumentSection[];
+}
+
+export const onboardingLegalDocuments: Record<'agreement' | 'terms', LegalDocument> = {
+  agreement: {
+    id: 'agreement',
+    title: 'User Agreement',
+    summary: 'Agreement template for onboarding consent and account usage.',
+    effectiveDate: '2026-05-24',
+    lastUpdated: '2026-05-24',
+    sections: [
+      {
+        id: 'scope',
+        title: 'Scope',
+        body: 'This agreement covers access to [APP NAME], account conduct, and baseline obligations between [COMPANY NAME] and each user.',
+      },
+      {
+        id: 'usage',
+        title: 'Acceptable Use',
+        body: 'Users agree not to misuse the service, attempt unauthorized access, or submit harmful content.',
+      },
+      {
+        id: 'privacy',
+        title: 'Privacy and Data',
+        body: 'User data is handled according to the published privacy notice. Replace this section with your final privacy commitments and retention policy.',
+      },
+      {
+        id: 'termination',
+        title: 'Termination',
+        body: 'Either party may terminate usage under the conditions described in this section. Add jurisdiction-specific language before production launch.',
+      },
+    ],
+  },
+  terms: {
+    id: 'terms',
+    title: 'Terms of Service',
+    summary: 'Near-blank, production-oriented terms starter for legal review.',
+    effectiveDate: '2026-05-24',
+    lastUpdated: '2026-05-24',
+    sections: [
+      {
+        id: 'eligibility',
+        title: 'Eligibility',
+        body: 'Users must meet age and legal capacity requirements for their jurisdiction.',
+      },
+      {
+        id: 'accounts',
+        title: 'Accounts',
+        body: 'Users are responsible for account credentials and activity performed through their account.',
+      },
+      {
+        id: 'payments',
+        title: 'Payments and Billing',
+        body: 'If applicable, describe pricing, billing intervals, refunds, and failed payment handling.',
+      },
+      {
+        id: 'liability',
+        title: 'Disclaimers and Liability',
+        body: 'Define limitations of liability and service disclaimers with legal counsel.',
+      },
+      {
+        id: 'governing-law',
+        title: 'Governing Law',
+        body: 'Specify governing law, venue, and dispute resolution expectations.',
+      },
+    ],
+  },
+};

package/assets/mds/src/features/onboarding/onboarding-screen.tsx

@@ -0,0 +1,167 @@
+import { Link, useRouter } from 'expo-router';
+import { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+
+import { onboardingLegalDocuments } from './legal-documents';
+
+export default function OnboardingScreen() {
+  const [acceptedAgreement, setAcceptedAgreement] = useState(false);
+  const [acceptedTerms, setAcceptedTerms] = useState(false);
+  const router = useRouter();
+  const canContinue = acceptedAgreement && acceptedTerms;
+  const agreementUpdated = useMemo(
+    () => new Date(onboardingLegalDocuments.agreement.lastUpdated).toLocaleDateString(),
+    []
+  );
+  const termsUpdated = useMemo(
+    () => new Date(onboardingLegalDocuments.terms.lastUpdated).toLocaleDateString(),
+    []
+  );
+
+  return (
+    <View style={styles.screen}>
+      <Text style={styles.title}>Legal onboarding</Text>
+      <Text style={styles.body}>
+        Review and approve the Agreement and Terms before continuing in your real auth or profile
+        flow.
+      </Text>
+      <View style={styles.card}>
+        <View style={styles.rowTop}>
+          <Text style={styles.cardTitle}>Agreement</Text>
+          <Text style={styles.meta}>{agreementUpdated}</Text>
+        </View>
+        <Text style={styles.cardBody}>
+          A compact starter agreement with fill-in fields your team can finalize.
+        </Text>
+        <View style={styles.rowBottom}>
+          <Link href="/onboarding/agreement" asChild>
+            <Pressable accessibilityRole="button" style={styles.linkButton}>
+              <Text style={styles.linkButtonText}>View agreement</Text>
+            </Pressable>
+          </Link>
+          <View style={styles.acceptWrap}>
+            <Text style={styles.acceptText}>Accepted</Text>
+            <Switch value={acceptedAgreement} onValueChange={setAcceptedAgreement} />
+          </View>
+        </View>
+      </View>
+      <View style={styles.card}>
+        <View style={styles.rowTop}>
+          <Text style={styles.cardTitle}>Terms of service</Text>
+          <Text style={styles.meta}>{termsUpdated}</Text>
+        </View>
+        <Text style={styles.cardBody}>
+          Production-safe baseline terms with placeholders for business specifics.
+        </Text>
+        <View style={styles.rowBottom}>
+          <Link href="/onboarding/terms" asChild>
+            <Pressable accessibilityRole="button" style={styles.linkButton}>
+              <Text style={styles.linkButtonText}>View terms</Text>
+            </Pressable>
+          </Link>
+          <View style={styles.acceptWrap}>
+            <Text style={styles.acceptText}>Accepted</Text>
+            <Switch value={acceptedTerms} onValueChange={setAcceptedTerms} />
+          </View>
+        </View>
+      </View>
+      <Pressable
+        accessibilityRole="button"
+        disabled={!canContinue}
+        onPress={() => {
+          if (canContinue) router.push('/onboarding/account-setup');
+        }}
+        style={[styles.ctaButton, !canContinue && styles.ctaButtonDisabled]}>
+        <Text style={styles.ctaButtonText}>Continue to account setup</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#ffffff',
+    flex: 1,
+    gap: 14,
+    padding: 20,
+  },
+  title: {
+    color: '#111827',
+    fontSize: 26,
+    fontWeight: '800',
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    borderColor: '#d1d5db',
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+    padding: 14,
+  },
+  rowTop: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  rowBottom: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  cardTitle: {
+    color: '#111827',
+    fontSize: 18,
+    fontWeight: '800',
+  },
+  cardBody: {
+    color: '#4b5563',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  meta: {
+    color: '#6b7280',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  linkButton: {
+    backgroundColor: '#111827',
+    borderRadius: 9,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  linkButtonText: {
+    color: '#ffffff',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  acceptWrap: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  acceptText: {
+    color: '#111827',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  ctaButton: {
+    alignItems: 'center',
+    backgroundColor: '#0f172a',
+    borderRadius: 12,
+    marginTop: 'auto',
+    paddingVertical: 14,
+  },
+  ctaButtonDisabled: {
+    backgroundColor: '#9ca3af',
+  },
+  ctaButtonText: {
+    color: '#ffffff',
+    fontSize: 15,
+    fontWeight: '800',
+  },
+});

package/assets/mds/src/features/onboarding/terms-screen.tsx

@@ -0,0 +1,6 @@
+import { LegalDocumentView } from './components/legal-document-view';
+import { onboardingLegalDocuments } from './legal-documents';
+
+export default function TermsScreen() {
+  return <LegalDocumentView document={onboardingLegalDocuments.terms} />;
+}

package/assets/mds/src/features/settings/settings-screen.tsx

@@ -0,0 +1,57 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { KeyboardForm } from '../../components/swmansion/keyboard-form';
+import { useAppTheme } from '../../theme/provider';
+
+export default function SettingsScreen() {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text
+          style={[
+            styles.title,
+            {
+              color: colors.text,
+              fontFamily: theme.typography.fontFamily,
+              fontWeight:
+                theme.typography.fontFamily === 'System' ||
+                theme.typography.fontFamily === 'monospace'
+                  ? '800'
+                  : 'normal',
+            },
+          ]}>
+          Settings
+        </Text>
+        <Text style={[styles.body, { color: colors.text }]}>
+          Keyboard Controller is ready for form-heavy screens.
+        </Text>
+      </View>
+      <KeyboardForm />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#ffffff',
+    flex: 1,
+    padding: 20,
+  },
+  header: {
+    marginBottom: 12,
+  },
+  title: {
+    color: '#111827',
+    fontSize: 26,
+    fontWeight: '800',
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 4,
+  },
+});

package/assets/mds/src/services/local-data.native.ts

@@ -0,0 +1,103 @@
+import * as SQLite from 'expo-sqlite';
+
+import { appSnapshot } from '../data/mock-app';
+
+import type { AppTask } from '../data/mock-app';
+
+const dbPromise = SQLite.openDatabaseAsync('exposition.db');
+let sqliteUnavailable = false;
+let memoryTasks: AppTask[] = [...appSnapshot.tasks];
+
+async function getDb() {
+  if (sqliteUnavailable) {
+    return null;
+  }
+
+  try {
+    return await dbPromise;
+  } catch {
+    sqliteUnavailable = true;
+    return null;
+  }
+}
+
+export async function ensureLocalDataReady(): Promise<void> {
+  const db = await getDb();
+  if (!db) {
+    return;
+  }
+
+  try {
+    await db.execAsync(`
+      CREATE TABLE IF NOT EXISTS exposition_tasks (
+        id TEXT PRIMARY KEY NOT NULL,
+        title TEXT NOT NULL,
+        status TEXT NOT NULL
+      );
+    `);
+    const row = await db.getFirstAsync<{ count: number }>(
+      'SELECT COUNT(*) as count FROM exposition_tasks'
+    );
+    if ((row?.count ?? 0) > 0) {
+      return;
+    }
+
+    for (const task of appSnapshot.tasks) {
+      await db.runAsync(
+        'INSERT INTO exposition_tasks (id, title, status) VALUES (?, ?, ?)',
+        task.id,
+        task.title,
+        task.status
+      );
+    }
+  } catch {
+    sqliteUnavailable = true;
+  }
+}
+
+export async function getLocalAppSnapshot(): Promise<typeof appSnapshot> {
+  await ensureLocalDataReady();
+  const db = await getDb();
+  if (!db) {
+    return { ...appSnapshot, tasks: memoryTasks };
+  }
+
+  try {
+    const tasks = await db.getAllAsync<AppTask>(
+      'SELECT id, title, status FROM exposition_tasks ORDER BY id'
+    );
+    return {
+      ...appSnapshot,
+      tasks,
+    };
+  } catch {
+    sqliteUnavailable = true;
+    return { ...appSnapshot, tasks: memoryTasks };
+  }
+}
+
+export async function addLocalTask(
+  title = 'Try the local DB adapter'
+): Promise<typeof appSnapshot> {
+  await ensureLocalDataReady();
+  const db = await getDb();
+  const id = `task-${Date.now()}`;
+  if (!db) {
+    memoryTasks = [...memoryTasks, { id, title, status: 'todo' }];
+    return { ...appSnapshot, tasks: memoryTasks };
+  }
+
+  try {
+    await db.runAsync(
+      'INSERT INTO exposition_tasks (id, title, status) VALUES (?, ?, ?)',
+      id,
+      title,
+      'todo'
+    );
+    return getLocalAppSnapshot();
+  } catch {
+    sqliteUnavailable = true;
+    memoryTasks = [...memoryTasks, { id, title, status: 'todo' }];
+    return { ...appSnapshot, tasks: memoryTasks };
+  }
+}

package/assets/mds/src/services/local-data.ts

@@ -0,0 +1,38 @@
+import { appSnapshot } from '../data/mock-app';
+
+import type { AppTask } from '../data/mock-app';
+
+let tasks: AppTask[] = [...appSnapshot.tasks];
+
+export async function ensureLocalDataReady(): Promise<void> {
+  tasks = tasks.length > 0 ? tasks : [...appSnapshot.tasks];
+}
+
+export async function getLocalAppSnapshot(): Promise<typeof appSnapshot> {
+  await ensureLocalDataReady();
+  return {
+    ...appSnapshot,
+    tasks,
+  };
+}
+
+export async function addLocalTask(
+  title = 'Try the local data adapter'
+): Promise<typeof appSnapshot> {
+  await ensureLocalDataReady();
+  tasks = [
+    ...tasks,
+    {
+      id: `task-${Date.now()}`,
+      title,
+      status: 'todo',
+    },
+  ];
+  return getLocalAppSnapshot();
+}
+
+export const dataAdapterNotes = [
+  'This default adapter is web-safe and keeps generated apps runnable immediately.',
+  'Native builds use local-data.native.ts for the Expo SQLite demo.',
+  'Keep screens behind this adapter boundary so SQLite or Supabase can be swapped later.',
+];

package/assets/mds/src/theme/font-assets.ts

@@ -0,0 +1,3 @@
+export const THEME_FONT_ASSETS: Record<string, number> = {};
+
+export default THEME_FONT_ASSETS;

package/assets/mds/src/theme/provider.tsx

@@ -0,0 +1,59 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+
+import defaultThemeTokens, {
+  type StylistColorPalette,
+  type StylistColorScheme,
+  type StylistThemeTokens,
+} from './tokens';
+
+export type AppThemeValue = StylistThemeTokens & {
+  activeScheme: StylistColorScheme;
+  activeColors: StylistColorPalette;
+};
+
+const AppThemeContext = createContext<AppThemeValue>({
+  ...defaultThemeTokens,
+  activeScheme: defaultThemeTokens.colorSystem.previewScheme,
+  activeColors: defaultThemeTokens.colors[defaultThemeTokens.colorSystem.previewScheme],
+});
+const AppThemeSetterContext = createContext<Dispatch<SetStateAction<StylistThemeTokens>> | null>(
+  null
+);
+
+export function AppThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<StylistThemeTokens>(defaultThemeTokens);
+  const value = useMemo<AppThemeValue>(() => {
+    const activeScheme = theme.colorSystem.previewScheme;
+    return {
+      ...theme,
+      activeScheme,
+      activeColors: theme.colors[activeScheme],
+    };
+  }, [theme]);
+
+  return (
+    <AppThemeSetterContext.Provider value={setTheme}>
+      <AppThemeContext.Provider value={value}>{children}</AppThemeContext.Provider>
+    </AppThemeSetterContext.Provider>
+  );
+}
+
+export function useAppTheme() {
+  return useContext(AppThemeContext);
+}
+
+export function useSetAppTheme() {
+  const setTheme = useContext(AppThemeSetterContext);
+  if (!setTheme) {
+    throw new Error('useSetAppTheme must be used inside AppThemeProvider.');
+  }
+  return setTheme;
+}