@heyramzi/ui 2.1.0 → 2.2.0

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>
 

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

@@ -1,38 +1,32 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { NodeProps } from "@xyflow/svelte";
-import "../../../pen/pen.css";
-import { penColorVar } from "../../../pen/colors.js";
-import { strokePath } from "../../../pen/stroke-path.js";
-import { HIGHLIGHTER_OPACITY, type StrokeData } from "../../../pen/types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { NodeProps } from "@xyflow/svelte";
+	import "../../../pen/pen.css";
+	import { penColorVar } from "../../../pen/colors.js";
+	import { strokePath } from "../../../pen/stroke-path.js";
+	import { HIGHLIGHTER_OPACITY, type StrokeData } from "../../../pen/types.js";
 
-// =========================
-// PROPS
-// =========================
-let { data, selected, width, height }: NodeProps = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { data, selected, width, height }: NodeProps = $props();
 
-// =========================
-// DERIVED
-// =========================
-let stroke = $derived(data as StrokeData);
-let path = $derived(strokePath(stroke.points, stroke));
-// A wide, invisible line along the centre so a thin stroke is easy to click.
-let hitPoints = $derived(stroke.points.map((point) => `${point[0]},${point[1]}`).join(" "));
-let hitWidth = $derived(Math.max(stroke.size, 14));
+	// =========================
+	// DERIVED
+	// =========================
+	let stroke = $derived(data as StrokeData);
+	let path = $derived(strokePath(stroke.points, stroke));
+	// A wide, invisible line along the centre so a thin stroke is easy to click.
+	let hitPoints = $derived(stroke.points.map((point) => `${point[0]},${point[1]}`).join(" "));
+	let hitWidth = $derived(Math.max(stroke.size, 14));
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<svg
-	class="pen-stroke"
-	{width}
-	{height}
-	viewBox="0 0 {width} {height}"
-	aria-hidden="true"
->
+<svg class="pen-stroke" {width} {height} viewBox="0 0 {width} {height}" aria-hidden="true">
 	<polyline
 		class="hit"
 		points={hitPoints}

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

@@ -1,22 +1,22 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { SketchPath } from "../../../headless/sketch.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { SketchPath } from "../../../headless/sketch.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	rule: SketchPath[];
-	ink: string;
-	width: number;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		rule: SketchPath[];
+		ink: string;
+		width: number;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { rule, ink, width }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { rule, ink, width }: Props = $props();
 </script>
 
 <!-- =========================== -->
@@ -24,7 +24,15 @@ let { rule, ink, width }: Props = $props();
 <!-- =========================== -->
 <svg class="pen-rule" {width} height="10" aria-hidden="true">
 	{#each rule as path, i (i)}
-		<path class="pen-line" style:--sw={path.strokeWidth} d={path.d} fill="none" stroke={ink} stroke-width={path.strokeWidth} stroke-linecap="round" />
+		<path
+			class="pen-line"
+			style:--sw={path.strokeWidth}
+			d={path.d}
+			fill="none"
+			stroke={ink}
+			stroke-width={path.strokeWidth}
+			stroke-linecap="round"
+		/>
 	{/each}
 </svg>
 

package/src/canvas/edges/bend-handle.svelte

@@ -1,41 +1,41 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useStore } from "@xyflow/svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useStore } from "@xyflow/svelte";
 
-// The grab dot on a selected elbow, one size on screen. Only the edge showing it reads the zoom; a root value restyles every card per frame.
+	// The grab dot on a selected elbow, one size on screen. Only the edge showing it reads the zoom; a root value restyles every card per frame.
 
-// =========================
-// CONSTANTS
-// =========================
-const MIN_ZOOM = 0.05;
+	// =========================
+	// CONSTANTS
+	// =========================
+	const MIN_ZOOM = 0.05;
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	/** The way the run moves: x slides it sideways, y up and down. */
-	axis: "x" | "y";
-	title: string;
-	onpointerdown: (event: PointerEvent) => void;
-	ondblclick: () => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		/** The way the run moves: x slides it sideways, y up and down. */
+		axis: "x" | "y";
+		title: string;
+		onpointerdown: (event: PointerEvent) => void;
+		ondblclick: () => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { axis, title, onpointerdown, ondblclick }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { axis, title, onpointerdown, ondblclick }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const store = useStore();
+	// =========================
+	// STATE
+	// =========================
+	const store = useStore();
 
-// =========================
-// DERIVED
-// =========================
-let unzoom = $derived(1 / Math.max(store.viewport.zoom, MIN_ZOOM));
+	// =========================
+	// DERIVED
+	// =========================
+	let unzoom = $derived(1 / Math.max(store.viewport.zoom, MIN_ZOOM));
 </script>
 
 <!-- =========================== -->
@@ -57,20 +57,20 @@ let unzoom = $derived(1 / Math.max(store.viewport.zoom, MIN_ZOOM));
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
-.cv-bend-handle {
-	display: block;
-	box-sizing: border-box;
-	width: 12px;
-	height: 12px;
-	padding: 0;
-	border: 2px solid var(--cv-chrome-surface, var(--background, #fff));
-	border-radius: 9999px;
-	background: var(--cv-chrome-ring, var(--ring, #4a4ad8));
-	cursor: row-resize;
-	touch-action: none;
-}
+	.cv-bend-handle {
+		display: block;
+		box-sizing: border-box;
+		width: 12px;
+		height: 12px;
+		padding: 0;
+		border: 2px solid var(--cv-chrome-surface, var(--background, #fff));
+		border-radius: 9999px;
+		background: var(--cv-chrome-ring, var(--ring, #4a4ad8));
+		cursor: row-resize;
+		touch-action: none;
+	}
 
-.cv-bend-x {
-	cursor: col-resize;
-}
+	.cv-bend-x {
+		cursor: col-resize;
+	}
 </style>

package/src/canvas/edges/edge-gradient.svelte

@@ -1,18 +1,18 @@
 <svelte:options namespace="svg" />
 
 <script lang="ts">
-interface Props {
-	id: string;
-	from: { x: number; y: number };
-	to: { x: number; y: number };
-	fromColor: string;
-	toColor: string;
-}
+	interface Props {
+		id: string;
+		from: { x: number; y: number };
+		to: { x: number; y: number };
+		fromColor: string;
+		toColor: string;
+	}
 
-let { id, from, to, fromColor, toColor }: Props = $props();
+	let { id, from, to, fromColor, toColor }: Props = $props();
 
-// A zero-length gradient paints nothing, so a link drawn onto itself keeps one pixel of run.
-let flat = $derived(Math.abs(from.x - to.x) < 0.5 && Math.abs(from.y - to.y) < 0.5);
+	// A zero-length gradient paints nothing, so a link drawn onto itself keeps one pixel of run.
+	let flat = $derived(Math.abs(from.x - to.x) < 0.5 && Math.abs(from.y - to.y) < 0.5);
 </script>
 
 <defs>