@lotics/cli 0.19.0 → 0.20.0

package/dist/src/starter_template.d.ts

@@ -10,11 +10,15 @@
  *
  * Conventions (locked decisions):
  *   - Vite + React + TypeScript (strict mode).
- *   - Entry: src/App.tsx with `export default`. main.tsx wires `mount(<App/>)`.
+ *   - Entry: src/App.tsx with `export default`. main.tsx wires `mount(<App/>)`
+ *     and imports @lotics/ui/index.css for the base style reset.
  *   - Vite default `base: "/"` so emitted asset URLs are absolute; the render
  *     endpoint rewrites root-relative paths to `/v1/apps/{id}/asset/...`.
  *     Don't switch to `base: "./"` without updating `rewriteAssetPaths`.
- *   - `@lotics/app-sdk` peer-supplied; user installs it via npm.
+ *   - react-native aliased to react-native-web so @lotics/ui's RN primitives
+ *     render in a pure-web environment. `.web.tsx` is prioritized in the
+ *     resolve.extensions list.
+ *   - @lotics/app-sdk + @lotics/ui peer-supplied; user installs both via npm.
  *   - oxlint + vitest + tsc out of the box, plus a GitHub Actions CI
  *     workflow that runs all three on every PR.
  */

package/dist/src/starter_template.js

@@ -10,11 +10,15 @@
  *
  * Conventions (locked decisions):
  *   - Vite + React + TypeScript (strict mode).
- *   - Entry: src/App.tsx with `export default`. main.tsx wires `mount(<App/>)`.
+ *   - Entry: src/App.tsx with `export default`. main.tsx wires `mount(<App/>)`
+ *     and imports @lotics/ui/index.css for the base style reset.
  *   - Vite default `base: "/"` so emitted asset URLs are absolute; the render
  *     endpoint rewrites root-relative paths to `/v1/apps/{id}/asset/...`.
  *     Don't switch to `base: "./"` without updating `rewriteAssetPaths`.
- *   - `@lotics/app-sdk` peer-supplied; user installs it via npm.
+ *   - react-native aliased to react-native-web so @lotics/ui's RN primitives
+ *     render in a pure-web environment. `.web.tsx` is prioritized in the
+ *     resolve.extensions list.
+ *   - @lotics/app-sdk + @lotics/ui peer-supplied; user installs both via npm.
  *   - oxlint + vitest + tsc out of the box, plus a GitHub Actions CI
  *     workflow that runs all three on every PR.
  */
@@ -43,9 +47,17 @@ export function buildStarterTemplate(args) {
                     test: "vitest run",
                 },
                 dependencies: {
-                    "@lotics/app-sdk": "^0.1.0",
+                    "@lotics/app-sdk": "^0.2.0",
+                    "@lotics/ui": "^0.2.0",
+                    "@react-native-picker/picker": "^2.7.0",
+                    "expo-image": "~3.0.9",
+                    "lucide-react": "^0.562.0",
+                    "lucide-react-native": "^0.562.0",
                     react: "^19.0.0",
                     "react-dom": "^19.0.0",
+                    "react-native": "0.81.0",
+                    "react-native-svg": "^15.0.0",
+                    "react-native-web": "^0.21.0",
                 },
                 devDependencies: {
                     "@testing-library/react": "^16.1.0",
@@ -99,8 +111,19 @@ import react from "@vitejs/plugin-react";
 // render endpoint rewrites those to /v1/apps/{id}/asset/... so the bundle
 // loads via the platform's asset proxy. Don't change \`base\` unless you
 // also adjust the rewrite logic in backend/api/apps.ts:rewriteAssetPaths.
+//
+// react-native → react-native-web alias lets @lotics/ui's RN primitives
+// (View, Text, Pressable, StyleSheet, etc.) render in a pure-web environment.
+// .web.tsx is prioritized in resolve.extensions so per-target variants
+// (avatar.web.tsx, wave_avatar.web.tsx) win over the native .tsx file.
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "react-native": "react-native-web",
+    },
+    extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".jsx", ".js"],
+  },
   build: {
     outDir: "dist",
     sourcemap: true,
@@ -129,7 +152,8 @@ export default defineConfig({
         },
         {
             path: "src/main.tsx",
-            content: `import { mount } from "@lotics/app-sdk";
+            content: `import "@lotics/ui/index.css";
+import { mount } from "@lotics/app-sdk";
 import App from "./App";
 
 mount(<App />);
@@ -137,22 +161,35 @@ mount(<App />);
         },
         {
             path: "src/App.tsx",
-            // Static welcome screen — no useTable call so the freshly-deployed v1
-            // renders cleanly without needing a real table id. The user's first
-            // edit is to replace this with their actual app.
-            content: `export default function App() {
+            // Static welcome screen using @lotics/ui primitives — no useTable call
+            // so the freshly-deployed v1 renders cleanly without needing a real
+            // table id. The user's first edit is to replace this with their app.
+            content: `import { View } from "react-native";
+import { Stack } from "@lotics/ui/stack";
+import { Card } from "@lotics/ui/card";
+import { Text } from "@lotics/ui/text";
+import { Button } from "@lotics/ui/button";
+
+export default function App() {
   return (
-    <main style={{ fontFamily: "system-ui, sans-serif", padding: 24, maxWidth: 640, margin: "0 auto" }}>
-      <h1 style={{ marginBottom: 8 }}>${escapeHtml(args.app_name)}</h1>
-      <p style={{ color: "#52525b", marginBottom: 16 }}>
-        This is your new Lotics app. Edit <code>src/App.tsx</code> and run{" "}
-        <code>lotics app deploy</code> to publish.
-      </p>
-      <p style={{ color: "#52525b" }}>
-        Available hooks from <code>@lotics/app-sdk</code>:{" "}
-        <code>useTable</code>, <code>useMutate</code>, <code>useAction</code>, <code>useQuery</code>.
-      </p>
-    </main>
+    <View style={{ padding: 24, maxWidth: 640, marginHorizontal: "auto" }}>
+      <Stack gap={16}>
+        <Text size="xl" weight="semibold">${escapeHtml(args.app_name)}</Text>
+        <Card>
+          <Stack gap={8} style={{ padding: 16 }}>
+            <Text>This is your new Lotics app.</Text>
+            <Text color="muted">
+              Edit <Text weight="medium">src/App.tsx</Text> and run{" "}
+              <Text weight="medium">lotics app deploy</Text> to publish.
+            </Text>
+          </Stack>
+        </Card>
+        <Text color="muted" size="sm">
+          Hooks from @lotics/app-sdk: useTable, useMutate, useAction, useQuery, useWorkflow.
+        </Text>
+        <Button title="Get started" onPress={() => {}} color="primary" />
+      </Stack>
+    </View>
   );
 }
 `,
@@ -164,9 +201,9 @@ import { render } from "@testing-library/react";
 import App from "./App";
 
 describe("App", () => {
-  test("renders a heading", () => {
-    const { getByRole } = render(<App />);
-    expect(getByRole("heading", { level: 1 })).not.toBeNull();
+  test("renders without crashing", () => {
+    const { container } = render(<App />);
+    expect(container).not.toBeNull();
   });
 });
 `,
@@ -235,13 +272,22 @@ lotics app deploy              # build + upload as a new version
 lotics app deploy -m "what"    # with a commit-message-style note
 \`\`\`
 
-## SDK
+## SDK + UI components
 
 \`\`\`tsx
-import { mount, useTable, useMutate, useAction, useQuery } from "@lotics/app-sdk";
+import { mount, useTable, useMutate, useAction, useQuery, useWorkflow } from "@lotics/app-sdk";
+import { Stack } from "@lotics/ui/stack";
+import { Card } from "@lotics/ui/card";
+import { Button } from "@lotics/ui/button";
+import { Text } from "@lotics/ui/text";
+// ... and Grid, Dialog, DatePicker, FormPicker, BarChart, LineChart, PieChart, Metric, ProgressBar, etc.
 \`\`\`
 
-See https://lotics.ai/docs/app-sdk for the full reference.
+@lotics/ui ships React Native primitives that render via react-native-web
+in this Vite app (the alias is preconfigured in \`vite.config.ts\`). See
+the full export list at https://www.npmjs.com/package/@lotics/ui.
+
+See https://lotics.ai/docs/app-sdk for the SDK reference.
 `,
         },
     ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/cli",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Lotics SDK and CLI for AI agents",
   "type": "module",
   "bin": {