@weasel-js/labkit 1.3.0-pre.0 → 1.4.0-pre.0

package/src/ui/properties/ColorRow.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { ColorRow, PropertyList } from './PropertyPanel';
-
-const meta: Meta<typeof ColorRow> = {
-  title: 'labkit/UI/Properties/Rows/ColorRow',
-  component: ColorRow,
-};
-export default meta;
-type Story = StoryObj<typeof ColorRow>;
-
-function One({ initial, label }: { initial: string; label: string }) {
-  const [value, setValue] = useState(initial);
-  return (
-    <div style={{ width: 280 }}>
-      <ColorRow label={label} value={value} onChange={setValue} />
-    </div>
-  );
-}
-
-export const Single: Story = {
-  render: () => <One initial="#b08adb" label="Fill" />,
-};
-
-function Pair() {
-  const [fill, setFill] = useState('#b08adb');
-  const [stroke, setStroke] = useState('#1a1428');
-  return (
-    <div style={{ width: 320 }}>
-      <PropertyList>
-        <ColorRow label="Fill" value={fill} onChange={setFill} />
-        <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
-      </PropertyList>
-    </div>
-  );
-}
-
-export const PairInList: Story = {
-  render: () => <Pair />,
-};
-
-function OneWithAlpha({
-  initial,
-  initialAlpha,
-  label,
-  alphaDisabled,
-}: {
-  initial: string;
-  initialAlpha: number;
-  label: string;
-  alphaDisabled?: boolean;
-}) {
-  const [value, setValue] = useState(initial);
-  const [alpha, setAlpha] = useState(initialAlpha);
-  return (
-    <div style={{ width: 280 }}>
-      <ColorRow
-        label={label}
-        value={value}
-        onChange={setValue}
-        alpha={alpha}
-        onAlphaChange={setAlpha}
-        alphaDisabled={alphaDisabled}
-      />
-    </div>
-  );
-}
-
-export const WithAlpha: Story = {
-  render: () => <OneWithAlpha initial="#7ec8e3" initialAlpha={0.65} label="Fill" />,
-};
-
-export const AlphaDisabled: Story = {
-  render: () => <OneWithAlpha initial="#7ec8e3" initialAlpha={1} label="Fill" alphaDisabled />,
-};
-
-function AlphaPair() {
-  const [fill, setFill] = useState('#b08adb');
-  const [fillA, setFillA] = useState(0.8);
-  const [stroke, setStroke] = useState('#1a1428');
-  const [strokeA, setStrokeA] = useState(0.4);
-  return (
-    <div style={{ width: 320 }}>
-      <PropertyList>
-        <ColorRow
-          label="Fill"
-          value={fill}
-          onChange={setFill}
-          alpha={fillA}
-          onAlphaChange={setFillA}
-        />
-        <ColorRow
-          label="Stroke"
-          value={stroke}
-          onChange={setStroke}
-          alpha={strokeA}
-          onAlphaChange={setStrokeA}
-        />
-      </PropertyList>
-    </div>
-  );
-}
-
-export const AlphaPairInList: Story = {
-  render: () => <AlphaPair />,
-};

package/src/ui/properties/CurveField.less

@@ -1,48 +0,0 @@
-.lk-curve-field {
-  display: grid;
-  gap: 6px;
-  grid-column: 1 / -1;
-}
-
-.lk-curve-field__plot {
-  position: relative;
-  width: 100%;
-}
-
-.lk-curve-field__marks {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.lk-curve-field__readouts {
-  display: flex;
-  justify-content: space-between;
-  font-variant-numeric: tabular-nums;
-  font-size: var(--wzl-font-size);
-  color: var(--wzl-fg-subtle);
-}
-
-.lk-curve-field__readout {
-  font-style: normal;
-}
-
-.lk-curve-field__actions {
-  display: flex;
-  gap: 6px;
-  justify-self: start;
-}
-
-.lk-curve-field__action {
-  background: transparent;
-  border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-sm);
-  color: var(--wzl-fg);
-  padding: 4px 10px;
-  font-size: var(--wzl-font-size-sm);
-  cursor: pointer;
-}
-
-.lk-curve-field__action:hover {
-  background: var(--wzl-surface-raised);
-}

package/src/ui/properties/CurveField.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { CurveField } from './CurveField';
-
-const meta: Meta<typeof CurveField> = {
-  title: 'labkit/UI/Properties/CurveField',
-  component: CurveField,
-};
-export default meta;
-
-export const DomeContour: StoryObj<typeof CurveField> = {
-  render: () => {
-    const [v, setV] = useState<number[]>([0, -1, 0.5, 0.5, 1, 0.7]);
-    return (
-      <div style={{ width: 280 }}>
-        <CurveField values={v} min={-1} max={1} step={0.02} width={280} onChange={setV} />
-      </div>
-    );
-  },
-};

package/src/ui/properties/CurveField.test.tsx

@@ -1,127 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { assert, describe, expect, it, vi } from 'vitest';
-
-// CurveEditor uses weasel's own bundled React and fails in jsdom.
-// Mock it out — these tests only assert on readouts and the flip button.
-vi.mock('../../passthrough/weasel-ui', async (importOriginal) => {
-  const real = await importOriginal<typeof import('../../passthrough/weasel-ui')>();
-  return { ...real, CurveEditor: () => null };
-});
-
-import { CurveField } from './CurveField';
-
-describe('CurveField', () => {
-  it('flip button mirrors x → 1-x and resorts', () => {
-    const onChange = vi.fn();
-    render(
-      <CurveField
-        values={[0, -1, 0.3, 0.4, 1, 0.7]}
-        min={-1}
-        max={1}
-        step={0.02}
-        width={200}
-        height={110}
-        onChange={onChange}
-      />,
-    );
-    screen.getByRole('button', { name: /flip horizontally/i }).click();
-    expect(onChange).toHaveBeenCalledTimes(1);
-    // After flip: (0,-1) → (1,-1), (0.3,0.4) → (0.7,0.4), (1,0.7) → (0,0.7).
-    // Sort by x ascending: (0,0.7), (0.7,0.4), (1,-1).
-    expect(onChange.mock.calls[0][0]).toEqual([0, 0.7, 0.7, 0.4, 1, -1]);
-  });
-
-  it('flip vertically mirrors y through (min+max)/2 and keeps x order', () => {
-    const onChange = vi.fn();
-    render(
-      <CurveField
-        values={[0, -1, 0.3, 0.4, 1, 0.7]}
-        min={-1}
-        max={1}
-        step={0.02}
-        width={200}
-        height={110}
-        onChange={onChange}
-      />,
-    );
-    screen.getByRole('button', { name: /flip vertically/i }).click();
-    expect(onChange).toHaveBeenCalledTimes(1);
-    // (min+max)/2 = 0. -1 → 1, 0.4 → -0.4, 0.7 → -0.7. x order preserved.
-    expect(onChange.mock.calls[0][0]).toEqual([0, 1, 0.3, -0.4, 1, -0.7]);
-  });
-
-  it('flip vertically with [0,1] range mirrors through 0.5', () => {
-    const onChange = vi.fn();
-    render(
-      <CurveField
-        values={[0, 0, 0.5, 0.25, 1, 1]}
-        min={0}
-        max={1}
-        step={0.01}
-        width={200}
-        height={110}
-        onChange={onChange}
-      />,
-    );
-    screen.getByRole('button', { name: /flip vertically/i }).click();
-    expect(onChange.mock.calls[0][0]).toEqual([0, 1, 0.5, 0.75, 1, 0]);
-  });
-
-  it('renders a band mark as a positioned overlay rect', () => {
-    const { container } = render(
-      <CurveField
-        values={[0, 0, 1, 1]}
-        min={0}
-        max={1}
-        step={0.01}
-        width={200}
-        height={110}
-        marks={[{ kind: 'band', x: [0.2, 0.4], color: '#ffcc00' }]}
-        onChange={() => {}}
-      />,
-    );
-    const overlay = container.querySelector('.lk-curve-field__marks');
-    assert(overlay);
-    const rect = overlay.querySelector('rect');
-    assert(rect);
-    // x = 0.2 * 200 = 40; width = (0.4 - 0.2) * 200 = 40.
-    expect(rect.getAttribute('x')).toBe('40');
-    expect(rect.getAttribute('width')).toBe('40');
-    expect(rect.getAttribute('fill')).toBe('#ffcc00');
-  });
-
-  it('renders a line mark as a positioned line', () => {
-    const { container } = render(
-      <CurveField
-        values={[0, 0, 1, 1]}
-        min={0}
-        max={1}
-        step={0.01}
-        width={200}
-        height={110}
-        marks={[{ kind: 'line', x: 0.7, color: '#ffcc00' }]}
-        onChange={() => {}}
-      />,
-    );
-    const line = container.querySelector('.lk-curve-field__marks line');
-    assert(line);
-    expect(line.getAttribute('x1')).toBe('140');
-    expect(line.getAttribute('x2')).toBe('140');
-    expect(line.getAttribute('stroke')).toBe('#ffcc00');
-  });
-
-  it('omits the marks overlay when marks is undefined', () => {
-    const { container } = render(
-      <CurveField
-        values={[0, 0, 1, 1]}
-        min={0}
-        max={1}
-        step={0.01}
-        width={200}
-        height={110}
-        onChange={() => {}}
-      />,
-    );
-    expect(container.querySelector('.lk-curve-field__marks')).toBeNull();
-  });
-});

package/src/ui/properties/CurveField.tsx

@@ -1,184 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { type ControlPoint, CurveEditor, dlog } from '../../passthrough/weasel-ui';
-
-/** An annotation drawn over a curve plot: a shaded band across a range of x,
- *  or a vertical line at one x. */
-export type CurveMark =
-  | { kind: 'band'; x: [number, number]; color?: string }
-  | { kind: 'line'; x: number; color?: string };
-
-/** Props for `<CurveField>`. */
-export interface CurveFieldProps {
-  /** Flat [x0, y0, x1, y1, …] — matches how curve-as-array configs
-   *  serialize in JSON snapshots. */
-  values: number[];
-  min: number;
-  max: number;
-  step: number;
-  /** Plot width in CSS px. Caller sizes (typically uses a ResizeObserver). */
-  width: number;
-  /** Plot height in CSS px. Default 110. */
-  height?: number;
-  /** Flat default curve. When provided, a Reset button restores it. */
-  defaults?: readonly number[];
-  onChange: (next: number[]) => void;
-  /** Optional vertical marks overlaid on the plot (e.g. landmarks). */
-  marks?: readonly CurveMark[];
-}
-
-/**
- * A function-domain (y = f(x), x ∈ [0,1]) curve editor with per-stop
- * numeric readouts and flip buttons. Wraps weasel-ui's
- * `CurveEditor`; consumers wanting the raw editor (2D paths,
- * custom anchors) should import it from `@weasel-js/labkit/weasel-ui`.
- */
-export function CurveField({
-  values,
-  min,
-  max,
-  step,
-  width,
-  height = 110,
-  defaults,
-  onChange,
-  marks,
-}: CurveFieldProps) {
-  const points: ControlPoint[] = useMemo(() => {
-    const out: ControlPoint[] = [];
-    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });
-    return out;
-  }, [values]);
-
-  const handleChange = useCallback(
-    (next: ControlPoint[]) => {
-      const flat: number[] = new Array(next.length * 2);
-      for (let i = 0; i < next.length; i++) {
-        const ySnap = Math.round(next[i].y / step) * step;
-        const y = Math.max(min, Math.min(max, ySnap));
-        flat[i * 2] = next[i].x;
-        flat[i * 2 + 1] = y;
-      }
-      dlog('curve-field', 'handleChange', {
-        nLen: next.length,
-        flatLen: flat.length,
-        sample: flat.slice(0, 4),
-      });
-      onChange(flat);
-    },
-    [onChange, min, max, step],
-  );
-
-  const handleFlip = useCallback(() => {
-    const flipped: Array<{ x: number; y: number }> = [];
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped.push({ x: 1 - values[i], y: values[i + 1] });
-    }
-    flipped.sort((a, b) => a.x - b.x);
-    const out: number[] = [];
-    for (const p of flipped) out.push(p.x, p.y);
-    onChange(out);
-  }, [values, onChange]);
-
-  const handleFlipVertical = useCallback(() => {
-    const mid = (min + max) / 2;
-    const flipped: number[] = new Array(values.length);
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped[i] = values[i];
-      flipped[i + 1] = 2 * mid - values[i + 1];
-    }
-    onChange(flipped);
-  }, [values, min, max, onChange]);
-
-  return (
-    <div className="lk-curve-field">
-      <div className="lk-curve-field__plot">
-        <CurveEditor
-          value={points}
-          onInput={handleChange}
-          domain="1d"
-          constrain="function"
-          xRange={[0, 1]}
-          yRange={[min, max]}
-          width={width}
-          height={height}
-          endpoints="pinned-x"
-          addPointMode="click-curve"
-          minPoints={2}
-          grid={{}}
-          history={false}
-        />
-        {marks && marks.length > 0 && (
-          <svg
-            className="lk-curve-field__marks"
-            width={width}
-            height={height}
-            viewBox={`0 0 ${width} ${height}`}
-            aria-hidden="true"
-          >
-            {marks.map((m) => {
-              const color = m.color ?? '#ffcc00';
-              if (m.kind === 'band') {
-                const x0 = Math.max(0, Math.min(1, m.x[0])) * width;
-                const x1 = Math.max(0, Math.min(1, m.x[1])) * width;
-                const left = Math.min(x0, x1);
-                const w = Math.abs(x1 - x0);
-                return (
-                  <g key={`band-${m.x[0]}-${m.x[1]}-${color}`}>
-                    <rect x={left} y={0} width={w} height={height} fill={color} fillOpacity={0.4} />
-                    <line
-                      x1={left}
-                      y1={0}
-                      x2={left}
-                      y2={height}
-                      stroke={color}
-                      strokeOpacity={0.85}
-                      strokeWidth={1}
-                    />
-                    <line
-                      x1={left + w}
-                      y1={0}
-                      x2={left + w}
-                      y2={height}
-                      stroke={color}
-                      strokeOpacity={0.85}
-                      strokeWidth={1}
-                    />
-                  </g>
-                );
-              }
-              const x = Math.max(0, Math.min(1, m.x)) * width;
-              return (
-                <line
-                  key={`mark-${m.x}-${color}`}
-                  x1={x}
-                  y1={0}
-                  x2={x}
-                  y2={height}
-                  stroke={color}
-                  strokeWidth={1}
-                />
-              );
-            })}
-          </svg>
-        )}
-      </div>
-      <div className="lk-curve-field__actions">
-        <button type="button" className="lk-curve-field__action" onClick={handleFlip}>
-          Flip horizontally
-        </button>
-        <button type="button" className="lk-curve-field__action" onClick={handleFlipVertical}>
-          Flip vertically
-        </button>
-        {defaults && (
-          <button
-            type="button"
-            className="lk-curve-field__action"
-            onClick={() => onChange([...defaults])}
-          >
-            Reset
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}