@heyramzi/ui 2.0.1 → 2.2.0

package/src/canvas/pen/TextNode.svelte

@@ -1,61 +1,61 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { Handle, Position, type NodeProps } from "@xyflow/svelte";
-import { onMount } from "svelte";
-import TextRule from "../components/shared/svg/TextRule.svelte";
-import PenField from "./PenField.svelte";
-import { getDiagramEditorContext } from "../editor/editor-context.js";
-import { useHandDrawn } from "../editor/hand-context.js";
-import { isLocked } from "../editor/lock.js";
-import { roughUnderline, seedFrom, sketchColors } from "../headless/sketch.js";
-import "./pen.css";
-import { penColorVar } from "./colors.js";
-import type { TextData } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Handle, Position, type NodeProps } from "@xyflow/svelte";
+	import { onMount } from "svelte";
+	import TextRule from "../components/shared/svg/TextRule.svelte";
+	import PenField from "./PenField.svelte";
+	import { getDiagramEditorContext } from "../editor/editor-context.js";
+	import { useHandDrawn } from "../editor/hand-context.js";
+	import { isLocked } from "../editor/lock.js";
+	import { roughUnderline, seedFrom, sketchColors } from "../headless/sketch.js";
+	import "./pen.css";
+	import { penColorVar } from "./colors.js";
+	import type { TextData } from "./types.js";
 
-// =========================
-// PROPS
-// =========================
-let { id, data, selected }: NodeProps = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, data, selected }: NodeProps = $props();
 
-// =========================
-// STATE
-// =========================
-const editor = getDiagramEditorContext();
-const handDrawn = useHandDrawn();
-let field = $state<ReturnType<typeof PenField>>();
-let boxWidth = $state(0);
+	// =========================
+	// STATE
+	// =========================
+	const editor = getDiagramEditorContext();
+	const handDrawn = useHandDrawn();
+	let field = $state<ReturnType<typeof PenField>>();
+	let boxWidth = $state(0);
 
-// =========================
-// DERIVED
-// =========================
-let text = $derived(data as TextData);
-let ink = $derived(penColorVar(text.color));
-let rule = $derived(
-	text.underline && boxWidth > 2
-		? roughUnderline(
-				boxWidth,
-				{ seed: seedFrom(id) + 7, colors: { ...sketchColors("ink", false), stroke: ink } },
-				{ formal: !handDrawn() },
-			)
-		: [],
-);
+	// =========================
+	// DERIVED
+	// =========================
+	let text = $derived(data as TextData);
+	let ink = $derived(penColorVar(text.color));
+	let rule = $derived(
+		text.underline && boxWidth > 2
+			? roughUnderline(
+					boxWidth,
+					{ seed: seedFrom(id) + 7, colors: { ...sketchColors("ink", false), stroke: ink } },
+					{ formal: !handDrawn() },
+				)
+			: [],
+	);
 
-// =========================
-// EFFECTS
-// =========================
-// The editor asks a freshly dropped text to open, so the first thing typed lands in it.
-onMount(() => editor?.registerStartEdit(id, () => void field?.edit()));
+	// =========================
+	// EFFECTS
+	// =========================
+	// The editor asks a freshly dropped text to open, so the first thing typed lands in it.
+	onMount(() => editor?.registerStartEdit(id, () => void field?.edit()));
 
-// =========================
-// FUNCTIONS
-// =========================
-function onExit() {
-	editor?.endTextEdit();
-	// A click that typed nothing leaves no empty node behind.
-	if (editor && text.text.trim() === "") editor.removeNode(id);
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function onExit() {
+		editor?.endTextEdit();
+		// A click that typed nothing leaves no empty node behind.
+		if (editor && text.text.trim() === "") editor.removeNode(id);
+	}
 </script>
 
 <!-- =========================== -->
@@ -81,7 +81,8 @@ function onExit() {
 		fontWeight={text.fontWeight === "bold" ? 700 : undefined}
 		center={text.align === "center"}
 		column={text.fixedWidth}
-		onCommit={(next, live) => editor?.patchNodeData(id, { text: next }, live ? { coalesce: true } : undefined)}
+		onCommit={(next, live) =>
+			editor?.patchNodeData(id, { text: next }, live ? { coalesce: true } : undefined)}
 		{onExit}
 	/>
 	{#if rule.length > 0}

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-// A host's text field for the PenField test: shows its value, records that it was opened.
-import type { TextFieldProps } from "../editor/text-field-context.js";
+	// A host's text field for the PenField test: shows its value, records that it was opened.
+	import type { TextFieldProps } from "../editor/text-field-context.js";
 
-let { value, readonly = false, class: klass = "" }: TextFieldProps = $props();
-let opened = $state(0);
+	let { value, readonly = false, class: klass = "" }: TextFieldProps = $props();
+	let opened = $state(0);
 
-export function edit() {
-	opened++;
-}
+	export function edit() {
+		opened++;
+	}
 </script>
 
 <div data-host-field class={klass} data-readonly={readonly} data-opened={opened}>{value}</div>

package/src/canvas/pen/shapes.ts

@@ -1,7 +1,13 @@
 // Shape and text nodes from a drag or a click. Pure, so the CLI can reuse it.
 
 import type { Box, Pt } from "./geometry.js";
-import type { PenColor, PenNodeInput, ShapeData, ShapeKind, TextData } from "./types.js";
+import type {
+  PenColor,
+  PenNodeInput,
+  ShapeData,
+  ShapeKind,
+  TextData,
+} from "./types.js";
 import { PEN_DEFAULTS, SHAPE_NODE, TEXT_NODE } from "./types.js";
 
 /** A shape smaller than this on both sides was a click, so it gets the default size. */

package/src/canvas/screen/GlyphIcon.svelte

@@ -1,25 +1,30 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { GLYPHS, type GlyphName } from "./glyphs.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { GLYPHS, type GlyphName } from "./glyphs.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	name: GlyphName;
-	size?: number;
-	class?: string;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		name: GlyphName;
+		size?: number;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { name, size = 12, class: klass = "" }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { name, size = 12, class: klass = "" }: Props = $props();
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<span class="cv-glyph {klass}" style:--glyph={`url("${GLYPHS[name]}")`} style:--size="{size}px" aria-hidden="true"></span>
+<span
+	class="cv-glyph {klass}"
+	style:--glyph={`url("${GLYPHS[name]}")`}
+	style:--size="{size}px"
+	aria-hidden="true"
+></span>

package/src/canvas/screen/PartView.svelte

@@ -1,78 +1,94 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { tick } from "svelte";
-import GlyphIcon from "./GlyphIcon.svelte";
-import { addItem, removeItem, setItem } from "./parts.js";
-import type { ScreenLabels } from "./labels.js";
-import type { ScreenMode, ScreenPart } from "./types.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { tick } from "svelte";
+	import GlyphIcon from "./GlyphIcon.svelte";
+	import { addItem, removeItem, setItem } from "./parts.js";
+	import type { ScreenLabels } from "./labels.js";
+	import type { ScreenMode, ScreenPart } from "./types.js";
 
-// One kit part, drawn as grey boxes or in the board's tokens. Its words are inputs in both.
+	// One kit part, drawn as grey boxes or in the board's tokens. Its words are inputs in both.
 
-// =========================
-// TYPES
-// =========================
-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;
-}
+	// =========================
+	// TYPES
+	// =========================
+	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;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { part, mode, index, count, labels, readonly = false, oncommit, onmove, onremove, onend }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		part,
+		mode,
+		index,
+		count,
+		labels,
+		readonly = false,
+		oncommit,
+		onmove,
+		onremove,
+		onend,
+	}: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let root = $state<HTMLElement>();
+	// =========================
+	// STATE
+	// =========================
+	let root = $state<HTMLElement>();
 
-// =========================
-// DERIVED
-// =========================
-let items = $derived(part.items ?? []);
+	// =========================
+	// DERIVED
+	// =========================
+	let items = $derived(part.items ?? []);
 
-// =========================
-// FUNCTIONS
-// =========================
-function keep(event: KeyboardEvent) {
-	// A key typed into a part's words is the part's, so it never reaches the board's shortcuts.
-	event.stopPropagation();
-	if (event.key === "Escape") (event.currentTarget as HTMLElement).blur();
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function keep(event: KeyboardEvent) {
+		// A key typed into a part's words is the part's, so it never reaches the board's shortcuts.
+		event.stopPropagation();
+		if (event.key === "Escape") (event.currentTarget as HTMLElement).blur();
+	}
 
-async function focusItem(at: number) {
-	await tick();
-	root?.querySelector<HTMLInputElement>(`[data-item="${at}"]`)?.focus();
-}
+	async function focusItem(at: number) {
+		await tick();
+		root?.querySelector<HTMLInputElement>(`[data-item="${at}"]`)?.focus();
+	}
 
-function itemKey(event: KeyboardEvent, at: number) {
-	keep(event);
-	if (event.key === "Enter") {
-		event.preventDefault();
-		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);
-		focusItem(Math.max(0, at - 1));
+	function itemKey(event: KeyboardEvent, at: number) {
+		keep(event);
+		if (event.key === "Enter") {
+			event.preventDefault();
+			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);
+			focusItem(Math.max(0, at - 1));
+		}
 	}
-}
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-{#snippet words(value: string, aria: string, commit: (next: string, live: boolean) => void, cls = "")}
+{#snippet words(
+	value: string,
+	aria: string,
+	commit: (next: string, live: boolean) => void,
+	cls = "",
+)}
 	<input
 		class="cv-field nodrag {cls}"
 		{value}
@@ -88,18 +104,30 @@ function itemKey(event: KeyboardEvent, at: number) {
 	{#if part.kind === "header"}
 		<div class="cv-header">
 			<span class="cv-brand" aria-hidden="true"></span>
-			{@render words(part.label, labels.kinds.header, (next, live) => oncommit({ label: next }, live), "cv-header-title")}
+			{@render words(
+				part.label,
+				labels.kinds.header,
+				(next, live) => oncommit({ label: next }, live),
+				"cv-header-title",
+			)}
 			<span class="cv-menu" aria-hidden="true"><i></i><i></i><i></i></span>
 		</div>
 	{:else if part.kind === "button"}
 		<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))}
+				{@render words(part.label, labels.kinds.button, (next, live) =>
+					oncommit({ label: next }, live),
+				)}
 			</div>
 		</div>
 	{:else if part.kind === "input"}
 		<div class="cv-input">
-			{@render words(part.label, labels.kinds.input, (next, live) => oncommit({ label: next }, live), "cv-input-label")}
+			{@render words(
+				part.label,
+				labels.kinds.input,
+				(next, live) => oncommit({ label: next }, live),
+				"cv-input-label",
+			)}
 			<div class="cv-input-box" aria-hidden="true"><i></i></div>
 		</div>
 	{:else if part.kind === "image"}
@@ -107,7 +135,12 @@ function itemKey(event: KeyboardEvent, at: number) {
 			<div class="cv-image-box" aria-hidden="true">
 				<GlyphIcon name="hills" size={60} class="cv-hills" />
 			</div>
-			{@render words(part.label, labels.kinds.image, (next, live) => oncommit({ label: next }, live), "cv-caption")}
+			{@render words(
+				part.label,
+				labels.kinds.image,
+				(next, live) => oncommit({ label: next }, live),
+				"cv-caption",
+			)}
 		</div>
 	{:else if part.kind === "list"}
 		<ul class="cv-list">
@@ -120,12 +153,18 @@ function itemKey(event: KeyboardEvent, at: number) {
 						value={item}
 						{readonly}
 						aria-label={labels.kinds.list}
-						oninput={(event) => oncommit({ items: setItem(items, at, event.currentTarget.value) }, true)}
+						oninput={(event) =>
+							oncommit({ items: setItem(items, at, event.currentTarget.value) }, true)}
 						onblur={onend}
 						onkeydown={(event) => itemKey(event, at)}
 					/>
 					{#if !readonly && items.length > 1}
-						<button type="button" class="cv-mini nodrag" aria-label={labels.removeItem} onclick={() => oncommit({ items: removeItem(items, at) }, false)}>
+						<button
+							type="button"
+							class="cv-mini nodrag"
+							aria-label={labels.removeItem}
+							onclick={() => oncommit({ items: removeItem(items, at) }, false)}
+						>
 							<GlyphIcon name="close" size={10} />
 						</button>
 					{/if}
@@ -133,7 +172,11 @@ function itemKey(event: KeyboardEvent, at: number) {
 			{/each}
 			{#if !readonly}
 				<li class="cv-list-row is-add">
-					<button type="button" class="cv-add-item nodrag" onclick={() => oncommit({ items: addItem(items) }, false)}>
+					<button
+						type="button"
+						class="cv-add-item nodrag"
+						onclick={() => oncommit({ items: addItem(items) }, false)}
+					>
 						<GlyphIcon name="plus" size={10} />
 						{labels.addItem}
 					</button>
@@ -143,10 +186,20 @@ function itemKey(event: KeyboardEvent, at: number) {
 	{:else}
 		<div class="cv-modal">
 			<div class="cv-modal-head">
-				{@render words(part.label, labels.kinds.modal, (next, live) => oncommit({ label: next }, live), "cv-modal-title")}
+				{@render words(
+					part.label,
+					labels.kinds.modal,
+					(next, live) => oncommit({ label: next }, live),
+					"cv-modal-title",
+				)}
 				<GlyphIcon name="close" size={10} class="cv-x" />
 			</div>
-			{@render words(part.text ?? "", labels.kinds.modal, (next, live) => oncommit({ text: next }, live), "cv-modal-text")}
+			{@render words(
+				part.text ?? "",
+				labels.kinds.modal,
+				(next, live) => oncommit({ text: next }, live),
+				"cv-modal-text",
+			)}
 		</div>
 	{/if}
 
@@ -157,15 +210,28 @@ function itemKey(event: KeyboardEvent, at: number) {
 					type="button"
 					class="cv-tool is-text"
 					aria-pressed={part.variant !== "secondary"}
-					onclick={() => oncommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
+					onclick={() =>
+						oncommit({ variant: part.variant === "secondary" ? "primary" : "secondary" }, false)}
 				>
 					{part.variant === "secondary" ? labels.secondary : labels.primary}
 				</button>
 			{/if}
-			<button type="button" class="cv-tool" aria-label={labels.moveUp} disabled={index === 0} onclick={() => onmove(-1)}>
+			<button
+				type="button"
+				class="cv-tool"
+				aria-label={labels.moveUp}
+				disabled={index === 0}
+				onclick={() => onmove(-1)}
+			>
 				<GlyphIcon name="up" />
 			</button>
-			<button type="button" class="cv-tool" aria-label={labels.moveDown} disabled={index === count - 1} onclick={() => onmove(1)}>
+			<button
+				type="button"
+				class="cv-tool"
+				aria-label={labels.moveDown}
+				disabled={index === count - 1}
+				onclick={() => onmove(1)}
+			>
 				<GlyphIcon name="down" />
 			</button>
 			<button type="button" class="cv-tool" aria-label={labels.remove} onclick={onremove}>

package/src/canvas/screen/ScreenBody.svelte

@@ -1,72 +1,88 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { getDiagramEditorContext } from "../editor/editor-context.js";
-import { isLocked } from "../editor/lock.js";
-import { DEFAULT_SCREEN_LABELS, type ScreenLabels } from "./labels.js";
-import { addPart, movePart, normalizeScreen, patchPart, removePart } from "./parts.js";
-import GlyphIcon from "./GlyphIcon.svelte";
-import PartView from "./PartView.svelte";
-import { PART_KINDS, SCREEN_MODES, type PartKind, type ScreenMode, type ScreenPart } from "./types.js";
-import "./screen.css";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { getDiagramEditorContext } from "../editor/editor-context.js";
+	import { isLocked } from "../editor/lock.js";
+	import { DEFAULT_SCREEN_LABELS, type ScreenLabels } from "./labels.js";
+	import {
+		addPart,
+		movePart,
+		normalizeScreen,
+		patchPart,
+		removePart,
+	} from "./parts.js";
+	import GlyphIcon from "./GlyphIcon.svelte";
+	import PartView from "./PartView.svelte";
+	import {
+		PART_KINDS,
+		SCREEN_MODES,
+		type PartKind,
+		type ScreenMode,
+		type ScreenPart,
+	} from "./types.js";
+	import "./screen.css";
 
-// What sits in a Screen card's frame. Every edit patches the node's `data`, so undo and
-// save come from the editor and nothing here keeps a copy.
+	// What sits in a Screen card's frame. Every edit patches the node's `data`, so undo and
+	// save come from the editor and nothing here keeps a copy.
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	id: string;
-	data: Record<string, unknown>;
-	/** The host's translations. Missing keys fall back to English. */
-	labels?: Partial<ScreenLabels>;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		id: string;
+		data: Record<string, unknown>;
+		/** The host's translations. Missing keys fall back to English. */
+		labels?: Partial<ScreenLabels>;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { id, data, labels: given }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { id, data, labels: given }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-const editor = getDiagramEditorContext();
-let tray = $state(false);
+	// =========================
+	// STATE
+	// =========================
+	const editor = getDiagramEditorContext();
+	let tray = $state(false);
 
-// =========================
-// DERIVED
-// =========================
-let screen = $derived(normalizeScreen(data));
-let labels = $derived<ScreenLabels>({
-	...DEFAULT_SCREEN_LABELS,
-	...given,
-	modes: { ...DEFAULT_SCREEN_LABELS.modes, ...given?.modes },
-	kinds: { ...DEFAULT_SCREEN_LABELS.kinds, ...given?.kinds },
-});
-let readonly = $derived(!editor || isLocked({ data }));
-let showTray = $derived(!readonly && (tray || screen.parts.length === 0));
+	// =========================
+	// DERIVED
+	// =========================
+	let screen = $derived(normalizeScreen(data));
+	let labels = $derived<ScreenLabels>({
+		...DEFAULT_SCREEN_LABELS,
+		...given,
+		modes: { ...DEFAULT_SCREEN_LABELS.modes, ...given?.modes },
+		kinds: { ...DEFAULT_SCREEN_LABELS.kinds, ...given?.kinds },
+	});
+	let readonly = $derived(!editor || isLocked({ data }));
+	let showTray = $derived(!readonly && (tray || screen.parts.length === 0));
 
-// =========================
-// FUNCTIONS
-// =========================
-function write(patch: Record<string, unknown>, live = false) {
-	editor?.patchNodeData(id, patch, live ? { coalesce: true } : undefined);
-}
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function write(patch: Record<string, unknown>, live = false) {
+		editor?.patchNodeData(id, patch, live ? { coalesce: true } : undefined);
+	}
 
-function setMode(mode: ScreenMode) {
-	if (mode !== screen.mode) write({ mode });
-}
+	function setMode(mode: ScreenMode) {
+		if (mode !== screen.mode) write({ mode });
+	}
 
-function add(kind: PartKind) {
-	write({ parts: addPart(screen.parts, kind) });
-	tray = false;
-}
+	function add(kind: PartKind) {
+		write({ parts: addPart(screen.parts, kind) });
+		tray = false;
+	}
 
-function commitPart(part: ScreenPart, change: Partial<Omit<ScreenPart, "id" | "kind">>, live: boolean) {
-	write({ parts: patchPart(screen.parts, part.id, change) }, live);
-}
+	function commitPart(
+		part: ScreenPart,
+		change: Partial<Omit<ScreenPart, "id" | "kind">>,
+		live: boolean,
+	) {
+		write({ parts: patchPart(screen.parts, part.id, change) }, live);
+	}
 </script>
 
 <!-- =========================== -->
@@ -132,7 +148,12 @@ function commitPart(part: ScreenPart, change: Partial<Omit<ScreenPart, "id" | "k
 					{/each}
 				</div>
 			{:else}
-				<button type="button" class="cv-add nodrag" data-testid="screen-add" onclick={() => (tray = true)}>
+				<button
+					type="button"
+					class="cv-add nodrag"
+					data-testid="screen-add"
+					onclick={() => (tray = true)}
+				>
 					<GlyphIcon name="plus" />
 					{labels.addPart}
 				</button>