@notis_ai/cli 0.2.18 → 0.2.19

package/dist/view-renderer/dist/theme.css

@@ -0,0 +1,73 @@
+
+    /*
+     * Portal-parity theme tokens. In production the portal copies its computed
+     * :root custom properties onto the app root, so app CSS written against
+     * hsl(var(--token)) resolves to the real portal palette. The harness mirrors
+     * the portal's light theme here so dev renders and listing screenshots look
+     * exactly like the app inside the portal. Keep in sync with
+     * portal/src/app/globals.css (:root).
+     */
+    :root {
+      color-scheme: light;
+      --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;
+      --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%;
+    }
+    :root.dark {
+      color-scheme: 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%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
+    body {
+      margin: 0;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+      background: hsl(var(--background));
+      color: hsl(var(--foreground));
+      -webkit-font-smoothing: antialiased;
+    }
+    #root { min-height: 100vh; }
+  

package/dist/view-renderer/src/dom.js

@@ -0,0 +1,212 @@
+/** Evaluated in Chromium: includes open Shadow roots and explicitly declared chart semantics. */
+export function extractRenderedMarkdown({ baseUrl = document.baseURI } = {}) {
+  const space = value => String(value ?? '').replace(/\s+/g, ' ').trim();
+  const escape = value => space(value).replaceAll('\\', '\\\\').replaceAll('|', '\\|');
+  const link = value => {
+    try { const url = new URL(value, baseUrl); return ['http:', 'https:', 'mailto:'].includes(url.protocol) ? url.href : ''; }
+    catch { return ''; }
+  };
+  const visible = node => {
+    const style = getComputedStyle(node);
+    return !node.hidden && node.getAttribute('aria-hidden') !== 'true' && style.display !== 'none' && style.visibility !== 'hidden';
+  };
+  const labelledBy = node => (node.getAttribute('aria-labelledby') || '').split(' ')
+    .map(id => node.getRootNode().getElementById?.(id)?.textContent || '').join(' ').trim();
+  const label = node => node.getAttribute('aria-label') || labelledBy(node)
+    || (node.id ? [...node.getRootNode().querySelectorAll('label')].find(label => label.htmlFor === node.id)?.textContent : '')
+    || node.closest('label')?.textContent || node.getAttribute('placeholder') || node.name || 'Field';
+  const table = element => {
+    const rows = [...element.querySelectorAll('tr')].map(row => [...row.children].filter(cell => ['TD', 'TH'].includes(cell.tagName)).map(cell => escape([...cell.childNodes].map(walk).join(''))));
+    if (!rows.length) return '';
+    const columns = Math.max(...rows.map(row => row.length));
+    const padded = rows.map(row => [...row, ...Array(Math.max(0, columns - row.length)).fill('')]);
+    const header = element.querySelector('tr')?.querySelector('th') ? padded.shift() : Array(columns).fill('');
+    return '\n\n' + [header, Array(columns).fill('---'), ...padded].map(row => '| ' + row.join(' | ') + ' |').join('\n') + '\n\n';
+  };
+  const children = element => [...(element.shadowRoot || element).childNodes].map(walk).join('');
+  // RenderChartData: the chart's label line, then its exact values as a table.
+  const chartTable = node => '\n\n' + space(node.getAttribute('aria-label')) + '\n' + table(node);
+  // An SVG or canvas chart contributes its accessible name and any declared chart
+  // data inside it, never mark tooltips or geometry. SVG elements keep a lowercase
+  // tagName in HTML documents, so they are matched by localName. A drawing with no
+  // name (a diagram) keeps its visible labels, one per line.
+  const graphic = node => {
+    const own = [...node.children].find(child => child.localName === 'title');
+    const name = space(node.getAttribute('aria-label') || labelledBy(node) || own?.textContent);
+    const charts = [...node.querySelectorAll('[data-notis-render="chart-data"]')].map(chartTable).join('');
+    if (name || node.localName !== 'svg') return (name ? '\n\n' + name + '\n\n' : '') + charts;
+    const labels = [...node.querySelectorAll('text, foreignObject')].filter(visible)
+      .map(item => item.localName === 'text' ? space(item.textContent) : children(item));
+    return '\n\n' + labels.join('\n\n') + '\n\n';
+  };
+  const descriptionList = element => {
+    const lines = [], terms = [], definitions = [];
+    const flush = () => {
+      if (terms.length || definitions.length) lines.push('- ' + (terms.length ? terms.join(' / ') + ': ' : '') + definitions.join('; '));
+      terms.length = 0; definitions.length = 0;
+    };
+    // SDK properties wrap each dt/dd pair in a div. Keep those pairs and HTML's
+    // multi-term/multi-definition groups, but exclude nested lists and hidden wrappers.
+    for (const node of element.querySelectorAll('dt,dd')) {
+      if (node.closest('dl') !== element) continue;
+      let shown = true;
+      for (let current = node; current && current !== element; current = current.parentElement) {
+        if (!visible(current)) { shown = false; break; }
+      }
+      if (!shown) continue;
+      if (node.tagName === 'DT') {
+        if (definitions.length) flush();
+        terms.push(space(children(node)));
+      } else definitions.push(space(children(node)));
+    }
+    flush();
+    return '\n\n' + lines.join('\n') + '\n\n';
+  };
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) return node.textContent || '';
+    if (node.nodeType !== Node.ELEMENT_NODE) return '';
+    const tag = node.tagName;
+    if (['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE', 'LINK', 'META'].includes(tag)) return '';
+    const semantic = node.getAttribute('data-notis-render');
+    if (semantic === 'markdown') return '\n\n' + (node.textContent || '') + '\n\n';
+    if (semantic === 'chart-data') return chartTable(node);
+    if (!visible(node)) return '';
+    if (tag === 'TABLE') return table(node);
+    if (tag === 'DL') return descriptionList(node);
+    if (/^H[1-6]$/.test(tag)) return '\n\n' + '#'.repeat(Number(tag[1])) + ' ' + space(children(node)) + '\n\n';
+    if (tag === 'A') { const url = link(node.getAttribute('href')); const text = space(children(node)); return url ? `[${text || url}](${url})` : text; }
+    if (tag === 'IMG') { const url = link(node.currentSrc || node.src); return url ? `![${escape(node.alt)}](${url})` : space(node.alt); }
+    if (tag === 'PRE') return '\n\n```' + (node.getAttribute('data-language') || '') + '\n' + node.textContent.trim() + '\n```\n\n';
+    if (tag === 'CODE') return '`' + node.textContent.replaceAll('`', '\\`') + '`';
+    if (['STRONG', 'B'].includes(tag)) return '**' + children(node) + '**';
+    if (['EM', 'I'].includes(tag)) return '*' + children(node) + '*';
+    if (tag === 'BR') return '\n';
+    if (tag === 'HR') return '\n\n---\n\n';
+    if (tag === 'LI') {
+      const nested = [...node.children].filter(child => ['UL', 'OL'].includes(child.tagName));
+      const text = space([...node.childNodes].filter(child => !nested.includes(child)).map(walk).join(''));
+      const prefix = node.parentElement?.tagName === 'OL' ? `${[...node.parentElement.children].indexOf(node) + 1}. ` : '- ';
+      return '\n' + prefix + text + nested.map(list => children(list).trim().split('\n').map(line => '\n  ' + line).join('')).join('');
+    }
+    if (tag === 'BLOCKQUOTE') return '\n\n' + children(node).trim().split('\n').map(line => '> ' + line).join('\n') + '\n\n';
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(tag)) {
+      if (['password', 'hidden'].includes(node.type)) return '';
+      const value = node.type === 'checkbox' || node.type === 'radio' ? (node.checked ? '[x]' : '[ ]')
+        : tag === 'SELECT' ? [...node.selectedOptions].map(option => option.text).join(', ') : node.value;
+      return '\n\n' + escape(label(node)) + ': ' + escape(value) + '\n\n';
+    }
+    if (tag === 'BUTTON') return ' ' + space(node.textContent) + ' ';
+    if (node.localName === 'svg' || tag === 'CANVAS') return graphic(node);
+    const content = children(node);
+    return ['P', 'DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'MAIN', 'UL', 'OL', 'FIGURE'].includes(tag) ? '\n\n' + content + '\n\n' : content;
+  }
+  return walk(document.body).replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim();
+}
+
+/** Bounded capture expands clipped content; no 1500px crop or hidden inner scroll tail. */
+export function expandScrollAreas({ maxHeight = 60000 } = {}) {
+  const nodes = [];
+  const visit = root => { for (const node of root.querySelectorAll('*')) { nodes.push(node); if (node.shadowRoot) visit(node.shadowRoot); } };
+  visit(document);
+  let expanded = 0;
+  for (const node of nodes.reverse()) {
+    const style = getComputedStyle(node);
+    if (style.display === 'none' || style.visibility === 'hidden') continue;
+    if (node.scrollHeight > maxHeight) return { tooLarge: true, height: node.scrollHeight };
+    // Descendants come first, so an ancestor holding an expanded area (even with
+    // visible overflow, or a height frozen by freezeFrameViewportSizes) grows with it
+    // instead of letting the following content paint over the expanded tail.
+    if (node.scrollHeight > node.clientHeight + 2 && (/(auto|scroll|hidden|clip)/.test(style.overflowY) || node.hasAttribute('data-notis-render-expanded')
+      || node.querySelector('[data-notis-render-expanded]') || node.shadowRoot?.querySelector('[data-notis-render-expanded]'))) {
+      node.setAttribute('data-notis-render-expanded', 'true');
+      node.style.setProperty('height', `${node.scrollHeight}px`, 'important');
+      node.style.setProperty('max-height', 'none', 'important');
+      node.style.setProperty('overflow-y', 'visible', 'important');
+      const parent = node.parentElement || node.getRootNode().host;
+      const parentStyle = parent && getComputedStyle(parent);
+      // A column flex item sizes from its basis, not its height: flex-1 (basis 0%)
+      // would keep the expanded area at its old size. Only the vertical axis may
+      // change; a row child's basis/shrink would widen it and stop copy wrapping.
+      if (parentStyle?.display.includes('flex') && parentStyle.flexDirection.startsWith('column')) {
+        node.style.setProperty('flex-shrink', '0', 'important');
+        node.style.setProperty('flex-basis', 'auto', 'important');
+      }
+      expanded++;
+    }
+    if (style.position === 'fixed' || style.position === 'sticky') node.style.setProperty('position', 'static', 'important');
+  }
+  document.documentElement.style.setProperty('height', 'auto', 'important');
+  document.body.style.setProperty('height', 'auto', 'important');
+  const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+  return { expanded, height, tooLarge: height > maxHeight };
+}
+
+/**
+ * What Playwright's screenshot options animations: 'disabled' and caret: 'hide'
+ * do, for the scrolled tiles captured outside page.screenshot, applied in the
+ * document and every shadow root: finite animations jump to their end state,
+ * infinite ones return to their start, a paused one (playback rate zero) stays
+ * as it is, animations that start while the tiles are captured are handled the
+ * same way, and no text caret blinks into one tile and out of the next.
+ */
+export function freezeAnimations() {
+  const roots = [];
+  const collect = root => {
+    roots.push(root);
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    do { if (walker.currentNode.shadowRoot) collect(walker.currentNode.shadowRoot); } while (walker.nextNode());
+  };
+  collect(document);
+  const settle = root => {
+    for (const animation of root.getAnimations()) {
+      if (!animation.effect || animation.playbackRate === 0) continue;
+      try {
+        if (Number.isFinite(animation.effect.getComputedTiming().endTime)) animation.finish(); else animation.cancel();
+      } catch { /* An animation that refuses to finish or cancel stays as it is. */ }
+    }
+  };
+  for (const root of roots) {
+    settle(root);
+    root.addEventListener('transitionrun', () => settle(root));
+    root.addEventListener('animationstart', () => settle(root));
+    root.querySelectorAll('input,textarea,[contenteditable]').forEach(element => element.style.setProperty('caret-color', 'transparent', 'important'));
+  }
+}
+
+export function restrictBrowserTransports() {
+  const blocked = function () { throw new Error('External transports are unavailable in a read-only render.'); };
+  for (const key of ['RTCPeerConnection', 'webkitRTCPeerConnection', 'Worker', 'SharedWorker']) {
+    try { Object.defineProperty(globalThis, key, { value: blocked, writable: false, configurable: false }); } catch {}
+  }
+}
+
+/** Preserve each child frame's original viewport-sized layout while enlarging
+ * its capture box. Otherwise a 100vh child grows again on every iframe resize. */
+export function freezeFrameViewportSizes() {
+  const visit = root => {
+    for (const node of root.querySelectorAll('*')) {
+      const style = getComputedStyle(node);
+      if (style.display !== 'none') {
+        for (const key of ['height', 'min-height', 'max-height']) {
+          const value = style.getPropertyValue(key);
+          if (/^[0-9.]+px$/.test(value) && Number.parseFloat(value) > 0) node.style.setProperty(key, value, 'important');
+        }
+      }
+      if (node.shadowRoot) visit(node.shadowRoot);
+    }
+  };
+  visit(document);
+}
+
+export async function settleFrameImages() {
+  const images = [];
+  const collect = root => { for (const element of root.querySelectorAll('*')) {
+    if (element.tagName === 'IMG' && element.getAttribute('src')) images.push(element);
+    if (element.shadowRoot) collect(element.shadowRoot);
+  } };
+  collect(document);
+  return (await Promise.all(images.map(async image => {
+    image.loading = 'eager';
+    try { await image.decode(); return true; } catch { return false; }
+  }))).every(Boolean);
+}

package/dist/view-renderer/src/errors.js

@@ -0,0 +1,8 @@
+export class ViewRenderError extends Error {
+  constructor(code, message, status = 409) { super(message); this.name = 'ViewRenderError'; this.code = code; this.status = status; }
+}
+export function renderFailure(code = 'render_failed') {
+  // Browser/source errors may contain private content. Never return them before
+  // final authority revalidation, or log tokens/source/request arguments.
+  return new ViewRenderError(code, 'The view could not be rendered. Reopen its current link and try again.');
+}

package/dist/view-renderer/src/host.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
+import * as JSXRuntime from 'react/jsx-runtime';
+import { BlockNoteEditor } from '@blocknote/core';
+import { BlockNoteView } from '@blocknote/ariakit';
+import { useCreateBlockNote } from '@blocknote/react';
+import '@blocknote/core/fonts/inter.css';
+import '@blocknote/react/style.css';
+import '@blocknote/ariakit/style.css';
+import { getNotisBlockNoteEditorOptions, getDocumentEditorInitialContent, NOTIS_BLOCKNOTE_TABLE_OPTIONS } from '../../../portal/src/lib/blockNote';
+import { htmlWithViewerPolicy } from '../../../portal/src/lib/htmlFramePolicy';
+import { importBundleSource, resolveBundleRouteExport } from '../../sdk/src/bundleModule';
+import { SdkPresentation } from '../../sdk/src/presentation';
+import { createQueryClient } from '../../sdk/src/queryCache';
+import { Markdown } from '../../sdk/src/components/Markdown';
+import { useNotisRuntime } from '../../sdk/src/provider';
+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' };
+
+const state = { mounted: false, pending: 0, blocked: [] as string[], lastActivity: performance.now(), failed: false };
+// The Space runtime contract (packages/sdk/src/runtimeModules.ts): bundles import React and the SDK from these.
+Object.assign(window, { __notisRenderState: state, React, ReactDOM, ReactDOMClient, __ReactJSXRuntime: JSXRuntime,
+  __NotisSDK: NotisSDK, __NotisSDKUI: NotisSDKUI });
+NotisSDKUI.registerToolkitStyles(toolkitCss);
+let sequence = 0;
+let locale = 'en';
+const copy = { en: { body: 'Document body', unavailable: 'Record unavailable', opening: 'Opening record…', html: 'HTML document', view: 'View unavailable' },
+  fr: { body: 'Contenu du document', unavailable: 'Enregistrement indisponible', opening: 'Ouverture de l’enregistrement…', html: 'Document HTML', view: 'Vue indisponible' } };
+const text = key => copy[locale === 'fr' ? 'fr' : 'en'][key];
+const changed = () => { state.lastActivity = performance.now(); };
+function denied() {
+  const error = Object.assign(new Error('This operation is unavailable in a read-only render.'), { code: 'render_read_only' });
+  state.blocked.push(error.code); changed();
+  return Promise.reject(error);
+}
+window.addEventListener('unhandledrejection', event => { if (event.reason?.code === 'render_read_only') event.preventDefault(); else state.failed = true; });
+async function read(payload) {
+  state.pending++; changed();
+  try {
+    const response = await fetch('/__read', { method: 'POST', credentials: 'omit', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
+    const result = await response.json();
+    if (!response.ok) throw Object.assign(new Error(result.message || 'This read is unavailable.'), { code: result.error });
+    return result.result;
+  } finally { state.pending--; changed(); }
+}
+function useRead(payload) {
+  const key = JSON.stringify(payload);
+  const [loaded, setLoaded] = useState<{ key: string; value?: any; failed?: boolean }>();
+  useEffect(() => { let active = true; void read(payload).then(value => { if (active) setLoaded({ key, value }); })
+    .catch(() => { if (active) setLoaded({ key, failed: true }); }); return () => { active = false; }; }, [key]);
+  return loaded?.key === key ? loaded : {};
+}
+// A page's `properties` choice ({ include, exclude, order } by property name) picks and orders the rows it shows.
+function chosenFields(value, choice?) {
+  let fields = (Object.values(value.schema?.properties || {}) as any[]).filter(field => field.kind !== 'title');
+  if (!choice || typeof choice !== 'object') return fields;
+  if (Array.isArray(choice.include)) fields = fields.filter(field => choice.include.includes(field.name));
+  if (Array.isArray(choice.exclude)) fields = fields.filter(field => !choice.exclude.includes(field.name));
+  const order = Array.isArray(choice.order) ? choice.order : [];
+  const rank = field => (order.includes(field.name) ? order.indexOf(field.name) : order.length);
+  return fields.map((field, index) => ({ field, index })).sort((a, b) => rank(a.field) - rank(b.field) || a.index - b.index).map(item => item.field);
+}
+function PropertyList({ value, choice = undefined }: { value: any; choice?: any }) {
+  const fields = chosenFields(value, choice);
+  const text = (property: any) => {
+    if (!property) return '';
+    const item = property[property.type];
+    if (['rich_text', 'title', 'text'].includes(property.type)) return (property.rich_text || property.title || []).map(part => part.plain_text || part.text?.content || '').join('');
+    if (Array.isArray(item)) return item.map(value => value.name || value.url || value.external?.url || value.id || '').join(', ');
+    if (item && typeof item === 'object') return item.name || item.start || '';
+    return item == null ? '' : String(item);
+  };
+  // A long value (a URL) wraps inside the page instead of running past its edge.
+  return <dl>{fields.map(field => <div key={field.id}>
+    <dt>{field.name}</dt><dd style={{ overflowWrap: 'anywhere' }}>{text(value.document?.properties?.[field.name])}</dd>
+  </div>)}</dl>;
+}
+function ReadOnlyBlocks({ blocks }) {
+  // Pure snapshot editor: no collaboration provider/token/init or uploadFile.
+  const editor = useCreateBlockNote({ ...getNotisBlockNoteEditorOptions(),
+    initialContent: getDocumentEditorInitialContent(blocks, false), tables: NOTIS_BLOCKNOTE_TABLE_OPTIONS,
+    domAttributes: { editor: { 'aria-label': text('body') } },
+  }, [blocks]);
+  return <BlockNoteView editor={editor} editable={false} theme="light" />;
+}
+function DocumentEditor({ recordKey, variant = 'full', showProperties = true, className }) {
+  const loaded = useRead({ operation: 'record', record_key: recordKey });
+  if (!loaded.value) return <div role="status">{text(loaded.failed ? 'unavailable' : 'opening')}</div>;
+  const value = loaded.value;
+  if (value.document?.view_type === 'html') return <HtmlFrame recordKey={recordKey} className={className} />;
+  if (value.document?.view_type === 'report') return <ReportFrame recordKey={recordKey} className={className} />;
+  return <article className={className}>{variant === 'full' ? <h1>{value.document?.title}</h1> : null}
+    {showProperties ? <PropertyList value={value} /> : null}<ReadOnlyBlocks blocks={value.document?.content_blocknote} /></article>;
+}
+// DocumentPage as its read-only snapshot: no toolbar, live session or saves, but the Space's own header, properties
+// choice, slots and layout, so a render shows the page the Space draws. A layout receives the same five parts.
+function DocumentPage(props) {
+  // An explicit HTML viewer needs only the stored file, without a record-body read.
+  return props.viewer === 'html'
+    ? <HtmlFrame recordKey={props.recordKey} className={props.className} />
+    : <RecordDocumentPage {...props} />;
+}
+function RecordDocumentPage({ recordKey, className, header, meta, properties, aboveBody, belowBody, layout }) {
+  const loaded = useRead({ operation: 'record', record_key: recordKey });
+  if (!loaded.value) return <div role="status">{text(loaded.failed ? 'unavailable' : 'opening')}</div>;
+  const value = loaded.value;
+  if (value.document?.view_type === 'html') return <HtmlFrame recordKey={recordKey} className={className} />;
+  if (value.document?.view_type === 'report') return <ReportFrame recordKey={recordKey} className={className} />;
+  const showTitle = header !== false && header?.title !== false;
+  const parts = {
+    Toolbar: () => null,
+    Header: () => (showTitle ? <h1>{value.document?.title}</h1> : null),
+    Meta: () => null,
+    Properties: () => (properties === 'hidden' ? null : <PropertyList value={value} choice={properties} />),
+    Body: () => <ReadOnlyBlocks blocks={value.document?.content_blocknote} />,
+  };
+  if (typeof layout === 'function') return <div className={className}>{layout(parts)}</div>;
+  // Without a layout the properties sit in the meta strip's panel, which a page with `meta={false}` does not draw.
+  return <article className={className}><parts.Header />{meta === false ? null : <parts.Properties />}{aboveBody}<parts.Body />{belowBody}</article>;
+}
+function RecordProperties({ recordKey, className }) {
+  const loaded = useRead({ operation: 'record', record_key: recordKey });
+  return <div className={className}>{loaded.value ? <PropertyList value={loaded.value} /> : null}</div>;
+}
+function HtmlFrame(props) {
+  return props.html !== undefined
+    ? <HtmlValue html={props.html} title={props.title} className={props.className} onReady={props.onReady} />
+    : <HtmlRecord {...props} />;
+}
+function HtmlRecord({ recordKey, title, className, onReady }) {
+  const loaded = useRead({ operation: 'html', record_key: recordKey });
+  // As live, a record that cannot load is ready too, so a view waiting on it does not stay blank.
+  useEffect(() => { if (loaded.failed) onReady?.(); }, [loaded.failed]);
+  return loaded.value ? <HtmlValue html={loaded.value.html} title={title || loaded.value.title} className={className} onReady={onReady} /> : null;
+}
+// The live sandbox (HtmlDocumentFrame): the same flags and the same viewer CSP prepended to the HTML. As live, a
+// className sizes a box the frame fills (a 1920x1080 slide box); without one the frame keeps its full-page height.
+// onReady fires once per page after it loads; a preview takes no presenter input, so `presentation` changes nothing.
+function HtmlValue({ html, title, className, onReady }) {
+  const reported = React.useRef<string>(undefined);
+  const loaded = () => { if (reported.current === html) return; reported.current = html; onReady?.(); };
+  const frame = <iframe sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox" referrerPolicy="no-referrer"
+    title={title || text('html')} srcDoc={htmlWithViewerPolicy(html)} onLoad={loaded}
+    style={className ? { display: 'block', width: '100%', height: '100%', border: 0 } : { display: 'block', width: '100%', height: 900, border: 0 }} />;
+  return className ? <div className={className}>{frame}</div> : frame;
+}
+function ReportFrame({ recordKey, className }) {
+  const loaded = useRead({ operation: 'report', record_key: recordKey });
+  const [module, setModule] = useState<any>();
+  useEffect(() => { let active = true; if (loaded.value?.source) { state.pending++; changed();
+    void importBundleSource(loaded.value.source).then(value => {
+      if (!resolveBundleRouteExport(value, [loaded.value.export_name])) { state.failed = true; return; }
+      if (active) setModule(value);
+    }).catch(() => { state.failed = true; }).finally(() => { state.pending--; changed(); });
+  } return () => { active = false; }; }, [loaded.value]);
+  const View = module && loaded.value ? resolveBundleRouteExport(module, [loaded.value.export_name])?.component : null;
+  return <div className={className}>{loaded.value?.css ? <style>{loaded.value.css}</style> : null}{View ? <View /> : null}</div>;
+}
+
+async function start() {
+  const response = await fetch('/__snapshot', { credentials: 'omit' });
+  if (!response.ok) throw new Error('Render unavailable');
+  const snapshot = await response.json();
+  locale = snapshot.locale || 'en';
+  document.documentElement.lang = locale;
+  const authority = structuredClone(snapshot.descriptor.space);
+  const shown = {};
+  let activeMarkdown: string | null = null;
+  const runtime = {
+    ...snapshot.descriptor, databases: [], queryClient: createQueryClient({ maxEntries: 100 }),
+    context: { ...snapshot.descriptor.context, locale, params: Object.fromEntries(Object.entries(snapshot.params || {}).map(([key, value]) => [key, String(value)])), renderReadOnly: true },
+    listTools: denied, callTool: denied, request: denied,
+    // A view-params change only moves this render's own URL (a list opening its first item), never a write.
+    navigate: target => (target?.kind === 'view-params' ? Promise.resolve() : denied()),
+    async documentBody(request) {
+      if (request?.operation !== 'read') return denied();
+      state.pending++; changed();
+      try {
+        const value = await read({ operation: 'document_body', record_key: request.recordKey, binding: request.binding, read_action: request.readAction });
+        if (typeof value.content_markdown === 'string') return value; // Pure offline body fixtures, never a writable room.
+        const editor = BlockNoteEditor.create({ ...getNotisBlockNoteEditorOptions(), tables: NOTIS_BLOCKNOTE_TABLE_OPTIONS });
+        try { return { ...value, content_markdown: await editor.blocksToMarkdownLossy(value.content_blocknote) }; }
+        finally { editor._tiptapEditor.destroy(); }
+      } finally { state.pending--; changed(); }
+    },
+    handover: undefined, draftHandover: undefined, addContext: denied, updateContext: denied, removeContext: denied,
+    captureContextSelection() {}, registerTopBarSearch() {}, setTopBarSearchValue() {}, setTopBarSearchLoading() {},
+    publishActiveResource(value) { activeMarkdown = value?.snapshot?.format === 'markdown' && typeof value.snapshot.content === 'string' ? value.snapshot.content : null; },
+    // The document page renders as its read-only snapshot: no toolbar, live session or saves.
+    // A note opened with the HTML viewer shows its one stored HTML file, never the editor.
+    ui: { DocumentEditor, RecordProperties, HtmlFrame, ReportFrame, DocumentPage, ShareControl: () => null,
+      MarkdownEditor: ({ value }) => <Markdown value={value} /> },
+    callAction(id, inputs = {}) {
+      if (!Object.hasOwn(authority.actions, id) || authority.actions[id].readOnly !== true) return denied();
+      return read({ operation: 'action', action_id: id, inputs, request_id: String(++sequence) });
+    },
+    async shown(name, params, options = {}) {
+      const list = authority.shows?.[name];
+      if (!list || !('database' in list)) return denied();
+      const values = { ...(options.sorts ? { sorts: options.sorts } : {}), ...(options.pageSize ? { page_size: options.pageSize } : {}),
+        ...(options.offset ? { offset: options.offset } : {}), ...(options.includeContent ? { include_content: true } : {}) };
+      const result = await read({ operation: 'shown', name, params, options: values }); shown[name] = result; return result;
+    },
+    viewerRead: (name, input = {}) => read({ operation: 'viewer_read', name, input }),
+  };
+  const module = await importBundleSource(snapshot.source);
+  const view = resolveBundleRouteExport(module, ['SpaceView'], true);
+  if (!view) throw new Error('View unavailable');
+  Object.assign(window, { __notisRenderMarkdown: async () => {
+    if (snapshot.markdownExport) {
+      if (typeof module[snapshot.markdownExport] !== 'function') throw new Error('The declared Markdown export is unavailable.');
+      return await (module[snapshot.markdownExport] as any)({ params: snapshot.params, shown });
+    }
+    return activeMarkdown;
+  } });
+  // The page frames the view as the Portal's SpaceSurface does: html, body, the shadow host,
+  // its mount and the app root all fill the viewport height (constrainRuntimeAppFrame), so an
+  // h-full Space root reaches the bottom of the window instead of stopping at its content.
+  for (const element of [document.documentElement, document.body]) {
+    element.style.setProperty('height', '100%'); element.style.setProperty('min-height', '100vh'); element.style.setProperty('margin', '0');
+  }
+  const host = document.createElement('div'); host.style.cssText = 'height:100vh;min-height:100vh';
+  const shadow = host.attachShadow({ mode: 'open' });
+  const styles = document.createElement('style'); styles.textContent = (snapshot.hostCss || '') + '\n' + snapshot.css; shadow.appendChild(styles);
+  NotisSDKUI.adoptToolkitStyles(shadow);
+  const mount = document.createElement('div'); mount.style.cssText = 'height:100%;min-height:0'; shadow.appendChild(mount);
+  document.body.appendChild(host);
+  const controller = document.createElement('div'); document.body.appendChild(controller);
+  // Any page area the Space leaves uncovered shows the Space theme background, not the
+  // harness white: the Space tokens live in the shadow root, so read them from the app root.
+  const frame = () => {
+    const appRoot = mount.querySelector<HTMLElement>('[data-notis-app-root]');
+    if (!appRoot) return;
+    appRoot.style.setProperty('height', '100%');
+    const token = getComputedStyle(appRoot).getPropertyValue('--background').trim();
+    const colour = [`hsl(${token})`, token].find(value => token && CSS.supports('color', value));
+    for (const element of [document.documentElement, document.body]) if (colour) element.style.setProperty('background-color', colour);
+  };
+  ReactDOMClient.createRoot(controller).render(<SdkPresentation mount={mount} runtime={runtime as any} component={view.component}
+    shell={module.__AppShell as any} theme={{ mode: 'light', style: { colorScheme: 'light' } }} resetKey={snapshot.cacheKey}
+    fallback={() => <div role="alert">{text('view')}</div>} onError={() => { state.failed = true; }}
+    // A read of an action the Space does not hold (its grant is off) is refused as unavailable, as it is
+    // live, and the view shows its own error state; every other protocol error is a blocked attempt.
+    onProtocolError={error => { if ((error as any)?.code === 'notis_sdk_query:actionUnavailable') return; state.blocked.push('render_read_only'); changed(); }}
+    onCommit={mounted => { frame(); state.mounted = mounted; changed(); }} />);
+}
+void start().catch(() => { state.failed = true; });

package/dist/view-renderer/src/index.js

@@ -0,0 +1,4 @@
+export { renderView, RENDER_ORIGIN } from './renderer.js';
+export { createBrowserPool, browserEnvironment } from './pool.js';
+export { createRemoteRenderBroker } from './remote-broker.js';
+export { ViewRenderError } from './errors.js';