@heyramzi/ui 2.1.0 → 2.2.0

package/src/canvas/ui/CanvasToolbar.svelte

@@ -1,88 +1,95 @@
 <script lang="ts" module>
-import type { PenColor } from "../pen/types.js";
-import type { CanvasTool } from "./tools.js";
+	import type { PenColor } from "../pen/types.js";
+	import type { CanvasTool } from "./tools.js";
 
-export interface ToolbarLabels {
-	toolbar: string;
-	style: string;
-	tools: Record<CanvasTool, string> & { shapes: string; note: string };
-	colors: Record<PenColor, string>;
-	/** Small, medium, large. */
-	sizes: readonly [string, string, string];
-}
+	export interface ToolbarLabels {
+		toolbar: string;
+		style: string;
+		tools: Record<CanvasTool, string> & { shapes: string; note: string };
+		colors: Record<PenColor, string>;
+		/** Small, medium, large. */
+		sizes: readonly [string, string, string];
+	}
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Panel } from "@xyflow/svelte";
-import type { Snippet } from "svelte";
-import "../pen/pen.css";
-import { PEN_COLORS } from "../pen/types.js";
-import "./canvas-ui.css";
-import ToolIcon from "../components/icons/ToolIcon.svelte";
-import {
-	hasBrush,
-	hasColor,
-	isBrushTool,
-	isShapeTool,
-	keyForTool,
-	type BrushLevel,
-	type BrushTool,
-} from "./tools.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Panel } from "@xyflow/svelte";
+	import type { Snippet } from "svelte";
+	import "../pen/pen.css";
+	import { PEN_COLORS } from "../pen/types.js";
+	import "./canvas-ui.css";
+	import ToolIcon from "../components/icons/ToolIcon.svelte";
+	import {
+		hasBrush,
+		hasColor,
+		isBrushTool,
+		isShapeTool,
+		keyForTool,
+		type BrushLevel,
+		type BrushTool,
+	} from "./tools.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	tool: CanvasTool;
-	color: PenColor;
-	level: BrushLevel;
-	labels: ToolbarLabels;
-	/** The note button drops a note card, so the host owns what it does. Omit it to hide the button. */
-	onNote?: () => void;
-	/** Sits last on the rail, for what only the host knows, like the card palette. */
-	extra?: Snippet;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		tool: CanvasTool;
+		color: PenColor;
+		level: BrushLevel;
+		labels: ToolbarLabels;
+		/** The note button drops a note card, so the host owns what it does. Omit it to hide the button. */
+		onNote?: () => void;
+		/** Sits last on the rail, for what only the host knows, like the card palette. */
+		extra?: Snippet;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { tool = $bindable(), color = $bindable(), level = $bindable(), labels, onNote, extra }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		tool = $bindable(),
+		color = $bindable(),
+		level = $bindable(),
+		labels,
+		onNote,
+		extra,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let lastShape = $state<"rectangle" | "ellipse" | "diamond">("rectangle");
-let lastBrush = $state<BrushTool>("pen");
+	// =========================
+	// STATE
+	// =========================
+	let lastShape = $state<"rectangle" | "ellipse" | "diamond">("rectangle");
+	let lastBrush = $state<BrushTool>("pen");
 
-// =========================
-// DERIVED
-// =========================
-const BRUSHES = ["pen", "highlighter", "eraser"] as const;
-const SHAPES = ["rectangle", "ellipse", "diamond"] as const;
-const BRUSH_DOT = [4, 7, 11] as const;
+	// =========================
+	// DERIVED
+	// =========================
+	const BRUSHES = ["pen", "highlighter", "eraser"] as const;
+	const SHAPES = ["rectangle", "ellipse", "diamond"] as const;
+	const BRUSH_DOT = [4, 7, 11] as const;
 
-let shapeActive = $derived(isShapeTool(tool));
-let brushActive = $derived(isBrushTool(tool));
-let showStyle = $derived(brushActive || shapeActive || hasColor(tool));
+	let shapeActive = $derived(isShapeTool(tool));
+	let brushActive = $derived(isBrushTool(tool));
+	let showStyle = $derived(brushActive || shapeActive || hasColor(tool));
 
-// =========================
-// EFFECTS
-// =========================
-$effect(() => {
-	if (isShapeTool(tool)) lastShape = tool;
-	if (isBrushTool(tool)) lastBrush = tool;
-});
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		if (isShapeTool(tool)) lastShape = tool;
+		if (isBrushTool(tool)) lastBrush = tool;
+	});
 
-// =========================
-// FUNCTIONS
-// =========================
-function tip(id: CanvasTool, label = labels.tools[id]): string {
-	const key = keyForTool(id);
-	return key ? `${label}  ${key}` : label;
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function tip(id: CanvasTool, label = labels.tools[id]): string {
+		const key = keyForTool(id);
+		return key ? `${label}  ${key}` : label;
+	}
 </script>
 
 <!-- =========================== -->
@@ -90,30 +97,90 @@ function tip(id: CanvasTool, label = labels.tools[id]): string {
 <!-- =========================== -->
 <Panel position="center-left" class="cv-dock">
 	<div class="cv-row">
-		<div class="cv-bar cv-rail" role="toolbar" aria-orientation="vertical" aria-label={labels.toolbar}>
-			<button type="button" class="cv-btn" aria-pressed={tool === "select"} aria-label={labels.tools.select} data-tip={tip("select")} onclick={() => (tool = "select")}>
+		<div
+			class="cv-bar cv-rail"
+			role="toolbar"
+			aria-orientation="vertical"
+			aria-label={labels.toolbar}
+		>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={tool === "select"}
+				aria-label={labels.tools.select}
+				data-tip={tip("select")}
+				onclick={() => (tool = "select")}
+			>
 				<ToolIcon name="select" />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={tool === "hand"} aria-label={labels.tools.hand} data-tip={tip("hand")} onclick={() => (tool = "hand")}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={tool === "hand"}
+				aria-label={labels.tools.hand}
+				data-tip={tip("hand")}
+				onclick={() => (tool = "hand")}
+			>
 				<ToolIcon name="hand" />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={tool === "connect"} aria-label={labels.tools.connect} data-tip={tip("connect")} onclick={() => (tool = "connect")}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={tool === "connect"}
+				aria-label={labels.tools.connect}
+				data-tip={tip("connect")}
+				onclick={() => (tool = "connect")}
+			>
 				<ToolIcon name="connect" />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={brushActive} aria-label={labels.tools[lastBrush]} data-tip={tip(lastBrush)} onclick={() => (tool = lastBrush)}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={brushActive}
+				aria-label={labels.tools[lastBrush]}
+				data-tip={tip(lastBrush)}
+				onclick={() => (tool = lastBrush)}
+			>
 				<ToolIcon name={brushActive ? (tool as BrushTool) : lastBrush} />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={tool === "text"} aria-label={labels.tools.text} data-tip={tip("text")} onclick={() => (tool = "text")}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={tool === "text"}
+				aria-label={labels.tools.text}
+				data-tip={tip("text")}
+				onclick={() => (tool = "text")}
+			>
 				<ToolIcon name="text" />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={shapeActive} aria-label={labels.tools.shapes} data-tip={tip("rectangle", labels.tools.shapes)} onclick={() => (tool = lastShape)}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={shapeActive}
+				aria-label={labels.tools.shapes}
+				data-tip={tip("rectangle", labels.tools.shapes)}
+				onclick={() => (tool = lastShape)}
+			>
 				<ToolIcon name={shapeActive ? (tool as typeof lastShape) : lastShape} />
 			</button>
-			<button type="button" class="cv-btn" aria-pressed={tool === "frame"} aria-label={labels.tools.frame} data-tip={tip("frame")} onclick={() => (tool = "frame")}>
+			<button
+				type="button"
+				class="cv-btn"
+				aria-pressed={tool === "frame"}
+				aria-label={labels.tools.frame}
+				data-tip={tip("frame")}
+				onclick={() => (tool = "frame")}
+			>
 				<ToolIcon name="frame" />
 			</button>
 			{#if onNote}
-				<button type="button" class="cv-btn" aria-label={labels.tools.note} data-tip="{labels.tools.note}  N" onclick={onNote}>
+				<button
+					type="button"
+					class="cv-btn"
+					aria-label={labels.tools.note}
+					data-tip="{labels.tools.note}  N"
+					onclick={onNote}
+				>
 					<ToolIcon name="note" />
 				</button>
 			{/if}
@@ -128,13 +195,27 @@ function tip(id: CanvasTool, label = labels.tools[id]): string {
 			<div class="cv-bar t-enter" role="toolbar" aria-label={labels.style}>
 				{#if brushActive}
 					{#each BRUSHES as brush (brush)}
-						<button type="button" class="cv-btn" aria-pressed={tool === brush} aria-label={labels.tools[brush]} data-tip={tip(brush)} onclick={() => (tool = brush)}>
+						<button
+							type="button"
+							class="cv-btn"
+							aria-pressed={tool === brush}
+							aria-label={labels.tools[brush]}
+							data-tip={tip(brush)}
+							onclick={() => (tool = brush)}
+						>
 							<ToolIcon name={brush} />
 						</button>
 					{/each}
 				{:else if shapeActive}
 					{#each SHAPES as shape (shape)}
-						<button type="button" class="cv-btn" aria-pressed={tool === shape} aria-label={labels.tools[shape]} data-tip={tip(shape)} onclick={() => (tool = shape)}>
+						<button
+							type="button"
+							class="cv-btn"
+							aria-pressed={tool === shape}
+							aria-label={labels.tools[shape]}
+							data-tip={tip(shape)}
+							onclick={() => (tool = shape)}
+						>
 							<ToolIcon name={shape} />
 						</button>
 					{/each}
@@ -158,7 +239,14 @@ function tip(id: CanvasTool, label = labels.tools[id]): string {
 				{#if hasBrush(tool)}
 					<span class="cv-gap" aria-hidden="true"></span>
 					{#each BRUSH_DOT as dot, index (index)}
-						<button type="button" class="cv-btn" aria-pressed={level === index} aria-label={labels.sizes[index]} data-tip={labels.sizes[index]} onclick={() => (level = index as BrushLevel)}>
+						<button
+							type="button"
+							class="cv-btn"
+							aria-pressed={level === index}
+							aria-label={labels.sizes[index]}
+							data-tip={labels.sizes[index]}
+							onclick={() => (level = index as BrushLevel)}
+						>
 							<span class="cv-dot" style:--dot="{dot}px"></span>
 						</button>
 					{/each}

package/src/canvas/ui/FrameLayer.svelte

@@ -1,72 +1,72 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useStore } from "@xyflow/svelte";
-import { frameRect, type FrameRect } from "../editor/frame.js";
-import "./canvas-ui.css";
-import { forwardWheel } from "./forward-wheel.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useStore } from "@xyflow/svelte";
+	import { frameRect, type FrameRect } from "../editor/frame.js";
+	import "./canvas-ui.css";
+	import { forwardWheel } from "./forward-wheel.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** A drag ended, or a click: the box in flow units. */
-	onFrame: (rect: FrameRect) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** A drag ended, or a click: the box in flow units. */
+		onFrame: (rect: FrameRect) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { onFrame }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { onFrame }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-// The layer maps screen pixels to flow units, so it reads the live xyflow viewport.
-const store = useStore();
-let layer = $state<HTMLDivElement | null>(null);
-let start = $state<{ x: number; y: number } | null>(null);
-let end = $state<{ x: number; y: number } | null>(null);
+	// =========================
+	// STATE
+	// =========================
+	// The layer maps screen pixels to flow units, so it reads the live xyflow viewport.
+	const store = useStore();
+	let layer = $state<HTMLDivElement | null>(null);
+	let start = $state<{ x: number; y: number } | null>(null);
+	let end = $state<{ x: number; y: number } | null>(null);
 
-// =========================
-// DERIVED
-// =========================
-let preview = $derived(start && end ? frameRect(start, end) : null);
+	// =========================
+	// DERIVED
+	// =========================
+	let preview = $derived(start && end ? frameRect(start, end) : null);
 
-// =========================
-// FUNCTIONS
-// =========================
-function toFlow(event: { clientX: number; clientY: number }) {
-	const box = layer?.getBoundingClientRect();
-	const { x, y, zoom } = store.viewport;
-	return {
-		x: (event.clientX - (box?.left ?? 0) - x) / zoom,
-		y: (event.clientY - (box?.top ?? 0) - y) / zoom,
-	};
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function toFlow(event: { clientX: number; clientY: number }) {
+		const box = layer?.getBoundingClientRect();
+		const { x, y, zoom } = store.viewport;
+		return {
+			x: (event.clientX - (box?.left ?? 0) - x) / zoom,
+			y: (event.clientY - (box?.top ?? 0) - y) / zoom,
+		};
+	}
 
-function onpointerdown(event: PointerEvent) {
-	if (event.button !== 0 || !event.isPrimary) return;
-	layer?.setPointerCapture(event.pointerId);
-	start = end = toFlow(event);
-}
+	function onpointerdown(event: PointerEvent) {
+		if (event.button !== 0 || !event.isPrimary) return;
+		layer?.setPointerCapture(event.pointerId);
+		start = end = toFlow(event);
+	}
 
-function onpointermove(event: PointerEvent) {
-	if (start) end = toFlow(event);
-}
+	function onpointermove(event: PointerEvent) {
+		if (start) end = toFlow(event);
+	}
 
-function onpointerup(event: PointerEvent) {
-	if (!start) return;
-	layer?.releasePointerCapture(event.pointerId);
-	const rect = frameRect(start, toFlow(event));
-	start = end = null;
-	onFrame(rect);
-}
+	function onpointerup(event: PointerEvent) {
+		if (!start) return;
+		layer?.releasePointerCapture(event.pointerId);
+		const rect = frameRect(start, toFlow(event));
+		start = end = null;
+		onFrame(rect);
+	}
 
-function cancel() {
-	start = end = null;
-}
+	function cancel() {
+		start = end = null;
+	}
 </script>
 
 <!-- =========================== -->

package/src/canvas/ui/PenLayer.svelte

@@ -1,39 +1,48 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useStore } from "@xyflow/svelte";
-import type { ErasableNode } from "../pen/eraser.js";
-import type { PenOp } from "../pen/ops.js";
-import PenOverlay from "../pen/PenOverlay.svelte";
-import type { PenColor, PenTool } from "../pen/types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useStore } from "@xyflow/svelte";
+	import type { ErasableNode } from "../pen/eraser.js";
+	import type { PenOp } from "../pen/ops.js";
+	import PenOverlay from "../pen/PenOverlay.svelte";
+	import type { PenColor, PenTool } from "../pen/types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	tool: PenTool;
-	color: PenColor;
-	size?: number;
-	nodes: readonly ErasableNode[];
-	commit: (ops: PenOp[]) => void;
-	startGesture: () => () => void;
-	onTextPlaced?: (nodeId: string) => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		tool: PenTool;
+		color: PenColor;
+		size?: number;
+		nodes: readonly ErasableNode[];
+		commit: (ops: PenOp[]) => void;
+		startGesture: () => () => void;
+		onTextPlaced?: (nodeId: string) => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { tool, color, size, nodes, commit, startGesture, onTextPlaced }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { tool, color, size, nodes, commit, startGesture, onTextPlaced }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-// The overlay maps screen pixels to flow units, so it reads the live xyflow viewport.
-const store = useStore();
+	// =========================
+	// STATE
+	// =========================
+	// The overlay maps screen pixels to flow units, so it reads the live xyflow viewport.
+	const store = useStore();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<PenOverlay {tool} {color} {size} viewport={store.viewport} {nodes} {commit} {startGesture} {onTextPlaced} />
+<PenOverlay
+	{tool}
+	{color}
+	{size}
+	viewport={store.viewport}
+	{nodes}
+	{commit}
+	{startGesture}
+	{onTextPlaced}
+/>