@weasel-js/labkit 1.4.3 → 1.4.4

package/src/annotations/frac.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { fracContains, fracIntersects, fracToWorld, roundFrac, worldToFrac } from './frac';
+import { fracContains, fracEncloses, fracToWorld, roundFrac, worldToFrac } from './frac';
 import type { FracRect } from './types';
 
 const CONTENT = { w: 256, h: 170 };
@@ -51,9 +51,9 @@ describe('fraction hit geometry', () => {
     expect(fracContains(box, { x: 0.18, y: 0.3 }, 0.05)).toBe(true);
   });
 
-  it('intersects only a box that wholly contains it', () => {
-    expect(fracIntersects({ x: 0, y: 0, w: 1, h: 1 }, box)).toBe(true);
+  it('encloses only a box that lies wholly inside', () => {
+    expect(fracEncloses({ x: 0, y: 0, w: 1, h: 1 }, box)).toBe(true);
     // Overlapping is not containing: a marquee takes what it encloses.
-    expect(fracIntersects({ x: 0.4, y: 0.4, w: 0.4, h: 0.4 }, box)).toBe(false);
+    expect(fracEncloses({ x: 0.4, y: 0.4, w: 0.4, h: 0.4 }, box)).toBe(false);
   });
 });

package/src/annotations/frac.ts

@@ -55,8 +55,9 @@ export function fracContains(box: FracRect, pt: FracPoint, tol = 0): boolean {
 }
 
 /** Whether `outer` wholly encloses `inner`. A marquee takes what it encloses,
- *  not what it grazes — brushing selection is a different gesture. */
-export function fracIntersects(outer: FracRect, inner: FracRect): boolean {
+ *  not what it grazes — brushing selection is a different gesture, and this
+ *  answers false for two rects that merely overlap. */
+export function fracEncloses(outer: FracRect, inner: FracRect): boolean {
   return (
     inner.x >= outer.x &&
     inner.y >= outer.y &&

package/src/annotations/index.ts

@@ -4,7 +4,7 @@ export type { MarkDrawOptions } from './drawOne';
 export { createMarkDrawOne, resolveMarkStyle } from './drawOne';
 export { ExportMenu } from './ExportMenu';
 export type { WorldRect } from './frac';
-export { fracContains, fracIntersects, fracToWorld, roundFrac, worldToFrac } from './frac';
+export { fracContains, fracEncloses, fracToWorld, roundFrac, worldToFrac } from './frac';
 export type { HistoryScene } from './history';
 export { MarkHistory } from './history';
 export type { MarkListProps } from './MarkList';

package/src/annotations/store.ts

@@ -7,7 +7,7 @@ import {
 } from '@weasel-js/core';
 import { captureTarget } from './capture';
 import type { WorldRect } from './frac';
-import { fracContains, fracIntersects, fracToWorld, roundFrac, worldToFrac } from './frac';
+import { fracContains, fracEncloses, fracToWorld, roundFrac, worldToFrac } from './frac';
 import { MarkHistory } from './history';
 import { isStale as isStaleAgainst, seenFrom } from './staleness';
 import type {
@@ -197,7 +197,7 @@ export function createAnnotationStore(opts: AnnotationStoreOptions): Annotations
     },
 
     within(target, box: FracRect) {
-      return marksOn(target).filter((a) => fracIntersects(box, a.frac));
+      return marksOn(target).filter((a) => fracEncloses(box, a.frac));
     },
 
     isStale(a, config) {

package/src/annotations/svgNodes.ts

@@ -1,5 +1,4 @@
 import type { DrawCommand, FillStyle, Stroke } from '@weasel-js/core';
-import { resolveStrokeWidth } from '@weasel-js/core';
 import type { SvgNode, SvgPaint, SvgStroke } from '@weasel-js/svg';
 import { type MarkStyle, markCommands, type PaintableMark } from './paint';
 
@@ -23,7 +22,7 @@ function toSvgPaint(paint: FillStyle | undefined): SvgPaint {
 function toSvgStroke(stroke: Stroke): SvgStroke {
   return {
     paint: toSvgPaint(stroke.paint),
-    width: resolveStrokeWidth(stroke.width ?? 1, 1),
+    width: stroke.width ?? 1,
     ...(stroke.cap ? { cap: stroke.cap } : {}),
     ...(stroke.join ? { join: stroke.join } : {}),
     ...(stroke.dash ? { dash: [...stroke.dash] } : {}),

package/src/index.ts

@@ -76,7 +76,7 @@ export {
   createAnnotationScene,
   createAnnotationStore,
   fracContains,
-  fracIntersects,
+  fracEncloses,
   fracToWorld,
   isStale,
   roundFrac,

package/src/lab/LabShell.tsx

@@ -2,6 +2,8 @@ import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
 import type { ReactNode } from 'react';
 import type { LabMode } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
+import type { LabPage } from './LabSwitcher';
+import { LabSwitcher } from './LabSwitcher';
 import { useResolvedMode } from './useSystemMode';
 
 /** Props for `<LabShell>`. */
@@ -14,12 +16,19 @@ export interface LabShellProps {
   footer?: ReactNode;
   /** Color mode. "auto" (default) follows prefers-color-scheme. */
   mode?: LabMode;
+  /** The project's other labs. Given two or more, the title becomes the way
+   *  to reach them; given none, it stays a plain heading. */
+  pages?: readonly LabPage[];
+  /** The path the switcher reads to mark the open page. Defaults to the
+   *  current location. */
+  path?: string;
 }
 
 /** Page frame for a lab: a titled header, a body, and an optional footer,
  *  themed for the resolved color mode. Presentational only — use `<Lab>` when
  *  the trial runtime is wanted too. */
-export function LabShell({ title, children, header, footer, mode = 'auto' }: LabShellProps) {
+export function LabShell({ title, children, header, footer, mode = 'auto',
+                          pages, path }: LabShellProps) {
   const resolved = useResolvedMode(mode);
   const outer = useThemeOptional();
 
@@ -28,7 +37,10 @@ export function LabShell({ title, children, header, footer, mode = 'auto' }: Lab
     // carries the element defaults a lab's bare markup is styled by.
     <div className="lk-root lk-shell" data-wzl-portal-host="">
       <header className="lk-shell-header">
-        <h1 className="lk-shell-title">{title}</h1>
+        {pages && pages.length > 0
+          ? <LabSwitcher title={title} pages={pages} path={path}
+                         className="lk-shell-title" />
+          : <h1 className="lk-shell-title">{title}</h1>}
         {header && <div className="lk-shell-header-actions">{header}</div>}
       </header>
       <main className="lk-shell-body">{children}</main>

package/src/lab/LabSwitcher.less

@@ -0,0 +1,85 @@
+.lk-switcher {
+  position: relative;
+  display: inline-block;
+}
+
+.lk-switcher-title {
+  margin: 0;
+  font-size: var(--wzl-font-size-xl);
+  line-height: var(--wzl-line-height-tight, 1.2);
+}
+
+.lk-switcher-trigger {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--wzl-space-xs);
+  // The title IS the control, so it keeps the title's type and gives up every
+  // other button affordance until it is pointed at.
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover { color: var(--wzl-text-accent, var(--wzl-text)); }
+
+  &:focus-visible {
+    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline-offset: 2px;
+    border-radius: var(--wzl-radius-sm, 2px);
+  }
+}
+
+.lk-switcher-caret {
+  // Sized in em so it tracks the title rather than needing a second rule per
+  // heading size.
+  width: 0.36em;
+  height: 0.36em;
+  border-right: 0.09em solid currentColor;
+  border-bottom: 0.09em solid currentColor;
+  transform: translateY(-0.18em) rotate(45deg);
+  opacity: 0.6;
+}
+
+.lk-switcher-trigger[aria-expanded='true'] .lk-switcher-caret {
+  transform: translateY(0.06em) rotate(-135deg);
+}
+
+.lk-switcher-menu {
+  position: absolute;
+  top: calc(100% + var(--wzl-space-xs));
+  left: 0;
+  z-index: var(--wzl-z-popover, 60);
+  min-width: max(100%, 11rem);
+  display: flex;
+  flex-direction: column;
+  padding: var(--wzl-space-xs);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-md, 6px);
+  box-shadow: var(--wzl-shadow-md, 0 6px 20px rgb(0 0 0 / 35%));
+}
+
+.lk-switcher-item {
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+  border-radius: var(--wzl-radius-sm, 3px);
+  color: var(--wzl-text);
+  font-size: var(--wzl-font-size-md);
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover { background: var(--wzl-surface-hover, var(--wzl-surface)); }
+
+  &:focus-visible {
+    outline: 2px solid var(--wzl-focus-ring, currentColor);
+    outline-offset: -2px;
+  }
+}
+
+// The open page stays in the list rather than being filtered out: a menu that
+// drops its current entry shifts every other one as you move between pages.
+.lk-switcher-item[aria-current='page'] {
+  color: var(--wzl-text-strong, var(--wzl-text));
+  font-weight: var(--wzl-font-weight-semibold, 600);
+}

package/src/lab/LabSwitcher.test.tsx

@@ -0,0 +1,96 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { currentPage, LabSwitcher } from './LabSwitcher';
+import { LabShell } from './LabShell';
+
+const PAGES = [
+  { href: '/corpus', label: 'Wall' },
+  { href: '/stats', label: 'Dashboard' },
+  { href: '/ingest', label: 'Ingestion' },
+];
+
+const open = () => fireEvent.click(screen.getByRole('button', { name: /corpus stats/ }));
+
+describe('currentPage', () => {
+  it('matches a bare path', () => {
+    expect(currentPage('/stats', PAGES)).toBe(1);
+  });
+
+  it('survives a query string, a trailing slash and a leftover extension', () => {
+    // A dev server maps `/stats` to `stats.html` and serves both spellings, so
+    // an old bookmark must still resolve to the same page.
+    for (const path of ['/stats?kind=base', '/stats/', '/stats.html',
+                        '/lab/stats.html#top']) {
+      expect(currentPage(path, PAGES)).toBe(1);
+    }
+  });
+
+  it('reports -1 for a page that is not one of them', () => {
+    expect(currentPage('/bench', PAGES)).toBe(-1);
+  });
+});
+
+describe('<LabSwitcher>', () => {
+  it('shows the title and nothing else until it is opened', () => {
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    expect(screen.getByRole('button', { name: /corpus stats/ })).toHaveAttribute(
+      'aria-expanded', 'false');
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('opens a menu of every lab, the open one included', () => {
+    // Filtering the current page out shifts every other entry as you move
+    // between pages, so it stays and is marked instead.
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    open();
+    const items = screen.getAllByRole('menuitem');
+    expect(items.map((i) => i.textContent)).toEqual(['Wall', 'Dashboard', 'Ingestion']);
+    expect(items[1]).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('offers real links, so cmd-click and the back button keep working', () => {
+    // These are separate documents. A <select> would fire a change event and
+    // get none of the three for free.
+    render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
+    open();
+    expect(screen.getByRole('menuitem', { name: 'Wall' }).tagName).toBe('A');
+    expect(screen.getByRole('menuitem', { name: 'Wall' })).toHaveAttribute(
+      'href', '/corpus');
+  });
+
+  it('closes on Escape and on a press outside it', () => {
+    render(
+      <div>
+        <LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />
+        <button type="button">elsewhere</button>
+      </div>);
+    open();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('menu')).toBeNull();
+
+    open();
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'elsewhere' }));
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('stays a plain heading when there is nowhere to switch to', () => {
+    // A disclosure arrow promising a menu of the page you are already on is
+    // worse than no control.
+    render(<LabSwitcher title="corpus stats" pages={[PAGES[1]!]} path="/stats" />);
+    expect(screen.getByRole('heading', { name: 'corpus stats' })).toBeInTheDocument();
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});
+
+describe('<LabShell> with pages', () => {
+  it('turns its title into the switcher', () => {
+    render(<LabShell title="corpus stats" pages={PAGES} path="/stats">body</LabShell>);
+    expect(screen.getByRole('button', { name: /corpus stats/ })).toBeInTheDocument();
+  });
+
+  it('leaves the title alone when no pages are given', () => {
+    render(<LabShell title="corpus stats">body</LabShell>);
+    expect(screen.getByRole('heading', { name: 'corpus stats' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /corpus stats/ })).toBeNull();
+  });
+});

package/src/lab/LabSwitcher.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+
+/** One page in a project's set of labs. */
+export interface LabPage {
+  /** The page's own URL, and how the switcher knows which page is open. */
+  href: string;
+  label: string;
+}
+
+/** Props for `<LabSwitcher>`. */
+export interface LabSwitcherProps {
+  /** The open page's title, shown as the control's own label. */
+  title: string;
+  pages: readonly LabPage[];
+  /** Defaults to the current location. Pass it in tests, or to render a
+   *  switcher for a page other than the one being viewed. */
+  path?: string;
+  className?: string;
+}
+
+/** Which of `pages` a path is on, or -1.
+ *
+ *  Matched on the end of the path so a query string, a trailing slash or a
+ *  leftover `.html` cannot lose it: a project whose dev server maps `/stats`
+ *  to `stats.html` serves both spellings, and a bookmark from before the URLs
+ *  lost their extension still resolves to the same page. */
+export function currentPage(path: string, pages: readonly LabPage[]): number {
+  const here = path.split('?')[0]!.split('#')[0]!
+    .replace(/\/$/, '').replace(/\.html$/, '');
+  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, '')));
+}
+
+/** A project's lab title, doubling as the way to reach its other labs.
+ *
+ *  The menu holds real anchors, not a `<select>` and not buttons. These are
+ *  separate documents, so an `href` is what gets middle-click, cmd-click and
+ *  the back button for free; a select fires a change event and can do none of
+ *  the three. The trigger is a button because it opens something rather than
+ *  going anywhere.
+ *
+ *  Pages accumulate -- a project grows a wall, a dashboard, an ingest page, a
+ *  bench -- and a tab strip is the layout that stops working first. */
+export function LabSwitcher({ title, pages, path, className }: LabSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const menuId = useId();
+  const here = currentPage(path ?? (typeof window === 'undefined'
+    ? '' : window.location.pathname), pages);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close();
+        root.current?.querySelector('button')?.focus();
+      }
+    };
+    // Pointer, not click: a press that starts outside should dismiss before
+    // whatever it lands on reacts, the way every other menu on the page does.
+    const onDown = (e: PointerEvent) => {
+      if (!root.current?.contains(e.target as Node)) close();
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onDown);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onDown);
+    };
+  }, [open, close]);
+
+  // One lab is not a set to choose from, and a disclosure arrow promising a
+  // menu of itself is worse than no control.
+  if (pages.length < 2) {
+    return <h1 className={`lk-switcher-title${className ? ` ${className}` : ''}`}>{title}</h1>;
+  }
+
+  return (
+    <div className={`lk-switcher${className ? ` ${className}` : ''}`} ref={root}>
+      <h1 className="lk-switcher-title">
+        <button
+          type="button"
+          className="lk-switcher-trigger"
+          aria-expanded={open}
+          aria-haspopup="menu"
+          aria-controls={open ? menuId : undefined}
+          onClick={() => setOpen((was) => !was)}
+        >
+          {title}
+          <span className="lk-switcher-caret" aria-hidden="true" />
+        </button>
+      </h1>
+      {open && (
+        <div className="lk-switcher-menu" id={menuId} role="menu">
+          {pages.map((page, i) => (
+            <a
+              key={page.href}
+              href={page.href}
+              role="menuitem"
+              className="lk-switcher-item"
+              aria-current={i === here ? 'page' : undefined}
+              onClick={close}
+            >
+              {page.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/lab/index.ts

@@ -6,5 +6,7 @@ export type { LabPaletteProps } from './LabPalette';
 export { LabPalette } from './LabPalette';
 export type { LabShellProps } from './LabShell';
 export { LabShell } from './LabShell';
+export type { LabPage, LabSwitcherProps } from './LabSwitcher';
+export { currentPage, LabSwitcher } from './LabSwitcher';
 export type { PanelDescriptor, TrialLayout, WorkspaceProps } from './Workspace';
 export { Workspace } from './Workspace';

package/src/state/helpers.test.ts

@@ -4,6 +4,7 @@ import {
   deserializeTrials,
   emptyUndoStack,
   encodeUrlHash,
+  newId,
   labStorageKey,
   serializeTrials,
 } from './helpers';
@@ -114,4 +115,23 @@ describe('deserializeTrials', () => {
   it('returns an empty list when given something that is not an array', () => {
     expect(deserializeTrials(undefined as never, {})).toEqual([]);
   });
+
+  describe('newId', () => {
+    it('mints distinct ids', () => {
+      expect(newId()).not.toBe(newId());
+    });
+
+    it('falls back where crypto.randomUUID is absent', () => {
+      // What a lab reached by LAN IP gets: not a secure context, so the
+      // function is not there. It used to throw on the first render and show a
+      // blank page.
+      const real = globalThis.crypto;
+      Object.defineProperty(globalThis, 'crypto', { value: {}, configurable: true });
+      try {
+        expect(newId()).not.toBe(newId());
+      } finally {
+        Object.defineProperty(globalThis, 'crypto', { value: real, configurable: true });
+      }
+    });
+  });
 });

package/src/state/helpers.ts

@@ -25,6 +25,22 @@ export function decodeUrlHash(hash: string): string | null {
   }
 }
 
+/**
+ * An id for a trial or a snapshot.
+ *
+ * `crypto.randomUUID` exists only in a secure context, and a LAN address is
+ * not one — so a lab opened on a phone or a tablet by IP throws on its first
+ * render and shows a blank page with nothing in reach to say why. The counter
+ * is per page load, which is all these ids have to survive: they name records
+ * inside one session's store, and a saved snapshot carries its own name.
+ */
+let idCounter = 0;
+export function newId(): string {
+  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+  if (c && typeof c.randomUUID === 'function') return c.randomUUID();
+  return `lk-${Date.now().toString(36)}-${idCounter++}`;
+}
+
 /** A fresh, empty undo history. */
 export function emptyUndoStack(): UndoStack {
   return { past: [], future: [] };

package/src/state/store.ts

@@ -11,7 +11,7 @@ import {
   readLegacyDocument,
   runMigrations,
 } from './document';
-import { deserializeTrials, emptyUndoStack, serializeTrials } from './helpers';
+import { deserializeTrials, emptyUndoStack, newId, serializeTrials } from './helpers';
 import type {
   CreateLabStoreOptions,
   LabDocument,
@@ -221,7 +221,7 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       const lastAt = get().savedSnapshots.reduce((m, sn) => (sn.savedAt > m ? sn.savedAt : m), 0);
       const savedAt = Math.max(Date.now(), lastAt + 1);
       const snapshot: SavedSnapshot = {
-        id: crypto.randomUUID(),
+        id: newId(),
         name,
         trialId,
         instrumentName: trial.instrumentName,

package/src/styles.less

@@ -2,6 +2,7 @@
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';
+@import './lab/LabSwitcher.less';
 @import './primitives/Toolbar.less';
 @import './primitives/Sidebar.less';
 @import './primitives/ZoomControl.less';

package/src/theme/base.less

@@ -79,13 +79,13 @@
     &::-webkit-slider-runnable-track {
       height: var(--wzl-slider-track-h);
       border-radius: var(--wzl-radius-sm);
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent);
     }
 
     &::-moz-range-track {
       height: var(--wzl-slider-track-h);
       border-radius: var(--wzl-radius-sm);
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-mix), transparent);
     }
 
     &::-webkit-slider-thumb {
@@ -95,7 +95,7 @@
       height: var(--wzl-slider-thumb-size);
       border: none;
       border-radius: 50%;
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);
       margin-top: calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2);
     }
 
@@ -104,7 +104,7 @@
       height: var(--wzl-slider-thumb-size);
       border: none;
       border-radius: 50%;
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);
+      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);
     }
   }
 }

package/src/trial/trialOps.ts

@@ -1,6 +1,7 @@
 import { fillConfigDefaults } from '../config/path';
 import type { Instrument, InstrumentList } from '../instrument/types';
 import type { TrialRecord } from '../state/types';
+import { newId } from '../state/helpers';
 
 const DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } } as const;
 
@@ -47,7 +48,7 @@ export function addTrial(
   const config = seedConfig(instrument.defaultConfig(), options.config);
   const state = instrument.initialState(config);
   const record: TrialRecord = {
-    id: crypto.randomUUID(),
+    id: newId(),
     instrumentName,
     config,
     state,
@@ -66,7 +67,7 @@ export function cloneTrial(trials: TrialRecord[], id: string): TrialRecord[] {
   if (!source) return trials;
   const clone: TrialRecord = {
     ...source,
-    id: crypto.randomUUID(),
+    id: newId(),
     config: structuredClone(source.config),
     state: structuredClone(source.state),
     view: structuredClone(source.view),