@notis_ai/cli 0.2.17 → 0.2.19

package/{template/packages → dist}/sdk/src/components/Markdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { AnchorHTMLAttributes, ReactElement } from 'react';
+import type { AnchorHTMLAttributes, ReactElement, TableHTMLAttributes } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -32,14 +32,20 @@ function MarkdownLink({
   );
 }
 
+/** A table in a scroll box of its own, so a wide table scrolls sideways on a phone instead of the page (C17). */
+function MarkdownTable({ node: _node, ...rest }: TableHTMLAttributes<HTMLTableElement> & { node?: unknown }) {
+  return <div className="notis-markdown-table"><table {...rest} /></div>;
+}
+
 const defaultComponents: Components = {
   a: MarkdownLink,
+  table: MarkdownTable,
 };
 
 /**
  * Renders a markdown value with Notis typography. Markdown is a value type:
- * use this anywhere markdown appears — document content, database fields,
- * generated text. Styling comes from `.notis-markdown` rules in the SDK
+ * use this anywhere markdown appears (document content, database fields,
+ * generated text). Styling comes from `.notis-markdown` rules in the SDK
  * stylesheet and follows the portal theme variables.
  */
 export function Markdown({ value, size = 'base', className, components }: MarkdownProps): ReactElement {

package/{template/packages → dist}/sdk/src/components/MarkdownEditor.tsx

@@ -1,20 +1,39 @@
-import type { ChangeEvent, KeyboardEvent, ReactElement } from 'react';
+import type { ChangeEvent, CSSProperties, KeyboardEvent, ReactElement } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNotisRuntime } from '../provider';
 import type { NotisMarkdownEditorProps } from '../runtime';
+import { pick, type Words } from '../words/types';
+
+/** The words of the fallback Markdown editor, in English and French (C9). */
+export const MARKDOWN_EDITOR_WORDS = Object.freeze({
+  placeholder: { en: 'Write in Markdown', fr: 'Écris en Markdown' },
+}) satisfies Readonly<Record<string, Words>>;
+
+const editableStyle: CSSProperties = {
+  minHeight: 360, width: '100%', resize: 'vertical', boxSizing: 'border-box', padding: '12px 16px', borderRadius: 8,
+  border: '1px solid hsl(var(--border))', background: 'hsl(var(--background))', color: 'hsl(var(--foreground))',
+  font: 'inherit', fontSize: 14, lineHeight: '22px',
+};
+
+// Read-only reads as text, not a field (C9): no border, no resize, no caret, a muted tint.
+const readOnlyStyle: CSSProperties = {
+  ...editableStyle, resize: 'none', border: '1px solid transparent', background: 'hsl(var(--muted) / .4)',
+  cursor: 'default', outline: 'none',
+};
 
 function MarkdownEditorFallback({
   value,
   revision,
   readOnly,
   autosaveMs = 1500,
-  placeholder = 'Write in Markdown…',
+  placeholder,
   className,
   onChange,
   onSave,
   onDirtyChange,
   onSavingChange,
 }: NotisMarkdownEditorProps) {
+  const locale = useNotisRuntime()?.context?.locale === 'fr' ? 'fr' : 'en';
   const [draft, setDraft] = useState(value);
   const [saveAttempt, setSaveAttempt] = useState(0);
   const draftRef = useRef(value);
@@ -102,16 +121,18 @@ function MarkdownEditorFallback({
     <textarea
       value={draft}
       readOnly={readOnly}
-      placeholder={placeholder}
+      aria-readonly={readOnly || undefined}
+      data-readonly={readOnly ? '' : undefined}
+      placeholder={readOnly ? undefined : placeholder ?? pick(MARKDOWN_EDITOR_WORDS.placeholder, locale)}
       className={className}
       onChange={handleChange}
       onKeyDown={handleKeyDown}
-      style={{ minHeight: 360, width: '100%', resize: 'vertical' }}
+      style={readOnly ? readOnlyStyle : editableStyle}
     />
   );
 }
 
-/** Use Notis' editor while leaving persistence entirely under app control. */
+/** Use Notis' editor while leaving persistence entirely under app control; outside Notis a plain EN/FR textarea stands in. */
 export function MarkdownEditor(props: NotisMarkdownEditorProps): ReactElement {
   const runtime = useNotisRuntime();
   const HostEditor = runtime?.ui?.MarkdownEditor;

package/{template/packages → dist}/sdk/src/components/MultiSelectActionBar.tsx

@@ -1,17 +1,27 @@
 'use client';
 
 import React, {
+  useEffect,
   useMemo,
+  useRef,
   useState,
   type CSSProperties,
   type ReactElement,
 } from 'react';
 import type { ResolvedCollectionAction } from '../interactions/actions';
-import { shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import { activateShortcutCollection, shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import { isInteractionElementVisible } from '../interactions/visibility';
 import type { ShortcutScope } from '../interactions/shortcuts';
 
 export type MultiSelectAction = ResolvedCollectionAction;
 
+/** The Portal owns global launcher positioning; app code only reports its own bar. */
+export const BULK_ACTION_LAYOUT_EVENT = 'notis:bulk-actions-layout';
+export interface BulkActionLayoutDetail {
+  bar: HTMLElement;
+  active: boolean;
+}
+
 export interface MultiSelectActionBarProps {
   selectedCount: number;
   actions: MultiSelectAction[];
@@ -25,11 +35,14 @@ export interface MultiSelectActionBarProps {
   shortcutsEnabled?: boolean;
   /** Override the default collection shortcut scope. */
   shortcutScope?: ShortcutScope;
+  collectionOwnerId?: string;
+  isAvailable?: () => boolean;
+  onClearSelection?: () => void;
 }
 
 const containerBaseStyle: CSSProperties = {
   position: 'fixed',
-  bottom: '1rem',
+  bottom: 'calc(var(--notis-viewport-bottom, 0px) + max(1rem, var(--notis-safe-area-bottom, env(safe-area-inset-bottom, 0px))))',
   left: '50%',
   transform: 'translateX(-50%)',
   zIndex: 60,
@@ -46,6 +59,8 @@ const containerBaseStyle: CSSProperties = {
   pointerEvents: 'auto',
   fontSize: '13px',
   lineHeight: 1.2,
+  width: 'max-content',
+  maxWidth: 'calc(100% - 2rem)',
 };
 
 const countStyle: CSSProperties = {
@@ -103,7 +118,7 @@ const iconSlotStyle: CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  opacity: 0.8,
+  color: 'inherit',
 };
 
 export function MultiSelectActionBar({
@@ -114,15 +129,55 @@ export function MultiSelectActionBar({
   style,
   shortcutsEnabled = true,
   shortcutScope = 'collection',
+  collectionOwnerId,
+  isAvailable,
+  onClearSelection,
 }: MultiSelectActionBarProps): ReactElement | null {
+  const barRef = useRef<HTMLDivElement>(null);
+  const visible = selectedCount > 0;
+  useEffect(() => {
+    const bar = barRef.current;
+    if (!visible || !bar) return;
+    // Notify the owning document, including from a shadow root or after unmount.
+    // Only the Portal host may measure this bar and change global layout styles.
+    const report = (active: boolean) => {
+      const owner = bar.ownerDocument;
+      const LayoutEvent = owner.defaultView?.CustomEvent;
+      if (LayoutEvent) {
+        owner.dispatchEvent(new LayoutEvent<BulkActionLayoutDetail>(BULK_ACTION_LAYOUT_EVENT, {
+          detail: { bar, active },
+        }));
+      }
+    };
+    const update = () => report(isAvailable?.() !== false && isInteractionElementVisible(bar));
+    update();
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
+    observer?.observe(bar);
+    const VisibilityObserver = bar.ownerDocument.defaultView?.MutationObserver;
+    const visibilityObserver = VisibilityObserver ? new VisibilityObserver(update) : null;
+    let element: Element | null = bar;
+    while (element) {
+      visibilityObserver?.observe(element, { attributes: true, attributeFilter: element === bar.ownerDocument.documentElement ? ['hidden', 'inert', 'aria-hidden', 'class'] : ['hidden', 'inert', 'aria-hidden', 'style', 'class'] });
+      const root: Node = element.getRootNode();
+      element = element.parentElement ?? ('host' in root ? (root as ShadowRoot).host : null);
+    }
+    return () => {
+      observer?.disconnect();
+      visibilityObserver?.disconnect();
+      report(false);
+    };
+  }, [isAvailable, visible]);
+
   const actionShortcuts = useMemo<ShortcutDefinition[]>(() => {
     return actions.flatMap((action): ShortcutDefinition[] => {
-        if (!action.shortcut || action.disabled || action.pending) return [];
+        if (!action.shortcut) return [];
         return [{
           id: `collection.action.${action.id}`,
           keys: action.shortcut,
           label: action.label,
-          onTrigger: () => action.onRun(),
+          allowRepeat: Boolean(action.disabled || action.pending),
+          // Keep advertised keys owned while disabled/pending; never fall through to another action.
+          onTrigger: () => { if (!action.disabled && !action.pending) action.onRun(); },
         }];
       });
   }, [actions]);
@@ -130,6 +185,8 @@ export function MultiSelectActionBar({
     enabled: shortcutsEnabled && selectedCount > 0,
     scope: shortcutScope,
     priority: 25,
+    collectionOwnerId,
+    isAvailable: () => isAvailable?.() !== false && isInteractionElementVisible(barRef.current),
   });
 
   if (selectedCount === 0) return null;
@@ -147,16 +204,42 @@ export function MultiSelectActionBar({
 
   return (
     <div
+      ref={barRef}
+      data-notis-bulk-actions
+      onFocusCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onMouseDownCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !shortcutsEnabled || !onClearSelection || isAvailable?.() === false) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClearSelection();
+      }}
       role="toolbar"
       aria-label={`Bulk actions for ${selectedCount} selected ${countWord}`}
       className={className}
       style={composedStyle}
     >
-      <span style={countStyle}>{countLabel}</span>
-      {actions.length > 0 ? <span aria-hidden style={dividerStyle} /> : null}
-      {actions.map((action) => (
-        <ActionButton key={action.id} action={action} />
-      ))}
+      <style>{`
+        [data-notis-bulk-action-icon][data-has-shortcut] { display: none !important; }
+        @media (max-width: 639px) {
+          [data-notis-bulk-actions] { flex-wrap: wrap; width: calc(100% - 2rem) !important; }
+          [data-notis-bulk-count] { flex-basis: 100%; padding: 0.375rem 0.5rem !important; font-size: 14px !important; }
+          [data-notis-bulk-divider] { display: none; }
+          [data-notis-bulk-action-list] { width: 100%; }
+          [data-notis-bulk-actions] button { min-height: 48px; font-size: 16px !important; }
+        }
+        @media (hover: none) and (pointer: coarse) {
+          [data-notis-bulk-actions] kbd { display: none !important; }
+          [data-notis-bulk-action-icon][data-has-shortcut] { display: inline-flex !important; }
+        }
+      `}</style>
+      <span data-notis-bulk-count style={countStyle}>{countLabel}</span>
+      {actions.length > 0 ? <span data-notis-bulk-divider aria-hidden style={dividerStyle} /> : null}
+      <div data-notis-bulk-action-list style={{ display: 'flex', minWidth: 0, overflowX: 'auto', overscrollBehaviorX: 'contain', gap: '0.25rem' }}>
+        {actions.map((action) => (
+          <ActionButton key={action.id} action={action} />
+        ))}
+      </div>
     </div>
   );
 }
@@ -192,8 +275,8 @@ function ActionButton({ action }: { action: MultiSelectAction }) {
       onBlur={() => setHover(false)}
       style={buttonStyle}
     >
-      {!action.shortcut && action.icon ? (
-        <span aria-hidden style={iconSlotStyle}>{action.icon}</span>
+      {action.icon ? (
+        <span data-notis-bulk-action-icon data-has-shortcut={action.shortcut ? '' : undefined} aria-hidden style={iconSlotStyle}>{action.icon}</span>
       ) : null}
       {display ? <kbd aria-hidden style={keycapStyle}>{display}</kbd> : null}
       <span>{action.pending ? `${action.label}…` : action.label}</span>

package/{template/packages → dist}/sdk/src/components/MultiSelectCheckbox.tsx

@@ -23,7 +23,9 @@ const baseStyle: CSSProperties = {
   width: '16px',
   height: '16px',
   borderRadius: '4px',
-  border: '1px solid hsl(var(--border))',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'hsl(var(--border))',
   background: 'transparent',
   color: 'hsl(var(--primary-foreground))',
   cursor: 'pointer',
@@ -56,7 +58,7 @@ export function MultiSelectCheckbox({
   };
 
   // When alwaysVisible is false and the row isn't selected, defer the
-  // hover-reveal to the parent — consumers wrap the checkbox in a `.group`
+  // hover-reveal to the parent: consumers wrap the checkbox in a `.group`
   // hover scope and pass `data-notis-hover-reveal` styles via className.
   // Out of the box, we render the checkbox at full opacity if selected,
   // otherwise inherit the parent's reveal state.

package/dist/sdk/src/components/NotisCommentBoundary.tsx

@@ -0,0 +1,172 @@
+'use client';
+import React, { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import type { ContextResource } from '../runtime';
+import { NotisSelectionBoundary } from './NotisSelectionBoundary';
+import { useAgentContext } from '../hooks/useAgentContext';
+
+export interface NotisCommentBoxProps {
+  quote?: string;
+  value: string;
+  onChange(value: string): void;
+  onSubmit(): void;
+  onCancel(): void;
+  pending?: boolean;
+  error?: string;
+  className?: string;
+}
+
+/** Compact, chrome-themed presentation. Apps retain ownership of comment state. */
+export function NotisCommentBox({ quote, value, onChange, onSubmit, onCancel, pending, error, className = '' }: NotisCommentBoxProps) {
+  return <div data-notis-comment-ui role="dialog" aria-label="Comment on selection"
+    style={{ colorScheme: 'dark', background: 'hsl(var(--sidebar-background, 0 0% 7.5%))', color: 'hsl(var(--sidebar-foreground, 240 4.8% 95.9%))', borderColor: 'hsl(var(--sidebar-border, 0 0% 23.5%))' }}
+    className={`flex min-w-0 flex-col gap-2 rounded-xl border p-2.5 text-sm shadow-lg ${className}`}>
+    <div className="flex min-w-0 items-center gap-2">
+      {quote && <blockquote title={quote} className="min-w-0 flex-1 truncate border-l-2 border-current/40 pl-2 opacity-70">{quote}</blockquote>}
+      <button type="button" aria-label="Cancel comment" onClick={onCancel} disabled={pending} className="ml-auto flex size-7 shrink-0 items-center justify-center rounded-lg opacity-70 hover:bg-white/10 hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-40 [@media(pointer:coarse)]:size-9">
+        <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="m6 6 12 12M18 6 6 18" /></svg>
+      </button>
+    </div>
+    <textarea autoFocus rows={2} name="selection-comment" aria-label="Your comment" placeholder="Add a comment…" value={value} onChange={event => onChange(event.target.value)} disabled={pending}
+      onKeyDown={event => { if (event.nativeEvent.isComposing || pending) return; if (event.key === 'Escape') { event.preventDefault(); onCancel(); } if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); if (value.trim()) onSubmit(); } }}
+      className="w-full min-w-0 resize-none rounded bg-transparent px-0.5 py-1 text-base text-inherit outline-none placeholder:text-current placeholder:opacity-60 sm:text-sm" />
+    {error && <p role="alert" className="text-sm text-red-300">{error}</p>}
+    <div className="flex items-center justify-between gap-3">
+      <span className="text-xs opacity-60">⌘ / Ctrl ↵ to add</span>
+      <button type="button" disabled={pending || !value.trim()} onClick={onSubmit}
+        style={{ background: 'hsl(var(--sidebar-foreground, 240 4.8% 95.9%))', color: 'hsl(var(--sidebar-background, 0 0% 7.5%))' }}
+        className="min-h-8 shrink-0 rounded-lg px-2.5 text-sm font-medium hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-40 [@media(pointer:coarse)]:min-h-9">{pending ? 'Adding…' : 'Add to chat'}</button>
+    </div>
+  </div>;
+}
+
+export interface NotisCommentBoundaryProps {
+  resource?: ContextResource | null;
+  children: ReactNode;
+  className?: string;
+  commentClassName?: string;
+  /** Replace the optional standard editor while retaining selection/context behavior. */
+  renderComment?: (props: NotisCommentBoxProps) => ReactNode;
+}
+
+type SelectionRect = Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom'>;
+
+/** Place the tile after the final selected line, otherwise below (or above near the viewport bottom). */
+export function getCommentActionPosition(rects: SelectionRect[], viewport: { width: number; height: number }, rightBoundary = viewport.width, trailing: SelectionRect[] = []) {
+  const last = rects[rects.length - 1];
+  const size = 32, gap = 8;
+  const clampX = (x: number) => Math.max(gap, Math.min(viewport.width - size - gap, x));
+  const clampY = (y: number) => Math.max(gap, Math.min(viewport.height - size - gap, y));
+  const beside = { left: last.right + gap, top: clampY((last.top + last.bottom - size) / 2) };
+  const overlapsText = trailing.some(rect => rect.left < beside.left + size && rect.right > beside.left && rect.top < beside.top + size && rect.bottom > beside.top);
+  if (beside.left + size <= Math.min(viewport.width, rightBoundary) - gap && !overlapsText) return beside;
+  return { left: clampX(last.right - size), top: clampY(last.bottom + gap + size <= viewport.height - gap ? last.bottom + gap : last.top - size - gap) };
+}
+
+/** Browser paragraph selection may include an adjacent block's empty starting boundary. */
+export function getOwnedCommentRange(selected: Range, content: Element): Range | null {
+  const owned = content.ownerDocument.createRange();
+  owned.selectNodeContents(content);
+  const range = selected.cloneRange();
+  // Only clip whitespace outside the resource; actual neighboring content must
+  // never be silently attached to this resource's comment.
+  if (range.compareBoundaryPoints(Range.START_TO_START, owned) < 0) {
+    const before = range.cloneRange();
+    before.setEnd(owned.startContainer, owned.startOffset);
+    if (before.toString().trim()) return null;
+    range.setStart(owned.startContainer, owned.startOffset);
+  }
+  if (range.compareBoundaryPoints(Range.END_TO_END, owned) > 0) {
+    const after = range.cloneRange();
+    after.setStart(owned.endContainer, owned.endOffset);
+    if (after.toString().trim()) return null;
+    range.setEnd(owned.endContainer, owned.endOffset);
+  }
+  if (range.collapsed || !content.contains(range.startContainer) || !content.contains(range.endContainer)) return null;
+  return range;
+}
+
+/** Selection-to-chat convenience. No annotation database, polling or background attachment. */
+export function NotisCommentBoundary({ resource, children, className, commentClassName, renderComment }: NotisCommentBoundaryProps) {
+  const context = useAgentContext();
+  const root = useRef<HTMLDivElement>(null);
+  const [selection, setSelection] = useState<{ id: string; text: string; resource?: ContextResource | null; top: number; left: number } | null>(null);
+  const [editing, setEditing] = useState(false);
+  const editingRef = useRef(false);
+  const [comment, setComment] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    const node = root.current;
+    if (!node) return;
+    const document = node.ownerDocument;
+    const scope = node.getRootNode() as ShadowRoot & { getSelection?: () => Selection | null };
+    const clearInvalidSelection = () => {
+      // Opening the editor focuses its input and collapses the browser range.
+      // Keep the captured quote/editor; only the unopened action follows live selection.
+      if (editingRef.current) return;
+      const selected = scope.getSelection?.() || document.defaultView?.getSelection();
+      const content = node.firstElementChild;
+      if (!selected?.rangeCount || selected.isCollapsed || !selected.toString().trim()
+        || !content || !getOwnedCommentRange(selected.getRangeAt(0), content)) setSelection(null);
+    };
+    document.addEventListener('selectionchange', clearInvalidSelection);
+    if (scope !== (document as unknown as ShadowRoot)) scope.addEventListener('selectionchange', clearInvalidSelection);
+    return () => {
+      document.removeEventListener('selectionchange', clearInvalidSelection);
+      if (scope !== (document as unknown as ShadowRoot)) scope.removeEventListener('selectionchange', clearInvalidSelection);
+    };
+  }, []);
+  const open = () => { editingRef.current = true; setEditing(true); };
+  const capture = (target: EventTarget | null) => {
+    // Clicking the action/editor must not unmount it before its click runs.
+    if (editing || (target instanceof Element && target.closest('[data-notis-comment-ui]'))) return;
+    const node = root.current;
+    const scope = node?.getRootNode() as ShadowRoot & { getSelection?: () => Selection | null };
+    const selected = scope?.getSelection?.() || window.getSelection();
+    if (!node || !selected?.rangeCount || selected.isCollapsed) { setSelection(null); return; }
+    const content = node.firstElementChild;
+    const range = content ? getOwnedCommentRange(selected.getRangeAt(0), content) : null;
+    if (!range) { setSelection(null); return; }
+    const start = range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer as Element : range.startContainer.parentElement;
+    const end = range.endContainer.nodeType === Node.ELEMENT_NODE ? range.endContainer as Element : range.endContainer.parentElement;
+    if (!node.contains(range.startContainer) || !node.contains(range.endContainer)
+      || start?.closest('input,textarea,button,[contenteditable],[data-notis-comment-ui]')
+      || end?.closest('input,textarea,button,[contenteditable],[data-notis-comment-ui]')) { setSelection(null); return; }
+    const rect = range.getBoundingClientRect();
+    const lines = Array.from(range.getClientRects?.() || []).filter(line => line.width > 0 && line.height > 0);
+    const boundary = node.firstElementChild?.getBoundingClientRect();
+    const trailing: DOMRect[] = [];
+    const endBlock = end?.closest('p,li,h1,h2,h3,h4,h5,h6,td,th,div');
+    if (endBlock && node.contains(endBlock)) {
+      const remainder = range.cloneRange();
+      remainder.selectNodeContents(endBlock);
+      remainder.setStart(range.endContainer, range.endOffset);
+      trailing.push(...Array.from(remainder.getClientRects?.() || []).filter(line => line.width > 0 && line.height > 0));
+    }
+    const position = getCommentActionPosition(lines.length ? lines : [rect], { width: window.innerWidth, height: window.innerHeight }, boundary?.width ? boundary.right : window.innerWidth, trailing);
+    setSelection({ id: crypto.randomUUID(), text: selected.toString().trim(), resource: resource ? JSON.parse(JSON.stringify(resource)) : null, ...position });
+  };
+  const close = () => { editingRef.current = false; setEditing(false); setSelection(null); setComment(''); setError(''); };
+  const submit = async () => {
+    if (!selection || !comment.trim() || pending) return;
+    setPending(true); setError('');
+    try {
+      const added = await context.add({ id: selection.id, kind: 'comment', title: selection.resource?.label || 'Comment', icon: 'phosphor:chat-text', text: selection.text, comment, resource: selection.resource });
+      if (!added) throw new Error('The comment could not be added to chat.');
+      close();
+    } catch (reason) { setError(reason instanceof Error ? reason.message : 'Could not add this comment.'); }
+    finally { setPending(false); }
+  };
+  const editorProps: NotisCommentBoxProps = { quote: selection?.text, value: comment, onChange: setComment, onSubmit: () => void submit(), onCancel: close, pending, error, className: commentClassName };
+  return <div ref={root} className="contents" onMouseUp={event => capture(event.target)} onDoubleClick={event => capture(event.target)} onKeyUp={event => { if (!editing && (event.shiftKey || event.key === 'Shift' || ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'a'))) capture(event.target); }}>
+    <NotisSelectionBoundary resource={resource} className={className} style={className ? undefined : { display: 'contents' }}>{children}</NotisSelectionBoundary>
+    {selection && <div data-notis-comment-ui className="fixed z-50 max-h-[calc(100dvh-1rem)]" style={{ overflow: editing ? 'auto' : 'visible', top: editing ? Math.min(selection.top, Math.max(8, window.innerHeight - 320)) : selection.top, left: `clamp(8px, ${selection.left}px, calc(100vw - ${editing ? 'min(20rem, calc(100vw - 1rem))' : '2rem'} - 8px))`, width: editing ? 'min(20rem, calc(100vw - 1rem))' : undefined } as CSSProperties}>
+      {editing ? (renderComment ? renderComment(editorProps) : <NotisCommentBox {...editorProps} />) : <button type="button" aria-label="Comment" title="Comment" onMouseDown={event => event.preventDefault()} onClick={open}
+        style={{ background: 'hsl(var(--sidebar-background, 0 0% 7.5%))', color: 'hsl(var(--sidebar-foreground, 240 4.8% 95.9%))' }}
+        className="relative flex size-8 items-center justify-center rounded-lg ring-1 ring-white/15 hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current">
+        <svg aria-hidden="true" width="18" height="18" viewBox="0 0 256 256" fill="currentColor"><path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78l.09-.07L83,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H80a8,8,0,0,0-5.23,1.95L40,224V64H216ZM88,112a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,112Zm0,32a8,8,0,0,1,8-8h64a8,8,0,1,1,0,16H96A8,8,0,0,1,88,144Z" /></svg>
+        <span aria-hidden="true" className="absolute left-1/2 top-1/2 hidden size-12 -translate-x-1/2 -translate-y-1/2 [@media(pointer:coarse)]:block" />
+      </button>}
+    </div>}
+  </div>;
+}

package/{template/packages → dist}/sdk/src/components/NotisSelectionBoundary.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ClipboardEvent, ReactNode } from 'react';
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useNotisRuntime } from '../provider';
 import type { ContextResource, ContextSelection } from '../runtime';
 
@@ -31,10 +31,13 @@ export function NotisSelectionBoundary({
 }: NotisSelectionBoundaryProps) {
   const runtime = useNotisRuntime();
   const onCopy = useCallback((event: ClipboardEvent<HTMLDivElement>) => {
-    const selection = window.getSelection();
-    const text = selection?.toString().trim() ?? '';
+    const target = event.target as Element | null;
+    if (target?.closest?.('input,textarea,[contenteditable="true"]')) return;
+    const scope = event.currentTarget.getRootNode() as ShadowRoot & { getSelection?: () => Selection | null };
+    const selection = scope?.getSelection?.() || window.getSelection();
+    const text = selection?.toString() ?? '';
     if (
-      !text
+      !text.trim()
       || !selection
       || !event.currentTarget.contains(selection.anchorNode)
       || !event.currentTarget.contains(selection.focusNode)
@@ -42,7 +45,8 @@ export function NotisSelectionBoundary({
 
     const payload: ContextSelection = {
       id: selectionId(),
-      text: text.slice(0, 12_000),
+      text,
+      ...(runtime?.contextSource ? { source: runtime.contextSource } : {}),
       ...(resource ? { resource: { ...resource, snapshot: undefined } } : {}),
     };
     event.clipboardData.setData('text/plain', text);

package/dist/sdk/src/components/RecordComponents.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import type { ReactElement } from 'react';
+import { useNotisRuntime } from '../provider';
+import type {
+  NotisHtmlFrameProps, NotisRecordPropertiesProps, NotisReportFrameProps, NotisShareControlProps, NotisSpacePageFrameProps,
+} from '../runtime';
+import { pick, type Locale, type Words } from '../words/types';
+
+/** The words a record component says outside Notis, in English and French. */
+export const RECORD_COMPONENT_WORDS = Object.freeze({
+  unavailable: { en: 'Open this record in Notis to use this component.', fr: 'Ouvre cet enregistrement dans Notis pour utiliser ce composant.' },
+  /** Short enough for a toolbar (C11); the full sentence is its tooltip. */
+  shareUnavailable: { en: 'Share unavailable', fr: 'Partage indisponible' },
+  shareUnavailableHint: { en: 'Open this record in Notis to share it.', fr: 'Ouvre cet enregistrement dans Notis pour le partager.' },
+  spacePageTitle: { en: 'Space page', fr: 'Page du Space' },
+  spacePagePreview: { en: 'This page shows here live when the Space opens in Notis.', fr: 'Cette page s’affiche ici en direct quand le Space est ouvert dans Notis.' },
+  spacePageOpen: { en: 'Open page', fr: 'Ouvrir la page' },
+}) satisfies Readonly<Record<string, Words>>;
+
+function useLocale(): Locale {
+  return useNotisRuntime()?.context?.locale === 'fr' ? 'fr' : 'en';
+}
+
+/** What a record component shows when the host does not draw it: one sentence, in the Space's language. */
+export function RecordComponentUnavailable({ className }: { className?: string }): ReactElement {
+  return <div role="status" className={className}>{pick(RECORD_COMPONENT_WORDS.unavailable, useLocale())}</div>;
+}
+/** The record's properties, drawn by the host. */
+export function RecordProperties(props: NotisRecordPropertiesProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.RecordProperties;
+  return Host ? <Host {...props} /> : <RecordComponentUnavailable className={props.className} />;
+}
+/** The host applies its viewer CSP and an opaque-origin sandbox; source cannot relax either. */
+export function HtmlFrame(props: NotisHtmlFrameProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.HtmlFrame;
+  return Host ? <Host {...props} /> : <RecordComponentUnavailable className={props.className} />;
+}
+/** A saved report's frame, drawn by the host. */
+export function ReportFrame(props: NotisReportFrameProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.ReportFrame;
+  return Host ? <Host {...props} /> : <RecordComponentUnavailable className={props.className} />;
+}
+/**
+ * Private/shared state, copy link and revoke, backed by this record's Site. Outside Notis it sits in a toolbar as a
+ * short muted label whose tooltip says where sharing works (C11), never a sentence that fills the bar.
+ */
+export function ShareControl(props: NotisShareControlProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.ShareControl;
+  const locale = useLocale();
+  if (Host) return <Host {...props} />;
+  const hint = pick(RECORD_COMPONENT_WORDS.shareUnavailableHint, locale);
+  return <span role="status" className={props.className} title={hint} aria-label={hint} data-notis-share-unavailable=""
+    style={{ display: 'inline-flex', alignItems: 'center', height: 28, padding: '0 8px', fontSize: 13, whiteSpace: 'nowrap',
+      color: 'hsl(var(--muted-foreground))' }}>
+    {pick(RECORD_COMPONENT_WORDS.shareUnavailable, locale)}
+  </span>;
+}
+
+/**
+ * The path a Space page link names and the link the fallback card may open: a site-relative path, or an http(s) URL
+ * without credentials. Anything else (script URLs, protocol-relative links) opens nothing.
+ */
+export function spacePageLink(href: string): { path: string; openHref: string | null } {
+  const value = typeof href === 'string' ? href.trim() : '';
+  // Control characters and backslashes change how browsers read a URL; such a link never opens.
+  if (!value || /[\u0000-\u001f\u007f\\]/.test(value)) return { path: value, openHref: null };
+  if (value.startsWith('/') && !value.startsWith('//')) {
+    const path = value.split(/[?#]/, 1)[0] || '/';
+    return { path, openHref: value };
+  }
+  try {
+    const url = new URL(value);
+    if ((url.protocol === 'https:' || url.protocol === 'http:') && !url.username && !url.password) {
+      return { path: url.pathname, openHref: url.href };
+    }
+  } catch { /* not a URL */ }
+  return { path: value, openHref: null };
+}
+
+/** What a Space page frame shows when the host does not draw it (previews, verify): its title, its path and Open page. */
+export function SpacePageCard({ href, title, className, notice }: Pick<NotisSpacePageFrameProps, 'href' | 'title' | 'className'> & {
+  /** One sentence under the path; default: the page shows live once the Space opens in Notis. */
+  notice?: string;
+}): ReactElement {
+  const locale = useLocale();
+  const { path, openHref } = spacePageLink(href);
+  const muted = 'hsl(var(--muted-foreground))';
+  return <div role="group" aria-label={title || pick(RECORD_COMPONENT_WORDS.spacePageTitle, locale)} className={className}
+    data-notis-space-page-card=""
+    style={{ display: 'grid', alignContent: 'start', gap: 8, padding: 16, borderRadius: 10, minWidth: 0,
+      background: 'hsl(var(--muted) / .5)', color: 'hsl(var(--foreground))' }}>
+    <div style={{ fontSize: 14, fontWeight: 500, overflowWrap: 'anywhere' }}>{title || pick(RECORD_COMPONENT_WORDS.spacePageTitle, locale)}</div>
+    {path ? <div style={{ fontSize: 12, color: muted, overflowWrap: 'anywhere',
+      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }}>{path}</div> : null}
+    <div style={{ fontSize: 13, color: muted }}>{notice ?? pick(RECORD_COMPONENT_WORDS.spacePagePreview, locale)}</div>
+    {openHref ? <div><a className="nui-btn" href={openHref} style={{ textDecoration: 'none' }}>
+      {pick(RECORD_COMPONENT_WORDS.spacePageOpen, locale)}
+    </a></div> : null}
+  </div>;
+}
+
+/**
+ * Another Space page shown live inside this view. The host loads only a Space page of its own Notis origin, with the
+ * viewer's own access; any other link (and every host without the frame) shows a card with the title, the path and
+ * Open page. Not interactive by default, so a deck around it keeps its keys and clicks.
+ */
+export function SpacePageFrame(props: NotisSpacePageFrameProps): ReactElement {
+  const Host = useNotisRuntime()?.ui?.SpacePageFrame;
+  return Host ? <Host {...props} /> : <SpacePageCard href={props.href} title={props.title} className={props.className} />;
+}