@weasel-js/labkit 1.5.2 → 1.6.0

package/src/theme/Interstellar.stories.tsx

@@ -2,12 +2,9 @@ import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { TokenName } from '@weasel-js/theme';
 import { useTheme } from '@weasel-js/theme/react';
 import {
-  CheckboxRow,
-  ColorRow,
+  PropertyField,
   PropertyList,
   PropertyPanel,
-  SliderRow,
-  TextRow,
 } from '@weasel-js/ui';
 import './Interstellar.stories.less';
 
@@ -148,7 +145,9 @@ function LivePanelPreview() {
       <h3 className="lk-theme-doc__heading">Live panel</h3>
       <PropertyPanel title="Sample">
         <PropertyList>
-          <SliderRow
+          <PropertyField
+            kind="number"
+            control="slider"
             label="Opacity"
             value={0.65}
             min={0}
@@ -157,10 +156,10 @@ function LivePanelPreview() {
             onChange={() => {}}
             format={(v) => v.toFixed(2)}
           />
-          <ColorRow label="Fill" value="#b08adb" onChange={() => {}} />
-          <ColorRow label="Stroke" value="#1a1428" onChange={() => {}} />
-          <TextRow label="Name" value="Untitled" onChange={() => {}} />
-          <CheckboxRow label="Visible" value={true} onChange={() => {}} />
+          <PropertyField kind="color" label="Fill" value="#b08adb" onChange={() => {}} />
+          <PropertyField kind="color" label="Stroke" value="#1a1428" onChange={() => {}} />
+          <PropertyField kind="string" label="Name" value="Untitled" onChange={() => {}} />
+          <PropertyField kind="boolean" label="Visible" value={true} onChange={() => {}} />
         </PropertyList>
       </PropertyPanel>
     </div>

package/src/theme/base.less

@@ -1,25 +1,8 @@
-// Self-hosted Oswald (variable font, wght axis 200–700) for the headline
-// typeface. Sourced from @weasel-js/theme; build:fonts copies it into dist/fonts.
-@font-face {
-  font-family: 'Oswald';
-  font-style: normal;
-  font-weight: 200 700;
-  font-display: swap;
-  // URL is resolved relative to the COMPILED stylesheet at dist/styles.css,
-  // so this points to dist/fonts/. Source-tree usage (less compilation
-  // happens before the file is moved) doesn't need to resolve the URL.
-  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
+// The Oswald and Inter faces come from @weasel-js/theme/faces.css, imported at
+// the top of styles.less.
 
 // Resets and global element defaults.
 .lk-root {
-  // labkit's own vocabulary over the theme's raw scale — named for the thing
-  // rather than the step, so "the workspace is too tight" has one place to go.
-  --lk-workspace-pad: var(--wzl-space-sm);
-
   font-family: var(--wzl-font-ui);
   font-size: var(--wzl-font-size);
   font-weight: var(--wzl-font-weight-light);
@@ -52,7 +35,7 @@
 
     &:hover {
       border-color: var(--wzl-accent);
-      color: var(--wzl-accent);
+      color: var(--wzl-accent-fg);
     }
 
     &:focus-visible {

package/src/theme/interstellar.test.ts

@@ -1,4 +1,4 @@
-import { resolveTheme, THEME_SOURCES, type ThemeDefinition } from '@weasel-js/theme';
+import { resolveTheme, THEME_SOURCES, type ThemeDefinition, weaselTheme } from '@weasel-js/theme';
 import { derive } from '@weasel-js/theme/engine';
 import { describe, expect, it } from 'vitest';
 import { interstellarTheme } from './interstellar';
@@ -19,8 +19,11 @@ describe('interstellarTheme', () => {
     // Values carried over verbatim from the retired Less.
     expect(dark['--wzl-surface']).toBe('#0a0a14');
     expect(dark['--wzl-accent']).toBe('#b08adb');
-    expect(light['--wzl-surface']).toBe('#fafaf7');
-    expect(light['--wzl-accent']).toBe('#a86f3c');
+    // 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']);
+    expect(light['--wzl-accent']).toBe(weasel['--wzl-accent']);
+    expect(light['--wzl-border']).toBe(weasel['--wzl-border']);
 
     // Inherited from weasel — interstellar overrides values, not the token set.
     expect(dark['--wzl-space-md']).toBe('12px');

package/src/theme/interstellar.theme.json

@@ -27,10 +27,6 @@
       "dark": {
         "value": "#0a0a14",
         "type": "color"
-      },
-      "light": {
-        "value": "#fafaf7",
-        "type": "color"
       }
     },
     "surface-raised": {
@@ -38,10 +34,6 @@
       "dark": {
         "value": "rgba(20, 20, 36, 0.55)",
         "type": "color"
-      },
-      "light": {
-        "value": "#ffffff",
-        "type": "color"
       }
     },
     "surface-sunken": {
@@ -49,10 +41,6 @@
       "dark": {
         "value": "#02020a",
         "type": "color"
-      },
-      "light": {
-        "value": "#f0ebe2",
-        "type": "color"
       }
     },
     "border": {
@@ -60,10 +48,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.14)",
         "type": "color"
-      },
-      "light": {
-        "value": "#c9bba5",
-        "type": "color"
       }
     },
     "line-subtle": {
@@ -71,10 +55,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.08)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(0, 0, 0, 0.08)",
-        "type": "color"
       }
     },
     "fg": {
@@ -82,10 +62,6 @@
       "dark": {
         "value": "#e8e8f0",
         "type": "color"
-      },
-      "light": {
-        "value": "#2a2018",
-        "type": "color"
       }
     },
     "fg-muted": {
@@ -93,10 +69,6 @@
       "dark": {
         "value": "#a8a8c0",
         "type": "color"
-      },
-      "light": {
-        "value": "#6b5c4a",
-        "type": "color"
       }
     },
     "fg-subtle": {
@@ -104,10 +76,6 @@
       "dark": {
         "value": "#5a5a78",
         "type": "color"
-      },
-      "light": {
-        "value": "#a89b85",
-        "type": "color"
       }
     },
     "accent": {
@@ -115,10 +83,6 @@
       "dark": {
         "value": "#b08adb",
         "type": "color"
-      },
-      "light": {
-        "value": "#a86f3c",
-        "type": "color"
       }
     },
     "accent-hover": {
@@ -126,10 +90,6 @@
       "dark": {
         "value": "#c6a3ee",
         "type": "color"
-      },
-      "light": {
-        "value": "#c2854f",
-        "type": "color"
       }
     },
     "focus-ring": {
@@ -137,10 +97,6 @@
       "dark": {
         "value": "rgba(176, 138, 219, 0.45)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(168, 111, 60, 0.35)",
-        "type": "color"
       }
     },
     "shadow": {
@@ -148,10 +104,6 @@
       "dark": {
         "value": "rgba(0, 0, 0, 0.7)",
         "type": "color"
-      },
-      "light": {
-        "value": "rgba(80, 60, 40, 0.18)",
-        "type": "color"
       }
     },
     "border-strong": {
@@ -159,10 +111,6 @@
       "dark": {
         "value": "rgba(255, 255, 255, 0.36)",
         "type": "color"
-      },
-      "light": {
-        "value": "#9e8b71",
-        "type": "color"
       }
     },
     "backdrop": {
@@ -170,10 +118,6 @@
       "dark": {
         "value": "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)",
         "type": "gradient"
-      },
-      "light": {
-        "value": "none",
-        "type": "gradient"
       }
     }
   }

package/src/theme/interstellar.ts

@@ -2,8 +2,8 @@ import { defineTheme, type Theme, type ThemeInput, weaselTheme } from '@weasel-j
 import definition from './interstellar.theme.json' with { type: 'json' };
 
 /**
- * labkit's theme: a cosmic dark and a warm parchment light, extending the
- * built-in weasel theme. A pins-only theme definition: nothing in it is
+ * labkit's theme: a cosmic dark over the built-in weasel theme, whose light
+ * mode it keeps as is. A pins-only theme definition: nothing in it is
  * derived, so it loads without the engine.
  */
 export const interstellarTheme: Theme = defineTheme({

package/src/trial/Trial.canvas.test.tsx

@@ -185,7 +185,7 @@ describe('LabProps.instruments', () => {
     render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
     expect([...seen]).toEqual(['grid', 'glyph']);
 
-    await userEvent.click(screen.getByRole('checkbox', { name: 'Toggle grid' }));
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Show grid' }));
     expect([...seen]).toEqual(['glyph']);
   });
 });

package/src/trial/Trial.tsx

@@ -24,9 +24,9 @@ import type {
 } from '../instrument/types';
 import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
-import { LayerList } from '../layers/LayerList';
 import { TrialLoupe } from '../loupe/TrialLoupe';
 import { resolveLoupe } from '../loupe/types';
+import { LayerList, type LayerListItem, moveLayers } from '../passthrough/weasel-ui';
 import { LabStoreContext, TrialIdProvider } from '../state/context';
 import type { LabStore } from '../state/store';
 import type { TrialRecord } from '../state/types';
@@ -401,6 +401,24 @@ function TrialRuntime({
     return instrument.layers.ids.map((l) => (typeof l === 'string' ? { id: l, label: l } : l));
   }, [instrument.layers]);
 
+  // In the order the canvas draws them, with the always-on layers pinned
+  // below the rest, where a drag cannot reach past them.
+  const layerItems: LayerListItem[] = useMemo(() => {
+    const ordered = layerOrder
+      ? [...layerDescriptors].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id))
+      : layerDescriptors;
+    const pinnedLast = [
+      ...ordered.filter((l) => !l.alwaysOn),
+      ...ordered.filter((l) => l.alwaysOn),
+    ];
+    return pinnedLast.map((l) => ({
+      id: l.id,
+      label: l.label,
+      locked: l.alwaysOn === true,
+      visible: l.alwaysOn === true || layerVisibility[l.id] !== false,
+    }));
+  }, [layerDescriptors, layerOrder, layerVisibility]);
+
   const dragDropResult = useDragDrop({
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
     canvasContainerRef,
@@ -492,7 +510,12 @@ function TrialRuntime({
         minZoom={stage.minZoom}
         maxZoom={stage.maxZoom}
         hostRef={loupeHostRef}
-        overlay={lens}
+        overlay={
+          <>
+            {stage.overlay?.(renderCtx)}
+            {lens}
+          </>
+        }
       >
         {instrument.render(renderCtx)}
       </Stage>
@@ -519,19 +542,18 @@ function TrialRuntime({
     () =>
       instrument.layers && layerDescriptors.length > 0 ? (
         <LayerList
-          layers={layerDescriptors}
-          visibility={layerVisibility}
-          onReorder={(next) => {
-            setLayerOrder(next.map((l) => l.id));
+          items={layerItems}
+          onReorder={(move) => {
+            setLayerOrder(moveLayers(layerItems, move).map((l) => l.id));
             bus.emit('layers.reorder');
           }}
-          onToggle={(lid, visible) => {
+          onVisibilityChange={(lid, visible) => {
             setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
             bus.emit('layers.toggle');
           }}
         />
       ) : null,
-    [instrument.layers, layerDescriptors, layerVisibility, bus],
+    [instrument.layers, layerDescriptors, layerItems, bus],
   );
 
   const extraChrome = useMemo<TrialContribution[]>(() => {