@weasel-js/labkit 0.1.0

package/src/ui/properties/CurveField.tsx

@@ -0,0 +1,181 @@
+import { useCallback, useMemo } from 'react';
+import { type ControlPoint, CurveEditor, dlog } from '../../passthrough/weasel-ui';
+
+export type CurveMark =
+  | { kind: 'band'; x: [number, number]; color?: string }
+  | { kind: 'line'; x: number; color?: string };
+
+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}
+          onChange={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>
+  );
+}

package/src/ui/properties/EffectCard.tsx

@@ -0,0 +1,312 @@
+import { type CSSProperties, type ReactNode, useState } from 'react';
+
+// ── Subpanel ─────────────────────────────────────────────────────────
+// Headered group of controls inside a wider panel/list. The header is a
+// label flanked by a horizontal rule — no background, padding, or border;
+// purely a typographic divider. Ported from speech-balloons styles.css:277-313.
+
+export interface SubpanelProps {
+  title: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Subpanel({ title, children, className }: SubpanelProps) {
+  const cls = className ? `lk-subpanel ${className}` : 'lk-subpanel';
+  return (
+    <div className={cls}>
+      <h4 className="lk-subpanel__title">
+        <span>{title}</span>
+        <hr />
+      </h4>
+      {children}
+    </div>
+  );
+}
+
+// ── EffectCard ───────────────────────────────────────────────────────
+// Draggable, collapsible card for stacked effect editors. Optional --lk-panel-accent
+// per-instance recolors the title bar, border-left, and (via re-binding --lk-accent
+// inside the card) every descendant control that reads from the accent token.
+
+export interface EffectCardProps {
+  /** Card title rendered in the title bar (e.g. effect kind label or a select). */
+  title: ReactNode;
+  /** Optional badge/chip displayed before the remove button (e.g. primary value summary). */
+  primary?: ReactNode;
+  /** Optional accent color in any CSS color form. Sets --lk-panel-accent on the card. */
+  accent?: string;
+  /** Optional ordinal badge that doubles as the drag handle (used by tail cards in SB). */
+  index?: number;
+  expanded?: boolean;
+  onToggleExpanded?: () => void;
+  onRemove?: () => void;
+  /**
+   * Drag-handle wiring. When provided, an inline handle (⋮⋮ icon or `index`)
+   * activates HTML5 drag on press. Consumer owns the drag/drop coordination —
+   * see EffectCardList for the batteries-included wrapper.
+   */
+  draggable?: boolean;
+  onPressHandle?: () => void;
+  onReleaseHandle?: () => void;
+  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+  dragging?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function EffectCard({
+  title,
+  primary,
+  accent,
+  index,
+  expanded = true,
+  onToggleExpanded,
+  onRemove,
+  draggable,
+  onPressHandle,
+  onReleaseHandle,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  dragging,
+  children,
+  className,
+}: EffectCardProps) {
+  const stateClass = `${expanded ? 'is-expanded' : 'is-collapsed'}${dragging ? ' is-dragging' : ''}${accent ? ' has-accent' : ''}`;
+  const cls = `lk-effect-card ${stateClass}${className ? ` ${className}` : ''}`;
+  // Per-instance dynamic color → CSS custom property requires inline style.
+  // The card's CSS re-binds --lk-accent to --lk-panel-accent so descendants tint.
+  const style = accent ? ({ '--lk-panel-accent': accent } as CSSProperties) : undefined;
+
+  // When a toggle handler is supplied the header acts as a disclosure button:
+  // role + tab stop + Enter/Space. Bundled together so the interactive props are
+  // applied as a set (no half-interactive element when onToggleExpanded is absent).
+  const headProps = onToggleExpanded
+    ? {
+        role: 'button' as const,
+        tabIndex: 0,
+        onClick: onToggleExpanded,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggleExpanded();
+          }
+        },
+      }
+    : {};
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.
+    <div
+      className={cls}
+      style={style}
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <div className="lk-effect-card__head" {...headProps}>
+        {index != null ? (
+          <button
+            type="button"
+            className="lk-effect-card__index-badge lk-effect-card__handle"
+            title="Drag to reorder · click to toggle"
+            aria-label={`Item ${index + 1} — drag to reorder, click to toggle`}
+            onMouseDown={onPressHandle}
+            onMouseUp={onReleaseHandle}
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpanded?.();
+            }}
+          >
+            {index + 1}
+          </button>
+        ) : (
+          <span
+            className="lk-effect-card__handle"
+            aria-hidden="true"
+            title="Drag to reorder"
+            onMouseDown={onPressHandle}
+            onMouseUp={onReleaseHandle}
+          >
+            <DragHandleIcon />
+          </span>
+        )}
+        <span className="lk-effect-card__title">{title}</span>
+        {primary != null && <span className="lk-effect-card__primary">{primary}</span>}
+        {onRemove && (
+          <button
+            type="button"
+            className="lk-effect-card__remove"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            title="Remove"
+            aria-label="Remove"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+      {expanded && <div className="lk-effect-card__body">{children}</div>}
+    </div>
+  );
+}
+
+function DragHandleIcon() {
+  return (
+    <svg width="10" height="14" viewBox="0 0 10 14" aria-hidden="true">
+      <circle cx="3" cy="3" r="1.3" fill="currentColor" />
+      <circle cx="7" cy="3" r="1.3" fill="currentColor" />
+      <circle cx="3" cy="7" r="1.3" fill="currentColor" />
+      <circle cx="7" cy="7" r="1.3" fill="currentColor" />
+      <circle cx="3" cy="11" r="1.3" fill="currentColor" />
+      <circle cx="7" cy="11" r="1.3" fill="currentColor" />
+    </svg>
+  );
+}
+
+// ── EffectCardList ───────────────────────────────────────────────────
+// Batteries-included list wrapper that coordinates HTML5 drag-and-drop across
+// a list of EffectCards. Consumer supplies items + a renderItem callback;
+// onReorder fires with (sourceId, targetId, position) on drop. Mirrors the
+// LayerStack pattern from speech-balloons Lab.tsx:630-707.
+
+export interface EffectCardListItem {
+  id: string | number;
+}
+
+export interface EffectCardListProps<T extends EffectCardListItem> {
+  items: ReadonlyArray<T>;
+  renderItem: (
+    item: T,
+    helpers: {
+      isExpanded: boolean;
+      isDragging: boolean;
+      toggleExpanded: () => void;
+      cardProps: Pick<
+        EffectCardProps,
+        | 'expanded'
+        | 'dragging'
+        | 'draggable'
+        | 'onToggleExpanded'
+        | 'onPressHandle'
+        | 'onReleaseHandle'
+        | 'onDragStart'
+        | 'onDragEnd'
+        | 'onDragOver'
+        | 'onDragLeave'
+        | 'onDrop'
+      >;
+    },
+  ) => ReactNode;
+  onReorder: (sourceId: T['id'], targetId: T['id'], position: 'before' | 'after') => void;
+  /** Optional rendered when the list is empty. */
+  empty?: ReactNode;
+  /** IDs to render expanded on first mount. Defaults to all collapsed. */
+  defaultExpandedIds?: ReadonlyArray<T['id']>;
+}
+
+export function EffectCardList<T extends EffectCardListItem>({
+  items,
+  renderItem,
+  onReorder,
+  empty,
+  defaultExpandedIds,
+}: EffectCardListProps<T>) {
+  const [expanded, setExpanded] = useState<Set<T['id']>>(() => new Set(defaultExpandedIds ?? []));
+  const [draggingId, setDraggingId] = useState<T['id'] | null>(null);
+  const [pressedId, setPressedId] = useState<T['id'] | null>(null);
+  const [dropHint, setDropHint] = useState<{ id: T['id']; position: 'before' | 'after' } | null>(
+    null,
+  );
+
+  if (items.length === 0) {
+    return <>{empty ?? <div className="lk-effect-card-list__empty">No items.</div>}</>;
+  }
+
+  return (
+    <div className="lk-effect-card-list">
+      {items.map((item) => {
+        const isExpanded = expanded.has(item.id);
+        const isDragging = draggingId === item.id;
+        const isPressed = pressedId === item.id;
+        const showHintBefore =
+          dropHint && dropHint.id === item.id && dropHint.position === 'before';
+        const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === 'after';
+
+        const toggleExpanded = () =>
+          setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(item.id)) next.delete(item.id);
+            else next.add(item.id);
+            return next;
+          });
+
+        return (
+          <div key={String(item.id)} className="lk-effect-card-list__wrap">
+            {showHintBefore && <div className="lk-effect-card-list__drop-hint" />}
+            {renderItem(item, {
+              isExpanded,
+              isDragging,
+              toggleExpanded,
+              cardProps: {
+                expanded: isExpanded,
+                dragging: isDragging,
+                draggable: isPressed,
+                onToggleExpanded: toggleExpanded,
+                onPressHandle: () => setPressedId(item.id),
+                onReleaseHandle: () => setPressedId(null),
+                onDragStart: (e) => {
+                  e.dataTransfer.effectAllowed = 'move';
+                  e.dataTransfer.setData('text/plain', String(item.id));
+                  setDraggingId(item.id);
+                },
+                onDragEnd: () => {
+                  setDraggingId(null);
+                  setPressedId(null);
+                  setDropHint(null);
+                },
+                onDragOver: (e) => {
+                  if (draggingId === null || draggingId === item.id) return;
+                  e.preventDefault();
+                  e.dataTransfer.dropEffect = 'move';
+                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+                  const position: 'before' | 'after' =
+                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';
+                  setDropHint({ id: item.id, position });
+                },
+                onDragLeave: () => {
+                  setDropHint((h) => (h && h.id === item.id ? null : h));
+                },
+                onDrop: (e) => {
+                  e.preventDefault();
+                  if (draggingId === null || draggingId === item.id) {
+                    setDropHint(null);
+                    return;
+                  }
+                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+                  const position: 'before' | 'after' =
+                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';
+                  onReorder(draggingId, item.id, position);
+                  setDropHint(null);
+                },
+              },
+            })}
+            {showHintAfter && <div className="lk-effect-card-list__drop-hint" />}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+  CheckboxRow,
+  ColorRow,
+  NumberRow,
+  PropertyList,
+  PropertyPanel,
+  PropertyRow,
+  SelectRow,
+  SliderRow,
+  TextRow,
+  ToggleRow,
+} from './PropertyPanel';
+
+// Titled "Gallery" so it sorts above PropertyPanel/PropertyList/Rows in the
+// sidebar alphabetically (G < P < R). Acts as the visual root of the section.
+const meta: Meta = {
+  title: 'labkit/UI/Properties/Gallery',
+};
+export default meta;
+type Story = StoryObj;
+
+function BlockRows() {
+  const [opacity, setOpacity] = useState(0.65);
+  const [count, setCount] = useState(8);
+  const [name, setName] = useState('Untitled');
+  const [mode, setMode] = useState<'fill' | 'stroke' | 'both'>('both');
+  const [align, setAlign] = useState<'left' | 'center' | 'right'>('center');
+  return (
+    <PropertyPanel title="Block layout (default)">
+      <PropertyList>
+        <SliderRow
+          label="Opacity"
+          value={opacity}
+          min={0}
+          max={1}
+          step={0.01}
+          onChange={setOpacity}
+          format={(v) => v.toFixed(2)}
+        />
+        <NumberRow label="Count" value={count} onChange={setCount} min={0} max={100} />
+        <TextRow label="Name" value={name} onChange={setName} />
+        <SelectRow
+          label="Mode"
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: 'fill', label: 'Fill only' },
+            { value: 'stroke', label: 'Stroke only' },
+            { value: 'both', label: 'Fill + stroke' },
+          ]}
+        />
+        <ToggleRow
+          label="Align"
+          value={align}
+          onChange={setAlign}
+          options={[
+            { value: 'left', label: 'L' },
+            { value: 'center', label: 'C' },
+            { value: 'right', label: 'R' },
+          ]}
+        />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+function InlineRows() {
+  const [opacity, setOpacity] = useState(0.5);
+  const [count, setCount] = useState(8);
+  const [name, setName] = useState('Untitled');
+  const [mode, setMode] = useState<'fill' | 'stroke' | 'both'>('both');
+  const [align, setAlign] = useState<'left' | 'center' | 'right'>('center');
+  return (
+    <PropertyPanel title="Inline layout">
+      <PropertyList>
+        <SliderRow
+          label="Opacity"
+          layout="inline"
+          value={opacity}
+          min={0}
+          max={1}
+          step={0.01}
+          onChange={setOpacity}
+          format={(v) => v.toFixed(2)}
+        />
+        <NumberRow
+          label="Count"
+          layout="inline"
+          value={count}
+          onChange={setCount}
+          min={0}
+          max={100}
+        />
+        <TextRow label="Name" layout="inline" value={name} onChange={setName} />
+        <SelectRow
+          label="Mode"
+          layout="inline"
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: 'fill', label: 'Fill only' },
+            { value: 'stroke', label: 'Stroke only' },
+            { value: 'both', label: 'Fill + stroke' },
+          ]}
+        />
+        <ToggleRow
+          label="Align"
+          layout="inline"
+          value={align}
+          onChange={setAlign}
+          options={[
+            { value: 'left', label: 'L' },
+            { value: 'center', label: 'C' },
+            { value: 'right', label: 'R' },
+          ]}
+        />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+function IntrinsicRows() {
+  const [fill, setFill] = useState('#b08adb');
+  const [stroke, setStroke] = useState('#1a1428');
+  const [highlight, setHighlight] = useState('#7fb069');
+  const [shadow, setShadow] = useState('#000000');
+  const [visible, setVisible] = useState(true);
+  const [snap, setSnap] = useState(false);
+  return (
+    <PropertyPanel title="Intrinsic-layout variants">
+      <PropertyList>
+        <ColorRow label="Fill" value={fill} onChange={setFill} />
+        <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
+        <ColorRow label="Highlight" value={highlight} onChange={setHighlight} />
+        <ColorRow label="Shadow" value={shadow} onChange={setShadow} />
+        <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+        <CheckboxRow label="Snap to grid" value={snap} onChange={setSnap} />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+function CustomRows() {
+  return (
+    <PropertyPanel title="Custom (PropertyRow)">
+      <PropertyList>
+        <PropertyRow label="Tempo" readout="120 bpm">
+          <button type="button">Tap to set</button>
+        </PropertyRow>
+        <PropertyRow label="Free-form" layout="inline">
+          <code style={{ background: 'rgba(0,0,0,0.35)', padding: '2px 6px', borderRadius: 3 }}>
+            arbitrary children
+          </code>
+        </PropertyRow>
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+export const All: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+        gap: 16,
+        maxWidth: 1100,
+      }}
+    >
+      <BlockRows />
+      <InlineRows />
+      <IntrinsicRows />
+      <CustomRows />
+    </div>
+  ),
+};