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

@lotics/cli 0.22.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 +96 -9
package/package.json +1 -1

package/dist/src/starter_template.js CHANGED Viewed

@@ -161,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>
@@ -180,34 +194,55 @@ 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>
   );
 }
@@ -230,6 +265,58 @@ declare module "lucide-react-native/dist/esm/icons/*" {
   }>;
   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.22.0",
+  "version": "0.23.0",
   "description": "Lotics SDK and CLI for AI agents",
   "type": "module",
   "bin": {