create-idia-app 0.2.0

package/template/.idia/manifest.json

@@ -0,0 +1,17 @@
+{
+  "idiaCli": "0.2.0",
+  "core": "0.2.0",
+  "features": {
+    "storybook": {
+      "installed": "2026-07-01T19:46:10.873Z",
+      "storybookDocs": "0.2.0",
+      "storybook": "8.4.7",
+      "preset": "0.2.0"
+    },
+    "brain": {
+      "installed": "2026-07-01T19:50:02.249Z",
+      "brainPack": "0.2.0",
+      "sourceHash": "sha256:0fafc035b8d85e32075e95a803766c4a31e8f9a2c2b5ee478e8b6ec4e412875d"
+    }
+  }
+}

package/template/.storybook/main.ts

@@ -0,0 +1,9 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { idiaStorybookMain } from '@idia-ui/storybook-preset-react-native-web';
+
+const config: StorybookConfig = idiaStorybookMain({
+  stories: ['../src/stories/**/*.stories.@(ts|tsx)'],
+  staticDirs: ['../public'],
+});
+
+export default config;

package/template/.storybook/preview.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { AppProviders } from '../src/providers/AppProviders';
+import '../global.css';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <AppProviders>
+        <Story />
+      </AppProviders>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+};
+
+export default preview;

package/template/AGENTS.md

@@ -0,0 +1,11 @@
+<!-- idia-ui brain:begin -->
+## idia-ui design-system brain
+
+For idia-ui component usage, design-system documentation, Storybook docs, UI generation, or AI-guided UI work, read:
+
+`.idia/brain/AGENTS.md`
+
+before using idia-ui components.
+
+This installed brain pack is read-only generated guidance. Do not edit files under `.idia/brain/` directly.
+<!-- idia-ui brain:end -->

package/template/App.tsx

@@ -0,0 +1,24 @@
+import { Platform } from 'react-native'
+import { enableFreeze, enableScreens } from 'react-native-screens'
+
+import { AppProviders } from '@/providers/AppProviders'
+import { RootNavigator } from '@/navigation/RootNavigator'
+
+import '@idia-ui/core/styles/global.css'
+
+if (Platform.OS === 'web') {
+  require('./global.css')
+}
+
+if (Platform.OS !== 'web') {
+  enableScreens(true)
+  enableFreeze(true)
+}
+
+export function App() {
+  return (
+    <AppProviders>
+      <RootNavigator />
+    </AppProviders>
+  )
+}

package/template/README.md

@@ -0,0 +1,75 @@
+# my-idia-app
+
+Expo + React Navigation starter consuming `@idia-ui/core` and `@idia-ui/theme` from npm.
+
+Synced from `apps/consumer-sandbox` via `node scripts/sync-consumer-template.mjs` in the idia-ui monorepo.
+
+## Prerequisites
+
+- Node.js 20+
+- pnpm, npm, or yarn (pnpm recommended; this template ships a `.npmrc` for Expo/RN hoisting)
+
+## Install
+
+```bash
+pnpm install
+```
+
+### Required transitive peers (@idia-ui/core 0.2.0)
+
+`@idia-ui/core` eagerly loads Table and Calendar module graphs. Install these even if you only render Welcome/Home:
+
+| Package | Version (template lock) |
+|---------|-------------------------|
+| `zustand` | `^5.0.0` |
+| `@tanstack/react-table` | `^8.21.0` |
+| `react-image-crop` | `^11.0.0` |
+| `@fullcalendar/core` | `^6.1.0` |
+| `@fullcalendar/daygrid` | `^6.1.0` |
+| `@fullcalendar/timegrid` | `^6.1.0` |
+| `@fullcalendar/interaction` | `^6.1.0` |
+| `@fullcalendar/multimonth` | `^6.1.0` |
+| `@fullcalendar/list` | `^6.1.0` |
+| `@fullcalendar/react` | `^6.1.0` |
+
+These are already listed in `package.json`. Future `idia-ui doctor` (Phase 2) will validate peer health.
+
+## Development
+
+```bash
+pnpm dev      # web (Metro)
+pnpm ios      # iOS simulator
+pnpm android  # Android emulator
+pnpm typecheck
+```
+
+## Locked peer matrix
+
+| Concern | Version |
+|---------|---------|
+| Expo SDK | **53** (`~53.0.27`) |
+| React / React Native | **19** / **0.79** |
+| Tamagui | **1.144.x** |
+| React Navigation | **6.x** |
+| `@idia-ui/core` / `@idia-ui/theme` | **^0.2.0** |
+
+## Metro
+
+Consumer template uses a slim `metro.config.js` — no monorepo `watchFolders`, dist-path hacks, or `metro-compat.cjs`. Metro **0.82.5** is pinned in devDependencies to match Expo SDK 53.
+
+## Screens
+
+| Route | Purpose |
+|-------|---------|
+| `Welcome` | Onboarding, version badge, command reference, theme toggle |
+| `Home` | Minimal placeholder |
+
+## Future commands (copy only — not implemented)
+
+- `idia-ui doctor`
+- `idia-ui add storybook`
+- `idia-ui add brain`
+
+## Tier posture
+
+Tier 0 GO | Tier 1G experimental | Tier 1P NO-GO | Tier 1 aggregate NO-GO | Tier 2/GA NO-GO

package/template/app.json

@@ -0,0 +1,13 @@
+{
+  "expo": {
+    "name": "my-idia-app",
+    "slug": "my-idia-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "scheme": "my-idia-app",
+    "userInterfaceStyle": "automatic",
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}

package/template/babel.config.js

@@ -0,0 +1,25 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        '@tamagui/babel-plugin',
+        {
+          components: ['tamagui'],
+          config: './tamagui.config.ts',
+        },
+      ],
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          alias: {
+            '@': './src',
+          },
+        },
+      ],
+      'react-native-reanimated/plugin',
+    ],
+  }
+}

package/template/global.css

@@ -0,0 +1,32 @@
+/* Web typography baseline — prevent serif flash before custom fonts load. */
+html,
+body,
+#root,
+[data-rn-root] {
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  background-color: var(--backgroundNeutralSubtle400, #f5f5f5);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/Inter.ttf') format('truetype');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'NunitoSans';
+  src: url('/fonts/NunitoSans.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+:focus:not(:focus-visible) {
+  box-shadow: none !important;
+}

package/template/index.ts

@@ -0,0 +1,8 @@
+import 'react-native-gesture-handler'
+import 'fast-text-encoding'
+
+import { registerRootComponent } from 'expo'
+
+import { App } from './App'
+
+registerRootComponent(App)

package/template/metro.config.js

@@ -0,0 +1,19 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('path')
+
+const projectRoot = __dirname
+
+const config = getDefaultConfig(projectRoot)
+
+config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer')
+config.resolver.assetExts = config.resolver.assetExts.filter((ext) => ext !== 'svg')
+if (!config.resolver.assetExts.includes('woff2')) {
+  config.resolver.assetExts.push('woff2')
+}
+config.resolver.sourceExts.push('svg')
+
+config.resolver.extraNodeModules = {
+  '@': path.resolve(projectRoot, 'src'),
+}
+
+module.exports = config

package/template/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "my-idia-app",
+  "private": true,
+  "version": "0.1.0",
+  "main": "index.ts",
+  "scripts": {
+    "dev": "expo start --web --offline",
+    "start": "expo start --offline",
+    "android": "expo start --android --offline",
+    "ios": "expo start --ios --offline",
+    "web": "expo start --web --offline",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~5.0.4",
+    "@idia-ui/core": "^0.2.0",
+    "@idia-ui/theme": "^0.2.0",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
+    "@react-native-picker/picker": "^2.11.0",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
+    "@tamagui/animations-react-native": "^1.144.4",
+    "@tamagui/lucide-icons": "^1.144.4",
+    "@tamagui/shorthands": "^1.144.4",
+    "@tanstack/react-table": "^8.21.0",
+    "date-fns": "^4.1.0",
+    "expo": "~53.0.27",
+    "expo-linear-gradient": "^14.0.2",
+    "expo-status-bar": "~2.2.3",
+    "fast-text-encoding": "^1.0.6",
+    "libphonenumber-js": "^1.12.0",
+    "lottie-react-native": "^7.2.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native": "^0.79.0",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-modal": "^13.0.1",
+    "react-native-reanimated": "^3.16.0",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-screens": "~4.11.0",
+    "react-native-svg": "^15.11.2",
+    "react-native-web": "^0.20.0",
+    "tamagui": "^1.144.4",
+    "zustand": "^5.0.0",
+    "react-image-crop": "^11.0.0",
+    "@fullcalendar/core": "^6.1.0",
+    "@fullcalendar/daygrid": "^6.1.0",
+    "@fullcalendar/timegrid": "^6.1.0",
+    "@fullcalendar/interaction": "^6.1.0",
+    "@fullcalendar/multimonth": "^6.1.0",
+    "@fullcalendar/list": "^6.1.0",
+    "@fullcalendar/react": "^6.1.0"
+  },
+  "devDependencies": {
+    "@expo/metro-config": "0.20.18",
+    "@idia-ui/brain-pack": "workspace:*",
+    "@idia-ui/storybook-docs": "workspace:*",
+    "@idia-ui/storybook-preset-react-native-web": "workspace:*",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@tamagui/babel-plugin": "^1.144.4",
+    "@types/react": "^19.0.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-preset-expo": "~13.2.5",
+    "metro": "0.82.5",
+    "metro-babel-transformer": "0.82.5",
+    "metro-cache": "0.82.5",
+    "metro-config": "0.82.5",
+    "metro-core": "0.82.5",
+    "metro-file-map": "0.82.5",
+    "metro-resolver": "0.82.5",
+    "metro-runtime": "0.82.5",
+    "metro-source-map": "0.82.5",
+    "metro-transform-plugins": "0.82.5",
+    "metro-transform-worker": "0.82.5",
+    "react-native-svg-transformer": "^1.5.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.0",
+    "vite-tsconfig-paths": "^4.3.0"
+  }
+}

package/template/src/config/env.ts

@@ -0,0 +1,4 @@
+/** EXPO_PUBLIC_* env pattern stub for future API keys and feature flags. */
+export const env = {
+  apiUrl: process.env.EXPO_PUBLIC_API_URL ?? '',
+} as const

package/template/src/config/versions.ts

@@ -0,0 +1,7 @@
+/** Matches @idia-ui/core semver pin — update when packages bump. */
+export const IDIA_CORE_VERSION = '0.2.0'
+
+export const GITHUB_URL = 'https://github.com/idia-ui/idia-ui'
+
+export const IDIA_INDEX_SKILL_URL =
+  'https://raw.githubusercontent.com/idia-ui/idia-ui/main/skills/idia-index/SKILL.md'

package/template/src/navigation/RootNavigator.tsx

@@ -0,0 +1,27 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+
+import { HomeScreen } from '@/screens/Home/HomeScreen'
+import { WelcomeScreen } from '@/screens/Welcome/WelcomeScreen'
+
+import type { RootStackParamList } from './types'
+
+const Stack = createNativeStackNavigator<RootStackParamList>()
+
+export function RootNavigator() {
+  return (
+    <Stack.Navigator
+      initialRouteName="Welcome"
+      screenOptions={{
+        headerShown: true,
+        animation: 'fade',
+      }}
+    >
+      <Stack.Screen
+        name="Welcome"
+        component={WelcomeScreen}
+        options={{ title: 'Welcome' }}
+      />
+      <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Home' }} />
+    </Stack.Navigator>
+  )
+}

package/template/src/navigation/linking.ts

@@ -0,0 +1,13 @@
+import type { LinkingOptions } from '@react-navigation/native'
+
+import type { RootStackParamList } from './types'
+
+export const linking: LinkingOptions<RootStackParamList> = {
+  prefixes: ['my-idia-app://', 'https://my-idia-app.local'],
+  config: {
+    screens: {
+      Welcome: '',
+      Home: 'home',
+    },
+  },
+}

package/template/src/navigation/types.ts

@@ -0,0 +1,10 @@
+export type RootStackParamList = {
+  Welcome: undefined
+  Home: undefined
+}
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends RootStackParamList {}
+  }
+}

package/template/src/providers/AppProviders.tsx

@@ -0,0 +1,47 @@
+import { ThemeProvider, useColorMode, waitForWebFonts } from '@idia-ui/theme'
+import { NavigationContainer } from '@react-navigation/native'
+import React, { useEffect, useState } from 'react'
+import { StyleSheet } from 'react-native'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { TamaguiProvider, Theme } from 'tamagui'
+
+import { linking } from '@/navigation/linking'
+import tamaguiConfig from '../../tamagui.config'
+
+function TamaguiThemeSync({ children }: { children: React.ReactNode }) {
+  const { colorMode } = useColorMode()
+  return <Theme name={colorMode}>{children}</Theme>
+}
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  const [fontsReady, setFontsReady] = useState(false)
+
+  useEffect(() => {
+    void waitForWebFonts().then(() => setFontsReady(true))
+  }, [])
+
+  if (!fontsReady) {
+    return null
+  }
+
+  return (
+    <GestureHandlerRootView style={styles.root}>
+      <TamaguiProvider config={tamaguiConfig as never} defaultTheme="light">
+        <ThemeProvider defaultColorMode="system">
+          <TamaguiThemeSync>
+            <SafeAreaProvider>
+              <NavigationContainer linking={linking}>{children}</NavigationContainer>
+            </SafeAreaProvider>
+          </TamaguiThemeSync>
+        </ThemeProvider>
+      </TamaguiProvider>
+    </GestureHandlerRootView>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+})

package/template/src/screens/Home/HomeScreen.tsx

@@ -0,0 +1,12 @@
+import { H3, Text } from '@idia-ui/core'
+import React from 'react'
+import { YStack } from 'tamagui'
+
+export function HomeScreen() {
+  return (
+    <YStack flex={1} padding="$6" justifyContent="center" alignItems="center" gap="$3">
+      <H3>Your app starts here.</H3>
+      <Text size="md">Replace this screen with your product experience.</Text>
+    </YStack>
+  )
+}

package/template/src/screens/Welcome/WelcomeScreen.tsx

@@ -0,0 +1,115 @@
+import { Badge, Button, H2, H5, Link, Text } from '@idia-ui/core'
+import { useColorMode, useIdiaTheme } from '@idia-ui/theme'
+import type { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React from 'react'
+import { Platform, ScrollView } from 'react-native'
+import { YStack } from 'tamagui'
+
+import { GITHUB_URL, IDIA_CORE_VERSION, IDIA_INDEX_SKILL_URL } from '@/config/versions'
+import type { RootStackParamList } from '@/navigation/types'
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Welcome'>
+
+const COMMANDS = [
+  {
+    label: 'Start development server',
+    command: 'pnpm dev',
+    note: 'Web-first in Phase 0; see README for native targets.',
+  },
+  {
+    label: 'Check setup health (future)',
+    command: 'idia-ui doctor',
+    note: 'Verifies providers, peers, and optional Storybook/brain packs.',
+  },
+  {
+    label: 'Add component browser (optional, future)',
+    command: 'idia-ui add storybook',
+    note: 'Optional — human docs and playground for @idia-ui/core.',
+  },
+  {
+    label: 'Add AI retrieval pack (optional, future)',
+    command: 'idia-ui add brain',
+    note: 'Optional — Cursor skills, rules, and ai-index for agents.',
+  },
+  {
+    label: 'Run Storybook (after install, future)',
+    command: 'pnpm storybook',
+    note: 'Available only after `idia-ui add storybook`.',
+  },
+] as const
+
+function CommandBlock({ command }: { command: string }) {
+  const { colors } = useIdiaTheme()
+
+  return (
+    <YStack
+      padding="$3"
+      borderRadius="$3"
+      borderWidth={1}
+      borderColor={colors.borderNeutralSubtle300}
+      backgroundColor={colors.backgroundNeutralSubtle200}
+    >
+      <Text size="sm" style={{ fontFamily: 'monospace' }}>
+        {command}
+      </Text>
+    </YStack>
+  )
+}
+
+export function WelcomeScreen({ navigation }: Props) {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const { colors } = useIdiaTheme()
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        padding: 24,
+        gap: 24,
+        maxWidth: 720,
+        alignSelf: 'center',
+        width: '100%',
+      }}
+    >
+      <YStack gap="$3" alignItems="flex-start">
+        <Badge variant="gray" appearance="subtle" label={`@idia-ui/core v${IDIA_CORE_VERSION}`} />
+        <H2>Built with idia-ui</H2>
+        <Text size="md" style={{ color: colors.textNeutralSubtle400 }}>
+          A clean Expo shell using idia-ui runtime packages. Storybook and ds-brain are optional
+          add-ons you can install later — they are not required to run this app.
+        </Text>
+      </YStack>
+
+      <YStack gap="$3">
+        <Button variant="primary" label="Get started" onPress={() => navigation.navigate('Home')} />
+        <Button variant="secondary" label={`Toggle theme (${colorMode})`} onPress={toggleColorMode} />
+      </YStack>
+
+      <YStack gap="$4">
+        <H5>Command reference</H5>
+        {COMMANDS.map((item) => (
+          <YStack key={item.command} gap="$2">
+            <Text size="md" weight="semibold">
+              {item.label}
+            </Text>
+            <CommandBlock command={item.command} />
+            <Text size="sm" style={{ color: colors.textNeutralSubtle400 }}>
+              {item.note}
+            </Text>
+          </YStack>
+        ))}
+      </YStack>
+
+      <YStack gap="$2">
+        <H5>Links</H5>
+        <Link href={GITHUB_URL} label="idia-ui on GitHub" isExternal newTab />
+        {Platform.OS === 'web' ? (
+          <Link href={IDIA_INDEX_SKILL_URL} label="idia-index skill (raw)" isExternal newTab />
+        ) : null}
+      </YStack>
+
+      <Text size="sm" style={{ color: colors.textNeutralSubtle400 }}>
+        Customize `src/screens/Home/` to build your app.
+      </Text>
+    </ScrollView>
+  )
+}

package/template/src/stories/Button.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@idia-ui/core';
+import { BrainDocSections } from '@idia-ui/storybook-docs';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <BrainDocSections
+            componentId="button"
+            sectionIds={['intent', 'usage', 'variants', 'accessibility']}
+          />
+        </>
+      ),
+    },
+  },
+  args: {
+    label: 'Button',
+    variant: 'primary',
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};