@weasel-js/labkit 1.6.1 → 1.7.0

package/src/theme/base.less

@@ -1,6 +1,10 @@
 // The Oswald and Inter faces come from @weasel-js/theme/faces.css, imported at
 // the top of styles.less.
 
+// weasel-ui's native range skin, read for `:extend` below and emitted only
+// through it.
+@import (reference, less) '../../../ui/src/components/range.module.css';
+
 // Resets and global element defaults.
 .lk-root {
   font-family: var(--wzl-font-ui);
@@ -21,7 +25,10 @@
 // Deliberate overrides of a weasel-ui component go the other way — see the
 // `.lk-root` prefix convention below.
 :where(.lk-root) {
-  :where(button) {
+  // Only a button with no class or a labkit one. Specificity cannot keep this
+  // off a weasel-ui button: whatever its module leaves unset — a height, a
+  // backdrop blur — the default fills in.
+  :where(button:not([class]), button[class^='lk-'], button[class*=' lk-']) {
     font: inherit;
     color: inherit;
     background: var(--wzl-surface-raised);
@@ -33,63 +40,32 @@
     backdrop-filter: blur(var(--wzl-glass-blur));
     -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
 
-    &:hover {
+    &:where(:hover) {
       border-color: var(--wzl-accent);
       color: var(--wzl-accent-fg);
     }
 
-    &:focus-visible {
+    &:where(:focus-visible) {
       outline: 2px solid var(--wzl-focus-ring);
       outline-offset: 1px;
     }
 
-    &:disabled {
+    &:where(:disabled) {
       color: var(--wzl-fg-subtle);
       cursor: not-allowed;
     }
   }
 
-  // Mirrors packages/ui/src/components/range.module.css so a consumer's bare
-  // range matches the kit's. A weasel-ui component's own module class outranks
-  // this, which is what keeps InlineRange's gradient track intact.
-  :where(input[type="range"]) {
-    appearance: none;
-    -webkit-appearance: none;
-    height: 12px;
-    background: transparent;
-    cursor: pointer;
-
-    &::-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-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-mix), transparent);
-    }
-
-    &::-webkit-slider-thumb {
-      appearance: none;
-      -webkit-appearance: none;
-      width: var(--wzl-slider-thumb-size);
-      height: var(--wzl-slider-thumb-size);
-      border: none;
-      border-radius: 50%;
-      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);
-    }
-
-    &::-moz-range-thumb {
-      width: var(--wzl-slider-thumb-size);
-      height: var(--wzl-slider-thumb-size);
-      border: none;
-      border-radius: 50%;
-      background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix), transparent);
-    }
+  // The browser sets these in its own `monospace`, which no font token reaches.
+  :where(code, kbd, samp, pre) {
+    font-family: var(--wzl-font-mono);
   }
+
+  // A consumer's bare range wears weasel-ui's range skin, extended from its one
+  // definition rather than copied. The skin keeps its pseudo-classes inside
+  // :where(), so nothing this emits outranks a single class and a weasel-ui
+  // component's own module class still wins.
+  :where(input[type="range"]):extend(.range all) {}
 }
 
 // The `.lk-root` prefix convention: a labkit class handed to a weasel-ui
@@ -151,9 +127,7 @@
 }
 
 // Headline / display text uses Oswald light at tighter line-height.
-.lk-lab h1,
-.lk-lab h2,
-.lk-lab h3 {
+:where(.lk-lab) :where(h1, h2, h3) {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
   letter-spacing: 0.01em;

package/src/theme/interstellar.test.ts

@@ -18,7 +18,7 @@ describe('interstellarTheme', () => {
 
     // Values carried over verbatim from the retired Less.
     expect(dark['--wzl-surface']).toBe('#0a0a14');
-    expect(dark['--wzl-accent']).toBe('#b08adb');
+    expect(dark['--wzl-accent']).toBe('#4f46e5');
     // Light mode is weasel's own: interstellar restyles the dark only.
     const weasel = resolveTheme(weaselTheme, { mode: 'light' });
     expect(light['--wzl-surface']).toBe(weasel['--wzl-surface']);

package/src/theme/interstellar.theme.json

@@ -81,21 +81,28 @@
     "accent": {
       "by": "mode",
       "dark": {
-        "value": "#b08adb",
+        "value": "#4f46e5",
         "type": "color"
       }
     },
     "accent-hover": {
       "by": "mode",
       "dark": {
-        "value": "#c6a3ee",
+        "value": "#6d5dfc",
+        "type": "color"
+      }
+    },
+    "accent-strong": {
+      "by": "mode",
+      "dark": {
+        "value": "#7474fe",
         "type": "color"
       }
     },
     "focus-ring": {
       "by": "mode",
       "dark": {
-        "value": "rgba(176, 138, 219, 0.45)",
+        "value": "rgba(116, 116, 254, 0.5)",
         "type": "color"
       }
     },

package/src/trial/Trial.less

@@ -109,19 +109,6 @@
   }
 }
 
-.lk-toolbar__zoom-label {
-  font-size: var(--wzl-font-size-sm);
-  color: var(--wzl-fg-muted);
-  padding: 0 var(--wzl-space-sm);
-}
-
-.lk-sidebar__placeholder {
-  padding: var(--wzl-space-sm);
-  color: var(--wzl-fg-muted);
-  font-size: var(--wzl-font-size-sm);
-}
-
-
 .lk-trial__titlebar {
   display: flex;
   align-items: center;

package/src/trial/Trial.tsx

@@ -6,9 +6,10 @@ import { AnnotationTargets } from '../annotations/AnnotationTargets';
 import { AnnotationPreloadContext } from '../annotations/preload';
 import { annotationsFromJSON } from '../annotations/store';
 import type { AnnotationStorage, AnnotationTargetInfo } from '../annotations/types';
-import { CameraScopeContext } from '../canvas/CameraInput';
+import type { CameraView } from '../canvas/CameraInput';
 import { CameraWheelContext, type CameraWheelSlot } from '../canvas/CameraWheelContext';
 import { CanvasStack } from '../canvas/CanvasStack';
+import { CameraPublishContext, CameraRegistryContext } from '../canvas/cameraRegistry';
 import { fitStage, Stage } from '../canvas/Stage';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
 import { applyCamera, type ViewportSize } from '../canvas/worldSpec';
@@ -136,6 +137,12 @@ function TrialRuntime({
   suppress,
 }: TrialRuntimeProps) {
   const wheelSlot = useRef<CameraWheelSlot['current']>(null);
+  const cameras = useContext(CameraRegistryContext);
+  const trialId = record.id;
+  const publishCamera = useMemo(
+    () => (cameras ? (camera: CameraView) => cameras.register(trialId, camera) : null),
+    [cameras, trialId],
+  );
   const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const loupeHostRef = useRef<HTMLDivElement | null>(null);
@@ -593,14 +600,13 @@ function TrialRuntime({
     />
   ) : null;
 
-  // One input scope for the trial's body: the camera, the loupe and an
-  // overview share its actions, its deps and its pointer. Isolated, because an
-  // actions registry holds one dispatcher and the trial beside this one has
-  // its own.
+  // The trial's root registries, isolated from the trial beside it. Each
+  // camera inside mounts an input scope under them; chrome here reaches the
+  // one last used. The pointer store is the trial's, shared by all of them.
   const scopedBody = (
     <WeaselProvider isolate>
       <PointerContextProvider store={pointer}>
-        <CameraScopeContext.Provider value={true}>{body}</CameraScopeContext.Provider>
+        <CameraPublishContext.Provider value={publishCamera}>{body}</CameraPublishContext.Provider>
       </PointerContextProvider>
     </WeaselProvider>
   );

package/src/trial/TrialChrome.tsx

@@ -1,5 +1,13 @@
-import { type KeyboardEvent, type ReactNode, useContext, useMemo } from 'react';
+import {
+  type KeyboardEvent,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
 import { useStore } from 'zustand/react';
+import { CameraRegistryContext } from '../canvas/cameraRegistry';
+import { zoomCameraTo } from '../canvas/cameraZoom';
 import { builtinContributions } from '../chrome/builtins';
 import { mergeContributions, suppressContributions } from '../chrome/merge';
 import { PaletteRegion } from '../chrome/regions/PaletteRegion';
@@ -68,6 +76,7 @@ const NO_OP = (): void => {};
 /** One frozen empty map, so a trial that has folded nothing keeps a stable
  *  context identity across renders. */
 const NO_SECTIONS: Readonly<Record<string, boolean>> = Object.freeze({});
+const noSubscribe = (): (() => void) => NO_OP;
 
 /** The frame around a running instrument. Builds one chrome context, assembles
  *  the contributions the instrument, the runtime and the lab declare, and hands
@@ -123,10 +132,18 @@ export function TrialChrome({
   const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
 
+  // The trial's own camera, where it has one: zoom goes through it, about the
+  // middle of the view and inside the instrument's range, as the lab's does.
+  const cameras = useContext(CameraRegistryContext);
+  const camera = useSyncExternalStore(
+    cameras?.subscribe ?? noSubscribe,
+    () => cameras?.get(trialId) ?? null,
+  );
+
   const ctx = useMemo<TrialChromeContext>(() => {
     const setZoom = (z: number): void => {
-      if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z));
+      if (camera) zoomCameraTo(camera, z);
+      else if (view2d) updateTrialView(trialId, withZoom(view2d, z));
     };
     return {
       trialId,
@@ -203,6 +220,7 @@ export function TrialChrome({
     setTrialTitle,
     setTrialSectionCollapsed,
     collapsedSections,
+    camera,
   ]);
 
   const contributions = useMemo(

package/dist/_dts/PrefsRow.d-DFpPIeIC.d.ts

@@ -1,39 +0,0 @@
-import { Stance } from '@weasel-js/theme';
-import { ReactNode } from 'react';
-import { ToolPrefLeaf } from '@weasel-js/core';
-
-/**
- * What a surface holds, and which of its peers it is. Every surface that takes
- * these takes both, and the theme decides how each looks.
- */
-interface StanceProps {
-    /** The class of content the surface holds. Omitted, it draws as it always has. */
-    stance?: Stance;
-    /**
-     * Which of its peers this is: an index into the theme's tone list, wrapping,
-     * or a color given directly. Independent of `stance`, and allowed without one.
-     */
-    tone?: number | string;
-}
-
-/** What a {@link PrefRenderer} is given for the leaf it is rendering. */
-interface PrefRenderContext {
-    /** Dotted path of the leaf within the schema root. */
-    path: string;
-    /** The schema node. App renderers narrow this to their own kind shape. */
-    pref: ToolPrefLeaf;
-    /** Current value — `values` at `path`, falling back to `pref.default`. */
-    value: unknown;
-    setValue: (value: unknown) => void;
-    /** Whether this leaf is currently auto — not pinned, computed by the owner. */
-    auto: boolean;
-    /** Toggle this leaf's auto state. */
-    setAuto: (next: boolean) => void;
-}
-/**
- * Renders the control cell for one preference leaf. Returning `null`
- * collapses the row.
- */
-type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;
-
-export type { PrefRenderer as P, StanceProps as S, PrefRenderContext as a };