npm - @lotics/cli - Versions diffs - 0.21.0 → 0.23.0 - Mend

@lotics/cli 0.21.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/src/starter_template.js +139 -14
package/package.json +1 -1

package/dist/src/starter_template.js CHANGED Viewed

@@ -94,11 +94,13 @@ export function buildStarterTemplate(args) {
                     noEmit: true,
                     jsx: "react-jsx",
                     strict: true,
-                    noUnusedLocals: true,
-                    noUnusedParameters: true,
                     noFallthroughCasesInSwitch: true,
                 },
+                // Restrict tsc to the project's own sources. tsgo follows
+                // transitive imports into node_modules — strict rules
+                // (noUnusedLocals etc.) would fire on @lotics/ui's source.
                 include: ["src", ".lotics"],
+                exclude: ["node_modules"],
             }, null, 2) + "\n",
         },
         {
@@ -116,18 +118,35 @@ import react from "@vitejs/plugin-react";
 // (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.
+//
+// @lotics/ui/icon.tsx imports from \`lucide-react-native/dist/esm/icons/<name>\`
+// — deep paths that lucide-react-native's package \`exports\` map blocks under
+// Vite's strict resolution. lucide-react has the same per-icon files with no
+// exports map, so we alias the deep path to use it. Web rendering of <svg>
+// is identical to RN-SVG when running under RN-Web.
 export default defineConfig({
   plugins: [react()],
   resolve: {
-    alias: {
-      "react-native": "react-native-web",
-    },
+    alias: [
+      {
+        find: /^lucide-react-native\\/dist\\/esm\\/icons\\/(.+)$/,
+        replacement: "lucide-react/dist/esm/icons/$1",
+      },
+      { find: "react-native", replacement: "react-native-web" },
+    ],
     extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".jsx", ".js"],
   },
   build: {
     outDir: "dist",
     sourcemap: true,
   },
+  server: {
+    // Allow the sandboxed null-origin iframe used by \`lotics app dev\` to
+    // fetch HMR client + source modules from the dev server. Production
+    // iframe loads modules from api.lotics.ai which already permits null
+    // origin via CORS.
+    cors: { origin: "*" },
+  },
   test: {
     environment: "jsdom",
   },
@@ -142,6 +161,20 @@ export default defineConfig({
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${escapeHtml(args.app_name)}</title>
+    <style>
+      /*
+       * Full-viewport container chain for iframe apps. @lotics/ui's DataGrid
+       * (and any layout that uses \`flex: 1\` to fill available space) relies
+       * on a measured parent height. The browser default of html/body being
+       * content-sized collapses every \`flex: 1\` to 0 and the surface shrinks
+       * to fit only its rendered content.
+       *
+       * Also: #root is made a flex column so the outermost RN \`<View flex:1>\`
+       * inside App.tsx claims the full iframe height.
+       */
+      html, body, #root { height: 100%; margin: 0; }
+      #root { display: flex; flex-direction: column; }
+    </style>
   </head>
   <body>
     <div id="root"></div>
@@ -161,37 +194,129 @@ mount(<App />);
         },
         {
             path: "src/App.tsx",
-            // 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.
+            // Welcome screen demonstrates the full-container layout pattern that
+            // real apps (data grids, dashboards, full-page surfaces) rely on:
+            //   - Outer <View flex:1> claims the full iframe height (works because
+            //     index.html sets html/body/#root to 100% + #root is a flex column).
+            //   - Inner View is content-sized + centered for a card layout.
+            //
+            // We deliberately do NOT use @lotics/ui/stack for the outer chain.
+            // Stack wraps each child in an unstyled <View>, which breaks `flex: 1`
+            // propagation to children that need to claim flexible height (e.g., a
+            // DataGrid that fills the remaining space below a header + search).
+            // Use plain <View> with `flexDirection` + `gap` for any outer layout
+            // that hosts a flex-filling child; Stack is fine for content-sized
+            // groupings inside such a chain.
             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";
+// Outer <View flex:1> claims the full iframe height — works because
+// index.html sets html/body/#root to 100% and #root is a flex column.
+// For real layouts with a fill-remaining-space child (DataGrid etc.),
+// keep this flex chain plain — @lotics/ui/stack wraps each child in an
+// unstyled <View> that breaks \`flex: 1\` propagation.
 export default function App() {
   return (
-    <View style={{ padding: 24, maxWidth: 640, marginHorizontal: "auto" }}>
-      <Stack gap={16}>
+    <View
+      style={{
+        flex: 1,
+        padding: 24,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <View style={{ maxWidth: 640, width: "100%", gap: 16 }}>
         <Text size="xl" weight="semibold">${escapeHtml(args.app_name)}</Text>
         <Card>
-          <Stack gap={8} style={{ padding: 16 }}>
+          <View style={{ padding: 16, gap: 8 }}>
             <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>
+          </View>
         </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>
     </View>
   );
 }
+`,
+        },
+        {
+            path: "src/lucide-react-native.d.ts",
+            content: `// Type shim for lucide-react-native's deep-icon imports
+// (\`lucide-react-native/dist/esm/icons/<name>\`). The package ships JS-only
+// files without per-file .d.ts. The Vite alias in vite.config.ts rewrites
+// these to lucide-react at bundle time; this declaration covers the
+// TypeScript compile-time gap.
+declare module "lucide-react-native/dist/esm/icons/*" {
+  import type { ComponentType } from "react";
+  const Icon: ComponentType<{
+    size: number;
+    color: string;
+    fill?: string;
+    strokeWidth?: number;
+  }>;
+  export default Icon;
+}
+`,
+        },
+        {
+            path: "src/css_modules.d.ts",
+            content: `declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+`,
+        },
+        {
+            path: "src/react_native.d.ts",
+            content: `import "react-native";
+// Augments react-native's types with the web-only fields @lotics/ui consumes:
+// Pressable's \`hovered\` callback state, plus web-only ViewStyle / TextStyle
+// properties (cursor, outline, boxShadow, etc.) used by the grid + primitives.
+// Each iframe app needs its own copy — TypeScript doesn't auto-pick-up
+// \`.d.ts\` files inside dependencies. \`@lotics/ui\`'s grid sources include a
+// triple-slash reference to its own copy of this file so the augmentation
+// kicks in transitively.
+declare module "react-native" {
+  interface PressableStateCallbackType {
+    hovered: boolean;
+  }
+  interface ViewStyle {
+    backdropFilter?: string;
+    backgroundImage?: string;
+    boxShadow?: string;
+    boxSizing?: string;
+    cursor?: string;
+    touchAction?: string;
+    transitionDuration?: string;
+    transitionProperty?: string;
+    appearance?: string;
+    outline?: string;
+    outlineColor?: string;
+    outlineStyle?: string;
+    outlineWidth?: number;
+    outlineOffset?: number;
+  }
+  interface TextStyle {
+    outline?: string;
+    outlineColor?: string;
+    outlineStyle?: string;
+    outlineWidth?: number;
+    outlineOffset?: number;
+    appearance?: string;
+  }
+}
 `,
         },
         {

package/package.json CHANGED Viewed

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