@heyramzi/ui 1.54.2 → 2.0.0

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>

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

@@ -0,0 +1,76 @@
+<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";
+
+// =========================
+// 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();
+
+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);
+});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg class="pen-shape" {width} {height} viewBox="0 0 {width} {height}" aria-hidden="true">
+	{#if rough.length > 0}
+		{#if shape.filled}
+			<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" />
+		{/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"}
+	/>
+	{/if}
+</svg>
+
+<style>
+	.pen-shape {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,69 @@
+<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";
+
+// =========================
+// 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));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<svg
+	class="pen-stroke"
+	{width}
+	{height}
+	viewBox="0 0 {width} {height}"
+	aria-hidden="true"
+>
+	<polyline
+		class="hit"
+		points={hitPoints}
+		fill="none"
+		stroke="transparent"
+		stroke-width={hitWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<!-- Selected, the ink's own outline widens it about 1.7x (pen.css --select-stroke); no box. -->
+	<path
+		class="ink"
+		d={path}
+		fill={penColorVar(stroke.color)}
+		stroke={selected ? penColorVar(stroke.color) : "none"}
+		stroke-width={selected ? stroke.size * 0.7 : 0}
+		stroke-linejoin="round"
+		opacity={stroke.tool === "highlighter" ? HIGHLIGHTER_OPACITY : 1}
+	/>
+</svg>
+
+<style>
+	.pen-stroke {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+	.hit {
+		pointer-events: stroke;
+	}
+	.ink {
+		pointer-events: visiblePainted;
+	}
+</style>

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { SketchPath } from "../../../headless/sketch.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	rule: SketchPath[];
+	ink: string;
+	width: number;
+}
+
+// =========================
+// PROPS
+// =========================
+let { rule, ink, width }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<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" />
+	{/each}
+</svg>
+
+<style>
+	.pen-rule {
+		display: block;
+		overflow: visible;
+		pointer-events: none;
+	}
+</style>