@notis_ai/cli 0.2.18 → 0.2.20

package/src/space-harness-host.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
+import * as JSXRuntime from 'react/jsx-runtime';
+import { importBundleSource, resolveBundleRouteExport } from '../../sdk/src/bundleModule';
+import { SdkPresentation } from '../../sdk/src/presentation';
+import { createPrefetchQueue, createQueryClient } from '../../sdk/src/queryCache';
+import type { NotisRuntime } from '../../sdk/src/runtime';
+import { SPACE_VIEWER_READ_OPERATIONS } from '../../sdk/src/space';
+import * as NotisSDK from '../../sdk/src/index';
+import * as NotisSDKUI from '../../sdk/src/ui/index';
+// The toolkit stylesheet the host adopts into every Space shadow root (esbuild text import).
+import toolkitCss from '../../sdk/src/ui/toolkit.css' with { type: 'text' };
+import type { SpaceActionOptions, SpaceDocumentBodyRequest, SpaceViewerReadOperation } from '../../sdk/src/space';
+
+type Call = { op: string; actionId?: string; ok: boolean | null; error?: string };
+const state = { mounted: false, renderStarted: false, errors: [] as Array<{ phase: string; message: string }>, runtimeCalls: [] as Call[] };
+// The Space runtime contract (packages/sdk/src/runtimeModules.ts): bundles import React and the SDK from these.
+Object.assign(window, { __harness: state, React, ReactDOM, ReactDOMClient, __ReactJSXRuntime: JSXRuntime,
+  __NotisSDK: NotisSDK, __NotisSDKUI: NotisSDKUI });
+NotisSDKUI.registerToolkitStyles(toolkitCss);
+const diagnostic = (phase: string, reason: unknown) => state.errors.push({ phase,
+  message: reason instanceof Error ? reason.message : String(reason || 'Verification failed.') });
+window.addEventListener('error', event => diagnostic('window_error', event.error || event.message));
+window.addEventListener('unhandledrejection', event => diagnostic('unhandled_rejection', event.reason));
+window.addEventListener('securitypolicyviolation', event => diagnostic('security_policy', `Blocked ${event.violatedDirective}`));
+
+async function start() {
+  const response = await fetch('/snapshot', { credentials: 'omit' });
+  if (!response.ok) throw new Error('The frozen verification snapshot could not be loaded.');
+  const snapshot = await response.json();
+  const authority = structuredClone(snapshot.descriptor.space);
+  const runFixture = async (call: Call, input: unknown) => {
+    state.runtimeCalls.push(call);
+    try {
+      const result = await fetch('/fixture', { method: 'POST', credentials: 'omit',
+        headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(input), signal: AbortSignal.timeout(5_000) });
+      const payload = await result.json();
+      if (!result.ok) throw new Error(payload.message || 'No matching synthetic fixture.');
+      call.ok = true; return payload.result;
+    } catch (error) {
+      call.ok = false; call.error = error instanceof Error ? error.message : 'Verification request failed.';
+      throw error;
+    }
+  };
+  const protocolFailure = (message: string): Promise<never> => { diagnostic('protocol', message); return Promise.reject(new Error(message)); };
+  const deny = () => protocolFailure('Use a declared Space action.');
+  const queue = createPrefetchQueue(2);
+  const runtime: NotisRuntime = {
+    ...snapshot.descriptor, databases: [],
+    context: { ...snapshot.descriptor.context,
+      resourceId: snapshot.descriptor.context?.resource_id ?? snapshot.descriptor.context?.resourceId ?? null,
+      collectionItem: snapshot.descriptor.context?.collection_item ?? snapshot.descriptor.context?.collectionItem ?? null },
+    queryClient: createQueryClient({ maxEntries: 100, schedule: queue }),
+    listTools: deny, callTool: deny, request: deny,
+    callAction<T>(id: string, inputs: Record<string, unknown> = {}, options: SpaceActionOptions = {}): Promise<T> {
+      if (!Object.hasOwn(authority.actions, id)) return protocolFailure('Undeclared verification action.');
+      if ((options.readOnly || options.dedupe) && authority.actions[id].readOnly !== true) {
+        return protocolFailure('A write action cannot run as a cached read.');
+      }
+      return runFixture({ op: 'callAction', actionId: id, ok: null }, { action_id: id, inputs });
+    },
+    viewerRead: authority.viewerReads?.length ? <T,>(operation: SpaceViewerReadOperation, input: Record<string, unknown> = {}): Promise<T> => {
+      const family = Object.hasOwn(SPACE_VIEWER_READ_OPERATIONS, operation) ? SPACE_VIEWER_READ_OPERATIONS[operation] : null;
+      if (!family || !authority.viewerReads.includes(family)) return protocolFailure('Undeclared verification viewer read.');
+      return runFixture({ op: 'viewerRead', actionId: operation, ok: null }, { viewer_read: { operation, input } });
+    } : undefined,
+    shown: Object.values(authority.shows || {}).some(list => 'database' in list) ? <T,>(name: string, params: Record<string, unknown> = {}): Promise<T> => {
+      const list = authority.shows && Object.hasOwn(authority.shows, name) ? authority.shows[name] : null;
+      if (!list || !('database' in list)) return protocolFailure('Undeclared verification list.');
+      return runFixture({ op: 'shown', actionId: name, ok: null }, { shown: { name, params } });
+    } : undefined,
+    documentBody(request: SpaceDocumentBodyRequest) {
+      return runFixture({ op: 'documentBody', actionId: request?.readAction, ok: null }, { document_body: request });
+    },
+    navigate(payload) {
+      // A view changing its own params (useViewParams().setParams): recorded, the view keeps its synthetic params.
+      if (payload.kind === 'view-params') {
+        const params = payload.params;
+        if (!params || typeof params !== 'object' || Array.isArray(params)
+          || Object.keys(payload).some(key => !['kind', 'params', 'replace'].includes(key))
+          || Object.values(params).some(value => !['string', 'number', 'boolean'].includes(typeof value))) {
+          return protocolFailure('View params must be an object of text, number or true/false values.');
+        }
+        state.runtimeCalls.push({ op: 'navigate', actionId: 'view-params', ok: true });
+        return;
+      }
+      if (payload.kind !== 'space-reference' || typeof payload.alias !== 'string' || !authority.navigation?.includes(payload.alias)) {
+        return protocolFailure('Offline navigation requires a declared synthetic destination.');
+      }
+      // This observes a declaration only; no live navigation or access is claimed.
+      state.runtimeCalls.push({ op: 'navigate', actionId: payload.alias, ok: true });
+    },
+    publishActiveResource() {}, captureContextSelection() {},
+    addContext: async () => false, updateContext: async () => false, removeContext: async () => false,
+    registerTopBarSearch() {}, setTopBarSearchValue() {}, setTopBarSearchLoading() {},
+  };
+  const module = await importBundleSource(snapshot.source);
+  const view = resolveBundleRouteExport(module, ['SpaceView'], true);
+  if (!view) throw new Error('The SpaceView export is missing from this presentation.');
+  const host = document.createElement('div'); host.style.cssText = 'min-height:100vh;height:100vh';
+  const shadow = host.attachShadow({ mode: 'open' });
+  const css = document.createElement('style'); css.textContent = snapshot.css; shadow.appendChild(css);
+  NotisSDKUI.adoptToolkitStyles(shadow);
+  const mount = document.createElement('div'); mount.setAttribute('data-notis-app-mount', 'true');
+  mount.style.cssText = 'min-height:0;height:100%'; shadow.appendChild(mount);
+  document.body.appendChild(host);
+  const controller = document.createElement('div'); document.body.appendChild(controller);
+  const mode = new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light';
+  document.documentElement.classList.toggle('dark', mode === 'dark');
+  state.renderStarted = true;
+  ReactDOMClient.createRoot(controller).render(React.createElement(SdkPresentation, {
+    mount, runtime, component: view.component, shell: module.__AppShell, theme: { mode, style: { colorScheme: mode } },
+    resetKey: snapshot.cacheKey,
+    onCommit: (hasContent: boolean) => { state.mounted = hasContent; },
+    onError: (error: Error) => { state.mounted = false; state.errors.push({ phase: 'render', message: error.message }); },
+    onProtocolError: (error: Error) => diagnostic('protocol', error),
+    fallback: (error: Error) => React.createElement('div', { role: 'alert' }, error.message),
+  }));
+}
+
+void start().catch(reason => state.errors.push({ phase: 'boot', message: reason instanceof Error ? reason.message : 'Verification did not start.' }));

package/template/.harness/index.html.tmpl

@@ -2,26 +2,13 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Notis App Harness</title>
-  <script>
-    const harnessTheme = new URLSearchParams(window.location.search).get('theme') === 'dark' ? 'dark' : 'light';
-    document.documentElement.classList.toggle('dark', harnessTheme === 'dark');
-    document.documentElement.dataset.theme = harnessTheme;
-  </script>
-  <link rel="stylesheet" href="./bundle/app.css">
-  <script type="importmap">
-  {
-    "imports": {
-      "react": "https://esm.sh/react@{{REACT_VERSION}}",
-      "react-dom": "https://esm.sh/react-dom@{{REACT_VERSION}}",
-      "react/jsx-runtime": "https://esm.sh/react@{{REACT_VERSION}}/jsx-runtime",
-      "react-dom/client": "https://esm.sh/react-dom@{{REACT_VERSION}}/client"
-    }
-  }
-  </script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+  <title>Notis Space theme</title>
+  <!--
+    Canonical CLI and SDK theme. Only the style block below is read: the CLI
+    verification server serves it as /theme.css, and the view renderer build
+    writes it to dist/theme.css, which the renderer digest covers. Keep its
+    bytes stable. Nothing else in this file is served or copied into scaffolds.
+  -->
   <style>
     /*
      * Portal-parity theme tokens. In production the portal copies its computed
@@ -93,338 +80,8 @@
       color: hsl(var(--foreground));
       -webkit-font-smoothing: antialiased;
     }
-    #harness-status { position: fixed; top: 0; left: 0; right: 0; padding: 4px 8px; font-size: 11px; background: #111; color: #0f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; z-index: 9999; }
-    #root { padding-top: 24px; min-height: 100vh; }
+    #root { min-height: 100vh; }
   </style>
 </head>
-<body>
-  <div id="harness-status">harness: booting</div>
-  <div id="root"></div>
-  <script type="module">
-    const routeExport = {{ROUTE_EXPORT}};
-    const descriptor = {{RUNTIME_DESCRIPTOR}};
-    const mode = {{MODE}};
-    const apiBase = {{API_BASE}};
-    const jwt = {{JWT}};
-    const fixtures = {{FIXTURES}};
-
-    /**
-     * Resolves the canned response for one tool call.
-     *
-     * A plain `"TOOL_NAME"` key answers every call to that tool. An app that
-     * reaches several databases through a single tool needs to vary the
-     * payload per call, so a key may also be scoped to one argument with
-     * `"TOOL_NAME#arg=value"` — for example
-     * `"LOCAL_NOTIS_DATABASE_QUERY#database_slug=notes"`. Scoped keys are
-     * checked first; the unscoped key stays the fallback.
-     */
-    function lookupToolFixture(name, args) {
-      const tools = fixtures && fixtures.tools;
-      if (!tools) return undefined;
-      for (const key of Object.keys(tools)) {
-        const sep = key.indexOf('#');
-        if (sep === -1 || key.slice(0, sep) !== name) continue;
-        const scope = key.slice(sep + 1);
-        const eq = scope.indexOf('=');
-        if (eq === -1) continue;
-        if (String(args[scope.slice(0, eq)]) === scope.slice(eq + 1)) {
-          return tools[key];
-        }
-      }
-      return Object.prototype.hasOwnProperty.call(tools, name) ? tools[name] : undefined;
-    }
-
-    const status = document.getElementById('harness-status');
-    const setStatus = (msg, color = '#0f0') => {
-      status.textContent = `harness: ${msg}`;
-      status.style.color = color;
-    };
-
-    window.__harness = {
-      errors: [],
-      runtimeCalls: [],
-      renderStarted: false,
-      mounted: false,
-      mode,
-      route: descriptor.route && descriptor.route.slug,
-      scenario: descriptor.context && descriptor.context.screenshotScenario,
-    };
-
-    window.addEventListener('error', (event) => {
-      window.__harness.errors.push({
-        type: 'window.error',
-        message: event.message,
-        stack: event.error && event.error.stack,
-      });
-    });
-    window.addEventListener('unhandledrejection', (event) => {
-      window.__harness.errors.push({
-        type: 'unhandledrejection',
-        reason: String((event.reason && event.reason.stack) || event.reason),
-      });
-    });
-
-    /**
-     * Records one runtime call and hands back the entry so the caller can
-     * stamp its outcome once the promise settles. Verify reads `ok` to tell a
-     * route that rendered from real data apart from one that only rendered its
-     * error states, so every runtime path must settle its own entry.
-     */
-    function record(op, args) {
-      const entry = { op, args, ok: null, error: null, durationMs: null };
-      entry.startedAt = Date.now();
-      window.__harness.runtimeCalls.push(entry);
-      return entry;
-    }
-
-    function settle(entry, error) {
-      entry.durationMs = Date.now() - entry.startedAt;
-      delete entry.startedAt;
-      entry.ok = !error;
-      entry.error = error ? (error.message ? String(error.message) : String(error)) : null;
-    }
-
-    async function tracked(entry, run) {
-      try {
-        const value = await run();
-        settle(entry, null);
-        return value;
-      } catch (error) {
-        settle(entry, error);
-        throw error;
-      }
-    }
-
-    async function readJsonOrSnippet(response) {
-      const text = await response.text().catch(() => '');
-      if (!text) return { payload: null, snippet: null };
-      try {
-        return { payload: JSON.parse(text), snippet: null };
-      } catch {
-        const trimmed = text.trim();
-        return { payload: null, snippet: trimmed.length > 120 ? `${trimmed.slice(0, 120)}...` : trimmed };
-      }
-    }
-
-    async function runtimeQuery(body) {
-      if (!apiBase || !jwt || !descriptor.app || !descriptor.app.id) {
-        throw new Error('live harness mode requires apiBase, jwt, and app id');
-      }
-      const response = await fetch(`${String(apiBase).replace(/\/$/, '')}/portal_views/runtime_query`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${jwt}`,
-        },
-        body: JSON.stringify({
-          app_id: descriptor.app.id,
-          route_slug: descriptor.route && descriptor.route.slug,
-          ...body,
-        }),
-      });
-      const { payload, snippet } = await readJsonOrSnippet(response);
-      if (!response.ok) {
-        const message = (payload && (payload.error || payload.message)) || snippet || `status ${response.status}`;
-        throw new Error(`Runtime request failed: ${message}`);
-      }
-      if (!payload) {
-        throw new Error(snippet ? `Runtime response was not JSON: ${snippet}` : 'Runtime response was empty');
-      }
-      if (payload.status === 'error' || payload.error) {
-        throw new Error(payload.message || payload.error || 'Runtime request failed');
-      }
-      return payload;
-    }
-
-    function stubRuntime() {
-      return {
-        app: descriptor.app,
-        route: descriptor.route,
-        context: descriptor.context || {},
-        navigate: (args) => {
-          settle(record('navigate', args), null);
-        },
-        // There is no manager chat here, so the handover is recorded and
-        // reported as drafted without any UI.
-        handover: async (payload) => {
-          settle(record('handover', payload), null);
-          return { status: 'drafted' };
-        },
-        registerTopBarSearch: () => {},
-        setTopBarSearchValue: () => {},
-        setTopBarSearchLoading: () => {},
-        // No change feed here, so `useDatabaseSubscription` reports live=false
-        // and the app keeps whatever manual refresh it offers.
-        subscribeDatabase: () => () => {},
-        // There is no cloud computer behind the harness. Answering "not
-        // available" rather than throwing keeps `useCloudComputer` on the same
-        // fallback branch a user without a cloud computer would see.
-        cloudComputerFacts: async () => tracked(
-          record('cloudComputerFacts', {}),
-          async () => ({
-            available: false,
-            reason: 'unsupported_host',
-            sandbox: null,
-            cli_auth: {
-              gh: { authenticated: null, account: null, checked_at: null, reason: 'unsupported_host' },
-            },
-          }),
-        ),
-        listTools: async () => tracked(
-          record('listTools', {}),
-          async () => descriptor.tools || [],
-        ),
-        callTool: async (name, args) => tracked(
-          record('callTool', { name, arguments: args || {} }),
-          async () => {
-            const fixture = lookupToolFixture(name, args || {});
-            if (fixture !== undefined) {
-              return structuredClone(fixture);
-            }
-            return { ok: true, result: null };
-          },
-        ),
-        request: async (path, options) => tracked(
-          record('request', { path, options }),
-          async () => {
-            if (fixtures && fixtures.requests && Object.prototype.hasOwnProperty.call(fixtures.requests, path)) {
-              return structuredClone(fixtures.requests[path]);
-            }
-            return null;
-          },
-        ),
-      };
-    }
-
-    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-    async function applyScenarioActions() {
-      const actions = fixtures && fixtures.scenario && Array.isArray(fixtures.scenario.actions)
-        ? fixtures.scenario.actions
-        : [];
-      for (const action of actions) {
-        if (action && action.type === 'wait') {
-          await delay(Math.max(0, Number(action.ms) || 0));
-          continue;
-        }
-        if (action && action.type === 'click' && typeof action.selector === 'string') {
-          const deadline = Date.now() + 5000;
-          let element = null;
-          while (!element && Date.now() < deadline) {
-            element = document.querySelector(action.selector);
-            if (!element) await delay(50);
-          }
-          if (!element || typeof element.click !== 'function') {
-            throw new Error(`Screenshot scenario could not click ${action.selector}`);
-          }
-          element.click();
-          await delay(Number(action.settle_ms) || 350);
-        }
-      }
-    }
-
-    function liveRuntime() {
-      return {
-        ...stubRuntime(),
-        listTools: async () => tracked(
-          record('listTools', {}),
-          async () => {
-            const result = await runtimeQuery({ method: 'tools/list' });
-            return result.tools || [];
-          },
-        ),
-        callTool: async (name, args) => tracked(
-          record('callTool', { name, arguments: args || {} }),
-          async () => runtimeQuery({ method: 'tools/call', name, arguments: args || {} }),
-        ),
-        // Live mode must not inherit the stub's canned answer: it would settle
-        // ok: true with fake data and soften the all-calls-failed assertion.
-        cloudComputerFacts: async (options) => tracked(
-          record('cloudComputerFacts', options || {}),
-          async () => runtimeQuery({
-            method: 'cloud_computer/facts',
-            ...(options && options.refresh ? { refresh: true } : {}),
-          }),
-        ),
-        request: async (path, options) => tracked(
-          record('request', { path, options }),
-          async () => {
-            const response = await fetch(`${String(apiBase).replace(/\/$/, '')}${path}`, {
-              method: (options && options.method) || 'GET',
-              headers: {
-                Authorization: `Bearer ${jwt}`,
-                ...((options && options.body) ? { 'Content-Type': 'application/json' } : {}),
-                ...((options && options.headers) || {}),
-              },
-              body: options && options.body ? JSON.stringify(options.body) : undefined,
-            });
-            const { payload, snippet } = await readJsonOrSnippet(response);
-            if (!response.ok) {
-              throw new Error((payload && (payload.error || payload.message)) || snippet || `Request failed with status ${response.status}`);
-            }
-            return payload;
-          },
-        ),
-      };
-    }
-
-    try {
-      setStatus('loading react');
-      const React = await import('react');
-      const { createRoot } = await import('react-dom/client');
-
-      setStatus('loading bundle');
-      const bundle = await import('./bundle/app.js');
-
-      setStatus('binding runtime context');
-      const RuntimeContext = globalThis[Symbol.for('notis.sdk.runtime_context')];
-      if (!RuntimeContext) {
-        throw new Error('runtime context Symbol not initialized by bundle');
-      }
-
-      const Page = bundle[routeExport];
-      if (!Page) {
-        throw new Error(`bundle has no ${routeExport} export`);
-      }
-      const Shell = bundle.__AppShell;
-      const runtime = mode === 'live' ? liveRuntime() : stubRuntime();
-      const Root = () =>
-        React.createElement(
-          RuntimeContext.Provider,
-          { value: runtime },
-          Shell
-            ? React.createElement(Shell, null, React.createElement(Page, null))
-            : React.createElement(Page, null),
-        );
-
-      setStatus('mounting');
-      window.__harness.renderStarted = true;
-      createRoot(document.getElementById('root')).render(React.createElement(Root));
-
-      requestAnimationFrame(() => requestAnimationFrame(async () => {
-        try {
-          await delay(500);
-          await applyScenarioActions();
-          window.__harness.mounted = true;
-          const errors = window.__harness.errors.length;
-          const calls = window.__harness.runtimeCalls.length;
-          setStatus(`mounted (errors=${errors}, runtimeCalls=${calls})`, errors ? '#f55' : '#0f0');
-        } catch (error) {
-          window.__harness.errors.push({
-            type: 'scenario',
-            message: error && error.message ? error.message : String(error),
-          });
-          setStatus(`scenario failed: ${error && error.message ? error.message : String(error)}`, '#f55');
-        }
-      }));
-    } catch (error) {
-      window.__harness.errors.push({
-        type: 'boot',
-        message: error && error.message ? error.message : String(error),
-        stack: error && error.stack,
-      });
-      setStatus(`boot failed: ${error && error.message ? error.message : String(error)}`, '#f55');
-    }
-  </script>
-</body>
+<body></body>
 </html>

package/template/app/globals.css

@@ -1,3 +1,29 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss" source(none);
+
+@config "../tailwind.config.ts";
+@source "./";
+@source "../components";
+@source "../spaces";
+@source "../lib";
+@source "../packages/sdk/src";
+
+/* Preserve v3 defaults while keeping the existing Notis theme/config. */
+@theme {
+  --default-ring-width: 3px;
+  --default-ring-color: hsl(var(--ring) / 0.5);
+}
+
+@layer base {
+  *, ::before, ::after, ::backdrop, ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+  input::placeholder, textarea::placeholder {
+    color: var(--color-gray-400);
+  }
+  button:not(:disabled), [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+  dialog {
+    margin: auto;
+  }
+}

package/template/app/layout.tsx

@@ -1,10 +1,6 @@
-import '@notis/sdk/styles.css';
-import { ShortcutProvider } from '@notis/sdk/interactions';
 import './globals.css';
 
 export default function AppShell({ children }: { children: React.ReactNode }) {
-  // NotisProvider supplies this in the product host. Keeping the shell-level
-  // provider makes the same scope arbitration available in the local harness;
-  // ShortcutProvider is nesting-safe, so the hosted app still has one registry.
-  return <ShortcutProvider>{children}</ShortcutProvider>;
+  // The host provides the SDK, its keyboard engine and the toolkit stylesheet.
+  return <>{children}</>;
 }

package/template/components/ui/badge.tsx

@@ -4,13 +4,16 @@ 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',
+  'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary/10 text-primary',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'text-foreground',
+        default: 'bg-primary/10 text-primary',
+        secondary: 'bg-foreground/[0.07] text-foreground',
+        destructive: 'bg-destructive/10 text-destructive',
+        // `outline` is kept for API compatibility and renders as plain text: the
+        // design bar has no outlined badges.
+        outline: 'bg-transparent text-foreground',
       },
     },
     defaultVariants: {

package/template/components/ui/button.tsx

@@ -5,7 +5,7 @@ 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',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

package/template/components/ui/native-select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { CaretDown } from '@phosphor-icons/react';
+
+import { cn } from '@/lib/utils';
+
+// Borderless native select: a tinted pill with a caret. Keeps the platform
+// dropdown (no portal needed inside the app surface) and the portal focus ring.
+const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <span className={cn('relative inline-flex', className)}>
+      <select
+        ref={ref}
+        className="h-9 w-full appearance-none rounded-md bg-muted pl-3 pr-8 text-sm text-foreground outline-hidden transition-colors hover:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        {...props}
+      >
+        {children}
+      </select>
+      <CaretDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    </span>
+  ),
+);
+NativeSelect.displayName = 'NativeSelect';
+
+export { NativeSelect };

package/template/notis.config.ts

@@ -1,37 +1,5 @@
-import { defineNotisApp } from '@notis/sdk/config';
+import { defineSpaces } from '@notis/sdk/config';
 
-export default defineNotisApp({
-  name: 'my-notis-app',
-  devSlug: 'my-notis-app',
-  title: 'My Notis App',
-  description: 'A focused Notis app with one route and one database-backed workflow.',
-  icon: 'phosphor:squares-four',
-  author: { name: 'Notis User' },
-  categories: ['Productivity'],
-  tagline: 'A clean starting point for a focused workflow.',
-
-  databases: ['items'],
-
-  routes: [
-    { path: '/', slug: 'home', name: 'Home', icon: 'phosphor:house', default: true },
-    // Example collection tree route:
-    // {
-    //   path: '/notes',
-    //   slug: 'notes',
-    //   name: 'Notes',
-    //   collection: {
-    //     database: 'notes',
-    //     titleProperty: 'Name',
-    //     parentProperty: 'Parent',
-    //     sidebar: {
-    //       mode: 'tree',
-    //       allowCreate: true,
-    //     },
-    //   },
-    // },
-  ],
-
-  tools: [
-    'LOCAL_NOTIS_DATABASE_QUERY',
-  ],
-});
+// The workspace Space index. `notis spaces init` replaces it with the Spaces it
+// scaffolds; each entry points at a definition file that exports defineSpace().
+export default defineSpaces({ spaces: {} });