@heyramzi/ui 2.24.0 → 3.1.0

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

@@ -0,0 +1,16 @@
+interface Props {
+    id: string;
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    fromColor: string;
+    toColor: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

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

package/src/canvas/index.ts

@@ -3,7 +3,6 @@
 
 export * from "./types.js";
 export * from "./plugin.js";
-export { tryCatch, tryCatchAsync, type Result } from "../lib/result.js";
 
 export * from "./ops/ops.js";
 

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

@@ -101,45 +101,50 @@
 <!-- STYLES -->
 <!-- =========================== -->
 <style>
+	@layer theme, base, components, utilities;
+
+	/* Unlayered: it switches off a host app's card fade-in on xyflow nodes, which the app writes unlayered. */
 	: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;
-	}
+	@layer components {
+		/* 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/lod/lod-switch.svelte.d.ts

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

package/src/canvas/pen/PenField.svelte.d.ts

@@ -0,0 +1,26 @@
+import "./pen.css";
+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;
+}
+declare const $$Component: import("svelte").Component<Props, {
+    edit: (point?: {
+        x: number;
+        y: number;
+    }) => void | Promise<void>;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/pen/PenOverlay.svelte

@@ -162,11 +162,15 @@
 </div>
 
 <style>
-	.pen-overlay {
-		position: absolute;
-		inset: 0;
-		z-index: 5;
-		touch-action: none;
-		user-select: none;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pen-overlay {
+			position: absolute;
+			inset: 0;
+			z-index: 5;
+			touch-action: none;
+			user-select: none;
+		}
 	}
 </style>

package/src/canvas/pen/PenOverlay.svelte.d.ts

@@ -0,0 +1,23 @@
+import "./pen.css";
+import type { ErasableNode } from "./eraser.js";
+import type { PenOp } from "./ops.js";
+import type { PenColor, PenTool } from "./types.js";
+interface Props {
+    tool: PenTool;
+    color?: PenColor;
+    /** Brush width in flow units. Unset takes the tool's default. */
+    size?: number;
+    /** The xyflow viewport, so screen pixels map to flow units. */
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    nodes: readonly ErasableNode[];
+    commit: (ops: PenOp[]) => void;
+    startGesture: () => () => void;
+    onTextPlaced?: (nodeId: string) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/pen/ShapeNode.svelte

@@ -12,6 +12,7 @@
 	import { penColorVar } from "./colors.js";
 	import { shapeOutline } from "./shapes.js";
 	import type { ShapeData } from "./types.js";
+	import { penNodeName, useNodeName } from "./node-name.svelte.js";
 
 	// =========================
 	// PROPS
@@ -31,6 +32,11 @@
 	let shape = $derived(data as ShapeData);
 	let outline = $derived(shapeOutline(shape.shape, width ?? 0, height ?? 0, shape.strokeWidth / 2));
 	let ink = $derived(penColorVar(shape.color));
+
+	useNodeName(
+		() => id,
+		() => penNodeName("shape", shape),
+	);
 </script>
 
 <!-- =========================== -->

package/src/canvas/pen/ShapeNode.svelte.d.ts

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

package/src/canvas/pen/TextNode.svelte

@@ -13,6 +13,7 @@
 	import "./pen.css";
 	import { penColorVar } from "./colors.js";
 	import type { TextData } from "./types.js";
+	import { penNodeName, useNodeName } from "./node-name.svelte.js";
 
 	// =========================
 	// PROPS
@@ -45,6 +46,11 @@
 	// =========================
 	// EFFECTS
 	// =========================
+	useNodeName(
+		() => id,
+		() => penNodeName("text", text),
+	);
+
 	// The editor asks a freshly dropped text to open, so the first thing typed lands in it.
 	onMount(() => editor?.registerStartEdit(id, () => void field?.edit()));
 
@@ -92,7 +98,11 @@
 <Handle type="source" position={Position.Bottom} class="pen-handle" />
 
 <style>
-	.pen-text-box.column {
-		width: 100%;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.pen-text-box.column {
+			width: 100%;
+		}
 	}
 </style>

package/src/canvas/pen/TextNode.svelte.d.ts

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

package/src/canvas/pen/host-field.test.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TextFieldProps } from "../editor/text-field-context.js";
+declare const $$Component: import("svelte").Component<TextFieldProps, {
+    edit: () => void;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/pen/node-name.svelte.ts

@@ -0,0 +1,32 @@
+// A pen node's accessible name. Svelte Flow puts `ariaLabel` on the focusable node wrapper,
+// so the name has to live on the node object and follow its words as they're edited.
+
+import { useSvelteFlow } from "@xyflow/svelte";
+import { untrack } from "svelte";
+
+const cap = (word: string) => word.charAt(0).toUpperCase() + word.slice(1);
+
+/** "Idea" for a text, "Rectangle: Idea" for a labelled shape, "Pen stroke" for a drawing. */
+export function penNodeName(
+  kind: "text" | "shape" | "stroke",
+  data: { text?: string; label?: string; shape?: string; tool?: string },
+): string {
+  if (kind === "text") return data.text?.trim() || "Empty text";
+  if (kind === "stroke") return `${cap(data.tool ?? "pen")} stroke`;
+  const shape = cap(data.shape ?? "shape");
+  const label = data.label?.trim();
+  return label ? `${shape}: ${label}` : shape;
+}
+
+/** Keeps node `id`'s ariaLabel equal to `name()`. Call it from a node component. */
+export function useNodeName(id: () => string, name: () => string): void {
+  const { getNode, updateNode } = useSvelteFlow();
+  $effect(() => {
+    const nodeId = id();
+    const label = name();
+    // untrack: updateNode reads the node list, and tracking it would rerun this on every write.
+    untrack(() => {
+      if (getNode(nodeId)?.ariaLabel !== label) updateNode(nodeId, { ariaLabel: label });
+    });
+  });
+}

package/src/canvas/pen/pen.css

@@ -1,3 +1,71 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* The words of a pen text and a shape label, plain textarea or the host's formatted field. */
+  .pen-field {
+    display: block;
+    margin: 0;
+    padding: 2px 4px;
+    border: 0;
+    border-radius: 4px;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    font-weight: 500;
+    line-height: 1.4;
+    min-width: 2ch;
+  }
+
+  textarea.pen-field {
+    field-sizing: content;
+    resize: none;
+  }
+
+  /* A drawn page writes in the hand; the host may name the face, else Excalifont. */
+  .pen-field.hand {
+    font-family: var(--pen-hand-font, "Excalifont", "Segoe Print", "Bradley Hand", cursive);
+    font-weight: 400;
+  }
+
+  .pen-field.is-text {
+    max-width: 480px;
+  }
+
+  .pen-field.is-text.column {
+    width: 100%;
+    max-width: none;
+    box-sizing: border-box;
+  }
+
+  /* Selected, the glyphs themselves get heavier in their own ink; a box round
+     free text reads as a second shape. */
+  .pen-field.is-text.selected {
+    -webkit-text-stroke: 0.045em currentColor;
+  }
+
+  .pen-field.is-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 80%;
+    text-align: center;
+    pointer-events: auto;
+  }
+
+  /* The host's field is as wide as its words, like the textarea it stands in for. */
+  .pen-field.is-rich {
+    min-height: 1.4em;
+  }
+
+  .pen-field.is-rich.is-label,
+  .pen-field.is-rich.is-text:not(.column) {
+    width: max-content;
+  }
+}
+
+/* xyflow's stylesheet is unlayered and beats every layer, so rules on its parts stay unlayered below. */
+
 /* Pen colour tokens, light by default and lifted on a dark canvas. Values mirror colors.ts. */
 .svelte-flow,
 .pen-overlay {
@@ -54,7 +122,7 @@
   }
 }
 
-.diagram-connecting .pen-handle {
+.diagram-connecting .svelte-flow__handle.pen-handle {
   opacity: 1;
 }
 
@@ -85,65 +153,3 @@
   border-radius: 9999px;
   background: var(--color-background, #fff);
 }
-
-/* The words of a pen text and a shape label, plain textarea or the host's formatted field. */
-.pen-field {
-  display: block;
-  margin: 0;
-  padding: 2px 4px;
-  border: 0;
-  border-radius: 4px;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  font-weight: 500;
-  line-height: 1.4;
-  min-width: 2ch;
-}
-
-textarea.pen-field {
-  field-sizing: content;
-  resize: none;
-}
-
-/* A drawn page writes in the hand; the host may name the face, else Excalifont. */
-.pen-field.hand {
-  font-family: var(--pen-hand-font, "Excalifont", "Segoe Print", "Bradley Hand", cursive);
-  font-weight: 400;
-}
-
-.pen-field.is-text {
-  max-width: 480px;
-}
-
-.pen-field.is-text.column {
-  width: 100%;
-  max-width: none;
-  box-sizing: border-box;
-}
-
-/* Selected, the glyphs themselves get heavier in their own ink; a box round
-   free text reads as a second shape. */
-.pen-field.is-text.selected {
-  -webkit-text-stroke: 0.045em currentColor;
-}
-
-.pen-field.is-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 80%;
-  text-align: center;
-  pointer-events: auto;
-}
-
-/* The host's field is as wide as its words, like the textarea it stands in for. */
-.pen-field.is-rich {
-  min-height: 1.4em;
-}
-
-.pen-field.is-rich.is-label,
-.pen-field.is-rich.is-text:not(.column) {
-  width: max-content;
-}

package/src/canvas/screen/GlyphIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type GlyphName } from "./glyphs.js";
+interface Props {
+    name: GlyphName;
+    size?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/screen/PartView.svelte

@@ -20,10 +20,10 @@
 		count: number;
 		labels: ScreenLabels;
 		readonly?: boolean;
-		oncommit: (patch: Partial<Omit<ScreenPart, "id" | "kind">>, live: boolean) => void;
-		onmove: (step: -1 | 1) => void;
-		onremove: () => void;
-		onend: () => void;
+		onCommit: (patch: Partial<Omit<ScreenPart, "id" | "kind">>, live: boolean) => void;
+		onMove: (step: -1 | 1) => void;
+		onRemove: () => void;
+		onEnd: () => void;
 	}
 
 	// =========================
@@ -36,10 +36,10 @@
 		count,
 		labels,
 		readonly = false,
-		oncommit,
-		onmove,
-		onremove,
-		onend,
+		onCommit,
+		onMove,
+		onRemove,
+		onEnd,
 	}: Props = $props();
 
 	// =========================
@@ -70,11 +70,11 @@
 		keep(event);
 		if (event.key === "Enter") {
 			event.preventDefault();
-			oncommit({ items: [...items.slice(0, at + 1), "Item", ...items.slice(at + 1)] }, false);
+			onCommit({ items: [...items.slice(0, at + 1), "Item", ...items.slice(at + 1)] }, false);
 			focusItem(at + 1);
 		} else if (event.key === "Backspace" && items[at] === "" && items.length > 1) {
 			event.preventDefault();
-			oncommit({ items: removeItem(items, at) }, false);
+			onCommit({ items: removeItem(items, at) }, false);
 			focusItem(Math.max(0, at - 1));
 		}
 	}
@@ -95,7 +95,7 @@
 		{readonly}
 		aria-label={aria}
 		oninput={(event) => commit(event.currentTarget.value, true)}
-		onblur={onend}
+		onblur={onEnd}
 		onkeydown={keep}
 	/>
 {/snippet}
@@ -107,7 +107,7 @@
 			{@render words(
 				part.label,
 				labels.kinds.header,
-				(next, live) => oncommit({ label: next }, live),
+				(next, live) => onCommit({ label: next }, live),
 				"cv-header-title",
 			)}
 			<span class="cv-menu" aria-hidden="true"><i></i><i></i><i></i></span>
@@ -116,7 +116,7 @@
 		<div class="cv-button-row">
 			<div class="cv-button is-{part.variant ?? 'primary'}">
 				{@render words(part.label, labels.kinds.button, (next, live) =>
-					oncommit({ label: next }, live),
+					onCommit({ label: next }, live),
 				)}
 			</div>
 		</div>
@@ -125,7 +125,7 @@
 			{@render words(
 				part.label,
 				labels.kinds.input,
-				(next, live) => oncommit({ label: next }, live),
+				(next, live) => onCommit({ label: next }, live),
 				"cv-input-label",
 			)}
 			<div class="cv-input-box" aria-hidden="true"><i></i></div>
@@ -138,7 +138,7 @@
 			{@render words(
 				part.label,
 				labels.kinds.image,
-				(next, live) => oncommit({ label: next }, live),
+				(next, live) => onCommit({ label: next }, live),
 				"cv-caption",
 			)}
 		</div>
@@ -154,8 +154,8 @@
 						{readonly}
 						aria-label={labels.kinds.list}
 						oninput={(event) =>
-							oncommit({ items: setItem(items, at, event.currentTarget.value) }, true)}
-						onblur={onend}
+							onCommit({ items: setItem(items, at, event.currentTarget.value) }, true)}
+						onblur={onEnd}
 						onkeydown={(event) => itemKey(event, at)}
 					/>
 					{#if !readonly && items.length > 1}
@@ -163,7 +163,7 @@
 							type="button"
 							class="cv-mini nodrag"
 							aria-label={labels.removeItem}
-							onclick={() => oncommit({ items: removeItem(items, at) }, false)}
+							onclick={() => onCommit({ items: removeItem(items, at) }, false)}
 						>
 							<GlyphIcon name="close" size={10} />
 						</button>
@@ -175,7 +175,7 @@
 					<button
 						type="button"
 						class="cv-add-item nodrag"
-						onclick={() => oncommit({ items: addItem(items) }, false)}
+						onclick={() => onCommit({ items: addItem(items) }, false)}
 					>
 						<GlyphIcon name="plus" size={10} />
 						{labels.addItem}
@@ -189,7 +189,7 @@
 				{@render words(
 					part.label,
 					labels.kinds.modal,
-					(next, live) => oncommit({ label: next }, live),
+					(next, live) => onCommit({ label: next }, live),
 					"cv-modal-title",
 				)}
 				<GlyphIcon name="close" size={10} class="cv-x" />
@@ -197,7 +197,7 @@
 			{@render words(
 				part.text ?? "",
 				labels.kinds.modal,
-				(next, live) => oncommit({ text: next }, live),
+				(next, live) => onCommit({ text: next }, live),
 				"cv-modal-text",
 			)}
 		</div>
@@ -211,7 +211,7 @@
 					class="cv-tool is-text"
 					aria-pressed={part.variant !== "secondary"}
 					onclick={() =>
-						oncommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
+						onCommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
 				>
 					{part.variant === "secondary" ? labels.secondary : labels.primary}
 				</button>
@@ -221,7 +221,7 @@
 				class="cv-tool"
 				aria-label={labels.moveUp}
 				disabled={index === 0}
-				onclick={() => onmove(-1)}
+				onclick={() => onMove(-1)}
 			>
 				<GlyphIcon name="up" />
 			</button>
@@ -230,11 +230,11 @@
 				class="cv-tool"
 				aria-label={labels.moveDown}
 				disabled={index === count - 1}
-				onclick={() => onmove(1)}
+				onclick={() => onMove(1)}
 			>
 				<GlyphIcon name="down" />
 			</button>
-			<button type="button" class="cv-tool" aria-label={labels.remove} onclick={onremove}>
+			<button type="button" class="cv-tool" aria-label={labels.remove} onclick={onRemove}>
 				<GlyphIcon name="close" />
 			</button>
 		</div>

package/src/canvas/screen/PartView.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ScreenLabels } from "./labels.js";
+import type { ScreenMode, ScreenPart } from "./types.js";
+interface Props {
+    part: ScreenPart;
+    mode: ScreenMode;
+    index: number;
+    count: number;
+    labels: ScreenLabels;
+    readonly?: boolean;
+    onCommit: (patch: Partial<Omit<ScreenPart, "id" | "kind">>, live: boolean) => void;
+    onMove: (step: -1 | 1) => void;
+    onRemove: () => void;
+    onEnd: () => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;