@weasel-js/labkit 0.1.0

package/src/ui/layers/LayerStack.tsx

@@ -0,0 +1,215 @@
+import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';
+import { dlog, useReorderDragList } from '../../passthrough/weasel-ui';
+
+export interface LayerStackItem {
+  /** Stable id used for keys, onRemove, onReorder. Numeric to match
+   *  common id-from-nextId conventions; string ids also work. */
+  id: number | string;
+  /** Short kind label rendered in the header when no primary select
+   *  is hoisted (e.g. "shadow", "stroke"). */
+  kind: string;
+  /** When present, hoist this select into the card header so the user
+   *  can switch mode/shape without expanding. */
+  primaryValue?: string;
+  primaryOptions?: string[];
+  /** Accent CSS color used as the left border / index-badge fill. */
+  accent?: string;
+  /** Optional badge text rendered before the primary control
+   *  (e.g. tail index "1", "2", "3"). When omitted a drag handle
+   *  glyph renders in its place. */
+  badge?: string;
+  /** Initial expanded state. Defaults to true for newly-added items. */
+  defaultExpanded?: boolean;
+}
+
+export interface LayerStackProps {
+  title: string;
+  items: LayerStackItem[];
+  /** Kinds the user can add via the header palette. */
+  paletteKinds: string[];
+  onAdd: (kind: string) => void;
+  onRemove: (id: number | string) => void;
+  onReorder: (orderedIds: Array<number | string>) => void;
+  onPrimaryChange: (id: number | string, nextValue: string) => void;
+  /** Render the body controls for each item. */
+  renderBody: (item: LayerStackItem) => ReactNode;
+  /** Hide the title + palette row (used when an outer wrap renders its
+   *  own head — see speech-balloons Tails panel). */
+  hideHead?: boolean;
+}
+
+export function LayerStack({
+  title,
+  items,
+  paletteKinds,
+  onAdd,
+  onRemove,
+  onReorder,
+  onPrimaryChange,
+  renderBody,
+  hideHead,
+}: LayerStackProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<number | string>>(
+    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),
+  );
+
+  useEffect(() => {
+    setExpandedIds((prev) => {
+      let next: Set<number | string> | null = null;
+      for (const item of items) {
+        if (item.defaultExpanded === false) continue;
+        if (prev.has(item.id)) continue;
+        if (next === null) next = new Set(prev);
+        next.add(item.id);
+      }
+      return next ?? prev;
+    });
+  }, [items]);
+
+  const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));
+  const drag = useReorderDragList({
+    items: dragItems,
+    selectedIds: [],
+    onReorder: (ids, targetIndex) => {
+      dlog('layer-stack', 'onReorder', { ids, targetIndex });
+      const orig = items.map((i) => i.id);
+      const moving = new Set(ids);
+      const remaining = orig.filter((id) => !moving.has(String(id)));
+      const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));
+      // weasel reports targetIndex against the original list (which includes
+      // the dragged row). Each moved item that originally sat before
+      // targetIndex needs to shift the insertion point left by one.
+      const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;
+      const adjusted = targetIndex - shift;
+      const out = [...remaining];
+      out.splice(adjusted, 0, ...movedIds);
+      onReorder(out);
+    },
+  });
+
+  const toggleExpanded = (id: number | string) => {
+    setExpandedIds((s) => {
+      const n = new Set(s);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  };
+
+  return (
+    <div className="lk-layer-stack">
+      {!hideHead && (
+        <div className="lk-layer-stack__head">
+          <h2 className="lk-layer-stack__title">{title}</h2>
+          <div className="lk-layer-stack__palette">
+            {paletteKinds.map((k) => (
+              <button
+                key={k}
+                type="button"
+                className="lk-layer-stack__add"
+                onClick={() => {
+                  dlog('layer-stack', 'onAdd', { kind: k });
+                  onAdd(k);
+                }}
+                aria-label={`Add ${k}`}
+              >
+                {k}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <div
+        className="lk-layer-stack__list"
+        ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}
+        onPointerMove={drag.containerProps.onPointerMove}
+        onPointerUp={drag.containerProps.onPointerUp}
+        onPointerCancel={drag.containerProps.onPointerCancel}
+      >
+        {items.map((item, i) => {
+          const expanded = expandedIds.has(item.id);
+          const draggedId = drag.state.draggedIds?.[0];
+          const isDragging = draggedId === String(item.id);
+          const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);
+          const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;
+          const cardCls = [
+            'lk-layer-card',
+            expanded ? 'is-expanded' : 'is-collapsed',
+            isDragging ? 'is-dragging' : '',
+            item.accent ? 'has-accent' : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+          const cardStyle = item.accent
+            ? ({ '--lk-layer-card-accent': item.accent } as CSSProperties)
+            : undefined;
+          const { onPointerDown } = drag.rowProps(String(item.id), i);
+          return (
+            <div key={item.id} className="lk-layer-card-wrap">
+              {showHintBefore && <div className="lk-layer-stack__drop-hint" />}
+              <div className={cardCls} data-testid={`lk-layer-card-${item.id}`} style={cardStyle}>
+                <div className="lk-layer-card__head">
+                  <button
+                    type="button"
+                    className="lk-layer-card__handle"
+                    aria-label={`Drag to reorder layer ${item.id}`}
+                    onPointerDown={onPointerDown}
+                    onClick={() => toggleExpanded(item.id)}
+                  >
+                    {item.badge ?? <DragHandleGlyph />}
+                  </button>
+                  {item.primaryValue !== undefined && item.primaryOptions ? (
+                    <select
+                      className="lk-layer-card__primary"
+                      value={item.primaryValue}
+                      aria-label={`Primary select for layer ${item.id}`}
+                      onChange={(e) => onPrimaryChange(item.id, e.target.value)}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {item.primaryOptions.map((o) => (
+                        <option key={o} value={o}>
+                          {o}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <span className="lk-layer-card__kind">{item.kind}</span>
+                  )}
+                  <button
+                    type="button"
+                    className="lk-layer-card__remove"
+                    aria-label="Remove layer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onRemove(item.id);
+                    }}
+                  >
+                    ✕
+                  </button>
+                </div>
+                {expanded && <div className="lk-layer-card__body">{renderBody(item)}</div>}
+              </div>
+              {showHintAfter && <div className="lk-layer-stack__drop-hint" />}
+            </div>
+          );
+        })}
+        {items.length === 0 && (
+          <div className="lk-layer-stack__empty">No layers — add one above.</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DragHandleGlyph() {
+  return (
+    <svg width="12" height="16" viewBox="0 0 8 16" fill="currentColor" aria-hidden="true">
+      <circle cx="2" cy="3" r="1.1" />
+      <circle cx="6" cy="3" r="1.1" />
+      <circle cx="2" cy="8" r="1.1" />
+      <circle cx="6" cy="8" r="1.1" />
+      <circle cx="2" cy="13" r="1.1" />
+      <circle cx="6" cy="13" r="1.1" />
+    </svg>
+  );
+}

package/src/ui/layers/index.ts

@@ -0,0 +1 @@
+export { LayerStack, type LayerStackItem, type LayerStackProps } from './LayerStack';

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { CheckboxRow } from './PropertyPanel';
+
+const meta: Meta<typeof CheckboxRow> = {
+  title: 'labkit/UI/Properties/Rows/CheckboxRow',
+  component: CheckboxRow,
+};
+export default meta;
+type Story = StoryObj<typeof CheckboxRow>;
+
+function Controlled({ initial, label }: { initial: boolean; label: string }) {
+  const [value, setValue] = useState(initial);
+  return (
+    <div style={{ width: 280 }}>
+      <CheckboxRow label={label} value={value} onChange={setValue} />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <Controlled initial={true} label="Visible" />,
+};
+
+export const Unchecked: Story = {
+  render: () => <Controlled initial={false} label="Snap to grid" />,
+};

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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,48 @@
+.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: 0.85rem;
+  color: var(--lk-text-dim);
+}
+
+.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(--lk-border);
+  border-radius: var(--lk-radius-sm, 6px);
+  color: var(--lk-text);
+  padding: 4px 10px;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.lk-curve-field__action:hover {
+  background: var(--lk-bg-elevated);
+}

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,127 @@
+import { render, screen } from '@testing-library/react';
+import { 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');
+    expect(overlay).not.toBeNull();
+    const rect = overlay!.querySelector('rect');
+    expect(rect).not.toBeNull();
+    // 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');
+    expect(line).not.toBeNull();
+    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();
+  });
+});