@notis_ai/cli 0.2.0-beta.16.1 → 0.2.0

package/src/runtime/app-preview-server.js

@@ -1,16 +1,16 @@
 /**
- * Local preview server for built Notis app bundles.
+ * Local preview server for built Notis app artifacts.
  *
- * Serves a single index.html that loads the app bundle via <script type="module">.
- * Injects mock window.__NOTIS_RUNTIME__ before the bundle loads. Route switching
- * uses pathname navigation between route pages.
+ * Serves the static site from .notis/output/site/ with the Notis runtime
+ * injected into HTML pages. The runtime provides mock implementations for
+ * databases (seed data from manifest) and tool stubs.
  *
  * Usage: `notis apps preview [dir]` starts this server on localhost:8787.
  */
 
 import { createServer } from 'node:http';
 import { existsSync, readFileSync } from 'node:fs';
-import { extname, resolve, sep } from 'node:path';
+import { extname, join, resolve } from 'node:path';
 
 import { readManifest } from './app-platform.js';
 
@@ -35,71 +35,66 @@ function contentTypeFor(path) {
   return types[extname(path)] || 'application/octet-stream';
 }
 
+function replacePlaceholders(content) {
+  return content
+    .replaceAll('/__NOTIS_APP_BASE__', '')
+    .replaceAll('__NOTIS_APP_BASE__', '')
+    .replaceAll('/__NOTIS_ASSET_BASE__', '')
+    .replaceAll('__NOTIS_ASSET_BASE__', '');
+}
+
 // ---------------------------------------------------------------------------
 // Mock runtime generation
 // ---------------------------------------------------------------------------
 
+function buildSeedValue(property, index) {
+  switch (property?.type) {
+    case 'number':
+      return (index + 1) * 180;
+    case 'checkbox':
+      return index % 2 === 0;
+    case 'date':
+      return `2026-04-0${Math.min(index + 2, 9)}`;
+    case 'select':
+    case 'status':
+      return property.options?.[index % (property.options?.length || 1)]?.name || 'Active';
+    case 'multi_select':
+      return (property.options || []).slice(0, 2).map((o) => o.name);
+    default:
+      return `${property?.name || 'Value'} ${index + 1}`;
+  }
+}
+
 function buildSeedDocuments(databases) {
   const state = {};
-  for (const slug of databases) {
-    state[slug] = Array.from({ length: 3 }, (_, i) => {
+  for (const db of databases) {
+    const titleProp = db.properties?.find((p) => p.type === 'title')?.name || 'title';
+    state[db.slug] = Array.from({ length: 3 }, (_, i) => {
+      const properties = {};
+      for (const prop of db.properties || []) {
+        properties[prop.name] = prop.name === titleProp
+          ? `${db.title} ${i + 1}`
+          : buildSeedValue(prop, i);
+      }
       return {
-        id: `${slug}-seed-${i + 1}`,
-        databaseSlug: slug,
-        title: `${slug} ${i + 1}`,
-        properties: {},
-        icon: null,
+        id: `${db.slug}-seed-${i + 1}`,
+        databaseSlug: db.slug,
+        title: properties[titleProp] || `${db.title} ${i + 1}`,
+        properties,
+        icon: db.icon || null,
       };
     });
   }
   return state;
 }
 
-function escapeHtml(value) {
-  return String(value)
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
-}
-
-function sanitizeBundlePath(value, fallback) {
-  if (typeof value !== 'string') return fallback;
-  const normalized = value.trim().replaceAll('\\', '/').replace(/^\/+/, '');
-  if (!normalized || normalized.includes('..')) return fallback;
-  return /^[A-Za-z0-9._/-]+$/.test(normalized) ? normalized : fallback;
-}
-
-function serializeForInlineScript(value) {
-  return JSON.stringify(value).replaceAll('</', '<\\/').replaceAll('<!--', '<\\!--');
-}
-
-function buildPreviewHtml({ manifest, route, databases }) {
-  const app = manifest.app;
+function runtimeScript({ app, route, tools, databases }) {
   const seedState = buildSeedDocuments(databases);
-  const bundleJs = sanitizeBundlePath(manifest.bundle?.js, 'bundle/app.js');
-  const bundleCss = sanitizeBundlePath(manifest.bundle?.css, 'bundle/app.css');
-  const exportName = typeof route.export_name === 'string' && route.export_name ? route.export_name : 'index';
-  const pageTitle = escapeHtml(`${app.name} - ${route.name}`);
-  const bundleCssHref = escapeHtml(`/${bundleCss}`);
-  const bundleJsPathLiteral = JSON.stringify(`/${bundleJs}`);
-  const exportNameLiteral = JSON.stringify(exportName);
-
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${pageTitle}</title>
-  <link rel="stylesheet" href="${bundleCssHref}" />
-  <script>
+  return `<script>
 (function() {
-  var DB = ${serializeForInlineScript(databases.map(function(slug) {
-    return { slug: slug, title: slug, properties: [] };
-  }))};
-  var STATE = ${serializeForInlineScript(seedState)};
-  var COLLECTION = ${serializeForInlineScript(route.collection || null)};
+  var DB = ${JSON.stringify(databases)};
+  var STATE = ${JSON.stringify(seedState)};
+  var COLLECTION = ${JSON.stringify(route.collection || null)};
 
   function titleProp(slug) {
     var db = DB.find(function(d) { return d.slug === slug; });
@@ -109,19 +104,12 @@ function buildPreviewHtml({ manifest, route, databases }) {
   function dbSlug(v) { return v || (COLLECTION && COLLECTION.database) || null; }
 
   window.__NOTIS_RUNTIME__ = {
-    app: ${serializeForInlineScript(app)},
-    route: ${serializeForInlineScript(route)},
+    app: ${JSON.stringify(app)},
+    route: ${JSON.stringify(route)},
     databases: DB,
 
-    navigate: function(payload) {
-      console.log('[notis-preview] Navigate:', payload);
-      if (payload.kind === 'route' && payload.path) {
-        window.location.assign(payload.path);
-      }
-    },
-
     listTools: function() {
-      return Promise.resolve(${serializeForInlineScript((manifest.tools || []).map((name) => ({ name })))});
+      return Promise.resolve(${JSON.stringify(tools)});
     },
 
     callTool: function(name, args) {
@@ -186,48 +174,14 @@ function buildPreviewHtml({ manifest, route, databases }) {
     }
   };
 })();
-  </script>
-</head>
-<body class="min-h-screen bg-background text-foreground antialiased">
-  <div id="notis-app-root"></div>
-  <script type="importmap">
-    {
-      "imports": {
-        "react": "https://esm.sh/react@19",
-        "react-dom": "https://esm.sh/react-dom@19?external=react",
-        "react-dom/client": "https://esm.sh/react-dom@19/client?external=react",
-        "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime"
-      }
-    }
-  </script>
-  <script type="module">
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
-    import * as AppBundle from ${bundleJsPathLiteral};
-
-    // Try to render: AppShell wrapping the route component, or just the route component
-    const exportName = ${exportNameLiteral};
-    const RouteComponent = AppBundle[exportName] || AppBundle['default'];
-    const AppShell = AppBundle['__AppShell'];
-
-    if (RouteComponent) {
-      const root = document.getElementById('notis-app-root');
-      if (root) {
-        const reactRoot = createRoot(root);
-        if (AppShell) {
-          reactRoot.render(React.createElement(AppShell, null, React.createElement(RouteComponent)));
-        } else {
-          reactRoot.render(React.createElement(RouteComponent));
-        }
-      }
-    } else {
-      document.getElementById('notis-app-root').innerHTML =
-        '<p style="padding:2rem;color:red;">No component found for export "' + exportName + '". Available exports: ' +
-        Object.keys(AppBundle).join(', ') + '</p>';
-    }
-  </script>
-</body>
-</html>`;
+</script>`;
+}
+
+function injectRuntime(html, injection) {
+  if (html.includes('</head>')) {
+    return html.replace('</head>', injection + '\n</head>');
+  }
+  return injection + '\n' + html;
 }
 
 // ---------------------------------------------------------------------------
@@ -239,20 +193,15 @@ function normalizePathname(pathname) {
   return pathname.endsWith('/') ? pathname.slice(0, -1) || '/' : pathname;
 }
 
-function resolveSafePath(baseDir, pathname) {
-  const normalizedBaseDir = resolve(baseDir);
-  const resolvedPath = resolve(normalizedBaseDir, pathname.replace(/^\/+/, ''));
-  if (resolvedPath === normalizedBaseDir || resolvedPath.startsWith(`${normalizedBaseDir}${sep}`)) {
-    return resolvedPath;
-  }
-  return null;
+function entryHtmlPath(routePath) {
+  if (routePath === '/') return 'index.html';
+  return `${routePath.replace(/^\/+/, '')}/index.html`;
 }
 
 export async function startPreviewServer({ projectDir, port }) {
   const manifest = readManifest(projectDir);
-  const outputDir = resolve(projectDir, '.notis/output');
-  const bundleDir = resolve(projectDir, '.notis/output/bundle');
-  const databases = (manifest.databases || []).filter((slug) => typeof slug === 'string' && slug);
+  const siteDir = resolve(projectDir, '.notis/output/site');
+  const databases = (manifest.databases || []).filter((d) => d && typeof d.slug === 'string');
   const routesByPath = new Map((manifest.routes || []).map((r) => [normalizePathname(r.path), r]));
   const defaultRoute = (manifest.routes || []).find((r) => r.default) || manifest.routes?.[0];
 
@@ -264,16 +213,6 @@ export async function startPreviewServer({ projectDir, port }) {
     const url = new URL(request.url || '/', `http://${request.headers.host || 'localhost'}`);
     const pathname = normalizePathname(url.pathname);
 
-    // Serve bundle files directly
-    if (pathname.startsWith('/bundle/')) {
-      const filePath = resolveSafePath(outputDir, pathname);
-      if (filePath && existsSync(filePath)) {
-        response.writeHead(200, { 'Content-Type': contentTypeFor(filePath), 'Cache-Control': 'no-store' });
-        response.end(readFileSync(filePath));
-        return;
-      }
-    }
-
     // Redirect / to default route if it's not /
     if (pathname === '/' && defaultRoute.path !== '/') {
       response.writeHead(302, { Location: defaultRoute.path });
@@ -282,24 +221,45 @@ export async function startPreviewServer({ projectDir, port }) {
     }
 
     // Serve route HTML with runtime injection
-    const route = routesByPath.get(pathname) || (pathname === '/' ? defaultRoute : null);
+    const route = routesByPath.get(pathname);
     if (route) {
-      const html = buildPreviewHtml({ manifest, route, databases });
+      const htmlPath = join(siteDir, entryHtmlPath(route.path));
+      if (!existsSync(htmlPath)) {
+        response.writeHead(404, { 'Content-Type': 'text/plain' });
+        response.end(`Route HTML not found: ${htmlPath}`);
+        return;
+      }
+
+      const raw = readFileSync(htmlPath, 'utf-8');
+      const html = injectRuntime(
+        replacePlaceholders(raw),
+        runtimeScript({
+          app: manifest.app,
+          route,
+          tools: (manifest.tools || []).map((name) => ({ name })),
+          databases,
+        }),
+      );
       response.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' });
       response.end(html);
       return;
     }
 
-    // Serve static files from bundle dir
-    const filePath = resolveSafePath(bundleDir, pathname);
-    if (filePath && existsSync(filePath)) {
-      response.writeHead(200, { 'Content-Type': contentTypeFor(filePath), 'Cache-Control': 'no-store' });
-      response.end(readFileSync(filePath));
+    // Serve static files
+    const filePath = join(siteDir, pathname.replace(/^\/+/, ''));
+    if (!existsSync(filePath)) {
+      response.writeHead(404, { 'Content-Type': 'text/plain' });
+      response.end('Not found');
       return;
     }
 
-    response.writeHead(404, { 'Content-Type': 'text/plain' });
-    response.end('Not found');
+    const isHtml = extname(filePath) === '.html';
+    const body = isHtml
+      ? replacePlaceholders(readFileSync(filePath, 'utf-8'))
+      : readFileSync(filePath);
+
+    response.writeHead(200, { 'Content-Type': contentTypeFor(filePath), 'Cache-Control': 'no-store' });
+    response.end(body);
   });
 
   await new Promise((resolveP, rejectP) => {

package/template/app/globals.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/template/app/layout.tsx

@@ -1,7 +0,0 @@
-import { NotisProvider } from '@notis/sdk';
-import '@notis/sdk/styles.css';
-import './globals.css';
-
-export default function AppShell({ children }: { children: React.ReactNode }) {
-  return <NotisProvider>{children}</NotisProvider>;
-}

package/template/app/page.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { useNotis, useDatabase } from '@notis/sdk';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-
-export default function HomePage() {
-  const { app, ready } = useNotis();
-  const { documents, loading } = useDatabase('items');
-
-  return (
-    <main className="notis-app-shell space-y-6">
-      <Card>
-        <CardHeader className="space-y-3">
-          <Badge variant="secondary" className="w-fit">Installed app</Badge>
-          <div className="space-y-2">
-            <CardTitle>{ready ? app?.name : 'Loading...'}</CardTitle>
-            <CardDescription>
-              {ready ? app?.description : 'Loading app metadata...'}
-            </CardDescription>
-          </div>
-        </CardHeader>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Items</CardTitle>
-          <CardDescription>Use shadcn surfaces and portal tokens so the app feels native inside Notis.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {loading ? (
-            <p className="text-sm text-muted-foreground">Loading...</p>
-          ) : documents.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
-              No items yet. Deploy the app and create some.
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {documents.map((doc) => (
-                <div key={doc.id} className="rounded-xl border border-border bg-background px-4 py-3">
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="font-medium">{doc.title}</p>
-                    {doc.properties.status ? (
-                      <Badge variant="outline">{String(doc.properties.status)}</Badge>
-                    ) : null}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </main>
-  );
-}

package/template/components/ui/badge.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary/10 text-primary',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/template/components/ui/button.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };

package/template/components/ui/card.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-2xl border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  ),
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('text-xl font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  ),
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  ),
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  ),
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/template/components.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  }
-}

package/template/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/template/notis.config.ts

@@ -1,18 +0,0 @@
-import { defineNotisApp } from '@notis/sdk/config';
-
-export default defineNotisApp({
-  name: 'My Notis App',
-  description: 'A new Notis app',
-  icon: 'lucide:layout-dashboard',
-
-  databases: ['items'],
-
-  routes: [
-    { path: '/', name: 'Home', icon: 'lucide:home', default: true },
-  ],
-
-  tools: [
-    'notis_query_database',
-    'notis_upsert_document',
-  ],
-});

package/template/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "my-notis-app",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@notis/sdk": "file:./packages/notis-sdk",
-    "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.474.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "postcss": "^8.0.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.0",
-    "vite": "^6.0.0"
-  }
-}

package/template/packages/notis-sdk/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "@notis/sdk",
-  "version": "0.1.0",
-  "type": "module",
-  "main": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./config": "./src/config.ts",
-    "./vite": "./src/vite.ts",
-    "./ui": "./src/ui.ts",
-    "./styles.css": "./src/styles.css"
-  },
-  "files": [
-    "src",
-    "template"
-  ],
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "vite": ">=5.0.0",
-    "@vitejs/plugin-react": ">=4.0.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.0.0"
-  }
-}