@notis_ai/cli 0.2.0-beta.191.1 → 0.2.0-beta.196.1

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,180 @@
+/** 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 };
+}
+
+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,173 @@
+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 { 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';
+
+const state = { mounted: false, pending: 0, blocked: [] as string[], lastActivity: performance.now(), failed: false };
+Object.assign(window, { __notisRenderState: state, React, ReactDOM, ReactDOMClient, __ReactJSXRuntime: JSXRuntime });
+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 : {};
+}
+function PropertyList({ value }) {
+  const fields = Object.values(value.schema?.properties || {}) as any[];
+  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);
+  };
+  return <dl>{fields.filter(field => field.kind !== 'title').map(field => <div key={field.id}>
+    <dt>{field.name}</dt><dd>{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>;
+}
+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} /> : <HtmlRecord {...props} />;
+}
+function HtmlRecord({ recordKey, title, className }) {
+  const loaded = useRead({ operation: 'html', record_key: recordKey });
+  return loaded.value ? <HtmlValue html={loaded.value.html} title={title || loaded.value.title} className={className} /> : null;
+}
+function HtmlValue({ html, title, className }) {
+  return <iframe sandbox="allow-scripts" referrerPolicy="no-referrer" title={title || text('html')} srcDoc={html} className={className} style={{ width: '100%', height: 900, border: 0 }} />;
+}
+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, navigate: 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.
+    ui: { DocumentEditor, RecordProperties, HtmlFrame, ReportFrame, ShareControl: () => null,
+      DocumentPage: ({ recordKey, className, header, properties }) => <DocumentEditor recordKey={recordKey} className={className}
+        variant={header === false ? 'body' : 'full'} showProperties={properties !== 'hidden'} />,
+      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;
+  } });
+  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);
+  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);
+  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; }}
+    onProtocolError={() => { state.blocked.push('render_read_only'); changed(); }}
+    onCommit={mounted => { 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';

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

@@ -0,0 +1,76 @@
+import { ViewRenderError } from './errors.js';
+
+export function browserEnvironment(environment = process.env) {
+  const names = ['PATH', 'HOME', 'TMPDIR', 'TEMP', 'TMP', 'LANG', 'SystemRoot', 'WINDIR', 'DISPLAY', 'XDG_RUNTIME_DIR'];
+  return Object.fromEntries(names.filter(name => typeof environment[name] === 'string').map(name => [name, environment[name]]));
+}
+
+/** A warm process, never a shared profile, cookie jar, localStorage or context. */
+export function createBrowserPool({ concurrency = 2, maxQueue = 8, launch = {}, chromium } = {}) {
+  if (!Number.isInteger(concurrency) || concurrency < 1 || concurrency > 4 || !Number.isInteger(maxQueue) || maxQueue < 0 || maxQueue > 32) throw new TypeError('Choose a bounded render pool.');
+  let browser, starting, closing = false, inUse = 0;
+  const queue = new Set();
+  const contexts = new Set();
+  async function acquire(signal) {
+    if (closing || signal?.aborted) throw new ViewRenderError('render_cancelled', 'The render was cancelled.', 499);
+    if (inUse < concurrency) { inUse++; return; }
+    if (queue.size >= maxQueue) throw new ViewRenderError('render_busy', 'The renderer is busy. Try again shortly.', 503);
+    await new Promise((resolve, reject) => {
+      const entry = { resolve: () => { signal?.removeEventListener('abort', abort); resolve(); }, reject };
+      const abort = () => { queue.delete(entry); reject(new ViewRenderError('render_cancelled', 'The render was cancelled.', 499)); };
+      queue.add(entry); signal?.addEventListener('abort', abort, { once: true });
+    });
+  }
+  function release() {
+    const next = queue.values().next().value;
+    if (next) { queue.delete(next); next.resolve(); }
+    else inUse--;
+  }
+  async function getBrowser() {
+    if (browser?.isConnected()) return browser;
+    if (!starting) starting = (async () => {
+      // Importing CLI command metadata never loads Playwright or starts Chrome.
+      const engine = chromium || (await import('playwright-core')).chromium;
+      const allowed = Object.fromEntries(['executablePath', 'channel', 'timeout'].filter(key => key in launch).map(key => [key, launch[key]]));
+      try {
+        browser = await engine.launch({ ...allowed, headless: true, chromiumSandbox: true,
+          env: browserEnvironment(), args: ['--force-webrtc-ip-handling-policy=disable_non_proxied_udp', '--disable-background-networking'] });
+      } catch (error) {
+        if (/Executable doesn't exist/.test(String(error?.message))) throw new ViewRenderError('render_browser_missing', 'Install the pinned Chromium browser with npx playwright-core@1.63.0 install chromium.', 503);
+        throw new ViewRenderError('render_browser_unavailable', 'Sandboxed Chromium could not start.', 503);
+      }
+      return browser;
+    })().finally(() => { starting = undefined; });
+    return starting;
+  }
+  return {
+    warm: () => getBrowser(),
+    async use(operation, { signal, width = 1440, locale = 'en', timezone = 'UTC' } = {}) {
+      await acquire(signal);
+      let context;
+      const abort = () => { void context?.close(); };
+      try {
+        const browser = await getBrowser();
+        if (closing || signal?.aborted) throw new ViewRenderError('render_cancelled', 'The render was cancelled.', 499);
+        context = await browser.newContext({ viewport: { width, height: 900 }, deviceScaleFactor: 1,
+          locale, timezoneId: timezone, colorScheme: 'light', serviceWorkers: 'block', acceptDownloads: false, permissions: [] });
+        contexts.add(context); signal?.addEventListener('abort', abort, { once: true });
+        if (signal?.aborted) throw new ViewRenderError('render_cancelled', 'The render was cancelled.', 499);
+        return await operation(context);
+      } finally {
+        signal?.removeEventListener('abort', abort);
+        if (context) { contexts.delete(context); await context.close().catch(() => {}); }
+        release();
+      }
+    },
+    async close() {
+      closing = true;
+      for (const entry of queue) entry.reject(new ViewRenderError('render_cancelled', 'The renderer is stopping.', 503));
+      queue.clear();
+      await Promise.allSettled([...contexts].map(context => context.close()));
+      if (starting) await starting.catch(() => {});
+      await browser?.close();
+    },
+    stats: () => ({ active: inUse, queued: queue.size, contexts: contexts.size, warm: Boolean(browser?.isConnected()) }),
+  };
+}

package/dist/view-renderer/src/remote-broker.js

@@ -0,0 +1,59 @@
+import { ViewRenderError } from './errors.js';
+
+/** The purpose credential never enters request URLs, browser headers or source. */
+export function createRemoteRenderBroker({ apiBase, credential, fetcher = fetch }) {
+  const base = new URL(apiBase);
+  if (!['https:', 'http:'].includes(base.protocol) || (base.protocol === 'http:' && !['127.0.0.1', 'localhost', '[::1]'].includes(base.hostname))
+    || base.username || base.password || base.search || base.hash || typeof credential !== 'string' || !credential) throw new TypeError('Use a configured render API and its purpose credential.');
+  let claims;
+  try { claims = JSON.parse(Buffer.from(credential.split('.')[1], 'base64url').toString('utf8')); } catch {}
+  // This is rejection/identity checking only. Python performs cryptographic
+  // authentication and live authorization before returning any data.
+  if (claims?.type !== 'notis_view_render' || claims?.aud !== 'notis-view-render' || claims?.read_only !== true
+    || !claims?.jti || !claims?.target || typeof claims.url !== 'string') throw new ViewRenderError('render_credential_invalid', 'Use a dedicated read-only render credential, never a user JWT.', 401);
+  if (!Array.isArray(claims.outputs) || !claims.outputs.length || claims.outputs.some(value => !['markdown', 'screenshot'].includes(value))
+    || new Set(claims.outputs).size !== claims.outputs.length || ![390, 1440].includes(claims.width)) {
+    throw new ViewRenderError('render_credential_invalid', 'This credential does not pin render outputs.', 401);
+  }
+  const stable = value => JSON.stringify(value, (_key, item) => item && typeof item === 'object' && !Array.isArray(item)
+    ? Object.fromEntries(Object.keys(item).sort().map(key => [key, item[key]])) : item);
+  const endpoint = path => new URL(`portal_view_render/${path}`, base.href.replace(/\/?$/, '/')).href;
+  async function request(operation, body, { signal } = {}) {
+    const response = await fetcher(endpoint(operation), { method: 'POST', redirect: 'error', credentials: 'omit', signal,
+      headers: { Authorization: `Bearer ${credential}`, 'Content-Type': 'application/json', 'X-Notis-Spaces-Protocol': '1' },
+      body: JSON.stringify(body) });
+    let result;
+    try { result = await response.json(); } catch { throw new ViewRenderError('render_broker_unavailable', 'The render read could not be confirmed.', 503); }
+    if (!response.ok) throw new ViewRenderError(typeof result?.error === 'string' ? result.error : 'render_unavailable', 'This view is unavailable for rendering.', response.status);
+    return result;
+  }
+  return Object.freeze({
+    snapshot: async options => {
+      const value = await request('read', { operation: 'manifest' }, options);
+      if (value?.url !== claims.url || value?.view?.space_id !== claims.target.space_id || value.view.revision !== claims.target.revision
+        || (value.record_key || null) !== (claims.target.record_key || null) || stable(value.params) !== stable(claims.target.params)
+        || value.descriptor?.space?.id !== claims.target.space_id || value.descriptor.space.revision !== claims.target.revision
+        || value.descriptor?.resource?.id !== claims.target.space_id || value.descriptor.resource.revision !== claims.target.revision
+        || stable(value.render_options) !== stable({ outputs: claims.outputs, width: claims.width })) {
+        throw new ViewRenderError('render_manifest_invalid', 'The render manifest belongs to another view.', 502);
+      }
+      return value;
+    },
+    read: (payload, options) => request('read', payload, options),
+    finish: async options => {
+      const value = await request('finish', {}, options);
+      if (value?.valid !== true || value.render_id !== claims.jti || value.url !== claims.url) {
+        throw new ViewRenderError('render_access_changed', 'The final render authority is not confirmed.', 403);
+      }
+      return value;
+    },
+    complete: async (rendered, options) => {
+      const value = await request('complete', { rendered }, options);
+      if (value?.valid !== true || value.render_id !== claims.jti || value.url !== claims.url) {
+        throw new ViewRenderError('render_capture_unconfirmed', 'The completed capture could not be recorded.', 409);
+      }
+      // Attestation/receipts remain backend-only even if an endpoint regresses.
+      return { valid: true, render_id: value.render_id, url: value.url };
+    },
+  });
+}