@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/ops/ops.js

@@ -0,0 +1,318 @@
+import { z } from "zod";
+const positionSchema = z.object({
+    x: z.number(),
+    y: z.number()
+});
+export const addNodeOp = z.object({
+    kind: z.literal("addNode"),
+    node: z.object({
+        id: z.string().min(1).optional(),
+        type: z.string().min(1),
+        position: positionSchema.optional(),
+        data: z.record(z.string(), z.unknown()),
+        style: z.record(z.string(), z.unknown()).optional(),
+        width: z.number().optional(),
+        height: z.number().optional(),
+        parentId: z.string().min(1).optional()
+    })
+});
+export const removeNodeOp = z.object({
+    kind: z.literal("removeNode"),
+    nodeId: z.string().min(1)
+});
+export const patchNodeOp = z.object({
+    kind: z.literal("patchNode"),
+    nodeId: z.string().min(1),
+    data: z.record(z.string(), z.unknown()).optional(),
+    style: z.record(z.string(), z.unknown()).optional(),
+    width: z.number().optional(),
+    height: z.number().optional()
+});
+export const moveNodeOp = z.object({
+    kind: z.literal("moveNode"),
+    nodeId: z.string().min(1),
+    position: positionSchema
+});
+export const setParentOp = z.object({
+    kind: z.literal("setParent"),
+    nodeId: z.string().min(1),
+    parentId: z.string().min(1).nullable(),
+    extent: z.literal("parent").nullable().optional()
+});
+export const addEdgeOp = z.object({
+    kind: z.literal("addEdge"),
+    edge: z.object({
+        id: z.string().min(1).optional(),
+        source: z.string().min(1),
+        target: z.string().min(1),
+        sourceHandle: z.string().optional(),
+        targetHandle: z.string().optional(),
+        type: z.string().optional(),
+        label: z.string().optional(),
+        animated: z.boolean().optional(),
+        style: z.record(z.string(), z.unknown()).optional(),
+        data: z.record(z.string(), z.unknown()).optional()
+    })
+});
+export const removeEdgeOp = z.object({
+    kind: z.literal("removeEdge"),
+    edgeId: z.string().min(1)
+});
+export const patchEdgeOp = z.object({
+    kind: z.literal("patchEdge"),
+    edgeId: z.string().min(1),
+    patch: z.object({
+        label: z.string().optional(),
+        animated: z.boolean().optional(),
+        type: z.string().optional(),
+        style: z.record(z.string(), z.unknown()).optional(),
+        data: z.record(z.string(), z.unknown()).optional(),
+        sourceHandle: z.string().optional(),
+        targetHandle: z.string().optional(),
+        source: z.string().min(1).optional(),
+        target: z.string().min(1).optional()
+    }).refine((v)=>Object.keys(v).length > 0, {
+        message: "patch must include at least one field"
+    })
+});
+export const CORE_OP_SCHEMAS = [
+    addNodeOp,
+    removeNodeOp,
+    patchNodeOp,
+    moveNodeOp,
+    setParentOp,
+    addEdgeOp,
+    removeEdgeOp,
+    patchEdgeOp
+];
+export const canvasOpSchema = z.discriminatedUnion("kind", [
+    ...CORE_OP_SCHEMAS
+]);
+export class CanvasOpError extends Error {
+    opIndex;
+    constructor(message, opIndex){
+        super(message), this.opIndex = opIndex;
+        this.name = "CanvasOpError";
+    }
+}
+export function randomId() {
+    return crypto.randomUUID();
+}
+export function getNodeId(node) {
+    return typeof node.id === "string" ? node.id : undefined;
+}
+export function getNodeData(node) {
+    return typeof node.data === "object" && node.data !== null ? node.data : {};
+}
+export function hasNode(nodes, id) {
+    return nodes.some((n)=>getNodeId(n) === id);
+}
+export function mapNodeOrThrow(nodes, nodeId, opIndex, transform) {
+    let found = false;
+    const next = nodes.map((n)=>{
+        if (getNodeId(n) !== nodeId) return n;
+        found = true;
+        return transform(n);
+    });
+    if (!found) throw new CanvasOpError(`Unknown nodeId: ${nodeId}`, opIndex);
+    return next;
+}
+export function insertAt(list, item, index) {
+    const next = [
+        ...list
+    ];
+    next.splice(Math.min(index ?? next.length, next.length), 0, item);
+    return next;
+}
+export function assertIndex(index, length, what, opIndex) {
+    if (index >= length) throw new CanvasOpError(`${what} index ${index} out of bounds`, opIndex);
+}
+export function patchData(state, nodeId, opIndex, fields) {
+    state.nodes = mapNodeOrThrow(state.nodes, nodeId, opIndex, (n)=>{
+        const nodeData = getNodeData(n);
+        return {
+            ...n,
+            data: {
+                ...nodeData,
+                ...fields(nodeData)
+            }
+        };
+    });
+}
+function assertParentExists(nodes, nodeId, parentId, i) {
+    if (parentId === nodeId) throw new CanvasOpError(`Node cannot be its own parent: ${nodeId}`, i);
+    if (!hasNode(nodes, parentId)) throw new CanvasOpError(`Unknown parentId: ${parentId}`, i);
+}
+function addNode(state, op, i) {
+    const { node } = op;
+    const id = node.id ?? randomId();
+    if (hasNode(state.nodes, id)) throw new CanvasOpError(`Node id already exists: ${id}`, i);
+    if (node.parentId) assertParentExists(state.nodes, id, node.parentId, i);
+    state.nodes = [
+        ...state.nodes,
+        {
+            id,
+            type: node.type,
+            position: node.position ?? {
+                x: 0,
+                y: 0
+            },
+            data: node.data,
+            ...node.style && {
+                style: node.style
+            },
+            ...node.width != null && {
+                width: node.width
+            },
+            ...node.height != null && {
+                height: node.height
+            },
+            ...node.parentId && {
+                parentId: node.parentId,
+                extent: "parent"
+            }
+        }
+    ];
+}
+function removeNode(state, op, i) {
+    if (!hasNode(state.nodes, op.nodeId)) {
+        throw new CanvasOpError(`Unknown nodeId: ${op.nodeId}`, i);
+    }
+    state.nodes = state.nodes.filter((n)=>getNodeId(n) !== op.nodeId);
+    state.edges = state.edges.filter((e)=>e.source !== op.nodeId && e.target !== op.nodeId);
+}
+function patchNodeRecord(n, op) {
+    const next = {
+        ...n
+    };
+    if (op.data) next.data = {
+        ...getNodeData(n),
+        ...op.data
+    };
+    if (op.style) {
+        const existing = typeof n.style === "object" && n.style !== null ? n.style : {};
+        next.style = {
+            ...existing,
+            ...op.style
+        };
+    }
+    if (op.width != null) next.width = op.width;
+    if (op.height != null) next.height = op.height;
+    return next;
+}
+function patchNode(state, op, i) {
+    if (!op.data && !op.style && op.width == null && op.height == null) {
+        throw new CanvasOpError("patchNode requires data, style, width or height", i);
+    }
+    state.nodes = mapNodeOrThrow(state.nodes, op.nodeId, i, (n)=>patchNodeRecord(n, op));
+}
+function moveNode(state, op, i) {
+    state.nodes = mapNodeOrThrow(state.nodes, op.nodeId, i, (n)=>({
+            ...n,
+            position: {
+                x: op.position.x,
+                y: op.position.y
+            }
+        }));
+}
+function setParent(state, op, i) {
+    const { parentId } = op;
+    if (parentId !== null) assertParentExists(state.nodes, op.nodeId, parentId, i);
+    state.nodes = mapNodeOrThrow(state.nodes, op.nodeId, i, (n)=>{
+        const { parentId: _p, extent: _e, ...rest } = n;
+        if (parentId === null) return rest;
+        const extent = op.extent === null ? undefined : op.extent ?? "parent";
+        return extent ? {
+            ...rest,
+            parentId,
+            extent
+        } : {
+            ...rest,
+            parentId
+        };
+    });
+}
+function addEdge(state, op, i) {
+    const id = op.edge.id ?? randomId();
+    if (state.edges.some((e)=>e.id === id)) {
+        throw new CanvasOpError(`Edge id already exists: ${id}`, i);
+    }
+    if (!hasNode(state.nodes, op.edge.source)) {
+        throw new CanvasOpError(`Edge source not found: ${op.edge.source}`, i);
+    }
+    if (!hasNode(state.nodes, op.edge.target)) {
+        throw new CanvasOpError(`Edge target not found: ${op.edge.target}`, i);
+    }
+    state.edges = [
+        ...state.edges,
+        {
+            id,
+            ...op.edge
+        }
+    ];
+}
+function removeEdge(state, op, i) {
+    if (!state.edges.some((e)=>e.id === op.edgeId)) {
+        throw new CanvasOpError(`Unknown edgeId: ${op.edgeId}`, i);
+    }
+    state.edges = state.edges.filter((e)=>e.id !== op.edgeId);
+}
+function patchEdge(state, op, i) {
+    const { source, target } = op.patch;
+    if (source !== undefined && !hasNode(state.nodes, source)) {
+        throw new CanvasOpError(`Edge source not found: ${source}`, i);
+    }
+    if (target !== undefined && !hasNode(state.nodes, target)) {
+        throw new CanvasOpError(`Edge target not found: ${target}`, i);
+    }
+    let found = false;
+    state.edges = state.edges.map((e)=>{
+        if (e.id !== op.edgeId) return e;
+        found = true;
+        return {
+            ...e,
+            ...op.patch
+        };
+    });
+    if (!found) throw new CanvasOpError(`Unknown edgeId: ${op.edgeId}`, i);
+}
+const CORE_APPLY = {
+    addNode,
+    removeNode,
+    patchNode,
+    moveNode,
+    setParent,
+    addEdge,
+    removeEdge,
+    patchEdge
+};
+export function applyOps(data, ops, definitions = []) {
+    const state = {
+        nodes: [
+            ...data.nodes
+        ],
+        edges: [
+            ...data.edges
+        ]
+    };
+    const byKind = new Map(definitions.map((def)=>[
+            def.kind,
+            def
+        ]));
+    ops.forEach((op, i)=>{
+        const core = CORE_APPLY[op.kind];
+        if (core) return core(state, op, i);
+        const def = byKind.get(op.kind);
+        if (!def) throw new CanvasOpError(`Unknown op kind: ${op.kind}`, i);
+        def.apply(state, op, i);
+    });
+    const { nodes, edges } = state;
+    return data.viewport ? {
+        nodes,
+        edges,
+        viewport: data.viewport
+    } : {
+        nodes,
+        edges
+    };
+}

package/dist/canvas/pen/colors.js

@@ -0,0 +1,41 @@
+export const PEN_HEX = {
+    ink: {
+        light: "#1e1e1e",
+        dark: "#e9ecef"
+    },
+    red: {
+        light: "#e03131",
+        dark: "#ff8787"
+    },
+    blue: {
+        light: "#1971c2",
+        dark: "#74c0fc"
+    },
+    green: {
+        light: "#2f9e44",
+        dark: "#69db7c"
+    },
+    amber: {
+        light: "#e8a33d",
+        dark: "#ffd43b"
+    },
+    violet: {
+        light: "#6741d9",
+        dark: "#b197fc"
+    },
+    indigo: {
+        light: "#414fd2",
+        dark: "#8b96ff"
+    },
+    terra: {
+        light: "#f0503d",
+        dark: "#ff8a78"
+    }
+};
+export function penColorVar(color) {
+    const known = color in PEN_HEX ? color : "ink";
+    return `var(--pen-${known}, ${PEN_HEX[known].light})`;
+}
+export function penCssTokens(mode) {
+    return Object.keys(PEN_HEX).map((name)=>`--pen-${name}: ${PEN_HEX[name][mode]};`).join(" ");
+}

package/dist/canvas/pen/eraser.js

@@ -0,0 +1,35 @@
+import { distanceToStroke } from "./geometry.js";
+import { STROKE_NODE } from "./types.js";
+function isStrokeData(data) {
+    return Array.isArray(data.points) && typeof data.size === "number";
+}
+export function strokesUnder(nodes, at, radius) {
+    const hits = [];
+    for (const node of nodes){
+        if (node.type !== STROKE_NODE || !isStrokeData(node.data)) continue;
+        const local = {
+            x: at.x - node.position.x,
+            y: at.y - node.position.y
+        };
+        if (distanceToStroke(node.data.points, local) <= radius + node.data.size / 2) {
+            hits.push(node.id);
+        }
+    }
+    return hits;
+}
+export function strokesAlong(nodes, from, to, radius) {
+    const length = Math.hypot(to.x - from.x, to.y - from.y);
+    const steps = Math.max(1, Math.ceil(length / Math.max(radius / 2, 1)));
+    const hits = new Set();
+    for(let i = 0; i <= steps; i++){
+        const t = i / steps;
+        const at = {
+            x: from.x + (to.x - from.x) * t,
+            y: from.y + (to.y - from.y) * t
+        };
+        for (const id of strokesUnder(nodes, at, radius))hits.add(id);
+    }
+    return [
+        ...hits
+    ];
+}

package/dist/canvas/pen/geometry.js

@@ -0,0 +1,143 @@
+import { PEN_DEFAULTS, STROKE_NODE } from "./types.js";
+const SIMPLIFY_TOLERANCE = 0.6;
+function round(value, places) {
+    const factor = 10 ** places;
+    return Math.round(value * factor) / factor;
+}
+export function distanceToSegment(p, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0) return Math.hypot(p.x - a.x, p.y - a.y);
+    const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / lengthSquared));
+    return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}
+export function simplifyPoints(points, tolerance) {
+    if (points.length <= 2) return [
+        ...points
+    ];
+    const keep = new Uint8Array(points.length);
+    keep[0] = 1;
+    keep[points.length - 1] = 1;
+    const stack = [
+        [
+            0,
+            points.length - 1
+        ]
+    ];
+    while(stack.length > 0){
+        const [start, end] = stack.pop();
+        const a = {
+            x: points[start][0],
+            y: points[start][1]
+        };
+        const b = {
+            x: points[end][0],
+            y: points[end][1]
+        };
+        let farthest = -1;
+        let farthestDistance = tolerance;
+        for(let i = start + 1; i < end; i++){
+            const distance = distanceToSegment({
+                x: points[i][0],
+                y: points[i][1]
+            }, a, b);
+            if (distance > farthestDistance) {
+                farthest = i;
+                farthestDistance = distance;
+            }
+        }
+        if (farthest === -1) continue;
+        keep[farthest] = 1;
+        stack.push([
+            start,
+            farthest
+        ], [
+            farthest,
+            end
+        ]);
+    }
+    return points.filter((_, i)=>keep[i] === 1);
+}
+export function pointsBounds(points) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const [x, y] of points){
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+    };
+}
+export function buildStrokeNode(samples, options = {}) {
+    if (samples.length === 0) return null;
+    const tool = options.tool ?? "pen";
+    const size = options.size ?? PEN_DEFAULTS[tool].size;
+    const tolerance = SIMPLIFY_TOLERANCE / Math.max(options.zoom ?? 1, 0.1);
+    const source = samples.length === 1 ? [
+        samples[0],
+        samples[0]
+    ] : samples;
+    const simplified = simplifyPoints(source, tolerance);
+    const hasPressure = simplified.some((point)=>point[2] !== undefined);
+    const pad = Math.ceil(size / 2) + 2;
+    const box = pointsBounds(simplified);
+    const origin = {
+        x: box.x - pad,
+        y: box.y - pad
+    };
+    const points = simplified.map(([x, y, pressure])=>{
+        const px = round(x - origin.x, 1);
+        const py = round(y - origin.y, 1);
+        return hasPressure ? [
+            px,
+            py,
+            round(pressure ?? 0.5, 2)
+        ] : [
+            px,
+            py
+        ];
+    });
+    return {
+        id: options.id,
+        type: STROKE_NODE,
+        position: {
+            x: round(origin.x, 1),
+            y: round(origin.y, 1)
+        },
+        data: {
+            points,
+            color: options.color ?? PEN_DEFAULTS.color,
+            size,
+            tool,
+            simulatePressure: !hasPressure
+        },
+        width: Math.ceil(box.width + pad * 2),
+        height: Math.ceil(box.height + pad * 2)
+    };
+}
+export function distanceToStroke(points, p) {
+    if (points.length === 0) return Infinity;
+    if (points.length === 1) return Math.hypot(p.x - points[0][0], p.y - points[0][1]);
+    let best = Infinity;
+    for(let i = 1; i < points.length; i++){
+        const a = {
+            x: points[i - 1][0],
+            y: points[i - 1][1]
+        };
+        const b = {
+            x: points[i][0],
+            y: points[i][1]
+        };
+        best = Math.min(best, distanceToSegment(p, a, b));
+    }
+    return best;
+}

package/dist/canvas/pen/index.js

@@ -0,0 +1,9 @@
+export { PEN_HEX, penColorVar } from "./colors.js";
+export { strokesAlong, strokesUnder } from "./eraser.js";
+export { buildStrokeNode, distanceToStroke, pointsBounds, simplifyPoints } from "./geometry.js";
+export { addPenNode, removePenNode } from "./ops.js";
+export { createPenSession } from "./pen-session.js";
+export { penPlugin } from "./plugin.js";
+export { buildShapeNode, buildTextNode, dragBox, shapeOutline } from "./shapes.js";
+export { outlineToPath, strokePath } from "./stroke-path.js";
+export { HIGHLIGHTER_OPACITY, PEN_COLORS, PEN_DEFAULTS, SHAPE_KINDS, SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";

package/dist/canvas/pen/ops.js

@@ -0,0 +1,15 @@
+export function addPenNode(node) {
+    return {
+        kind: "addNode",
+        node: {
+            ...node,
+            id: node.id ?? crypto.randomUUID()
+        }
+    };
+}
+export function removePenNode(nodeId) {
+    return {
+        kind: "removeNode",
+        nodeId
+    };
+}