@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/pen/types.ts

@@ -0,0 +1,96 @@
+// The pen layer's node shapes. A stroke, a text and a shape are ordinary xyflow
+// nodes, so undo, copy and save come from the node diffing the editor already does.
+
+export const STROKE_NODE = "stroke";
+export const TEXT_NODE = "text";
+export const SHAPE_NODE = "shape";
+
+/** Colours are token names, never hex, so a board drawn in light reads in dark. */
+export const PEN_COLORS = [
+  "ink",
+  "red",
+  "blue",
+  "green",
+  "amber",
+  "violet",
+  "indigo",
+  "terra",
+] as const;
+export type PenColor = (typeof PEN_COLORS)[number];
+
+export type PenTool =
+  | "pen"
+  | "highlighter"
+  | "eraser"
+  | "text"
+  | "rectangle"
+  | "ellipse"
+  | "diamond";
+
+export const SHAPE_KINDS = ["rectangle", "ellipse", "diamond"] as const;
+export type ShapeKind = (typeof SHAPE_KINDS)[number];
+
+/** x, y, then pressure from 0 to 1 when the device reported one. */
+export type StrokePoint = readonly [number, number, number?];
+
+/** A point as it arrives, from a pointer or a file. Anything past x, y and pressure is ignored. */
+export type StrokeSample = StrokePoint | readonly number[];
+
+export interface StrokeData extends Record<string, unknown> {
+  /** Relative to the node's position, already simplified. */
+  points: StrokePoint[];
+  color: PenColor;
+  /** Brush width in flow units. */
+  size: number;
+  /** The highlighter draws wide, flat and see-through. */
+  tool: "pen" | "highlighter";
+  /** False when real pen pressure is in the points. */
+  simulatePressure: boolean;
+}
+
+export interface TextData extends Record<string, unknown> {
+  text: string;
+  color: PenColor;
+  /** Font size in flow units. */
+  fontSize: number;
+  /** Bold, or the face's own weight when unset. */
+  fontWeight?: "regular" | "bold";
+  /** The node's width is a column the words wrap in, as on a board, not the width of the words. */
+  fixedWidth?: boolean;
+  align?: "left" | "center";
+  /** A hand rule under the text, as under a board title. */
+  underline?: boolean;
+}
+
+export interface ShapeData extends Record<string, unknown> {
+  shape: ShapeKind;
+  color: PenColor;
+  /** Line width in flow units. */
+  strokeWidth: number;
+  /** A faint wash inside the outline. */
+  filled: boolean;
+  /** The wash's own colour. Unset, it takes the outline's. */
+  fill?: PenColor;
+  label: string;
+}
+
+/** A node as the pen layer writes it, which is the addNode op's node field. */
+export interface PenNodeInput<D extends Record<string, unknown>> {
+  id?: string;
+  type: string;
+  position: { x: number; y: number };
+  data: D;
+  width: number;
+  height: number;
+}
+
+export const PEN_DEFAULTS = {
+  pen: { size: 4 },
+  highlighter: { size: 20 },
+  strokeWidth: 3,
+  fontSize: 20,
+  color: "ink",
+} as const satisfies { color: PenColor; [key: string]: unknown };
+
+/** Highlighter ink is drawn at this opacity so what's under it still shows. */
+export const HIGHLIGHTER_OPACITY = 0.38;

package/src/canvas/pen/ui.ts

@@ -0,0 +1,26 @@
+// The browser registers `penUiPlugin`, and a server registers `penPlugin`.
+// Never both, because a kind has one owner.
+
+import { definePlugin } from "../plugin.js";
+import PenOverlay from "./PenOverlay.svelte";
+import { penPlugin } from "./plugin.js";
+import ShapeNode from "./ShapeNode.svelte";
+import StrokeNode from "../components/shared/svg/StrokeNode.svelte";
+import TextNode from "./TextNode.svelte";
+import { SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "./types.js";
+
+export { PenOverlay, ShapeNode, StrokeNode, TextNode };
+
+const components = {
+  [STROKE_NODE]: StrokeNode,
+  [TEXT_NODE]: TextNode,
+  [SHAPE_NODE]: ShapeNode,
+};
+
+export const penUiPlugin = definePlugin({
+  ...penPlugin,
+  nodes: (penPlugin.nodes ?? []).map((kind) => ({
+    ...kind,
+    component: components[kind.type as keyof typeof components],
+  })),
+});

package/src/canvas/plugin.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vite-plus/test";
+import { z } from "zod";
+import { createRegistry, definePlugin } from "./plugin.js";
+
+const ping = z.object({ kind: z.literal("ping") });
+
+const a = definePlugin({
+  id: "a",
+  nodes: [
+    { type: "card", label: "Card", sizing: "content-sized" },
+    { type: "frame", label: "Frame", sizing: "layout-owned" },
+  ],
+  ops: [{ kind: "ping", schema: ping, apply: () => {} }],
+  layouts: [
+    {
+      id: "flat",
+      matches: (_d, o) => o.mode === "flat",
+      run: (d) => ({ nodes: d.nodes, edges: d.edges }),
+    },
+  ],
+});
+
+describe("createRegistry", () => {
+  it("indexes kinds, ops and sizing", () => {
+    const registry = createRegistry([a]);
+    expect(registry.nodes.get("card")?.label).toBe("Card");
+    expect([...registry.contentSizedTypes()]).toEqual(["card"]);
+    expect([...registry.layoutOwnedTypes()]).toEqual(["frame"]);
+    expect(registry.parseOp({ kind: "ping" })).toEqual({ kind: "ping" });
+    expect(() => registry.parseOp({ kind: "pong" })).toThrow(/Unknown op kind/);
+  });
+
+  it("picks the first layout pass that matches", () => {
+    const registry = createRegistry([a]);
+    expect(registry.pickLayout({ nodes: [], edges: [] }, { mode: "flat" })?.id).toBe("flat");
+    expect(registry.pickLayout({ nodes: [], edges: [] }, { mode: "tree" })).toBeNull();
+  });
+
+  it("refuses a node type or op kind two plugins both claim", () => {
+    const b = definePlugin({ id: "b", nodes: [{ type: "card", label: "Other" }] });
+    expect(() => createRegistry([a, b])).toThrow(/claimed by both "a" and "b"/);
+    const c = definePlugin({ id: "c", ops: [{ kind: "ping", schema: ping, apply: () => {} }] });
+    expect(() => createRegistry([a, c])).toThrow(/claimed by both/);
+  });
+});

package/src/canvas/plugin.ts

@@ -0,0 +1,159 @@
+// How an app adds cards, ops and layouts to the canvas. It imports Svelte types
+// only, so the server can build a registry too.
+
+import type { NodeTypes } from "@xyflow/svelte";
+import { z } from "zod";
+import type { CanvasData, CanvasEdge, CanvasNode } from "./types.js";
+
+// =========================
+// NODE KINDS
+// =========================
+
+export interface NodeKind {
+  /** The value of `node.type`. Unique across every plugin. */
+  type: string;
+  label: string;
+  /** The Svelte component xyflow renders for this type. Absent on the server. */
+  component?: NodeTypes[string];
+  /** Palette placement. Absent means the kind is created by code or an op, never from the palette. */
+  palette?: { group: string; section?: string; order: number };
+  /** Size a new node gets before any layout or measuring. */
+  size?: { width: number; height?: number };
+  /** Starting `data` for a new node. */
+  createData?: () => Record<string, unknown>;
+  /** Parent types this kind may sit in. Empty means top level only. Absent means any. */
+  validParents?: readonly string[];
+  /** "layout-owned": a layout pass sets the size. "content-sized": the DOM sets the height. */
+  sizing?: "layout-owned" | "content-sized";
+}
+
+// =========================
+// OPS
+// =========================
+
+/** The graph an op list rewrites, one op at a time. Handlers replace `nodes` and `edges`, never mutate them. */
+export interface OpState {
+  nodes: Record<string, unknown>[];
+  edges: Record<string, unknown>[];
+}
+
+/** One op kind. `schema` checks the op's shape, `apply` rewrites the state or throws. */
+export interface OpDefinition<Op extends OpLike = OpLike> {
+  kind: Op["kind"];
+  schema: z.ZodType<Op>;
+  // A method, so a definition for one op shape fits a list of them.
+  apply(state: OpState, op: Op, opIndex: number): void;
+}
+
+/** An op before its kind's schema has narrowed it: a kind plus whatever fields it carries. */
+export type OpLike = { kind: string; [field: string]: unknown };
+
+// =========================
+// LAYOUTS
+// =========================
+
+export interface LayoutOptions {
+  /** Which pass the caller asks for by name. Absent lets each pass's `matches` decide. */
+  mode?: string;
+  /** DOM-measured sizes, folded in as layout input. */
+  measured?: ReadonlyMap<string, { width?: number; height?: number }>;
+  /** A pass reads what it needs from here: sibling order, spacing, anything else the app passes. */
+  extra?: Readonly<Record<string, unknown>>;
+}
+
+/** A layout pass. The first registered pass whose `matches` answers true runs. */
+export interface LayoutPass {
+  id: string;
+  matches: (data: CanvasData, options: LayoutOptions) => boolean;
+  run: (data: CanvasData, options: LayoutOptions) => { nodes: CanvasNode[]; edges: CanvasEdge[] };
+}
+
+// =========================
+// PLUGIN
+// =========================
+
+export interface CanvasPlugin {
+  /** A name for errors, like "pen" or "billing". Unique. */
+  id: string;
+  nodes?: readonly NodeKind[];
+  ops?: readonly OpDefinition[];
+  layouts?: readonly LayoutPass[];
+}
+
+/** Identity, so a plugin file gets its types checked where it is written. */
+export function definePlugin(plugin: CanvasPlugin): CanvasPlugin {
+  return plugin;
+}
+
+// =========================
+// REGISTRY
+// =========================
+
+export interface CanvasRegistry {
+  readonly plugins: readonly CanvasPlugin[];
+  readonly nodes: ReadonlyMap<string, NodeKind>;
+  readonly ops: ReadonlyMap<string, OpDefinition>;
+  readonly layouts: readonly LayoutPass[];
+  /** The `nodeTypes` map xyflow wants: type to component, for kinds that have one. */
+  nodeTypes: () => NodeTypes;
+  /** Types a layout leaves the height of to the DOM. */
+  contentSizedTypes: () => ReadonlySet<string>;
+  /** Types a layout sizes from their children. */
+  layoutOwnedTypes: () => ReadonlySet<string>;
+  /** Validates one op against its kind's schema. Throws a ZodError or an unknown-kind error. */
+  parseOp: (input: unknown) => { kind: string };
+  /** The first layout pass that matches, or null. */
+  pickLayout: (data: CanvasData, options?: LayoutOptions) => LayoutPass | null;
+}
+
+/** Collects plugins into one lookup. A node type or op kind two plugins both claim is an error. */
+export function createRegistry(plugins: readonly CanvasPlugin[]): CanvasRegistry {
+  const nodes = new Map<string, NodeKind>();
+  const ops = new Map<string, OpDefinition>();
+  const layouts: LayoutPass[] = [];
+  const owner = new Map<string, string>();
+
+  const claim = (key: string, pluginId: string) => {
+    const first = owner.get(key);
+    if (first) throw new Error(`"${key}" is claimed by both "${first}" and "${pluginId}"`);
+    owner.set(key, pluginId);
+  };
+
+  for (const plugin of plugins) {
+    for (const kind of plugin.nodes ?? []) {
+      claim(`node:${kind.type}`, plugin.id);
+      nodes.set(kind.type, kind);
+    }
+    for (const op of plugin.ops ?? []) {
+      claim(`op:${op.kind}`, plugin.id);
+      ops.set(op.kind, op);
+    }
+    layouts.push(...(plugin.layouts ?? []));
+  }
+
+  const typesWhere = (sizing: NodeKind["sizing"]) =>
+    new Set([...nodes.values()].filter((k) => k.sizing === sizing).map((k) => k.type));
+
+  return {
+    plugins,
+    nodes,
+    ops,
+    layouts,
+    nodeTypes() {
+      const out: NodeTypes = {};
+      for (const kind of nodes.values()) if (kind.component) out[kind.type] = kind.component;
+      return out;
+    },
+    contentSizedTypes: () => typesWhere("content-sized"),
+    layoutOwnedTypes: () => typesWhere("layout-owned"),
+    parseOp(input) {
+      const kind = (input as { kind?: unknown } | null)?.kind;
+      const def = typeof kind === "string" ? ops.get(kind) : undefined;
+      if (!def) throw new Error(`Unknown op kind: ${String(kind)}`);
+      return def.schema.parse(input);
+    },
+    pickLayout(data, options = {}) {
+      return layouts.find((pass) => pass.matches(data, options)) ?? null;
+    },
+  };
+}

package/src/canvas/screen/GlyphIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { GLYPHS, type GlyphName } from "./glyphs.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	name: GlyphName;
+	size?: number;
+	class?: string;
+}
+
+// =========================
+// 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>

package/src/canvas/screen/PartView.svelte

@@ -0,0 +1,176 @@
+<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";
+
+// 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;
+}
+
+// =========================
+// PROPS
+// =========================
+let { part, mode, index, count, labels, readonly = false, oncommit, onmove, onremove, onend }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let root = $state<HTMLElement>();
+
+// =========================
+// 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();
+}
+
+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));
+	}
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#snippet words(value: string, aria: string, commit: (next: string, live: boolean) => void, cls = "")}
+	<input
+		class="cv-field nodrag {cls}"
+		{value}
+		{readonly}
+		aria-label={aria}
+		oninput={(event) => commit(event.currentTarget.value, true)}
+		onblur={onend}
+		onkeydown={keep}
+	/>
+{/snippet}
+
+<div bind:this={root} class="cv-part is-{part.kind}" data-part={part.kind} data-part-id={part.id}>
+	{#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")}
+			<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))}
+			</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")}
+			<div class="cv-input-box" aria-hidden="true"><i></i></div>
+		</div>
+	{:else if part.kind === "image"}
+		<div class="cv-image">
+			<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")}
+		</div>
+	{:else if part.kind === "list"}
+		<ul class="cv-list">
+			{#each items as item, at (at)}
+				<li class="cv-list-row">
+					<i aria-hidden="true"></i>
+					<input
+						class="cv-field nodrag"
+						data-item={at}
+						value={item}
+						{readonly}
+						aria-label={labels.kinds.list}
+						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)}>
+							<GlyphIcon name="close" size={10} />
+						</button>
+					{/if}
+				</li>
+			{/each}
+			{#if !readonly}
+				<li class="cv-list-row is-add">
+					<button type="button" class="cv-add-item nodrag" onclick={() => oncommit({ items: addItem(items) }, false)}>
+						<GlyphIcon name="plus" size={10} />
+						{labels.addItem}
+					</button>
+				</li>
+			{/if}
+		</ul>
+	{: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")}
+				<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")}
+		</div>
+	{/if}
+
+	{#if !readonly}
+		<div class="cv-tools nodrag">
+			{#if part.kind === "button"}
+				<button
+					type="button"
+					class="cv-tool is-text"
+					aria-pressed={part.variant !== "secondary"}
+					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)}>
+				<GlyphIcon name="up" />
+			</button>
+			<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}>
+				<GlyphIcon name="close" />
+			</button>
+		</div>
+	{/if}
+</div>

package/src/canvas/screen/ScreenBody.svelte

@@ -0,0 +1,142 @@
+<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";
+
+// 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>;
+}
+
+// =========================
+// PROPS
+// =========================
+let { id, data, labels: given }: Props = $props();
+
+// =========================
+// 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));
+
+// =========================
+// 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 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);
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class="cv-screen" data-mode={screen.mode} data-testid="screen-card">
+	<div class="cv-title-bar">
+		<input
+			class="cv-field cv-name nodrag"
+			value={screen.label}
+			{readonly}
+			placeholder={labels.name}
+			aria-label={labels.name}
+			oninput={(event) => write({ label: event.currentTarget.value }, true)}
+			onblur={() => editor?.endTextEdit()}
+			onkeydown={(event) => {
+				event.stopPropagation();
+				if (event.key === "Escape") event.currentTarget.blur();
+			}}
+		/>
+		{#if !readonly}
+			<div class="cv-switch nodrag" role="radiogroup" aria-label={labels.mode}>
+				{#each SCREEN_MODES as mode (mode)}
+					<button
+						type="button"
+						role="radio"
+						class="cv-seg"
+						aria-checked={screen.mode === mode}
+						data-mode-option={mode}
+						onclick={() => setMode(mode)}
+					>
+						{labels.modes[mode]}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<div class="cv-stage">
+		{#each screen.parts as part, index (part.id)}
+			<PartView
+				{part}
+				mode={screen.mode}
+				{index}
+				count={screen.parts.length}
+				{labels}
+				{readonly}
+				oncommit={(change, live) => commitPart(part, change, live)}
+				onmove={(step) => write({ parts: movePart(screen.parts, part.id, step) })}
+				onremove={() => write({ parts: removePart(screen.parts, part.id) })}
+				onend={() => editor?.endTextEdit()}
+			/>
+		{/each}
+
+		{#if !readonly}
+			{#if showTray}
+				<div class="cv-tray nodrag" data-testid="screen-tray">
+					{#each PART_KINDS as kind (kind)}
+						<button type="button" class="cv-tile" data-add={kind} onclick={() => add(kind)}>
+							<GlyphIcon name={kind} size={20} />
+							<span>{labels.kinds[kind]}</span>
+						</button>
+					{/each}
+				</div>
+			{:else}
+				<button type="button" class="cv-add nodrag" data-testid="screen-add" onclick={() => (tray = true)}>
+					<GlyphIcon name="plus" />
+					{labels.addPart}
+				</button>
+			{/if}
+		{/if}
+	</div>
+</div>