@notis_ai/cli 0.2.0-beta.20.1 → 0.2.0-beta.32.1

package/template/packages/notis-sdk/src/provider.tsx

@@ -1,35 +1,34 @@
 'use client';
 
-import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import React, { createContext, useContext, type Context, type ReactNode } from 'react';
 import type { NotisRuntime } from './runtime';
-import { getRuntime } from './runtime';
 
-const NotisContext = createContext<NotisRuntime | null>(null);
+const NOTIS_CONTEXT_SYMBOL = Symbol.for('notis.sdk.runtime_context');
 
-/**
- * Provides the Notis runtime context to all child components. Place this in
- * your root layout so that hooks like useDatabase, useTool, etc. can access
- * the platform bridge.
- *
- * During `next dev` (no runtime injected), hooks return safe defaults (empty
- * arrays, null values). During `notis apps preview` and in the portal, the
- * runtime is fully functional.
- */
-export function NotisProvider({ children, runtime }: { children: ReactNode; runtime?: NotisRuntime | null }) {
-  const [resolvedRuntime, setResolvedRuntime] = useState<NotisRuntime | null>(runtime ?? null);
+type NotisContextGlobal = typeof globalThis & {
+  [NOTIS_CONTEXT_SYMBOL]?: Context<NotisRuntime | null>;
+};
+
+function getNotisContext(): Context<NotisRuntime | null> {
+  const scope = globalThis as NotisContextGlobal;
+  if (!scope[NOTIS_CONTEXT_SYMBOL]) {
+    scope[NOTIS_CONTEXT_SYMBOL] = createContext<NotisRuntime | null>(null);
+  }
+  return scope[NOTIS_CONTEXT_SYMBOL]!;
+}
 
-  useEffect(() => {
-    // If runtime was passed as a prop (portal component rendering), use it directly.
-    // Otherwise fall back to window.__NOTIS_RUNTIME__ (local dev / preview).
-    if (runtime !== undefined) {
-      setResolvedRuntime(runtime);
-    } else {
-      setResolvedRuntime(getRuntime());
-    }
-  }, [runtime]);
+const NotisContext = getNotisContext();
 
+/**
+ * Provides the Notis runtime context to all child components. The portal owns
+ * the runtime and injects it into the rendered app tree.
+ */
+export function NotisProvider({ children, runtime }: { children: ReactNode; runtime: NotisRuntime | null }) {
+  if (runtime === undefined) {
+    throw new Error('NotisProvider requires an explicit runtime prop.');
+  }
   return (
-    <NotisContext.Provider value={resolvedRuntime}>
+    <NotisContext.Provider value={runtime}>
       {children}
     </NotisContext.Provider>
   );

package/template/packages/notis-sdk/src/runtime.ts

@@ -1,12 +1,10 @@
 /**
  * NotisRuntime is the bridge between app code running in the browser and the
- * Notis platform. It is injected as `window.__NOTIS_RUNTIME__` into every app
- * page -- both in local preview (with mock implementations) and in the portal
- * (with real server-backed implementations).
+ * Notis platform. The portal owns the runtime and injects it through
+ * `NotisProvider` when the app is rendered.
  *
- * App code should never access `window.__NOTIS_RUNTIME__` directly. Instead,
- * use the hooks from `@notis/sdk` (useDatabase, useTool, etc.) which read
- * from the NotisProvider context.
+ * App code should never reach for globals. Use the hooks from `@notis/sdk`
+ * (useDatabase, useTool, etc.) which read from the NotisProvider context.
  */
 
 // ---------------------------------------------------------------------------
@@ -33,6 +31,7 @@ export interface DocumentRecord {
   title: string;
   properties: Record<string, unknown>;
   icon?: string | null;
+  cover?: string | null;
   databaseSlug?: string;
   contentBlocknote?: Array<Record<string, unknown>> | null;
   contentMarkdown?: string | null;
@@ -60,10 +59,16 @@ export interface RouteDescriptor {
   path: string;
   name: string;
   icon?: string | null;
+  parentSlug?: string | null;
   default?: boolean;
   collection?: {
     database: string;
     titleProperty: string;
+    parentProperty?: string | null;
+    sidebar?: {
+      mode: 'flat-list' | 'tree';
+      allowCreate: boolean;
+    } | null;
   } | null;
 }
 
@@ -73,6 +78,15 @@ export interface CollectionItem {
   icon?: string | null;
 }
 
+export interface CollectionItemDetail extends CollectionItem {
+  properties: Record<string, unknown>;
+}
+
+export interface CollectionTreeItem extends CollectionItem {
+  parent_id: string | null;
+  has_children: boolean;
+}
+
 // ---------------------------------------------------------------------------
 // App descriptor
 // ---------------------------------------------------------------------------
@@ -101,17 +115,34 @@ export interface QueryFilter {
   page_size?: number;
 }
 
+export interface NotisRuntimeContext {
+  collectionItem?: CollectionItemDetail | null;
+}
+
 // ---------------------------------------------------------------------------
-// NotisRuntime -- the window.__NOTIS_RUNTIME__ contract
+// NotisRuntime
 // ---------------------------------------------------------------------------
 
 export interface NotisRuntime {
   app: AppDescriptor;
   route: RouteDescriptor;
   databases: DatabaseDescriptor[];
+  context: NotisRuntimeContext;
 
   navigate?: (payload: { kind: string; [key: string]: unknown }) => void;
 
+  registerTopBarSearch?: (
+    config:
+      | {
+          onChange: (value: string) => void;
+          placeholder?: string;
+          onSubmit?: () => void | Promise<void>;
+        }
+      | null,
+  ) => void;
+  setTopBarSearchValue?: (value: string) => void;
+  setTopBarSearchLoading?: (loading: boolean) => void;
+
   listTools(): Promise<ToolDescriptor[]>;
   callTool(name: string, args?: Record<string, unknown>): Promise<unknown>;
 
@@ -138,28 +169,14 @@ export interface NotisRuntime {
     pageSize?: number;
   }): Promise<{ items: CollectionItem[] }>;
 
+  listCollectionTree?(args?: {
+    databaseSlug?: string;
+    pageSize?: number;
+  }): Promise<{ items: CollectionTreeItem[] }>;
+
   request(path: string, options?: {
     method?: string;
     headers?: Record<string, string>;
     body?: unknown;
   }): Promise<unknown>;
 }
-
-// ---------------------------------------------------------------------------
-// Globals
-// ---------------------------------------------------------------------------
-
-declare global {
-  interface Window {
-    __NOTIS_RUNTIME__?: NotisRuntime;
-  }
-}
-
-/**
- * Read the injected runtime from the window. Returns null during SSR or if the
- * runtime hasn't been injected yet (e.g. during `next dev` without preview).
- */
-export function getRuntime(): NotisRuntime | null {
-  if (typeof window === 'undefined') return null;
-  return window.__NOTIS_RUNTIME__ ?? null;
-}

package/template/packages/notis-sdk/src/styles.css

@@ -1,110 +1,25 @@
 /**
  * Notis theme CSS variables.
  *
- * These match the portal's globals.css so that apps rendered inside the portal
- * iframe have identical styling. Import this in your root layout:
+ * Import this in your app layout:
  *
  *   import '@notis/sdk/styles.css';
  *
- * Then use Tailwind classes as normal -- shadcn components will pick up these
- * variables automatically.
+ * The portal injects the live Notis theme variables at render time.
  */
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 0 0% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --sidebar-background: 0 0% 7.5%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 0 0% 7.5%;
-    --sidebar-primary-foreground: 240 4.8% 95.9%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 0 0% 23.5%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-    --chart-1: 210 100% 49%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --code-block-background: #f6f6f6;
-    --code-block-foreground: #27272a;
-    --portal-page-max-width: 1100px;
-    --portal-page-gutter-mobile: 1rem;
-    --portal-page-gutter-desktop: 1rem;
-    --portal-page-top-mobile: 1rem;
-    --portal-page-top-desktop: 1.5rem;
-    --portal-surface-pad-x-mobile: 1rem;
-    --portal-surface-pad-x-desktop: 1.5rem;
-    --portal-surface-pad-bottom: 1.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 13%;
-    --foreground: 210 40% 98%;
-    --card: 0 0% 13%;
-    --card-foreground: 210 40% 98%;
-    --popover: 0 0% 13%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 0 0% 18%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 0 0% 18%;
-    --muted-foreground: 0 0% 65.1%;
-    --accent: 0 0% 18%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 0 0% 23.5%;
-    --input: 0 0% 23.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 0 0% 7.5%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 0 0% 23.5%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-    --chart-1: 210 100% 49%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --code-block-background: #1e1e1e;
-    --code-block-foreground: #e4e4e7;
-  }
-}
-
 @layer base {
   * {
     @apply border-border;
   }
-  body {
-    @apply bg-background text-foreground;
+  [data-notis-app-root] {
+    color: hsl(var(--foreground));
+    display: block;
+    min-height: 100%;
   }
 }
 

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

@@ -1,336 +0,0 @@
-/**
- * Local preview server for built Notis app bundles.
- *
- * 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.
- *
- * 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 { readManifest } from './app-platform.js';
-
-// ---------------------------------------------------------------------------
-// Static file serving
-// ---------------------------------------------------------------------------
-
-function contentTypeFor(path) {
-  const types = {
-    '.html': 'text/html; charset=utf-8',
-    '.css': 'text/css; charset=utf-8',
-    '.js': 'text/javascript; charset=utf-8',
-    '.json': 'application/json; charset=utf-8',
-    '.svg': 'image/svg+xml',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.ico': 'image/x-icon',
-    '.woff': 'font/woff',
-    '.woff2': 'font/woff2',
-  };
-  return types[extname(path)] || 'application/octet-stream';
-}
-
-// ---------------------------------------------------------------------------
-// Mock runtime generation
-// ---------------------------------------------------------------------------
-
-function buildSeedDocuments(databases) {
-  const state = {};
-  for (const slug of databases) {
-    state[slug] = Array.from({ length: 3 }, (_, i) => {
-      const title = `${slug} ${i + 1}`;
-      const content = `This is a preview note for ${title}.`;
-      return {
-        id: `${slug}-seed-${i + 1}`,
-        databaseSlug: slug,
-        title,
-        properties: {},
-        icon: null,
-        contentBlocknote: [{ type: 'paragraph', content: [{ type: 'text', text: content }] }],
-        contentMarkdown: content,
-        plainText: content,
-      };
-    });
-  }
-  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;
-  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>
-(function() {
-  var DB = ${serializeForInlineScript(databases.map(function(slug) {
-    return { slug: slug, title: slug, properties: [] };
-  }))};
-  var STATE = ${serializeForInlineScript(seedState)};
-  var COLLECTION = ${serializeForInlineScript(route.collection || null)};
-
-  function titleProp(slug) {
-    var db = DB.find(function(d) { return d.slug === slug; });
-    return db && db.properties ? (db.properties.find(function(p) { return p.type === 'title'; }) || {}).name || 'title' : 'title';
-  }
-
-  function dbSlug(v) { return v || (COLLECTION && COLLECTION.database) || null; }
-
-  window.__NOTIS_RUNTIME__ = {
-    app: ${serializeForInlineScript(app)},
-    route: ${serializeForInlineScript(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 })))});
-    },
-
-    callTool: function(name, args) {
-      console.log('[notis-preview] Tool call:', name, args);
-      return Promise.reject(new Error('Tool calls are not available in local preview. Deploy the app to use real tools.'));
-    },
-
-    queryDatabase: function(args) {
-      var slug = dbSlug(args && args.databaseSlug);
-      var docs = (STATE[slug] || []).slice(args && args.offset || 0);
-      return Promise.resolve({ documents: docs });
-    },
-
-    getDocument: function(args) {
-      var id = args && args.documentId;
-      for (var slug in STATE) {
-        var match = STATE[slug].find(function(d) { return d.id === id; });
-        if (match) return Promise.resolve(match);
-      }
-      return Promise.reject(new Error('Document not found in preview.'));
-    },
-
-    upsertDocument: function(args) {
-      var slug = dbSlug(args && args.databaseSlug);
-      if (!slug) return Promise.reject(new Error('No database for upsert.'));
-      var docs = STATE[slug] || [];
-      var tp = titleProp(slug);
-      var existing = docs.find(function(d) { return d.id === (args && args.documentId); });
-      var props = Object.assign({}, existing && existing.properties, args && args.properties);
-      if (args && args.title) props[tp] = args.title;
-      var blocks = Array.isArray(args && args.contentBlocknote)
-        ? JSON.parse(JSON.stringify(args.contentBlocknote))
-        : existing && existing.contentBlocknote
-          ? JSON.parse(JSON.stringify(existing.contentBlocknote))
-          : [{ type: 'paragraph' }];
-      var plainText = blocks
-        .map(function(block) {
-          if (typeof block.content === 'string') return block.content;
-          if (!Array.isArray(block.content)) return '';
-          return block.content
-            .map(function(inline) { return inline && typeof inline.text === 'string' ? inline.text : ''; })
-            .join('');
-        })
-        .filter(Boolean)
-        .join('\\n')
-        .trim();
-      var doc = {
-        id: existing ? existing.id : slug + '-' + Date.now(),
-        databaseSlug: slug,
-        title: props[tp] || 'Untitled',
-        properties: props,
-        icon: null,
-        contentBlocknote: blocks,
-        contentMarkdown: plainText,
-        plainText: plainText
-      };
-      if (existing) {
-        var idx = docs.indexOf(existing);
-        docs[idx] = doc;
-      } else {
-        docs.unshift(doc);
-      }
-      STATE[slug] = docs;
-      return Promise.resolve({ status: 'success', document: doc });
-    },
-
-    listCollectionItems: function(args) {
-      var slug = dbSlug(args && args.databaseSlug);
-      if (!slug) return Promise.resolve({ items: [] });
-      var tp = (args && args.titleProperty) || titleProp(slug);
-      var docs = (STATE[slug] || []).slice(0, (args && args.pageSize) || 100);
-      return Promise.resolve({
-        items: docs.map(function(d) {
-          return { id: d.id, title: (d.properties && d.properties[tp]) || d.title || 'Untitled', icon: d.icon };
-        })
-      });
-    },
-
-    request: function() {
-      return Promise.reject(new Error('Backend requests are not available in local preview.'));
-    }
-  };
-})();
-  </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>`;
-}
-
-// ---------------------------------------------------------------------------
-// Server
-// ---------------------------------------------------------------------------
-
-function normalizePathname(pathname) {
-  if (!pathname || pathname === '/') return '/';
-  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;
-}
-
-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 routesByPath = new Map((manifest.routes || []).map((r) => [normalizePathname(r.path), r]));
-  const defaultRoute = (manifest.routes || []).find((r) => r.default) || manifest.routes?.[0];
-
-  if (!defaultRoute) {
-    throw new Error('Manifest contains no routes.');
-  }
-
-  const server = createServer((request, response) => {
-    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 });
-      response.end();
-      return;
-    }
-
-    // Serve route HTML with runtime injection
-    const route = routesByPath.get(pathname) || (pathname === '/' ? defaultRoute : null);
-    if (route) {
-      const html = buildPreviewHtml({ manifest, route, 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));
-      return;
-    }
-
-    response.writeHead(404, { 'Content-Type': 'text/plain' });
-    response.end('Not found');
-  });
-
-  await new Promise((resolveP, rejectP) => {
-    server.on('error', rejectP);
-    server.listen(port, '127.0.0.1', resolveP);
-  });
-
-  // Keep running until interrupted
-  await new Promise(() => {});
-}