sketchmark 2.0.0

package/dist/src/types.d.ts

@@ -0,0 +1,439 @@
+export type PrimitiveType = "rect" | "circle" | "ellipse" | "point" | "line" | "arrow" | "arc" | "curve" | "polyline" | "polygon" | "path" | "text" | "image" | "group";
+export type AdvancedThreeType = "cuboid" | "sphere" | "plane" | "line3d" | "text3d" | "light";
+export type VisualElementType = PrimitiveType | AdvancedThreeType;
+export type Align = "left" | "center" | "right";
+export type VAlign = "top" | "middle" | "bottom";
+export type AnchorName = "center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type Point2 = [number, number];
+export type Point3 = [number, number, number];
+export type Point = Point2 | Point3;
+export type Endpoint = Point | string;
+export type GradientStop = [number, string] | {
+    offset: number;
+    color: string;
+};
+export type ImageFit = "fill" | "contain" | "cover";
+export type Paint = string | {
+    type: "linearGradient";
+    from: Point2;
+    to: Point2;
+    stops: GradientStop[];
+} | {
+    type: "radialGradient";
+    center: Point2;
+    radius: number;
+    focus?: Point2;
+    stops: GradientStop[];
+} | {
+    type: "pattern";
+    src: string;
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    fit?: ImageFit;
+    opacity?: number;
+};
+export type ExportFormat = "svg" | "html" | "png" | "jpg" | "mp4" | "webm" | "pdf" | "pptx";
+export type SequenceTransition = "cut" | "fade" | {
+    type: "cut" | "fade";
+    duration?: number;
+};
+export interface VisualCanvas {
+    width: number;
+    height: number;
+    background?: string;
+    duration?: number;
+    fps?: number;
+    space?: "2d" | "3d";
+    renderer?: "svg" | "three";
+}
+export interface AnimationValue {
+    from?: number | string;
+    to?: number | string;
+    duration?: number;
+    delay?: number;
+    ease?: "linear" | "ease-in" | "ease-out" | "ease-in-out" | string;
+    keyframes?: Array<[number, number | string]>;
+}
+export interface ShadowEffect {
+    dx: number;
+    dy: number;
+    blur: number;
+    color: string;
+    opacity?: number;
+}
+export interface VisualEffects {
+    blur?: number;
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    hueRotate?: number;
+    shadow?: ShadowEffect;
+}
+export type ClipShape = {
+    type: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius?: number;
+} | {
+    type: "circle";
+    cx: number;
+    cy: number;
+    radius: number;
+} | {
+    type: "path";
+    d: string;
+};
+export type MaskShape = {
+    type: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius?: number;
+    opacity?: number;
+} | {
+    type: "circle";
+    cx: number;
+    cy: number;
+    radius: number;
+    opacity?: number;
+} | {
+    type: "path";
+    d: string;
+    opacity?: number;
+};
+export interface VisualElementBase {
+    id?: string;
+    type: VisualElementType | string;
+    opacity?: number;
+    fill?: Paint;
+    stroke?: Paint;
+    strokeWidth?: number;
+    strokeCap?: "butt" | "round" | "square";
+    strokeJoin?: "miter" | "round" | "bevel";
+    miterLimit?: number;
+    dashArray?: number[];
+    dashOffset?: number;
+    drawStart?: number;
+    drawEnd?: number;
+    effects?: VisualEffects;
+    blendMode?: string;
+    rotation?: number;
+    scale?: number;
+    scaleX?: number;
+    scaleY?: number;
+    origin?: AnchorName | Point2;
+    clip?: ClipShape;
+    mask?: MaskShape;
+    animate?: Record<string, AnimationValue>;
+    children?: VisualElement[];
+    metadata?: Record<string, unknown>;
+}
+export interface RectElement extends VisualElementBase {
+    type: "rect";
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius?: number;
+}
+export interface CircleElement extends VisualElementBase {
+    type: "circle";
+    cx?: number;
+    cy?: number;
+    radius: number;
+    follow?: string;
+    progress?: number | AnimationValue;
+}
+export interface EllipseElement extends VisualElementBase {
+    type: "ellipse";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export interface PointElement extends VisualElementBase {
+    type: "point";
+    x: number;
+    y: number;
+}
+export interface LineElement extends VisualElementBase {
+    type: "line" | "arrow";
+    from: Endpoint;
+    to: Endpoint;
+    label?: string;
+    labelX?: number;
+    labelY?: number;
+}
+export interface ArcElement extends VisualElementBase {
+    type: "arc";
+    cx: number;
+    cy: number;
+    radius: number;
+    startAngle: number;
+    endAngle: number;
+    counterclockwise?: boolean;
+    closed?: boolean;
+}
+export interface CurveElement extends VisualElementBase {
+    type: "curve";
+    from: Endpoint;
+    to: Endpoint;
+    control1: Point2;
+    control2?: Point2;
+}
+export interface PolylineElement extends VisualElementBase {
+    type: "polyline";
+    points: Point2[];
+}
+export interface PolygonElement extends VisualElementBase {
+    type: "polygon";
+    points: Point2[];
+}
+export interface PathElement extends VisualElementBase {
+    type: "path";
+    d: string;
+}
+export interface TextElement extends VisualElementBase {
+    type: "text";
+    x: number;
+    y: number;
+    text?: string;
+    lines?: string[];
+    align?: Align;
+    valign?: VAlign;
+    fontSize?: number;
+    fontFamily?: string;
+    weight?: number | string;
+    fontStyle?: string;
+    lineHeight?: number;
+    letterSpacing?: number;
+    maxWidth?: number;
+    wrap?: boolean;
+    fit?: boolean;
+}
+export interface ImageElement extends VisualElementBase {
+    type: "image";
+    src: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fit?: ImageFit;
+    source?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        imageWidth: number;
+        imageHeight: number;
+    };
+}
+export interface GroupElement extends VisualElementBase {
+    type: "group";
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    children: VisualElement[];
+}
+export interface CuboidElement extends VisualElementBase {
+    type: "cuboid";
+    position: Point3;
+    size: Point3;
+}
+export interface SphereElement extends VisualElementBase {
+    type: "sphere";
+    position: Point3;
+    radius: number;
+}
+export interface PlaneElement extends VisualElementBase {
+    type: "plane";
+    position: Point3;
+    size: Point2;
+}
+export interface Line3dElement extends VisualElementBase {
+    type: "line3d";
+    from: Point3 | string;
+    to: Point3 | string;
+}
+export interface Text3dElement extends VisualElementBase {
+    type: "text3d";
+    text: string;
+    position: Point3;
+    fontSize?: number;
+}
+export interface LightElement extends VisualElementBase {
+    type: "light";
+    kind?: "ambient" | "directional" | "point";
+    position?: Point3;
+    intensity?: number;
+}
+export type VisualElement = RectElement | CircleElement | EllipseElement | PointElement | LineElement | ArcElement | CurveElement | PolylineElement | PolygonElement | PathElement | TextElement | ImageElement | GroupElement | CuboidElement | SphereElement | PlaneElement | Line3dElement | Text3dElement | LightElement;
+export type Kernel2dType = "group" | "path" | "text" | "image" | "point";
+export type Kernel3dType = "group3d" | "mesh3d" | "line3d" | "text3d" | "point3d" | "light";
+export type KernelElementType = Kernel2dType | Kernel3dType;
+export interface KernelElementBase extends Omit<VisualElementBase, "type" | "children"> {
+    type: KernelElementType;
+    children?: KernelElement[];
+}
+export interface KernelPathElement extends Omit<PathElement, "type" | "children"> {
+    type: "path";
+}
+export interface KernelTextElement extends Omit<TextElement, "type" | "children"> {
+    type: "text";
+}
+export interface KernelImageElement extends Omit<ImageElement, "type" | "children"> {
+    type: "image";
+}
+export interface KernelPointElement extends Omit<PointElement, "type" | "children"> {
+    type: "point";
+}
+export interface KernelGroupElement extends Omit<GroupElement, "type" | "children"> {
+    type: "group";
+    children: KernelElement[];
+}
+export interface KernelPoint3dElement extends KernelElementBase {
+    type: "point3d";
+    position: Point3;
+}
+export interface KernelMesh3dElement extends KernelElementBase {
+    type: "mesh3d";
+    vertices: Point3[];
+    indices: number[];
+    faces?: number[][];
+    position?: Point3;
+    rotationX?: number;
+    rotationY?: number;
+    rotationZ?: number;
+    scaleZ?: number;
+}
+export interface KernelLine3dElement extends Omit<Line3dElement, "type" | "children"> {
+    type: "line3d";
+}
+export interface KernelText3dElement extends Omit<Text3dElement, "type" | "children"> {
+    type: "text3d";
+}
+export interface KernelLightElement extends Omit<LightElement, "type" | "children"> {
+    type: "light";
+}
+export interface KernelGroup3dElement extends KernelElementBase {
+    type: "group3d";
+    position?: Point3;
+    rotationX?: number;
+    rotationY?: number;
+    rotationZ?: number;
+    scaleZ?: number;
+    children: KernelElement[];
+}
+export type KernelElement = KernelPathElement | KernelTextElement | KernelImageElement | KernelPointElement | KernelGroupElement | KernelPoint3dElement | KernelMesh3dElement | KernelLine3dElement | KernelText3dElement | KernelLightElement | KernelGroup3dElement;
+export interface VisualScene {
+    id?: string;
+    canvas?: Partial<VisualCanvas>;
+    elements: VisualElement[];
+    steps?: VisualDeckStep[];
+}
+export interface VisualSequenceClip {
+    scene: string;
+    duration: number;
+    transition?: SequenceTransition;
+}
+export interface VisualSequence {
+    id: string;
+    clips: VisualSequenceClip[];
+    export?: {
+        format?: ExportFormat;
+        fps?: number;
+    };
+}
+export interface VisualDeckStep {
+    id: string;
+    show?: string[];
+    hide?: string[];
+    duration?: number;
+}
+export type VisualPatchOperation = {
+    op: "add";
+    element: VisualElement;
+    index?: number;
+} | {
+    op: "update";
+    id: string;
+    set: Partial<VisualElement>;
+} | {
+    op: "remove";
+    id: string;
+} | {
+    op: "replace";
+    id: string;
+    element: VisualElement;
+} | {
+    op: "move";
+    id: string;
+    x?: number;
+    y?: number;
+    cx?: number;
+    cy?: number;
+} | {
+    op: "reorder";
+    id: string;
+    index: number;
+};
+export interface VisualDocument {
+    version: 1;
+    canvas: VisualCanvas;
+    elements?: VisualElement[];
+    scenes?: Record<string, VisualScene>;
+    sequences?: Record<string, VisualSequence>;
+    imports?: Record<string, string>;
+    assets?: Record<string, string>;
+    exports?: Record<string, {
+        format: ExportFormat;
+        sequence?: string;
+        scene?: string;
+    }>;
+}
+export interface ResolvedVisualDocument extends VisualDocument {
+    elements: VisualElement[];
+}
+export interface KernelVisualDocument extends Omit<VisualDocument, "elements" | "scenes" | "sequences"> {
+    elements: KernelElement[];
+}
+export interface ValidationIssue {
+    path: string;
+    code: string;
+    message: string;
+    suggestion?: string;
+}
+export interface ValidationWarning {
+    path: string;
+    code: string;
+    message: string;
+    suggestion?: string;
+}
+export interface ValidationResult {
+    ok: boolean;
+    issues: ValidationIssue[];
+    warnings: ValidationWarning[];
+}
+export interface RenderOptions {
+    time?: number;
+    transparent?: boolean;
+    threeRuntime?: string;
+}
+export interface ExportOptions extends RenderOptions {
+    format?: ExportFormat;
+    scene?: string;
+    sequence?: string;
+}
+export interface VisualSymbol {
+    id: string;
+    type: VisualElementType | string;
+    file?: string;
+    scene?: string;
+    path: string;
+}

package/dist/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/utils.d.ts

@@ -0,0 +1,25 @@
+import type { AnchorName, Point2, TextElement, VisualElement } from "./types";
+export declare const CORE_TYPES: Set<string>;
+export declare const THREE_TYPES: Set<string>;
+export declare const COMPOUND_TYPES: Set<string>;
+export declare const ANCHORS: Set<string>;
+export declare function isFiniteNumber(value: unknown): value is number;
+export declare function isPoint2(value: unknown): value is Point2;
+export declare function isPoint2Array(value: unknown, minLength: number): value is Point2[];
+export declare function clone<T>(value: T): T;
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function elementBox(element: VisualElement): Box | undefined;
+export declare function pointsBox(points: Point2[] | undefined): Box | undefined;
+export declare function textLines(element: Pick<TextElement, "text" | "lines">): string[];
+export declare function anchorPoint(box: Box, anchor: AnchorName): Point2;
+export declare function parseReference(ref: string): {
+    id: string;
+    anchor: AnchorName;
+};
+export declare function flattenElements(elements: VisualElement[]): VisualElement[];
+export declare function easing(name: string | undefined, t: number): number;

package/dist/src/utils.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ANCHORS = exports.COMPOUND_TYPES = exports.THREE_TYPES = exports.CORE_TYPES = void 0;
+exports.isFiniteNumber = isFiniteNumber;
+exports.isPoint2 = isPoint2;
+exports.isPoint2Array = isPoint2Array;
+exports.clone = clone;
+exports.elementBox = elementBox;
+exports.pointsBox = pointsBox;
+exports.textLines = textLines;
+exports.anchorPoint = anchorPoint;
+exports.parseReference = parseReference;
+exports.flattenElements = flattenElements;
+exports.easing = easing;
+exports.CORE_TYPES = new Set(["rect", "circle", "ellipse", "point", "line", "arrow", "arc", "curve", "polyline", "polygon", "path", "text", "image", "group"]);
+exports.THREE_TYPES = new Set(["cuboid", "sphere", "plane", "line3d", "text3d", "light"]);
+exports.COMPOUND_TYPES = new Set(["node", "flow", "packet", "callout", "row", "column", "grid"]);
+exports.ANCHORS = new Set(["center", "left", "right", "top", "bottom", "top-left", "top-right", "bottom-left", "bottom-right"]);
+function isFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value);
+}
+function isPoint2(value) {
+    return Array.isArray(value) && value.length >= 2 && isFiniteNumber(value[0]) && isFiniteNumber(value[1]);
+}
+function isPoint2Array(value, minLength) {
+    return Array.isArray(value) && value.length >= minLength && value.every((point) => isPoint2(point));
+}
+function clone(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function elementBox(element) {
+    switch (element.type) {
+        case "rect":
+        case "image":
+        case "group":
+            if (isFiniteNumber(element.x) && isFiniteNumber(element.y) && isFiniteNumber(element.width) && isFiniteNumber(element.height)) {
+                return { x: element.x, y: element.y, width: element.width, height: element.height };
+            }
+            return undefined;
+        case "text": {
+            if (!isFiniteNumber(element.x) || !isFiniteNumber(element.y))
+                return undefined;
+            const fontSize = isFiniteNumber(element.fontSize) ? element.fontSize : 16;
+            const lines = textLines(element);
+            const longest = lines.reduce((max, line) => Math.max(max, line.length), 0);
+            const lineHeight = isFiniteNumber(element.lineHeight) ? element.lineHeight : 1.2;
+            const width = isFiniteNumber(element.maxWidth) ? element.maxWidth : Math.max(1, longest * fontSize * 0.55);
+            const height = Math.max(1, lines.length) * fontSize * lineHeight;
+            const x = element.align === "center" ? element.x - width / 2 : element.align === "right" ? element.x - width : element.x;
+            const y = element.valign === "middle" ? element.y - height / 2 : element.valign === "bottom" ? element.y - height : element.y;
+            return { x, y, width, height };
+        }
+        case "point":
+            if (isFiniteNumber(element.x) && isFiniteNumber(element.y)) {
+                return { x: element.x, y: element.y, width: 0, height: 0 };
+            }
+            return undefined;
+        case "circle":
+            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.radius)) {
+                return { x: element.cx - element.radius, y: element.cy - element.radius, width: element.radius * 2, height: element.radius * 2 };
+            }
+            return undefined;
+        case "ellipse":
+            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.rx) && isFiniteNumber(element.ry)) {
+                return { x: element.cx - element.rx, y: element.cy - element.ry, width: element.rx * 2, height: element.ry * 2 };
+            }
+            return undefined;
+        case "arc":
+            if (isFiniteNumber(element.cx) && isFiniteNumber(element.cy) && isFiniteNumber(element.radius)) {
+                return { x: element.cx - element.radius, y: element.cy - element.radius, width: element.radius * 2, height: element.radius * 2 };
+            }
+            return undefined;
+        case "curve": {
+            const points = [element.from, element.control1, element.control2, element.to].filter(isPoint2);
+            return pointsBox(points);
+        }
+        case "polyline":
+        case "polygon":
+            return pointsBox(element.points);
+        default:
+            return undefined;
+    }
+}
+function pointsBox(points) {
+    if (!Array.isArray(points) || !points.length)
+        return undefined;
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const point of points) {
+        if (!isPoint2(point))
+            return undefined;
+        minX = Math.min(minX, point[0]);
+        minY = Math.min(minY, point[1]);
+        maxX = Math.max(maxX, point[0]);
+        maxY = Math.max(maxY, point[1]);
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function textLines(element) {
+    if (Array.isArray(element.lines) && element.lines.length)
+        return element.lines.map((line) => String(line));
+    return String(element.text ?? "").split(/\r?\n/);
+}
+function anchorPoint(box, anchor) {
+    switch (anchor) {
+        case "left":
+            return [box.x, box.y + box.height / 2];
+        case "right":
+            return [box.x + box.width, box.y + box.height / 2];
+        case "top":
+            return [box.x + box.width / 2, box.y];
+        case "bottom":
+            return [box.x + box.width / 2, box.y + box.height];
+        case "top-left":
+            return [box.x, box.y];
+        case "top-right":
+            return [box.x + box.width, box.y];
+        case "bottom-left":
+            return [box.x, box.y + box.height];
+        case "bottom-right":
+            return [box.x + box.width, box.y + box.height];
+        case "center":
+        default:
+            return [box.x + box.width / 2, box.y + box.height / 2];
+    }
+}
+function parseReference(ref) {
+    const [id, rawAnchor] = ref.split(".");
+    const anchor = (rawAnchor || "center");
+    return { id: id || "", anchor: exports.ANCHORS.has(anchor) ? anchor : "center" };
+}
+function flattenElements(elements) {
+    const out = [];
+    for (const element of elements) {
+        out.push(element);
+        if (element.type === "group" && Array.isArray(element.children)) {
+            out.push(...flattenElements(element.children));
+        }
+    }
+    return out;
+}
+function easing(name, t) {
+    const x = Math.max(0, Math.min(1, t));
+    switch (name) {
+        case "ease-in":
+            return x * x;
+        case "ease-out":
+            return 1 - (1 - x) * (1 - x);
+        case "ease-in-out":
+            return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+        case "linear":
+        default:
+            return x;
+    }
+}

package/dist/src/validate.d.ts

@@ -0,0 +1,2 @@
+import type { ValidationResult, VisualDocument } from "./types";
+export declare function validateVisualDocument(document: VisualDocument): ValidationResult;