@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/card/resize.ts

@@ -0,0 +1,33 @@
+// How a card resizes. The host names one policy per card type; the frame and the handles read it.
+
+/** `both` saves `data.userHeight` as a floor. `width` is a text card. `ratio` keeps an image's shape. */
+export type CardResizeAxes = "both" | "width" | "ratio";
+
+/** Where the size lives. `content` cards size their own height; a `box` card has its size only on the node. */
+export type CardResizeStore = "content" | "box";
+
+export type CardResize = {
+  axes: CardResizeAxes;
+  /** Defaults to `content`. */
+  store?: CardResizeStore;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  /** Extra data a finished resize writes with the size, in the same undo step. */
+  extraData?: (size: { width: number; height: number }) => Record<string, unknown>;
+};
+
+export const DEFAULT_MIN_WIDTH = 120;
+export const DEFAULT_MAX_WIDTH = 2400;
+export const DEFAULT_MIN_HEIGHT = 40;
+
+/** The saved floor height of a card, or 0 when its content sets the height. */
+export function userHeightOf(data: unknown): number {
+  const value = (data as { userHeight?: unknown } | null | undefined)?.userHeight;
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+
+/** The height a finished drag keeps: the dragged one, never under what the content needs. */
+export function keptHeight(dragged: number, content: number): number {
+  return Math.max(Math.round(dragged), Math.ceil(content));
+}

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+// =========================
+// 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.
+
+// =========================
+// CONSTANTS
+// =========================
+const MIN_ZOOM = 0.05;
+const NODE = ".svelte-flow__node";
+
+// =========================
+// 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;
+
+// =========================
+// 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);
+
+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);
+		}
+	} else selected.delete(node);
+	flagMulti();
+}
+
+// =========================
+// EFFECTS
+// =========================
+$effect(() => {
+	paintShowing(unzoom);
+});
+
+$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 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);
+		}
+	});
+	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");
+	};
+}
+
+$effect(() => {
+	const root = store.domNode;
+	if (!root) return;
+	return untrack(() => watch(root));
+});
+</script>

package/src/canvas/chrome/chrome.css

@@ -0,0 +1,231 @@
+/* Canvas chrome: dots, resize handles, size chip, lock badge. Each scales by `--canvas-unzoom`, written only on nodes showing chrome. */
+
+:root {
+  --cv-dot: 12px;
+  /* A dot under the pointer grows by this factor, to about 16px. */
+  --cv-dot-hot-grow: 1.34;
+  --cv-handle: 10px;
+  --cv-chrome-ring: var(--cv-selection, var(--ring, #4a4ad8));
+  --cv-chrome-surface: var(--cv-surface, var(--card, #fff));
+  --cv-chrome-line: var(--cv-line, var(--border, #e4e4e9));
+  --cv-chrome-halo: color-mix(in oklch, var(--cv-chrome-ring) 18%, transparent);
+  --cv-chrome-radius: 12px;
+  /* The one selection line: thin, in the accent, and 1.5px on screen at any zoom. */
+  --cv-select-outline: calc(1.5px * var(--canvas-unzoom, 1)) solid var(--cv-chrome-ring);
+}
+
+/* ── Selection ─────────────────────────────────────────── */
+
+/* One selected card shows its grips, size chip and quick-add. A group shows outlines and one box. ChromeZoom sets the flag. */
+[data-cv-multi] .svelte-flow__resize-control,
+[data-cv-multi] .cv-size-chip {
+  display: none;
+}
+
+/* The marquee being dragged: the same line, and a faint wash. */
+.svelte-flow .svelte-flow__selection {
+  border: 1px solid var(--cv-chrome-ring);
+  background: color-mix(in oklch, var(--cv-chrome-ring) 7%, transparent);
+}
+
+/* The box round a multi-selection: one hairline, no fill, so it never hides what it holds. */
+.svelte-flow .svelte-flow__nodesselection-rect {
+  border: 1px solid var(--cv-chrome-ring);
+  border-radius: 4px;
+  background: transparent;
+}
+
+/* ── Connection dots ───────────────────────────────────── */
+
+/* The grow-in animates this number, never `scale` itself: `scale` also carries the zoom correction,
+   and a transition on it would trail every zoom frame. */
+@property --cv-grow {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.4;
+}
+
+/* The doubled `.svelte-flow` outranks a host's utility classes on the same handle (size, border, fill).
+   At zero opacity a dot stays hit-testable. */
+.svelte-flow .svelte-flow__handle.cv-handle {
+  width: var(--cv-dot) !important;
+  height: var(--cv-dot) !important;
+  border: 2px solid var(--cv-chrome-ring) !important;
+  border-radius: 9999px !important;
+  background: var(--cv-chrome-surface) !important;
+  /* Above a card's own positioned content, which would cover the inner half of the dot. */
+  z-index: 2;
+  opacity: 0;
+  /* Scale, not opacity alone: a dot that grows into place reads as an affordance offering itself. */
+  --cv-grow: 0.4;
+  scale: calc(var(--cv-grow) * var(--canvas-unzoom, 1));
+  transition:
+    opacity var(--duration-quick, 120ms) var(--ease-out, ease-out),
+    --cv-grow var(--duration-quick, 120ms) var(--ease-out, ease-out),
+    background-color var(--duration-quick, 120ms) var(--ease-out, ease-out),
+    box-shadow var(--duration-quick, 120ms) var(--ease-out, ease-out);
+}
+
+/* `scale` acts on the box before xyflow's `transform` centres it on the edge, so it grows from
+   the corner that lands there, or the dot drifts off centre. */
+.svelte-flow .svelte-flow__handle-top.cv-handle,
+.svelte-flow .svelte-flow__handle-left.cv-handle {
+  transform-origin: 0 0;
+}
+
+.svelte-flow .svelte-flow__handle-bottom.cv-handle {
+  transform-origin: 0 100%;
+}
+
+.svelte-flow .svelte-flow__handle-right.cv-handle {
+  transform-origin: 100% 0;
+}
+
+/* A wider grab area than the dot, so a link starts without aiming at 12px. */
+.svelte-flow .svelte-flow__handle.cv-handle::after {
+  content: "";
+  position: absolute;
+  inset: -7px;
+  border-radius: 9999px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .svelte-flow__node:hover .cv-handle {
+    opacity: 1;
+    --cv-grow: 1;
+  }
+}
+
+[data-cv-linking] .cv-handle {
+  opacity: 1;
+  --cv-grow: 1;
+}
+
+/* The dot a link starts from or lands on grows and takes the ring colour. The invisible source takes the pointer, so the visible target reads it through :has. */
+@media (hover: hover) and (pointer: fine) {
+  .svelte-flow .svelte-flow__handle.cv-handle:hover,
+  .svelte-flow .svelte-flow__handle.cv-handle:has(+ .cv-handle:hover) {
+    opacity: 1;
+    --cv-grow: var(--cv-dot-hot-grow);
+    border-color: var(--cv-chrome-surface) !important;
+    background: var(--cv-chrome-ring) !important;
+    box-shadow: 0 0 0 calc(var(--cv-dot) * 0.45) var(--cv-chrome-halo);
+  }
+}
+
+.svelte-flow .svelte-flow__handle.cv-handle.connectingto,
+.svelte-flow .svelte-flow__handle.cv-handle:has(+ .connectingto) {
+  opacity: 1;
+  --cv-grow: var(--cv-dot-hot-grow);
+  border-color: var(--cv-chrome-surface) !important;
+  background: var(--cv-chrome-ring) !important;
+  box-shadow: 0 0 0 calc(var(--cv-dot) * 0.45) var(--cv-chrome-halo);
+}
+
+/* The card a link would land on glows, so the target is clear before the pointer is released. */
+@media (hover: hover) and (pointer: fine) {
+  [data-cv-linking] .svelte-flow__node:hover:not(:has(.connectingfrom)) {
+    border-radius: var(--cv-chrome-radius);
+    box-shadow:
+      0 0 0 2px var(--cv-chrome-ring),
+      0 0 0 7px var(--cv-chrome-halo);
+  }
+}
+
+[data-cv-linking] .svelte-flow__node:has(.connectingto) {
+  border-radius: var(--cv-chrome-radius);
+  box-shadow:
+    0 0 0 2px var(--cv-chrome-ring),
+    0 0 0 7px var(--cv-chrome-halo);
+}
+
+.svelte-flow__node {
+  transition: box-shadow var(--duration-quick, 120ms) var(--ease-out, ease-out);
+}
+
+/* ── Resize handles ────────────────────────────────────── */
+
+/* The edge lines are hit areas only; the corner handles exist only while the card is selected. */
+.svelte-flow__resize-control.line {
+  border-color: transparent;
+}
+
+/* `.svelte-flow` in front: xyflow's stylesheet loads later and draws a 5px square. */
+.svelte-flow .svelte-flow__resize-control.handle {
+  width: var(--cv-handle);
+  height: var(--cv-handle);
+  border: 1.5px solid var(--cv-chrome-ring);
+  border-radius: 3px;
+  background: var(--cv-chrome-surface);
+  /* Beats xyflow's inline scale, which only counters zooming out. */
+  scale: var(--canvas-unzoom, 1) !important;
+}
+
+/* ── Size chip ─────────────────────────────────────────── */
+
+.cv-size-chip {
+  position: absolute;
+  top: calc(100% + 10px * var(--canvas-unzoom, 1));
+  left: 50%;
+  z-index: 3;
+  padding: 3px 9px;
+  border-radius: 9999px;
+  background: var(--cv-chrome-ring);
+  color: var(--cv-chrome-surface);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translateX(-50%) scale(var(--canvas-unzoom, 1));
+  transform-origin: top center;
+  pointer-events: none;
+}
+
+/* ── Lock badge ────────────────────────────────────────── */
+
+/* Shows on hover and selection. */
+.cv-lock-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  z-index: 3;
+  display: flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cv-chrome-line);
+  border-radius: 9999px;
+  background: var(--cv-chrome-surface);
+  color: var(--cv-ink-muted, var(--muted-foreground, #6b6b78));
+  box-shadow: var(--elev-card, 0 1px 3px rgb(0 0 0 / 0.1));
+  opacity: 0;
+  transform: scale(var(--canvas-unzoom, 1));
+  transform-origin: top right;
+  transition: opacity var(--duration-quick, 120ms) var(--ease-out, ease-out);
+  pointer-events: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .svelte-flow__node:hover .cv-lock-badge {
+    opacity: 1;
+  }
+}
+
+.svelte-flow__node.selected .cv-lock-badge {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .svelte-flow .svelte-flow__handle.cv-handle {
+    --cv-grow: 1;
+    transition: opacity 1ms;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .svelte-flow .svelte-flow__handle.cv-handle:hover {
+      --cv-grow: 1;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+
+// =========================
+// PROPS
+// =========================
+let { label, children }: { label: string; children: Snippet } = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<span class="cv-lock-badge" data-card-locked role="img" aria-label={label}>
+	{@render children()}
+</span>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+// =========================
+// 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;
+
+// =========================
+// PROPS
+// =========================
+let { class: className = "" }: { class?: string } = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#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}" />
+{/each}

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { onMount } from "svelte";
+
+// =========================
+// 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();
+});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<span class="cv-size-chip" bind:this={chip} aria-hidden="true">{width} x {height}</span>
+
+<!-- =========================== -->
+<!-- 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));
+}
+</style>

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+// =========================
+// 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;
+}
+
+// =========================
+// PROPS
+// =========================
+let { guides, zoom }: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let thickness = $derived(1 / Math.max(zoom, 0.05));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+
+<!-- The line that justified the pull. It spans every card it lines up with, so
+     the operator reads the relationship and not just a stray rule. -->
+{#each guides as guide (guide.axis + ":" + guide.position)}
+	<div
+		class="snap-guide pointer-events-none absolute"
+		style:left={guide.axis === "x" ? `${guide.position}px` : `${guide.start}px`}
+		style:top={guide.axis === "y" ? `${guide.position}px` : `${guide.start}px`}
+		style:width={guide.axis === "x" ? `${thickness}px` : `${guide.end - guide.start}px`}
+		style:height={guide.axis === "y" ? `${thickness}px` : `${guide.end - guide.start}px`}
+	></div>
+{/each}
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	/* One screen pixel is the right weight for a guide and too little to catch
+	   the eye on an ink canvas, so the line carries its own halo. */
+	.snap-guide {
+		background: var(--cv-chrome-ring, #4a4ad8);
+		box-shadow: 0 0 6px 1px color-mix(in oklch, var(--cv-chrome-ring, #4a4ad8) 55%, transparent);
+		animation: snap-guide-in var(--duration-micro, 100ms) var(--ease-smooth-out, ease-out) both;
+	}
+
+	@keyframes snap-guide-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.snap-guide {
+			animation-duration: 1ms;
+		}
+	}
+</style>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { ICON_PATHS, type IconName } from "../../ui/icons.js";
+
+// =========================
+// PROPS
+// =========================
+let { name, size = 18 }: { name: IconName; size?: number } = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.5"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+>
+	{#each ICON_PATHS[name] as d (d)}
+		<path {d} />
+	{/each}
+</svg>

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

@@ -0,0 +1,67 @@
+<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";
+
+// =========================
+// 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();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg class="preview" aria-hidden="true">
+	<g transform="translate({viewport.x} {viewport.y}) scale({viewport.zoom})">
+		{#if preview?.kind === "stroke"}
+			<path
+				d={preview.d}
+				fill={penColorVar(preview.color)}
+				opacity={preview.tool === "highlighter" ? HIGHLIGHTER_OPACITY : 1}
+			/>
+		{:else if preview?.kind === "shape"}
+			<g transform="translate({preview.box.x} {preview.box.y})">
+				<path
+					d={shapeOutline(preview.shape, preview.box.width, preview.box.height, 1.5)}
+					fill="none"
+					stroke={penColorVar(preview.color)}
+					stroke-width="3"
+					stroke-linejoin="round"
+				/>
+			</g>
+		{:else if preview?.kind === "eraser"}
+			<circle
+				cx={preview.at.x}
+				cy={preview.at.y}
+				r={preview.radius}
+				fill="none"
+				stroke="var(--pen-ink, #1e1e1e)"
+				stroke-width={1 / viewport.zoom}
+				stroke-dasharray="3 2"
+			/>
+		{/if}
+	</g>
+</svg>
+
+<style>
+	.preview {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>