foss-design 0.9.12 → 0.9.13

package/dist/viewer-lib/styles.css

@@ -466,10 +466,18 @@
     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 +542,10 @@
     bottom: calc(var(--spacing) * 5);
   }
 
+  .bottom-\[76px\] {
+    bottom: 76px;
+  }
+
   .bottom-full {
     bottom: 100%;
   }
@@ -739,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%;
@@ -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;
   }
@@ -1149,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);
@@ -1211,6 +1237,10 @@
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
   .resize-y {
     resize: vertical;
   }
@@ -1223,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;
   }
@@ -1353,6 +1387,10 @@
     overflow: hidden;
   }
 
+  .overflow-visible {
+    overflow: visible;
+  }
+
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -1677,6 +1715,10 @@
     padding: var(--spacing);
   }
 
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2209,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;
@@ -2404,6 +2464,10 @@
     outline-offset: -2px;
   }
 
+  .active\:scale-\[0\.94\]:active {
+    scale: .94;
+  }
+
   .active\:bg-soft2:active {
     background-color: var(--soft2);
   }
@@ -2858,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;
@@ -2892,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;

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/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;

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

@@ -0,0 +1,18 @@
+declare global {
+    interface Window {
+        __DESIGN_DRAWING_READY__?: boolean;
+        __DESIGN_DRAWING_SIZE__?: {
+            width: number;
+            height: number;
+        };
+        __DESIGN_DRAWING_PARTS__?: number;
+    }
+}
+export declare function BoardCapture({ canvasId, pageId }: {
+    canvasId: string;
+    pageId: string;
+}): import("react").JSX.Element | null;
+export declare function MarkupCapture({ canvasId, itemId }: {
+    canvasId: string;
+    itemId: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,26 @@
+import type { CanvasItem } from '../../../../src/shared/types';
+import type { DrawingClient } from '../../lib/drawings';
+import { type DrawingEditor, type ToolSizes } from './drawing/editor';
+import type { Layout } from './layout';
+import type { ViewStore } from './view-state';
+export declare const MARKUP_SIZES: ToolSizes;
+/**
+ * Markup over the screens that have some, in canvas space, so it moves and scales with them; the
+ * screen being marked up takes the pointer. Everyone with the canvas open sees it as it is drawn.
+ */
+export declare function MarkupLayers({ layout, client, store, editor, }: {
+    layout: Layout;
+    client: DrawingClient;
+    store: ViewStore;
+    editor: DrawingEditor | null;
+}): import("react").JSX.Element;
+/**
+ * In place of the selection bar while a screen is marked up: its tools and the way out. `room` is the
+ * width the dock leaves it; short of it, the inks fold into one button.
+ */
+export declare function MarkupBar({ item, editor, onDone, room, }: {
+    item: CanvasItem;
+    editor: DrawingEditor;
+    onDone(): void;
+    room: number;
+}): import("react").JSX.Element;

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

@@ -19,6 +19,8 @@ export interface ViewState {
     frameEls: Record<string, HTMLIFrameElement | null>;
     /** Inspect mode: screens take the pointer so the inspector can see it. */
     inspecting: boolean;
+    /** The screen being marked up: its markup takes the pointer. */
+    markup: string | null;
 }
 export declare function createViewState(): Store<ViewState>;
 export type ViewStore = ReturnType<typeof createViewState>;

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

@@ -1,5 +1,5 @@
 import type { Theme } from '../../../../src/shared/types';
-import { type RefObject } from 'react';
+import { type ReactNode, type RefObject } from 'react';
 import { type CameraStore } from './camera';
 import { type FrameEvents } from './items';
 import { type Layout } from './layout';
@@ -31,7 +31,9 @@ interface ViewportProps {
         x: number;
         y: number;
     }): void;
+    /** Drawn over the items, in canvas space: screen markup. */
+    over?: ReactNode;
 }
-export declare function Viewport({ layout, theme, store, camera, events, capture, apiRef, onPlay, onSelect }: ViewportProps): import("react").JSX.Element;
+export declare function Viewport({ layout, theme, store, camera, events, capture, apiRef, onPlay, onSelect, over, }: ViewportProps): import("react").JSX.Element;
 export declare function isTyping(target: EventTarget | null): boolean;
 export {};

package/dist/viewer-lib/types/viewer/src/ui/icon-paths.d.ts

@@ -84,5 +84,12 @@ export declare const ICON_PATHS: {
     readonly keyboard: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="M6 8h.01"/><path d="M10 8h.01"/><path d="M14 8h.01"/><path d="M18 8h.01"/><path d="M8 12h.01"/><path d="M12 12h.01"/><path d="M16 12h.01"/><path d="M7 16h10"/>';
     readonly folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>';
     readonly canvas: '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>';
+    readonly eraser: '<path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/>';
+    readonly square: '<rect width="18" height="18" x="3" y="3" rx="2"/>';
+    readonly 'arrow-up-right': '<path d="M13 5h6v6"/><path d="M19 5 5 19"/>';
+    readonly undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>';
+    readonly redo: '<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13"/>';
+    readonly minimize: '<path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/>';
+    readonly lightbulb: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>';
 };
 export type IconName = keyof typeof ICON_PATHS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foss-design",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "description": "Design canvases and design systems for coding agents: live, animated, clickable screens on an infinite canvas, served locally from a .design folder.",
   "type": "module",
   "license": "MIT",
@@ -72,6 +72,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "vite": "^8.3.1",
+    "ws": "^8.22.0",
     "zod": "^4.6.5"
   },
   "peerDependencies": {
@@ -97,7 +98,9 @@
     "@types/node": "^24.13.6",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "@types/ws": "^8.18.1",
     "marked": "^18.0.14",
+    "perfect-freehand": "^1.2.3",
     "sugar-high": "^2.5.0",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",