@weasel-js/labkit 1.3.0-pre.0 → 1.4.0-pre.0

package/src/ui/format.ts

@@ -1,30 +0,0 @@
-// Display formatting helpers shared across the UI.
-//
-// House style: render negative numbers with the typographic MINUS SIGN
-// (U+2212, "−") instead of ASCII hyphen-minus ("-"). Editing surfaces should
-// accept either glyph on input via `parseSignedNumber`.
-
-const MINUS = '−';
-
-/** Format a finite number for display, swapping the leading "-" to U+2212. */
-export function formatNumber(n: number, fractionDigits?: number): string {
-  if (!Number.isFinite(n)) return String(n);
-  const s = fractionDigits == null ? String(n) : n.toFixed(fractionDigits);
-  return s.startsWith('-') ? MINUS + s.slice(1) : s;
-}
-
-/** Parse a string that may use U+2212 or ASCII hyphen-minus for the negative sign. */
-export function parseSignedNumber(s: string): number {
-  return Number(s.replace(MINUS, '-'));
-}
-
-/** Zoom for display. Below 2x a percentage reads naturally; past it the
- *  numbers get long and a multiplier is what people say out loud, so 250%
- *  shows as `2.5x`. Past 100x a tenth is noise, so the decimal is dropped
- *  and thousands are grouped: `1009.74` reads as `1,010x`. */
-export function formatZoom(zoom: number): string {
-  if (!Number.isFinite(zoom)) return String(zoom);
-  if (zoom <= 2) return `${formatNumber(Math.round(zoom * 100))}%`;
-  if (zoom >= 100) return `${Math.round(zoom).toLocaleString('en-US')}x`;
-  return `${formatNumber(Math.round(zoom * 10) / 10)}x`;
-}

package/src/ui/layers/LayerStack.less

@@ -1,143 +0,0 @@
-.lk-layer-stack {
-  display: grid;
-  gap: 8px;
-}
-
-.lk-layer-stack__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.lk-layer-stack__title {
-  margin: 0;
-  font-family: var(--wzl-font-display);
-  font-weight: var(--wzl-font-weight-light);
-  font-size: var(--wzl-font-size-lg);
-  color: var(--wzl-fg);
-}
-
-.lk-layer-stack__palette {
-  display: flex;
-  gap: 4px;
-}
-
-.lk-layer-stack__add {
-  background: transparent;
-  border: 1px dashed var(--wzl-border);
-  border-radius: var(--wzl-radius-sm);
-  padding: 2px 8px;
-  font-size: var(--wzl-font-size-sm);
-  color: var(--wzl-fg-subtle);
-  cursor: pointer;
-}
-
-.lk-layer-stack__add:hover {
-  background: var(--wzl-surface-raised);
-  color: var(--wzl-fg);
-}
-
-.lk-layer-stack__list {
-  display: grid;
-  gap: 6px;
-}
-
-.lk-layer-stack__drop-hint {
-  height: 2px;
-  background: var(--wzl-accent);
-  border-radius: var(--wzl-radius-sm);
-}
-
-.lk-layer-stack__empty {
-  color: var(--wzl-fg-subtle);
-  font-size: var(--wzl-font-size);
-  padding: 8px;
-  text-align: center;
-}
-
-.lk-layer-card {
-  background: var(--wzl-surface-raised);
-  border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-md);
-  overflow: hidden;
-}
-
-.lk-layer-card.has-accent {
-  // Re-bind --wzl-accent inside the card so descendant controls (slider tracks
-  // and thumbs, readouts, etc.) tint to the per-card accent instead of the
-  // global theme accent. Mirrors EffectCard's behavior.
-  --wzl-accent: var(--lk-layer-card-accent);
-  border-left: 3px solid var(--lk-layer-card-accent);
-}
-
-.lk-layer-card.is-dragging {
-  opacity: 0.5;
-}
-
-.lk-layer-card__head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-}
-
-// Prefixed with `.lk-root` to outrank the .lk-root button rule in base.less,
-// which would otherwise paint a chrome border + elevated bg on these buttons.
-.lk-root .lk-layer-card__handle {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg-subtle);
-  padding: 2px 4px;
-  cursor: grab;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  height: 22px;
-  border-radius: var(--wzl-radius-sm);
-  font-weight: var(--wzl-font-weight-bold);
-  font-size: var(--wzl-font-size);
-}
-
-.lk-layer-card.has-accent .lk-layer-card__handle {
-  background: var(--lk-layer-card-accent);
-  color: white;
-}
-
-.lk-layer-card__handle:active {
-  cursor: grabbing;
-}
-
-.lk-layer-card__kind,
-.lk-layer-card__primary {
-  flex: 1;
-  font-size: var(--wzl-font-size);
-}
-
-.lk-layer-card__primary {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg);
-  font: inherit;
-  text-transform: uppercase;
-  letter-spacing: var(--wzl-tracking-wide);
-}
-
-.lk-root .lk-layer-card__remove {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg-subtle);
-  font-size: var(--wzl-font-size-lg);
-  cursor: pointer;
-  padding: 2px 6px;
-}
-
-.lk-layer-card__remove:hover {
-  color: var(--wzl-fg);
-}
-
-.lk-layer-card__body {
-  padding: 8px;
-  border-top: 1px solid var(--wzl-border);
-}

package/src/ui/layers/LayerStack.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { LayerStack, type LayerStackItem } from './LayerStack';
-
-const meta: Meta<typeof LayerStack> = {
-  title: 'labkit/UI/Layers/LayerStack',
-  component: LayerStack,
-};
-export default meta;
-
-const seed: LayerStackItem[] = [
-  { id: 1, kind: 'fill', primaryValue: 'dome', primaryOptions: ['aqua', 'bevel', 'dome'] },
-  { id: 2, kind: 'tail', accent: '#f55', badge: '1' },
-  { id: 3, kind: 'shadow' },
-];
-
-export const Basic: StoryObj<typeof LayerStack> = {
-  render: () => {
-    const [items, setItems] = useState(seed);
-    let next = 4;
-    return (
-      <div style={{ width: 320 }}>
-        <LayerStack
-          title="Layers"
-          items={items}
-          paletteKinds={['fill', 'tail', 'shadow']}
-          onAdd={(kind) => setItems([...items, { id: next++, kind }])}
-          onRemove={(id) => setItems(items.filter((i) => i.id !== id))}
-          onReorder={(ids) => {
-            const byId = new Map(items.map((i) => [i.id, i]));
-            const reordered = ids.flatMap((id) => {
-              const found = byId.get(id);
-              return found ? [found] : [];
-            });
-            setItems(reordered);
-          }}
-          onPrimaryChange={(id, value) =>
-            setItems(items.map((i) => (i.id === id ? { ...i, primaryValue: value } : i)))
-          }
-          renderBody={(item) => <div style={{ color: '#888' }}>body for {item.kind}</div>}
-        />
-      </div>
-    );
-  },
-};

package/src/ui/layers/LayerStack.test.tsx

@@ -1,170 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-// useReorderDragList pulls its own React copy from weasel/node_modules, which
-// breaks hooks in jsdom. Stub it out with a no-op implementation.
-vi.mock('../../passthrough/weasel-ui', () => ({
-  dlog: () => {},
-  useReorderDragList: () => ({
-    rowProps: (_id: string, _i: number) => ({ onPointerDown: () => {} }),
-    containerProps: {
-      ref: () => {},
-      onPointerMove: () => {},
-      onPointerUp: () => {},
-      onPointerCancel: () => {},
-    },
-    state: { draggedIds: null, targetIndex: null },
-  }),
-}));
-
-import { LayerStack, type LayerStackItem } from './LayerStack';
-
-const items: LayerStackItem[] = [
-  { id: 1, kind: 'fill', primaryValue: 'aqua', primaryOptions: ['aqua', 'bevel', 'dome'] },
-  { id: 2, kind: 'tail', accent: '#f44', badge: '1' },
-  { id: 3, kind: 'shadow' },
-];
-
-describe('LayerStack', () => {
-  it('renders header + add buttons + each item', () => {
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={['fill', 'tail', 'shadow']}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div>body-{item.id}</div>}
-      />,
-    );
-    expect(screen.getByText('Fill')).toBeInTheDocument();
-    for (const k of ['fill', 'tail', 'shadow']) {
-      expect(screen.getByRole('button', { name: new RegExp(`add ${k}`, 'i') })).toBeInTheDocument();
-    }
-    expect(screen.getAllByTestId(/lk-layer-card-/)).toHaveLength(3);
-  });
-
-  it('clicking a palette button calls onAdd with that kind', () => {
-    const onAdd = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={['fill', 'tail']}
-        onAdd={onAdd}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /add tail/i }));
-    expect(onAdd).toHaveBeenCalledWith('tail');
-  });
-
-  it('clicking the remove button calls onRemove with that id', () => {
-    const onRemove = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={onRemove}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    const removes = screen.getAllByRole('button', { name: /remove layer/i });
-    fireEvent.click(removes[1]);
-    expect(onRemove).toHaveBeenCalledWith(2);
-  });
-
-  it('shows empty state when items is empty', () => {
-    render(
-      <LayerStack
-        title="Empty"
-        items={[]}
-        paletteKinds={['fill']}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    expect(screen.getByText(/no layers/i)).toBeInTheDocument();
-  });
-
-  it('changing the primary select calls onPrimaryChange', () => {
-    const onPrimaryChange = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={onPrimaryChange}
-        renderBody={() => null}
-      />,
-    );
-    const sel = screen.getByLabelText(/primary select for layer 1/i) as HTMLSelectElement;
-    fireEvent.change(sel, { target: { value: 'bevel' } });
-    expect(onPrimaryChange).toHaveBeenCalledWith(1, 'bevel');
-  });
-
-  it('newly added items render expanded by default', () => {
-    const initial: LayerStackItem[] = [{ id: 1, kind: 'fill' }];
-    const { rerender } = render(
-      <LayerStack
-        title="Fill"
-        items={initial}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.getByTestId('body-1')).toBeInTheDocument();
-    rerender(
-      <LayerStack
-        title="Fill"
-        items={[...initial, { id: 2, kind: 'tail' }]}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.getByTestId('body-2')).toBeInTheDocument();
-  });
-
-  it('items with defaultExpanded: false render collapsed', () => {
-    render(
-      <LayerStack
-        title="Fill"
-        items={[{ id: 1, kind: 'fill', defaultExpanded: false }]}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.queryByTestId('body-1')).not.toBeInTheDocument();
-  });
-
-  // TODO: reorder off-by-one fix (Bug 1) is covered by manual integration
-  // testing in speech-balloons once LayerStack is consumed there (B3).
-  // useReorderDragList is mocked in unit tests, making onReorder untestable here.
-});

package/src/ui/layers/LayerStack.tsx

@@ -1,208 +0,0 @@
-import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';
-import { dlog, useReorderDragList } from '../../passthrough/weasel-ui';
-import { DragHandleGlyph } from '../../primitives/DragHandleGlyph';
-
-/** One card in a layer stack: its identity, the label shown when collapsed,
- *  and the optional select hoisted into its header. */
-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;
-}
-
-/** Props for `<LayerStack>`. */
-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;
-}
-
-/** A drag-reorderable stack of expandable cards, with a palette in the header
- *  for adding more. The body of each card is the caller's to render. */
-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>
-  );
-}

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

@@ -1,27 +0,0 @@
-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" />,
-};