@heyramzi/ui 2.23.0 → 3.0.0

package/src/canvas/ui/canvas-ui.css

@@ -1,313 +1,270 @@
-/* Canvas chrome: tool rail, pill, selection bar. Each colour reads a host token with a plain fallback. */
+@layer theme, base, components, utilities;
 
-:root {
-  --cv-surface: var(--card, #fff);
-  --cv-surface-hover: var(--accent, #f1f1f4);
-  --cv-line: var(--border, #e4e4e9);
-  --cv-ink: var(--foreground, #1c1c24);
-  --cv-ink-muted: var(--muted-foreground, #6b6b78);
-  --cv-selection: var(--ring, #4a4ad8);
-  --cv-selection-fill: color-mix(in oklch, var(--cv-selection) 12%, transparent);
-  --cv-elevation: var(--elev-raised, 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06));
-  --cv-elevation-pop: var(
-    --elev-overlay,
-    0 8px 24px rgb(0 0 0 / 0.12),
-    0 1px 3px rgb(0 0 0 / 0.08)
-  );
-  --cv-radius-btn: var(--radius-lg, 8px);
-  /* Concentric: the bar's corner is the button's plus the 4px padding, so the two curves stay parallel. */
-  --cv-radius-bar: calc(var(--cv-radius-btn) + 4px);
-  --cv-btn: 32px;
-  --cv-edge: 12px;
-}
+/* Canvas chrome: tool rail, pill, selection bar. Each colour reads a host token with a plain fallback. */
 
-@media (pointer: coarse) {
+@layer components {
   :root {
-    --cv-btn: 40px;
+    --cv-surface: var(--card, #fff);
+    --cv-surface-hover: var(--accent, #f1f1f4);
+    --cv-line: var(--border, #e4e4e9);
+    --cv-ink: var(--foreground, #1c1c24);
+    --cv-ink-muted: var(--muted-foreground, #6b6b78);
+    --cv-selection: var(--ring, #4a4ad8);
+    --cv-selection-fill: color-mix(in oklch, var(--cv-selection) 12%, transparent);
+    --cv-elevation: var(--elev-raised, 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06));
+    --cv-elevation-pop: var(
+      --elev-overlay,
+      0 8px 24px rgb(0 0 0 / 0.12),
+      0 1px 3px rgb(0 0 0 / 0.08)
+    );
+    --cv-radius-btn: var(--radius-lg, 8px);
+    /* Concentric: the bar's corner is the button's plus the 4px padding, so the two curves stay parallel. */
+    --cv-radius-bar: calc(var(--cv-radius-btn) + 4px);
+    --cv-btn: 32px;
+    --cv-edge: 12px;
   }
-}
-
-.svelte-flow .svelte-flow__panel.cv-dock {
-  margin: var(--cv-edge);
-  /* The panel's box is wider than its bars, so only the bars take the pointer; the rest is canvas. */
-  pointer-events: none;
-}
 
-/* xyflow's centring assumes a 15px margin. */
-.svelte-flow .svelte-flow__panel.cv-dock.left.center {
-  transform: translateY(-50%);
-}
+  @media (pointer: coarse) {
+    :root {
+      --cv-btn: 40px;
+    }
+  }
 
-.svelte-flow .svelte-flow__panel.cv-dock.top.center,
-.svelte-flow .svelte-flow__panel.cv-dock.bottom.center {
-  transform: translateX(-50%);
-}
+  /* A phone lays the rail flat along the bottom edge, its style bar stacked above it. */
+  @media (max-width: 639px) {
+    .cv-dock > .cv-row {
+      flex-direction: column-reverse;
+    }
 
-/* A phone has no room for a side rail: at 390px a rail on the left covers the
-   board xyflow just fitted. The rail lies flat along the bottom edge instead,
-   with its style bar stacked above it. */
-@media (max-width: 639px) {
-  .svelte-flow .svelte-flow__panel.cv-dock.left.center {
-    top: auto;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    .cv-dock .cv-rail {
+      flex-direction: row;
+    }
   }
 
-  .cv-dock > .cv-row {
-    flex-direction: column-reverse;
+  /* One surface for every bar, the rail, the pill, the selection bar and the style bar. */
+  .cv-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--cv-line);
+    border-radius: var(--cv-radius-bar);
+    background: var(--cv-surface);
+    box-shadow: var(--cv-elevation);
+    pointer-events: auto;
   }
 
-  .cv-dock .cv-rail {
-    flex-direction: row;
+  .cv-rail {
+    flex-direction: column;
   }
-}
-
-/* xyflow's credit is #999 on a half-white wash, which turns grey on grey on a
-   dark board. It takes the chrome's surface and muted ink in both themes. */
-.svelte-flow .svelte-flow__attribution {
-  border-top-left-radius: var(--radius-sm, 4px);
-  background: var(--cv-surface);
-}
-
-.svelte-flow .svelte-flow__attribution a {
-  color: var(--cv-ink-muted);
-}
 
-/* Beside the selection: StylePanel writes the spot, and a phone keeps its own row above the pill. */
-@media (min-width: 640px) {
-  .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock.is-placed {
-    inset: auto;
-    left: var(--cv-style-x);
-    top: var(--cv-style-y);
-    margin: 0;
-    transform: none;
+  /* The rail and its style bar side by side, the style bar centred on the rail. */
+  .cv-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
   }
-}
 
-/* One surface for every bar, the rail, the pill, the selection bar and the style bar. */
-.cv-bar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid var(--cv-line);
-  border-radius: var(--cv-radius-bar);
-  background: var(--cv-surface);
-  box-shadow: var(--cv-elevation);
-  pointer-events: auto;
-}
-
-.cv-rail {
-  flex-direction: column;
-}
+  /* Groups are set apart by space, never by a rule. */
+  .cv-gap {
+    flex: none;
+    width: 6px;
+    height: 6px;
+  }
 
-/* The rail and its style bar side by side, the style bar centred on the rail. */
-.cv-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  pointer-events: none;
-}
+  .cv-btn {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--cv-btn);
+    height: var(--cv-btn);
+    border: 0;
+    border-radius: var(--cv-radius-btn);
+    background: transparent;
+    color: var(--cv-ink-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+      color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+      scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+    -webkit-tap-highlight-color: transparent;
+  }
 
-/* Groups are set apart by space, never by a rule. */
-.cv-gap {
-  flex: none;
-  width: 6px;
-  height: 6px;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .cv-btn:hover:not(:disabled) {
+      background: var(--cv-surface-hover);
+      color: var(--cv-ink);
+    }
+  }
 
-.cv-btn {
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--cv-btn);
-  height: var(--cv-btn);
-  border: 0;
-  border-radius: var(--cv-radius-btn);
-  background: transparent;
-  color: var(--cv-ink-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
-    color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
-    scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
-  -webkit-tap-highlight-color: transparent;
-}
+  .cv-btn:active:not(:disabled) {
+    scale: 0.96;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .cv-btn:hover:not(:disabled) {
+  /* One active style for a tool, a size, a brush and an open popover. */
+  .cv-btn[aria-pressed="true"],
+  .cv-btn[aria-expanded="true"],
+  .cv-btn[data-state="open"] {
     background: var(--cv-surface-hover);
     color: var(--cv-ink);
   }
-}
-
-.cv-btn:active:not(:disabled) {
-  scale: 0.96;
-}
 
-/* One active style for a tool, a size, a brush and an open popover. */
-.cv-btn[aria-pressed="true"],
-.cv-btn[aria-expanded="true"],
-.cv-btn[data-state="open"] {
-  background: var(--cv-surface-hover);
-  color: var(--cv-ink);
-}
-
-.cv-btn:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.cv-btn:focus-visible,
-.cv-swatch:focus-visible {
-  outline: 2px solid var(--cv-selection);
-  outline-offset: 1px;
-}
-
-/* A readout between two buttons, like the zoom percentage. */
-.cv-readout {
-  width: auto;
-  min-width: 44px;
-  padding: 0 4px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.cv-swatch {
-  position: relative;
-  flex: none;
-  width: var(--cv-btn);
-  height: var(--cv-btn);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* The ink disc is 16px inside a 32px hit area. */
-.cv-swatch::before {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  width: 16px;
-  height: 16px;
-  translate: -50% -50%;
-  border-radius: 50%;
-  background: var(--swatch);
-  outline: 1px solid oklch(0 0 0 / 0.14);
-  outline-offset: -1px;
-  transition: scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
-}
-
-:root.dark .cv-swatch::before {
-  outline-color: oklch(1 0 0 / 0.16);
-}
+  .cv-btn:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .cv-swatch:hover::before {
-    scale: 1.1;
+  .cv-btn:focus-visible,
+  .cv-swatch:focus-visible {
+    outline: 2px solid var(--cv-selection);
+    outline-offset: 1px;
   }
-}
 
-.cv-swatch[aria-pressed="true"]::before {
-  box-shadow:
-    0 0 0 2px var(--cv-surface),
-    0 0 0 4px var(--cv-ink);
-}
+  /* A readout between two buttons, like the zoom percentage. */
+  .cv-readout {
+    width: auto;
+    min-width: 44px;
+    padding: 0 4px;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
 
-.cv-dot {
-  width: var(--dot);
-  height: var(--dot);
-  border-radius: 50%;
-  background: currentColor;
-}
+  .cv-swatch {
+    position: relative;
+    flex: none;
+    width: var(--cv-btn);
+    height: var(--cv-btn);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-/* A label on hover, for a pointer that can hover. Touch gets the aria-label alone. */
-@media (hover: hover) {
-  .cv-btn[data-tip]::after,
-  .cv-swatch[data-tip]::after {
-    content: attr(data-tip);
+  /* The ink disc is 16px inside a 32px hit area. */
+  .cv-swatch::before {
+    content: "";
     position: absolute;
-    bottom: calc(100% + 10px);
-    left: 50%;
-    translate: -50% 4px;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm, 6px);
-    background: var(--foreground, #1c1c24);
-    color: var(--background, #fff);
-    font-size: 12px;
-    line-height: 1.2;
-    white-space: pre;
-    pointer-events: none;
-    opacity: 0;
-    z-index: 5;
-    transition:
-      opacity var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
-      translate var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+    inset: 50% auto auto 50%;
+    width: 16px;
+    height: 16px;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: var(--swatch);
+    outline: 1px solid oklch(0 0 0 / 0.14);
+    outline-offset: -1px;
+    transition: scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
   }
 
-  .cv-btn[data-tip]:hover::after,
-  .cv-btn[data-tip]:focus-visible::after,
-  .cv-swatch[data-tip]:hover::after,
-  .cv-swatch[data-tip]:focus-visible::after {
-    opacity: 1;
-    translate: -50% 0;
-    transition-delay: 350ms;
+  :root.dark .cv-swatch::before {
+    outline-color: oklch(1 0 0 / 0.16);
   }
 
-  /* On the rail the label opens to the right. */
-  .cv-rail .cv-btn[data-tip]::after {
-    top: 50%;
-    bottom: auto;
-    left: calc(100% + 10px);
-    translate: -4px -50%;
+  @media (hover: hover) and (pointer: fine) {
+    .cv-swatch:hover::before {
+      scale: 1.1;
+    }
   }
 
-  .cv-rail .cv-btn[data-tip]:hover::after,
-  .cv-rail .cv-btn[data-tip]:focus-visible::after {
-    translate: 0 -50%;
+  .cv-swatch[aria-pressed="true"]::before {
+    box-shadow:
+      0 0 0 2px var(--cv-surface),
+      0 0 0 4px var(--cv-ink);
   }
 
-  .cv-btn:active::after,
-  .cv-btn:disabled::after,
-  .cv-btn[aria-expanded="true"]::after,
-  .cv-btn[data-state="open"]::after {
-    opacity: 0 !important;
+  .cv-dot {
+    width: var(--dot);
+    height: var(--dot);
+    border-radius: 50%;
+    background: currentColor;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .cv-btn,
-  .cv-swatch::before,
-  .cv-btn[data-tip]::after {
-    transition: none;
+  /* A label on hover, for a pointer that can hover. Touch gets the aria-label alone. */
+  @media (hover: hover) {
+    .cv-btn[data-tip]::after,
+    .cv-swatch[data-tip]::after {
+      content: attr(data-tip);
+      position: absolute;
+      bottom: calc(100% + 10px);
+      left: 50%;
+      translate: -50% 4px;
+      padding: 4px 8px;
+      border-radius: var(--radius-sm, 6px);
+      background: var(--foreground, #1c1c24);
+      color: var(--background, #fff);
+      font-size: 12px;
+      line-height: 1.2;
+      white-space: pre;
+      pointer-events: none;
+      opacity: 0;
+      z-index: 5;
+      transition:
+        opacity var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+        translate var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+    }
+
+    .cv-btn[data-tip]:hover::after,
+    .cv-btn[data-tip]:focus-visible::after,
+    .cv-swatch[data-tip]:hover::after,
+    .cv-swatch[data-tip]:focus-visible::after {
+      opacity: 1;
+      translate: -50% 0;
+      transition-delay: 350ms;
+    }
+
+    /* On the rail the label opens to the right. */
+    .cv-rail .cv-btn[data-tip]::after {
+      top: 50%;
+      bottom: auto;
+      left: calc(100% + 10px);
+      translate: -4px -50%;
+    }
+
+    .cv-rail .cv-btn[data-tip]:hover::after,
+    .cv-rail .cv-btn[data-tip]:focus-visible::after {
+      translate: 0 -50%;
+    }
+
+    .cv-btn:active::after,
+    .cv-btn:disabled::after,
+    .cv-btn[aria-expanded="true"]::after,
+    .cv-btn[data-state="open"]::after {
+      opacity: 0 !important;
+    }
   }
 
-  .cv-btn:active:not(:disabled) {
-    scale: 1;
-  }
-}
+  @media (prefers-reduced-motion: reduce) {
+    .cv-btn,
+    .cv-swatch::before,
+    .cv-btn[data-tip]::after {
+      transition: none;
+    }
 
-/* On a bar docked to the right edge the label opens to the left. */
-@media (hover: hover) {
-  .cv-side .cv-btn[data-tip]::after,
-  .cv-side .cv-swatch[data-tip]::after {
-    top: 50%;
-    bottom: auto;
-    left: auto;
-    right: calc(100% + 10px);
-    translate: 4px -50%;
+    .cv-btn:active:not(:disabled) {
+      scale: 1;
+    }
   }
 
-  .cv-side .cv-btn[data-tip]:hover::after,
-  .cv-side .cv-btn[data-tip]:focus-visible::after,
-  .cv-side .cv-swatch[data-tip]:hover::after,
-  .cv-side .cv-swatch[data-tip]:focus-visible::after {
-    translate: 0 -50%;
+  /* On a bar docked to the right edge the label opens to the left. */
+  @media (hover: hover) {
+    .cv-side .cv-btn[data-tip]::after,
+    .cv-side .cv-swatch[data-tip]::after {
+      top: 50%;
+      bottom: auto;
+      left: auto;
+      right: calc(100% + 10px);
+      translate: 4px -50%;
+    }
+
+    .cv-side .cv-btn[data-tip]:hover::after,
+    .cv-side .cv-btn[data-tip]:focus-visible::after,
+    .cv-side .cv-swatch[data-tip]:hover::after,
+    .cv-side .cv-swatch[data-tip]:focus-visible::after {
+      translate: 0 -50%;
+    }
   }
 }
 
@@ -316,6 +273,7 @@
   inherits: false;
   initial-value: 0px;
 }
+
 @property --cv-fade-end {
   syntax: "<length>";
   inherits: false;
@@ -332,6 +290,7 @@
     --cv-fade-start: 28px;
   }
 }
+
 @keyframes cv-fade-end {
   0%,
   96% {
@@ -342,6 +301,68 @@
   }
 }
 
+/* xyflow's stylesheet is unlayered and beats every layer, so rules on its parts stay unlayered below. */
+
+.svelte-flow .svelte-flow__panel.cv-dock {
+  margin: var(--cv-edge);
+  /* The panel's box is wider than its bars, so only the bars take the pointer; the rest is canvas. */
+  pointer-events: none;
+}
+
+/* xyflow's centring assumes a 15px margin. */
+.svelte-flow .svelte-flow__panel.cv-dock.left.center {
+  transform: translateY(-50%);
+}
+
+.svelte-flow .svelte-flow__panel.cv-dock.top.center,
+.svelte-flow .svelte-flow__panel.cv-dock.bottom.center {
+  transform: translateX(-50%);
+}
+
+/* A phone has no room for a side rail: at 390px it covers the board xyflow just
+   fitted, so the dock moves to the bottom edge. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.cv-dock.left.center {
+    top: auto;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+/* xyflow's credit is #999 on a half-white wash, which turns grey on grey on a
+   dark board. It takes the chrome's surface and muted ink in both themes. */
+.svelte-flow .svelte-flow__attribution {
+  border-top-left-radius: var(--radius-sm, 4px);
+  background: var(--cv-surface);
+}
+
+/* On a phone the rail runs along the bottom edge, so the credit moves to the top
+   right, inset off the frame's rounded corner. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.svelte-flow__attribution {
+    top: 0;
+    bottom: auto;
+    margin: 6px 8px;
+    border-radius: var(--radius-sm, 4px);
+  }
+}
+
+.svelte-flow .svelte-flow__attribution a {
+  color: var(--cv-ink-muted);
+}
+
+/* Beside the selection: StylePanel writes the spot, and a phone keeps its own row above the pill. */
+@media (min-width: 640px) {
+  .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock.is-placed {
+    inset: auto;
+    left: var(--cv-style-x);
+    top: var(--cv-style-y);
+    margin: 0;
+    transform: none;
+  }
+}
+
 /* Narrow screens: the style panel docks above the pill as a scrolling row, so it never covers the canvas. */
 @media (max-width: 639px) {
   .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock {

package/src/canvas/ui/tools.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vite-plus/test";
+import { penNodeName } from "../pen/node-name.svelte.js";
+import { resolveToolKey } from "./tools.js";
+
+function keyOn(target: HTMLElement, key: string, init: KeyboardEventInit = {}) {
+  let seen: KeyboardEvent | null = null;
+  target.addEventListener("keydown", (e) => (seen = e), { once: true });
+  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, ...init }));
+  if (!seen) throw new Error("no event");
+  return seen;
+}
+
+describe("resolveToolKey", () => {
+  const pane = document.createElement("div");
+  const field = document.createElement("textarea");
+
+  it("picks the tool the tooltip letter names", () => {
+    expect(resolveToolKey(keyOn(pane, "p"))).toBe("pen");
+    expect(resolveToolKey(keyOn(pane, "V"))).toBe("select");
+    expect(resolveToolKey(keyOn(pane, "r"))).toBe("rectangle");
+  });
+
+  it("leaves letters alone while typing, and chords to their own shortcuts", () => {
+    expect(resolveToolKey(keyOn(field, "p"))).toBeNull();
+    expect(resolveToolKey(keyOn(pane, "v", { metaKey: true }))).toBeNull();
+    expect(resolveToolKey(keyOn(pane, "L", { shiftKey: true }))).toBeNull();
+    expect(resolveToolKey(keyOn(pane, "q"))).toBeNull();
+  });
+});
+
+describe("penNodeName", () => {
+  it("names a node by its words, and by its kind when it has none", () => {
+    expect(penNodeName("text", { text: "  Draw on me " })).toBe("Draw on me");
+    expect(penNodeName("text", { text: "" })).toBe("Empty text");
+    expect(penNodeName("shape", { shape: "ellipse", label: "Ship" })).toBe("Ellipse: Ship");
+    expect(penNodeName("shape", { shape: "diamond", label: "" })).toBe("Diamond");
+    expect(penNodeName("stroke", { tool: "highlighter" })).toBe("Highlighter stroke");
+  });
+});

package/src/canvas/ui/tools.ts

@@ -1,6 +1,7 @@
 // The tool bar's tools, their keys and the shortcut list the help panel renders.
 // Pure data and two lookups, so the keyboard, the bar and the panel can't disagree.
 
+import { isEditingTarget } from "../editor/keymap.js";
 import { PEN_DEFAULTS, type PenTool, type ShapeKind } from "../pen/types.js";
 
 export type CanvasTool = "select" | "hand" | "connect" | "frame" | PenTool;
@@ -32,6 +33,13 @@ export function toolForKey(key: string): CanvasTool | null {
   return TOOL_BY_KEY.get(key.toLowerCase()) ?? null;
 }
 
+/** The tool a key press picks: the tooltip's bare letter, never with a modifier or while a field has focus. */
+export function resolveToolKey(event: KeyboardEvent): CanvasTool | null {
+  if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return null;
+  if (isEditingTarget(event.target)) return null;
+  return toolForKey(event.key);
+}
+
 export function keyForTool(tool: CanvasTool): string {
   return TOOLS.find((entry) => entry.id === tool)?.key ?? "";
 }