@heyramzi/ui 2.9.0 → 2.10.1

package/dist/canvas/headless/grid.js

@@ -0,0 +1,96 @@
+import { STROKE_NODE } from "../pen/types.js";
+export const GRID_SIZE = 20;
+export const SNAP_GRID = [
+    GRID_SIZE,
+    GRID_SIZE
+];
+export const FREEHAND_NODE_TYPES = new Set([
+    STROKE_NODE
+]);
+export function snapToGrid(value) {
+    return GRID_SIZE * Math.round(value / GRID_SIZE);
+}
+function pointOf(value) {
+    if (typeof value !== "object" || value === null) return null;
+    const { x, y } = value;
+    return typeof x === "number" && typeof y === "number" && Number.isFinite(x) && Number.isFinite(y) ? {
+        x,
+        y
+    } : null;
+}
+function stringOf(value) {
+    return typeof value === "string" ? value : undefined;
+}
+export function snapWrittenNodes(before, after, exempt = FREEHAND_NODE_TYPES) {
+    const prior = new Map();
+    for (const node of before){
+        const id = stringOf(node.id);
+        if (id) prior.set(id, {
+            at: pointOf(node.position),
+            parent: stringOf(node.parentId)
+        });
+    }
+    const byId = new Map();
+    for (const node of after){
+        const id = stringOf(node.id);
+        if (id) byId.set(id, node);
+    }
+    const written = (node)=>{
+        const was = prior.get(String(node.id));
+        const at = pointOf(node.position);
+        const type = stringOf(node.type);
+        if (!at || type !== undefined && exempt.has(type)) return false;
+        if (!was?.at) return true;
+        return was.at.x !== at.x || was.at.y !== at.y || was.parent !== stringOf(node.parentId);
+    };
+    const settled = new Map();
+    const visiting = new Set();
+    const settle = (node)=>{
+        const id = String(node.id);
+        const done = settled.get(id);
+        if (done) return done;
+        const local = pointOf(node.position) ?? {
+            x: 0,
+            y: 0
+        };
+        const parentId = stringOf(node.parentId);
+        const parent = parentId ? byId.get(parentId) : undefined;
+        let origin = {
+            x: 0,
+            y: 0
+        };
+        if (parent && !visiting.has(id)) {
+            visiting.add(id);
+            origin = settle(parent).page;
+            visiting.delete(id);
+        }
+        const page = {
+            x: origin.x + local.x,
+            y: origin.y + local.y
+        };
+        const result = written(node) ? {
+            local: {
+                x: snapToGrid(page.x) - origin.x,
+                y: snapToGrid(page.y) - origin.y
+            },
+            page: {
+                x: snapToGrid(page.x),
+                y: snapToGrid(page.y)
+            }
+        } : {
+            local,
+            page
+        };
+        settled.set(id, result);
+        return result;
+    };
+    return after.map((node)=>{
+        if (!stringOf(node.id)) return node;
+        const at = pointOf(node.position);
+        const next = settle(node).local;
+        return at && (next.x !== at.x || next.y !== at.y) ? {
+            ...node,
+            position: next
+        } : node;
+    });
+}

package/dist/canvas/headless/icon-node.js

@@ -0,0 +1,45 @@
+export const ICON_SIZE = 56;
+export const ICON_W = 120;
+export const ICON_LABEL_GAP = 12;
+export const ICON_LABEL_H = 22;
+export const ICON_LINE_H = 20;
+export const ICON_SIDE_LABEL_H = 28;
+export const ICON_PORT_GAP = 6;
+export function iconGeometry(icon, width = ICON_W) {
+    const size = icon.size ?? ICON_SIZE;
+    const lines = icon.lines?.length ?? 0;
+    const mid = size / 2;
+    if (icon.labelSide === "right") {
+        const top = Math.max(0, (icon.label ? ICON_SIDE_LABEL_H : 0) - mid);
+        return {
+            size,
+            markX: 0,
+            markY: top,
+            height: Math.max(top + size, top + mid + ICON_PORT_GAP + lines * ICON_LINE_H),
+            left: {
+                x: 0,
+                y: top + mid
+            },
+            right: {
+                x: Math.max(width, size),
+                y: top + mid
+            }
+        };
+    }
+    const markX = (Math.max(width, size) - size) / 2;
+    const text = (icon.label ? ICON_LABEL_H : 0) + lines * ICON_LINE_H;
+    return {
+        size,
+        markX,
+        markY: 0,
+        height: size + (text ? ICON_LABEL_GAP + text : 0),
+        left: {
+            x: markX,
+            y: mid
+        },
+        right: {
+            x: markX + size,
+            y: mid
+        }
+    };
+}

package/dist/canvas/headless/index.js

@@ -0,0 +1 @@
+export { compilePenMark, penMarkSchema, placeInFrame } from "./pen-marks.js";

package/dist/canvas/headless/linkify.js

@@ -0,0 +1,25 @@
+const URL_RE = /https?:\/\/[^\s<>"]+/g;
+const TRAILING = /[.,;:!?)\]'”]+$/;
+export function linkify(text) {
+    const parts = [];
+    let last = 0;
+    for (const match of text.matchAll(URL_RE)){
+        const start = match.index ?? 0;
+        const href = match[0].replace(TRAILING, "");
+        if (start > last) parts.push({
+            text: text.slice(last, start)
+        });
+        parts.push({
+            text: href,
+            href
+        });
+        last = start + href.length;
+    }
+    if (last < text.length) parts.push({
+        text: text.slice(last)
+    });
+    return parts;
+}
+export function hasLink(text) {
+    return /https?:\/\//.test(text);
+}

package/dist/canvas/headless/pen-marks.js

@@ -0,0 +1,115 @@
+import { z } from "zod";
+import { buildStrokeNode } from "../pen/geometry.js";
+import { buildShapeNode, buildTextNode } from "../pen/shapes.js";
+import { PEN_COLORS, SHAPE_KINDS } from "../pen/types.js";
+const colorSchema = z.enum(PEN_COLORS);
+const pointSchema = z.tuple([
+    z.number(),
+    z.number()
+]);
+const MAX_POINTS = 5000;
+const inFrame = z.string().min(1).optional();
+const strokeMark = z.object({
+    kind: z.literal("stroke"),
+    id: z.string().min(1).optional(),
+    in: inFrame,
+    points: z.array(z.tuple([
+        z.number(),
+        z.number()
+    ]).rest(z.number())).min(1).max(MAX_POINTS),
+    color: colorSchema.optional(),
+    size: z.number().positive().optional(),
+    tool: z.enum([
+        "pen",
+        "highlighter"
+    ]).optional()
+});
+const textMark = z.object({
+    kind: z.literal("text"),
+    id: z.string().min(1).optional(),
+    in: inFrame,
+    at: pointSchema,
+    text: z.string().min(1),
+    color: colorSchema.optional(),
+    fontSize: z.number().positive().optional()
+});
+const shapeMark = z.object({
+    kind: z.literal("shape"),
+    id: z.string().min(1).optional(),
+    in: inFrame,
+    shape: z.enum(SHAPE_KINDS),
+    box: z.tuple([
+        z.number(),
+        z.number(),
+        z.number().nonnegative(),
+        z.number().nonnegative()
+    ]),
+    color: colorSchema.optional(),
+    filled: z.boolean().optional(),
+    label: z.string().optional()
+});
+export const penMarkSchema = z.discriminatedUnion("kind", [
+    strokeMark,
+    textMark,
+    shapeMark
+]);
+export function placeInFrame(node, frameId, frames, where) {
+    const frame = frames.get(frameId);
+    if (!frame) throw new Error(`${where}: no frame "${frameId}" to put it in`);
+    return {
+        ...node,
+        parentId: frameId,
+        extent: "parent",
+        position: {
+            x: node.position.x - frame.x,
+            y: node.position.y - frame.y
+        }
+    };
+}
+function toNode(node, id) {
+    return {
+        id,
+        type: node.type,
+        position: node.position,
+        data: node.data,
+        width: node.width,
+        height: node.height
+    };
+}
+export function compilePenMark(mark, index, frames) {
+    const where = `marks[${index}]`;
+    const id = mark.id ?? `pen-${index + 1}`;
+    let node;
+    if (mark.kind === "stroke") {
+        const built = buildStrokeNode(mark.points, {
+            color: mark.color,
+            size: mark.size,
+            tool: mark.tool
+        });
+        if (!built) throw new Error(`${where}: a stroke needs at least one point`);
+        node = toNode(built, id);
+    } else if (mark.kind === "text") {
+        const [x, y] = mark.at;
+        node = toNode(buildTextNode({
+            x,
+            y
+        }, {
+            text: mark.text,
+            color: mark.color,
+            fontSize: mark.fontSize
+        }), id);
+    } else {
+        const [x, y, width, height] = mark.box;
+        node = toNode(buildShapeNode(mark.shape, {
+            x,
+            y,
+            width,
+            height
+        }, {
+            color: mark.color,
+            filled: mark.filled,
+            label: mark.label
+        }), id);
+    }
+    return mark.in ? placeInFrame(node, mark.in, frames, where) : node;
+}

package/dist/canvas/headless/sketch.js

@@ -0,0 +1,250 @@
+import rough from "roughjs";
+import { createMemo } from "./edge-memo.js";
+export const SKETCH_ACCENTS = [
+    "ink",
+    "red",
+    "green",
+    "blue",
+    "violet",
+    "amber",
+    "teal",
+    "indigo",
+    "terra"
+];
+const PALETTE = {
+    ink: {
+        stroke: "#1e1e1e",
+        fill: "#ffffff",
+        heading: "#1e1e1e",
+        body: "#343a40"
+    },
+    red: {
+        stroke: "#c92a2a",
+        fill: "#fff5f5",
+        heading: "#a61e4d",
+        body: "#3b3b46"
+    },
+    green: {
+        stroke: "#2f9e44",
+        fill: "#f4fce3",
+        heading: "#2b8a3e",
+        body: "#3b3b46"
+    },
+    blue: {
+        stroke: "#1971c2",
+        fill: "#e7f5ff",
+        heading: "#1864ab",
+        body: "#3b3b46"
+    },
+    violet: {
+        stroke: "#6741d9",
+        fill: "#f3f0ff",
+        heading: "#5f3dc4",
+        body: "#3b3b46"
+    },
+    amber: {
+        stroke: "#e8a33d",
+        fill: "#fff9db",
+        heading: "#b8860b",
+        body: "#3b3b46"
+    },
+    teal: {
+        stroke: "#0c8599",
+        fill: "#e3fafc",
+        heading: "#0b7285",
+        body: "#3b3b46"
+    },
+    indigo: {
+        stroke: "#414fd2",
+        fill: "#ffffff",
+        heading: "#414fd2",
+        body: "#414fd2"
+    },
+    terra: {
+        stroke: "#f0503d",
+        fill: "#ffffff",
+        heading: "#f0503d",
+        body: "#f0503d"
+    }
+};
+const DARK_PALETTE = {
+    ink: {
+        stroke: "#e9ecef",
+        fill: "#151b30",
+        heading: "#f1f3f5",
+        body: "#ced4da"
+    },
+    red: {
+        stroke: "#ff8787",
+        fill: "#2a1822",
+        heading: "#ffa8c5",
+        body: "#ced4da"
+    },
+    green: {
+        stroke: "#69db7c",
+        fill: "#132a20",
+        heading: "#8ce99a",
+        body: "#ced4da"
+    },
+    blue: {
+        stroke: "#74c0fc",
+        fill: "#12253d",
+        heading: "#a5d8ff",
+        body: "#ced4da"
+    },
+    violet: {
+        stroke: "#b197fc",
+        fill: "#211c3d",
+        heading: "#d0bfff",
+        body: "#ced4da"
+    },
+    amber: {
+        stroke: "#ffd43b",
+        fill: "#2b2612",
+        heading: "#ffe066",
+        body: "#ced4da"
+    },
+    teal: {
+        stroke: "#66d9e8",
+        fill: "#112a30",
+        heading: "#99e9f2",
+        body: "#ced4da"
+    },
+    indigo: {
+        stroke: "#8b96ff",
+        fill: "#151b30",
+        heading: "#a5adff",
+        body: "#a5adff"
+    },
+    terra: {
+        stroke: "#ff8a78",
+        fill: "#151b30",
+        heading: "#ff9d8d",
+        body: "#ff9d8d"
+    }
+};
+export function sketchColors(accent, dark = false) {
+    const palette = dark ? DARK_PALETTE : PALETTE;
+    return palette[accent ?? "ink"] ?? palette.ink;
+}
+export function isSketchAccent(value) {
+    return typeof value === "string" && SKETCH_ACCENTS.includes(value);
+}
+export function seedFrom(id) {
+    let hash = 2166136261;
+    for(let i = 0; i < id.length; i += 1){
+        hash ^= id.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return Math.abs(hash) % 2147483647;
+}
+const generator = rough.generator();
+const MEMO_LIMIT = 4000;
+const lines = createMemo(MEMO_LIMIT);
+const heads = createMemo(MEMO_LIMIT);
+function baseOptions(seed, colors, overrides) {
+    return {
+        seed,
+        roughness: 1.1,
+        bowing: 1.4,
+        stroke: colors.stroke,
+        strokeWidth: 1.6,
+        fillStyle: "solid",
+        ...overrides
+    };
+}
+const FORMAL = {
+    roughness: 0,
+    bowing: 0,
+    disableMultiStroke: true,
+    strokeWidth: 1.4
+};
+function toPaths(drawable) {
+    return generator.toPaths(drawable).map((p)=>({
+            d: p.d,
+            stroke: p.stroke,
+            fill: p.fill ?? "none",
+            strokeWidth: p.strokeWidth
+        }));
+}
+export function roughCard(width, height, { seed, colors }, { radius = 14, formal = false } = {}) {
+    const w = Math.max(width, radius * 2 + 2);
+    const h = Math.max(height, radius * 2 + 2);
+    const r = Math.min(radius, w / 2 - 1, h / 2 - 1);
+    const d = [
+        `M ${r} 0`,
+        `L ${w - r} 0`,
+        `Q ${w} 0 ${w} ${r}`,
+        `L ${w} ${h - r}`,
+        `Q ${w} ${h} ${w - r} ${h}`,
+        `L ${r} ${h}`,
+        `Q 0 ${h} 0 ${h - r}`,
+        `L 0 ${r}`,
+        `Q 0 0 ${r} 0`,
+        "Z"
+    ].join(" ");
+    return toPaths(generator.path(d, baseOptions(seed, colors, {
+        fill: colors.fill,
+        ...formal ? FORMAL : {}
+    })));
+}
+export const ELLIPSE_CARD_SCALE = {
+    x: 1.32,
+    y: 1.42
+};
+export function roughEllipse(width, height, { seed, colors }, { formal = false } = {}) {
+    return toPaths(generator.ellipse(width / 2, height / 2, width, height, baseOptions(seed, colors, {
+        roughness: 1.6,
+        strokeWidth: 2.2,
+        fill: undefined,
+        ...formal ? FORMAL : {}
+    })));
+}
+export function roughRect(width, height, { seed, colors }, { filled = false, formal = false } = {}) {
+    return toPaths(generator.rectangle(1, 1, Math.max(width - 2, 2), Math.max(height - 2, 2), baseOptions(seed, colors, {
+        fill: filled ? colors.fill : undefined,
+        ...formal ? FORMAL : {}
+    })));
+}
+export function roughPolygon(points, { seed, colors }, { formal = false } = {}) {
+    return toPaths(generator.polygon(points.map(([x, y])=>[
+            x,
+            y
+        ]), baseOptions(seed, colors, {
+        fill: undefined,
+        ...formal ? FORMAL : {}
+    })));
+}
+export function roughUnderline(width, { seed, colors }, { y = 4, formal = false } = {}) {
+    return toPaths(generator.line(0, y, width, y, baseOptions(seed, colors, {
+        strokeWidth: 2,
+        bowing: 2.4,
+        ...formal ? FORMAL : {}
+    })));
+}
+export function roughLine(from, to, { seed, colors }, { formal = false } = {}) {
+    const hand = formal ? FORMAL : {};
+    return lines(`${seed}|${colors.stroke}|${formal}|${from.x},${from.y}|${to.x},${to.y}`, ()=>toPaths(generator.line(from.x, from.y, to.x, to.y, baseOptions(seed, colors, {
+            strokeWidth: 1.8,
+            ...hand
+        }))));
+}
+export function roughHead(tip, angle, { seed, colors }, { formal = false } = {}) {
+    const hand = formal ? FORMAL : {};
+    const head = 11;
+    const spread = 0.42;
+    return heads(`${seed}|${colors.stroke}|${formal}|${tip.x},${tip.y}|${angle}`, ()=>[
+            angle + Math.PI - spread,
+            angle + Math.PI + spread
+        ].flatMap((a, i)=>toPaths(generator.line(tip.x, tip.y, tip.x + Math.cos(a) * head, tip.y + Math.sin(a) * head, baseOptions(seed + i + 1, colors, {
+                strokeWidth: 1.8,
+                roughness: 0.8,
+                ...hand
+            })))));
+}
+export function roughArrow(from, to, pen, style = {}) {
+    return [
+        ...roughLine(from, to, pen, style),
+        ...roughHead(to, Math.atan2(to.y - from.y, to.x - from.x), pen, style)
+    ];
+}

package/dist/canvas/headless/snap-guides.js

@@ -0,0 +1,100 @@
+export const SNAP_THRESHOLD = 6;
+const SIZE_KEY = {
+    x: "width",
+    y: "height"
+};
+const CROSS = {
+    x: "y",
+    y: "x"
+};
+function linesOf(rect, axis) {
+    const start = rect[axis];
+    const size = rect[SIZE_KEY[axis]];
+    return [
+        start,
+        start + size / 2,
+        start + size
+    ];
+}
+function snapAxis(dragged, others, axis, threshold) {
+    const mine = linesOf(dragged, axis);
+    const pairings = others.flatMap((other)=>linesOf(other, axis).flatMap((theirs)=>mine.map((own)=>({
+                    delta: theirs - own,
+                    position: theirs
+                }))));
+    const inRange = pairings.filter((pair)=>Math.abs(pair.delta) <= threshold);
+    if (inRange.length === 0) return {
+        delta: 0,
+        position: null
+    };
+    return inRange.reduce((a, b)=>Math.abs(b.delta) < Math.abs(a.delta) ? b : a);
+}
+function guideFor(snapped, others, axis, position) {
+    const cross = CROSS[axis];
+    const size = SIZE_KEY[cross];
+    const onLine = others.filter((other)=>linesOf(other, axis).some((line)=>Math.abs(line - position) < 0.5));
+    return {
+        axis,
+        position,
+        start: Math.min(snapped[cross], ...onLine.map((o)=>o[cross])),
+        end: Math.max(snapped[cross] + snapped[size], ...onLine.map((o)=>o[cross] + o[size]))
+    };
+}
+export function computeSnap(dragged, others, threshold = SNAP_THRESHOLD) {
+    if (others.length === 0) return {
+        x: dragged.x,
+        y: dragged.y,
+        guides: []
+    };
+    const horizontal = snapAxis(dragged, others, "x", threshold);
+    const vertical = snapAxis(dragged, others, "y", threshold);
+    const snapped = {
+        ...dragged,
+        x: dragged.x + horizontal.delta,
+        y: dragged.y + vertical.delta
+    };
+    const guides = [];
+    if (horizontal.position !== null) {
+        guides.push(guideFor(snapped, others, "x", horizontal.position));
+    }
+    if (vertical.position !== null) {
+        guides.push(guideFor(snapped, others, "y", vertical.position));
+    }
+    return {
+        x: snapped.x,
+        y: snapped.y,
+        guides
+    };
+}
+export function snapDraggedNode(nodes, held, zoom) {
+    const rect = freeNodeRect(held);
+    if (!held || !rect) return {
+        nodes,
+        guides: []
+    };
+    const others = nodes.filter((n)=>n.id !== held.id).map(freeNodeRect).filter((r)=>r !== null);
+    const snap = computeSnap(rect, others, SNAP_THRESHOLD / (zoom || 1));
+    const moved = snap.x !== held.position.x || snap.y !== held.position.y;
+    const next = moved ? nodes.map((n)=>n.id === held.id ? {
+            ...n,
+            position: {
+                x: snap.x,
+                y: snap.y
+            }
+        } : n) : nodes;
+    return {
+        nodes: next,
+        guides: snap.guides
+    };
+}
+function freeNodeRect(node) {
+    if (!node || node.parentId || node.hidden) return null;
+    const { width, height } = node.measured ?? {};
+    if (!width || !height) return null;
+    return {
+        x: node.position.x,
+        y: node.position.y,
+        width,
+        height
+    };
+}