@heyramzi/ui 2.0.1 → 2.2.0

package/src/canvas/chrome/chrome-zoom.svelte

@@ -1,120 +1,121 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useConnection, useStore } from "@xyflow/svelte";
-import { untrack } from "svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useConnection, useStore } from "@xyflow/svelte";
+	import { untrack } from "svelte";
 
-// A root `--canvas-unzoom` restyled every card per zoom frame. It lives only on nodes showing chrome: selected, hovered, or all while a link is dragged.
+	// A root `--canvas-unzoom` restyled every card per zoom frame. It lives only on nodes showing chrome: selected, hovered, or all while a link is dragged.
 
-// =========================
-// CONSTANTS
-// =========================
-const MIN_ZOOM = 0.05;
-const NODE = ".svelte-flow__node";
+	// =========================
+	// CONSTANTS
+	// =========================
+	const MIN_ZOOM = 0.05;
+	const NODE = ".svelte-flow__node";
 
-// =========================
-// STATE
-// =========================
-const store = useStore();
-const connection = useConnection();
+	// =========================
+	// STATE
+	// =========================
+	const store = useStore();
+	const connection = useConnection();
 
-// Plain collections: they change on selection and hover, never per frame, and nothing reads them reactively.
-const selected = new Set<HTMLElement>();
-let hovered: HTMLElement | null = null;
+	// Plain collections: they change on selection and hover, never per frame, and nothing reads them reactively.
+	const selected = new Set<HTMLElement>();
+	let hovered: HTMLElement | null = null;
 
-// =========================
-// DERIVED
-// =========================
-let unzoom = $derived(String(1 / Math.max(store.viewport.zoom, MIN_ZOOM)));
-let linking = $derived(connection.current.inProgress);
+	// =========================
+	// DERIVED
+	// =========================
+	let unzoom = $derived(String(1 / Math.max(store.viewport.zoom, MIN_ZOOM)));
+	let linking = $derived(connection.current.inProgress);
 
-// =========================
-// FUNCTIONS
-// =========================
-const paint = (node: HTMLElement | null, value = unzoom) => node?.style.setProperty("--canvas-unzoom", value);
+	// =========================
+	// FUNCTIONS
+	// =========================
+	const paint = (node: HTMLElement | null, value = unzoom) =>
+		node?.style.setProperty("--canvas-unzoom", value);
 
-function paintShowing(value: string) {
-	for (const node of selected) {
-		if (node.isConnected) paint(node, value);
-		else selected.delete(node);
-	}
-	paint(hovered, value);
-}
-
-// Chrome that belongs to one card (grips, quick-add) hides while several are selected: see chrome.css.
-function flagMulti() {
-	store.domNode?.toggleAttribute("data-cv-multi", selected.size > 1);
-}
-
-function track(node: HTMLElement) {
-	if (node.classList.contains("selected")) {
-		if (!selected.has(node)) {
-			selected.add(node);
-			paint(node);
+	function paintShowing(value: string) {
+		for (const node of selected) {
+			if (node.isConnected) paint(node, value);
+			else selected.delete(node);
 		}
-	} else selected.delete(node);
-	flagMulti();
-}
+		paint(hovered, value);
+	}
 
-// =========================
-// EFFECTS
-// =========================
-$effect(() => {
-	paintShowing(unzoom);
-});
+	// Chrome that belongs to one card (grips, quick-add) hides while several are selected: see chrome.css.
+	function flagMulti() {
+		store.domNode?.toggleAttribute("data-cv-multi", selected.size > 1);
+	}
 
-$effect(() => {
-	const root = store.domNode;
-	if (!root) return;
-	if (linking) {
-		root.dataset.cvLinking = "";
-		const value = unzoom;
-		for (const node of root.querySelectorAll<HTMLElement>(NODE)) paint(node, value);
-		return () => delete root.dataset.cvLinking;
+	function track(node: HTMLElement) {
+		if (node.classList.contains("selected")) {
+			if (!selected.has(node)) {
+				selected.add(node);
+				paint(node);
+			}
+		} else selected.delete(node);
+		flagMulti();
 	}
-});
 
-function watch(root: HTMLElement) {
-	const over = (event: PointerEvent) => {
-		const node = (event.target as Element | null)?.closest<HTMLElement>(NODE) ?? null;
-		if (node === hovered) return;
-		hovered = node;
-		paint(node);
-	};
-	root.addEventListener("pointerover", over, { passive: true });
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		paintShowing(unzoom);
+	});
 
-	// A node picks up or loses the `selected` class when the selection changes, and arrives selected when pasted or created.
-	for (const node of root.querySelectorAll<HTMLElement>(`${NODE}.selected`)) track(node);
-	const classes = new MutationObserver((records) => {
-		for (const record of records) {
-			const node = record.target as HTMLElement;
-			if (node.matches(NODE)) track(node);
+	$effect(() => {
+		const root = store.domNode;
+		if (!root) return;
+		if (linking) {
+			root.dataset.cvLinking = "";
+			const value = unzoom;
+			for (const node of root.querySelectorAll<HTMLElement>(NODE)) paint(node, value);
+			return () => delete root.dataset.cvLinking;
 		}
 	});
-	classes.observe(root, { attributes: true, attributeFilter: ["class"], subtree: true });
-	const arrivals = new MutationObserver((records) => {
-		for (const record of records) {
-			for (const added of record.addedNodes) {
-				if (added instanceof HTMLElement && added.matches(NODE)) track(added);
+
+	function watch(root: HTMLElement) {
+		const over = (event: PointerEvent) => {
+			const node = (event.target as Element | null)?.closest<HTMLElement>(NODE) ?? null;
+			if (node === hovered) return;
+			hovered = node;
+			paint(node);
+		};
+		root.addEventListener("pointerover", over, { passive: true });
+
+		// A node picks up or loses the `selected` class when the selection changes, and arrives selected when pasted or created.
+		for (const node of root.querySelectorAll<HTMLElement>(`${NODE}.selected`)) track(node);
+		const classes = new MutationObserver((records) => {
+			for (const record of records) {
+				const node = record.target as HTMLElement;
+				if (node.matches(NODE)) track(node);
 			}
-		}
-	});
-	const layer = root.querySelector(".svelte-flow__nodes");
-	if (layer) arrivals.observe(layer, { childList: true });
+		});
+		classes.observe(root, { attributes: true, attributeFilter: ["class"], subtree: true });
+		const arrivals = new MutationObserver((records) => {
+			for (const record of records) {
+				for (const added of record.addedNodes) {
+					if (added instanceof HTMLElement && added.matches(NODE)) track(added);
+				}
+			}
+		});
+		const layer = root.querySelector(".svelte-flow__nodes");
+		if (layer) arrivals.observe(layer, { childList: true });
 
-	return () => {
-		root.removeEventListener("pointerover", over);
-		classes.disconnect();
-		arrivals.disconnect();
-		selected.clear();
-		root.removeAttribute("data-cv-multi");
-	};
-}
+		return () => {
+			root.removeEventListener("pointerover", over);
+			classes.disconnect();
+			arrivals.disconnect();
+			selected.clear();
+			root.removeAttribute("data-cv-multi");
+		};
+	}
 
-$effect(() => {
-	const root = store.domNode;
-	if (!root) return;
-	return untrack(() => watch(root));
-});
+	$effect(() => {
+		const root = store.domNode;
+		if (!root) return;
+		return untrack(() => watch(root));
+	});
 </script>

package/src/canvas/chrome/lock-badge.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
 
-// =========================
-// PROPS
-// =========================
-let { label, children }: { label: string; children: Snippet } = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { label, children }: { label: string; children: Snippet } = $props();
 </script>
 
 <!-- =========================== -->

package/src/canvas/chrome/side-handles.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Handle, Position } from "@xyflow/svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Handle, Position } from "@xyflow/svelte";
 
-// =========================
-// CONSTANTS
-// =========================
-// Each side has an invisible source over the visible target. An edge saved without handle ids takes the first, so top and bottom stay first.
-const SIDES = [
-	{ id: "top", position: Position.Top },
-	{ id: "bottom", position: Position.Bottom },
-	{ id: "left", position: Position.Left },
-	{ id: "right", position: Position.Right },
-] as const;
+	// =========================
+	// CONSTANTS
+	// =========================
+	// Each side has an invisible source over the visible target. An edge saved without handle ids takes the first, so top and bottom stay first.
+	const SIDES = [
+		{ id: "top", position: Position.Top },
+		{ id: "bottom", position: Position.Bottom },
+		{ id: "left", position: Position.Left },
+		{ id: "right", position: Position.Right },
+	] as const;
 
-// =========================
-// PROPS
-// =========================
-let { class: className = "" }: { class?: string } = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { class: className = "" }: { class?: string } = $props();
 </script>
 
 <!-- =========================== -->
@@ -26,5 +26,10 @@ let { class: className = "" }: { class?: string } = $props();
 <!-- =========================== -->
 {#each SIDES as side (side.id)}
 	<Handle type="target" position={side.position} id={side.id} class="cv-handle {className}" />
-	<Handle type="source" position={side.position} id={side.id} class="cv-handle !opacity-0 {className}" />
+	<Handle
+		type="source"
+		position={side.position}
+		id={side.id}
+		class="cv-handle !opacity-0 {className}"
+	/>
 {/each}

package/src/canvas/chrome/size-chip.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { onMount } from "svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { onMount } from "svelte";
 
-// =========================
-// STATE
-// =========================
-let chip = $state<HTMLElement>();
-let width = $state(0);
-let height = $state(0);
+	// =========================
+	// STATE
+	// =========================
+	let chip = $state<HTMLElement>();
+	let width = $state(0);
+	let height = $state(0);
 
-// =========================
-// LIFECYCLE
-// =========================
-// Layout size, which a zoom transform doesn't change. Observing the card's own box keeps the figure live through a resize drag.
-onMount(() => {
-	const card = chip?.parentElement;
-	if (!card) return;
-	const read = () => {
-		width = Math.round(card.offsetWidth);
-		height = Math.round(card.offsetHeight);
-	};
-	read();
-	const observer = new ResizeObserver(read);
-	observer.observe(card);
-	return () => observer.disconnect();
-});
+	// =========================
+	// LIFECYCLE
+	// =========================
+	// Layout size, which a zoom transform doesn't change. Observing the card's own box keeps the figure live through a resize drag.
+	onMount(() => {
+		const card = chip?.parentElement;
+		if (!card) return;
+		const read = () => {
+			width = Math.round(card.offsetWidth);
+			height = Math.round(card.offsetHeight);
+		};
+		read();
+		const observer = new ResizeObserver(read);
+		observer.observe(card);
+		return () => observer.disconnect();
+	});
 </script>
 
 <!-- =========================== -->
@@ -38,8 +38,8 @@ onMount(() => {
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
-/* A table draws its add-row strip from 12 to 32 card pixels under it. The chip hangs under that, 10 screen pixels clear. */
-:global(.svelte-flow__node-table .cv-size-chip) {
-	top: calc(100% + 32px + 10px * var(--canvas-unzoom, 1));
-}
+	/* A table draws its add-row strip from 12 to 32 card pixels under it. The chip hangs under that, 10 screen pixels clear. */
+	:global(.svelte-flow__node-table .cv-size-chip) {
+		top: calc(100% + 32px + 10px * var(--canvas-unzoom, 1));
+	}
 </style>

package/src/canvas/chrome/snap-guides.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { SnapGuide } from "../headless/snap-guides.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { SnapGuide } from "../headless/snap-guides.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	guides: SnapGuide[];
-	/** Canvas zoom, so the line stays one screen pixel at every scale. */
-	zoom: number;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		guides: SnapGuide[];
+		/** Canvas zoom, so the line stays one screen pixel at every scale. */
+		zoom: number;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { guides, zoom }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { guides, zoom }: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let thickness = $derived(1 / Math.max(zoom, 0.05));
+	// =========================
+	// DERIVED
+	// =========================
+	let thickness = $derived(1 / Math.max(zoom, 0.05));
 </script>
 
 <!-- =========================== -->

package/src/canvas/components/icons/ToolIcon.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ICON_PATHS, type IconName } from "../../ui/icons.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ICON_PATHS, type IconName } from "../../ui/icons.js";
 
-// =========================
-// PROPS
-// =========================
-let { name, size = 18 }: { name: IconName; size?: number } = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { name, size = 18 }: { name: IconName; size?: number } = $props();
 </script>
 
 <!-- =========================== -->

package/src/canvas/components/shared/svg/PreviewSvg.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { penColorVar } from "../../../pen/colors.js";
-import type { PenPreview } from "../../../pen/pen-session.js";
-import { shapeOutline } from "../../../pen/shapes.js";
-import { HIGHLIGHTER_OPACITY } from "../../../pen/types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { penColorVar } from "../../../pen/colors.js";
+	import type { PenPreview } from "../../../pen/pen-session.js";
+	import { shapeOutline } from "../../../pen/shapes.js";
+	import { HIGHLIGHTER_OPACITY } from "../../../pen/types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	preview: PenPreview | null;
-	/** The xyflow viewport, so the preview lines up with the board. */
-	viewport: { x: number; y: number; zoom: number };
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		preview: PenPreview | null;
+		/** The xyflow viewport, so the preview lines up with the board. */
+		viewport: { x: number; y: number; zoom: number };
+	}
 
-// =========================
-// PROPS
-// =========================
-let { preview, viewport }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { preview, viewport }: Props = $props();
 </script>
 
 <!-- =========================== -->

package/src/canvas/components/shared/svg/ShapeOutline.svelte

@@ -1,44 +1,58 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { roughEllipse, roughPolygon, roughRect, seedFrom, sketchColors } from "../../../headless/sketch.js";
-import { penColorVar } from "../../../pen/colors.js";
-import type { ShapeData } from "../../../pen/types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import {
+		roughEllipse,
+		roughPolygon,
+		roughRect,
+		seedFrom,
+		sketchColors,
+	} from "../../../headless/sketch.js";
+	import { penColorVar } from "../../../pen/colors.js";
+	import type { ShapeData } from "../../../pen/types.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	shape: ShapeData;
-	outline: string;
-	ink: string;
-	width?: number;
-	height?: number;
-	/** Draw the outline with the hand instead of the exact path. */
-	hand?: boolean;
-	/** Seeds the hand, so a shape keeps its wobble between renders. */
-	seed?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		shape: ShapeData;
+		outline: string;
+		ink: string;
+		width?: number;
+		height?: number;
+		/** Draw the outline with the hand instead of the exact path. */
+		hand?: boolean;
+		/** Seeds the hand, so a shape keeps its wobble between renders. */
+		seed?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { shape, outline, ink, width, height, hand = false, seed = "" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { shape, outline, ink, width, height, hand = false, seed = "" }: Props = $props();
 
-let wash = $derived(shape.fill ? penColorVar(shape.fill) : ink);
+	let wash = $derived(shape.fill ? penColorVar(shape.fill) : ink);
 
-let rough = $derived.by(() => {
-	const w = width ?? 0;
-	const h = height ?? 0;
-	if (!hand || w < 4 || h < 4) return [];
-	const pen = { seed: seedFrom(seed), colors: { ...sketchColors("ink", false), stroke: ink } };
-	if (shape.shape === "ellipse") return roughEllipse(w, h, pen);
-	if (shape.shape === "diamond") {
-		return roughPolygon([[w / 2, 1], [w - 1, h / 2], [w / 2, h - 1], [1, h / 2]], pen);
-	}
-	return roughRect(w, h, pen);
-});
+	let rough = $derived.by(() => {
+		const w = width ?? 0;
+		const h = height ?? 0;
+		if (!hand || w < 4 || h < 4) return [];
+		const pen = { seed: seedFrom(seed), colors: { ...sketchColors("ink", false), stroke: ink } };
+		if (shape.shape === "ellipse") return roughEllipse(w, h, pen);
+		if (shape.shape === "diamond") {
+			return roughPolygon(
+				[
+					[w / 2, 1],
+					[w - 1, h / 2],
+					[w / 2, h - 1],
+					[1, h / 2],
+				],
+				pen,
+			);
+		}
+		return roughRect(w, h, pen);
+	});
 </script>
 
 <!-- =========================== -->
@@ -50,20 +64,29 @@ let rough = $derived.by(() => {
 			<path d={outline} fill={wash} fill-opacity="0.12" stroke="none" pointer-events="all" />
 		{/if}
 		{#each rough as path, i (i)}
-			<path class="pen-line" style:--sw={shape.strokeWidth} d={path.d} fill="none" stroke={ink} stroke-width={shape.strokeWidth} stroke-linecap="round" stroke-linejoin="round" />
+			<path
+				class="pen-line"
+				style:--sw={shape.strokeWidth}
+				d={path.d}
+				fill="none"
+				stroke={ink}
+				stroke-width={shape.strokeWidth}
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
 		{/each}
 	{:else}
-	<path
-		class="pen-line"
-		style:--sw={shape.strokeWidth}
-		d={outline}
-		fill={shape.filled ? wash : "none"}
-		fill-opacity={shape.filled ? 0.12 : 0}
-		stroke={ink}
-		stroke-width={shape.strokeWidth}
-		stroke-linejoin="round"
-		pointer-events={shape.filled ? "all" : "stroke"}
-	/>
+		<path
+			class="pen-line"
+			style:--sw={shape.strokeWidth}
+			d={outline}
+			fill={shape.filled ? wash : "none"}
+			fill-opacity={shape.filled ? 0.12 : 0}
+			stroke={ink}
+			stroke-width={shape.strokeWidth}
+			stroke-linejoin="round"
+			pointer-events={shape.filled ? "all" : "stroke"}
+		/>
 	{/if}
 </svg>