@weasel-js/labkit 0.1.0

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

@@ -0,0 +1,396 @@
+// Visual parity check: rebuild a slice of the speech-balloons lab side panels
+// using only labkit primitives. If the readouts, units, alpha, two-per-row
+// effect bodies, subpanels, and accent-tinted effect cards look the same as
+// the SB reference, we've captured the styling correctly.
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+  CheckboxRow,
+  ColorRow,
+  EffectCard,
+  EffectCardList,
+  PropertyList,
+  PropertyPanel,
+  SelectRow,
+  SliderRow,
+  Subpanel,
+} from './';
+
+const meta: Meta = {
+  title: 'labkit/UI/Properties/PropertyPanel/SpeechBalloonPanels',
+};
+export default meta;
+type Story = StoryObj;
+
+function BodyPanel() {
+  const [base, setBase] = useState<'rectangle' | 'oval' | 'polygon' | 'cloud'>('rectangle');
+  const [width, setWidth] = useState(220);
+  const [height, setHeight] = useState(140);
+  const [lean, setLean] = useState(0);
+  const [textColor, setTextColor] = useState('#e6e7ec');
+  const [textAlpha, setTextAlpha] = useState(1);
+
+  return (
+    <PropertyPanel title={`Body — ${base}`}>
+      <PropertyList>
+        <SelectRow
+          label="Base shape"
+          value={base}
+          onChange={(v) => setBase(v as typeof base)}
+          options={[
+            { value: 'rectangle', label: 'rectangle' },
+            { value: 'oval', label: 'oval' },
+            { value: 'polygon', label: 'polygon' },
+            { value: 'cloud', label: 'cloud' },
+          ]}
+        />
+        <SliderRow
+          label="Width"
+          value={width}
+          min={60}
+          max={500}
+          step={2}
+          unit="px"
+          onChange={setWidth}
+        />
+        <SliderRow
+          label="Height"
+          value={height}
+          min={20}
+          max={500}
+          step={2}
+          unit="px"
+          onChange={setHeight}
+        />
+        <SliderRow
+          label="Italic lean"
+          value={lean}
+          min={-25}
+          max={25}
+          step={0.5}
+          unit={<sup>°</sup>}
+          onChange={setLean}
+        />
+        <ColorRow
+          label="Text color"
+          value={textColor}
+          onChange={setTextColor}
+          alpha={textAlpha}
+          onAlphaChange={setTextAlpha}
+        />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+// A single tail's editor body — demonstrates pack='pairs' + a Subpanel
+// divider for the shape-specific section (e.g. Bubbles parameters).
+function TailBody() {
+  const [shape, setShape] = useState<'classic' | 'bubbles' | 'lightning' | 'wavy'>('bubbles');
+  const [angle, setAngle] = useState(115);
+  const [outAngle, setOutAngle] = useState(0);
+  const [arc, setArc] = useState(0);
+  const [size, setSize] = useState(60);
+  const [bubbleDiameter, setBubbleDiameter] = useState(30);
+  const [count, setCount] = useState(3);
+  const [gap, setGap] = useState(0.15);
+  const [radial, setRadial] = useState(0);
+
+  return (
+    <PropertyList pack="pairs">
+      <SelectRow
+        label="Shape"
+        value={shape}
+        onChange={(v) => setShape(v as typeof shape)}
+        options={[
+          { value: 'classic', label: 'classic' },
+          { value: 'bubbles', label: 'bubbles' },
+          { value: 'lightning', label: 'lightning' },
+          { value: 'wavy', label: 'wavy' },
+        ]}
+      />
+      <SliderRow
+        label="Angle"
+        value={angle}
+        min={0}
+        max={359}
+        unit={<sup>°</sup>}
+        onChange={setAngle}
+      />
+      <SliderRow
+        label="Tip angle"
+        value={outAngle}
+        min={-90}
+        max={90}
+        unit={<sup>°</sup>}
+        onChange={setOutAngle}
+      />
+      <SliderRow
+        label="Bend"
+        value={arc}
+        min={-1}
+        max={1}
+        step={0.02}
+        format={(v) => v.toFixed(2)}
+        onChange={setArc}
+      />
+      <SliderRow
+        label="Length"
+        value={size}
+        min={8}
+        max={220}
+        step={0.5}
+        unit="px"
+        onChange={setSize}
+      />
+      {shape === 'bubbles' && (
+        <Subpanel title="Bubbles">
+          <SliderRow
+            label="Size"
+            value={bubbleDiameter}
+            min={8}
+            max={120}
+            unit="px"
+            onChange={setBubbleDiameter}
+          />
+          <SliderRow label="Count" value={count} min={1} max={8} onChange={setCount} />
+          <SliderRow
+            label="Gap"
+            value={gap}
+            min={-1}
+            max={1}
+            step={0.02}
+            format={(v) => v.toFixed(2)}
+            onChange={setGap}
+          />
+          <SliderRow
+            label="Base distance"
+            value={radial}
+            min={-60}
+            max={60}
+            step={0.5}
+            unit="px"
+            onChange={setRadial}
+          />
+        </Subpanel>
+      )}
+    </PropertyList>
+  );
+}
+
+function StrokePanel() {
+  const [width, setWidth] = useState(2);
+  const [color, setColor] = useState('#161921');
+  const [alpha, setAlpha] = useState(1);
+  return (
+    <PropertyPanel title="Stroke">
+      <PropertyList pack="pairs">
+        <SliderRow
+          label="Width"
+          value={width}
+          min={0.5}
+          max={12}
+          step={0.5}
+          unit="px"
+          format={(v) => v.toFixed(1)}
+          onChange={setWidth}
+        />
+        <ColorRow
+          label="Color"
+          value={color}
+          onChange={setColor}
+          alpha={alpha}
+          onAlphaChange={setAlpha}
+        />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+function ShadowPanel() {
+  const [dx, setDx] = useState(4);
+  const [dy, setDy] = useState(8);
+  const [blur, setBlur] = useState(10);
+  const [opacity, setOpacity] = useState(0.4);
+  const [enabled, setEnabled] = useState(true);
+  return (
+    <PropertyPanel title="Shadow">
+      <PropertyList pack="pairs">
+        <div className="lk-property-list__span">
+          <CheckboxRow label="Enabled" value={enabled} onChange={setEnabled} />
+        </div>
+        <SliderRow
+          label="Offset X"
+          value={dx}
+          min={-20}
+          max={20}
+          step={0.5}
+          unit="px"
+          format={(v) => v.toFixed(1)}
+          onChange={setDx}
+        />
+        <SliderRow
+          label="Offset Y"
+          value={dy}
+          min={-20}
+          max={20}
+          step={0.5}
+          unit="px"
+          format={(v) => v.toFixed(1)}
+          onChange={setDy}
+        />
+        <SliderRow
+          label="Blur"
+          value={blur}
+          min={0}
+          max={30}
+          step={0.5}
+          unit="px"
+          format={(v) => v.toFixed(1)}
+          onChange={setBlur}
+        />
+        <SliderRow
+          label="Opacity"
+          value={opacity}
+          min={0}
+          max={1}
+          step={0.05}
+          format={(v) => v.toFixed(2)}
+          onChange={setOpacity}
+        />
+      </PropertyList>
+    </PropertyPanel>
+  );
+}
+
+export const LeftSidebar: Story = {
+  render: () => (
+    <div style={{ width: 360, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <BodyPanel />
+      <StrokePanel />
+      <ShadowPanel />
+    </div>
+  ),
+};
+
+// ── Right sidebar: tails ───────────────────────────────────────────
+// Each tail is an EffectCard with a per-instance accent (--lk-panel-accent)
+// that re-binds --lk-accent inside the card. Drag the badge handle to reorder.
+
+interface TailItem {
+  id: number;
+  shape: string;
+  accent: string;
+}
+
+const TAIL_PALETTE = ['#7ec8e3', '#f0a35c', '#a48bd4', '#7fb069', '#d46aaa'];
+
+export const RightSidebarTails: Story = {
+  render: () => {
+    function TailsList() {
+      const [tails, setTails] = useState<TailItem[]>([
+        { id: 1, shape: 'classic', accent: TAIL_PALETTE[0]! },
+        { id: 2, shape: 'bubbles', accent: TAIL_PALETTE[1]! },
+        { id: 3, shape: 'wavy', accent: TAIL_PALETTE[2]! },
+      ]);
+      const reorder = (sourceId: number, targetId: number, position: 'before' | 'after') => {
+        setTails((prev) => {
+          const next = prev.filter((t) => t.id !== sourceId);
+          const idx = next.findIndex((t) => t.id === targetId);
+          const insertAt = position === 'before' ? idx : idx + 1;
+          const src = prev.find((t) => t.id === sourceId)!;
+          next.splice(insertAt, 0, src);
+          return next;
+        });
+      };
+      const remove = (id: number) => setTails((prev) => prev.filter((t) => t.id !== id));
+      return (
+        <EffectCardList
+          items={tails}
+          onReorder={reorder}
+          defaultExpandedIds={tails.map((t) => t.id)}
+          renderItem={(tail, { cardProps }) => (
+            <EffectCard
+              {...cardProps}
+              accent={tail.accent}
+              index={tails.findIndex((t) => t.id === tail.id)}
+              title={tail.shape}
+              primary={<>{Math.round(60 + tail.id * 30)}°</>}
+              onRemove={() => remove(tail.id)}
+            >
+              <TailBody />
+            </EffectCard>
+          )}
+        />
+      );
+    }
+    return (
+      <div style={{ width: 360, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <TailsList />
+      </div>
+    );
+  },
+};
+
+// ── Effect cards without accent — for fill / stroke / shadow stacks ─
+
+export const LayerStack: Story = {
+  render: () => {
+    function Stack() {
+      const [items, setItems] = useState([
+        { id: 1, kind: 'fill' },
+        { id: 2, kind: 'stroke' },
+        { id: 3, kind: 'shadow' },
+      ]);
+      const reorder = (sourceId: number, targetId: number, position: 'before' | 'after') => {
+        setItems((prev) => {
+          const next = prev.filter((t) => t.id !== sourceId);
+          const idx = next.findIndex((t) => t.id === targetId);
+          const insertAt = position === 'before' ? idx : idx + 1;
+          const src = prev.find((t) => t.id === sourceId)!;
+          next.splice(insertAt, 0, src);
+          return next;
+        });
+      };
+      return (
+        <EffectCardList
+          items={items}
+          onReorder={reorder}
+          defaultExpandedIds={items.map((i) => i.id)}
+          renderItem={(item, { cardProps }) => (
+            <EffectCard
+              {...cardProps}
+              title={item.kind}
+              onRemove={() => setItems((prev) => prev.filter((t) => t.id !== item.id))}
+            >
+              <PropertyList pack="pairs">
+                <SliderRow
+                  label="Sample A"
+                  value={12}
+                  min={0}
+                  max={64}
+                  unit="px"
+                  onChange={() => {}}
+                />
+                <SliderRow
+                  label="Sample B"
+                  value={45}
+                  min={-180}
+                  max={180}
+                  unit={<sup>°</sup>}
+                  onChange={() => {}}
+                />
+              </PropertyList>
+            </EffectCard>
+          )}
+        />
+      );
+    }
+    return (
+      <div style={{ width: 360, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <Stack />
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { TextRow } from './PropertyPanel';
+import { SideBySide } from './storyLayouts';
+
+const meta: Meta<typeof TextRow> = {
+  title: 'labkit/UI/Properties/Rows/TextRow',
+  component: TextRow,
+};
+export default meta;
+type Story = StoryObj<typeof TextRow>;
+
+function Controlled({
+  initial,
+  label,
+  placeholder,
+  maxLength,
+  layout,
+}: {
+  initial: string;
+  label: string;
+  placeholder?: string;
+  maxLength?: number;
+  layout?: 'block' | 'inline';
+}) {
+  const [value, setValue] = useState(initial);
+  return (
+    <TextRow
+      label={label}
+      value={value}
+      onChange={setValue}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      layout={layout}
+    />
+  );
+}
+
+export const BothLayouts: Story = {
+  render: () => (
+    <SideBySide
+      block={<Controlled initial="Untitled" label="Name" />}
+      inline={<Controlled initial="Untitled" label="Name" layout="inline" />}
+    />
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <Controlled initial="" label="Name" placeholder="Type a name…" />
+    </div>
+  ),
+};
+
+export const Capped: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <Controlled initial="ABCD" label="Tag" maxLength={4} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { ToggleRow } from './PropertyPanel';
+import { SideBySide } from './storyLayouts';
+
+const meta: Meta<typeof ToggleRow> = {
+  title: 'labkit/UI/Properties/Rows/ToggleRow',
+  component: ToggleRow,
+};
+export default meta;
+type Story = StoryObj<typeof ToggleRow>;
+
+const ALIGN_OPTIONS = [
+  { value: 'left', label: 'L' },
+  { value: 'center', label: 'C' },
+  { value: 'right', label: 'R' },
+] as const;
+
+function Align({ layout }: { layout?: 'block' | 'inline' }) {
+  const [value, setValue] = useState<'left' | 'center' | 'right'>('center');
+  return (
+    <ToggleRow
+      label="Align"
+      value={value}
+      onChange={setValue}
+      options={ALIGN_OPTIONS}
+      layout={layout}
+    />
+  );
+}
+
+export const BothLayouts: Story = {
+  render: () => <SideBySide block={<Align />} inline={<Align layout="inline" />} />,
+};
+
+function TwoOptions() {
+  const [value, setValue] = useState<'on' | 'off'>('on');
+  return (
+    <ToggleRow
+      label="Snapping"
+      value={value}
+      onChange={setValue}
+      options={[
+        { value: 'on', label: 'On' },
+        { value: 'off', label: 'Off' },
+      ]}
+    />
+  );
+}
+
+export const TwoOption: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <TwoOptions />
+    </div>
+  ),
+};

package/src/ui/properties/index.ts

@@ -0,0 +1,39 @@
+export type { CurveFieldProps, CurveMark } from './CurveField';
+export { CurveField } from './CurveField';
+export type {
+  EffectCardListItem,
+  EffectCardListProps,
+  EffectCardProps,
+  SubpanelProps,
+} from './EffectCard';
+export { EffectCard, EffectCardList, Subpanel } from './EffectCard';
+export type { PropertyGroupProps } from './PropertyGroup';
+export { PropertyGroup } from './PropertyGroup';
+export type {
+  CheckboxRowProps,
+  ColorRowProps,
+  NumberRowProps,
+  PropertyListPack,
+  PropertyListProps,
+  PropertyPanelProps,
+  PropertyRowLayout,
+  PropertyRowProps,
+  PropertyRowVariant,
+  SelectOption,
+  SelectRowProps,
+  SliderRowProps,
+  TextRowProps,
+  ToggleRowProps,
+} from './PropertyPanel';
+export {
+  CheckboxRow,
+  ColorRow,
+  NumberRow,
+  PropertyList,
+  PropertyPanel,
+  PropertyRow,
+  SelectRow,
+  SliderRow,
+  TextRow,
+  ToggleRow,
+} from './PropertyPanel';

package/src/ui/properties/storyLayouts.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Side-by-side comparison used by row stories to show block + inline layouts
+ * at the same time. Not a stories file — name has no .stories. suffix so
+ * Storybook's glob skips it.
+ */
+export function SideBySide({ block, inline }: { block: ReactNode; inline: ReactNode }) {
+  const labelStyle = {
+    font: '300 0.72rem/1 Oswald, system-ui',
+    color: 'var(--lk-text-muted)',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.08em',
+    margin: '0 0 8px',
+  };
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: 24,
+        width: 720,
+        alignItems: 'start',
+      }}
+    >
+      <div>
+        <div style={labelStyle}>Block</div>
+        {block}
+      </div>
+      <div>
+        <div style={labelStyle}>Inline</div>
+        {inline}
+      </div>
+    </div>
+  );
+}

package/src/undo/eventBus.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createEventBus } from './eventBus';
+
+describe('EventBus', () => {
+  it('fires registered listener for matching event', () => {
+    const bus = createEventBus();
+    const fn = vi.fn();
+    bus.on('foo', fn);
+    bus.emit('foo');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire on different event name', () => {
+    const bus = createEventBus();
+    const fn = vi.fn();
+    bus.on('foo', fn);
+    bus.emit('bar');
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('unsubscribe stops further calls', () => {
+    const bus = createEventBus();
+    const fn = vi.fn();
+    const off = bus.on('foo', fn);
+    off();
+    bus.emit('foo');
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('multiple listeners for same event all fire', () => {
+    const bus = createEventBus();
+    const a = vi.fn();
+    const b = vi.fn();
+    bus.on('foo', a);
+    bus.on('foo', b);
+    bus.emit('foo');
+    expect(a).toHaveBeenCalled();
+    expect(b).toHaveBeenCalled();
+  });
+
+  it('clear removes all listeners', () => {
+    const bus = createEventBus();
+    const fn = vi.fn();
+    bus.on('foo', fn);
+    bus.clear();
+    bus.emit('foo');
+    expect(fn).not.toHaveBeenCalled();
+  });
+});

package/src/undo/eventBus.ts

@@ -0,0 +1,32 @@
+export type EventListener = () => void;
+
+export interface EventBus {
+  on(event: string, listener: EventListener): () => void;
+  emit(event: string): void;
+  clear(): void;
+}
+
+export function createEventBus(): EventBus {
+  const listeners = new Map<string, Set<EventListener>>();
+  return {
+    on(event, listener) {
+      let set = listeners.get(event);
+      if (!set) {
+        set = new Set();
+        listeners.set(event, set);
+      }
+      set.add(listener);
+      return () => {
+        set?.delete(listener);
+      };
+    },
+    emit(event) {
+      const set = listeners.get(event);
+      if (!set) return;
+      for (const fn of [...set]) fn();
+    },
+    clear() {
+      listeners.clear();
+    },
+  };
+}

package/src/undo/index.ts

@@ -0,0 +1,5 @@
+export type { UndoCapability } from '../instrument/types';
+export type { EventBus, EventListener } from './eventBus';
+export { createEventBus } from './eventBus';
+export type { UndoStack } from './undoStack';
+export { clearUndo, emptyStack, pushSnapshot, redo, undo } from './undoStack';