@heyramzi/ui 2.9.0 → 2.10.0

package/dist/canvas/screen/parts.js

@@ -0,0 +1,140 @@
+import { MAX_LABEL, MAX_LIST_ITEMS, MAX_PARTS, PART_DEFAULTS, PART_KINDS, SCREEN_MODES, SCREEN_NODE, SCREEN_WIDTH } from "./types.js";
+const isKind = (value)=>typeof value === "string" && PART_KINDS.includes(value);
+const text = (value, fallback = "")=>typeof value === "string" ? value.slice(0, MAX_LABEL) : fallback;
+export function nextPartId(parts) {
+    const taken = new Set(parts.map((part)=>part.id));
+    let n = parts.length + 1;
+    while(taken.has(`p${n}`))n += 1;
+    return `p${n}`;
+}
+export function createPart(kind, parts, seed = {}) {
+    const base = PART_DEFAULTS[kind];
+    const part = {
+        ...base,
+        ...seed,
+        id: nextPartId(parts),
+        kind
+    };
+    if (part.items) part.items = [
+        ...part.items
+    ];
+    return part;
+}
+function uniquePartId(raw, parts, seen) {
+    const id = typeof raw === "string" && raw ? raw : "";
+    const unique = !id || seen.has(id) ? nextPartId(parts) : id;
+    seen.add(unique);
+    return unique;
+}
+function kindFields(kind, part) {
+    if (kind === "list") {
+        const items = Array.isArray(part.items) ? part.items : PART_DEFAULTS.list.items;
+        return {
+            items: (items ?? []).slice(0, MAX_LIST_ITEMS).map((item)=>text(item))
+        };
+    }
+    if (kind === "modal") return {
+        text: text(part.text, PART_DEFAULTS.modal.text)
+    };
+    if (kind === "button") return {
+        variant: part.variant === "secondary" ? "secondary" : "primary"
+    };
+    return {};
+}
+function normalizePart(entry, parts, seen) {
+    const part = entry ?? {};
+    if (!isKind(part.kind)) return null;
+    const kind = part.kind;
+    const id = uniquePartId(part.id, parts, seen);
+    return {
+        id,
+        kind,
+        label: text(part.label, PART_DEFAULTS[kind].label),
+        ...kindFields(kind, part)
+    };
+}
+export function normalizeScreen(data) {
+    const raw = data ?? {};
+    const seen = new Set();
+    const parts = [];
+    const rawParts = Array.isArray(raw.parts) ? raw.parts : [];
+    for (const entry of rawParts.slice(0, MAX_PARTS)){
+        const next = normalizePart(entry, parts, seen);
+        if (next) parts.push(next);
+    }
+    return {
+        label: text(raw.label),
+        mode: SCREEN_MODES.includes(raw.mode) ? raw.mode : "wireframe",
+        parts
+    };
+}
+export function addPart(parts, kind, seed, index = parts.length) {
+    if (parts.length >= MAX_PARTS) return [
+        ...parts
+    ];
+    const at = Math.max(0, Math.min(index, parts.length));
+    return [
+        ...parts.slice(0, at),
+        createPart(kind, parts, seed),
+        ...parts.slice(at)
+    ];
+}
+export function removePart(parts, id) {
+    return parts.filter((part)=>part.id !== id);
+}
+export function movePart(parts, id, step) {
+    const from = parts.findIndex((part)=>part.id === id);
+    const to = from + step;
+    if (from < 0 || to < 0 || to >= parts.length) return [
+        ...parts
+    ];
+    const next = [
+        ...parts
+    ];
+    [next[from], next[to]] = [
+        next[to],
+        next[from]
+    ];
+    return next;
+}
+export function patchPart(parts, id, patch) {
+    return parts.map((part)=>part.id === id ? {
+            ...part,
+            ...patch
+        } : part);
+}
+export function setItem(items, index, value) {
+    return items.map((item, i)=>i === index ? value : item);
+}
+export function addItem(items) {
+    return items.length >= MAX_LIST_ITEMS ? [
+        ...items
+    ] : [
+        ...items,
+        "Item"
+    ];
+}
+export function removeItem(items, index) {
+    return items.filter((_, i)=>i !== index);
+}
+export function buildScreenNode(options) {
+    let parts = [];
+    for (const entry of options.parts ?? []){
+        const { kind, ...seed } = entry;
+        parts = addPart(parts, kind, seed);
+    }
+    const data = normalizeScreen({
+        label: options.label,
+        mode: options.mode,
+        parts
+    });
+    return {
+        id: options.id,
+        type: SCREEN_NODE,
+        position: options.position,
+        data,
+        style: {
+            width: options.width ?? SCREEN_WIDTH
+        }
+    };
+}

package/dist/canvas/screen/plugin.js

@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { CanvasOpError } from "../ops/ops.js";
+import { definePlugin } from "../plugin.js";
+import { buildScreenNode } from "./parts.js";
+import { MAX_LABEL, MAX_LIST_ITEMS, MAX_PARTS, PART_KINDS, SCREEN_MODES, SCREEN_NODE, SCREEN_WIDTH } from "./types.js";
+const partSchema = z.object({
+    kind: z.enum(PART_KINDS),
+    label: z.string().max(MAX_LABEL).optional(),
+    items: z.array(z.string().max(MAX_LABEL)).max(MAX_LIST_ITEMS).optional(),
+    text: z.string().max(MAX_LABEL).optional(),
+    variant: z.enum([
+        "primary",
+        "secondary"
+    ]).optional()
+});
+const addScreenOp = z.object({
+    kind: z.literal("addScreen"),
+    id: z.string().min(1).optional(),
+    at: z.object({
+        x: z.number(),
+        y: z.number()
+    }),
+    label: z.string().max(MAX_LABEL).optional(),
+    mode: z.enum(SCREEN_MODES).optional(),
+    parts: z.array(partSchema).max(MAX_PARTS).optional(),
+    width: z.number().positive().optional()
+});
+function applyAddScreen(state, op, opIndex) {
+    const id = op.id ?? crypto.randomUUID();
+    if (state.nodes.some((node)=>node.id === id)) {
+        throw new CanvasOpError(`Node id already exists: ${id}`, opIndex);
+    }
+    const node = buildScreenNode({
+        id,
+        position: op.at,
+        label: op.label,
+        mode: op.mode,
+        parts: op.parts,
+        width: op.width
+    });
+    state.nodes = [
+        ...state.nodes,
+        node
+    ];
+}
+export const screenKind = {
+    type: SCREEN_NODE,
+    label: "Screen",
+    sizing: "content-sized",
+    size: {
+        width: SCREEN_WIDTH
+    },
+    createData: ()=>({
+            label: "",
+            mode: "wireframe",
+            parts: []
+        })
+};
+export const screenPlugin = definePlugin({
+    id: "screen",
+    nodes: [
+        screenKind
+    ],
+    ops: [
+        {
+            kind: "addScreen",
+            schema: addScreenOp,
+            apply: applyAddScreen
+        }
+    ]
+});

package/dist/canvas/screen/types.js

@@ -0,0 +1,44 @@
+export const SCREEN_NODE = "screen";
+export const SCREEN_WIDTH = 320;
+export const PART_KINDS = [
+    "header",
+    "button",
+    "input",
+    "image",
+    "list",
+    "modal"
+];
+export const SCREEN_MODES = [
+    "wireframe",
+    "mockup"
+];
+export const MAX_PARTS = 24;
+export const MAX_LIST_ITEMS = 12;
+export const MAX_LABEL = 120;
+export const PART_DEFAULTS = {
+    header: {
+        label: "Title"
+    },
+    button: {
+        label: "Button",
+        variant: "primary"
+    },
+    input: {
+        label: "Label"
+    },
+    image: {
+        label: "Image"
+    },
+    list: {
+        label: "List",
+        items: [
+            "Item",
+            "Item",
+            "Item"
+        ]
+    },
+    modal: {
+        label: "Title",
+        text: "Text"
+    }
+};

package/dist/canvas/screen/ui.js

@@ -0,0 +1,13 @@
+import { definePlugin } from "../plugin.js";
+import { screenKind, screenPlugin } from "./plugin.js";
+import ScreenCard from "../../../src/canvas/screen/ScreenCard.svelte";
+export { ScreenCard };
+export const screenUiPlugin = definePlugin({
+    ...screenPlugin,
+    nodes: [
+        {
+            ...screenKind,
+            component: ScreenCard
+        }
+    ]
+});

package/dist/canvas/test-utils.js

@@ -0,0 +1,18 @@
+export function makeNode(overrides = {}) {
+    return {
+        id: overrides.id ?? `node-${Math.random().toString(36).slice(2, 8)}`,
+        type: "node",
+        position: {
+            x: 0,
+            y: 0
+        },
+        data: {
+            label: "Test Node"
+        },
+        ...overrides
+    };
+}
+export function expectDefined(value, what = "value") {
+    if (value === null || value === undefined) throw new Error(`Expected ${what} to be defined`);
+    return value;
+}

package/dist/canvas/ui/forward-wheel.js

@@ -0,0 +1,27 @@
+export function forwardWheel(node) {
+    const handler = (event)=>{
+        const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
+        if (!zoomPane) return;
+        event.preventDefault();
+        zoomPane.dispatchEvent(new WheelEvent("wheel", {
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
+            deltaZ: event.deltaZ,
+            deltaMode: event.deltaMode,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            screenX: event.screenX,
+            screenY: event.screenY,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            bubbles: true,
+            cancelable: true
+        }));
+    };
+    node.addEventListener("wheel", handler, {
+        passive: false
+    });
+    return ()=>node.removeEventListener("wheel", handler);
+}

package/dist/canvas/ui/icons.js

@@ -0,0 +1,133 @@
+export const ICON_PATHS = {
+    select: [
+        "M5 3.5 18.5 10l-5.6 1.9L10.7 17.5z"
+    ],
+    hand: [
+        "M8 13V6.5a1.5 1.5 0 0 1 3 0V11m0-5.5a1.5 1.5 0 0 1 3 0V11m0-4a1.5 1.5 0 0 1 3 0v6.5a6.5 6.5 0 0 1-6.5 6.5h-.4a6 6 0 0 1-4.7-2.3L4.6 14.6a1.5 1.5 0 0 1 2.3-1.9L8 14"
+    ],
+    pen: [
+        "M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19z",
+        "M14.5 6.5l3 3"
+    ],
+    highlighter: [
+        "M14.5 4.5l5 5-8 8-5 1.5 1-5z",
+        "M4 21h16"
+    ],
+    eraser: [
+        "M4.5 15l8.5-8.5a2.1 2.1 0 0 1 3 0l3 3a2.1 2.1 0 0 1 0 3L12 20H8z",
+        "M10.5 9l6 6M12 20h8"
+    ],
+    text: [
+        "M5 7V5.5h14V7M12 5.5V19M9 19h6"
+    ],
+    rectangle: [
+        "M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"
+    ],
+    ellipse: [
+        "M4 12a8 6 0 1 0 16 0a8 6 0 1 0-16 0"
+    ],
+    diamond: [
+        "M12 4l8 8-8 8-8-8z"
+    ],
+    frame: [
+        "M8 4v16M16 4v16M4 8h16M4 16h16"
+    ],
+    shapes: [
+        "M5 12.5h5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19v-5A1.5 1.5 0 0 1 5 12.5z",
+        "M11.5 8a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0"
+    ],
+    undo: [
+        "M9 14 4 9l5-5M4 9h9.5a6 6 0 0 1 0 12H11"
+    ],
+    redo: [
+        "M15 14l5-5-5-5M20 9h-9.5a6 6 0 0 0 0 12H13"
+    ],
+    cards: [
+        "M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z",
+        "M12 8.5v7M8.5 12h7"
+    ],
+    search: [
+        "M4.5 11a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0-13 0",
+        "M16 16l4 4"
+    ],
+    note: [
+        "M6 4h12a1 1 0 0 1 1 1v9l-5 5H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z",
+        "M19 14h-4a1 1 0 0 0-1 1v4"
+    ],
+    insert: [
+        "M12 5v14M5 12h14"
+    ],
+    connect: [
+        "M4.5 4.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0",
+        "M6 6v4.5a3 3 0 0 0 3 3h9",
+        "M15 10.5l3.5 3-3.5 3"
+    ],
+    "distribute-h": [
+        "M4 4v16M20 4v16",
+        "M9 8h6v8H9z"
+    ],
+    "distribute-v": [
+        "M4 4h16M4 20h16",
+        "M8 9h8v6H8z"
+    ],
+    minus: [
+        "M5 12h14"
+    ],
+    more: [
+        "M4.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0",
+        "M10.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0",
+        "M16.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0"
+    ],
+    "mm-child": [
+        "M4.0 8h3.0a1.5 1.5 0 0 1 1.5 1.5v5.0a1.5 1.5 0 0 1-1.5 1.5h-3.0a1.5 1.5 0 0 1-1.5-1.5v-5.0a1.5 1.5 0 0 1 1.5-1.5z",
+        "M8.5 12h3.5",
+        "M14 7h5.5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z",
+        "M16.75 10v4M14.75 12h4"
+    ],
+    "mm-sibling": [
+        "M4 6h2.5M4 17.5h2.5M4 6v11.5",
+        "M8.5 3h7a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2z",
+        "M8.5 14.5h7a2 2 0 0 1 2 2v2.5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2.5a2 2 0 0 1 2-2z",
+        "M12 15.75v4M10 17.75h4"
+    ],
+    "mm-line-solid": [
+        "M2.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+        "M6.5 12h11",
+        "M17.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0"
+    ],
+    "mm-line-dashed": [
+        "M2.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+        "M7.5 12h2M11 12h2M14.5 12h2",
+        "M17.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0"
+    ],
+    "mm-ai": [
+        "M10.5 5l1.9 5.1L17.5 12l-5.1 1.9L10.5 19l-1.9-5.1L3.5 12l5.1-1.9z",
+        "M18.5 3.5v4M16.5 5.5h4"
+    ],
+    "mm-map": [
+        "M9 10h6v4H9z",
+        "M9 12C6 12 6 6 3 6M9 12c-3 0-3 6-6 6M15 12c3 0 3-6 6-6M15 12c3 0 3 6 6 6"
+    ],
+    "mm-right": [
+        "M3 10h6v4H3z",
+        "M9 12c4 0 4-6 8-6h4M9 12c4 0 4 6 8 6h4"
+    ],
+    "mm-tree": [
+        "M9 3h6v4H9z",
+        "M12 7v4M5 11h14M5 11v3M19 11v3M12 11v3",
+        "M3 14h4v4H3zM10 14h4v4h-4zM17 14h4v4h-4z"
+    ],
+    "mm-curve": [
+        "M4 18c8 0 8-12 16-12"
+    ],
+    "mm-elbow": [
+        "M4 18h8V6h8"
+    ],
+    "mm-straight": [
+        "M4 18 20 6"
+    ],
+    "mm-center": [
+        "M12 8a4 4 0 1 0 0 8 4 4 0 1 0 0-8z",
+        "M12 3v3M12 18v3M3 12h3M18 12h3"
+    ]
+};

package/dist/canvas/ui/place-panel.js

@@ -0,0 +1,57 @@
+export const CLEARANCE = 20;
+const CHIP_ROOM = 40;
+const INSET = {
+    left: 72,
+    top: 12,
+    right: 12,
+    bottom: 76
+};
+const MINIMAP = {
+    width: 232,
+    height: 172
+};
+export function placeBeside(selection, panel, canvas) {
+    const free = {
+        left: INSET.left,
+        top: INSET.top,
+        right: canvas.width - INSET.right,
+        bottom: canvas.height - INSET.bottom
+    };
+    const centreX = (selection.left + selection.right) / 2 - panel.width / 2;
+    const centreY = (selection.top + selection.bottom) / 2 - panel.height / 2;
+    const floor = (x, width)=>x + width > canvas.width - MINIMAP.width ? canvas.height - MINIMAP.height : free.bottom;
+    const clampX = (x)=>Math.min(Math.max(x, free.left), free.right - panel.width);
+    const clampY = (y, x)=>Math.min(Math.max(y, free.top), floor(x, panel.width) - panel.height);
+    const tries = [
+        {
+            side: "right",
+            x: selection.right + CLEARANCE,
+            y: clampY(centreY, selection.right + CLEARANCE),
+            fits: selection.right + CLEARANCE + panel.width <= free.right
+        },
+        {
+            side: "left",
+            x: selection.left - CLEARANCE - panel.width,
+            y: clampY(centreY, selection.left - CLEARANCE - panel.width),
+            fits: selection.left - CLEARANCE - panel.width >= free.left
+        },
+        {
+            side: "below",
+            x: clampX(centreX),
+            y: selection.bottom + CLEARANCE + CHIP_ROOM,
+            fits: selection.bottom + CLEARANCE + CHIP_ROOM + panel.height <= floor(clampX(centreX), panel.width)
+        },
+        {
+            side: "above",
+            x: clampX(centreX),
+            y: selection.top - CLEARANCE - panel.height,
+            fits: selection.top - CLEARANCE - panel.height >= free.top
+        }
+    ];
+    const found = tries.find((attempt)=>attempt.fits);
+    return found ? {
+        x: found.x,
+        y: found.y,
+        side: found.side
+    } : null;
+}

package/dist/canvas/ui/shortcut-tip.js

@@ -0,0 +1,18 @@
+const GLYPHS = {
+    mod: {
+        mac: "⌘",
+        other: "Ctrl"
+    },
+    shift: {
+        mac: "⇧",
+        other: "Shift"
+    }
+};
+export function isMacPlatform() {
+    return typeof navigator !== "undefined" && navigator.platform.includes("Mac");
+}
+export function shortcutTip(label, keys, mac = isMacPlatform()) {
+    if (keys.length === 0) return label;
+    const parts = keys.map((key)=>GLYPHS[key]?.[mac ? "mac" : "other"] ?? key);
+    return `${label}  ${parts.join(mac ? "" : "+")}`;
+}