@weasel-js/labkit 1.2.0 → 1.3.0

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>
-  );
-}

package/src/ui/properties/EffectCard.tsx

@@ -1,324 +0,0 @@
-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.
-
-/** Props for `<Subpanel>`. */
-export interface SubpanelProps {
-  title: ReactNode;
-  children: ReactNode;
-  className?: string;
-}
-
-/** A typographic divider inside a property list: a small title flanked by a
- *  rule. Purely a heading — use `<PropertyGroup>` for a bordered section. */
-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 --wzl-accent
-// inside the card) every descendant control that reads from the accent token.
-
-/** Props for `<EffectCard>`. */
-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;
-}
-
-/** An accented, collapsible card for one item in a list of like things —
- *  effects, layers, tails. The accent color rebinds the theme accent token
- *  within the card, so its controls pick it up too. */
-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 --wzl-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.
-
-/** The minimum an item must carry to appear in an `<EffectCardList>`. */
-export interface EffectCardListItem {
-  id: string | number;
-}
-
-/** Props for `<EffectCardList>`. */
-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']>;
-}
-
-/** A drag-reorderable list of `<EffectCard>`s. Owns the expanded and dragging
- *  state and hands it back to `renderItem`, so the caller only supplies each
- *  card's contents. */
-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

@@ -1,178 +0,0 @@
-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>
-  ),
-};