@heyramzi/ui 2.11.0 → 2.11.2

package/dist/canvas/editor/style.js

@@ -1,174 +1,169 @@
 import { PEN_COLORS, SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "../pen/types.js";
 export const FONT_SIZES = [
-    16,
-    20,
-    28,
-    40
+	16,
+	20,
+	28,
+	40
 ];
 const SHAPE_WIDTHS = [
-    2,
-    3,
-    5
+	2,
+	3,
+	5
 ];
 const PEN_WIDTHS = [
-    2,
-    4,
-    8
+	2,
+	4,
+	8
 ];
 const HIGHLIGHTER_WIDTHS = [
-    12,
-    20,
-    32
+	12,
+	20,
+	32
 ];
 const FRAME_WIDTHS = [
-    1,
-    2,
-    4
+	1,
+	2,
+	4
 ];
 const CONTROLS = {
-    shape: [
-        "fill",
-        "stroke",
-        "width"
-    ],
-    text: [
-        "stroke",
-        "fontSize",
-        "fontWeight"
-    ],
-    stroke: [
-        "stroke",
-        "width"
-    ],
-    frame: [
-        "fill",
-        "stroke",
-        "width"
-    ]
+	shape: [
+		"fill",
+		"stroke",
+		"width"
+	],
+	text: [
+		"stroke",
+		"fontSize",
+		"fontWeight"
+	],
+	stroke: ["stroke", "width"],
+	frame: [
+		"fill",
+		"stroke",
+		"width"
+	]
 };
 function kindOf(node, frameType) {
-    if (node.type === SHAPE_NODE) return "shape";
-    if (node.type === TEXT_NODE) return "text";
-    if (node.type === STROKE_NODE) return "stroke";
-    return node.type === frameType && node.data.frame === true ? "frame" : null;
+	if (node.type === SHAPE_NODE) return "shape";
+	if (node.type === TEXT_NODE) return "text";
+	if (node.type === STROKE_NODE) return "stroke";
+	// Only a frame from the F tool wears a fill and a line; a group draws its own colour.
+	return node.type === frameType && node.data.frame === true ? "frame" : null;
 }
 function widthsOf(kind, node) {
-    if (kind === "shape") return SHAPE_WIDTHS;
-    if (kind === "frame") return FRAME_WIDTHS;
-    return node.data.tool === "highlighter" ? HIGHLIGHTER_WIDTHS : PEN_WIDTHS;
+	if (kind === "shape") return SHAPE_WIDTHS;
+	if (kind === "frame") return FRAME_WIDTHS;
+	return node.data.tool === "highlighter" ? HIGHLIGHTER_WIDTHS : PEN_WIDTHS;
 }
 function widthKey(kind) {
-    if (kind === "stroke") return "size";
-    return "strokeWidth";
+	if (kind === "stroke") return "size";
+	return "strokeWidth";
 }
 function colorOf(value) {
-    return PEN_COLORS.find((color)=>color === value);
+	return PEN_COLORS.find((color) => color === value);
 }
 function levelOf(kind, node) {
-    const widths = widthsOf(kind, node);
-    const stored = Number(node.data[widthKey(kind)]);
-    if (!Number.isFinite(stored)) return kind === "frame" ? 0 : 1;
-    let nearest = 0;
-    for(let at = 1; at < widths.length; at += 1){
-        if (Math.abs(widths[at] - stored) < Math.abs(widths[nearest] - stored)) nearest = at;
-    }
-    return nearest;
+	const widths = widthsOf(kind, node);
+	// A frame nobody styled draws the thinnest line, and a pen mark its middle one.
+	const stored = Number(node.data[widthKey(kind)]);
+	if (!Number.isFinite(stored)) return kind === "frame" ? 0 : 1;
+	let nearest = 0;
+	for (let at = 1; at < widths.length; at += 1) {
+		if (Math.abs(widths[at] - stored) < Math.abs(widths[nearest] - stored)) nearest = at;
+	}
+	return nearest;
 }
+/** What a card of each kind shows, given the colour it draws in. */
 const VALUES = {
-    shape: (node, color)=>({
-            fill: node.data.filled ? colorOf(node.data.fill) ?? color : "none",
-            stroke: color,
-            width: levelOf("shape", node)
-        }),
-    text: (node, color)=>({
-            stroke: color,
-            fontSize: Number(node.data.fontSize) || 20,
-            fontWeight: node.data.fontWeight === "bold" ? "bold" : "regular"
-        }),
-    stroke: (node, color)=>({
-            stroke: color,
-            width: levelOf("stroke", node)
-        }),
-    frame: (node)=>({
-            fill: colorOf(node.data.fill) ?? "none",
-            stroke: colorOf(node.data.stroke) ?? "ink",
-            width: levelOf("frame", node)
-        })
+	shape: (node, color) => ({
+		fill: node.data.filled ? colorOf(node.data.fill) ?? color : "none",
+		stroke: color,
+		width: levelOf("shape", node)
+	}),
+	text: (node, color) => ({
+		stroke: color,
+		fontSize: Number(node.data.fontSize) || 20,
+		fontWeight: node.data.fontWeight === "bold" ? "bold" : "regular"
+	}),
+	stroke: (node, color) => ({
+		stroke: color,
+		width: levelOf("stroke", node)
+	}),
+	frame: (node) => ({
+		fill: colorOf(node.data.fill) ?? "none",
+		stroke: colorOf(node.data.stroke) ?? "ink",
+		width: levelOf("frame", node)
+	})
 };
 function valuesOf(kind, node) {
-    return VALUES[kind](node, colorOf(node.data.color) ?? "ink");
+	return VALUES[kind](node, colorOf(node.data.color) ?? "ink");
 }
+/** What the panel shows for a selection, or null when nothing in it takes a style. */
 export function summarizeStyle(nodes, frameType) {
-    const controls = new Set();
-    const seen = new Map();
-    let widths = [];
-    for (const node of nodes){
-        const kind = kindOf(node, frameType);
-        if (!kind) continue;
-        const values = valuesOf(kind, node);
-        for (const control of CONTROLS[kind]){
-            controls.add(control);
-            const set = seen.get(control) ?? new Set();
-            set.add(values[control]);
-            seen.set(control, set);
-        }
-        if (widths.length === 0 && CONTROLS[kind].includes("width")) widths = widthsOf(kind, node);
-    }
-    if (controls.size === 0) return null;
-    const values = {};
-    for (const [control, set] of seen){
-        if (set.size === 1) Object.assign(values, {
-            [control]: [
-                ...set
-            ][0]
-        });
-    }
-    return {
-        controls,
-        values,
-        widths
-    };
+	const controls = new Set();
+	const seen = new Map();
+	let widths = [];
+	for (const node of nodes) {
+		const kind = kindOf(node, frameType);
+		if (!kind) continue;
+		const values = valuesOf(kind, node);
+		for (const control of CONTROLS[kind]) {
+			controls.add(control);
+			const set = seen.get(control) ?? new Set();
+			set.add(values[control]);
+			seen.set(control, set);
+		}
+		if (widths.length === 0 && CONTROLS[kind].includes("width")) widths = widthsOf(kind, node);
+	}
+	if (controls.size === 0) return null;
+	const values = {};
+	for (const [control, set] of seen) {
+		if (set.size === 1) Object.assign(values, { [control]: [...set][0] });
+	}
+	return {
+		controls,
+		values,
+		widths
+	};
 }
+/** A frame keeps its fill as is; a shape's fill also says whether it is filled. */
 function fillData(kind, fill) {
-    if (kind === "frame") return {
-        fill
-    };
-    return fill === "none" ? {
-        filled: false
-    } : {
-        filled: true,
-        fill
-    };
+	if (kind === "frame") return { fill };
+	return fill === "none" ? { filled: false } : {
+		filled: true,
+		fill
+	};
 }
 function textData(change) {
-    const data = {};
-    if (change.fontSize !== undefined) data.fontSize = change.fontSize;
-    if (change.fontWeight !== undefined) data.fontWeight = change.fontWeight;
-    return data;
+	const data = {};
+	if (change.fontSize !== undefined) data.fontSize = change.fontSize;
+	if (change.fontWeight !== undefined) data.fontWeight = change.fontWeight;
+	return data;
 }
 function dataFor(kind, node, change) {
-    const data = {};
-    if (change.stroke) data[kind === "frame" ? "stroke" : "color"] = change.stroke;
-    if (change.fill !== undefined && (kind === "shape" || kind === "frame")) {
-        Object.assign(data, fillData(kind, change.fill));
-    }
-    if (change.width !== undefined && kind !== "text") {
-        data[widthKey(kind)] = widthsOf(kind, node)[change.width];
-    }
-    if (kind === "text") Object.assign(data, textData(change));
-    return data;
+	const data = {};
+	if (change.stroke) data[kind === "frame" ? "stroke" : "color"] = change.stroke;
+	if (change.fill !== undefined && (kind === "shape" || kind === "frame")) {
+		Object.assign(data, fillData(kind, change.fill));
+	}
+	if (change.width !== undefined && kind !== "text") {
+		data[widthKey(kind)] = widthsOf(kind, node)[change.width];
+	}
+	if (kind === "text") Object.assign(data, textData(change));
+	return data;
 }
+/** One patch per card the change applies to. All of them are one undo step when dispatched together. */
 export function styleOps(nodes, change, frameType) {
-    const ops = [];
-    for (const node of nodes){
-        const kind = kindOf(node, frameType);
-        if (!kind) continue;
-        const data = dataFor(kind, node, change);
-        if (Object.keys(data).length > 0) ops.push({
-            kind: "patchNode",
-            nodeId: node.id,
-            data
-        });
-    }
-    return ops;
+	const ops = [];
+	for (const node of nodes) {
+		const kind = kindOf(node, frameType);
+		if (!kind) continue;
+		const data = dataFor(kind, node, change);
+		if (Object.keys(data).length > 0) ops.push({
+			kind: "patchNode",
+			nodeId: node.id,
+			data
+		});
+	}
+	return ops;
 }

package/dist/canvas/editor/text-field-context.js

@@ -1,8 +1,13 @@
+// The text field a host hands the pen. A plain textarea keeps the canvas MIT-clean; a host that
+// formats text provides a component, set once with the page skin.
 import { getContext, setContext } from "svelte";
+/** For a host that mounts a pen node with `mount(..., { context })`, as a test does. */
 export const TEXT_FIELD_KEY = Symbol("canvas-text-field");
+/** Call during component init. */
 export function setTextField(component) {
-    setContext(TEXT_FIELD_KEY, component);
+	setContext(TEXT_FIELD_KEY, component);
 }
+/** The host's field, or null: the pen then draws its own textarea. */
 export function useTextField() {
-    return getContext(TEXT_FIELD_KEY) ?? null;
+	return getContext(TEXT_FIELD_KEY) ?? null;
 }

package/dist/canvas/editor/z-order.js

@@ -1,82 +1,77 @@
+/** Ink is an annotation layer pinned above every card by pen.css, so it has no place in a stack. */
 export const INK_TYPES = new Set([
-    "stroke",
-    "text",
-    "shape"
+	"stroke",
+	"text",
+	"shape"
 ]);
 function layerOf(node) {
-    return typeof node.zIndex === "number" ? node.zIndex : 0;
+	return typeof node.zIndex === "number" ? node.zIndex : 0;
 }
+/** Cards stack among their siblings: a child never leaves its group's own stack. */
 function stacks(nodes) {
-    const byParent = new Map();
-    nodes.forEach((node, index)=>{
-        if (INK_TYPES.has(node.type ?? "")) return;
-        const key = node.parentId ?? "";
-        const stack = byParent.get(key) ?? [];
-        stack.push({
-            node,
-            index
-        });
-        byParent.set(key, stack);
-    });
-    for (const stack of byParent.values()){
-        stack.sort((a, b)=>layerOf(a.node) - layerOf(b.node) || a.index - b.index);
-    }
-    return byParent;
+	const byParent = new Map();
+	nodes.forEach((node, index) => {
+		if (INK_TYPES.has(node.type ?? "")) return;
+		const key = node.parentId ?? "";
+		const stack = byParent.get(key) ?? [];
+		stack.push({
+			node,
+			index
+		});
+		byParent.set(key, stack);
+	});
+	for (const stack of byParent.values()) {
+		stack.sort((a, b) => layerOf(a.node) - layerOf(b.node) || a.index - b.index);
+	}
+	return byParent;
 }
+/** One stack after a move, bottom first. Selected cards keep their order among themselves. */
 function moved(stack, picked, move) {
-    const isPicked = (slot)=>picked.has(slot.node.id);
-    if (move === "front") return [
-        ...stack.filter((s)=>!isPicked(s)),
-        ...stack.filter(isPicked)
-    ];
-    if (move === "back") return [
-        ...stack.filter(isPicked),
-        ...stack.filter((s)=>!isPicked(s))
-    ];
-    const next = [
-        ...stack
-    ];
-    if (move === "forward") {
-        for(let i = next.length - 2; i >= 0; i--){
-            if (isPicked(next[i]) && !isPicked(next[i + 1])) [next[i], next[i + 1]] = [
-                next[i + 1],
-                next[i]
-            ];
-        }
-    } else {
-        for(let i = 1; i < next.length; i++){
-            if (isPicked(next[i]) && !isPicked(next[i - 1])) [next[i], next[i - 1]] = [
-                next[i - 1],
-                next[i]
-            ];
-        }
-    }
-    return next;
+	const isPicked = (slot) => picked.has(slot.node.id);
+	if (move === "front") return [...stack.filter((s) => !isPicked(s)), ...stack.filter(isPicked)];
+	if (move === "back") return [...stack.filter(isPicked), ...stack.filter((s) => !isPicked(s))];
+	const next = [...stack];
+	// One step: each picked card trades places with the unpicked card beside it.
+	if (move === "forward") {
+		for (let i = next.length - 2; i >= 0; i--) {
+			if (isPicked(next[i]) && !isPicked(next[i + 1])) [next[i], next[i + 1]] = [next[i + 1], next[i]];
+		}
+	} else {
+		for (let i = 1; i < next.length; i++) {
+			if (isPicked(next[i]) && !isPicked(next[i - 1])) [next[i], next[i - 1]] = [next[i - 1], next[i]];
+		}
+	}
+	return next;
 }
+/**
+* The board after a stacking move, or null when nothing changes. Only a stack holding a
+* picked card is touched, and only cards whose layer changed are rewritten.
+*/
 export function reorderStack(nodes, picked, move) {
-    const layers = new Map();
-    for (const stack of stacks(nodes).values()){
-        if (!stack.some((slot)=>picked.has(slot.node.id))) continue;
-        const next = moved(stack, picked, move);
-        if (next.every((slot, i)=>slot === stack[i])) continue;
-        next.forEach((slot, rank)=>{
-            if (layerOf(slot.node) !== rank) layers.set(slot.node.id, rank);
-        });
-    }
-    if (layers.size === 0) return null;
-    return nodes.map((node)=>{
-        const layer = layers.get(node.id);
-        return layer === undefined ? node : {
-            ...node,
-            zIndex: layer
-        };
-    });
+	const layers = new Map();
+	for (const stack of stacks(nodes).values()) {
+		if (!stack.some((slot) => picked.has(slot.node.id))) continue;
+		const next = moved(stack, picked, move);
+		if (next.every((slot, i) => slot === stack[i])) continue;
+		next.forEach((slot, rank) => {
+			if (layerOf(slot.node) !== rank) layers.set(slot.node.id, rank);
+		});
+	}
+	if (layers.size === 0) return null;
+	return nodes.map((node) => {
+		const layer = layers.get(node.id);
+		return layer === undefined ? node : {
+			...node,
+			zIndex: layer
+		};
+	});
 }
+/** The layer a new card needs to land on top of its siblings, or undefined while no card has been raised. */
 export function topLayer(nodes, parentId) {
-    let top = 0;
-    for (const node of nodes){
-        if (INK_TYPES.has(node.type ?? "") || (node.parentId ?? "") !== (parentId ?? "")) continue;
-        top = Math.max(top, layerOf(node));
-    }
-    return top > 0 ? top + 1 : undefined;
+	let top = 0;
+	for (const node of nodes) {
+		if (INK_TYPES.has(node.type ?? "") || (node.parentId ?? "") !== (parentId ?? "")) continue;
+		top = Math.max(top, layerOf(node));
+	}
+	return top > 0 ? top + 1 : undefined;
 }

package/dist/canvas/headless/alignment.js

@@ -1,20 +1,26 @@
+/**
+* Align nodes horizontally (same row): set all to the topmost Y.
+*/
 export function alignNodesHorizontally(nodes) {
-    if (nodes.length < 2) return;
-    const targetY = Math.min(...nodes.map((n)=>n.position.y));
-    for (const node of nodes){
-        node.position = {
-            ...node.position,
-            y: targetY
-        };
-    }
+	if (nodes.length < 2) return;
+	const targetY = Math.min(...nodes.map((n) => n.position.y));
+	for (const node of nodes) {
+		node.position = {
+			...node.position,
+			y: targetY
+		};
+	}
 }
+/**
+* Align nodes vertically (same column): set all to the leftmost X.
+*/
 export function alignNodesVertically(nodes) {
-    if (nodes.length < 2) return;
-    const targetX = Math.min(...nodes.map((n)=>n.position.x));
-    for (const node of nodes){
-        node.position = {
-            ...node.position,
-            x: targetX
-        };
-    }
+	if (nodes.length < 2) return;
+	const targetX = Math.min(...nodes.map((n) => n.position.x));
+	for (const node of nodes) {
+		node.position = {
+			...node.position,
+			x: targetX
+		};
+	}
 }