@draftably/editor 0.0.0-stage → 0.2.0

package/dist/types/src/cli/links.d.ts

@@ -0,0 +1,4 @@
+import type { Diagnostic, Scene } from '../dsl/compile';
+/** File links in an SVG of `file`, as paths from its folder: right when the SVG is saved beside it. */
+export declare const svgHref: (scene: Scene, file: string) => (href: string) => string;
+export declare function linkNotes(scene: Scene, file: string): Diagnostic[];

package/dist/types/src/cli/pdf.d.ts

@@ -0,0 +1,29 @@
+export type PdfOrder = 'name' | 'title' | 'given';
+export type PdfPage = 'fit' | 'letter' | 'a4' | 'slide';
+export declare const PDF_ORDERS: PdfOrder[];
+export declare const PDF_PAGES: PdfPage[];
+export interface PdfOptions {
+    order?: PdfOrder;
+    page?: PdfPage;
+    /** A cover page with this title and a contents list. */
+    title?: string;
+    /** One page per emphasis state. */
+    states?: boolean;
+    /** Attach each file's source; on unless set false. */
+    source?: boolean;
+}
+/** A diagram to print: the name it is listed and attached under, and its source. */
+export interface PdfInput {
+    name: string;
+    source: string;
+}
+export declare const isPdfName: (name: string) => boolean;
+/** `.draft` files from files and folders, as given; a folder's files by name. */
+export declare function pdfInputs(args: string[]): PdfInput[];
+/** The PDF of `inputs`: cover, pages, bookmarks and attached sources. */
+export declare function buildPdf(inputs: PdfInput[], opts?: PdfOptions): Promise<{
+    bytes: Uint8Array<ArrayBufferLike>;
+    pages: number;
+}>;
+/** The `.draft` sources attached to a PDF, in order; empty when it has none. */
+export declare function readPdfSources(bytes: Uint8Array): Promise<PdfInput[]>;

package/dist/types/src/cli/png.d.ts

@@ -0,0 +1,23 @@
+export declare function findChrome(): string;
+/** The width and height an SVG declares on its root, rounded up. */
+export declare function svgSize(svg: string): {
+    w: number;
+    h: number;
+};
+/**
+ * Write `svg` as a PNG at `scale` times its own size, with `source` embedded when given. Returns
+ * the image's size in pixels.
+ */
+export declare function writePng(svg: string, out: string, scale?: number, source?: string): Promise<{
+    w: number;
+    h: number;
+}>;
+/**
+ * Put the drawing on the macOS clipboard as a PNG at `scale` (with `source` in it when given) and
+ * `svgText` as text, so it pastes as an image in a doc or chat and as markup in an editor. Returns
+ * the PNG's size in pixels.
+ */
+export declare function copyToClipboard(svg: string, svgText: string, scale?: number, source?: string): Promise<{
+    w: number;
+    h: number;
+}>;

package/dist/types/src/cli/svg.d.ts

@@ -0,0 +1,4 @@
+import type { Diagram } from '../model/types';
+import { type SvgOptions } from '../runtime/svg-renderer';
+export { accentPath, PHASE_TAB, sequenceBackdrop, type SvgOptions } from '../runtime/svg-renderer';
+export declare function renderSvg(doc: Diagram, options?: SvgOptions): string;

package/dist/types/src/components/Icon.d.ts

@@ -0,0 +1,14 @@
+/** A 24×24 stroke icon for the interface. */
+export declare function Icon(props: {
+    name: string;
+    class?: string;
+    size?: number;
+}): import("solid-js").JSX.Element;
+/** The same icon drawn inside an SVG scene at a given position. */
+export declare function SceneGlyph(props: {
+    name: string;
+    x: number;
+    y: number;
+    size: number;
+    color: string;
+}): import("solid-js").JSX.Element;

package/dist/types/src/components/LayoutPreviewBar.d.ts

@@ -0,0 +1,2 @@
+/** Shown while a layout preview waits to be kept or discarded. */
+export declare function LayoutPreviewBar(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/Canvas.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from 'solid-js';
+import './canvas.css';
+export interface CanvasProps {
+    /** Open the host's context menu; the canvas has already selected what was clicked. */
+    onContextMenu?: (e: MouseEvent) => void;
+    /** Files dropped on the canvas. Without it the canvas takes no drops. */
+    onDropFiles?: (files: File[]) => Promise<void> | void;
+    /** Shown under the hint on an empty canvas, such as a button that builds from a list. */
+    emptyAction?: JSX.Element;
+}
+/**
+ * The canvas for the session in context: drawing, selection, dragging, inline editing, layout
+ * previews, the timeline and the brush. Pointing at it or focusing it makes its session active.
+ */
+export declare function Canvas(props: CanvasProps): JSX.Element;

package/dist/types/src/components/canvas/Frame.d.ts

@@ -0,0 +1,22 @@
+import { type DiagramFrame } from '../../model/frame';
+import type { Diagram } from '../../model/types';
+type Key = 'title' | 'subtitle';
+/**
+ * Where the title or subtitle line sits, or would sit once added: a missing title goes in the
+ * frame's top margin, or above the subtitle; a missing subtitle goes under the title. A subtitle
+ * is offered only once there is a title.
+ */
+export declare function headingSlot(doc: Diagram, frame: DiagramFrame, key: Key): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    type: import("../../model/fonts").TypeProfile;
+} | undefined;
+/**
+ * The frame an export draws round the diagram, drawn on the canvas: the heading above the drawing
+ * and the key under it, from the same geometry as `inspect --svg` and the editor's exports.
+ * Double-click the title or subtitle to edit it; drag the right edge to widen the frame.
+ */
+export declare function Frame(): import("solid-js").JSX.Element;
+export {};

package/dist/types/src/components/canvas/InlineEditor.d.ts

@@ -0,0 +1,2 @@
+/** A text box over the canvas for editing a shape, container or connection label in place. */
+export declare function InlineEditor(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/Notes.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The file's notes, placed by the frame as `inspect --svg` places them. Not part of the frame
+ * group, so the editor's exports copy them with the drawing.
+ */
+export declare function Notes(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/Overlay.d.ts

@@ -0,0 +1,2 @@
+/** Temporary drawing on top of the diagram: gestures, connection previews and brush feedback. */
+export declare function Overlay(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/StateBar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The file's emphasis states as chips over the canvas: none, each state, and a grid of all of
+ * them. Hidden when the file has no `state` lines.
+ */
+export declare function StateBar(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/TextHits.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Click targets over the frame's text: notes, legend rows and phase labels select on a click and
+ * edit on a double-click; a note drags to sit beside another object. Change counts in the key
+ * are counted from the drawing, so a click there shows a hint instead. Not part of exports.
+ */
+export declare function TextHits(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/ZoomControls.d.ts

@@ -0,0 +1 @@
+export declare function ZoomControls(): import("solid-js").JSX.Element;

package/dist/types/src/components/canvas/text-boxes.d.ts

@@ -0,0 +1,24 @@
+import { type ResolvedAppearance } from '../../model/appearance';
+import type { DiagramFrame } from '../../model/frame';
+import type { Diagram, Rect } from '../../model/types';
+type Type = ResolvedAppearance['annotation'];
+/** A piece of canvas text: its id, where it is drawn, and the type and paint to edit it in. */
+export interface TextBox {
+    id: string;
+    rect: Rect;
+    type: Type;
+    fill: string;
+    ink: string;
+    /** Links in the text, each with the box a click opens it from. */
+    links?: Array<Rect & {
+        href: string;
+    }>;
+}
+/**
+ * Every note, legend row and phase label the frame draws, with the box a click or an edit covers.
+ * Status rows in the key are counted from the drawing, so they are not here.
+ */
+export declare function textBoxes(doc: Diagram, frame: DiagramFrame): TextBox[];
+/** The box of one text id, including the title and subtitle; undefined when it is not drawn. */
+export declare function textBox(doc: Diagram, frame: DiagramFrame, id: string): TextBox | undefined;
+export {};

package/dist/types/src/components/controls.d.ts

@@ -0,0 +1,91 @@
+/** Small form and button primitives shared by panels, menus and dialogs. */
+import { type JSX } from 'solid-js';
+import type { Command } from '../state/canvas-commands';
+/** Attributes that give an element the shared tooltip. See `Tips`. */
+export declare const tip: (label: string, keys?: string, hint?: string) => {
+    'data-tip': string;
+    'data-tip-keys': string | undefined;
+    'data-tip-hint': string | undefined;
+};
+/** Attributes for text that may be cut off: the tooltip shows all of it, only when it is cut. */
+export declare const cutTip: {
+    'data-tip': string;
+    'data-tip-cut': string;
+};
+export declare function IconButton(props: {
+    icon: string;
+    label: string;
+    keys?: string;
+    hint?: string;
+    pressed?: boolean;
+    variant?: 'ghost' | 'primary';
+} & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>): JSX.Element;
+/**
+ * An icon button for one table of commands: it runs a command and explains itself from the
+ * command's own words.
+ */
+export declare const commandButton: <Id extends string>(table: Record<Id, Command>, run: (id: Id) => void, enabled: (id: Id) => boolean) => (props: {
+    command: Id;
+    label?: string;
+    pressed?: boolean;
+}) => JSX.Element;
+/** Text with each word of a query marked where it matches. */
+export declare function Highlight(props: {
+    text: string;
+    query: string;
+}): JSX.Element;
+export declare function Field(props: {
+    label: string;
+    hint?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+export type Option<T extends string | number> = readonly [T, string] | T;
+export declare function Select<T extends string | number>(props: {
+    value: T;
+    options: readonly Option<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    'aria-label'?: string;
+    id?: string;
+}): JSX.Element;
+export declare function SelectField<T extends string | number>(props: {
+    label: string;
+    value: T;
+    options: readonly Option<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    hint?: JSX.Element;
+}): JSX.Element;
+export declare function Checkbox(props: {
+    label: JSX.Element;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}): JSX.Element;
+/** A range slider that shows its value and reports the final value on release. */
+export declare function RangeField(props: {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    unit?: string;
+    hint?: string;
+    disabled?: boolean;
+    /** Called while dragging; defaults to nothing so only `onChange` commits. */
+    onInput?: (value: number) => void;
+    onChange: (value: number) => void;
+}): JSX.Element;
+/** A number input that commits on change and rejects non-finite values. */
+export declare function NumberField(props: {
+    label: string;
+    value: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    onChange: (value: number) => void;
+}): JSX.Element;
+export declare function Kbd(props: {
+    children: JSX.Element;
+}): JSX.Element;

package/dist/types/src/components/scene/EdgeView.d.ts

@@ -0,0 +1,22 @@
+import { type DrawnRoute } from '../../model/routes';
+import type { Diagram } from '../../model/types';
+export interface EdgeViewProps {
+    doc: Diagram;
+    route: DrawnRoute;
+    selected?: boolean;
+    interactive?: boolean;
+    /** Its label is being edited in place, so the drawn label hides. */
+    editing?: boolean;
+    /** Keeps marker ids unique when several scenes share a page. */
+    idPrefix?: string;
+}
+export declare function EdgeView(props: EdgeViewProps): import("solid-js").JSX.Element;
+/**
+ * The stretch of a line that crosses cells to reach a cell with no free side, drawn over the
+ * cells, with a dot where it meets that cell.
+ */
+export declare function CrossingView(props: {
+    doc: Diagram;
+    route: DrawnRoute;
+    selected?: boolean;
+}): import("solid-js").JSX.Element;

package/dist/types/src/components/scene/GroupView.d.ts

@@ -0,0 +1,22 @@
+import { type ResolvedAppearance } from '../../model/appearance';
+import type { Diagram, NodeLayout } from '../../model/types';
+/** The rest of a field that runs on into another row: its title after an ellipsis. */
+export declare const pieceLabel: (title: string, w: number, look: ResolvedAppearance) => string;
+/** A container's border is quieter than a connection: thinner and partly transparent. */
+export declare const GROUP_BORDER: {
+    width: number;
+    opacity: number;
+};
+export interface GroupViewProps {
+    doc: Diagram;
+    id: string;
+    rect: NodeLayout;
+    selected?: boolean;
+    dropTarget?: boolean;
+    interactive?: boolean;
+    zoom?: number;
+    focused?: boolean;
+    /** Its title is being edited in place, so the drawn title hides. */
+    editing?: boolean;
+}
+export declare function GroupView(props: GroupViewProps): import("solid-js").JSX.Element;

package/dist/types/src/components/scene/Lifelines.d.ts

@@ -0,0 +1,15 @@
+import type { Diagram, NodeLayout } from '../../model/types';
+/** Sequence participants' dashed lifelines, drawn under the message lines. */
+export declare function Lifelines(props: {
+    doc: Diagram;
+    ids: string[];
+    rect: (id: string) => NodeLayout | undefined;
+}): import("solid-js").JSX.Element;
+/**
+ * A sequence diagram's panel (`part="panel"`, under the groups) or its phase bands
+ * (`part="phases"`, over the groups' column bands), as the SVG export draws them.
+ */
+export declare function SequenceBackdrop(props: {
+    doc: Diagram;
+    part: 'panel' | 'phases';
+}): import("solid-js").JSX.Element;

package/dist/types/src/components/scene/LinkMark.d.ts

@@ -0,0 +1,11 @@
+import { type LinkMark } from '../../model/link';
+/**
+ * The arrow that says an object is a link. On the editor canvas it is also the button that opens
+ * the link, so a click elsewhere on the object still only selects it.
+ */
+export declare function LinkMarkView(props: {
+    mark: LinkMark;
+    href: string;
+    color: string;
+    interactive?: boolean;
+}): import("solid-js").JSX.Element;

package/dist/types/src/components/scene/NodeView.d.ts

@@ -0,0 +1,18 @@
+import type { Diagram, NodeLayout } from '../../model/types';
+export interface NodeViewProps {
+    doc: Diagram;
+    id: string;
+    rect: NodeLayout;
+    selected?: boolean;
+    /** Editor canvas: ports, resize handles and position badges. */
+    interactive?: boolean;
+    zoom?: number;
+    /** Highlight used by comparisons for the visual anchor. */
+    focused?: boolean;
+    /** Its title is being edited in place, so the drawn title hides. */
+    editing?: boolean;
+    /** Comparison candidates: focusable so a keyboard user can choose the anchor. */
+    focusable?: boolean;
+    idPrefix?: string;
+}
+export declare function NodeView(props: NodeViewProps): import("solid-js").JSX.Element;

package/dist/types/src/components/scene/parts.d.ts

@@ -0,0 +1,50 @@
+import type { TypeProfile } from '../../model/fonts';
+import type { Rect } from '../../model/types';
+/** Multi-line, vertically centered text in one of the diagram's type profiles. */
+export declare function SceneText(props: {
+    lines: string[];
+    x: number;
+    y: number;
+    lineHeight: number;
+    type: TypeProfile;
+    fill: string;
+    class?: string;
+    /** Strike the text through, as for a removed object. */
+    strike?: boolean;
+    /** Fade of the text alone, as for a removed object. */
+    fade?: number;
+}): import("solid-js").JSX.Element;
+/** The removed marker, a minus in a disc, centred at (x, y). */
+export declare const RemovedMarker: (props: {
+    x: number;
+    y: number;
+    ink: string;
+    canvas: string;
+}) => import("solid-js").JSX.Element;
+/** Size of the pin glyph on a placed object, in diagram px. */
+export declare const PIN_SIZE = 12;
+/** Top left of the pin inside a `w`×`h` shape: its top-left corner, inset to clear a curve or point. */
+export declare function pinSpot(shape: string, w: number, h: number): {
+    x: number;
+    y: number;
+};
+/**
+ * A small pin with its top left at `x`, `y`, inside the object: filled when pinned, outlined when
+ * a softer line placed it. Hovering names the line. Editor chrome, not diagram content, so it
+ * never reads as a label the way a text tag did.
+ */
+export declare function PositionBadge(props: {
+    id: string;
+    pinned: boolean;
+    manual: boolean;
+    x: number;
+    y: number;
+    /** The object's ink, so the pin reads on its fill. */
+    color: string;
+}): import("solid-js").JSX.Element;
+/** Square handles that keep a constant screen size. Shapes use corners only. */
+export declare function ResizeHandles(props: {
+    rect: Rect;
+    zoom: number;
+    corners?: boolean;
+}): import("solid-js").JSX.Element;

package/dist/types/src/components/sculpt/BrushDock.d.ts

@@ -0,0 +1,2 @@
+/** Settings for the local layout brush. */
+export declare function BrushDock(): import("solid-js").JSX.Element;

package/dist/types/src/components/sculpt/TimelineDeck.d.ts

@@ -0,0 +1,2 @@
+/** Scrub recorded layout steps, bookmark one as a restore source, and keep a step. */
+export declare function TimelineDeck(): import("solid-js").JSX.Element;