@zuilib/text-editor 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog — @zuilib/text-editor
 
+## 0.9.0
+
+- **Ink drawing style**: `drawingStyle="ink"` on the editor renders shapes
+  as one seeded, pressure-varying pen stroke with misregistered fills and
+  tapered connectors, and switches the canvas face to Recursive (casual
+  axes) when the host loads it. Renderer-only: the drawing format is
+  unchanged. Geometry helpers are exported (`inkStroke`, `seedFrom`, …)
+
 ## 0.8.0
 
 - **Syntax highlighting** for fenced code blocks, driven by the package's

package/dist/index.d.ts

@@ -30,6 +30,146 @@ type BlockWidthDefaults = Readonly<{
     drawing?: BlockWidth;
 }>;
 
+/** Card-like shapes: fillable, bindable, carrying the three text slots */
+type BoxType = 'rect' | 'ellipse' | 'diamond' | 'note' | 'cylinder' | 'cloud' | 'queue' | 'actor';
+type ConnectorType = 'arrow' | 'line';
+type DrawingShapeType = BoxType | ConnectorType | 'text';
+declare const BOX_TYPES: readonly BoxType[];
+declare const CONNECTOR_TYPES: readonly ConnectorType[];
+declare const SHAPE_TYPES: readonly DrawingShapeType[];
+type Point = Readonly<{
+    x: number;
+    y: number;
+}>;
+type BindingSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Where a connector endpoint attaches to a box.
+ *
+ * `fixedPoint` is a ratio inside the box's bounding box (`[0,0]` top-left,
+ * `[1,1]` bottom-right). Omitted = the box center, which makes the endpoint
+ * auto-aim at the other end. `mode: 'inside'` pins the endpoint exactly on
+ * the fixed point; the default (`'orbit'`) projects it onto the outline with
+ * a small gap.
+ */
+type Binding = Readonly<{
+    id: string;
+    fixedPoint?: readonly [number, number];
+    mode?: 'orbit' | 'inside';
+}>;
+type DrawingShape = Readonly<{
+    id: string;
+    type: DrawingShapeType;
+    /** Top-left corner (boxes/text) or start point (connectors) */
+    x: number;
+    y: number;
+    /** Size (boxes/text) or delta to the end point (connectors) */
+    w: number;
+    h: number;
+    stroke: string;
+    fill: string;
+    strokeWidth: number;
+    /** Standalone text, main (center) content of a box, or connector label */
+    text?: string;
+    /** Small heading rendered at the top of a box */
+    label?: string;
+    /** Small line rendered at the bottom of a box */
+    footer?: string;
+    /** Connector: box the start point is attached to */
+    startBinding?: Binding;
+    /** Connector: box the end point is attached to */
+    endBinding?: Binding;
+    /** Arrow: arrowheads on both ends */
+    bidirectional?: boolean;
+    /** Connector routing: right-angled auto-routed path instead of a straight line */
+    routing?: 'elbow';
+    /**
+     * Elbow override: position of the middle segment as a fraction of the
+     * span, applied only when the routed path is a simple three-segment Z.
+     */
+    elbow?: number;
+    /**
+     * Connector: intermediate path points between start and end (absolute
+     * canvas coordinates). Takes precedence over `routing`.
+     */
+    waypoints?: readonly Point[];
+}>;
+type DrawingData = Readonly<{
+    version: 2;
+    /**
+     * Logical canvas width. When set the drawing is scaled to fit narrower
+     * layouts (SVG viewBox); when omitted the canvas is fluid and shapes are
+     * in CSS pixels.
+     */
+    canvasWidth?: number;
+    canvasHeight: number;
+    /**
+     * Block width: `full` (default) spans the editor; `text` aligns with the
+     * text column; `content` fits the shapes' horizontal extent. The editor
+     * omits `full` unless it was written explicitly (an insertion default or
+     * the source payload); unknown values are dropped.
+     */
+    width?: BlockWidth;
+    shapes: readonly DrawingShape[];
+}>;
+declare const EMPTY_DRAWING: DrawingData;
+declare const STROKE_COLORS: readonly ["#1e1e1e", "#e03131", "#2f9e44", "#1971c2", "#f08c00", "#7048e8"];
+declare const FILL_COLORS: readonly ["transparent", "#ffc9c9", "#b2f2bb", "#a5d8ff", "#ffec99", "#d0bfff"];
+/** Edge midpoints, used by the ```diagram skeleton's `side` option */
+declare const SIDE_FIXED_POINTS: Record<BindingSide, readonly [number, number]>;
+declare function serializeDrawingData(data: DrawingData): string;
+/**
+ * Parse a ```drawing payload. Exactly one format is accepted: version 2 as
+ * written by the editor (the ```diagram skeleton is a separate block type,
+ * see skeleton.ts). Shapes that fail validation are dropped and a malformed
+ * document yields an empty canvas. Never throws.
+ */
+declare function parseDrawingData(json: string): DrawingData;
+declare function normalizeDrawingData(parsed: unknown): DrawingData;
+
+/**
+ * "Ink" rendering: one confident pen stroke instead of a plotted outline.
+ * Every shape's centerline is resampled densely, displaced along its normal
+ * by a smooth low-frequency field (two sines, integer frequencies on closed
+ * paths so the seam is continuous) and widened by a slowly varying pressure
+ * factor. The result is a filled ring path, not an SVG stroke, so the width
+ * can breathe along the path. Everything is seeded from the shape id: the
+ * same shape draws the same way on every render, undo, export and machine.
+ *
+ * This is a renderer concern only — the drawing format never sees it.
+ */
+type DrawingStyle = 'clean' | 'ink';
+type InkOptions = Readonly<{
+    closed: boolean;
+    seed: number;
+    /** Nominal stroke width; the pressure factor varies it by ±30 % */
+    width: number;
+    /** Peak displacement from the geometric path, in px */
+    amplitude: number;
+}>;
+type InkStroke = Readonly<{
+    /** Filled outline of the stroke (use `fillRule="evenodd"`) */
+    ring: string;
+    /** Displaced centerline, for fills */
+    center: string;
+}>;
+/** FNV-1a: a stable 32-bit seed from a shape id */
+declare function seedFrom(text: string): number;
+/** Wobble amplitude for a shape of the given smallest dimension (px) */
+declare function inkAmplitude(size: number): number;
+/** Fill misregistration for a shape: a seeded 2–3 px offset */
+declare function inkFillOffset(seed: number): Point;
+/** Ink stroke along a polyline (open) or polygon (closed) */
+declare function inkStroke(points: readonly Point[], options: InkOptions): InkStroke;
+/** Rectangle outline with circular corners, as a polygon */
+declare function roundedRectPolygon(r: Readonly<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}>, radius: number, segments?: number): Point[];
+/** Polyline with its interior corners rounded (quadratic), as points */
+declare function roundedPolyline(points: readonly Point[], cornerRadius?: number, segments?: number): Point[];
+
 type EditorMode = 'edit-raw' | 'edit-md' | 'view';
 
 type EditorRootProps = Readonly<{
@@ -55,6 +195,12 @@ type EditorRootProps = Readonly<{
      * insertion — markdown without a width marker always means `full`.
      */
     defaultBlockWidth?: BlockWidthDefaults;
+    /**
+     * `clean` (default) draws crisp geometry; `ink` draws every shape as a
+     * single pen stroke with pressure and slightly misregistered fills, and
+     * sets the casual face (Recursive, if the host loads it).
+     */
+    drawingStyle?: DrawingStyle;
     children: ReactNode;
 }>;
 /**
@@ -62,7 +208,7 @@ type EditorRootProps = Readonly<{
  * beneath it (`Content`, `Toolbar`, `Outline`, or your own components using
  * `useMarkdownEditor`) shares the same editor instance.
  */
-declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, measure, defaultBlockWidth, children, }: EditorRootProps): ReactElement;
+declare function EditorRoot({ value, onChange, readOnly, className, mode, autoFocus, measure, defaultBlockWidth, drawingStyle, children, }: EditorRootProps): ReactElement;
 
 type EditorContentProps = Readonly<{
     placeholder?: string;
@@ -285,102 +431,6 @@ declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node
  */
 declare const FRONTMATTER: MultilineElementTransformer;
 
-/** Card-like shapes: fillable, bindable, carrying the three text slots */
-type BoxType = 'rect' | 'ellipse' | 'diamond' | 'note' | 'cylinder' | 'cloud' | 'queue' | 'actor';
-type ConnectorType = 'arrow' | 'line';
-type DrawingShapeType = BoxType | ConnectorType | 'text';
-declare const BOX_TYPES: readonly BoxType[];
-declare const CONNECTOR_TYPES: readonly ConnectorType[];
-declare const SHAPE_TYPES: readonly DrawingShapeType[];
-type Point = Readonly<{
-    x: number;
-    y: number;
-}>;
-type BindingSide = 'top' | 'right' | 'bottom' | 'left';
-/**
- * Where a connector endpoint attaches to a box.
- *
- * `fixedPoint` is a ratio inside the box's bounding box (`[0,0]` top-left,
- * `[1,1]` bottom-right). Omitted = the box center, which makes the endpoint
- * auto-aim at the other end. `mode: 'inside'` pins the endpoint exactly on
- * the fixed point; the default (`'orbit'`) projects it onto the outline with
- * a small gap.
- */
-type Binding = Readonly<{
-    id: string;
-    fixedPoint?: readonly [number, number];
-    mode?: 'orbit' | 'inside';
-}>;
-type DrawingShape = Readonly<{
-    id: string;
-    type: DrawingShapeType;
-    /** Top-left corner (boxes/text) or start point (connectors) */
-    x: number;
-    y: number;
-    /** Size (boxes/text) or delta to the end point (connectors) */
-    w: number;
-    h: number;
-    stroke: string;
-    fill: string;
-    strokeWidth: number;
-    /** Standalone text, main (center) content of a box, or connector label */
-    text?: string;
-    /** Small heading rendered at the top of a box */
-    label?: string;
-    /** Small line rendered at the bottom of a box */
-    footer?: string;
-    /** Connector: box the start point is attached to */
-    startBinding?: Binding;
-    /** Connector: box the end point is attached to */
-    endBinding?: Binding;
-    /** Arrow: arrowheads on both ends */
-    bidirectional?: boolean;
-    /** Connector routing: right-angled auto-routed path instead of a straight line */
-    routing?: 'elbow';
-    /**
-     * Elbow override: position of the middle segment as a fraction of the
-     * span, applied only when the routed path is a simple three-segment Z.
-     */
-    elbow?: number;
-    /**
-     * Connector: intermediate path points between start and end (absolute
-     * canvas coordinates). Takes precedence over `routing`.
-     */
-    waypoints?: readonly Point[];
-}>;
-type DrawingData = Readonly<{
-    version: 2;
-    /**
-     * Logical canvas width. When set the drawing is scaled to fit narrower
-     * layouts (SVG viewBox); when omitted the canvas is fluid and shapes are
-     * in CSS pixels.
-     */
-    canvasWidth?: number;
-    canvasHeight: number;
-    /**
-     * Block width: `full` (default) spans the editor; `text` aligns with the
-     * text column; `content` fits the shapes' horizontal extent. The editor
-     * omits `full` unless it was written explicitly (an insertion default or
-     * the source payload); unknown values are dropped.
-     */
-    width?: BlockWidth;
-    shapes: readonly DrawingShape[];
-}>;
-declare const EMPTY_DRAWING: DrawingData;
-declare const STROKE_COLORS: readonly ["#1e1e1e", "#e03131", "#2f9e44", "#1971c2", "#f08c00", "#7048e8"];
-declare const FILL_COLORS: readonly ["transparent", "#ffc9c9", "#b2f2bb", "#a5d8ff", "#ffec99", "#d0bfff"];
-/** Edge midpoints, used by the ```diagram skeleton's `side` option */
-declare const SIDE_FIXED_POINTS: Record<BindingSide, readonly [number, number]>;
-declare function serializeDrawingData(data: DrawingData): string;
-/**
- * Parse a ```drawing payload. Exactly one format is accepted: version 2 as
- * written by the editor (the ```diagram skeleton is a separate block type,
- * see skeleton.ts). Shapes that fail validation are dropped and a malformed
- * document yields an empty canvas. Never throws.
- */
-declare function parseDrawingData(json: string): DrawingData;
-declare function normalizeDrawingData(parsed: unknown): DrawingData;
-
 type SerializedDrawingNode = Spread<{
     data: string;
 }, SerializedLexicalNode>;
@@ -1252,4 +1302,4 @@ declare const codeTokenizer: LexicalTokenizer;
  */
 declare function registerCodeBlockHighlighting(editor: LexicalEditor): () => void;
 
-export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $isTableWidthExplicit, $setTableDensity, $setTableSettings, $setTableWidth, BLOCK_WIDTHS, BOX_DEFINITIONS, BOX_TYPES, BUILTIN_CODE_LANGUAGES, type Binding, type BindingSide, type BlockWidth, type BlockWidthDefaults, type BoxDefinition, type BoxType, CODE_BLOCK, CODE_TOKEN_TYPES, COLOR_PRESETS, CONNECTOR_TYPES, type CodeGrammar, type CodeRule, type CodeToken, type CodeTokenType, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, PLAIN_LANGUAGE, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, routeElbow, serializeDrawingData, tokenizeCode, useMarkdownEditor };
+export { $createDrawingNode, $createFrontmatterNode, $getSelectedTable, $getTableDensity, $getTableSettings, $getTableWidth, $isDrawingNode, $isFrontmatterNode, $isTableWidthExplicit, $setTableDensity, $setTableSettings, $setTableWidth, BLOCK_WIDTHS, BOX_DEFINITIONS, BOX_TYPES, BUILTIN_CODE_LANGUAGES, type Binding, type BindingSide, type BlockWidth, type BlockWidthDefaults, type BoxDefinition, type BoxType, CODE_BLOCK, CODE_TOKEN_TYPES, COLOR_PRESETS, CONNECTOR_TYPES, type CodeGrammar, type CodeRule, type CodeToken, type CodeTokenType, type ColorName, type ConnectorType, DEFAULT_TABLE_SETTINGS, DIAGRAM, DRAWING, DRAWING_DATA_JSON_SCHEMA, DRAWING_SKELETON_JSON_SCHEMA, type DrawingData, DrawingNode, type DrawingShape, type DrawingShapeType, type DrawingSkeleton, type DrawingStyle, EMPTY_DRAWING, type EditorContentProps, type EditorMode, type EditorRootProps, FILL_COLORS, FRONTMATTER, FormatButtons, FrontmatterNode, HistoryButtons, type InkOptions, type InkStroke, InsertButtons, MarkdownEditor, type MarkdownEditorApi, type Props as MarkdownEditorProps, type MermaidDirection, type MermaidOptions, PLAIN_LANGUAGE, type Point, SHAPE_TYPES, SIDE_FIXED_POINTS, STROKE_COLORS, type SerializedDrawingNode, type SerializedFrontmatterNode, type SkeletonBox, type SkeletonConnector, type SkeletonEnd, type SkeletonText, TABLE, TABLE_WIDTH_MARKER, type TableDensity, type TableSettings, type TableSettingsOptions, type TextField, Toolbar, ToolbarButton, ToolbarDivider, type ToolbarItems, anchorPoint, bindEndpoints, boxOutline, codeTokenizer, connectorPoints, drawingToMermaid, expandSkeleton, findBoxAt, fixedPointFor, formatTableSettingsMarker, getCodeLanguages, hasCodeLanguage, inkAmplitude, inkFillOffset, inkStroke, isBlockWidth, isDrawingSkeleton, makeBinding, normalizeDrawingData, parseDrawingData, parseDrawingSkeleton, parseTableSettingsMarker, registerCodeBlockHighlighting, registerCodeLanguage, resolveBindings, resolveCodeLanguage, roundedPolyline, roundedRectPolygon, routeElbow, seedFrom, serializeDrawingData, tokenizeCode, useMarkdownEditor };