@heyramzi/ui 2.1.0 → 2.2.0

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>

package/src/canvas/pen/PenField.svelte

@@ -1,90 +1,95 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { useTextField, type TextFieldHandle } from "../editor/text-field-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import "./pen.css";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { useTextField, type TextFieldHandle } from "../editor/text-field-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import "./pen.css";
 
-// The words of a pen text or a shape label: the host's field when it gave one (formatted text,
-// its own bar and undo), else a plain textarea.
+	// The words of a pen text or a shape label: the host's field when it gave one (formatted text,
+	// its own bar and undo), else a plain textarea.
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	value: string;
-	/** Which pen element it sits in. Sets the size and the box it keeps. */
-	variant: "text" | "label";
-	onCommit: (next: string, live: boolean) => void;
-	ariaLabel: string;
-	/** Typing needs the canvas editor; without one the words are shown, not changed. */
-	readonly?: boolean;
-	selected?: boolean;
-	color?: string;
-	fontSize?: number;
-	fontWeight?: number;
-	center?: boolean;
-	column?: boolean;
-	/** Called when the field closes. */
-	onExit?: () => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		value: string;
+		/** Which pen element it sits in. Sets the size and the box it keeps. */
+		variant: "text" | "label";
+		onCommit: (next: string, live: boolean) => void;
+		ariaLabel: string;
+		/** Typing needs the canvas editor; without one the words are shown, not changed. */
+		readonly?: boolean;
+		selected?: boolean;
+		color?: string;
+		fontSize?: number;
+		fontWeight?: number;
+		center?: boolean;
+		column?: boolean;
+		/** Called when the field closes. */
+		onExit?: () => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	value,
-	variant,
-	onCommit,
-	ariaLabel,
-	readonly = false,
-	selected = false,
-	color,
-	fontSize,
-	fontWeight,
-	center = false,
-	column = false,
-	onExit,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		value,
+		variant,
+		onCommit,
+		ariaLabel,
+		readonly = false,
+		selected = false,
+		color,
+		fontSize,
+		fontWeight,
+		center = false,
+		column = false,
+		onExit,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const Field = useTextField();
-const handDrawn = useHandDrawn();
-let textarea = $state<HTMLTextAreaElement>();
-let field = $state<TextFieldHandle>();
-let editing = $state(false);
+	// =========================
+	// STATE
+	// =========================
+	const Field = useTextField();
+	const handDrawn = useHandDrawn();
+	let textarea = $state<HTMLTextAreaElement>();
+	let field = $state<TextFieldHandle>();
+	let editing = $state(false);
 
-// =========================
-// DERIVED
-// =========================
-let style = $derived(
-	[color && `color: ${color}`, fontSize && `font-size: ${fontSize}px`, fontWeight && `font-weight: ${fontWeight}`, center && "text-align: center"]
-		.filter(Boolean)
-		.join("; "),
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let style = $derived(
+		[
+			color && `color: ${color}`,
+			fontSize && `font-size: ${fontSize}px`,
+			fontWeight && `font-weight: ${fontWeight}`,
+			center && "text-align: center",
+		]
+			.filter(Boolean)
+			.join("; "),
+	);
 
-// =========================
-// FUNCTIONS
-// =========================
-/** Open the field for typing. A host field opens where `point` landed, else at the end. */
-export function edit(point?: { x: number; y: number }) {
-	if (readonly) return;
-	if (field) return field.edit(point);
-	textarea?.focus();
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	/** Open the field for typing. A host field opens where `point` landed, else at the end. */
+	export function edit(point?: { x: number; y: number }) {
+		if (readonly) return;
+		if (field) return field.edit(point);
+		textarea?.focus();
+	}
 
-function close() {
-	editing = false;
-	onExit?.();
-}
+	function close() {
+		editing = false;
+		onExit?.();
+	}
 
-// A text you aren't typing in drags like any card, so a first press must not focus it.
-function press(event: MouseEvent) {
-	if (variant === "text" && !editing) event.preventDefault();
-}
+	// A text you aren't typing in drags like any card, so a first press must not focus it.
+	function press(event: MouseEvent) {
+		if (variant === "text" && !editing) event.preventDefault();
+	}
 </script>
 
 <!-- =========================== -->
@@ -98,7 +103,9 @@ function press(event: MouseEvent) {
 		{ariaLabel}
 		{readonly}
 		{style}
-		class="pen-field is-{variant} is-rich {handDrawn() ? 'hand' : ''} {selected ? 'selected' : ''} {column ? 'column' : ''}"
+		class="pen-field is-{variant} is-rich {handDrawn() ? 'hand' : ''} {selected
+			? 'selected'
+			: ''} {column ? 'column' : ''}"
 		clickToEdit={variant === "label"}
 		onExit={close}
 	/>
@@ -123,6 +130,5 @@ function press(event: MouseEvent) {
 			// Typing must never reach the canvas shortcuts, where Delete would remove the node.
 			event.stopPropagation();
 			if (event.key === "Escape") event.currentTarget.blur();
-		}}
-	></textarea>
+		}}></textarea>
 {/if}