@heyramzi/ui 2.0.1 → 2.2.0

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>

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

@@ -1,43 +1,59 @@
 <svelte:options namespace="svg" />
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { BaseEdge } from "@xyflow/svelte";
-import EdgeGradient from "./edge-gradient.svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { BaseEdge } from "@xyflow/svelte";
+	import EdgeGradient from "./edge-gradient.svelte";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	id: string;
-	path: string;
-	from: { x: number; y: number };
-	to: { x: number; y: number };
-	fromColor: string;
-	toColor?: string;
-	markerEnd?: string;
-	/** The edge's own style. A stroke set here beats the gradient. */
-	style?: string;
-	class?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		id: string;
+		path: string;
+		from: { x: number; y: number };
+		to: { x: number; y: number };
+		fromColor: string;
+		toColor?: string;
+		markerEnd?: string;
+		/** The edge's own style. A stroke set here beats the gradient. */
+		style?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { id, path, from, to, fromColor, toColor = fromColor, markerEnd, style = "", class: className = "" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		id,
+		path,
+		from,
+		to,
+		fromColor,
+		toColor = fromColor,
+		markerEnd,
+		style = "",
+		class: className = "",
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let gradientId = $derived(`canvas-gradient-${id.replace(/[^\w-]/g, "_")}`);
+	// =========================
+	// DERIVED
+	// =========================
+	let gradientId = $derived(`canvas-gradient-${id.replace(/[^\w-]/g, "_")}`);
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
 <EdgeGradient id={gradientId} {from} {to} {fromColor} {toColor} />
-<BaseEdge {id} {path} {markerEnd} class="canvas-edge {className}" style="stroke: url(#{gradientId}); {style}" />
+<BaseEdge
+	{id}
+	{path}
+	{markerEnd}
+	class="canvas-edge {className}"
+	style="stroke: url(#{gradientId}); {style}"
+/>
 <!-- Hidden until a test run crosses this link; the canvas stylesheet draws the moving dashes. -->
 <path d={path} class="canvas-edge-flow" fill="none" aria-hidden="true" />

package/src/canvas/editor/lock.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vite-plus/test";
 import type { Node } from "@xyflow/svelte";
-import { deletableIds, refuseLockedOps, toggleLock, withLockFlags } from "./lock.js";
+import {
+  deletableIds,
+  refuseLockedOps,
+  toggleLock,
+  withLockFlags,
+} from "./lock.js";
 
 function card(id: string, data: Record<string, unknown> = {}, extra: Partial<Node> = {}): Node {
   return { id, type: "note", position: { x: 0, y: 0 }, data, ...extra };

package/src/canvas/editor/style.ts

@@ -2,7 +2,13 @@
 // A change is one patchNode per card, so it is one undo step.
 
 import type { CanvasOp } from "../ops/ops.js";
-import { PEN_COLORS, SHAPE_NODE, STROKE_NODE, TEXT_NODE, type PenColor } from "../pen/types.js";
+import {
+  PEN_COLORS,
+  SHAPE_NODE,
+  STROKE_NODE,
+  TEXT_NODE,
+  type PenColor,
+} from "../pen/types.js";
 
 export type FillValue = PenColor | "none";
 export type FontWeight = "regular" | "bold";

package/src/canvas/headless/svg-figure.test.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vite-plus/test";
-import { figureBoxHeight, figureRatio, sanitizeFigureSvg } from "./svg-figure.js";
+import {
+  figureBoxHeight,
+  figureRatio,
+  sanitizeFigureSvg,
+} from "./svg-figure.js";
 
 describe("sanitizeFigureSvg", () => {
   it("keeps the shapes, the text and the geometry", () => {

package/src/canvas/lod/lod-switch.svelte

@@ -1,81 +1,82 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { useStore } from "@xyflow/svelte";
-import SideHandles from "../chrome/side-handles.svelte";
-import { lodMode } from "./lod-mode.svelte.js";
-import { renderAll } from "./render-all.svelte.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { useStore } from "@xyflow/svelte";
+	import SideHandles from "../chrome/side-handles.svelte";
+	import { lodMode } from "./lod-mode.svelte.js";
+	import { renderAll } from "./render-all.svelte.js";
 
-// Zoomed out, a card is a box at its measured size, so no arrow moves.
-// Never measured, selected, dragged or exported: full.
+	// Zoomed out, a card is a box at its measured size, so no arrow moves.
+	// Never measured, selected, dragged or exported: full.
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	id: string;
-	selected?: boolean;
-	dragging?: boolean;
-	/** A CSS colour: the card's own, for the box's border and icon well. */
-	tone: string;
-	title: string;
-	/** The full card. */
-	children: Snippet;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		id: string;
+		selected?: boolean;
+		dragging?: boolean;
+		/** A CSS colour: the card's own, for the box's border and icon well. */
+		tone: string;
+		title: string;
+		/** The full card. */
+		children: Snippet;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { id, selected = false, dragging = false, tone, title, children }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, selected = false, dragging = false, tone, title, children }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const store = useStore();
-const mode = lodMode(store);
-let probe = $state<HTMLElement>();
-// xyflow keeps the size of a card that scrolled away, so it comes back as a box.
-let size = $state<{ width: number; height: number } | null>(measured());
-// Plain on purpose: only the observer below reads it.
-let boxed = false;
+	// =========================
+	// STATE
+	// =========================
+	const store = useStore();
+	const mode = lodMode(store);
+	let probe = $state<HTMLElement>();
+	// xyflow keeps the size of a card that scrolled away, so it comes back as a box.
+	let size = $state<{ width: number; height: number } | null>(measured());
+	// Plain on purpose: only the observer below reads it.
+	let boxed = false;
 
-// =========================
-// DERIVED
-// =========================
-let simple = $derived(mode.low && size !== null && !selected && !dragging && !renderAll.on);
+	// =========================
+	// DERIVED
+	// =========================
+	let simple = $derived(mode.low && size !== null && !selected && !dragging && !renderAll.on);
 
-// =========================
-// EFFECTS
-// =========================
-// Sizes the simple box from the full card. The observer's first call carries it, so a mount forces no layout.
-$effect(() => {
-	const node = probe?.closest<HTMLElement>(".svelte-flow__node");
-	if (!node) return;
-	const observer = new ResizeObserver(([entry]) => {
-		if (boxed) return;
-		const box = entry.borderBoxSize[0];
-		const width = Math.round(box.inlineSize);
-		const height = Math.round(box.blockSize);
-		if (width && height && (width !== size?.width || height !== size?.height)) size = { width, height };
+	// =========================
+	// EFFECTS
+	// =========================
+	// Sizes the simple box from the full card. The observer's first call carries it, so a mount forces no layout.
+	$effect(() => {
+		const node = probe?.closest<HTMLElement>(".svelte-flow__node");
+		if (!node) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (boxed) return;
+			const box = entry.borderBoxSize[0];
+			const width = Math.round(box.inlineSize);
+			const height = Math.round(box.blockSize);
+			if (width && height && (width !== size?.width || height !== size?.height))
+				size = { width, height };
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
 	});
-	observer.observe(node);
-	return () => observer.disconnect();
-});
 
-// Set after the render that swaps the box in, so the read above never sees the box's own size.
-$effect(() => {
-	boxed = simple;
-});
+	// Set after the render that swaps the box in, so the read above never sees the box's own size.
+	$effect(() => {
+		boxed = simple;
+	});
 
-// =========================
-// FUNCTIONS
-// =========================
-function measured(): { width: number; height: number } | null {
-	const known = store.nodeLookup.get(id)?.measured;
-	return known?.width && known.height ? { width: known.width, height: known.height } : null;
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function measured(): { width: number; height: number } | null {
+		const known = store.nodeLookup.get(id)?.measured;
+		return known?.width && known.height ? { width: known.width, height: known.height } : null;
+	}
 </script>
 
 <!-- =========================== -->
@@ -83,7 +84,11 @@ function measured(): { width: number; height: number } | null {
 <!-- =========================== -->
 <span class="cv-lod-probe" bind:this={probe} hidden></span>
 {#if simple && size}
-	<div class="cv-lod-box" style="width: {size.width}px; height: {size.height}px; --cv-lod-tone: {tone}" data-lod="simple">
+	<div
+		class="cv-lod-box"
+		style="width: {size.width}px; height: {size.height}px; --cv-lod-tone: {tone}"
+		data-lod="simple"
+	>
 		<span class="cv-lod-well"></span>
 		<span class="cv-lod-title">{title}</span>
 	</div>
@@ -96,45 +101,45 @@ function measured(): { width: number; height: number } | null {
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
-:global([data-cv-every-card] .svelte-flow__node) {
-	animation: none;
-}
+	:global([data-cv-every-card] .svelte-flow__node) {
+		animation: none;
+	}
 
-/* A dot on a zoomed-out box is too small to link from; unpainted, it keeps its place for the links. */
-:global(.cv-lod-handle) {
-	visibility: hidden;
-}
+	/* A dot on a zoomed-out box is too small to link from; unpainted, it keeps its place for the links. */
+	:global(.cv-lod-handle) {
+		visibility: hidden;
+	}
 
-/* The architecture card's own frame and layout (architecture-node.svelte), so selecting a card doesn't change how it looks. */
-.cv-lod-box {
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-	overflow: hidden;
-	padding: var(--card-pad, 12px);
-	border: 1px solid color-mix(in oklab, var(--cv-lod-tone) 20%, transparent);
-	border-radius: var(--card-radius, 12px);
-	background: var(--card, var(--cv-chrome-surface, #fff));
-	color: var(--cv-ink, var(--foreground, #1a1a1f));
-	contain: strict;
-}
+	/* The architecture card's own frame and layout (architecture-node.svelte), so selecting a card doesn't change how it looks. */
+	.cv-lod-box {
+		position: relative;
+		box-sizing: border-box;
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		overflow: hidden;
+		padding: var(--card-pad, 12px);
+		border: 1px solid color-mix(in oklab, var(--cv-lod-tone) 20%, transparent);
+		border-radius: var(--card-radius, 12px);
+		background: var(--card, var(--cv-chrome-surface, #fff));
+		color: var(--cv-ink, var(--foreground, #1a1a1f));
+		contain: strict;
+	}
 
-/* The icon well, without the icon. */
-.cv-lod-well {
-	flex: none;
-	width: 32px;
-	height: 32px;
-	border-radius: 9999px;
-	background: color-mix(in oklab, var(--cv-lod-tone) 10%, transparent);
-}
+	/* The icon well, without the icon. */
+	.cv-lod-well {
+		flex: none;
+		width: 32px;
+		height: 32px;
+		border-radius: 9999px;
+		background: color-mix(in oklab, var(--cv-lod-tone) 10%, transparent);
+	}
 
-.cv-lod-title {
-	overflow: hidden;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 1.25;
-	overflow-wrap: anywhere;
-}
+	.cv-lod-title {
+		overflow: hidden;
+		font-size: 14px;
+		font-weight: 500;
+		line-height: 1.25;
+		overflow-wrap: anywhere;
+	}
 </style>