@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/pen/pen-session.js

@@ -0,0 +1,171 @@
+import { strokesAlong } from "./eraser.js";
+import { buildStrokeNode } from "./geometry.js";
+import { addPenNode, removePenNode } from "./ops.js";
+import { buildShapeNode, buildTextNode, dragBox } from "./shapes.js";
+import { strokePath } from "./stroke-path.js";
+import { PEN_DEFAULTS } from "./types.js";
+const ERASER_RADIUS = 10;
+const MIN_SAMPLE = 1;
+function isShapeTool(tool) {
+    return tool === "rectangle" || tool === "ellipse" || tool === "diamond";
+}
+export function createPenSession(host, getSettings) {
+    let endGesture = null;
+    let start = null;
+    let last = null;
+    let samples = [];
+    const erased = new Set();
+    function settingsNow() {
+        const settings = getSettings();
+        const fallback = settings.tool === "highlighter" ? PEN_DEFAULTS.highlighter.size : PEN_DEFAULTS.pen.size;
+        return {
+            ...settings,
+            size: settings.size ?? fallback
+        };
+    }
+    function reset() {
+        endGesture = null;
+        start = null;
+        last = null;
+        samples = [];
+        erased.clear();
+        host.onPreview?.(null);
+    }
+    function erase(from, to, radius) {
+        const remaining = host.getNodes().filter((node)=>!erased.has(node.id));
+        const ids = strokesAlong(remaining, from, to, radius);
+        if (ids.length === 0) return;
+        for (const id of ids)erased.add(id);
+        host.commit(ids.map(removePenNode));
+    }
+    function placeText(at, color) {
+        const op = addPenNode(buildTextNode(at, {
+            color
+        }));
+        host.commit([
+            op
+        ]);
+        if (op.kind === "addNode" && op.node.id) host.onTextPlaced?.(op.node.id);
+    }
+    function sampleOf(at, pressure) {
+        return pressure === undefined ? [
+            at.x,
+            at.y
+        ] : [
+            at.x,
+            at.y,
+            pressure
+        ];
+    }
+    function previewStroke(pointerDown) {
+        const { tool, color, size } = settingsNow();
+        if (tool !== "pen" && tool !== "highlighter") return;
+        const hasPressure = samples.some((point)=>point[2] !== undefined);
+        const d = strokePath(samples, {
+            size,
+            tool,
+            simulatePressure: !hasPressure
+        }, !pointerDown);
+        host.onPreview?.({
+            kind: "stroke",
+            d,
+            color,
+            tool
+        });
+    }
+    return {
+        get active () {
+            return start !== null;
+        },
+        down (at, pressure) {
+            if (start) return;
+            const { tool, color, zoom } = settingsNow();
+            if (tool === "text") {
+                placeText(at, color);
+                return;
+            }
+            endGesture = host.startGesture();
+            start = at;
+            last = at;
+            if (tool === "eraser") {
+                const radius = ERASER_RADIUS / zoom;
+                host.onPreview?.({
+                    kind: "eraser",
+                    at,
+                    radius
+                });
+                erase(at, at, radius);
+                return;
+            }
+            if (tool === "pen" || tool === "highlighter") {
+                samples = [
+                    sampleOf(at, pressure)
+                ];
+                previewStroke(true);
+            }
+        },
+        move (at, pressure) {
+            if (!start || !last) return;
+            const { tool, color, zoom } = settingsNow();
+            if (tool === "eraser") {
+                const radius = ERASER_RADIUS / zoom;
+                host.onPreview?.({
+                    kind: "eraser",
+                    at,
+                    radius
+                });
+                erase(last, at, radius);
+                last = at;
+                return;
+            }
+            if (isShapeTool(tool)) {
+                host.onPreview?.({
+                    kind: "shape",
+                    shape: tool,
+                    box: dragBox(start, at),
+                    color
+                });
+                last = at;
+                return;
+            }
+            if (Math.hypot(at.x - last.x, at.y - last.y) * zoom < MIN_SAMPLE) return;
+            samples.push(sampleOf(at, pressure));
+            last = at;
+            previewStroke(true);
+        },
+        up (at, options = {}) {
+            if (!start || !endGesture) return;
+            const { tool, color, size, zoom } = settingsNow();
+            const close = endGesture;
+            try {
+                if (tool === "pen" || tool === "highlighter") {
+                    const node = buildStrokeNode(samples, {
+                        color,
+                        size,
+                        tool,
+                        zoom
+                    });
+                    if (node) host.commit([
+                        addPenNode(node)
+                    ]);
+                } else if (isShapeTool(tool)) {
+                    const box = dragBox(start, at, options.square);
+                    host.commit([
+                        addPenNode(buildShapeNode(tool, box, {
+                            color
+                        }))
+                    ]);
+                }
+            } finally{
+                close();
+                reset();
+            }
+        },
+        cancel () {
+            if (!endGesture) return;
+            const close = endGesture;
+            close();
+            reset();
+        }
+    };
+}

package/dist/canvas/pen/plugin.js

@@ -0,0 +1,129 @@
+import { z } from "zod";
+import { CanvasOpError } from "../ops/ops.js";
+import { definePlugin } from "../plugin.js";
+import { buildStrokeNode } from "./geometry.js";
+import { buildShapeNode, buildTextNode } from "./shapes.js";
+import { PEN_COLORS, SHAPE_KINDS, SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";
+const colorSchema = z.enum(PEN_COLORS);
+const pointSchema = z.object({
+    x: z.number(),
+    y: z.number()
+});
+const MAX_POINTS = 5000;
+const addStrokeOp = z.object({
+    kind: z.literal("addStroke"),
+    id: z.string().min(1).optional(),
+    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 addTextOp = z.object({
+    kind: z.literal("addText"),
+    id: z.string().min(1).optional(),
+    at: pointSchema,
+    text: z.string(),
+    color: colorSchema.optional(),
+    fontSize: z.number().positive().optional()
+});
+const addShapeOp = z.object({
+    kind: z.literal("addShape"),
+    id: z.string().min(1).optional(),
+    shape: z.enum(SHAPE_KINDS),
+    box: z.object({
+        x: z.number(),
+        y: z.number(),
+        width: z.number().nonnegative(),
+        height: z.number().nonnegative()
+    }),
+    color: colorSchema.optional(),
+    filled: z.boolean().optional(),
+    label: z.string().optional()
+});
+function appendNode(state, node, opIndex) {
+    const id = node.id ?? crypto.randomUUID();
+    if (state.nodes.some((existing)=>existing.id === id)) {
+        throw new CanvasOpError(`Node id already exists: ${id}`, opIndex);
+    }
+    state.nodes = [
+        ...state.nodes,
+        {
+            ...node,
+            id
+        }
+    ];
+}
+function applyAddStroke(state, op, opIndex) {
+    const node = buildStrokeNode(op.points, {
+        id: op.id,
+        color: op.color,
+        size: op.size,
+        tool: op.tool
+    });
+    if (!node) throw new CanvasOpError("addStroke needs at least one point", opIndex);
+    appendNode(state, node, opIndex);
+}
+function applyAddText(state, op, opIndex) {
+    appendNode(state, buildTextNode(op.at, {
+        id: op.id,
+        text: op.text,
+        color: op.color,
+        fontSize: op.fontSize
+    }), opIndex);
+}
+function applyAddShape(state, op, opIndex) {
+    appendNode(state, buildShapeNode(op.shape, op.box, {
+        id: op.id,
+        color: op.color,
+        filled: op.filled,
+        label: op.label
+    }), opIndex);
+}
+export const penPlugin = definePlugin({
+    id: "pen",
+    nodes: [
+        {
+            type: STROKE_NODE,
+            label: "Stroke"
+        },
+        {
+            type: TEXT_NODE,
+            label: "Text",
+            sizing: "content-sized",
+            size: {
+                width: 120
+            }
+        },
+        {
+            type: SHAPE_NODE,
+            label: "Shape",
+            size: {
+                width: 160,
+                height: 100
+            }
+        }
+    ],
+    ops: [
+        {
+            kind: "addStroke",
+            schema: addStrokeOp,
+            apply: applyAddStroke
+        },
+        {
+            kind: "addText",
+            schema: addTextOp,
+            apply: applyAddText
+        },
+        {
+            kind: "addShape",
+            schema: addShapeOp,
+            apply: applyAddShape
+        }
+    ]
+});

package/dist/canvas/pen/shapes.js

@@ -0,0 +1,80 @@
+import { PEN_DEFAULTS, SHAPE_NODE, TEXT_NODE } from "./types.js";
+const MIN_DRAG = 6;
+const DEFAULT_SHAPE = {
+    width: 160,
+    height: 100
+};
+export function dragBox(from, to, square = false) {
+    let dx = to.x - from.x;
+    let dy = to.y - from.y;
+    if (square) {
+        const side = Math.max(Math.abs(dx), Math.abs(dy));
+        dx = Math.sign(dx || 1) * side;
+        dy = Math.sign(dy || 1) * side;
+    }
+    return {
+        x: Math.min(from.x, from.x + dx),
+        y: Math.min(from.y, from.y + dy),
+        width: Math.abs(dx),
+        height: Math.abs(dy)
+    };
+}
+export function buildShapeNode(shape, box, options = {}) {
+    const click = box.width < MIN_DRAG && box.height < MIN_DRAG;
+    const width = Math.round(click ? DEFAULT_SHAPE.width : Math.max(box.width, MIN_DRAG));
+    const height = Math.round(click ? DEFAULT_SHAPE.height : Math.max(box.height, MIN_DRAG));
+    const x = click ? box.x - width / 2 : box.x;
+    const y = click ? box.y - height / 2 : box.y;
+    return {
+        id: options.id,
+        type: SHAPE_NODE,
+        position: {
+            x: Math.round(x),
+            y: Math.round(y)
+        },
+        data: {
+            shape,
+            color: options.color ?? PEN_DEFAULTS.color,
+            strokeWidth: PEN_DEFAULTS.strokeWidth,
+            filled: options.filled ?? false,
+            label: options.label ?? ""
+        },
+        width,
+        height
+    };
+}
+export function buildTextNode(at, options = {}) {
+    return {
+        id: options.id,
+        type: TEXT_NODE,
+        position: {
+            x: Math.round(at.x),
+            y: Math.round(at.y)
+        },
+        data: {
+            text: options.text ?? "",
+            color: options.color ?? PEN_DEFAULTS.color,
+            fontSize: options.fontSize ?? PEN_DEFAULTS.fontSize
+        },
+        width: 120,
+        height: Math.round((options.fontSize ?? PEN_DEFAULTS.fontSize) * 1.4)
+    };
+}
+export function shapeOutline(shape, width, height, inset) {
+    const left = inset;
+    const top = inset;
+    const right = Math.max(width - inset, left);
+    const bottom = Math.max(height - inset, top);
+    if (shape === "diamond") {
+        const midX = (left + right) / 2;
+        const midY = (top + bottom) / 2;
+        return `M${midX},${top} L${right},${midY} L${midX},${bottom} L${left},${midY} Z`;
+    }
+    if (shape === "ellipse") {
+        const rx = (right - left) / 2;
+        const ry = (bottom - top) / 2;
+        const cy = (top + bottom) / 2;
+        return `M${left},${cy} a${rx},${ry} 0 1,0 ${rx * 2},0 a${rx},${ry} 0 1,0 ${-rx * 2},0 Z`;
+    }
+    return `M${left},${top} H${right} V${bottom} H${left} Z`;
+}

package/dist/canvas/pen/stroke-path.js

@@ -0,0 +1,37 @@
+import { getStroke } from "perfect-freehand";
+function average(a, b) {
+    return (a + b) / 2;
+}
+export function outlineToPath(outline) {
+    if (outline.length < 4) return "";
+    const first = outline[0];
+    const second = outline[1];
+    const third = outline[2];
+    let path = `M${first[0].toFixed(2)},${first[1].toFixed(2)} ` + `Q${second[0].toFixed(2)},${second[1].toFixed(2)} ` + `${average(second[0], third[0]).toFixed(2)},${average(second[1], third[1]).toFixed(2)} T`;
+    for(let i = 2; i < outline.length - 1; i++){
+        const a = outline[i];
+        const b = outline[i + 1];
+        path += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+    }
+    return `${path}Z`;
+}
+export function strokePath(points, shape, last = true) {
+    if (points.length === 0) return "";
+    const highlighter = shape.tool === "highlighter";
+    const outline = getStroke(points.map((point)=>point[2] === undefined ? [
+            point[0],
+            point[1]
+        ] : [
+            point[0],
+            point[1],
+            point[2]
+        ]), {
+        size: shape.size,
+        thinning: highlighter ? 0 : 0.55,
+        smoothing: 0.6,
+        streamline: highlighter ? 0.7 : 0.5,
+        simulatePressure: shape.simulatePressure && !highlighter,
+        last
+    });
+    return outlineToPath(outline);
+}

package/dist/canvas/pen/types.js

@@ -0,0 +1,30 @@
+export const STROKE_NODE = "stroke";
+export const TEXT_NODE = "text";
+export const SHAPE_NODE = "shape";
+export const PEN_COLORS = [
+    "ink",
+    "red",
+    "blue",
+    "green",
+    "amber",
+    "violet",
+    "indigo",
+    "terra"
+];
+export const SHAPE_KINDS = [
+    "rectangle",
+    "ellipse",
+    "diamond"
+];
+export const PEN_DEFAULTS = {
+    pen: {
+        size: 4
+    },
+    highlighter: {
+        size: 20
+    },
+    strokeWidth: 3,
+    fontSize: 20,
+    color: "ink"
+};
+export const HIGHLIGHTER_OPACITY = 0.38;

package/dist/canvas/pen/ui.js

@@ -0,0 +1,20 @@
+import { definePlugin } from "../plugin.js";
+import PenOverlay from "../../../src/canvas/pen/PenOverlay.svelte";
+import { penPlugin } from "./plugin.js";
+import ShapeNode from "../../../src/canvas/pen/ShapeNode.svelte";
+import StrokeNode from "../../../src/canvas/components/shared/svg/StrokeNode.svelte";
+import TextNode from "../../../src/canvas/pen/TextNode.svelte";
+import { SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";
+export { PenOverlay, ShapeNode, StrokeNode, TextNode };
+const components = {
+    [STROKE_NODE]: StrokeNode,
+    [TEXT_NODE]: TextNode,
+    [SHAPE_NODE]: ShapeNode
+};
+export const penUiPlugin = definePlugin({
+    ...penPlugin,
+    nodes: (penPlugin.nodes ?? []).map((kind)=>({
+            ...kind,
+            component: components[kind.type]
+        }))
+});

package/dist/canvas/plugin.js

@@ -0,0 +1,51 @@
+import { z } from "zod";
+export function definePlugin(plugin) {
+    return plugin;
+}
+export function createRegistry(plugins) {
+    const nodes = new Map();
+    const ops = new Map();
+    const layouts = [];
+    const owner = new Map();
+    const claim = (key, pluginId)=>{
+        const first = owner.get(key);
+        if (first) throw new Error(`"${key}" is claimed by both "${first}" and "${pluginId}"`);
+        owner.set(key, pluginId);
+    };
+    for (const plugin of plugins){
+        for (const kind of plugin.nodes ?? []){
+            claim(`node:${kind.type}`, plugin.id);
+            nodes.set(kind.type, kind);
+        }
+        for (const op of plugin.ops ?? []){
+            claim(`op:${op.kind}`, plugin.id);
+            ops.set(op.kind, op);
+        }
+        layouts.push(...plugin.layouts ?? []);
+    }
+    const typesWhere = (sizing)=>new Set([
+            ...nodes.values()
+        ].filter((k)=>k.sizing === sizing).map((k)=>k.type));
+    return {
+        plugins,
+        nodes,
+        ops,
+        layouts,
+        nodeTypes () {
+            const out = {};
+            for (const kind of nodes.values())if (kind.component) out[kind.type] = kind.component;
+            return out;
+        },
+        contentSizedTypes: ()=>typesWhere("content-sized"),
+        layoutOwnedTypes: ()=>typesWhere("layout-owned"),
+        parseOp (input) {
+            const kind = input?.kind;
+            const def = typeof kind === "string" ? ops.get(kind) : undefined;
+            if (!def) throw new Error(`Unknown op kind: ${String(kind)}`);
+            return def.schema.parse(input);
+        },
+        pickLayout (data, options = {}) {
+            return layouts.find((pass)=>pass.matches(data, options)) ?? null;
+        }
+    };
+}

package/dist/canvas/screen/glyphs.js

@@ -0,0 +1,24 @@
+import header from "../../../src/canvas/screen/glyphs/header.svg";
+import button from "../../../src/canvas/screen/glyphs/button.svg";
+import input from "../../../src/canvas/screen/glyphs/input.svg";
+import image from "../../../src/canvas/screen/glyphs/image.svg";
+import list from "../../../src/canvas/screen/glyphs/list.svg";
+import modal from "../../../src/canvas/screen/glyphs/modal.svg";
+import up from "../../../src/canvas/screen/glyphs/up.svg";
+import down from "../../../src/canvas/screen/glyphs/down.svg";
+import close from "../../../src/canvas/screen/glyphs/close.svg";
+import plus from "../../../src/canvas/screen/glyphs/plus.svg";
+import hills from "../../../src/canvas/screen/glyphs/hills.svg";
+export const GLYPHS = {
+    header,
+    button,
+    input,
+    image,
+    list,
+    modal,
+    up,
+    down,
+    close,
+    plus,
+    hills
+};

package/dist/canvas/screen/labels.js

@@ -0,0 +1,24 @@
+export const DEFAULT_SCREEN_LABELS = {
+    name: "Screen",
+    mode: "Mode",
+    modes: {
+        wireframe: "Wireframe",
+        mockup: "Mockup"
+    },
+    kinds: {
+        header: "Header",
+        button: "Button",
+        input: "Input",
+        image: "Image",
+        list: "List",
+        modal: "Modal"
+    },
+    addPart: "Add part",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    remove: "Remove",
+    primary: "Primary",
+    secondary: "Secondary",
+    addItem: "Add item",
+    removeItem: "Remove item"
+};