@draftably/editor 0.4.0 → 0.5.0

package/dist/types/src/components/session-context.d.ts

@@ -274,6 +274,9 @@ export declare const useSessionIfAny: () => ({
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../model/appearance").DiagramAppearance;
 } & {
     tool: import("solid-js").Accessor<import("../state/session/editor").Tool>;
     setToolSignal: import("solid-js").Setter<import("../state/session/editor").Tool>;

package/dist/types/src/dsl/translate.d.ts

@@ -7,7 +7,7 @@
  * write snaps back when the source is reprojected, so nothing unsaved looks saved. Changes the
  * file cannot express are rejected outright.
  */
-import type { DiagramAppearance } from '../model/appearance';
+import { type DiagramAppearance } from '../model/appearance';
 import type { Diagram } from '../model/types';
 import { type Scene } from './compile';
 import { type SourceDoc } from './syntax';

package/dist/types/src/editor/internal.d.ts

@@ -268,6 +268,9 @@ export declare const sessions: WeakMap<object, {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../model/appearance").DiagramAppearance;
 } & {
     tool: import("solid-js").Accessor<import("../state/session/editor").Tool>;
     setToolSignal: import("solid-js").Setter<import("../state/session/editor").Tool>;

package/dist/types/src/editor/mount.d.ts

@@ -3,6 +3,7 @@ import { type Camera, type CameraReason, type FrameOptions, type MoveResult } fr
 import { type Geometry } from '../runtime/geometry';
 import { type Anchor, type DraftSlot } from '../runtime/anchors';
 import type { Diagnostic } from '../runtime/types';
+import type { EditorUpdate } from '../runtime/host';
 import '../styles/app.css';
 /** The options a host sets on `<draft-editor>`: every mount option but the text and `onChange`. */
 export type EditorOptions = Pick<SessionOptions, 'storageKey' | 'openLink' | 'confirm' | 'onInteract'> & {
@@ -21,12 +22,21 @@ export interface EditorEvents {
     anchors: {
         anchors: readonly Anchor[];
     };
-    /** Slot warnings: an unknown slot, or content larger than its node. */
+    /** A source that does not parse (`DRAFT_PARSE`), then slot warnings: an unknown slot, or content larger than its node. */
     diagnostics: {
         revision: number;
         diagnostics: readonly Diagnostic[];
         stale: boolean;
     };
+    /** Each update's result, from the first text on. */
+    update: EditorUpdateResult;
+    /** A link mark was pressed. `preventDefault()` stops the editor opening it. */
+    link: {
+        itemId: string;
+        href: string;
+        target: '_blank';
+        preventDefault(): void;
+    };
     camera: {
         camera: Camera;
         reason: CameraReason;
@@ -45,11 +55,8 @@ export interface EditorEvents {
         preventDefault(): void;
     };
 }
-/** An editor update's outcome. The editor draws in its own session, so it has no SVG value. */
-export type EditorUpdateResult = {
-    status: 'committed' | 'error' | 'destroyed';
-    revision: number;
-};
+/** An editor update's outcome: `EditorUpdate` in `@draftably/runtime/host`. */
+export type EditorUpdateResult = EditorUpdate;
 /** The editor's handle: the viewer's camera, plus editing. */
 export interface MountedEditor {
     /** Resolves once the first text is drawn. */

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

@@ -9,7 +9,7 @@ import type { Footnote } from './footnote';
 import type { Note } from './note';
 import { type FontRole, type TypeProfile } from './fonts';
 import type { FileConfig } from './link';
-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';
 import type { UpdateResult, ViewerEvents } from './viewer';
 export type { Camera, CameraReason, FrameOptions, MoveResult } from './camera';
 export type { Box, EdgeOut, Geometry, PlacedBox } from './geometry';
@@ -10,8 +11,11 @@ export type { Anchor, DraftSlot } from './anchors';
 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';
 /** 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/types/src/state/active-session.d.ts

@@ -269,6 +269,9 @@ export declare const setActiveSession: (session: DiagramSession) => {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../model/appearance").DiagramAppearance;
 } & {
     tool: import("solid-js").Accessor<import("./session/editor").Tool>;
     setToolSignal: import("solid-js").Setter<import("./session/editor").Tool>;

package/dist/types/src/state/session/emphasis.d.ts

@@ -7,5 +7,8 @@ export declare function createEmphasis(s: DocumentPart): {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../../model/appearance").DiagramAppearance;
 };
 export type EmphasisPart = ReturnType<typeof createEmphasis>;

package/dist/types/src/state/session/index.d.ts

@@ -15,6 +15,11 @@ export interface SessionOptions {
     openLink?: (href: string) => void;
     /** The user started a gesture or a tool on the canvas; a host closes its menus here. */
     onInteract?: () => void;
+    /** A link was pressed, before it opens. Return true to stop it opening. */
+    onLink?: (link: {
+        href: string;
+        itemId: string | undefined;
+    }) => boolean;
 }
 export declare function createDiagramSession(options?: SessionOptions): {
     dispose: () => void;
@@ -284,6 +289,9 @@ export declare function createDiagramSession(options?: SessionOptions): {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../../model/appearance").DiagramAppearance;
 } & {
     tool: import("solid-js").Accessor<import("./editor").Tool>;
     setToolSignal: import("solid-js").Setter<import("./editor").Tool>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/editor",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The Draftably diagram editor: drag boxes and lines, and get the .draft source back.",
   "license": "MIT",
   "type": "module",