@mr.dj2u/library-registry 0.0.0

package/assets/mds/src/app/exposition/stylist-sync+api.ts

@@ -0,0 +1,241 @@
+import { spawn } from 'node:child_process';
+import { access, mkdir, readFile, unlink, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+import defaultThemeTokens from '@/theme/tokens';
+
+interface SyncResponse {
+  projectPath: string;
+  updatedFiles: string[];
+}
+
+interface StylistSyncRequestBody {
+  theme: unknown;
+  metadata?: {
+    writePolicy?: 'managed' | 'overwrite';
+    styleLibrary?:
+      | 'auto'
+      | 'uniwind'
+      | 'nativewind'
+      | 'nativewindui'
+      | 'unistyles'
+      | 'restyle'
+      | 'tamagui'
+      | 'stylesheet';
+  };
+}
+
+function parseSyncResponse(stdout: string): SyncResponse {
+  const trimmed = stdout.trim();
+  if (!trimmed) {
+    throw new Error('Stylist sync returned empty output.');
+  }
+  try {
+    return JSON.parse(trimmed) as SyncResponse;
+  } catch {
+    const match = trimmed.match(/\{[\s\S]*\}$/);
+    if (!match) {
+      throw new Error('Stylist sync returned non-JSON output.');
+    }
+    return JSON.parse(match[0]) as SyncResponse;
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const payload = (await request.json()) as unknown;
+    const normalized = normalizeSyncPayload(payload);
+    const result = await runStylistSync(JSON.stringify(normalized.theme), normalized.metadata);
+    return Response.json(result);
+  } catch (error) {
+    return Response.json(
+      { error: error instanceof Error ? error.message : 'Unknown stylist sync error' },
+      { status: 400 }
+    );
+  }
+}
+
+export async function GET() {
+  const configPath = path.resolve(process.cwd(), 'project', 'stylist.config.json');
+  const themePath = path.resolve(process.cwd(), 'project', 'theme.json');
+  const stylePath = path.resolve(process.cwd(), 'project', 'style.md');
+
+  const themeFromJson = await readThemeJson(themePath);
+  const themeFromStyle = await readThemeFromStyleMarkdown(stylePath);
+  const resolvedTheme = themeFromStyle ?? themeFromJson ?? defaultThemeTokens;
+  const themeSource = themeFromStyle ? 'style.md' : themeFromJson ? 'theme.json' : 'default';
+  const mismatchDetected =
+    Boolean(themeFromJson) &&
+    Boolean(themeFromStyle) &&
+    JSON.stringify(themeFromJson) !== JSON.stringify(themeFromStyle);
+  try {
+    const raw = await readFile(configPath, 'utf8');
+    const parsed = JSON.parse(raw) as { writePolicy?: string; styleLibrary?: string };
+    return Response.json({
+      hasConfig: true,
+      writePolicy: parsed.writePolicy ?? null,
+      styleLibrary: parsed.styleLibrary ?? null,
+      theme: resolvedTheme,
+      themeSource,
+      mismatchDetected,
+    });
+  } catch {
+    return Response.json({
+      hasConfig: false,
+      writePolicy: null,
+      styleLibrary: null,
+      theme: resolvedTheme,
+      themeSource,
+      mismatchDetected,
+    });
+  }
+}
+
+function normalizeSyncPayload(value: unknown): StylistSyncRequestBody {
+  if (!value || typeof value !== 'object') {
+    throw new Error('Invalid stylist payload.');
+  }
+
+  const asRecord = value as Record<string, unknown>;
+  if ('theme' in asRecord && asRecord.theme) {
+    return {
+      theme: asRecord.theme,
+      metadata:
+        asRecord.metadata && typeof asRecord.metadata === 'object'
+          ? (asRecord.metadata as StylistSyncRequestBody['metadata'])
+          : undefined,
+    };
+  }
+
+  if ('metadata' in asRecord) {
+    throw new Error('Invalid stylist payload: missing theme.');
+  }
+
+  return { theme: value };
+}
+
+async function runStylistSync(
+  inputJson: string,
+  metadata?: StylistSyncRequestBody['metadata']
+): Promise<SyncResponse> {
+  const tempDir = path.resolve(process.cwd(), '.expo', 'stylist-sync');
+  await mkdir(tempDir, { recursive: true });
+  const tempInputPath = path.join(
+    tempDir,
+    `theme-${Date.now()}-${Math.random().toString(36).slice(2)}.json`
+  );
+  await writeFile(tempInputPath, inputJson, 'utf8');
+
+  const fileExists = async (filePath: string): Promise<boolean> => {
+    try {
+      await access(filePath);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const runAttempt = async (
+    command: string,
+    args: string[],
+    env: NodeJS.ProcessEnv
+  ): Promise<SyncResponse> => {
+    return await new Promise<SyncResponse>((resolve, reject) => {
+      const child = spawn(command, args, {
+        cwd: process.cwd(),
+        stdio: ['ignore', 'pipe', 'pipe'],
+        windowsHide: true,
+        env,
+      });
+
+      let stdout = '';
+      let stderr = '';
+      child.stdout.on('data', (chunk) => {
+        stdout += String(chunk);
+      });
+      child.stderr.on('data', (chunk) => {
+        stderr += String(chunk);
+      });
+
+      child.on('error', (error) => {
+        reject(error);
+      });
+
+      const timeout = setTimeout(() => {
+        child.kill();
+        reject(new Error('Stylist sync timed out after 120 seconds.'));
+      }, 120000);
+
+      child.on('close', (code) => {
+        clearTimeout(timeout);
+        if (code !== 0) {
+          reject(
+            new Error(stderr.trim() || `Stylist sync failed with exit code ${code ?? 'unknown'}.`)
+          );
+          return;
+        }
+
+        try {
+          resolve(parseSyncResponse(stdout));
+        } catch (error) {
+          reject(
+            new Error(
+              `Failed to parse stylist sync output: ${error instanceof Error ? error.message : String(error)}${stderr.trim() ? ` | stderr: ${stderr.trim()}` : ''}`
+            )
+          );
+        }
+      });
+    });
+  };
+
+  const scriptPath = path.resolve(process.cwd(), 'scripts', 'stylist-sync-android.mjs');
+  const env = {
+    ...process.env,
+    MDS_STYLIST_INPUT_FILE: path.relative(process.cwd(), tempInputPath),
+    MDS_STYLIST_WRITE_POLICY: metadata?.writePolicy ?? 'managed',
+    MDS_STYLIST_STYLE_LIBRARY: metadata?.styleLibrary ?? 'auto',
+  };
+
+  try {
+    if (!(await fileExists(scriptPath))) {
+      throw new Error('Stylist sync helper is missing. Run npm install, then retry.');
+    }
+    return await runAttempt(process.execPath, [scriptPath], env);
+  } finally {
+    try {
+      await unlink(tempInputPath);
+    } catch {
+      // no-op
+    }
+  }
+}
+
+async function readThemeJson(filePath: string): Promise<unknown | null> {
+  try {
+    const raw = await readFile(filePath, 'utf8');
+    return JSON.parse(raw) as unknown;
+  } catch {
+    return null;
+  }
+}
+
+async function readThemeFromStyleMarkdown(filePath: string): Promise<unknown | null> {
+  try {
+    const raw = await readFile(filePath, 'utf8');
+    const startToken = '<!-- MDS_STYLIST_THEME_START -->';
+    const endToken = '<!-- MDS_STYLIST_THEME_END -->';
+    const startIndex = raw.indexOf(startToken);
+    const endIndex = raw.indexOf(endToken);
+    if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
+      return null;
+    }
+    const block = raw.slice(startIndex, endIndex + endToken.length);
+    const match = block.match(/```json\s*([\s\S]*?)\s*```/i);
+    if (!match?.[1]) {
+      return null;
+    }
+    return JSON.parse(match[1]) as unknown;
+  } catch {
+    return null;
+  }
+}

package/assets/mds/src/app/exposition/stylist.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/exposition/stylist-screen';

package/assets/mds/src/app/onboarding/account-setup.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/onboarding/account-setup-screen';

package/assets/mds/src/app/onboarding/agreement.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/onboarding/agreement-screen';

package/assets/mds/src/app/onboarding/terms.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/onboarding/terms-screen';

package/assets/mds/src/app/onboarding.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/onboarding/onboarding-screen';

package/assets/mds/src/app/settings.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/settings/settings-screen';

package/assets/mds/src/components/exposition/index.ts

@@ -0,0 +1,8 @@
+export { ExpositionNotice } from './notice';
+export { PackageCard } from './package-card';
+export { AnimatedPressable } from '../swmansion/animated-pressable';
+export { GestureCard } from '../swmansion/gesture-card';
+export { KeyboardForm } from '../swmansion/keyboard-form';
+export { ScreensCard } from '../swmansion/screens-card';
+export { SoftwareMansionLogo } from '../swmansion/software-mansion-logo';
+export { SvgMark } from '../swmansion/svg-mark';

package/assets/mds/src/components/exposition/notice.tsx

@@ -0,0 +1,3 @@
+export function ExpositionNotice() {
+  return null;
+}

package/assets/mds/src/components/exposition/package-card.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useAppTheme } from '../../theme/provider';
+
+interface PackageCardProps {
+  title: string;
+  packageName: string;
+  body: string;
+  children?: ReactNode;
+}
+
+export function PackageCard({ title, packageName, body, children }: PackageCardProps) {
+  const theme = useAppTheme();
+  const colors = theme.activeColors;
+
+  return (
+    <View
+      style={[
+        styles.card,
+        {
+          backgroundColor: colors.surface,
+          borderColor: colors.primary,
+          borderRadius: theme.layout.radius,
+        },
+      ]}>
+      <Text style={[styles.packageName, { color: colors.text }]}>{packageName}</Text>
+      <Text
+        style={[
+          styles.title,
+          {
+            color: colors.text,
+            fontFamily: theme.typography.fontFamily,
+            fontWeight:
+              theme.typography.fontFamily === 'System' ||
+              theme.typography.fontFamily === 'monospace'
+                ? '800'
+                : 'normal',
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text style={[styles.body, { color: colors.text }]}>{body}</Text>
+      {children ? <View style={styles.demo}>{children}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e5e7eb',
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+    padding: 16,
+  },
+  packageName: {
+    color: '#6b7280',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  title: {
+    color: '#111827',
+    fontSize: 17,
+    fontWeight: '800',
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  demo: {
+    marginTop: 6,
+  },
+});

package/assets/mds/src/components/swmansion/animated-pressable.tsx

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+const AnimatedPressableBase = Animated.createAnimatedComponent(Pressable);
+
+interface AnimatedPressableProps {
+  backgroundColor?: string;
+  children?: ReactNode;
+  label?: string;
+  onPress?: () => void;
+  textColor?: string;
+}
+
+export function AnimatedPressable({
+  backgroundColor = '#111827',
+  children,
+  label = 'Reanimated press demo',
+  onPress,
+  textColor = '#ffffff',
+}: AnimatedPressableProps) {
+  const pressed = useSharedValue(0);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: withTiming(pressed.value ? 0.97 : 1, { duration: 120 }) }],
+  }));
+
+  return (
+    <AnimatedPressableBase
+      onPress={onPress}
+      onPressIn={() => {
+        pressed.value = 1;
+      }}
+      onPressOut={() => {
+        pressed.value = 0;
+      }}
+      style={[styles.button, { backgroundColor }, animatedStyle]}>
+      {children ?? <Text style={[styles.label, { color: textColor }]}>{label}</Text>}
+    </AnimatedPressableBase>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#111827',
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  label: {
+    fontSize: 15,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+});

package/assets/mds/src/components/swmansion/gesture-card.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet, Text } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+
+interface GestureCardProps {
+  title: string;
+  body: string;
+}
+
+export function GestureCard({ title, body }: GestureCardProps) {
+  const offset = useSharedValue(0);
+  const pan = Gesture.Pan()
+    .onChange((event) => {
+      offset.value = event.translationX;
+    })
+    .onFinalize(() => {
+      offset.value = withSpring(0);
+    });
+
+  const style = useAnimatedStyle(() => ({
+    transform: [{ translateX: offset.value }],
+  }));
+
+  return (
+    <GestureDetector gesture={pan}>
+      <Animated.View style={[styles.card, style]}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.body}>{body}</Text>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e5e7eb',
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16,
+    boxShadow: '0 6px 10px rgba(0, 0, 0, 0.08)',
+  },
+  title: {
+    color: '#111827',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  body: {
+    color: '#4b5563',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 8,
+  },
+});

package/assets/mds/src/components/swmansion/keyboard-form.tsx

@@ -0,0 +1,73 @@
+import { Keyboard, Platform, ScrollView, StyleSheet, TextInput } from 'react-native';
+import { KeyboardAwareScrollView, KeyboardToolbar } from 'react-native-keyboard-controller';
+
+export function KeyboardForm() {
+  if (Platform.OS === 'web') {
+    return (
+      <ScrollView contentContainerStyle={styles.form} style={styles.scroller}>
+        <TextInput
+          blurOnSubmit
+          onSubmitEditing={Keyboard.dismiss}
+          placeholder="Project note"
+          returnKeyType="done"
+          style={styles.input}
+        />
+        <TextInput
+          blurOnSubmit
+          multiline
+          onSubmitEditing={Keyboard.dismiss}
+          placeholder="Details"
+          returnKeyType="done"
+          style={[styles.input, styles.multiline]}
+        />
+      </ScrollView>
+    );
+  }
+  return (
+    <>
+      <KeyboardAwareScrollView
+        bottomOffset={72}
+        contentContainerStyle={styles.form}
+        style={styles.scroller}>
+        <TextInput
+          blurOnSubmit
+          onSubmitEditing={Keyboard.dismiss}
+          placeholder="Project note"
+          returnKeyType="done"
+          style={styles.input}
+        />
+        <TextInput
+          blurOnSubmit
+          multiline
+          onSubmitEditing={Keyboard.dismiss}
+          placeholder="Details"
+          returnKeyType="done"
+          style={[styles.input, styles.multiline]}
+        />
+      </KeyboardAwareScrollView>
+      <KeyboardToolbar onDoneCallback={Keyboard.dismiss} />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroller: {
+    maxHeight: 220,
+  },
+  form: {
+    gap: 12,
+    paddingVertical: 8,
+  },
+  input: {
+    borderColor: '#d1d5db',
+    borderRadius: 10,
+    borderWidth: 1,
+    minHeight: 44,
+    paddingHorizontal: 12,
+  },
+  multiline: {
+    minHeight: 88,
+    paddingTop: 10,
+    textAlignVertical: 'top',
+  },
+});

package/assets/mds/src/components/swmansion/screens-card.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { enableScreens } from 'react-native-screens';
+
+export function ScreensCard() {
+  useEffect(() => {
+    enableScreens(true);
+  }, []);
+
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>Native Screens</Text>
+      <Text style={styles.body}>
+        react-native-screens is enabled so navigation can use native screen primitives for better
+        memory and lifecycle behavior.
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#eef2ff',
+    borderColor: '#c7d2fe',
+    borderRadius: 12,
+    borderWidth: 1,
+    padding: 16,
+  },
+  title: {
+    color: '#312e81',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  body: {
+    color: '#4338ca',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 8,
+  },
+});

package/assets/mds/src/components/swmansion/software-mansion-logo.tsx

@@ -0,0 +1,15 @@
+import { SvgXml } from 'react-native-svg';
+
+const softwareMansionLogoXml = `<svg fill="currentColor" viewBox="0 0 149.79 80" xmlns="http://www.w3.org/2000/svg" width="150" height="80" preserveAspectRatio="xMidYMid meet"><path d="M24.281 79.063h124.58V24.356L125.513.937H.933v54.707z" fill="#fff"></path><path d="M0 .001h125.9l23.894 23.967V80h-125.9L.002 56.033V0zm1.867 3.198v52.057l21.48 21.545V24.744zm1.321-1.324 21.48 21.545h121.94l-21.48-21.545zm144.74 23.418H25.218v52.833h122.71z"></path><path d="M47.255 46.215c0 1.873-1.246 3.496-4.234 3.496-1.308 0-2.367-.312-3.3-.686v-2.623c.996.5 2.179.812 3.237.812.997 0 1.494-.312 1.494-.875 0-1.748-4.731-1.187-4.731-4.746 0-2.185 1.744-3.498 4.172-3.498.995 0 1.929.251 2.926.813v2.685c-1.308-.812-2.242-1.062-2.989-1.062-.872 0-1.37.313-1.37.874-.062 1.625 4.794 1 4.794 4.81z"></path><path d="M49.62 43.903c0-3.184 2.614-5.807 5.79-5.807 3.175 0 5.79 2.623 5.79 5.808 0 3.185-2.615 5.807-5.79 5.807-3.176-.062-5.79-2.622-5.79-5.807zm8.716 0c0-1.748-1.307-3.06-2.927-3.06-1.618 0-2.925 1.312-2.925 3.061 0 1.748 1.307 3.06 2.925 3.06 1.62 0 2.927-1.312 2.927-3.061z"></path><path d="M67.675 37.408v.937h3.674l-1.246 2.623h-2.366v8.493H65.06v-8.556h-1.867v-2.622h1.867v-1.061c0-3.373 1.744-5.059 4.483-5.059.685 0 1.307.125 1.868.25v2.623c-.498-.187-1.058-.25-1.62-.25-1.494 0-2.116 1-2.116 2.623z"></path><path d="M76.952 40.906v4.434c0 1.187.685 1.687 1.743 1.687.685 0 1.37-.188 1.93-.562v2.747c-.747.312-1.431.5-2.427.5-2.43 0-3.923-1.312-3.923-3.998v-4.746h-1.619v-2.622h1.62v-2.873l2.676-.687v3.56h3.674v2.622h-3.674z"></path><path d="m99.988 38.346-3.549 11.115h-2.677l-2.428-7.619-2.49 7.619h-2.678l-3.549-11.115h3.051l1.992 7.432 2.367-7.432h2.676l2.367 7.432 1.992-7.432z"></path><path d="M101.36 43.903c0-3.184 2.303-5.807 5.48-5.807 1.244 0 2.24.375 2.987 1v-.75h2.678v11.115h-2.616v-.874c-.747.687-1.805 1.124-3.112 1.124-3.052-.062-5.417-2.622-5.417-5.807zm8.717 0c0-1.748-1.308-3.06-2.927-3.06s-2.926 1.312-2.926 3.061c0 1.748 1.307 3.06 2.926 3.06 1.619 0 2.927-1.312 2.927-3.061z"></path><path d="M116.3 38.346h2.615v1.498c.81-1.498 2.303-1.748 3.611-1.748v3.184c-1.868-.5-3.548.562-3.548 2.936v5.183H116.3z"></path><path d="M130.99 47.089a9.627 9.627 0 0 0 3.549-.687l-1.37 2.81a7.296 7.296 0 0 1-2.677.5c-3.923 0-6.288-2.436-6.288-5.808 0-3.185 2.365-5.808 5.79-5.808 2.303 0 4.171 1.187 4.918 2.685v4.06h-7.844c.373 1.31 1.68 2.248 3.922 2.248zm-3.985-4.371h5.79c-.373-1.313-1.494-2.124-2.926-2.124-1.37 0-2.428.874-2.864 2.124z"></path><path d="M55.223 58.83v7.306h-2.677v-6.869c0-1.187-.872-1.873-1.743-1.873-.934 0-1.744.686-1.744 1.873v6.869h-2.676v-6.869c0-1.187-.872-1.873-1.744-1.873-.934 0-1.743.686-1.743 1.873v6.869H40.22V55.02h2.615v.812c.622-.75 1.432-1 2.49-1 1.183 0 2.18.5 2.864 1.437.871-1 1.992-1.436 3.362-1.436 2.054 0 3.673 1.623 3.673 3.996z"></path><path d="M58.025 60.579c0-3.186 2.304-5.808 5.478-5.808 1.246 0 2.243.374 2.989.999v-.75h2.677v11.115h-2.615v-.874c-.747.687-1.805 1.124-3.112 1.124-3.052 0-5.417-2.622-5.417-5.807zm8.717 0c0-1.75-1.308-3.061-2.927-3.061s-2.926 1.312-2.926 3.061c0 1.748 1.308 3.06 2.926 3.06s2.927-1.312 2.927-3.061z"></path><path d="M72.843 55.02h2.614v.812c.81-.812 1.868-1.062 2.927-1.062 2.304 0 4.17 1.748 4.17 4.122v7.18h-2.676v-6.556a2.103 2.103 0 0 0-2.117-2.123 2.102 2.102 0 0 0-2.116 2.123v6.62h-2.678V55.02h-.124z"></path><path d="M93.326 62.889c0 1.873-1.245 3.496-4.234 3.496-1.307 0-2.366-.312-3.299-.686v-2.623c.996.5 2.179.812 3.238.812.996 0 1.493-.312 1.493-.874 0-1.75-4.73-1.188-4.73-4.747 0-2.186 1.742-3.497 4.17-3.497.996 0 1.93.25 2.927.812v2.685c-1.308-.812-2.242-1.062-2.989-1.062-.872 0-1.37.312-1.37.874-.062 1.687 4.794 1.063 4.794 4.81z"></path><path d="M99.116 55.02v11.115h-2.677V55.02z"></path><path d="M101.92 60.579c0-3.186 2.615-5.808 5.79-5.808s5.79 2.622 5.79 5.807-2.615 5.807-5.79 5.807-5.79-2.622-5.79-5.807zm8.717 0c0-1.75-1.307-3.061-2.927-3.061-1.618 0-2.926 1.312-2.926 3.061 0 1.748 1.308 3.06 2.926 3.06 1.62 0 2.927-1.312 2.927-3.061z"></path><path d="M116.24 55.02h2.615v.812c.81-.812 1.868-1.062 2.927-1.062 2.303 0 4.17 1.748 4.17 4.122v7.18h-2.676v-6.556a2.103 2.103 0 0 0-2.118-2.123 2.103 2.103 0 0 0-2.116 2.123v6.62h-2.677V55.02h-.125z"></path><path d="M131.24 63.076v.437h-.933v2.623h-.499v-2.623h-.933v-.437z"></path><path d="m132.3 63.076.997 2.435.933-2.435h.623v3.06h-.498v-2.248l-.934 2.248h-.436l-.934-2.248v2.248h-.498v-3.061h.747z"></path></svg>`;
+
+export function SoftwareMansionLogo({
+  width = 150,
+  height = 80,
+}: {
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <SvgXml xml={softwareMansionLogoXml} width={width} height={height} accessibilityRole="image" />
+  );
+}

package/assets/mds/src/components/swmansion/svg-mark.tsx

@@ -0,0 +1,16 @@
+import Svg, { Path } from 'react-native-svg';
+
+export function SvgMark({ size = 44 }: { size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 2048 2048" accessibilityRole="image">
+      <Path
+        fill="#5666ff"
+        d="m146.9 1305.8l-14.4 30q0 32.2 89.9 62.1 91 28.9 198.6 28.9 108.8 0 238.6-32.2 129.8-32.2 225.2-78.8 96.6-46.6 158.7-97.6 63.3-51.1 63.3-88.8 0-47.7-111-88.8-111-41-322.9-89.8-210.8-50-309.6-125.4-97.6-75.5-97.6-183.1 0-108.8 77.6-207.5 77.7-98.8 202-175.3 125.4-76.6 273-136.5 305.1-123.2 565.9-123.2 99.9 0 176.4 17.8 146.5 34.4 146.5 90.9 0 56.6-10 77.7-10 20-16.6 26.7-5.6 6.6-15.6 13.3-8.9 6.6-13.3 10-48.8 41-267.4 51-75.5 3.3-82.1 7.8-6.7 4.4-12.2 4.4-4.5 0-11.1-8.9-6.7-8.9-6.7-28.8 0-20 43.3-73.3-135.4 7.8-289.6 62.2-153.2 54.4-266.3 123.1-113.2 67.7-188.7 134.3-75.4 65.5-75.4 93.2 0 26.7 16.6 44.4 46.6 49.9 258.6 104.3 219.7 56.6 292.9 91 73.2 34.4 120.9 65.5 48.9 31 77.7 63.2 67.7 77.7 67.7 157.6 0 79.9-43.3 149.8-42.1 69.9-128.7 135.4-85.4 65.4-201.9 116.5-255.3 114.3-608.1 114.3-257.5 0-328.5-136.5-18.8-34.4-18.8-71 0-37.8 16.6-67.7 17.8-30 42.2-45.5 47.7-30 67.7-30 19.9 0 19.9 13.3z"
+      />
+      <Path
+        fill="#f66d22"
+        d="m486.9 1709.8l-14.4 30q0 32.2 89.9 62.1 91 28.9 198.6 28.9 108.8 0 238.6-32.2 129.8-32.2 225.2-78.8 96.6-46.6 158.7-97.6 63.3-51.1 63.3-88.8 0-47.7-111-88.8-111-41-322.9-89.8-210.8-50-309.6-125.4-97.6-75.5-97.6-183.1 0-108.8 77.6-207.5 77.7-98.8 202-175.3 125.4-76.6 273-136.5 305.1-123.2 565.9-123.2 99.9 0 176.4 17.8 146.5 34.4 146.5 90.9 0 56.6-10 77.7-10 20-16.6 26.7-5.6 6.6-15.6 13.3-8.9 6.6-13.3 10-48.8 41-267.4 51-75.5 3.3-82.1 7.8-6.7 4.4-12.2 4.4-4.5 0-11.1-8.9-6.7-8.9-6.7-28.8 0-20 43.3-73.3-135.4 7.8-289.6 62.2-153.2 54.4-266.3 123.1-113.2 67.7-188.7 134.3-75.4 65.5-75.4 93.2 0 26.7 16.6 44.4 46.6 49.9 258.6 104.3 219.7 56.6 292.9 91 73.2 34.4 120.9 65.5 48.9 31 77.7 63.2 67.7 77.7 67.7 157.6 0 79.9-43.3 149.8-42.1 69.9-128.7 135.4-85.4 65.4-201.9 116.5-255.3 114.3-608.1 114.3-257.5 0-328.5-136.5-18.8-34.4-18.8-71 0-37.8 16.6-67.7 17.8-30 42.2-45.5 47.7-30 67.7-30 19.9 0 19.9 13.3z"
+      />
+    </Svg>
+  );
+}

package/assets/mds/src/data/mock-app.ts

@@ -0,0 +1,21 @@
+export interface AppTask {
+  id: string;
+  title: string;
+  status: 'todo' | 'doing' | 'done';
+}
+
+export interface AppSnapshot {
+  name: string;
+  audience: string;
+  tasks: AppTask[];
+}
+
+export const appSnapshot: AppSnapshot = {
+  name: '[APP NAME]',
+  audience: '[TARGET AUDIENCE]',
+  tasks: [
+    { id: 'task-1', title: 'Shape the first user flow', status: 'doing' },
+    { id: 'task-2', title: 'Replace mock data with the real data layer', status: 'todo' },
+    { id: 'task-3', title: 'Run mds doctor before pushing', status: 'todo' },
+  ] satisfies AppTask[],
+};