foss-design 0.9.11 → 0.9.13

package/dist/viewer-lib/styles.css

@@ -74,6 +74,7 @@
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: "IBM Plex Sans", system-ui, sans-serif;
@@ -417,6 +418,10 @@
     pointer-events: none;
   }
 
+  .invisible {
+    visibility: hidden;
+  }
+
   .visible {
     visibility: visible;
   }
@@ -461,10 +466,22 @@
     inset: 0;
   }
 
+  .inset-4 {
+    inset: calc(var(--spacing) * 4);
+  }
+
   .inset-x-0 {
     inset-inline: 0;
   }
 
+  .inset-x-4 {
+    inset-inline: calc(var(--spacing) * 4);
+  }
+
+  .inset-x-5 {
+    inset-inline: calc(var(--spacing) * 5);
+  }
+
   .inset-x-6 {
     inset-inline: calc(var(--spacing) * 6);
   }
@@ -525,6 +542,14 @@
     bottom: calc(var(--spacing) * 5);
   }
 
+  .bottom-\[76px\] {
+    bottom: 76px;
+  }
+
+  .bottom-full {
+    bottom: 100%;
+  }
+
   .left-0 {
     left: 0;
   }
@@ -726,11 +751,21 @@
     height: 7px;
   }
 
+  .size-\[12px\] {
+    width: 12px;
+    height: 12px;
+  }
+
   .size-\[14px\] {
     width: 14px;
     height: 14px;
   }
 
+  .size-\[92px\] {
+    width: 92px;
+    height: 92px;
+  }
+
   .size-full {
     width: 100%;
     height: 100%;
@@ -894,6 +929,10 @@
     max-height: min(56vh, 520px);
   }
 
+  .max-h-\[min\(296px\,var\(--radix-popover-content-available-height\)\)\] {
+    max-height: min(296px, var(--radix-popover-content-available-height));
+  }
+
   .max-h-\[min\(560px\,76vh\)\] {
     max-height: min(560px, 76vh);
   }
@@ -914,6 +953,10 @@
     min-height: 38px;
   }
 
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
+
   .min-h-\[46px\] {
     min-height: 46px;
   }
@@ -940,6 +983,10 @@
     }
   }
 
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -952,6 +999,10 @@
     width: calc(var(--spacing) * 14);
   }
 
+  .w-\[26px\] {
+    width: 26px;
+  }
+
   .w-\[32px\] {
     width: 32px;
   }
@@ -1120,6 +1171,10 @@
     flex-basis: 0;
   }
 
+  .origin-top-left {
+    transform-origin: 0 0;
+  }
+
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1130,6 +1185,10 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .rotate-180 {
+    rotate: 180deg;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1138,10 +1197,6 @@
     animation: .16s ease-out q-fade-in;
   }
 
-  .animate-\[q-pop_120ms_ease-out\] {
-    animation: .12s ease-out q-pop;
-  }
-
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1170,6 +1225,10 @@
     cursor: pointer;
   }
 
+  .cursor-text {
+    cursor: text;
+  }
+
   .touch-none {
     touch-action: none;
   }
@@ -1178,6 +1237,10 @@
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
   .resize-y {
     resize: vertical;
   }
@@ -1190,6 +1253,10 @@
     grid-template-columns: 92px minmax(0, 1fr);
   }
 
+  .grid-cols-\[minmax\(var\(--dock-left\,0px\)\,1fr\)_minmax\(0\,auto\)_minmax\(var\(--dock-right\,0px\)\,1fr\)\] {
+    grid-template-columns: minmax(var(--dock-left, 0px),1fr) minmax(0,auto) minmax(var(--dock-right, 0px),1fr);
+  }
+
   .grid-rows-\[20px_auto_20px\] {
     grid-template-rows: 20px auto 20px;
   }
@@ -1320,6 +1387,10 @@
     overflow: hidden;
   }
 
+  .overflow-visible {
+    overflow: visible;
+  }
+
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -1376,6 +1447,11 @@
     border-radius: 3.40282e38px;
   }
 
+  .rounded-t-\[7px\] {
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
   .rounded-t-\[14px\] {
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
@@ -1411,6 +1487,11 @@
     border-bottom-width: 1px;
   }
 
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1558,6 +1639,16 @@
     }
   }
 
+  .bg-surface\/80 {
+    background-color: var(--surface);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-surface\/80 {
+      background-color: color-mix(in oklab, var(--surface) 80%, transparent);
+    }
+  }
+
   .bg-surface\/90 {
     background-color: var(--surface);
   }
@@ -1624,6 +1715,10 @@
     padding: var(--spacing);
   }
 
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2156,6 +2251,24 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring-action {
+    --tw-ring-color: var(--action);
+  }
+
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  .ring-offset-surface {
+    --tw-ring-offset-color: var(--surface);
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -2186,6 +2299,12 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -2345,6 +2464,10 @@
     outline-offset: -2px;
   }
 
+  .active\:scale-\[0\.94\]:active {
+    scale: .94;
+  }
+
   .active\:bg-soft2:active {
     background-color: var(--soft2);
   }
@@ -2512,6 +2635,10 @@
       flex-wrap: wrap;
     }
   }
+
+  .\[\&\>\:not\(\:first-child\)\]\:shrink-0 > :not(:first-child) {
+    flex-shrink: 0;
+  }
 }
 
 @font-face {
@@ -2795,6 +2922,10 @@
   --grid-dot: #c9ced5;
   --note: #fdf3e3;
   --note-line: #edd6b1;
+  --draw-ink: #1b1f24;
+  --draw-red: #e03131;
+  --draw-blue: #1971c2;
+  --draw-green: #2b8a3e;
   --scrollbar: #c3c9d0;
   --scrollbar-hover: #9aa2ac;
   color-scheme: light;
@@ -2829,6 +2960,10 @@
   --grid-dot: #30343a;
   --note: #2a2415;
   --note-line: #574420;
+  --draw-ink: #e6e8eb;
+  --draw-red: #ff6b6b;
+  --draw-blue: #4dabf7;
+  --draw-green: #51cf66;
   --scrollbar: #3a3f46;
   --scrollbar-hover: #565d66;
   color-scheme: dark;
@@ -3082,9 +3217,9 @@
 }
 
 .canvas-overlay .section-title {
+  translate: 0 max(-100%, min(0px, calc(var(--body) * var(--z) * 1px - 44px)));
   padding-bottom: 8px;
   display: none;
-  translate: 0 -100%;
 }
 
 .canvas-overlay[data-titles="on"] .section-title {

package/dist/viewer-lib/types/src/shared/drawings.d.ts

@@ -0,0 +1,153 @@
+/**
+ * Drawings: an idea board for each canvas page and markup over each screen. They are not screens:
+ * people draw them in the viewer, agents read them, and in the cloud every member sees the same
+ * ones as they are drawn. A drawing is a set of strokes plus the ids of erased ones, so two copies
+ * merge by union whatever order their changes arrive in.
+ */
+/** `board:<page id>` or `markup:<item id>`. */
+export type DrawingKey = string;
+export declare const INKS: readonly ['ink', 'red', 'blue', 'green'];
+export type Ink = (typeof INKS)[number];
+export declare const STROKE_KINDS: readonly ['pen', 'arrow', 'rect', 'text'];
+export type StrokeKind = (typeof STROKE_KINDS)[number];
+export interface Stroke {
+    id: string;
+    kind: StrokeKind;
+    ink: Ink;
+    /** Line width in drawing pixels; the font size for text. */
+    size: number;
+    /** pen: x, y, pressure triples; arrow and rect: x1, y1, x2, y2; text: x, y of its top left. */
+    points: number[];
+    text?: string;
+}
+export interface Drawing {
+    strokes: Stroke[];
+    /** Erased strokes stay erased, even when a copy that still has them merges in later. */
+    erased: string[];
+}
+export interface DrawingOps {
+    add?: Stroke[];
+    erase?: string[];
+}
+export declare const MAX_STROKES = 4000;
+/** Longest message either side takes. */
+export declare const MAX_MESSAGE: number;
+export declare const boardKey: (page: string) => DrawingKey;
+export declare const markupKey: (item: string) => DrawingKey;
+export declare const isDrawingKey: (value: unknown) => value is DrawingKey;
+export declare const emptyDrawing: () => Drawing;
+/** A random stroke id. */
+export declare function strokeId(): string;
+export declare function parseStroke(value: unknown): Stroke | null;
+export declare function parseOps(value: unknown): DrawingOps | null;
+export declare function parseDrawing(value: unknown): Drawing | null;
+/** `{ [key]: Drawing }`, dropping what does not parse. */
+export declare function parseDrawings(value: unknown): Record<DrawingKey, Drawing>;
+/** `drawing` with `ops` applied, or null when they change nothing. Strokes past MAX_STROKES are not added. */
+export declare function applyOps(drawing: Drawing, ops: DrawingOps): Drawing | null;
+/** What `from` has that `to` lacks, as ops that bring `to` up to it. */
+export declare function diffDrawings(from: Drawing, to: Drawing): DrawingOps | null;
+export declare function isEmptyDrawing(drawing: Drawing | undefined): boolean;
+export interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Text lines are this many font sizes apart. */
+export declare const TEXT_LINE_HEIGHT = 1.25;
+/** The box a text stroke takes, roughly (no font metrics here): for erasing, cropping and its editor. */
+export declare function textBox(stroke: Stroke): Box;
+/** The box a stroke takes, its line width, arrowhead and text included. */
+export declare function strokeBounds(stroke: Stroke): Box;
+/** The box all the strokes take; null for none. */
+export declare function drawingBounds(strokes: Stroke[]): Box | null;
+/** Strokes closer than this belong to one idea on a board. */
+export declare const GROUP_GAP = 240;
+/**
+ * A board's strokes in groups: what is drawn close together (less than GROUP_GAP apart) is one
+ * group, empty space between sketches parts them. In reading order: rows top to bottom, then left
+ * to right. A picture of a board is one per group, so far-apart ideas do not shrink into specks.
+ */
+export declare function drawingGroups(strokes: Stroke[]): {
+    box: Box;
+    strokes: Stroke[];
+}[];
+/**
+ * A stroke on its way, sent every few frames while it is drawn and not kept: `points` continue the
+ * stroke's points from index `at` (0 starts it over, as a shape does on every move).
+ */
+export interface LiveStroke {
+    id: string;
+    kind: StrokeKind;
+    ink: Ink;
+    size: number;
+    text?: string;
+    at: number;
+    points: number[];
+}
+/** Messages to the server over the drawings socket of one canvas. */
+export type ClientMessage = {
+    type: 'ops';
+    id: number;
+    key: DrawingKey;
+    add?: Stroke[];
+    erase?: string[];
+} | {
+    type: 'live';
+    key: DrawingKey;
+    stroke: LiveStroke;
+} | {
+    type: 'live-end';
+    key: DrawingKey;
+    id: string;
+};
+/** Messages from the server. */
+export type ServerMessage = 
+/** First thing on a connection: every drawing of the canvas, and whether this peer may draw. */
+{
+    type: 'hello';
+    peer: string;
+    canDraw: boolean;
+    drawings: Record<DrawingKey, Drawing>;
+}
+/** Someone's change, this peer's own included. */
+ | {
+    type: 'ops';
+    key: DrawingKey;
+    add?: Stroke[];
+    erase?: string[];
+    peer: string;
+}
+/** The server kept the ops the client numbered `id`. */
+ | {
+    type: 'ack';
+    id: number;
+}
+/** The whole drawing, where a change came some other way than ops (a file edited here, another server). */
+ | {
+    type: 'doc';
+    key: DrawingKey;
+    drawing: Drawing;
+} | {
+    type: 'live';
+    key: DrawingKey;
+    stroke: LiveStroke;
+    peer: string;
+    name?: string;
+} | {
+    type: 'live-end';
+    key: DrawingKey;
+    id: string;
+    peer: string;
+}
+/** A peer left: its strokes on the way go with it. */
+ | {
+    type: 'gone';
+    peer: string;
+} | {
+    type: 'error';
+    message: string;
+};
+export declare function parseClientMessage(raw: string): ClientMessage | null;
+export declare function parseServerMessage(raw: string): ServerMessage | null;

package/dist/viewer-lib/types/viewer/src/lib/drawings.d.ts

@@ -0,0 +1,61 @@
+import { type Drawing, type DrawingKey, type DrawingOps, type Stroke } from '../../../src/shared/drawings';
+import { Store } from './store';
+/** A stroke someone else is drawing right now. */
+export interface Ghost {
+    peer: string;
+    name?: string;
+    stroke: Stroke;
+    seen: number;
+}
+export interface DrawingsState {
+    /** The server said hello: the drawings are the real ones. */
+    ready: boolean;
+    online: boolean;
+    canDraw: boolean;
+    drawings: Record<DrawingKey, Drawing>;
+    ghosts: Record<DrawingKey, Ghost[]>;
+}
+/**
+ * The drawings of one canvas over its socket. What shows is the server's drawings with this user's
+ * changes it has not acknowledged yet on top: they show at once, go out numbered, and go out again
+ * after a reconnect (applying them twice changes nothing). A change the server refuses comes back
+ * as the stored drawing, then the acknowledgement, and so drops out of view.
+ */
+export declare class DrawingClient {
+    private readonly url;
+    readonly store: Store<DrawingsState>;
+    private socket;
+    /** The server's drawings, as far as it told. */
+    private confirmed;
+    private pending;
+    private nextId;
+    private delay;
+    private timer;
+    private sweep;
+    private closed;
+    constructor(url: string);
+    private connect;
+    private retry;
+    private send;
+    /** The drawing to show: the server's, with the changes still on their way applied. */
+    private shown;
+    private show;
+    private receive;
+    private dropGhosts;
+    private dropStale;
+    /** A change of this user's: shown at once, sent, and sent again after a reconnect until acknowledged. */
+    apply(key: DrawingKey, ops: DrawingOps): void;
+    /** A stroke on its way: its points from `at` on (0 sends it whole). */
+    live(key: DrawingKey, stroke: Stroke, at: number): void;
+    liveEnd(key: DrawingKey, id: string): void;
+    close(): void;
+}
+/** The drawings of a canvas while it is open, or null when the source has none. */
+export declare function useDrawingClient(canvas: string, enabled?: boolean): DrawingClient | null;
+/** One drawing and the strokes on their way onto it. */
+export declare function useDrawing(client: DrawingClient, key: DrawingKey): {
+    drawing: Drawing | undefined;
+    ghosts: Ghost[];
+};
+/** For hooks that need a store before the canvas's drawings are there. */
+export declare const noDrawings: Store<DrawingsState>;

package/dist/viewer-lib/types/viewer/src/lib/source.d.ts

@@ -29,6 +29,12 @@ export interface ViewerSource {
     source(path: string, unit: string): Promise<string>;
     /** Set the project icon (an SVG, PNG or WebP), or remove it with null. Without it the viewer offers no icon controls. */
     setIcon?(file: Blob | null): Promise<void>;
+    /**
+     * The WebSocket URL of a canvas's drawings: the idea board of each page and the markup over each
+     * screen, live for everyone who has the canvas open (`src/shared/drawings.ts` holds the protocol).
+     * Without it the viewer shows no drawings.
+     */
+    drawings?(canvas: string): string;
 }
 export declare class ApiError extends Error {
     readonly status: number;

package/dist/viewer-lib/types/viewer/src/lib/viewer.d.ts

@@ -1,3 +1,4 @@
+import type { CanvasItem } from '../../../src/shared/types';
 import { type ReactNode } from 'react';
 import type { ViewerSource } from './source';
 /** Places where an app that embeds the viewer adds its own controls. */
@@ -28,6 +29,8 @@ export interface ViewerSlots {
     canvasesAfter?: ReactNode;
     /** Below the panels of the home page, full width. */
     homeAfter?: ReactNode;
+    /** In the bar of the item selected on a canvas, before the way to zoom to it: sharing that screen, say. */
+    selectionActions?: (canvasId: string, item: CanvasItem) => ReactNode;
     /**
      * On a screen's full-window page, the corner plate with the way out: `note` is a muted line under it
      * (whose content the screen is), `actions` sit next to the way out, and with `badge` the plate folds

package/dist/viewer-lib/types/viewer/src/library.d.ts

@@ -16,6 +16,7 @@ export { Avatar, initials } from './ui/avatar';
 export { Badge, Count, type Tone } from './ui/badge';
 export { Button, ButtonAnchor, type ButtonKind, ButtonLink, type ButtonProps, buttonClass, IconButton, type IconButtonProps, iconButtonClass, } from './ui/button';
 export { Segmented, Switch } from './ui/choice';
+export { Combobox, type ComboboxOption } from './ui/combobox';
 export { CopyButton } from './ui/copy-button';
 export { Dialog } from './ui/dialog';
 export { Icon, type IconName } from './ui/icon';

package/dist/viewer-lib/types/viewer/src/pages/canvas/board.d.ts

@@ -0,0 +1,16 @@
+import type { CanvasPage } from '../../../../src/shared/types';
+import { type DrawingClient } from '../../lib/drawings';
+import { type ToolSizes } from './drawing/editor';
+export declare const BOARD_SIZES: ToolSizes;
+/**
+ * The page's idea board: a tile above the zoom controls with what is drawn on it, which opens over
+ * the canvas. The board has no edges: it pans and zooms like the canvas, and a picture of it is
+ * cropped to what is drawn. Whether it is open, and where it looks, is kept per page for the
+ * session. Everyone with the canvas open sees it change as it is drawn on; those who may not draw
+ * see it only once there is something on it.
+ */
+export declare function IdeaBoard({ client, canvasId, page }: {
+    client: DrawingClient;
+    canvasId: string;
+    page: CanvasPage;
+}): import("react").JSX.Element | null;

package/dist/viewer-lib/types/viewer/src/pages/canvas/camera.d.ts

@@ -34,10 +34,17 @@ export declare class CameraStore {
         y: number;
     };
 }
+/** A camera saved in the session under `key`, or null. */
+export declare function loadCamera(key: string): Camera | null;
 /**
  * The camera that shows `rect` inside a viewport of `w`×`h` with `pad` screen pixels around it.
  * When `rect` does not fit even at `minZoom`, it lines up with the top (and the left, if it is too wide).
  */
 export declare function fitRect(rect: Rect, w: number, h: number, pad?: number, maxZoom?: number, minZoom?: number): Camera;
+/**
+ * Keeps a `.canvas-grid` layer in step with a camera. The dot grid is a layer of its own: panning
+ * only moves it, zooming repaints it.
+ */
+export declare function gridMover(grid: HTMLElement): (c: Camera) => void;
 export declare function intersects(a: Rect, b: Rect): boolean;
 export {};

package/dist/viewer-lib/types/viewer/src/pages/canvas/canvas-bar.d.ts

@@ -1,4 +1,5 @@
 import type { CanvasDoc, CanvasItem, CanvasPage as Page, Theme } from '../../../../src/shared/types';
+import { type ReactNode } from 'react';
 import type { ViewStore } from './view-state';
 /** The canvas page's top bar: the canvas and its pages, screen theme, inspect and play. */
 export declare function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSidebar, onPlay, canPlay, inspect, onInspect, }: {
@@ -13,15 +14,25 @@ export declare function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSid
     inspect: boolean;
     onInspect(value: boolean): void;
 }): import("react").JSX.Element;
-/** The selected item's name and actions, floating over the bottom of the canvas. */
-export declare function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect, }: {
+/**
+ * The strip along the canvas's bottom edge that holds a bar: centred while there is room, moved aside
+ * when there is not, and never under the controls in the corners, whose widths come in as
+ * `--dock-left` and `--dock-right` (see useDock).
+ */
+export declare function BottomDock({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The selected item's name and actions, floating over the bottom of the canvas; it eases in and out. */
+export declare function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect, onMarkup, }: {
     canvas: CanvasDoc;
     store: ViewStore;
     layoutItems: CanvasItem[];
     theme: Theme;
     onPlay(id: string): void;
     inspect: boolean;
-}): import("react").JSX.Element | null;
+    /** Mark up a screen; without it, where no one may draw, there is no such button. */
+    onMarkup?: (id: string) => void;
+}): import("react").JSX.Element;
 /** The inspect mode switch: a button that stays pressed while on. */
 export declare function InspectToggle({ on, onChange, compact, }: {
     on: boolean;