@heyramzi/ui 2.24.0 → 3.1.0

package/src/animations/thinking-states.css

@@ -1,60 +1,67 @@
-/* Thinking states, transitions.dev 28: put `.t-shimmer` on the line too and
-   keep data-text in sync with the text, or the shimmer paints the wrong words. */
-:root {
-  --think-hold: 2000ms;
-  --think-swap: var(--duration-quick, 150ms);
-  --think-gap: 50ms;
-  --think-distance: var(--distance-base, 8px);
-  --think-blur: var(--blur-small, 2px);
-  --think-ease: var(--ease-in-out, ease-in-out);
-}
+@layer theme, base, components, utilities;
 
-/* Set your type on .t-think: the sizer only reports the right width if it is
-   set in the same font as the line it stands in for. */
-.t-think {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-}
-.t-think-sizer {
-  display: block;
-  visibility: hidden;
-  white-space: nowrap;
-}
-.t-think-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: block;
-  white-space: nowrap;
-  transform: translateY(0);
-  filter: blur(0);
-  opacity: 1;
-  transition:
-    transform var(--think-swap) var(--think-ease),
-    filter var(--think-swap) var(--think-ease),
-    opacity var(--think-swap) var(--think-ease);
-  will-change: transform, filter, opacity;
-}
+@layer components {
+  /* Thinking states, transitions.dev 28: put `.t-shimmer` on the line too and
+     keep data-text in sync with the text, or the shimmer paints the wrong words. */
+  :root {
+    --think-hold: 2000ms;
+    --think-swap: var(--duration-quick, 150ms);
+    --think-gap: 50ms;
+    --think-distance: var(--distance-base, 8px);
+    --think-blur: var(--blur-small, 2px);
+    --think-ease: var(--ease-in-out, ease-in-out);
+  }
 
-/* The outgoing line floats over the box so both halves animate at once. */
-.t-think-text.is-exit {
-  transform: translateY(calc(var(--think-distance) * -1));
-  filter: blur(var(--think-blur));
-  opacity: 0;
-}
-.t-think-text.is-enter-start {
-  transition: none;
-  transform: translateY(var(--think-distance));
-  filter: blur(var(--think-blur));
-  opacity: 0;
-}
+  /* Set your type on .t-think: the sizer only reports the right width if it is
+     set in the same font as the line it stands in for. */
+  .t-think {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+  }
+
+  .t-think-sizer {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
+  }
 
-@media (prefers-reduced-motion: reduce) {
   .t-think-text {
-    transition: none !important;
-    transform: none !important;
-    filter: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: block;
+    white-space: nowrap;
+    transform: translateY(0);
+    filter: blur(0);
+    opacity: 1;
+    transition:
+      transform var(--think-swap) var(--think-ease),
+      filter var(--think-swap) var(--think-ease),
+      opacity var(--think-swap) var(--think-ease);
+    will-change: transform, filter, opacity;
+  }
+
+  /* The outgoing line floats over the box so both halves animate at once. */
+  .t-think-text.is-exit {
+    transform: translateY(calc(var(--think-distance) * -1));
+    filter: blur(var(--think-blur));
+    opacity: 0;
+  }
+
+  .t-think-text.is-enter-start {
+    transition: none;
+    transform: translateY(var(--think-distance));
+    filter: blur(var(--think-blur));
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-think-text {
+      transition: none !important;
+      transform: none !important;
+      filter: none !important;
+    }
   }
 }

package/src/canvas/card/card-frame.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import { type CardResize } from "./resize.js";
+import "./card.css";
+interface Props {
+    id: string;
+    data?: unknown;
+    selected?: boolean;
+    /** How this card type resizes, or false when its size isn't the person's to set. */
+    resize: CardResize | false;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/card/card.css

@@ -1,18 +1,24 @@
+@layer theme, base, components, utilities;
+
 /* The card frame and its resize hit areas. Handle looks come from chrome.css. */
 
-/* A one-row grid: at least the saved height, growing with the content.
-   `min-height: 100%` shows a live drag at once. No position, so grips still anchor to the node. */
-.cv-card-frame {
-  display: grid;
-  grid-template-rows: minmax(var(--cv-card-h, 0px), auto);
-  min-height: 100%;
-}
+@layer components {
+  /* A one-row grid: at least the saved height, growing with the content.
+     `min-height: 100%` shows a live drag at once. No position, so grips still anchor to the node. */
+  .cv-card-frame {
+    display: grid;
+    grid-template-rows: minmax(var(--cv-card-h, 0px), auto);
+    min-height: 100%;
+  }
 
-/* A drag drops the saved floor, so the card can shrink as well as grow. */
-.cv-card-frame[data-resizing] {
-  grid-template-rows: auto;
+  /* A drag drops the saved floor, so the card can shrink as well as grow. */
+  .cv-card-frame[data-resizing] {
+    grid-template-rows: auto;
+  }
 }
 
+/* xyflow's stylesheet is unlayered and beats every layer, so rules on its parts stay unlayered below. */
+
 /* The edges are hit areas only, a finger wide at every zoom. */
 .svelte-flow .svelte-flow__resize-control.line.cv-edge {
   border-width: 0;

package/src/canvas/card/resize-handles.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type CardResize } from "./resize.js";
+import "./card.css";
+interface Props {
+    id: string;
+    resize: CardResize;
+    /** The framed element, read for the height its content needs. */
+    frame?: HTMLElement;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<Record<string, never>, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/chrome/chrome.css

@@ -1,19 +1,80 @@
+@layer theme, base, components, utilities;
+
 /* 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);
+@layer components {
+  :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);
+  }
+
+  /* ── 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: calc(16 / 12);
+    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;
+  }
+}
+
+/* ── 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;
 }
 
+/* xyflow's stylesheet is unlayered and beats every layer, so rules on its parts stay unlayered below. */
+
 /* ── Selection ─────────────────────────────────────────── */
 
 /* One selected card shows its grips, size chip and quick-add. A group shows outlines and one box. ChromeZoom sets the flag. */
@@ -35,16 +96,6 @@
   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 {
@@ -96,7 +147,8 @@
   }
 }
 
-[data-cv-linking] .cv-handle {
+/* Every dot shows while a link is drawn. Same weight as the resting rule, so it wins on order. */
+[data-cv-linking] .svelte-flow__handle.cv-handle {
   opacity: 1;
   --cv-grow: 1;
 }
@@ -161,52 +213,6 @@
   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;

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    label: string;
+    children: Snippet;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<Record<string, never>, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -44,12 +44,22 @@
 <!-- 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;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* 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;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.snap-guide {
+				animation-duration: 1ms;
+			}
+		}
 	}
 
 	@keyframes snap-guide-in {
@@ -60,10 +70,4 @@
 			opacity: 1;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.snap-guide {
-			animation-duration: 1ms;
-		}
-	}
 </style>

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

@@ -0,0 +1,9 @@
+import type { SnapGuide } from "../headless/snap-guides.js";
+interface Props {
+    guides: SnapGuide[];
+    /** Canvas zoom, so the line stays one screen pixel at every scale. */
+    zoom: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -0,0 +1,8 @@
+import { type IconName } from "../../ui/icons.js";
+type $$ComponentProps = {
+    name: IconName;
+    size?: number;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -58,10 +58,14 @@
 </svg>
 
 <style>
-	.preview {
-		width: 100%;
-		height: 100%;
-		overflow: visible;
-		pointer-events: none;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.preview {
+			width: 100%;
+			height: 100%;
+			overflow: visible;
+			pointer-events: none;
+		}
 	}
 </style>

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

@@ -0,0 +1,13 @@
+import type { PenPreview } from "../../../pen/pen-session.js";
+interface Props {
+    preview: PenPreview | null;
+    /** The xyflow viewport, so the preview lines up with the board. */
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -91,9 +91,13 @@
 </svg>
 
 <style>
-	.pen-shape {
-		display: block;
-		overflow: visible;
-		pointer-events: none;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pen-shape {
+			display: block;
+			overflow: visible;
+			pointer-events: none;
+		}
 	}
 </style>

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

@@ -0,0 +1,15 @@
+import type { ShapeData } from "../../../pen/types.js";
+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;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -7,11 +7,12 @@
 	import { penColorVar } from "../../../pen/colors.js";
 	import { strokePath } from "../../../pen/stroke-path.js";
 	import { HIGHLIGHTER_OPACITY, type StrokeData } from "../../../pen/types.js";
+	import { penNodeName, useNodeName } from "../../../pen/node-name.svelte.js";
 
 	// =========================
 	// PROPS
 	// =========================
-	let { data, selected, width, height }: NodeProps = $props();
+	let { id, data, selected, width, height }: NodeProps = $props();
 
 	// =========================
 	// DERIVED
@@ -21,6 +22,11 @@
 	// 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));
+
+	useNodeName(
+		() => id,
+		() => penNodeName("stroke", stroke),
+	);
 </script>
 
 <!-- =========================== -->
@@ -49,15 +55,19 @@
 </svg>
 
 <style>
-	.pen-stroke {
-		display: block;
-		overflow: visible;
-		pointer-events: none;
-	}
-	.hit {
-		pointer-events: stroke;
-	}
-	.ink {
-		pointer-events: visiblePainted;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pen-stroke {
+			display: block;
+			overflow: visible;
+			pointer-events: none;
+		}
+		.hit {
+			pointer-events: stroke;
+		}
+		.ink {
+			pointer-events: visiblePainted;
+		}
 	}
 </style>

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

@@ -0,0 +1,5 @@
+import type { NodeProps } from "@xyflow/svelte";
+import "../../../pen/pen.css";
+declare const $$Component: import("svelte").Component<NodeProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -37,9 +37,13 @@
 </svg>
 
 <style>
-	.pen-rule {
-		display: block;
-		overflow: visible;
-		pointer-events: none;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pen-rule {
+			display: block;
+			overflow: visible;
+			pointer-events: none;
+		}
 	}
 </style>

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

@@ -0,0 +1,9 @@
+import type { SketchPath } from "../../../headless/sketch.js";
+interface Props {
+    rule: SketchPath[];
+    ink: string;
+    width: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -57,20 +57,24 @@
 <!-- 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;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.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/bend-handle.svelte.d.ts

@@ -0,0 +1,10 @@
+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;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;