@weasel-js/labkit 0.1.0

package/src/controls/ControlPanel.tsx

@@ -0,0 +1,249 @@
+import { useEffect, useRef, useState } from 'react';
+import type {
+  CheckboxField,
+  ColorField,
+  ConfigField,
+  NumberField,
+  SelectField,
+  SliderField,
+  TextField,
+} from './types';
+
+export interface ControlPanelProps<TC extends Record<string, unknown>> {
+  fields: ConfigField[];
+  config: TC;
+  setConfig: (key: keyof TC, value: unknown) => void;
+  className?: string;
+}
+
+export function ControlPanel<TC extends Record<string, unknown>>({
+  fields,
+  config,
+  setConfig,
+  className,
+}: ControlPanelProps<TC>) {
+  return (
+    <div className={className ? `lk-control-panel ${className}` : 'lk-control-panel'}>
+      {fields.map((field) => (
+        <ControlRow key={field.key} field={field} config={config} setConfig={setConfig} />
+      ))}
+    </div>
+  );
+}
+
+interface ControlRowProps<TC extends Record<string, unknown>> {
+  field: ConfigField;
+  config: TC;
+  setConfig: (key: keyof TC, value: unknown) => void;
+}
+
+function ControlRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: ControlRowProps<TC>) {
+  switch (field.type) {
+    case 'slider':
+      return <SliderRow field={field} config={config} setConfig={setConfig} />;
+    case 'checkbox':
+      return <CheckboxRow field={field} config={config} setConfig={setConfig} />;
+    case 'select':
+      return <SelectRow field={field} config={config} setConfig={setConfig} />;
+    case 'number':
+      return <NumberRow field={field} config={config} setConfig={setConfig} />;
+    case 'text':
+      return <TextRow field={field} config={config} setConfig={setConfig} />;
+    case 'color':
+      return <ColorRow field={field} config={config} setConfig={setConfig} />;
+    default:
+      return null;
+  }
+}
+
+type RowProps<F extends ConfigField, TC extends Record<string, unknown>> = {
+  field: F;
+  config: TC;
+  setConfig: (key: keyof TC, value: unknown) => void;
+};
+
+function SliderRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<SliderField, TC>) {
+  const value = (config[field.key] as number | undefined) ?? field.default;
+  return (
+    <div className="lk-control-row">
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+      <div className="lk-control-slider-row">
+        <input
+          id={`lk-ctrl-${field.key}`}
+          className="lk-control-input lk-control-input--range"
+          type="range"
+          min={field.min}
+          max={field.max}
+          step={field.step ?? 1}
+          value={value}
+          onChange={(e) => setConfig(field.key as keyof TC, Number(e.target.value))}
+        />
+        <span className="lk-control-slider-value">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+function CheckboxRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<CheckboxField, TC>) {
+  const value = (config[field.key] as boolean | undefined) ?? field.default;
+  return (
+    <div className="lk-control-row lk-control-row--inline">
+      <input
+        id={`lk-ctrl-${field.key}`}
+        className="lk-control-input lk-control-input--checkbox"
+        type="checkbox"
+        checked={value}
+        onChange={(e) => setConfig(field.key as keyof TC, e.target.checked)}
+      />
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+    </div>
+  );
+}
+
+function SelectRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<SelectField, TC>) {
+  const value = (config[field.key] as string | undefined) ?? field.default;
+  return (
+    <div className="lk-control-row">
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+      <select
+        id={`lk-ctrl-${field.key}`}
+        className="lk-control-input"
+        value={value}
+        onChange={(e) => setConfig(field.key as keyof TC, e.target.value)}
+      >
+        {field.options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+function NumberRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<NumberField, TC>) {
+  const value = (config[field.key] as number | undefined) ?? field.default;
+  return (
+    <div className="lk-control-row">
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+      <input
+        id={`lk-ctrl-${field.key}`}
+        className="lk-control-input"
+        type="number"
+        value={value}
+        min={field.min}
+        max={field.max}
+        step={field.step}
+        onChange={(e) => setConfig(field.key as keyof TC, Number(e.target.value))}
+        onBlur={(e) => {
+          const n = Number(e.target.value);
+          if (!Number.isFinite(n)) return;
+          let clamped = n;
+          if (field.min !== undefined && clamped < field.min) clamped = field.min;
+          if (field.max !== undefined && clamped > field.max) clamped = field.max;
+          if (clamped !== n) setConfig(field.key as keyof TC, clamped);
+        }}
+      />
+    </div>
+  );
+}
+
+function TextRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<TextField, TC>) {
+  const debounceMs = field.debounceMs ?? 150;
+  const initial = (config[field.key] as string | undefined) ?? field.default;
+  const [local, setLocal] = useState(initial);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastExternal = useRef(initial);
+
+  useEffect(() => {
+    const ext = (config[field.key] as string | undefined) ?? field.default;
+    if (ext !== lastExternal.current) {
+      lastExternal.current = ext;
+      setLocal(ext);
+    }
+  }, [config, field.key, field.default]);
+
+  return (
+    <div className="lk-control-row">
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+      <input
+        id={`lk-ctrl-${field.key}`}
+        className="lk-control-input"
+        type="text"
+        value={local}
+        placeholder={field.placeholder}
+        maxLength={field.maxLength}
+        onChange={(e) => {
+          const next = e.target.value;
+          setLocal(next);
+          if (timer.current) clearTimeout(timer.current);
+          if (debounceMs === 0) {
+            lastExternal.current = next;
+            setConfig(field.key as keyof TC, next);
+          } else {
+            timer.current = setTimeout(() => {
+              lastExternal.current = next;
+              setConfig(field.key as keyof TC, next);
+            }, debounceMs);
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+function ColorRow<TC extends Record<string, unknown>>({
+  field,
+  config,
+  setConfig,
+}: RowProps<ColorField, TC>) {
+  const value = (config[field.key] as string | undefined) ?? field.default;
+  return (
+    <div className="lk-control-row lk-control-row--inline">
+      <label className="lk-control-label" htmlFor={`lk-ctrl-${field.key}`}>
+        {field.label}
+      </label>
+      <input
+        id={`lk-ctrl-${field.key}`}
+        className="lk-control-input lk-control-input--color"
+        type="color"
+        value={value}
+        onChange={(e) => setConfig(field.key as keyof TC, e.target.value)}
+      />
+    </div>
+  );
+}

package/src/controls/index.ts

@@ -0,0 +1,12 @@
+export { ControlPanel } from './ControlPanel';
+export type {
+  CheckboxField,
+  ColorField,
+  ConfigField,
+  ConfigFieldType,
+  NumberField,
+  SelectField,
+  SelectOption,
+  SliderField,
+  TextField,
+} from './types';

package/src/controls/types.ts

@@ -0,0 +1,61 @@
+export type ConfigFieldType = 'slider' | 'checkbox' | 'select' | 'number' | 'text' | 'color';
+
+export interface ConfigFieldBase {
+  key: string;
+  label: string;
+  type: ConfigFieldType;
+}
+
+export interface SliderField extends ConfigFieldBase {
+  type: 'slider';
+  default: number;
+  min: number;
+  max: number;
+  step?: number;
+}
+
+export interface CheckboxField extends ConfigFieldBase {
+  type: 'checkbox';
+  default: boolean;
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectField extends ConfigFieldBase {
+  type: 'select';
+  default: string;
+  options: SelectOption[];
+}
+
+export interface NumberField extends ConfigFieldBase {
+  type: 'number';
+  default: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface TextField extends ConfigFieldBase {
+  type: 'text';
+  default: string;
+  placeholder?: string;
+  maxLength?: number;
+  /** Milliseconds to debounce live setConfig calls. Default 150 ms. Set to 0 to disable. */
+  debounceMs?: number;
+}
+
+export interface ColorField extends ConfigFieldBase {
+  type: 'color';
+  default: string;
+}
+
+export type ConfigField =
+  | SliderField
+  | CheckboxField
+  | SelectField
+  | NumberField
+  | TextField
+  | ColorField;

package/src/dragdrop/DragDropRuntime.tsx

@@ -0,0 +1,135 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { screenToWorld } from '../canvas/canvasCoords';
+import type {
+  DragDropCapability,
+  DragFeedback,
+  PaletteItem,
+  Point,
+  ViewTransform,
+} from '../instrument/types';
+import { DragGhost } from './DragGhost';
+
+export interface DragState {
+  item: PaletteItem;
+  screenPos: Point;
+  feedback: DragFeedback | null;
+}
+
+export interface UseDragDropArgs<TS, TC> {
+  capability: DragDropCapability<TS, TC>;
+  canvasContainerRef: RefObject<HTMLElement | null>;
+  view: ViewTransform;
+  state: TS;
+  config: TC;
+  setState: (next: TS | ((prev: TS) => TS)) => void;
+  emit: (event: string) => void;
+}
+
+export interface UseDragDropResult {
+  drag: DragState | null;
+  startDrag: (item: PaletteItem, originScreenPos: Point) => void;
+}
+
+export function useDragDrop<TS, TC>({
+  capability,
+  canvasContainerRef,
+  view,
+  state,
+  config,
+  setState,
+  emit,
+}: UseDragDropArgs<TS, TC>): UseDragDropResult {
+  const [drag, setDrag] = useState<DragState | null>(null);
+  const dragRef = useRef<DragState | null>(null);
+  dragRef.current = drag;
+  const rafThrottle = useRef<number | null>(null);
+
+  const isOverCanvas = useCallback(
+    (screenPos: Point): boolean => {
+      const el = canvasContainerRef.current;
+      if (!el) return false;
+      const r = el.getBoundingClientRect();
+      return (
+        screenPos.x >= r.left &&
+        screenPos.x <= r.right &&
+        screenPos.y >= r.top &&
+        screenPos.y <= r.bottom
+      );
+    },
+    [canvasContainerRef],
+  );
+
+  const screenToWorldFromContainer = useCallback(
+    (screenPos: Point): Point | null => {
+      const el = canvasContainerRef.current;
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view);
+    },
+    [canvasContainerRef, view],
+  );
+
+  useEffect(() => {
+    if (!drag) return;
+    const handleMove = (e: PointerEvent) => {
+      const screenPos = { x: e.clientX, y: e.clientY };
+      const current = dragRef.current;
+      if (!current) return;
+      if (rafThrottle.current !== null) {
+        dragRef.current = { ...current, screenPos };
+        setDrag(dragRef.current);
+        return;
+      }
+      rafThrottle.current = requestAnimationFrame(() => {
+        rafThrottle.current = null;
+        const active = dragRef.current;
+        if (!active) return;
+        let feedback: DragFeedback | null = null;
+        if (capability.onDragOver && isOverCanvas(screenPos)) {
+          const world = screenToWorldFromContainer(screenPos);
+          if (world) feedback = capability.onDragOver(world, active.item, state, config);
+        }
+        setDrag({ ...active, screenPos, feedback });
+      });
+    };
+    const handleUp = (e: PointerEvent) => {
+      const screenPos = { x: e.clientX, y: e.clientY };
+      const active = dragRef.current;
+      if (!active) return;
+      if (rafThrottle.current !== null) {
+        cancelAnimationFrame(rafThrottle.current);
+        rafThrottle.current = null;
+      }
+      if (isOverCanvas(screenPos)) {
+        const world = screenToWorldFromContainer(screenPos);
+        if (world) {
+          const nextState = capability.onDrop(world, active.item, state, config);
+          setState(nextState);
+          emit('canvas.itemAdded');
+        }
+      }
+      setDrag(null);
+    };
+    window.addEventListener('pointermove', handleMove);
+    window.addEventListener('pointerup', handleUp);
+    return () => {
+      window.removeEventListener('pointermove', handleMove);
+      window.removeEventListener('pointerup', handleUp);
+    };
+  }, [drag, capability, state, config, setState, emit, isOverCanvas, screenToWorldFromContainer]);
+
+  const startDrag = useCallback((item: PaletteItem, originScreenPos: Point) => {
+    setDrag({ item, screenPos: originScreenPos, feedback: null });
+  }, []);
+
+  return { drag, startDrag };
+}
+
+export interface DragOverlayProps {
+  drag: DragState | null;
+}
+
+export function DragOverlay({ drag }: DragOverlayProps) {
+  if (!drag) return null;
+  return <DragGhost item={drag.item} screenPos={drag.screenPos} />;
+}

package/src/dragdrop/DragGhost.less

@@ -0,0 +1,17 @@
+.lk-drag-ghost {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  padding: 4px 8px;
+  background: var(--lk-color-surface, #fff);
+  border: 1px solid var(--lk-color-border, #999);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  font: inherit;
+  color: inherit;
+  opacity: 0.9;
+}
+
+.lk-drag-ghost__label {
+  white-space: nowrap;
+}

package/src/dragdrop/DragGhost.tsx

@@ -0,0 +1,24 @@
+import { type ReactPortal, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { PaletteItem, Point } from '../instrument/types';
+
+export interface DragGhostProps {
+  item: PaletteItem;
+  screenPos: Point;
+}
+
+export function DragGhost({ item, screenPos }: DragGhostProps): ReactPortal | null {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted || typeof document === 'undefined') return null;
+  const style = {
+    left: `${screenPos.x + 12}px`,
+    top: `${screenPos.y + 12}px`,
+  };
+  return createPortal(
+    <div className="lk-drag-ghost" style={style}>
+      <span className="lk-drag-ghost__label">{item.label}</span>
+    </div>,
+    document.body,
+  );
+}

package/src/dragdrop/Palette.less

@@ -0,0 +1,34 @@
+.lk-palette {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--lk-spacing-sm, 8px);
+  padding: var(--lk-spacing-sm, 8px);
+}
+
+.lk-palette__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: var(--lk-spacing-sm, 8px);
+  background: var(--lk-color-surface, #fff);
+  border: 1px solid var(--lk-color-border, #d0d0d0);
+  border-radius: 4px;
+  cursor: grab;
+  font: inherit;
+  color: inherit;
+  user-select: none;
+  touch-action: none;
+
+  &:hover {
+    background: var(--lk-color-surface-hover, #f4f4f4);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.lk-palette__label {
+  pointer-events: none;
+}

package/src/dragdrop/Palette.tsx

@@ -0,0 +1,27 @@
+import type { PaletteItem, Point } from '../instrument/types';
+
+export interface PaletteProps {
+  items: PaletteItem[];
+  onDragStart: (item: PaletteItem, originScreenPos: Point) => void;
+  className?: string;
+}
+
+export function Palette({ items, onDragStart, className }: PaletteProps) {
+  return (
+    <div className={className ? `lk-palette ${className}` : 'lk-palette'}>
+      {items.map((item) => (
+        <button
+          type="button"
+          key={item.id}
+          className="lk-palette__item"
+          onPointerDown={(e) => {
+            e.preventDefault();
+            onDragStart(item, { x: e.clientX, y: e.clientY });
+          }}
+        >
+          <span className="lk-palette__label">{item.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}