@weasel-js/labkit 1.7.2 → 1.8.0

package/dist/undo/index.d.ts

@@ -1,9 +1,9 @@
-export { at as UndoCapability } from '../_dts/index-DCMA4Fy1.js';
+export { at as UndoCapability } from '../_dts/index-DRaswz91.js';
 import '@weasel-js/ui';
 import '@weasel-js/core';
 import 'react';
 import '@weasel-js/theme';
-import '../_dts/types-BUBSIZuV.js';
+import '../_dts/types-DUfQ0isU.js';
 import '@weasel-js/quantity';
 import '@weasel-js/geom';
 import '../_dts/types-DJ79Tg5J.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -115,18 +115,18 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.7.2",
-    "@weasel-js/theme": "1.7.2",
+    "@weasel-js/core": "1.8.0",
+    "@weasel-js/theme": "1.8.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.7.2",
-    "@weasel-js/kernel3d": "1.7.2",
-    "@weasel-js/loupe": "1.7.2",
-    "@weasel-js/quantity": "1.7.2",
-    "@weasel-js/svg": "1.7.2",
-    "@weasel-js/ui": "1.7.2",
+    "@weasel-js/geom": "1.8.0",
+    "@weasel-js/kernel3d": "1.8.0",
+    "@weasel-js/loupe": "1.8.0",
+    "@weasel-js/quantity": "1.8.0",
+    "@weasel-js/svg": "1.8.0",
+    "@weasel-js/ui": "1.8.0",
     "earcut": "3.2.3",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -136,8 +136,8 @@
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
     "@testing-library/jest-dom": "^7.0.1",
-    "@weasel-js/guides": "1.7.2",
-    "@weasel-js/modes": "1.7.2",
+    "@weasel-js/guides": "1.8.0",
+    "@weasel-js/modes": "1.8.0",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/config/builder.ts

@@ -1,4 +1,4 @@
-import type { Display } from '@weasel-js/quantity';
+import type { Display, InfinityText } from '@weasel-js/quantity';
 import type { PrefLeaf, PrefNumberUnit } from '@weasel-js/ui';
 import { type Auto, isAuto } from './auto';
 import type {
@@ -159,6 +159,16 @@ export class NumberNode extends BaseNode<number> {
     return this.ann({ unit });
   }
 
+  /**
+   * Make the top of the range mean infinity: the slider's `max` stop stores
+   * `Infinity` and reads `word` — `.range(0, 5000).endless('never')`. A value
+   * of `Infinity` sits at that stop. `at: 'min'` puts it at the bottom
+   * instead, as `-Infinity`; `'both'` does both.
+   */
+  endless(word?: InfinityText, at: 'min' | 'max' | 'both' = 'max'): this {
+    return this.ann(word === undefined ? { endless: at } : { endless: at, infinity: word });
+  }
+
   /** Force a slider even without both bounds. */
   slider(): this {
     return this.ann({ control: 'slider' });

package/src/config/types.ts

@@ -1,4 +1,4 @@
-import type { Display } from '@weasel-js/quantity';
+import type { Display, InfinityText } from '@weasel-js/quantity';
 import type { PrefGroup, PrefLeaf, PrefNumberUnit, PrefRenderer } from '@weasel-js/ui';
 import type { ReactNode } from 'react';
 
@@ -36,6 +36,10 @@ export interface Annotations {
   /** Display-unit conversion for a number stored in a canonical unit — the
    *  value, its bounds and its step all convert at the control's edge. */
   unit?: PrefNumberUnit;
+  /** Which end of a number's slider stands for infinity. */
+  endless?: 'min' | 'max' | 'both';
+  /** The word a number's infinity shows as — `'never'`. Default `∞`. */
+  infinity?: InfinityText;
   /** A color leaf's value carries alpha (`#rrggbbaa`) and its row edits it. */
   alpha?: boolean;
   control?: string;

package/src/controls/ControlMatrix.less

@@ -55,6 +55,8 @@
   border: 0;
   border-radius: var(--wzl-radius-sm);
   background: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   color: inherit;
   font: inherit;
   letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));
@@ -96,8 +98,8 @@
 }
 
 // Inherited: the value in effect, but not chosen here.
-.lk-control-matrix__cell.is-inherited > * {
-  opacity: 0.4;
+.lk-control-matrix__cell.is-inherited {
+  .inherited();
 }
 
 // Every cell control fills its cell, so the cell is the click target.
@@ -112,6 +114,9 @@
   border: 1px solid transparent;
   border-radius: var(--wzl-radius-sm);
   background: none;
+  // labkit's default button blurs its backdrop; dozens of blurred cells make Chrome flicker.
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   color: inherit;
   font: inherit;
   cursor: pointer;

package/src/controls/ControlMatrix.test.tsx

@@ -158,6 +158,16 @@ describe('<ControlMatrix>', () => {
     expect(setConfig).toHaveBeenCalledWith('looks.window.glow', 0.75);
   });
 
+  it('lists an enum cell’s options in its popover, with no dropdown inside, and closes on a choice', () => {
+    const { setConfig } = setup();
+    fireEvent.click(cell('Window Shading'));
+    const dialog = screen.getByRole('dialog', { name: 'Window Shading' });
+    expect(within(dialog).queryByRole('button', { name: /Shading/ })).toBeNull();
+    fireEvent.click(within(dialog).getByRole('radio', { name: 'Soft' }));
+    expect(setConfig).toHaveBeenCalledWith('looks.window.shading', 'soft');
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
   it('unpins from the popover with Inherit, disabled while already inherited', () => {
     const { setConfig, unmount } = setup();
     fireEvent.click(cell('Window Glow'));

package/src/controls/ControlMatrix.tsx

@@ -5,6 +5,7 @@ import {
   isPrefLeaf,
   type PrefLeaf,
   type PropertyControlProps,
+  PropertyField,
   PropertyHelp,
   PropertyList,
   PropertyPanel,
@@ -211,16 +212,12 @@ export function ControlMatrix({
             aria-label={`${nameOf(open.column)} ${open.label}`}
           >
             <PropertyList pack="one-up">
-              <ControlRow
-                path={open.path}
-                leaf={open.leaf}
-                resolved={schema}
+              <Editor
+                open={open}
+                schema={schema}
                 config={config}
-                shown={config}
                 setConfig={setConfig}
-                pack="one-up"
-                auto={NO_AUTO}
-                setRowAuto={noop}
+                close={() => setOpen(null)}
               />
             </PropertyList>
             {clearable(open.leaf) ? (
@@ -262,6 +259,59 @@ export function ControlMatrix({
   );
 }
 
+/**
+ * The control a cell opens. An enum lists its options outright, as radios: the
+ * panel's dropdown would be a second popup opened from inside this one.
+ * Choosing one is the whole edit, so it closes the popover.
+ */
+function Editor({
+  open,
+  schema,
+  config,
+  setConfig,
+  close,
+}: {
+  open: OpenCell;
+  schema: ResolvedConfig;
+  config: Record<string, unknown>;
+  setConfig: (path: string, value: unknown) => void;
+  close: () => void;
+}) {
+  const { path, leaf } = open;
+  const field = isBuiltinToolPref(leaf)
+    ? prefFieldProps(leaf, {
+        value: valueAtPath(config, path) ?? leaf.default,
+        setValue: (next) => setConfig(path, next),
+      })
+    : null;
+  if (field?.kind === 'enum') {
+    return (
+      <PropertyField
+        {...field}
+        label={leaf.name}
+        control="radio"
+        onChange={(next: Parameters<typeof field.onChange>[0]) => {
+          field.onChange(next);
+          close();
+        }}
+      />
+    );
+  }
+  return (
+    <ControlRow
+      path={path}
+      leaf={leaf}
+      resolved={schema}
+      config={config}
+      shown={config}
+      setConfig={setConfig}
+      pack="one-up"
+      auto={NO_AUTO}
+      setRowAuto={noop}
+    />
+  );
+}
+
 function ColumnHeader({
   column,
   onClick,

package/src/controls/ControlPanel.test.tsx

@@ -1188,3 +1188,33 @@ describe('<ControlPanel> resettable group', () => {
     ]);
   });
 });
+
+describe('<ControlPanel> endless number', () => {
+  it('reads its word at the top of the range and writes Infinity there', () => {
+    const schema = resolveConfigSchema(
+      f.schema({ cut: f.number(Infinity).range(0, 5000).step(50).suffix('ms').endless('never') }),
+      [],
+    );
+    const setConfig = vi.fn();
+    function Harness() {
+      const [config, setState] = useState<Record<string, unknown>>({ cut: Infinity });
+      return (
+        <ControlPanel
+          schema={schema}
+          config={config}
+          setConfig={(key: string, value: unknown) => {
+            setConfig(key, value);
+            setState((c) => ({ ...c, [key]: value }));
+          }}
+        />
+      );
+    }
+    render(<Harness />);
+    expect(screen.getByRole('spinbutton')).toHaveValue('never');
+    expect(screen.queryByText('ms')).toBeNull();
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '4950' } });
+    expect(setConfig).toHaveBeenLastCalledWith('cut', 4950);
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '5000' } });
+    expect(setConfig).toHaveBeenLastCalledWith('cut', Infinity);
+  });
+});

package/src/styles.less

@@ -4,6 +4,8 @@
 @import (css) '@weasel-js/theme/faces.css';
 // The numeric face's one definition, taken as a mixin: `.numeric();`.
 @import (reference, less) '@weasel-js/theme/numeric.module.css';
+// What an inherited value draws in, the same way: `.inherited();`.
+@import (reference, less) '@weasel-js/theme/inherited.module.css';
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';

package/src/theme/interstellar.theme.json

@@ -64,20 +64,6 @@
         "type": "color"
       }
     },
-    "fg-muted": {
-      "by": "mode",
-      "dark": {
-        "value": "#a8a8c0",
-        "type": "color"
-      }
-    },
-    "fg-subtle": {
-      "by": "mode",
-      "dark": {
-        "value": "#5a5a78",
-        "type": "color"
-      }
-    },
     "accent": {
       "by": "mode",
       "dark": {