feat: Phase 9 & 10 - automation hook, package management, analytics explain, report/page/widget renderers, theme bridge

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

app/(app)/packages.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import { Stack } from "expo-router";
+import { Package, ToggleLeft, ToggleRight, Trash2 } from "lucide-react-native";
+import { usePackageManagement } from "~/hooks/usePackageManagement";
+import { Card, CardHeader, CardTitle, CardContent } from "~/components/ui/Card";
+
+/**
+ * Package management screen – list, enable, disable, uninstall packages.
+ *
+ * Route: app/(app)/packages.tsx
+ */
+export default function PackagesScreen() {
+  const { packages, isLoading, error, refetch, enable, disable, uninstall } =
+    usePackageManagement();
+
+  const handleToggle = async (id: string, enabled: boolean) => {
+    try {
+      if (enabled) {
+        await disable(id);
+      } else {
+        await enable(id);
+      }
+    } catch {
+      // Error is already set in the hook
+    }
+  };
+
+  const handleUninstall = (id: string, name: string) => {
+    Alert.alert(
+      "Uninstall Package",
+      `Are you sure you want to uninstall "${name}"?`,
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Uninstall",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await uninstall(id);
+            } catch {
+              // Error is already set in the hook
+            }
+          },
+        },
+      ],
+    );
+  };
+
+  return (
+    <>
+      <Stack.Screen options={{ title: "Packages" }} />
+      <ScrollView className="flex-1 bg-background">
+        {isLoading && !packages.length ? (
+          <View className="flex-1 items-center justify-center py-20">
+            <ActivityIndicator size="large" color="#1e40af" />
+          </View>
+        ) : error ? (
+          <View className="flex-1 items-center justify-center px-6 py-20">
+            <Text className="text-destructive text-center mb-4">
+              {error.message}
+            </Text>
+            <TouchableOpacity
+              onPress={refetch}
+              className="bg-primary px-4 py-2 rounded-lg"
+            >
+              <Text className="text-primary-foreground font-medium">
+                Retry
+              </Text>
+            </TouchableOpacity>
+          </View>
+        ) : !packages.length ? (
+          <View className="flex-1 items-center justify-center px-6 py-20">
+            <Package size={48} color="#9ca3af" />
+            <Text className="text-muted-foreground mt-4">
+              No packages installed
+            </Text>
+          </View>
+        ) : (
+          <View className="p-4 gap-3">
+            {packages.map((pkg) => (
+              <Card key={pkg.id}>
+                <CardHeader>
+                  <View className="flex-row items-center justify-between">
+                    <View className="flex-row items-center gap-2 flex-1">
+                      <Package size={18} color="#1e40af" />
+                      <CardTitle>{pkg.label}</CardTitle>
+                    </View>
+                    <View className="flex-row items-center gap-3">
+                      <TouchableOpacity
+                        onPress={() => handleToggle(pkg.id, pkg.enabled)}
+                      >
+                        {pkg.enabled ? (
+                          <ToggleRight size={24} color="#16a34a" />
+                        ) : (
+                          <ToggleLeft size={24} color="#9ca3af" />
+                        )}
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        onPress={() => handleUninstall(pkg.id, pkg.label)}
+                      >
+                        <Trash2 size={18} color="#dc2626" />
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                </CardHeader>
+                <CardContent>
+                  {pkg.description && (
+                    <Text className="text-sm text-muted-foreground mb-1">
+                      {pkg.description}
+                    </Text>
+                  )}
+                  <View className="flex-row items-center gap-2">
+                    {pkg.version && (
+                      <Text className="text-xs text-muted-foreground">
+                        v{pkg.version}
+                      </Text>
+                    )}
+                    <View
+                      className={`px-2 py-0.5 rounded-full ${
+                        pkg.enabled ? "bg-green-100" : "bg-gray-100"
+                      }`}
+                    >
+                      <Text
+                        className={`text-xs ${
+                          pkg.enabled
+                            ? "text-green-700"
+                            : "text-gray-500"
+                        }`}
+                      >
+                        {pkg.enabled ? "Enabled" : "Disabled"}
+                      </Text>
+                    </View>
+                  </View>
+                </CardContent>
+              </Card>
+            ))}
+          </View>
+        )}
+      </ScrollView>
+    </>
+  );
+}

app/(app)/page/[id].tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import { View, Text } from "react-native";
+import { useLocalSearchParams, Stack } from "expo-router";
+import { useClient } from "@objectstack/client-react";
+import { PageRenderer } from "~/components/renderers/PageRenderer";
+import {
+  validatePageSchema,
+  type PageSchema,
+} from "~/lib/page-renderer";
+
+/**
+ * Dynamic SDUI page route.
+ * Fetches a PageSchema by ID from the server and renders it
+ * using the PageRenderer component.
+ *
+ * Route: app/(app)/page/[id].tsx
+ */
+export default function SDUIPageScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const client = useClient();
+  const [schema, setSchema] = useState<PageSchema | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    let cancelled = false;
+
+    async function fetchPage() {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await client.meta.getItem("page", id!);
+        if (cancelled) return;
+        const validated = validatePageSchema(result);
+        if (!validated) {
+          setError(new Error(`Invalid page schema for "${id}"`));
+        } else {
+          setSchema(validated);
+        }
+      } catch (err) {
+        if (cancelled) return;
+        setError(
+          err instanceof Error ? err : new Error("Failed to load page"),
+        );
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    }
+
+    fetchPage();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, id]);
+
+  return (
+    <>
+      <Stack.Screen options={{ title: schema?.label ?? id ?? "Page" }} />
+      {error && !isLoading ? (
+        <View className="flex-1 items-center justify-center px-6">
+          <Text className="text-destructive text-center">{error.message}</Text>
+        </View>
+      ) : schema ? (
+        <PageRenderer schema={schema} isLoading={isLoading} />
+      ) : (
+        <PageRenderer
+          schema={{ name: id ?? "", regions: [] }}
+          isLoading={isLoading}
+          error={error}
+        />
+      )}
+    </>
+  );
+}