@weasel-js/labkit 0.1.0

package/src/theme/interstellar.less

@@ -0,0 +1,34 @@
+// Built to dist/theme-interstellar.css. Forces interstellar regardless of OS preference.
+.lk-theme-interstellar {
+  --lk-bg: #0a0a14;
+  --lk-bg-elevated: rgba(20, 20, 36, 0.55);
+  --lk-bg-canvas: #02020a;
+  --lk-border: rgba(255, 255, 255, 0.14);
+  --lk-divider: rgba(255, 255, 255, 0.08);
+  --lk-glass-blur: 12px;
+
+  --lk-text: #e8e8f0;
+  --lk-text-muted: #a8a8c0;
+  --lk-text-disabled: #5a5a78;
+
+  --lk-accent: #b08adb;
+  --lk-accent-hover: #c6a3ee;
+  --lk-focus-ring: rgba(176, 138, 219, 0.45);
+
+  --lk-swatch-green: #2fdd18;
+  --lk-swatch-pink: #ff5885;
+  --lk-swatch-cyan: #00dfff;
+  --lk-swatch-gold: #dcb700;
+  --lk-swatch-amber: #ff8c00;
+  --lk-swatch-violet: #a497ff;
+  --lk-swatch-mint: #00e7af;
+  --lk-swatch-sky: #00b8ff;
+  --lk-swatch-orange: #ff6b00;
+  --lk-swatch-magenta: #ff6eff;
+
+  --lk-space-nebula:
+    radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%),
+    radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%),
+    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%),
+    radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%);
+}

package/src/theme/light.less

@@ -0,0 +1,14 @@
+// Built to dist/theme-light.css. Forces light regardless of OS preference.
+.lk-theme-light {
+  --lk-bg: #fafaf7;
+  --lk-bg-elevated: #ffffff;
+  --lk-bg-canvas: #f0ebe2;
+  --lk-border: #c9bba5;
+  --lk-divider: rgba(0, 0, 0, 0.08);
+  --lk-text: #2a2018;
+  --lk-text-muted: #6b5c4a;
+  --lk-text-disabled: #a89b85;
+  --lk-accent: #a86f3c;
+  --lk-accent-hover: #c2854f;
+  --lk-focus-ring: rgba(168, 111, 60, 0.35);
+}

package/src/theme/tokens.less

@@ -0,0 +1,85 @@
+// tokens.less — the contract.
+// Interstellar is the base; @media (prefers-color-scheme: light) overrides for OS-following.
+// Explicit .lk-theme-light / .lk-theme-interstellar classes (added by <Lab>) win via specificity.
+
+:root {
+  // Surface
+  --lk-bg: #0a0a14;
+  --lk-bg-elevated: rgba(20, 20, 36, 0.55);
+  --lk-bg-canvas: #02020a;
+  --lk-border: rgba(255, 255, 255, 0.14);
+  --lk-divider: rgba(255, 255, 255, 0.08);
+  --lk-glass-blur: 12px;
+
+  // Text
+  --lk-text: #e8e8f0;
+  --lk-text-muted: #a8a8c0;
+  --lk-text-disabled: #5a5a78;
+
+  // Accent / interactive
+  --lk-accent: #b08adb;
+  --lk-accent-hover: #c6a3ee;
+  --lk-focus-ring: rgba(176, 138, 219, 0.45);
+
+  // Accent swatches — bright spot colors for plotting, status, data viz.
+  --lk-swatch-green: #2fdd18;
+  --lk-swatch-pink: #ff5885;
+  --lk-swatch-cyan: #00dfff;
+  --lk-swatch-gold: #dcb700;
+  --lk-swatch-amber: #ff8c00;
+  --lk-swatch-violet: #a497ff;
+  --lk-swatch-mint: #00e7af;
+  --lk-swatch-sky: #00b8ff;
+  --lk-swatch-orange: #ff6b00;
+  --lk-swatch-magenta: #ff6eff;
+
+  // Cosmic background — layered fill on .lk-lab.
+  --lk-space-nebula:
+    radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%),
+    radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%),
+    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%),
+    radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%);
+
+  // Sizing
+  --lk-radius: 6px;
+  --lk-radius-sm: 3px;
+  --lk-radius-lg: 14px;
+  --lk-control-height: 28px;
+  --lk-spacing-xs: 4px;
+  --lk-spacing-sm: 8px;
+  --lk-spacing-md: 12px;
+  --lk-spacing-lg: 16px;
+
+  // Typography
+  --lk-font: 'Oswald', system-ui, -apple-system, sans-serif;
+  --lk-font-mono: ui-monospace, SFMono-Regular, monospace;
+  --lk-font-display: 'Oswald', system-ui, sans-serif;
+  --lk-font-size: 13px;
+  --lk-font-size-sm: 11px;
+  --lk-font-weight-light: 300;
+  --lk-font-weight-medium: 500;
+  --lk-font-weight-bold: 700;
+
+  // Z-layers
+  --lk-z-toolbar: 10;
+  --lk-z-overlay: 20;
+  --lk-z-modal: 30;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --lk-bg: #fafaf7;
+    --lk-bg-elevated: #ffffff;
+    --lk-bg-canvas: #f0ebe2;
+    --lk-border: #c9bba5;
+    --lk-divider: rgba(0, 0, 0, 0.08);
+
+    --lk-text: #2a2018;
+    --lk-text-muted: #6b5c4a;
+    --lk-text-disabled: #a89b85;
+
+    --lk-accent: #a86f3c;
+    --lk-accent-hover: #c2854f;
+    --lk-focus-ring: rgba(168, 111, 60, 0.35);
+  }
+}

package/src/ui/format.ts

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

package/src/ui/layers/LayerStack.less

@@ -0,0 +1,143 @@
+.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(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  font-size: 1rem;
+  color: var(--lk-text);
+}
+
+.lk-layer-stack__palette {
+  display: flex;
+  gap: 4px;
+}
+
+.lk-layer-stack__add {
+  background: transparent;
+  border: 1px dashed var(--lk-border);
+  border-radius: var(--lk-radius-sm, 6px);
+  padding: 2px 8px;
+  font-size: 0.78rem;
+  color: var(--lk-text-dim);
+  cursor: pointer;
+}
+
+.lk-layer-stack__add:hover {
+  background: var(--lk-bg-elevated);
+  color: var(--lk-text);
+}
+
+.lk-layer-stack__list {
+  display: grid;
+  gap: 6px;
+}
+
+.lk-layer-stack__drop-hint {
+  height: 2px;
+  background: var(--lk-accent, #6cf);
+  border-radius: 1px;
+}
+
+.lk-layer-stack__empty {
+  color: var(--lk-text-dim);
+  font-size: 0.85rem;
+  padding: 8px;
+  text-align: center;
+}
+
+.lk-layer-card {
+  background: var(--lk-bg-elevated);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-md, 8px);
+  overflow: hidden;
+}
+
+.lk-layer-card.has-accent {
+  // Re-bind --lk-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.
+  --lk-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(--lk-text-dim);
+  padding: 2px 4px;
+  cursor: grab;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  border-radius: var(--lk-radius-sm, 6px);
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.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: 0.9rem;
+}
+
+.lk-layer-card__primary {
+  background: transparent;
+  border: 0;
+  color: var(--lk-text);
+  font: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.lk-root .lk-layer-card__remove {
+  background: transparent;
+  border: 0;
+  color: var(--lk-text-dim);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 2px 6px;
+}
+
+.lk-layer-card__remove:hover {
+  color: var(--lk-text);
+}
+
+.lk-layer-card__body {
+  padding: 8px;
+  border-top: 1px solid var(--lk-border);
+}

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

@@ -0,0 +1,45 @@
+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

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