@heyramzi/ui 2.11.1 → 2.11.2

package/dist/canvas/screen/parts.js

@@ -1,140 +1,127 @@
+// Pure edits on a screen's parts, so the card and the CLI op change a screen the same way.
+// Each function returns a new list.
 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;
+const isKind = (value) => typeof value === "string" && PART_KINDS.includes(value);
+const text = (value, fallback = "") => typeof value === "string" ? value.slice(0, MAX_LABEL) : fallback;
+/** The next id no part of this screen holds: p1, p2, and so on. */
 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}`;
+	const taken = new Set(parts.map((part) => part.id));
+	let n = parts.length + 1;
+	while (taken.has(`p${n}`)) n += 1;
+	return `p${n}`;
 }
+/** A part of this kind with its starting words. */
 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;
+	const base = PART_DEFAULTS[kind];
+	const part = {
+		...base,
+		...seed,
+		id: nextPartId(parts),
+		kind
+	};
+	if (part.items) part.items = [...part.items];
+	return part;
 }
+/** A stored id kept when it is a new string, else the next free one. */
 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;
+	const id = typeof raw === "string" && raw ? raw : "";
+	const unique = !id || seen.has(id) ? nextPartId(parts) : id;
+	seen.add(unique);
+	return unique;
 }
+/** What only one kind of part carries: a list's rows, a modal's body, a button's weight. */
 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 {};
+	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 {};
 }
+/** One stored part as a part that draws, or null when its kind is not one we know. */
 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)
-    };
+	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)
+	};
 }
+/** A screen as stored may be old, hand-written or half-typed: this one always draws. */
 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
-    };
+	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)
-    ];
+	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);
+	return parts.filter((part) => part.id !== id);
 }
+/** One step up (-1) or down (1). The ends stay put. */
 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;
+	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);
+	return parts.map((part) => part.id === id ? {
+		...part,
+		...patch
+	} : part);
 }
+/** A list row's words. Rows are added and cut at the end, never reordered. */
 export function setItem(items, index, value) {
-    return items.map((item, i)=>i === index ? value : item);
+	return items.map((item, i) => i === index ? value : item);
 }
 export function addItem(items) {
-    return items.length >= MAX_LIST_ITEMS ? [
-        ...items
-    ] : [
-        ...items,
-        "Item"
-    ];
+	return items.length >= MAX_LIST_ITEMS ? [...items] : [...items, "Item"];
 }
 export function removeItem(items, index) {
-    return items.filter((_, i)=>i !== index);
+	return items.filter((_, i) => i !== index);
 }
+/** A ready node for a board, as the CLI and the palette both build it. */
 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
-        }
-    };
+	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

@@ -1,71 +1,62 @@
+// The Screen card's kind and its add op, with no DOM, so the CLI can put a screen on a board.
+// ui.ts adds the renderer.
 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()
+	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()
+	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
-    ];
+	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];
 }
+/** Content-sized: the parts decide the height, so a layout never pins a stale one. */
 export const screenKind = {
-    type: SCREEN_NODE,
-    label: "Screen",
-    sizing: "content-sized",
-    size: {
-        width: SCREEN_WIDTH
-    },
-    createData: ()=>({
-            label: "",
-            mode: "wireframe",
-            parts: []
-        })
+	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
-        }
-    ]
+	id: "screen",
+	nodes: [screenKind],
+	ops: [{
+		kind: "addScreen",
+		schema: addScreenOp,
+		apply: applyAddScreen
+	}]
 });

package/dist/canvas/screen/types.js

@@ -1,44 +1,39 @@
+// The Screen card's data shape: a stack of kit parts drawn as a wireframe or a mockup.
 export const SCREEN_NODE = "screen";
+/** Card width before anyone resizes it. The height follows the parts. */
 export const SCREEN_WIDTH = 320;
 export const PART_KINDS = [
-    "header",
-    "button",
-    "input",
-    "image",
-    "list",
-    "modal"
-];
-export const SCREEN_MODES = [
-    "wireframe",
-    "mockup"
+	"header",
+	"button",
+	"input",
+	"image",
+	"list",
+	"modal"
 ];
+export const SCREEN_MODES = ["wireframe", "mockup"];
+/** A board holds screens of a handful of parts. One past this is a paste from a file. */
 export const MAX_PARTS = 24;
 export const MAX_LIST_ITEMS = 12;
 export const MAX_LABEL = 120;
+/** What a new part of each kind starts with. Words are labels, never sentences. */
 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"
-    }
+	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

@@ -1,13 +1,13 @@
+// The browser registers `screenUiPlugin`, and a server registers `screenPlugin`.
+// Never both, because a kind has one owner.
 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
-        }
-    ]
+	...screenPlugin,
+	nodes: [{
+		...screenKind,
+		component: ScreenCard
+	}]
 });

package/dist/canvas/test-utils.js

@@ -1,18 +1,18 @@
+/** A node for tests. Overrides win. */
 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
-    };
+	return {
+		id: overrides.id ?? `node-${Math.random().toString(36).slice(2, 8)}`,
+		type: "node",
+		position: {
+			x: 0,
+			y: 0
+		},
+		data: { label: "Test Node" },
+		...overrides
+	};
 }
+/** Narrows a lookup in a test so a miss fails with a name, not a TypeError. */
 export function expectDefined(value, what = "value") {
-    if (value === null || value === undefined) throw new Error(`Expected ${what} to be defined`);
-    return value;
+	if (value === null || value === undefined) throw new Error(`Expected ${what} to be defined`);
+	return value;
 }

package/dist/canvas/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,27 +1,26 @@
+// An overlay above xyflow's zoom pane never sees a wheel or a pinch, so it hands them down.
 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);
+	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);
 }