@draftably/runtime 0.4.0 → 0.5.0

package/dist/types/src/model/appearance.d.ts

@@ -9,7 +9,7 @@ import type { Footnote } from './footnote.js';
 import type { Note } from './note.js';
 import { type FontRole, type TypeProfile } from './fonts.js';
 import type { FileConfig } from './link.js';
-export type ThemeId = 'drafting' | 'fieldnotes' | 'signal' | 'ink' | 'blueprint';
+export type ThemeId = 'drafting' | 'fieldnotes' | 'signal' | 'ink' | 'blueprint' | 'drafting-dark';
 export declare const THEME_IDS: ThemeId[];
 export declare const DEFAULT_THEME: ThemeId;
 /** Shade stops. Lower numbers are lighter and higher numbers darker, in every theme. */
@@ -154,6 +154,13 @@ interface Preset {
     hues?: Partial<Record<string, [number, number]>>;
 }
 export declare const PRESETS: Record<ThemeId, Preset>;
+/**
+ * The appearance to draw on a page of this scheme. The default theme follows the page, with or
+ * without a `theme drafting` line and its size and font overrides: dark draws it as
+ * `drafting-dark`. Another named theme, a `theme-color` line or a color override on the `theme`
+ * line keeps the file's colors on every page.
+ */
+export declare function forScheme(appearance: DiagramAppearance, dark: boolean): DiagramAppearance;
 /** `a` moved toward `b` by `t` (0–1), in sRGB. */
 export declare function mixColors(a: string, b: string, t: number): string;
 export declare function contrast(a: string, b: string): number;

package/dist/types/src/runtime/color-scheme.d.ts

@@ -0,0 +1,15 @@
+/** Watches one host's scheme. `check` reads it again now; `stop` ends the watch. */
+export interface SchemeWatch {
+    check(): void;
+    stop(): void;
+}
+/**
+ * Calls `onChange(dark)` now and whenever the scheme in `host` changes: an element, or a shadow
+ * root, whose children inherit the element's scheme. A hidden probe in `host` has a `light-dark()`
+ * color, so a scheme change anywhere above it (a class flip on the page, a style) starts a
+ * transition there; the media query covers a change of system setting under `light dark`. A
+ * transition cannot run while the host has no box (a hidden tab, a closed `<details>`, a detached
+ * mount), so a resize observer on the host reads the scheme again when it gets one. Callers also
+ * call `check` after each commit.
+ */
+export declare function watchColorScheme(host: Element | ShadowRoot, onChange: (dark: boolean) => void): SchemeWatch;

package/dist/types/src/runtime/host.d.ts

@@ -3,6 +3,7 @@
  * packages loop over `HOST_EVENTS`, so a new event adds no lines to any of them.
  * This module has no side effects and no runtime imports.
  */
+import type { RenderFailure } from './types.js';
 import type { UpdateResult, ViewerEvents } from './viewer.js';
 export type { Camera, CameraReason, FrameOptions, MoveResult } from './camera.js';
 export type { Box, EdgeOut, Geometry, PlacedBox } from './geometry.js';
@@ -10,8 +11,11 @@ export type { Anchor, DraftSlot } from './anchors.js';
 export interface HostEvents {
     /** After each commit, after the marked children change, and with `[]` before destroy. */
     anchors: ViewerEvents['anchors'];
-    /** Each update's result: committed, error or a cancellation. */
-    update: UpdateResult;
+    /**
+     * Each update's result, from the first source on: committed, error or a cancellation. The
+     * editor's commit has no `value` or `diagnostics` (see `EditorUpdate`).
+     */
+    update: UpdateResult | EditorUpdate;
     render: ViewerEvents['render'];
     diagnostics: ViewerEvents['diagnostics'];
     camera: ViewerEvents['camera'];
@@ -30,11 +34,39 @@ export interface HostEvents {
         source: string;
     };
 }
+/**
+ * `<draft-editor>`'s update. The editor draws in its own session, not as one SVG, so a commit
+ * has no `value` and no `diagnostics`: the `diagnostics` event has them. A source that does not
+ * parse is an `error` with a `DRAFT_PARSE` diagnostic; the editor keeps the text and shows it.
+ */
+export type EditorUpdate = {
+    status: 'committed';
+    revision: number;
+    value?: never;
+    diagnostics?: never;
+} | {
+    status: 'error';
+    revision: number;
+    error: RenderFailure;
+} | {
+    status: 'destroyed';
+    revision: number;
+};
 export type HostEventName = keyof HostEvents;
 /** Every event, in one list. Each element dispatches these as bubbling `draft-<name>` events. */
 export declare const HOST_EVENTS: readonly ["anchors", "update", "render", "diagnostics", "camera", "itemactivate", "link", "contextmenu", "select", "change"];
 /** Events a host can cancel with `preventDefault()`. */
+export type CancelableEventName = 'link' | 'contextmenu';
 export declare const CANCELABLE_EVENTS: readonly HostEventName[];
+/**
+ * What a framework event prop receives: the event's `detail`, and on a cancelable event a
+ * `preventDefault()` that cancels the DOM event, so `onLink={e => e.preventDefault()}` works.
+ */
+export type HostEventDetail<K extends HostEventName> = K extends CancelableEventName ? HostEvents[K] & {
+    preventDefault(): void;
+} : HostEvents[K];
+/** The value a framework event prop receives for a `draft-<name>` event. */
+export declare function hostDetail(event: Event): unknown;
 export type DraftEventMap = {
     [K in HostEventName as `draft-${K}`]: CustomEvent<HostEvents[K]>;
 };

package/dist/types/src/runtime/page-shared.d.ts

@@ -4,7 +4,7 @@
  */
 import type { RenderOptions, RenderResult } from './types.js';
 /** Names the worker and the usual fix, so "worker failed" is not a dead end. */
-export declare const WORKER_HELP = "The worker is the module next to @draftably/runtime's viewer. With Vite, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.";
+export declare const WORKER_HELP = "The worker is the module next to @draftably/runtime's viewer. With Vite 5\u20137, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.";
 /**
  * Render in the page's worker pool. Jobs queue on the main thread; an aborted job leaves the
  * queue before a worker sees it. A job that runs past `timeoutMs` stops its worker only.

package/dist/types/src/runtime/schemes.d.ts

@@ -0,0 +1,2 @@
+/** Both drawings as one, or null when they differ in more than color. */
+export declare function mergeSchemes(light: string, dark: string): string | null;

package/dist/types/src/runtime/svg-renderer.d.ts

@@ -26,10 +26,15 @@ export interface SvgOptions {
         rects: Map<string, Rect>;
         routes: Route[];
     }) => void;
+    /**
+     * The routes `onDrawn` gave for this document, so drawing it again in other colors routes
+     * nothing again (not for compare or states).
+     */
+    routes?: Route[];
 }
 export declare class SvgLimitError extends Error {
 }
-type Route = ReturnType<typeof computeRoutes>['routes'][number];
+export type Route = ReturnType<typeof computeRoutes>['routes'][number];
 /**
  * A sequence diagram's panel, a light surface with a border that bounds the exchange, and a row
  * band for each phase with its label in a tab at the left edge. Drawn under everything else.
@@ -43,4 +48,3 @@ export declare const PHASE_TAB = 8;
 /** A thin stripe across the top of a box, inside its rounded corners. */
 export declare function accentPath(r: Rect, radius: number): string;
 export declare function renderSvg(doc: Diagram, opts?: SvgOptions): string;
-export {};

package/dist/types/src/runtime/types.d.ts

@@ -49,6 +49,13 @@ export interface CommonRenderOptions {
     sourceId?: string;
     signal?: AbortSignal;
     limits?: Partial<RenderLimits>;
+    /**
+     * `light` (default) draws the file's own colors. `dark` draws a file without a `theme` line in
+     * the default theme's dark variant. `auto` writes both as `light-dark()` colors, so the page's
+     * `color-scheme` picks one; the viewer and `<draft-diagram>` use it. A file's own theme line
+     * always wins.
+     */
+    colorScheme?: 'light' | 'dark' | 'auto';
 }
 export type RenderOptions = CommonRenderOptions & ({
     target?: 'image';

package/dist/version-CO7i33cq.js

@@ -0,0 +1,4 @@
+const n = "0.5.0", o = n;
+export {
+  o as r
+};

package/dist/viewer.css

@@ -3,13 +3,14 @@
  * They inherit through the shadow root; the defaults below apply only when unset.
  */
 .draft-viewer {
-  --dv-border: var(--draft-border, #cbd5e1);
-  --dv-ink: var(--draft-ink, #1e293b);
-  --dv-bg: var(--draft-bg, #fff);
-  --dv-focus: var(--draft-focus, #2563eb);
-  --dv-shadow: var(--draft-shadow, rgb(15 23 42 / 0.12));
-  --dv-warning-ink: var(--draft-warning-ink, #9a3412);
-  --dv-warning-bg: var(--draft-warning-bg, #fff7ed);
+  /* The viewer sets color-scheme from the page; each default has a dark value. */
+  --dv-border: var(--draft-border, light-dark(#cbd5e1, #3d4450));
+  --dv-ink: var(--draft-ink, light-dark(#1e293b, #e7eaef));
+  --dv-bg: var(--draft-bg, light-dark(#fff, #16191e));
+  --dv-focus: var(--draft-focus, light-dark(#2563eb, #7fa4e6));
+  --dv-shadow: var(--draft-shadow, light-dark(rgb(15 23 42 / 0.12), rgb(0 0 0 / 0.4)));
+  --dv-warning-ink: var(--draft-warning-ink, light-dark(#9a3412, #fdba74));
+  --dv-warning-bg: var(--draft-warning-bg, light-dark(#fff7ed, #431407));
   position: relative;
   display: grid;
   grid-template-rows: auto minmax(8rem, 1fr) auto auto;
@@ -126,7 +127,7 @@
 }
 
 /* The anchor layer: slot targets above the drawing. Slot content takes no pointer input unless
-   it is marked data-draft-input (host.css). */
+   it is marked data-draft-input. */
 .draft-anchors {
   position: absolute;
   inset: 0;
@@ -150,6 +151,11 @@
   box-sizing: border-box;
   pointer-events: none;
 }
+/* Marked content in a mountViewer target, in the page's DOM. The element's slotted content gets the
+   same rule from host.css, because these selectors do not reach into slots. */
+.draft-anchor [data-draft-input] {
+  pointer-events: auto;
+}
 .draft-anchor--body {
   overflow: clip;
 }