sketchmark 2.0.0 → 2.1.0

package/dist/src/motion.js

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyMotionDrivers = applyMotionDrivers;
+exports.evaluateDriver = evaluateDriver;
+exports.evaluateExpression = evaluateExpression;
+const path_sampling_1 = require("./path-sampling");
+const shapes_1 = require("./shapes");
+const utils_1 = require("./utils");
+const utils_2 = require("./utils");
+function applyMotionDrivers(document, time) {
+    const next = (0, utils_1.clone)(document);
+    const drivers = next.motion?.drivers ?? [];
+    if (!drivers.length)
+        return next;
+    const elements = next.elements ?? [];
+    for (const driver of drivers) {
+        const value = evaluateDriver(driver, elements, time);
+        if (value !== undefined)
+            applyDriverValue(elements, driver.target, value);
+    }
+    return next;
+}
+function evaluateDriver(driver, elements, time) {
+    if (driver.expr !== undefined)
+        return evaluateExpression(driver.expr, elements, time);
+    if (Array.isArray(driver.keyframes))
+        return interpolateKeyframes(driver.keyframes, time, driver.ease);
+    return undefined;
+}
+function evaluateExpression(input, elements, time) {
+    if (typeof input === "number" || typeof input === "string" || isMotionPoint(input))
+        return (0, utils_1.clone)(input);
+    if (!input || typeof input !== "object" || Array.isArray(input))
+        return 0;
+    switch (input.op) {
+        case "time":
+            return time;
+        case "prop":
+            return propertyValue(elements, input.target, input.property);
+        case "point": {
+            const [x, y] = input.args;
+            return [numberValue(evaluateExpression(x, elements, time)), numberValue(evaluateExpression(y, elements, time))];
+        }
+        case "add":
+            return input.args.reduce((total, item) => addValues(total, evaluateExpression(item, elements, time)), 0);
+        case "sub": {
+            const [first, ...rest] = input.args;
+            return rest.reduce((total, item) => subValues(total, evaluateExpression(item, elements, time)), evaluateExpression(first ?? 0, elements, time));
+        }
+        case "mul":
+            return input.args.reduce((total, item) => mulValues(total, evaluateExpression(item, elements, time)), 1);
+        case "div": {
+            const [first, ...rest] = input.args;
+            return rest.reduce((total, item) => divValues(total, evaluateExpression(item, elements, time)), evaluateExpression(first ?? 0, elements, time));
+        }
+        case "mod": {
+            const [left, right] = input.args;
+            const divisor = numberValue(evaluateExpression(right ?? 1, elements, time));
+            return divisor === 0 ? 0 : numberValue(evaluateExpression(left ?? 0, elements, time)) % divisor;
+        }
+        case "min":
+            return Math.min(...input.args.map((item) => numberValue(evaluateExpression(item, elements, time))));
+        case "max":
+            return Math.max(...input.args.map((item) => numberValue(evaluateExpression(item, elements, time))));
+        case "sin":
+            return Math.sin(numberValue(evaluateExpression(input.arg, elements, time)));
+        case "cos":
+            return Math.cos(numberValue(evaluateExpression(input.arg, elements, time)));
+        case "abs":
+            return absValue(evaluateExpression(input.arg, elements, time));
+        case "clamp":
+            return Math.max(numberValue(evaluateExpression(input.min, elements, time)), Math.min(numberValue(evaluateExpression(input.max, elements, time)), numberValue(evaluateExpression(input.value, elements, time))));
+        case "lerp":
+            return interpolateValue(evaluateExpression(input.from, elements, time), evaluateExpression(input.to, elements, time), numberValue(evaluateExpression(input.t, elements, time)));
+        case "bbox": {
+            const target = findElement(elements, input.target);
+            const box = target ? (0, utils_1.elementBox)(target) : undefined;
+            return box ? box[input.property] : 0;
+        }
+        case "anchor": {
+            const target = findElement(elements, input.target);
+            const box = target ? (0, utils_1.elementBox)(target) : undefined;
+            const point = box ? (0, utils_1.anchorPoint)(box, input.anchor) : [0, 0];
+            if (input.offset === undefined)
+                return point;
+            return point2Value(addValues(point, evaluateExpression(input.offset, elements, time)));
+        }
+        case "pointAt":
+            return pointOnTarget(elements, input.target, numberValue(evaluateExpression(input.progress, elements, time))) ?? [0, 0];
+        case "pathLength": {
+            const path = firstKernelPathForTarget(elements, input.target);
+            return path ? (0, path_sampling_1.pathLength)(path.d) : 0;
+        }
+        default:
+            return 0;
+    }
+}
+function interpolateKeyframes(keyframes, time, ease) {
+    const frames = keyframes
+        .filter((frame) => Array.isArray(frame) && (0, utils_1.isFiniteNumber)(frame[0]))
+        .slice()
+        .sort((left, right) => left[0] - right[0]);
+    if (!frames.length)
+        return undefined;
+    if (time <= frames[0][0])
+        return (0, utils_1.clone)(frames[0][1]);
+    for (let index = 1; index < frames.length; index += 1) {
+        const prev = frames[index - 1];
+        const next = frames[index];
+        if (time <= next[0]) {
+            const span = Math.max(0.000001, next[0] - prev[0]);
+            return interpolateValue(prev[1], next[1], (0, utils_2.easing)(ease, (time - prev[0]) / span));
+        }
+    }
+    return (0, utils_1.clone)(frames[frames.length - 1][1]);
+}
+function interpolateValue(from, to, t) {
+    const eased = Math.max(0, Math.min(1, t));
+    if (typeof from === "number" && typeof to === "number")
+        return from + (to - from) * eased;
+    if (isMotionPoint(from) && isMotionPoint(to))
+        return from.map((value, index) => value + (Number(to[index]) - value) * eased);
+    if (typeof from === "string" && typeof to === "string") {
+        const fromColor = parseHexColor(from);
+        const toColor = parseHexColor(to);
+        if (fromColor && toColor) {
+            return `#${hex(Math.round(fromColor[0] + (toColor[0] - fromColor[0]) * eased))}${hex(Math.round(fromColor[1] + (toColor[1] - fromColor[1]) * eased))}${hex(Math.round(fromColor[2] + (toColor[2] - fromColor[2]) * eased))}`;
+        }
+    }
+    return eased < 1 ? (0, utils_1.clone)(from) : (0, utils_1.clone)(to);
+}
+function applyDriverValue(elements, targetPath, value) {
+    const separator = targetPath.indexOf(".");
+    if (separator <= 0)
+        return;
+    const id = targetPath.slice(0, separator);
+    const property = targetPath.slice(separator + 1);
+    const target = findElement(elements, id);
+    if (!target)
+        return;
+    const record = target;
+    if (property === "position" && (0, utils_1.isPoint2)(value)) {
+        if ("cx" in record || target.type === "circle" || target.type === "ellipse" || target.type === "arc") {
+            record.cx = value[0];
+            record.cy = value[1];
+        }
+        else {
+            record.x = value[0];
+            record.y = value[1];
+        }
+        return;
+    }
+    record[property] = (0, utils_1.clone)(value);
+}
+function propertyValue(elements, id, property) {
+    const target = findElement(elements, id);
+    if (!target)
+        return 0;
+    const record = target;
+    if (property === "position") {
+        if ((0, utils_1.isFiniteNumber)(record.cx) && (0, utils_1.isFiniteNumber)(record.cy))
+            return [record.cx, record.cy];
+        if ((0, utils_1.isFiniteNumber)(record.x) && (0, utils_1.isFiniteNumber)(record.y))
+            return [record.x, record.y];
+    }
+    const value = record[property];
+    return typeof value === "number" || typeof value === "string" || isMotionPoint(value) ? (0, utils_1.clone)(value) : 0;
+}
+function pointOnTarget(elements, id, progress) {
+    const path = firstKernelPathForTarget(elements, id);
+    return path ? (0, path_sampling_1.pointOnPath)(path.d, progress) : undefined;
+}
+function firstKernelPathForTarget(elements, id) {
+    const target = findElement(elements, id);
+    if (!target)
+        return undefined;
+    const definition = (0, shapes_1.getInternalShapeDefinition)(target.type);
+    if (!definition?.pathQueryable)
+        return undefined;
+    const lowered = lowerFollowTarget(target);
+    return firstKernelPath(lowered);
+}
+function lowerFollowTarget(target) {
+    const lowerElements = (items) => items.flatMap((item) => (0, shapes_1.lowerAuthoringElement)(item, { lowerElements }));
+    return lowerElements([target]);
+}
+function firstKernelPath(elements) {
+    for (const element of elements) {
+        if (element.type === "path")
+            return element;
+        if ((element.type === "group" || element.type === "group3d") && Array.isArray(element.children)) {
+            const nested = firstKernelPath(element.children);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+}
+function findElement(elements, id) {
+    return (0, utils_1.flattenElements)(elements).find((element) => element.id === id);
+}
+function numberValue(value) {
+    return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function addValues(left, right) {
+    if (isMotionPoint(left) || isMotionPoint(right))
+        return combinePointValues(left, right, (a, b) => a + b);
+    return numberValue(left) + numberValue(right);
+}
+function subValues(left, right) {
+    if (isMotionPoint(left) || isMotionPoint(right))
+        return combinePointValues(left, right, (a, b) => a - b);
+    return numberValue(left) - numberValue(right);
+}
+function mulValues(left, right) {
+    if (isMotionPoint(left) || isMotionPoint(right))
+        return combinePointValues(left, right, (a, b) => a * b);
+    return numberValue(left) * numberValue(right);
+}
+function divValues(left, right) {
+    if (isMotionPoint(left) || isMotionPoint(right))
+        return combinePointValues(left, right, (a, b) => a / safeDenominator(b));
+    return numberValue(left) / safeDenominator(numberValue(right));
+}
+function absValue(value) {
+    if (isMotionPoint(value))
+        return value.map((item) => Math.abs(item));
+    return Math.abs(numberValue(value));
+}
+function combinePointValues(left, right, fn) {
+    const length = (isMotionPoint(left) && left.length === 3) || (isMotionPoint(right) && right.length === 3) ? 3 : 2;
+    const values = Array.from({ length }, (_, index) => fn(componentValue(left, index), componentValue(right, index)));
+    return values;
+}
+function componentValue(value, index) {
+    if (isMotionPoint(value))
+        return (0, utils_1.isFiniteNumber)(value[index]) ? value[index] : 0;
+    return numberValue(value);
+}
+function point2Value(value) {
+    if (isMotionPoint(value))
+        return [value[0], value[1]];
+    const scalar = numberValue(value);
+    return [scalar, scalar];
+}
+function safeDenominator(value) {
+    if (Math.abs(value) >= 0.000001)
+        return value;
+    return value < 0 ? -0.000001 : 0.000001;
+}
+function isMotionPoint(value) {
+    return Array.isArray(value) && (value.length === 2 || value.length === 3) && value.every((item) => typeof item === "number" && Number.isFinite(item));
+}
+function parseHexColor(value) {
+    const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
+    if (!match)
+        return undefined;
+    return [parseInt(match[1].slice(0, 2), 16), parseInt(match[1].slice(2, 4), 16), parseInt(match[1].slice(4, 6), 16)];
+}
+function hex(value) {
+    return value.toString(16).padStart(2, "0");
+}

package/dist/src/normalize.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeVisualDocument = normalizeVisualDocument;
 exports.resolveVisualFrame = resolveVisualFrame;
-const path_sampling_1 = require("./path-sampling");
-const shapes_1 = require("./shapes");
+const animatable_1 = require("./animatable");
 const utils_1 = require("./utils");
 const validate_1 = require("./validate");
 function normalizeVisualDocument(document, options = {}) {
@@ -14,178 +13,148 @@ function normalizeVisualDocument(document, options = {}) {
             throw new Error(first ? `${first.path}: ${first.message}` : "Invalid visual document.");
         }
     }
-    const cloned = (0, utils_1.clone)(document);
-    const elements = cloned.elements ?? [];
-    const resolvedElements = resolveEndpointReferences(elements);
-    return { ...cloned, elements: resolvedElements };
+    return { ...(0, utils_1.clone)(document), elements: (0, utils_1.clone)(document.elements ?? []) };
 }
 function resolveVisualFrame(document, time = 0) {
     const normalized = normalizeVisualDocument(document);
-    const source = (0, utils_1.clone)(document.elements ?? normalized.elements);
-    const animated = source.map((element) => resolveElementAnimation(element, time));
-    const endpoints = resolveEndpointReferences(animated);
-    const followed = endpoints.map((element) => resolveElementFollowers(element, endpoints, time));
-    return { ...normalized, elements: followed };
-}
-function resolveEndpointReferences(elements) {
-    const map = new Map();
-    for (const element of (0, utils_1.flattenElements)(elements)) {
-        if (element.id)
-            map.set(element.id, element);
-    }
-    return elements.map((element) => resolveElementEndpoints(element, map));
-}
-function resolveElementEndpoints(element, map) {
-    const next = (0, utils_1.clone)(element);
-    if ((next.type === "line" || next.type === "arrow" || next.type === "curve") && next.from !== undefined && next.to !== undefined) {
-        next.from = resolveEndpoint(next.from, map);
-        next.to = resolveEndpoint(next.to, map);
-    }
-    if (next.type === "group" && Array.isArray(next.children)) {
-        next.children = next.children.map((child) => resolveElementEndpoints(child, map));
-    }
-    return next;
-}
-function resolveEndpoint(endpoint, map) {
-    if ((0, utils_1.isPoint2)(endpoint))
-        return [endpoint[0], endpoint[1]];
-    const { id, anchor } = (0, utils_1.parseReference)(String(endpoint));
-    const target = map.get(id);
-    const box = target ? (0, utils_1.elementBox)(target) : undefined;
-    if (!box)
-        return [0, 0];
-    return (0, utils_1.anchorPoint)(box, anchor);
+    return {
+        ...normalized,
+        elements: resolveElements(normalized.elements, time)
+    };
 }
-function resolveElementAnimation(element, time) {
-    const next = (0, utils_1.clone)(element);
-    if (next.animate) {
-        for (const [property, animation] of Object.entries(next.animate)) {
-            const record = next;
-            record[property] = resolveAnimation(animation, time, record[property]);
+function resolveElements(elements, time) {
+    return elements.flatMap((element) => {
+        const timeline = element.timeline;
+        if (timeline?.start !== undefined && time < timeline.start)
+            return [];
+        if (timeline?.end !== undefined && time > timeline.end)
+            return [];
+        const next = (0, utils_1.clone)(element);
+        if (next.type === "group")
+            next.children = resolveElements(next.children, time);
+        const localTime = time - Number(timeline?.start ?? 0);
+        for (const [property, track] of Object.entries(timeline?.tracks ?? {})) {
+            const value = resolveTrack(track, localTime);
+            if (value !== undefined)
+                (0, animatable_1.applyPropertyValue)(next, property, value);
         }
-        delete next.animate;
-    }
-    if (next.type === "group" && Array.isArray(next.children)) {
-        next.children = next.children.map((child) => resolveElementAnimation(child, time));
-    }
-    return next;
-}
-function resolveElementFollowers(element, elements, time) {
-    const next = (0, utils_1.clone)(element);
-    if (next.type === "circle" && next.follow) {
-        const point = pointOnFollowPath(elements, next.follow, progressValue(next.progress, time));
-        if (point) {
-            next.cx = point[0];
-            next.cy = point[1];
+        delete next.timeline;
+        return [next];
+    });
+}
+function resolveTrack(track, time) {
+    const frames = track.keyframes
+        .map(normalizeKeyframe)
+        .filter((frame) => frame !== undefined)
+        .slice()
+        .sort((left, right) => left.time - right.time);
+    if (!frames.length)
+        return undefined;
+    if (time <= frames[0].time)
+        return (0, utils_1.clone)(frames[0].value);
+    for (let index = 1; index < frames.length; index += 1) {
+        const previous = frames[index - 1];
+        const next = frames[index];
+        if (time <= next.time) {
+            const span = Math.max(0.000001, next.time - previous.time);
+            const curve = previous.out ?? previous.interpolation ?? next.in ?? track.curve;
+            return interpolateValue(previous.value, next.value, curveProgress(curve, track.ease, (time - previous.time) / span));
         }
     }
-    if (next.type === "group" && Array.isArray(next.children)) {
-        next.children = next.children.map((child) => resolveElementFollowers(child, elements, time));
-    }
-    return next;
-}
-function progressValue(progress, time) {
-    if (typeof progress === "number")
-        return clamp(progress, 0, 1);
-    if (progress && typeof progress === "object")
-        return clamp(Number(resolveAnimation(progress, time, progress.from ?? 0)), 0, 1);
-    return 0;
+    return (0, utils_1.clone)(frames[frames.length - 1].value);
 }
-function resolveAnimation(animation, time, fallback) {
-    if (Array.isArray(animation.keyframes) && animation.keyframes.length) {
-        const frames = animation.keyframes.slice().sort((left, right) => left[0] - right[0]);
-        if (time <= frames[0][0])
-            return frames[0][1];
-        for (let index = 1; index < frames.length; index += 1) {
-            const prev = frames[index - 1];
-            const next = frames[index];
-            if (time <= next[0]) {
-                const span = Math.max(0.000001, next[0] - prev[0]);
-                const t = (time - prev[0]) / span;
-                return interpolateValue(prev[1], next[1], t);
-            }
-        }
-        return frames[frames.length - 1][1];
+function normalizeKeyframe(frame) {
+    if (Array.isArray(frame)) {
+        if (!(0, utils_1.isFiniteNumber)(frame[0]) || !(0, animatable_1.isTimelineValue)(frame[1]))
+            return undefined;
+        return { time: frame[0], value: (0, utils_1.clone)(frame[1]) };
     }
-    const from = animation.from ?? fallback;
-    const to = animation.to ?? from;
-    const delay = animation.delay ?? 0;
-    const duration = Math.max(0.000001, animation.duration ?? 0);
-    const t = (0, utils_1.easing)(animation.ease, (time - delay) / duration);
-    return interpolateValue(from ?? 0, to ?? from ?? 0, t);
-}
-function pointOnFollowPath(elements, id, progress) {
-    const target = (0, utils_1.flattenElements)(elements).find((element) => element.id === id);
-    if (!target)
+    if (!frame || typeof frame !== "object" || !(0, utils_1.isFiniteNumber)(frame.time) || !(0, animatable_1.isTimelineValue)(frame.value))
         return undefined;
-    const definition = (0, shapes_1.getInternalShapeDefinition)(target.type);
-    if (!definition?.followable)
-        return undefined;
-    const lowered = lowerFollowTarget(target);
-    const path = firstKernelPath(lowered);
-    return path ? (0, path_sampling_1.pointOnPath)(path.d, progress) : undefined;
-}
-function lowerFollowTarget(target) {
-    const lowerElements = (items) => items.flatMap((item) => (0, shapes_1.lowerAuthoringElement)(item, { lowerElements }));
-    return lowerElements([target]);
+    return {
+        time: frame.time,
+        value: (0, utils_1.clone)(frame.value),
+        ...(frame.in ? { in: (0, utils_1.clone)(frame.in) } : {}),
+        ...(frame.out ? { out: (0, utils_1.clone)(frame.out) } : {}),
+        ...(frame.interpolation ? { interpolation: (0, utils_1.clone)(frame.interpolation) } : {})
+    };
 }
-function firstKernelPath(elements) {
-    for (const element of elements) {
-        if (element.type === "path")
-            return element;
-        if ((element.type === "group" || element.type === "group3d") && Array.isArray(element.children)) {
-            const nested = firstKernelPath(element.children);
-            if (nested)
-                return nested;
+function curveProgress(curve, easeName, t) {
+    if (!curve)
+        return (0, utils_1.easing)(easeName, t);
+    const x = (0, utils_1.clamp)(t, 0, 1);
+    if (curve.type === "hold")
+        return x < 1 ? 0 : 1;
+    if (curve.type === "graph")
+        return graphProgress(curve.points, x);
+    if (curve.type === "cubicBezier")
+        return cubicBezierProgress(x, curve.x1, curve.y1, curve.x2, curve.y2);
+    return (0, utils_1.easing)(easeName, t);
+}
+function graphProgress(points, t) {
+    const sorted = points.slice().sort((left, right) => left[0] - right[0]);
+    if (!sorted.length)
+        return t;
+    if (t <= sorted[0][0])
+        return sorted[0][1];
+    for (let index = 1; index < sorted.length; index += 1) {
+        const previous = sorted[index - 1];
+        const next = sorted[index];
+        if (t <= next[0]) {
+            const span = Math.max(0.000001, next[0] - previous[0]);
+            const local = (t - previous[0]) / span;
+            return previous[1] + (next[1] - previous[1]) * local;
         }
     }
-    return undefined;
+    return sorted[sorted.length - 1][1];
+}
+function cubicBezierProgress(t, x1, y1, x2, y2) {
+    let lo = 0;
+    let hi = 1;
+    let u = t;
+    for (let index = 0; index < 24; index += 1) {
+        u = (lo + hi) / 2;
+        const x = cubicBezier(0, x1, x2, 1, u);
+        if (x < t)
+            lo = u;
+        else
+            hi = u;
+    }
+    return cubicBezier(0, y1, y2, 1, u);
+}
+function cubicBezier(a, b, c, d, t) {
+    const mt = 1 - t;
+    return mt * mt * mt * a + 3 * mt * mt * t * b + 3 * mt * t * t * c + t * t * t * d;
 }
 function interpolateValue(from, to, t) {
-    const eased = clamp(t, 0, 1);
     if (typeof from === "number" && typeof to === "number")
-        return from + (to - from) * eased;
+        return from + (to - from) * t;
+    if ((0, utils_1.isPoint2)(from) && (0, utils_1.isPoint2)(to))
+        return [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t];
+    if (isNumberArray(from) && isNumberArray(to) && from.length === to.length)
+        return from.map((value, index) => value + (to[index] - value) * t);
     if (typeof from === "string" && typeof to === "string") {
-        const fromColor = parseHexColor(from);
-        const toColor = parseHexColor(to);
-        if (fromColor && toColor)
-            return formatHexColor({
-                r: Math.round(fromColor.r + (toColor.r - fromColor.r) * eased),
-                g: Math.round(fromColor.g + (toColor.g - fromColor.g) * eased),
-                b: Math.round(fromColor.b + (toColor.b - fromColor.b) * eased),
-                a: fromColor.a + (toColor.a - fromColor.a) * eased
-            });
+        const a = parseHexColor(from);
+        const b = parseHexColor(to);
+        if (a && b) {
+            return `#${hex(Math.round(a[0] + (b[0] - a[0]) * t))}${hex(Math.round(a[1] + (b[1] - a[1]) * t))}${hex(Math.round(a[2] + (b[2] - a[2]) * t))}`;
+        }
     }
-    return eased < 1 ? from : to;
+    return t < 1 ? (0, utils_1.clone)(from) : (0, utils_1.clone)(to);
+}
+function isNumberArray(value) {
+    return Array.isArray(value) && value.every((item) => (0, utils_1.isFiniteNumber)(item));
 }
 function parseHexColor(value) {
-    const input = value.trim();
-    const short = /^#([0-9a-f]{3}|[0-9a-f]{4})$/i.exec(input);
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(value.trim());
     if (short) {
-        const chars = short[1];
-        return {
-            r: parseInt(chars[0] + chars[0], 16),
-            g: parseInt(chars[1] + chars[1], 16),
-            b: parseInt(chars[2] + chars[2], 16),
-            a: chars.length === 4 ? parseInt(chars[3] + chars[3], 16) / 255 : 1
-        };
+        return [parseInt(short[1] + short[1], 16), parseInt(short[2] + short[2], 16), parseInt(short[3] + short[3], 16)];
     }
-    const long = /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.exec(input);
+    const long = /^#([0-9a-f]{6})$/i.exec(value.trim());
     if (!long)
         return undefined;
-    const hex = long[1];
-    return {
-        r: parseInt(hex.slice(0, 2), 16),
-        g: parseInt(hex.slice(2, 4), 16),
-        b: parseInt(hex.slice(4, 6), 16),
-        a: hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1
-    };
-}
-function formatHexColor(color) {
-    const hex = (value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
-    const alpha = clamp(Math.round(color.a * 255), 0, 255);
-    return alpha >= 255 ? `#${hex(color.r)}${hex(color.g)}${hex(color.b)}` : `#${hex(color.r)}${hex(color.g)}${hex(color.b)}${hex(alpha)}`;
+    return [parseInt(long[1].slice(0, 2), 16), parseInt(long[1].slice(2, 4), 16), parseInt(long[1].slice(4, 6), 16)];
 }
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
+function hex(value) {
+    return value.toString(16).padStart(2, "0");
 }

package/dist/src/presets/characters.d.ts

@@ -0,0 +1,15 @@
+import type { BasePresetOptions, PresetFragment } from "./types";
+export interface CharacterOptions extends BasePresetOptions {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    stroke?: string;
+    fill?: string;
+}
+export declare function stickPerson(options?: CharacterOptions): PresetFragment;
+export declare function talkingHead(options?: CharacterOptions): PresetFragment;
+export declare function simpleDog(options?: CharacterOptions): PresetFragment;
+export declare function simpleSpider(options?: CharacterOptions): PresetFragment;
+export declare function cursorHand(options?: CharacterOptions): PresetFragment;
+export declare function simpleMascot(options?: CharacterOptions): PresetFragment;