sketchmark 2.0.0 → 2.1.1

package/dist/src/schema.js

@@ -1,139 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateVisualSchema = generateVisualSchema;
-const shapes_1 = require("./shapes");
 function generateVisualSchema() {
-    const shapeDefinitions = (0, shapes_1.registeredAuthoringShapeDefinitions)();
-    const elementProperties = {
-        id: { type: "string" },
-        type: { enum: shapeDefinitions.map((definition) => definition.type) },
-        opacity: { type: "number" },
-        fill: { $ref: "#/$defs/paint" },
-        stroke: { $ref: "#/$defs/paint" },
-        strokeWidth: { type: "number" },
-        dashArray: { type: "array", items: { type: "number" } },
-        strokeCap: { enum: ["butt", "round", "square"] },
-        strokeJoin: { enum: ["miter", "round", "bevel"] },
-        miterLimit: { type: "number" },
-        dashOffset: { type: "number" },
-        drawStart: { type: "number" },
-        drawEnd: { type: "number" },
-        effects: { $ref: "#/$defs/effects" },
-        blendMode: { type: "string" },
-        rotation: { type: "number" },
-        scale: { type: "number" },
-        scaleX: { type: "number" },
-        scaleY: { type: "number" },
-        origin: { oneOf: [{ type: "string" }, { $ref: "#/$defs/point2" }] },
-        clip: { $ref: "#/$defs/clipShape" },
-        mask: { $ref: "#/$defs/clipShape" },
-        animate: { type: "object", additionalProperties: { $ref: "#/$defs/animationValue" } },
-        metadata: { type: "object", additionalProperties: true },
-        align: { enum: ["left", "center", "right"] },
-        valign: { enum: ["top", "middle", "bottom"] },
-        fontSize: { type: "number" },
-        fontFamily: { type: "string" },
-        weight: { oneOf: [{ type: "number" }, { type: "string" }] },
-        fontStyle: { type: "string" },
-        lineHeight: { type: "number" },
-        letterSpacing: { type: "number" },
-        maxWidth: { type: "number" },
-        wrap: { type: "boolean" },
-        label: { type: "string" },
-        labelX: { type: "number" },
-        labelY: { type: "number" },
-        progress: { oneOf: [{ type: "number" }, { $ref: "#/$defs/animationValue" }] },
-        follow: { type: "string" },
-        rotationX: { type: "number" },
-        rotationY: { type: "number" },
-        rotationZ: { type: "number" },
-        scaleZ: { type: "number" }
-    };
-    for (const definition of shapeDefinitions) {
-        for (const [key, value] of Object.entries(definition.schema?.properties ?? {})) {
-            elementProperties[key] = mergeSchemaProperty(elementProperties[key], value);
-        }
-    }
     return {
         $schema: "https://json-schema.org/draft/2020-12/schema",
         $id: "https://sketchmark.dev/schema/visual.schema.json",
-        title: "Sketchmark Primitive Visual Document",
+        title: "Sketchmark Render Kernel Document",
         type: "object",
         required: ["version", "canvas"],
-        additionalProperties: true,
+        additionalProperties: false,
         properties: {
             version: { const: 1 },
             canvas: {
                 type: "object",
                 required: ["width", "height"],
-                additionalProperties: true,
+                additionalProperties: false,
                 properties: {
                     width: { type: "number" },
                     height: { type: "number" },
                     background: { type: "string" },
-                    duration: { type: "number" },
-                    fps: { type: "number" },
-                    space: { enum: ["2d", "3d"] },
-                    renderer: { enum: ["svg", "three"] }
+                    duration: { type: "number", minimum: 0 },
+                    fps: { type: "number", exclusiveMinimum: 0 }
                 }
             },
             elements: {
                 type: "array",
                 items: { $ref: "#/$defs/element" }
-            },
-            imports: {
-                type: "object",
-                additionalProperties: { type: "string" }
-            },
-            assets: {
-                type: "object",
-                additionalProperties: { type: "string" }
-            },
-            exports: {
-                type: "object",
-                additionalProperties: {
-                    type: "object",
-                    properties: {
-                        format: { enum: ["svg", "html", "png", "jpg", "mp4", "webm", "pdf", "pptx"] },
-                        sequence: { type: "string" },
-                        scene: { type: "string" }
-                    },
-                    additionalProperties: true
-                }
-            },
-            scenes: {
-                type: "object",
-                additionalProperties: {
-                    type: "object",
-                    required: ["elements"],
-                    properties: {
-                        canvas: { type: "object" },
-                        elements: {
-                            type: "array",
-                            items: { $ref: "#/$defs/element" }
-                        },
-                        steps: {
-                            type: "array",
-                            items: { $ref: "#/$defs/deckStep" }
-                        }
-                    },
-                    additionalProperties: true
-                }
-            },
-            sequences: {
-                type: "object",
-                additionalProperties: {
-                    type: "object",
-                    required: ["id", "clips"],
-                    properties: {
-                        id: { type: "string" },
-                        clips: {
-                            type: "array",
-                            items: { $ref: "#/$defs/clip" }
-                        }
-                    },
-                    additionalProperties: true
-                }
             }
         },
         $defs: {
@@ -141,27 +33,34 @@ function generateVisualSchema() {
                 type: "array",
                 minItems: 2,
                 maxItems: 2,
-                items: { type: "number" }
-            },
-            point3: {
-                type: "array",
-                minItems: 3,
-                maxItems: 3,
-                items: { type: "number" }
+                prefixItems: [{ type: "number" }, { type: "number" }]
             },
-            endpoint: {
-                oneOf: [{ $ref: "#/$defs/point2" }, { type: "string" }]
+            gradientStop: {
+                oneOf: [
+                    {
+                        type: "array",
+                        minItems: 2,
+                        maxItems: 2,
+                        prefixItems: [{ type: "number", minimum: 0, maximum: 1 }, { type: "string" }]
+                    },
+                    {
+                        type: "object",
+                        required: ["offset", "color"],
+                        additionalProperties: false,
+                        properties: {
+                            offset: { type: "number", minimum: 0, maximum: 1 },
+                            color: { type: "string" }
+                        }
+                    }
+                ]
             },
             paint: paintSchema(),
-            imageFit: {
-                enum: ["fill", "contain", "cover"]
-            },
-            gradientStops: gradientStopsSchema(),
             effects: effectsSchema(),
-            clipShape: clipShapeSchema(),
+            imageFit: { enum: ["fill", "contain", "cover"] },
             imageSource: {
                 type: "object",
                 required: ["x", "y", "width", "height", "imageWidth", "imageHeight"],
+                additionalProperties: false,
                 properties: {
                     x: { type: "number" },
                     y: { type: "number" },
@@ -169,100 +68,206 @@ function generateVisualSchema() {
                     height: { type: "number" },
                     imageWidth: { type: "number" },
                     imageHeight: { type: "number" }
-                },
-                additionalProperties: true
+                }
             },
-            animationValue: {
+            clipShape: {
                 type: "object",
-                additionalProperties: true,
+                required: ["type", "d"],
+                additionalProperties: false,
                 properties: {
-                    from: { oneOf: [{ type: "number" }, { type: "string" }] },
-                    to: { oneOf: [{ type: "number" }, { type: "string" }] },
-                    duration: { type: "number" },
-                    delay: { type: "number" },
-                    ease: { type: "string" },
-                    keyframes: {
+                    type: { const: "path" },
+                    d: { type: "string" }
+                }
+            },
+            maskShape: {
+                type: "object",
+                required: ["type", "d"],
+                additionalProperties: false,
+                properties: {
+                    type: { const: "path" },
+                    d: { type: "string" },
+                    opacity: { type: "number", minimum: 0, maximum: 1 }
+                }
+            },
+            timelineValue: {
+                oneOf: [
+                    { type: "number" },
+                    { type: "string" },
+                    { type: "array", items: { type: "number" } },
+                    { type: "array", items: { type: "string" } },
+                    { type: "object", additionalProperties: true }
+                ]
+            },
+            timelineCurve: {
+                oneOf: [
+                    {
+                        type: "object",
+                        required: ["type", "points"],
+                        additionalProperties: false,
+                        properties: {
+                            type: { const: "graph" },
+                            points: {
+                                type: "array",
+                                minItems: 2,
+                                items: { $ref: "#/$defs/point2" }
+                            }
+                        }
+                    },
+                    {
+                        type: "object",
+                        required: ["type", "x1", "y1", "x2", "y2"],
+                        additionalProperties: false,
+                        properties: {
+                            type: { const: "cubicBezier" },
+                            x1: { type: "number", minimum: 0, maximum: 1 },
+                            y1: { type: "number" },
+                            x2: { type: "number", minimum: 0, maximum: 1 },
+                            y2: { type: "number" }
+                        }
+                    },
+                    {
+                        type: "object",
+                        required: ["type"],
+                        additionalProperties: false,
+                        properties: {
+                            type: { const: "hold" }
+                        }
+                    }
+                ]
+            },
+            timelineKeyframe: {
+                oneOf: [
+                    {
                         type: "array",
-                        items: {
-                            type: "array",
-                            minItems: 2,
-                            maxItems: 2,
-                            prefixItems: [{ type: "number" }, { oneOf: [{ type: "number" }, { type: "string" }] }]
+                        minItems: 2,
+                        maxItems: 2,
+                        prefixItems: [{ type: "number" }, { $ref: "#/$defs/timelineValue" }]
+                    },
+                    {
+                        type: "object",
+                        required: ["time", "value"],
+                        additionalProperties: false,
+                        properties: {
+                            time: { type: "number" },
+                            value: { $ref: "#/$defs/timelineValue" },
+                            in: { $ref: "#/$defs/timelineCurve" },
+                            out: { $ref: "#/$defs/timelineCurve" },
+                            interpolation: { $ref: "#/$defs/timelineCurve" }
                         }
                     }
-                }
+                ]
             },
-            clip: {
+            timelineTrack: {
                 type: "object",
-                required: ["scene", "duration"],
+                required: ["keyframes"],
+                additionalProperties: false,
                 properties: {
-                    scene: { type: "string" },
-                    duration: { type: "number" },
-                    transition: {
-                        oneOf: [
-                            { enum: ["cut", "fade"] },
-                            {
-                                type: "object",
-                                required: ["type"],
-                                properties: {
-                                    type: { enum: ["cut", "fade"] },
-                                    duration: { type: "number" }
-                                },
-                                additionalProperties: true
-                            }
-                        ]
+                    curve: { $ref: "#/$defs/timelineCurve" },
+                    ease: { type: "string" },
+                    keyframes: {
+                        type: "array",
+                        minItems: 1,
+                        items: { $ref: "#/$defs/timelineKeyframe" }
                     }
-                },
-                additionalProperties: true
+                }
             },
-            deckStep: {
+            timeline: {
                 type: "object",
-                required: ["id"],
+                additionalProperties: false,
                 properties: {
-                    id: { type: "string" },
-                    show: { type: "array", items: { type: "string" } },
-                    hide: { type: "array", items: { type: "string" } },
-                    duration: { type: "number" }
-                },
-                additionalProperties: true
+                    start: { type: "number", minimum: 0 },
+                    end: { type: "number", minimum: 0 },
+                    tracks: {
+                        type: "object",
+                        additionalProperties: { $ref: "#/$defs/timelineTrack" }
+                    }
+                }
             },
             element: {
-                type: "object",
-                required: ["type"],
-                additionalProperties: true,
-                properties: elementProperties
+                oneOf: [
+                    elementSchema("path", {
+                        d: { type: "string" },
+                        x: { type: "number" },
+                        y: { type: "number" }
+                    }, ["d"]),
+                    elementSchema("text", {
+                        x: { type: "number" },
+                        y: { type: "number" },
+                        text: { type: "string" },
+                        lines: { type: "array", items: { type: "string" } },
+                        align: { enum: ["left", "center", "right"] },
+                        valign: { enum: ["top", "middle", "bottom"] },
+                        fontSize: { type: "number" },
+                        fontFamily: { type: "string" },
+                        weight: { oneOf: [{ type: "number" }, { type: "string" }] },
+                        fontStyle: { type: "string" },
+                        lineHeight: { type: "number" },
+                        letterSpacing: { type: "number" },
+                        maxWidth: { type: "number" },
+                        wrap: { type: "boolean" }
+                    }, ["x", "y"]),
+                    elementSchema("image", {
+                        src: { type: "string" },
+                        x: { type: "number" },
+                        y: { type: "number" },
+                        width: { type: "number" },
+                        height: { type: "number" },
+                        fit: { $ref: "#/$defs/imageFit" },
+                        source: { $ref: "#/$defs/imageSource" }
+                    }, ["src", "x", "y", "width", "height"]),
+                    elementSchema("point", {
+                        x: { type: "number" },
+                        y: { type: "number" }
+                    }, ["x", "y"]),
+                    elementSchema("group", {
+                        x: { type: "number" },
+                        y: { type: "number" },
+                        width: { type: "number" },
+                        height: { type: "number" },
+                        children: { type: "array", items: { $ref: "#/$defs/element" } }
+                    }, ["x", "y", "children"])
+                ]
             }
         }
     };
 }
-function mergeSchemaProperty(existing, incoming) {
-    if (existing === undefined)
-        return incoming;
-    if (schemaKey(existing) === schemaKey(incoming))
-        return existing;
-    const items = schemaAlternatives(existing);
-    const incomingItems = schemaAlternatives(incoming);
-    for (const item of incomingItems) {
-        if (!items.some((existingItem) => schemaKey(existingItem) === schemaKey(item)))
-            items.push(item);
-    }
-    return { oneOf: items };
-}
-function schemaAlternatives(value) {
-    if (value && typeof value === "object" && Array.isArray(value.oneOf)) {
-        return [...(value.oneOf)];
-    }
-    return [value];
-}
-function schemaKey(value) {
-    return JSON.stringify(sortJson(value));
+function elementSchema(type, properties, required) {
+    return {
+        type: "object",
+        required: ["type", ...required],
+        additionalProperties: false,
+        properties: {
+            ...commonElementProperties(),
+            type: { const: type },
+            ...properties
+        }
+    };
 }
-function sortJson(value) {
-    if (Array.isArray(value))
-        return value.map(sortJson);
-    if (!value || typeof value !== "object")
-        return value;
-    return Object.fromEntries(Object.entries(value).sort(([left], [right]) => left.localeCompare(right)).map(([key, item]) => [key, sortJson(item)]));
+function commonElementProperties() {
+    return {
+        id: { type: "string", pattern: "^[A-Za-z_][A-Za-z0-9_.-]*$" },
+        opacity: { type: "number" },
+        fill: { $ref: "#/$defs/paint" },
+        stroke: { $ref: "#/$defs/paint" },
+        strokeWidth: { type: "number" },
+        strokeCap: { enum: ["butt", "round", "square"] },
+        strokeJoin: { enum: ["miter", "round", "bevel"] },
+        miterLimit: { type: "number" },
+        dashArray: { type: "array", items: { type: "number" } },
+        dashOffset: { type: "number" },
+        drawStart: { type: "number" },
+        drawEnd: { type: "number" },
+        effects: { $ref: "#/$defs/effects" },
+        blendMode: { type: "string" },
+        rotation: { type: "number" },
+        scale: { type: "number" },
+        scaleX: { type: "number" },
+        scaleY: { type: "number" },
+        origin: { $ref: "#/$defs/point2" },
+        clip: { $ref: "#/$defs/clipShape" },
+        mask: { $ref: "#/$defs/maskShape" },
+        timeline: { $ref: "#/$defs/timeline" }
+    };
 }
 function paintSchema() {
     return {
@@ -271,29 +276,30 @@ function paintSchema() {
             {
                 type: "object",
                 required: ["type", "from", "to", "stops"],
+                additionalProperties: false,
                 properties: {
                     type: { const: "linearGradient" },
                     from: { $ref: "#/$defs/point2" },
                     to: { $ref: "#/$defs/point2" },
-                    stops: { $ref: "#/$defs/gradientStops" }
-                },
-                additionalProperties: true
+                    stops: { type: "array", minItems: 2, items: { $ref: "#/$defs/gradientStop" } }
+                }
             },
             {
                 type: "object",
                 required: ["type", "center", "radius", "stops"],
+                additionalProperties: false,
                 properties: {
                     type: { const: "radialGradient" },
                     center: { $ref: "#/$defs/point2" },
                     radius: { type: "number" },
                     focus: { $ref: "#/$defs/point2" },
-                    stops: { $ref: "#/$defs/gradientStops" }
-                },
-                additionalProperties: true
+                    stops: { type: "array", minItems: 2, items: { $ref: "#/$defs/gradientStop" } }
+                }
             },
             {
                 type: "object",
                 required: ["type", "src", "width", "height"],
+                additionalProperties: false,
                 properties: {
                     type: { const: "pattern" },
                     src: { type: "string" },
@@ -303,40 +309,15 @@ function paintSchema() {
                     height: { type: "number" },
                     fit: { $ref: "#/$defs/imageFit" },
                     opacity: { type: "number" }
-                },
-                additionalProperties: true
+                }
             }
         ]
     };
 }
-function gradientStopsSchema() {
-    return {
-        type: "array",
-        minItems: 2,
-        items: {
-            oneOf: [
-                {
-                    type: "array",
-                    minItems: 2,
-                    maxItems: 2,
-                    prefixItems: [{ type: "number" }, { type: "string" }]
-                },
-                {
-                    type: "object",
-                    required: ["offset", "color"],
-                    properties: {
-                        offset: { type: "number" },
-                        color: { type: "string" }
-                    },
-                    additionalProperties: true
-                }
-            ]
-        }
-    };
-}
 function effectsSchema() {
     return {
         type: "object",
+        additionalProperties: false,
         properties: {
             blur: { type: "number" },
             brightness: { type: "number" },
@@ -346,58 +327,15 @@ function effectsSchema() {
             shadow: {
                 type: "object",
                 required: ["dx", "dy", "blur", "color"],
+                additionalProperties: false,
                 properties: {
                     dx: { type: "number" },
                     dy: { type: "number" },
                     blur: { type: "number" },
                     color: { type: "string" },
                     opacity: { type: "number" }
-                },
-                additionalProperties: true
-            }
-        },
-        additionalProperties: true
-    };
-}
-function clipShapeSchema() {
-    return {
-        oneOf: [
-            {
-                type: "object",
-                required: ["type", "x", "y", "width", "height"],
-                properties: {
-                    type: { const: "rect" },
-                    x: { type: "number" },
-                    y: { type: "number" },
-                    width: { type: "number" },
-                    height: { type: "number" },
-                    radius: { type: "number" },
-                    opacity: { type: "number" }
-                },
-                additionalProperties: true
-            },
-            {
-                type: "object",
-                required: ["type", "cx", "cy", "radius"],
-                properties: {
-                    type: { const: "circle" },
-                    cx: { type: "number" },
-                    cy: { type: "number" },
-                    radius: { type: "number" },
-                    opacity: { type: "number" }
-                },
-                additionalProperties: true
-            },
-            {
-                type: "object",
-                required: ["type", "d"],
-                properties: {
-                    type: { const: "path" },
-                    d: { type: "string" },
-                    opacity: { type: "number" }
-                },
-                additionalProperties: true
+                }
             }
-        ]
+        }
     };
 }