@mr.dj2u/library-registry 0.1.0 → 0.3.0

package/assets/mds/src/features/exposition/stylist-screen.tsx

@@ -13,6 +13,7 @@ import {
   Text,
   TextInput,
   type TextStyle,
+  useColorScheme,
   View,
 } from 'react-native';
 import ColorPicker, { HueSlider, Panel1, Preview } from 'reanimated-color-picker';
@@ -29,7 +30,7 @@ import defaultThemeTokens, {
   type StylistSemanticFamilies,
   type StylistThemeTokens,
 } from '../../theme/tokens';
-import { useSetAppTheme } from '../../theme/provider';
+import { readSystemScheme, useSetAppTheme } from '../../theme/provider';
 
 type SemanticColorKey = keyof StylistSemanticFamilies;
 type PaletteColorKey = keyof StylistColorPalette;
@@ -864,21 +865,45 @@ function ensureWebFontLoaded(fontFamily: string): void {
   loadedWebFonts.add(normalized);
 }
 
+function withPreviewScheme(
+  theme: ExtendedStylistThemeTokens,
+  scheme: StylistColorScheme
+): ExtendedStylistThemeTokens {
+  if (theme.colorSystem.previewScheme === scheme) {
+    return theme;
+  }
+
+  return {
+    ...theme,
+    colorSystem: {
+      ...theme.colorSystem,
+      previewScheme: scheme,
+    },
+  };
+}
+
+function createInitialStylistTheme(): ExtendedStylistThemeTokens {
+  const theme = withFontFamilyAlias(
+    normalizeThemeTypography(
+      reconcileTheme(stylistThemeTokens, 'picker', defaultBgFamilies, defaultBgFamilyShades)
+    )
+  );
+  const systemScheme = readSystemScheme();
+  return systemScheme ? withPreviewScheme(theme, systemScheme) : theme;
+}
+
 export default function StylistScreen() {
   const insets = useSafeAreaInsets();
   const setAppTheme = useSetAppTheme();
+  const systemScheme = useColorScheme();
+  const userOverrodePreview = useRef(false);
+  const previewSchemeInitializedFromSystem = useRef(readSystemScheme() !== null);
   const [colorInputMode, setColorInputMode] = useState<ColorInputMode>('picker');
   const [bgFamilies, setBgFamilies] =
     useState<Record<StylistColorScheme, PaletteFamilies>>(defaultBgFamilies);
   const [bgFamilyShades, setBgFamilyShades] =
     useState<Record<StylistColorScheme, PaletteShades>>(defaultBgFamilyShades);
-  const [theme, setTheme] = useState<ExtendedStylistThemeTokens>(
-    withFontFamilyAlias(
-      normalizeThemeTypography(
-        reconcileTheme(stylistThemeTokens, 'picker', defaultBgFamilies, defaultBgFamilyShades)
-      )
-    )
-  );
+  const [theme, setTheme] = useState<ExtendedStylistThemeTokens>(createInitialStylistTheme);
   const [selectedColor, setSelectedColor] = useState<PaletteColorKey>('primary');
   const [pickerHexDraft, setPickerHexDraft] = useState('#');
   const [livePickerPreview, setLivePickerPreview] = useState<LivePickerPreview | null>(null);
@@ -1007,13 +1032,27 @@ export default function StylistScreen() {
           return;
         }
         if (payload.theme) {
-          const nextTheme = withFontFamilyAlias(
+          const hydratedTheme = withFontFamilyAlias(
             normalizeThemeTypography(
               reconcileTheme(payload.theme, 'picker', defaultBgFamilies, defaultBgFamilyShades)
             )
           );
-          setTheme((prev) => (areThemesEqual(prev, nextTheme) ? prev : nextTheme));
-          setAppTheme(nextTheme);
+          const systemSchemeAtLoad = readSystemScheme();
+          setTheme((prev) => {
+            const resolvedScheme = userOverrodePreview.current
+              ? prev.colorSystem.previewScheme
+              : (systemSchemeAtLoad ?? prev.colorSystem.previewScheme);
+            if (!userOverrodePreview.current && systemSchemeAtLoad) {
+              previewSchemeInitializedFromSystem.current = true;
+            }
+            const nextTheme = withPreviewScheme(hydratedTheme, resolvedScheme);
+            return areThemesEqual(prev, nextTheme) ? prev : nextTheme;
+          });
+          setAppTheme(
+            systemSchemeAtLoad && !userOverrodePreview.current
+              ? withPreviewScheme(hydratedTheme, systemSchemeAtLoad)
+              : hydratedTheme
+          );
           setExplicitFontRoles({
             fontDisplay: true,
             fontTitle: true,
@@ -1054,6 +1093,17 @@ export default function StylistScreen() {
     };
   }, [setAppTheme]);
 
+  useEffect(() => {
+    if (userOverrodePreview.current || previewSchemeInitializedFromSystem.current) {
+      return;
+    }
+    if (systemScheme !== 'light' && systemScheme !== 'dark') {
+      return;
+    }
+    previewSchemeInitializedFromSystem.current = true;
+    setTheme((prev) => withPreviewScheme(prev, systemScheme));
+  }, [systemScheme]);
+
   const activeScheme = theme.colorSystem.previewScheme;
   const basePreviewColors = theme.colors[activeScheme];
   const baseEditablePalette =
@@ -1353,6 +1403,7 @@ export default function StylistScreen() {
   }
 
   function updatePreviewScheme(scheme: StylistColorScheme) {
+    userOverrodePreview.current = true;
     updateTheme((prev) => ({
       ...prev,
       colorSystem: {

package/assets/mds/src/features/legal/legal-acceptance-adapter.ts

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import {
+  configureLegalAcceptanceAdapter as configureSharedLegalAcceptanceAdapter,
+  getLegalAcceptanceUserId,
+  getLegalAcceptanceAdapter,
+  memoryLegalAcceptanceAdapter as sharedMemoryLegalAcceptanceAdapter,
+  notifyLegalAcceptanceChanged,
+  setLegalAcceptanceUserId,
+  subscribeToLegalAcceptanceChanges,
+} from './legal-acceptance-config';
+import { legalDocuments, type LegalDocument, type LegalDocumentId } from './legal-documents';
+
+export type LegalGateStatus = 'checking' | 'needs-legal' | 'complete' | 'error';
+
+export interface RequiredLegalDocument {
+  documentId: LegalDocumentId;
+  acceptanceVersion: string;
+  title: string;
+  changeSummary: string;
+}
+
+export interface LegalAcceptanceSnapshot {
+  status: LegalGateStatus;
+  requiredDocuments: RequiredLegalDocument[];
+  acceptedDocumentKeys: string[];
+  error?: string;
+}
+
+export interface LegalAcceptanceAdapter {
+  loadRequiredLegalAcceptances(
+    requiredDocuments: RequiredLegalDocument[],
+    userId?: string,
+  ): Promise<LegalAcceptanceSnapshot>;
+  acceptLegalDocument(
+    document: RequiredLegalDocument,
+    input?: { userId?: string; flowId?: string; flowVersion?: number },
+  ): Promise<void>;
+}
+
+function toRequiredLegalDocument(document: LegalDocument): RequiredLegalDocument {
+  return {
+    documentId: document.id,
+    acceptanceVersion: document.acceptanceVersion,
+    title: document.title,
+    changeSummary: document.changeSummary,
+  };
+}
+
+export function getRequiredMaterialLegalDocuments(): RequiredLegalDocument[] {
+  return Object.values(legalDocuments)
+    .filter((document) => document.requiresReacceptance)
+    .map(toRequiredLegalDocument);
+}
+
+export const memoryLegalAcceptanceAdapter =
+  sharedMemoryLegalAcceptanceAdapter as LegalAcceptanceAdapter;
+
+/** @deprecated Use memoryLegalAcceptanceAdapter. Kept as a compatible alias. */
+export const localLegalAcceptanceAdapter = memoryLegalAcceptanceAdapter;
+
+export function configureLegalAcceptanceAdapter(adapter: LegalAcceptanceAdapter): void {
+  configureSharedLegalAcceptanceAdapter(adapter);
+}
+
+export { setLegalAcceptanceUserId, subscribeToLegalAcceptanceChanges };
+
+export function useLegalUpdateGateSnapshot(
+  adapter: LegalAcceptanceAdapter = getLegalAcceptanceAdapter() as LegalAcceptanceAdapter,
+  userId?: string,
+) {
+  const requiredMaterialDocuments = useMemo(() => getRequiredMaterialLegalDocuments(), []);
+  const [snapshot, setSnapshot] = useState<LegalAcceptanceSnapshot>({
+    status: 'checking',
+    requiredDocuments: requiredMaterialDocuments,
+    acceptedDocumentKeys: [],
+  });
+  const [savingDocumentId, setSavingDocumentId] = useState<LegalDocumentId | null>(null);
+
+  const refresh = useCallback(async () => {
+    setSnapshot((current) => ({
+      ...current,
+      status: 'checking',
+      error: undefined,
+    }));
+    try {
+      const effectiveUserId = userId ?? getLegalAcceptanceUserId();
+      const nextSnapshot = await adapter.loadRequiredLegalAcceptances(
+        requiredMaterialDocuments,
+        effectiveUserId,
+      );
+      setSnapshot(nextSnapshot);
+      return nextSnapshot;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unable to check legal acceptance.';
+      const errorSnapshot: LegalAcceptanceSnapshot = {
+        status: 'error',
+        requiredDocuments: requiredMaterialDocuments,
+        acceptedDocumentKeys: [],
+        error: message,
+      };
+      setSnapshot(errorSnapshot);
+      return errorSnapshot;
+    }
+  }, [adapter, userId, requiredMaterialDocuments]);
+
+  const acceptDocument = useCallback(
+    async (
+      document: RequiredLegalDocument,
+      input?: { userId?: string; flowId?: string; flowVersion?: number },
+    ) => {
+      setSavingDocumentId(document.documentId);
+      try {
+        const effectiveUserId = userId ?? getLegalAcceptanceUserId();
+        await adapter.acceptLegalDocument(document, {
+          userId: input?.userId ?? effectiveUserId,
+          flowId: input?.flowId,
+          flowVersion: input?.flowVersion,
+        });
+        if (adapter !== memoryLegalAcceptanceAdapter) {
+          notifyLegalAcceptanceChanged();
+        }
+        return await refresh();
+      } finally {
+        setSavingDocumentId(null);
+      }
+    },
+    [adapter, userId, refresh],
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      void refresh();
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [refresh]);
+
+  useEffect(
+    () =>
+      subscribeToLegalAcceptanceChanges(() => {
+        void refresh();
+      }),
+    [refresh],
+  );
+
+  return {
+    snapshot,
+    refresh,
+    acceptDocument,
+    savingDocumentId,
+  };
+}
+
+export function useLegalUpdateGateStatus(
+  adapter: LegalAcceptanceAdapter = getLegalAcceptanceAdapter() as LegalAcceptanceAdapter,
+  userId?: string,
+): LegalGateStatus {
+  return useLegalUpdateGateSnapshot(adapter, userId).snapshot.status;
+}
+
+export function useLegalAcceptance(
+  adapter: LegalAcceptanceAdapter = getLegalAcceptanceAdapter() as LegalAcceptanceAdapter,
+  userId?: string,
+) {
+  const requiredDocuments = useMemo(() => getRequiredMaterialLegalDocuments(), []);
+  const { snapshot, acceptDocument, refresh } = useLegalUpdateGateSnapshot(adapter, userId);
+
+  const acceptedDocuments = {
+    terms: !snapshot.requiredDocuments.some((document) => document.documentId === 'terms'),
+    privacy: !snapshot.requiredDocuments.some((document) => document.documentId === 'privacy'),
+  };
+
+  return {
+    acceptedDocuments,
+    hasAcceptedRequiredDocuments: snapshot.status === 'complete',
+    acceptDocument: (documentId: LegalDocumentId) => {
+      const document = requiredDocuments.find((item) => item.documentId === documentId);
+      if (document) {
+        return acceptDocument(document, { userId });
+      }
+      return refresh();
+    },
+    revokeDocument: () => {
+      throw new Error('Legal acceptance records are append-only. Replace the adapter for test resets.');
+    },
+    resetLegalAcceptance: () => {
+      throw new Error('Legal acceptance records are append-only. Replace the adapter for test resets.');
+    },
+  };
+}

package/assets/mds/src/features/legal/legal-acceptance-config.ts

@@ -0,0 +1,79 @@
+export type LegalAcceptanceConfigAdapter = {
+  loadRequiredLegalAcceptances(
+    requiredDocuments: Array<{ documentId: string; acceptanceVersion: string }>,
+    userId?: string,
+  ): Promise<{
+    status: 'checking' | 'needs-legal' | 'complete' | 'error';
+    requiredDocuments: Array<{ documentId: string; acceptanceVersion: string }>;
+    acceptedDocumentKeys: string[];
+    error?: string;
+  }>;
+  acceptLegalDocument(
+    document: { documentId: string; acceptanceVersion: string },
+    input?: { userId?: string; flowId?: string; flowVersion?: number },
+  ): Promise<void>;
+};
+
+const memoryAcceptedKeys = new Set<string>();
+const legalAcceptanceListeners = new Set<() => void>();
+let currentLegalAcceptanceUserId: string | undefined;
+
+function legalDocumentKey(document: { documentId: string; acceptanceVersion: string }): string {
+  return `${document.documentId}@${document.acceptanceVersion}`;
+}
+
+export function notifyLegalAcceptanceChanged(): void {
+  for (const listener of legalAcceptanceListeners) {
+    listener();
+  }
+}
+
+export function subscribeToLegalAcceptanceChanges(listener: () => void): () => void {
+  legalAcceptanceListeners.add(listener);
+  return () => {
+    legalAcceptanceListeners.delete(listener);
+  };
+}
+
+export function setLegalAcceptanceUserId(userId?: string | null): void {
+  const nextUserId = userId ?? undefined;
+  if (currentLegalAcceptanceUserId === nextUserId) {
+    return;
+  }
+  currentLegalAcceptanceUserId = nextUserId;
+  notifyLegalAcceptanceChanged();
+}
+
+export function getLegalAcceptanceUserId(): string | undefined {
+  return currentLegalAcceptanceUserId;
+}
+
+export const memoryLegalAcceptanceAdapter: LegalAcceptanceConfigAdapter = {
+  async loadRequiredLegalAcceptances(requiredDocuments) {
+    const missingDocuments = requiredDocuments.filter(
+      (document) => !memoryAcceptedKeys.has(legalDocumentKey(document)),
+    );
+
+    return {
+      status: missingDocuments.length > 0 ? 'needs-legal' : 'complete',
+      requiredDocuments: missingDocuments,
+      acceptedDocumentKeys: [...memoryAcceptedKeys],
+    };
+  },
+
+  async acceptLegalDocument(document) {
+    memoryAcceptedKeys.add(legalDocumentKey(document));
+    notifyLegalAcceptanceChanged();
+  },
+};
+
+let legalAcceptanceAdapter: LegalAcceptanceConfigAdapter = memoryLegalAcceptanceAdapter;
+
+export function configureLegalAcceptanceAdapter(adapter: LegalAcceptanceConfigAdapter): void {
+  legalAcceptanceAdapter = adapter;
+  notifyLegalAcceptanceChanged();
+}
+
+export function getLegalAcceptanceAdapter(): LegalAcceptanceConfigAdapter {
+  return legalAcceptanceAdapter;
+}

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

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { getReadableTextColor } from '../../theme/color-utils';
+import { useAppTheme } from '../../theme/provider';
+import { LegalDocumentModal } from './legal-document-modal';
+import { getLegalDocument, type LegalDocumentId } from './legal-documents';
+import { useLegalAcceptance } from './use-legal-acceptance';
+
+interface LegalAgreementScreenProps {
+  continueLabel?: string;
+  onComplete?: () => void;
+}
+
+function AgreementRow({
+  documentId,
+  accepted,
+  onOpen,
+}: {
+  documentId: LegalDocumentId;
+  accepted: boolean;
+  onOpen: () => void;
+}) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const document = getLegalDocument(documentId);
+  const actionColor = accepted ? colors.success : colors.primary;
+  const actionForeground = getReadableTextColor(actionColor, theme.colors.light.text);
+
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.surface,
+          borderColor: accepted ? colors.success : colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <View style={styles.cardText}>
+        <Text style={[styles.cardTitle, { color: colors.text }]}>{document.title}</Text>
+        <Text style={[styles.cardSummary, { color: colors.text }]}>
+          Last updated {document.lastUpdated}
+        </Text>
+      </View>
+      <Pressable
+        accessibilityRole="button"
+        onPress={onOpen}
+        style={[
+          styles.reviewButton,
+          {
+            backgroundColor: actionColor,
+            borderRadius: Math.max(8, theme.layout.radius - 4),
+          },
+        ]}>
+        <Text style={[styles.reviewButtonText, { color: actionForeground }]}>
+          {accepted ? 'Accepted' : 'Review'}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+export function LegalAgreementScreen({
+  continueLabel = 'Continue',
+  onComplete,
+}: LegalAgreementScreenProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+  const primaryForeground = getReadableTextColor(colors.primary, theme.colors.light.text);
+  const [activeDocument, setActiveDocument] = useState<LegalDocumentId | null>(null);
+  const {
+    acceptedDocuments,
+    acceptDocument,
+    hasAcceptedRequiredDocuments,
+  } = useLegalAcceptance();
+  const canContinue = hasAcceptedRequiredDocuments && Boolean(onComplete);
+
+  const closeModal = () => setActiveDocument(null);
+  const acceptActiveDocument = () => {
+    if (activeDocument) {
+      acceptDocument(activeDocument);
+    }
+    closeModal();
+  };
+
+  return (
+    <View style={[styles.screen, { backgroundColor: colors.background }]}>
+      <View style={styles.header}>
+        <Text style={[styles.title, { color: colors.text }]}>Legal agreements</Text>
+        <Text style={[styles.body, { color: colors.text }]}>
+          Review and accept the Terms of Service and Privacy Policy before continuing.
+        </Text>
+      </View>
+
+      <View style={styles.stack}>
+        <AgreementRow
+          accepted={acceptedDocuments.terms}
+          documentId="terms"
+          onOpen={() => setActiveDocument('terms')}
+        />
+        <AgreementRow
+          accepted={acceptedDocuments.privacy}
+          documentId="privacy"
+          onOpen={() => setActiveDocument('privacy')}
+        />
+      </View>
+
+      <Pressable
+        accessibilityRole="button"
+        disabled={!canContinue}
+        onPress={onComplete}
+        style={[
+          styles.continueButton,
+          {
+            backgroundColor: canContinue ? colors.primary : colors.surface,
+            borderRadius: theme.layout.radius,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.continueButtonText,
+            { color: canContinue ? primaryForeground : colors.text },
+          ]}>
+          {continueLabel}
+        </Text>
+      </Pressable>
+
+      {activeDocument ? (
+        <LegalDocumentModal
+          documentId={activeDocument}
+          onClose={closeModal}
+          onPrimaryAction={acceptActiveDocument}
+          primaryActionLabel={`Accept ${getLegalDocument(activeDocument).title}`}
+          visible
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export default LegalAgreementScreen;
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    gap: 18,
+    padding: 20,
+    paddingTop: 72,
+  },
+  header: {
+    gap: 8,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '900',
+  },
+  body: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  stack: {
+    gap: 12,
+  },
+  card: {
+    alignItems: 'center',
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 14,
+  },
+  cardText: {
+    flex: 1,
+    gap: 4,
+  },
+  cardTitle: {
+    fontSize: 17,
+    fontWeight: '900',
+  },
+  cardSummary: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  reviewButton: {
+    alignItems: 'center',
+    minWidth: 94,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  reviewButtonText: {
+    fontSize: 13,
+    fontWeight: '900',
+  },
+  continueButton: {
+    alignItems: 'center',
+    marginTop: 'auto',
+    paddingVertical: 15,
+  },
+  continueButtonText: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+});

package/assets/mds/src/features/legal/legal-document-links.tsx

@@ -0,0 +1,85 @@
+import { Link } from 'expo-router';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+
+interface LegalDocumentLinksProps {
+  orientation?: 'horizontal' | 'vertical';
+  showDescription?: boolean;
+}
+
+const legalLinks = [
+  {
+    href: '/terms',
+    label: 'Terms of Service',
+    description: 'Review app usage, account, and service terms.',
+  },
+  {
+    href: '/privacy',
+    label: 'Privacy Policy',
+    description: 'Review data processing, retention, and user choices.',
+  },
+] as const;
+
+export function LegalDocumentLinks({
+  orientation = 'vertical',
+  showDescription = true,
+}: LegalDocumentLinksProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View style={[styles.group, orientation === 'horizontal' && styles.horizontal]}>
+      {legalLinks.map((item) => (
+        <Link key={item.href} href={item.href} asChild>
+          <Pressable
+            accessibilityRole="link"
+            style={[
+              styles.linkCard,
+              {
+                backgroundColor: colors.surface,
+                borderColor: colors.primary,
+                borderRadius: theme.layout.radius,
+              },
+              orientation === 'horizontal' && styles.horizontalCard,
+            ]}>
+            <Text style={[styles.linkLabel, { color: colors.text }]}>{item.label}</Text>
+            {showDescription ? (
+              <Text style={[styles.linkDescription, { color: colors.text }]}>
+                {item.description}
+              </Text>
+            ) : null}
+          </Pressable>
+        </Link>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    gap: 10,
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  linkCard: {
+    borderWidth: 1,
+    gap: 4,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+  },
+  horizontalCard: {
+    flex: 1,
+    minWidth: 180,
+  },
+  linkLabel: {
+    fontSize: 15,
+    fontWeight: '900',
+  },
+  linkDescription: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+});