foss-design 0.9.12 → 0.9.14

package/dist/viewer-lib/styles.css

@@ -458,18 +458,22 @@
     position: sticky;
   }
 
-  .-inset-px {
-    inset: -1px;
-  }
-
   .inset-0 {
     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);
   }
@@ -534,6 +538,10 @@
     bottom: calc(var(--spacing) * 5);
   }
 
+  .bottom-\[76px\] {
+    bottom: 76px;
+  }
+
   .bottom-full {
     bottom: 100%;
   }
@@ -739,11 +747,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%;
@@ -923,6 +941,10 @@
     min-height: calc(var(--spacing) * 7);
   }
 
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
@@ -977,6 +999,10 @@
     width: calc(var(--spacing) * 14);
   }
 
+  .w-\[26px\] {
+    width: 26px;
+  }
+
   .w-\[32px\] {
     width: 32px;
   }
@@ -1053,10 +1079,6 @@
     max-width: 80%;
   }
 
-  .max-w-\[95\%\] {
-    max-width: 95%;
-  }
-
   .max-w-\[260px\] {
     max-width: 260px;
   }
@@ -1129,6 +1151,10 @@
     flex: 1;
   }
 
+  .flex-\[1_1_auto\] {
+    flex: auto;
+  }
+
   .shrink {
     flex-shrink: 1;
   }
@@ -1149,6 +1175,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);
@@ -1211,6 +1241,10 @@
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
   .resize-y {
     resize: vertical;
   }
@@ -1223,6 +1257,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;
   }
@@ -1331,6 +1369,10 @@
     row-gap: calc(var(--spacing) * .5);
   }
 
+  .gap-y-1 {
+    row-gap: var(--spacing);
+  }
+
   .self-center {
     align-self: center;
   }
@@ -1353,6 +1395,10 @@
     overflow: hidden;
   }
 
+  .overflow-visible {
+    overflow: visible;
+  }
+
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -1429,11 +1475,6 @@
     border-width: 0;
   }
 
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1464,10 +1505,6 @@
     border-style: dashed;
   }
 
-  .border-action {
-    border-color: var(--action);
-  }
-
   .border-action-line {
     border-color: var(--action-line);
   }
@@ -1677,6 +1714,10 @@
     padding: var(--spacing);
   }
 
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2204,11 +2245,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 {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  .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;
@@ -2404,6 +2458,10 @@
     outline-offset: -2px;
   }
 
+  .active\:scale-\[0\.94\]:active {
+    scale: .94;
+  }
+
   .active\:bg-soft2:active {
     background-color: var(--soft2);
   }
@@ -2858,6 +2916,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;
@@ -2892,6 +2954,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;
@@ -3121,6 +3187,36 @@
   background-color: var(--bg);
 }
 
+@keyframes target-ripple {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ripple-color, var(--action)) 70%, transparent), 0 0 0 0 transparent;
+  }
+
+  20% {
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ripple-color, var(--action)) 32%, transparent), 0 0 0 0 color-mix(in srgb, var(--ripple-color, var(--action)) 55%, transparent);
+  }
+
+  45% {
+    box-shadow: 0 0 0 16px transparent, 0 0 0 8px color-mix(in srgb, var(--ripple-color, var(--action)) 24%, transparent);
+  }
+
+  60%, 100% {
+    box-shadow: 0 0 0 20px #0000, 0 0 0 16px #0000;
+  }
+}
+
+.target-ripple {
+  isolation: isolate;
+  animation: 2s cubic-bezier(.16, 1, .3, 1) .16s both target-ripple;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .target-ripple {
+    box-shadow: 0 0 0 2px var(--ripple-color, var(--action));
+    animation: none;
+  }
+}
+
 .canvas-grid {
   pointer-events: none;
   background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px);

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/ripple.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Draws the eye to `target` with two rings spreading out from its edge (as Gateway does for the
+ * section a link led to): after scrolling to it, or to a notice that must not go unseen. The rings
+ * are the element's own box-shadow, following its border radius, so give it to an element without a
+ * shadow of its own that nothing clips. Calling it again starts it over.
+ */
+export declare function ripple(target: HTMLElement, color?: string): void;

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/library.d.ts

@@ -9,6 +9,7 @@ export { cn } from './lib/cn';
 export { copyText } from './lib/copy';
 export { followLink, frameSrc, type LinkTarget, listenToFrame, sendTheme } from './lib/frames';
 export { useIsPhone } from './lib/phone';
+export { ripple } from './lib/ripple';
 export { ApiError, localSource, resolveUrl, staticSource, type ViewerSource } from './lib/source';
 export { setThemePref, type ThemePref, useTheme, useThemePref } from './lib/theme';
 export type { ViewerScope, ViewerSlots } from './lib/viewer';

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,14 +14,24 @@ export declare function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSid
     inspect: boolean;
     onInspect(value: boolean): void;
 }): import("react").JSX.Element;
+/**
+ * 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, }: {
+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;
+    /** 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, }: {

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

@@ -0,0 +1,68 @@
+import { type DrawingKey, type Ink, type Stroke } from '../../../../../src/shared/drawings';
+import { type ReactNode } from 'react';
+import { type DrawingClient } from '../../../lib/drawings';
+import type { CameraStore } from '../camera';
+export type Tool = 'pen' | 'arrow' | 'rect' | 'text' | 'eraser';
+/** Line widths and text size, in the drawing's own pixels. */
+export interface ToolSizes {
+    pen: number;
+    line: number;
+    text: number;
+}
+type Action = {
+    kind: 'add' | 'erase';
+    strokes: Stroke[];
+};
+/**
+ * One drawing's tools and this user's history on it; null while there is no drawing to edit.
+ * Undoing brings strokes back as new ones: an erased id stays erased everywhere.
+ */
+export declare function useDrawingEditor(client: DrawingClient | null, key: DrawingKey | null, defaultInk?: Ink): {
+    client: DrawingClient;
+    drawingKey: string;
+    tool: Tool;
+    setTool: import("react").Dispatch<import("react").SetStateAction<Tool>>;
+    ink: "blue" | "green" | "ink" | "red";
+    setInk: import("react").Dispatch<import("react").SetStateAction<"blue" | "green" | "ink" | "red">>;
+    record: (action: Action) => void;
+    eraseNow: (strokes: Stroke[]) => void;
+    add(strokes: Stroke[]): void;
+    clear(): void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+} | null;
+export type DrawingEditor = NonNullable<ReturnType<typeof useDrawingEditor>>;
+/** Space held: a press on a drawing pans instead of drawing, as it does on the canvas. */
+export declare function useSpaceHeld(): import("react").RefObject<boolean>;
+/** Tool keys, 1–4 for inks, ⌘Z and ⇧⌘Z while `active`; typing in a field is left alone. */
+export declare function useEditorKeys(editor: DrawingEditor | null, active: boolean): void;
+/**
+ * Tools, inks, undo and redo, clearing, and whatever the place adds at the end (a way out). Short
+ * of room (`compact`), the inks fold into one button that picks among them.
+ */
+export declare function DrawingToolbar({ editor, end, compact, }: {
+    editor: DrawingEditor;
+    end?: ReactNode;
+    compact?: boolean;
+}): import("react").JSX.Element;
+/**
+ * A drawing as SVG in its own coordinates (`width` × `height`), fitted to its box. With an editor
+ * it takes the pointer and draws with the editor's tool; strokes on their way go out live.
+ */
+export declare function DrawingSurface({ client, drawingKey, width, height, editor, sizes, className, camera, onPointerDownCapture, }: {
+    client: DrawingClient;
+    drawingKey: DrawingKey;
+    /** The drawing's size, when it has one (a screen's markup); a board has a camera instead. */
+    width?: number;
+    height?: number;
+    editor?: DrawingEditor | null;
+    sizes: ToolSizes;
+    className?: string;
+    /** An endless drawing (a board): what shows is where this camera looks. */
+    camera?: CameraStore;
+    /** Before the surface acts on a press: return true to leave it to what is under the surface (a pan). */
+    onPointerDownCapture?: (e: React.PointerEvent) => boolean;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { type Drawing, type Ink, type Stroke } from '../../../../../src/shared/drawings';
+import type { Ghost } from '../../../lib/drawings';
+export declare const INK_COLOR: Record<Ink, string>;
+export declare const StrokeView: import("react").MemoExoticComponent<({ stroke, done }: {
+    stroke: Stroke;
+    done?: boolean;
+}) => import("react").JSX.Element>;
+/** The strokes of a drawing, then those on their way (someone else's, and this user's own). */
+export declare function StrokeList({ drawing, ghosts, draft, }: {
+    drawing: Drawing | undefined;
+    ghosts?: Ghost[];
+    draft?: Stroke | null;
+}): import("react").JSX.Element;
+/** How far `(x, y)` is from the stroke's line, in drawing pixels (0 inside a text). */
+export declare function distanceTo(stroke: Stroke, x: number, y: number): number;