@heyramzi/ui 2.1.0 → 2.2.0

package/src/canvas/pen/PenOverlay.svelte

@@ -1,145 +1,145 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import "./pen.css";
-import PreviewSvg from "../components/shared/svg/PreviewSvg.svelte";
-import type { ErasableNode } from "./eraser.js";
-import type { PenOp } from "./ops.js";
-import { createPenSession, type PenPreview } from "./pen-session.js";
-import type { PenColor, PenTool } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./pen.css";
+	import PreviewSvg from "../components/shared/svg/PreviewSvg.svelte";
+	import type { ErasableNode } from "./eraser.js";
+	import type { PenOp } from "./ops.js";
+	import { createPenSession, type PenPreview } from "./pen-session.js";
+	import type { PenColor, PenTool } from "./types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	tool: PenTool;
-	color?: PenColor;
-	/** Brush width in flow units. Unset takes the tool's default. */
-	size?: number;
-	/** The xyflow viewport, so screen pixels map to flow units. */
-	viewport: { x: number; y: number; zoom: number };
-	nodes: readonly ErasableNode[];
-	commit: (ops: PenOp[]) => void;
-	startGesture: () => () => void;
-	onTextPlaced?: (nodeId: string) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		tool: PenTool;
+		color?: PenColor;
+		/** Brush width in flow units. Unset takes the tool's default. */
+		size?: number;
+		/** The xyflow viewport, so screen pixels map to flow units. */
+		viewport: { x: number; y: number; zoom: number };
+		nodes: readonly ErasableNode[];
+		commit: (ops: PenOp[]) => void;
+		startGesture: () => () => void;
+		onTextPlaced?: (nodeId: string) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	tool,
-	color = "ink",
-	size,
-	viewport,
-	nodes,
-	commit,
-	startGesture,
-	onTextPlaced,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		tool,
+		color = "ink",
+		size,
+		viewport,
+		nodes,
+		commit,
+		startGesture,
+		onTextPlaced,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let layer = $state<HTMLDivElement | null>(null);
-let preview = $state<PenPreview | null>(null);
-const session = createPenSession(
-	{
-		getNodes: () => nodes,
-		commit: (ops) => commit(ops),
-		startGesture: () => startGesture(),
-		onTextPlaced: (id) => onTextPlaced?.(id),
-		onPreview: (next) => {
-			preview = next;
+	// =========================
+	// STATE
+	// =========================
+	let layer = $state<HTMLDivElement | null>(null);
+	let preview = $state<PenPreview | null>(null);
+	const session = createPenSession(
+		{
+			getNodes: () => nodes,
+			commit: (ops) => commit(ops),
+			startGesture: () => startGesture(),
+			onTextPlaced: (id) => onTextPlaced?.(id),
+			onPreview: (next) => {
+				preview = next;
+			},
 		},
-	},
-	() => ({ tool, color, size, zoom: viewport.zoom }),
-);
+		() => ({ tool, color, size, zoom: viewport.zoom }),
+	);
 
-// =========================
-// EFFECTS
-// =========================
-// Switching tool mid-stroke unmounts the overlay, and an open gesture would block undo for good.
-$effect(() => () => session.cancel());
+	// =========================
+	// EFFECTS
+	// =========================
+	// Switching tool mid-stroke unmounts the overlay, and an open gesture would block undo for good.
+	$effect(() => () => session.cancel());
 
-// =========================
-// FUNCTIONS
-// =========================
-function toFlow(event: { clientX: number; clientY: number }) {
-	const rect = layer?.getBoundingClientRect();
-	const left = rect?.left ?? 0;
-	const top = rect?.top ?? 0;
-	return {
-		x: (event.clientX - left - viewport.x) / viewport.zoom,
-		y: (event.clientY - top - viewport.y) / viewport.zoom,
-	};
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function toFlow(event: { clientX: number; clientY: number }) {
+		const rect = layer?.getBoundingClientRect();
+		const left = rect?.left ?? 0;
+		const top = rect?.top ?? 0;
+		return {
+			x: (event.clientX - left - viewport.x) / viewport.zoom,
+			y: (event.clientY - top - viewport.y) / viewport.zoom,
+		};
+	}
 
-function pressureOf(event: PointerEvent): number | undefined {
-	return event.pointerType === "pen" ? event.pressure : undefined;
-}
+	function pressureOf(event: PointerEvent): number | undefined {
+		return event.pointerType === "pen" ? event.pressure : undefined;
+	}
 
-function onpointerdown(event: PointerEvent) {
-	// A second finger or a right click mustn't start a stroke.
-	if (event.button !== 0 || !event.isPrimary) return;
-	layer?.setPointerCapture(event.pointerId);
-	session.down(toFlow(event), pressureOf(event));
-}
+	function onpointerdown(event: PointerEvent) {
+		// A second finger or a right click mustn't start a stroke.
+		if (event.button !== 0 || !event.isPrimary) return;
+		layer?.setPointerCapture(event.pointerId);
+		session.down(toFlow(event), pressureOf(event));
+	}
 
-function onpointermove(event: PointerEvent) {
-	if (!session.active) return;
-	// Coalesced events keep a fast pen stroke smooth between animation frames.
-	const batch = event.getCoalescedEvents?.() ?? [];
-	for (const sample of batch.length > 0 ? batch : [event]) {
-		session.move(toFlow(sample), pressureOf(sample));
+	function onpointermove(event: PointerEvent) {
+		if (!session.active) return;
+		// Coalesced events keep a fast pen stroke smooth between animation frames.
+		const batch = event.getCoalescedEvents?.() ?? [];
+		for (const sample of batch.length > 0 ? batch : [event]) {
+			session.move(toFlow(sample), pressureOf(sample));
+		}
 	}
-}
 
-function onpointerup(event: PointerEvent) {
-	if (!session.active) return;
-	layer?.releasePointerCapture(event.pointerId);
-	session.up(toFlow(event), { square: event.shiftKey });
-}
+	function onpointerup(event: PointerEvent) {
+		if (!session.active) return;
+		layer?.releasePointerCapture(event.pointerId);
+		session.up(toFlow(event), { square: event.shiftKey });
+	}
 
-function onkeydown(event: KeyboardEvent) {
-	if (event.key === "Escape") session.cancel();
-}
+	function onkeydown(event: KeyboardEvent) {
+		if (event.key === "Escape") session.cancel();
+	}
 
-// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
-// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
-function forwardWheel(node: HTMLElement) {
-	const handler = (event: WheelEvent) => {
-		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);
-}
+	// The overlay sits above xyflow's zoom pane, so a wheel or a trackpad pinch would
+	// never reach it. Hand those to the pane so you can zoom and pan mid-drawing.
+	function forwardWheel(node: HTMLElement) {
+		const handler = (event: WheelEvent) => {
+			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);
+	}
 
-function cursorFor(current: PenTool): string {
-	if (current === "text") return "text";
-	return "crosshair";
-}
+	function cursorFor(current: PenTool): string {
+		if (current === "text") return "text";
+		return "crosshair";
+	}
 </script>
 
 <!-- =========================== -->

package/src/canvas/pen/ShapeNode.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { NodeResizer, type NodeProps } from "@xyflow/svelte";
-import ShapeOutline from "../components/shared/svg/ShapeOutline.svelte";
-import PenField from "./PenField.svelte";
-import { getDiagramEditorContext } from "../editor/editor-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import { isLocked } from "../editor/lock.js";
-import "./pen.css";
-import { penColorVar } from "./colors.js";
-import { shapeOutline } from "./shapes.js";
-import type { ShapeData } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { NodeResizer, type NodeProps } from "@xyflow/svelte";
+	import ShapeOutline from "../components/shared/svg/ShapeOutline.svelte";
+	import PenField from "./PenField.svelte";
+	import { getDiagramEditorContext } from "../editor/editor-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import { isLocked } from "../editor/lock.js";
+	import "./pen.css";
+	import { penColorVar } from "./colors.js";
+	import { shapeOutline } from "./shapes.js";
+	import type { ShapeData } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-let { id, data, selected, width, height }: NodeProps = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, data, selected, width, height }: NodeProps = $props();
 
-// =========================
-// STATE
-// =========================
-const editor = getDiagramEditorContext();
-const handDrawn = useHandDrawn();
-let endResize: (() => void) | null = null;
+	// =========================
+	// STATE
+	// =========================
+	const editor = getDiagramEditorContext();
+	const handDrawn = useHandDrawn();
+	let endResize: (() => void) | null = null;
 
-// =========================
-// DERIVED
-// =========================
-let shape = $derived(data as ShapeData);
-let outline = $derived(
-	shapeOutline(shape.shape, width ?? 0, height ?? 0, shape.strokeWidth / 2),
-);
-let ink = $derived(penColorVar(shape.color));
+	// =========================
+	// DERIVED
+	// =========================
+	let shape = $derived(data as ShapeData);
+	let outline = $derived(shapeOutline(shape.shape, width ?? 0, height ?? 0, shape.strokeWidth / 2));
+	let ink = $derived(penColorVar(shape.color));
 </script>
 
 <!-- =========================== -->
@@ -58,7 +56,8 @@ let ink = $derived(penColorVar(shape.color));
 		readonly={!editor || isLocked({ data })}
 		ariaLabel="Shape label"
 		color={ink}
-		onCommit={(next, live) => editor?.patchNodeData(id, { label: next }, live ? { coalesce: true } : undefined)}
+		onCommit={(next, live) =>
+			editor?.patchNodeData(id, { label: next }, live ? { coalesce: true } : undefined)}
 		onExit={() => editor?.endTextEdit()}
 	/>
 {/if}

package/src/canvas/pen/TextNode.svelte

@@ -1,61 +1,61 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Handle, Position, type NodeProps } from "@xyflow/svelte";
-import { onMount } from "svelte";
-import TextRule from "../components/shared/svg/TextRule.svelte";
-import PenField from "./PenField.svelte";
-import { getDiagramEditorContext } from "../editor/editor-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import { isLocked } from "../editor/lock.js";
-import { roughUnderline, seedFrom, sketchColors } from "../headless/sketch.js";
-import "./pen.css";
-import { penColorVar } from "./colors.js";
-import type { TextData } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Handle, Position, type NodeProps } from "@xyflow/svelte";
+	import { onMount } from "svelte";
+	import TextRule from "../components/shared/svg/TextRule.svelte";
+	import PenField from "./PenField.svelte";
+	import { getDiagramEditorContext } from "../editor/editor-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import { isLocked } from "../editor/lock.js";
+	import { roughUnderline, seedFrom, sketchColors } from "../headless/sketch.js";
+	import "./pen.css";
+	import { penColorVar } from "./colors.js";
+	import type { TextData } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-let { id, data, selected }: NodeProps = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, data, selected }: NodeProps = $props();
 
-// =========================
-// STATE
-// =========================
-const editor = getDiagramEditorContext();
-const handDrawn = useHandDrawn();
-let field = $state<ReturnType<typeof PenField>>();
-let boxWidth = $state(0);
+	// =========================
+	// STATE
+	// =========================
+	const editor = getDiagramEditorContext();
+	const handDrawn = useHandDrawn();
+	let field = $state<ReturnType<typeof PenField>>();
+	let boxWidth = $state(0);
 
-// =========================
-// DERIVED
-// =========================
-let text = $derived(data as TextData);
-let ink = $derived(penColorVar(text.color));
-let rule = $derived(
-	text.underline && boxWidth > 2
-		? roughUnderline(
-				boxWidth,
-				{ seed: seedFrom(id) + 7, colors: { ...sketchColors("ink", false), stroke: ink } },
-				{ formal: !handDrawn() },
-			)
-		: [],
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let text = $derived(data as TextData);
+	let ink = $derived(penColorVar(text.color));
+	let rule = $derived(
+		text.underline && boxWidth > 2
+			? roughUnderline(
+					boxWidth,
+					{ seed: seedFrom(id) + 7, colors: { ...sketchColors("ink", false), stroke: ink } },
+					{ formal: !handDrawn() },
+				)
+			: [],
+	);
 
-// =========================
-// EFFECTS
-// =========================
-// The editor asks a freshly dropped text to open, so the first thing typed lands in it.
-onMount(() => editor?.registerStartEdit(id, () => void field?.edit()));
+	// =========================
+	// EFFECTS
+	// =========================
+	// The editor asks a freshly dropped text to open, so the first thing typed lands in it.
+	onMount(() => editor?.registerStartEdit(id, () => void field?.edit()));
 
-// =========================
-// FUNCTIONS
-// =========================
-function onExit() {
-	editor?.endTextEdit();
-	// A click that typed nothing leaves no empty node behind.
-	if (editor && text.text.trim() === "") editor.removeNode(id);
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function onExit() {
+		editor?.endTextEdit();
+		// A click that typed nothing leaves no empty node behind.
+		if (editor && text.text.trim() === "") editor.removeNode(id);
+	}
 </script>
 
 <!-- =========================== -->
@@ -81,7 +81,8 @@ function onExit() {
 		fontWeight={text.fontWeight === "bold" ? 700 : undefined}
 		center={text.align === "center"}
 		column={text.fixedWidth}
-		onCommit={(next, live) => editor?.patchNodeData(id, { text: next }, live ? { coalesce: true } : undefined)}
+		onCommit={(next, live) =>
+			editor?.patchNodeData(id, { text: next }, live ? { coalesce: true } : undefined)}
 		{onExit}
 	/>
 	{#if rule.length > 0}

package/src/canvas/pen/host-field.test.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-// A host's text field for the PenField test: shows its value, records that it was opened.
-import type { TextFieldProps } from "../editor/text-field-context.js";
+	// A host's text field for the PenField test: shows its value, records that it was opened.
+	import type { TextFieldProps } from "../editor/text-field-context.js";
 
-let { value, readonly = false, class: klass = "" }: TextFieldProps = $props();
-let opened = $state(0);
+	let { value, readonly = false, class: klass = "" }: TextFieldProps = $props();
+	let opened = $state(0);
 
-export function edit() {
-	opened++;
-}
+	export function edit() {
+		opened++;
+	}
 </script>
 
 <div data-host-field class={klass} data-readonly={readonly} data-opened={opened}>{value}</div>

package/src/canvas/pen/shapes.ts

@@ -1,7 +1,13 @@
 // Shape and text nodes from a drag or a click. Pure, so the CLI can reuse it.
 
 import type { Box, Pt } from "./geometry.js";
-import type { PenColor, PenNodeInput, ShapeData, ShapeKind, TextData } from "./types.js";
+import type {
+  PenColor,
+  PenNodeInput,
+  ShapeData,
+  ShapeKind,
+  TextData,
+} from "./types.js";
 import { PEN_DEFAULTS, SHAPE_NODE, TEXT_NODE } from "./types.js";
 
 /** A shape smaller than this on both sides was a click, so it gets the default size. */

package/src/canvas/screen/GlyphIcon.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { GLYPHS, type GlyphName } from "./glyphs.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { GLYPHS, type GlyphName } from "./glyphs.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	name: GlyphName;
-	size?: number;
-	class?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		name: GlyphName;
+		size?: number;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { name, size = 12, class: klass = "" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { name, size = 12, class: klass = "" }: Props = $props();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<span class="cv-glyph {klass}" style:--glyph={`url("${GLYPHS[name]}")`} style:--size="{size}px" aria-hidden="true"></span>
+<span
+	class="cv-glyph {klass}"
+	style:--glyph={`url("${GLYPHS[name]}")`}
+	style:--size="{size}px"
+	aria-hidden="true"
+></span>