@weasel-js/labkit 1.5.2 → 1.6.0

package/src/layers/LayerList.tsx

@@ -1,268 +0,0 @@
-import { openPointerSession, type PointerSession } from '@weasel-js/core';
-import { Disclosure } from '@weasel-js/ui';
-import {
-  Fragment,
-  type ReactNode,
-  type PointerEvent as ReactPointerEvent,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from 'react';
-import type { LayerDescriptor } from '../instrument/types';
-import { DragHandleGlyph } from '../passthrough/weasel-ui';
-
-/** A layer that may itself contain layers. A plain `LayerDescriptor` is one
- *  of these with no children, so a flat list needs no change. */
-export interface LayerTreeNode extends LayerDescriptor {
-  children?: LayerTreeNode[];
-  /** Render this node's children hidden on first paint. Ignored once
-   *  `collapsedIds` is supplied. */
-  defaultCollapsed?: boolean;
-}
-
-/** Props for `<LayerList>`. */
-export interface LayerListProps {
-  layers: LayerTreeNode[];
-  visibility: Record<string, boolean>;
-  /** The whole tree, with the dragged node moved. Reordering is scoped to a
-   *  node's siblings: a drag never changes which parent a layer sits under. */
-  onReorder: (newOrder: LayerTreeNode[]) => void;
-  onToggle: (id: string, visible: boolean) => void;
-  /** Ids whose children are hidden. Supplying it makes collapse controlled;
-   *  without it the list keeps its own, seeded from `defaultCollapsed`. */
-  collapsedIds?: readonly string[];
-  onCollapsedChange?: (ids: string[]) => void;
-  className?: string;
-}
-
-interface DragState {
-  /** Id of the dragged row's parent, or null at the top level. */
-  parentId: string | null;
-  fromIndex: number;
-  toIndex: number;
-  startY: number;
-  /** Row height plus row gap, measured when the drag starts. */
-  pitch: number;
-}
-
-/** Which row the drag currently marks. */
-interface DragMark {
-  parentId: string | null;
-  index: number;
-}
-
-function findNode(nodes: LayerTreeNode[], id: string): LayerTreeNode | null {
-  for (const node of nodes) {
-    if (node.id === id) return node;
-    const hit = node.children ? findNode(node.children, id) : null;
-    if (hit) return hit;
-  }
-  return null;
-}
-
-function siblingsOf(layers: LayerTreeNode[], parentId: string | null): LayerTreeNode[] {
-  if (parentId === null) return layers;
-  return findNode(layers, parentId)?.children ?? [];
-}
-
-function withChildren(
-  nodes: LayerTreeNode[],
-  parentId: string | null,
-  next: LayerTreeNode[],
-): LayerTreeNode[] {
-  if (parentId === null) return next;
-  return nodes.map((node) => {
-    if (node.id === parentId) return { ...node, children: next };
-    if (node.children) return { ...node, children: withChildren(node.children, parentId, next) };
-    return node;
-  });
-}
-
-function collectCollapsed(nodes: LayerTreeNode[], into: Set<string>): Set<string> {
-  for (const node of nodes) {
-    if (node.defaultCollapsed) into.add(node.id);
-    if (node.children) collectCollapsed(node.children, into);
-  }
-  return into;
-}
-
-function anyNested(nodes: LayerTreeNode[]): boolean {
-  return nodes.some((n) => (n.children?.length ?? 0) > 0);
-}
-
-/** A reorderable list of layers with per-layer visibility toggles. Layers
- *  marked `alwaysOn` are pinned and cannot be reordered or hidden. Layers with
- *  `children` render as an expandable subtree. */
-export function LayerList({
-  layers,
-  visibility,
-  onReorder,
-  onToggle,
-  collapsedIds,
-  onCollapsedChange,
-  className,
-}: LayerListProps) {
-  const [dragMark, setDragMark] = useState<DragMark | null>(null);
-  const [ownCollapsed, setOwnCollapsed] = useState<Set<string>>(() =>
-    collectCollapsed(layers, new Set()),
-  );
-  const dragRef = useRef<DragState | null>(null);
-  const sessionRef = useRef<PointerSession | null>(null);
-  const uid = useId();
-  // The session's callbacks outlive the render that opened them, so the commit
-  // reads its inputs here rather than from that render's closure.
-  const commitRef = useRef({ layers, onReorder });
-  commitRef.current = { layers, onReorder };
-
-  useEffect(() => () => sessionRef.current?.cancel(), []);
-
-  const collapsed = collapsedIds ? new Set(collapsedIds) : ownCollapsed;
-
-  const toggleCollapsed = (id: string) => {
-    const next = new Set(collapsed);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    if (!collapsedIds) setOwnCollapsed(next);
-    onCollapsedChange?.([...next]);
-  };
-
-  if (layers.length === 0) {
-    return (
-      <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>
-        <div className="lk-layer-list__empty">No layers</div>
-      </div>
-    );
-  }
-
-  const clearDrag = () => {
-    dragRef.current = null;
-    sessionRef.current = null;
-    setDragMark(null);
-  };
-
-  const startDrag = (e: ReactPointerEvent<HTMLElement>, parentId: string | null, index: number) => {
-    // Measured at grab time rather than hardcoded: a restyle that changes row
-    // height or gap would otherwise silently skew every drag distance.
-    const row = e.currentTarget.closest('.lk-layer-list__row');
-    const list = row?.parentElement;
-    const gap = list ? Number.parseFloat(getComputedStyle(list).rowGap) || 0 : 0;
-    const pitch = row ? row.getBoundingClientRect().height + gap : 0;
-    const drag: DragState = {
-      parentId,
-      fromIndex: index,
-      toIndex: index,
-      startY: e.clientY,
-      pitch: pitch > 0 ? pitch : 1,
-    };
-    dragRef.current = drag;
-    setDragMark({ parentId, index });
-    sessionRef.current = openPointerSession(e.currentTarget, e, {
-      onMove: (ev) => {
-        const delta = Math.round((ev.clientY - drag.startY) / drag.pitch);
-        const siblings = siblingsOf(commitRef.current.layers, parentId);
-        const last = siblings.filter((l) => !l.alwaysOn).length - 1;
-        drag.toIndex = Math.min(last, Math.max(0, drag.fromIndex + delta));
-        setDragMark({ parentId, index: drag.toIndex });
-      },
-      onEnd: () => {
-        const { layers: tree, onReorder: commit } = commitRef.current;
-        const { fromIndex, toIndex } = drag;
-        clearDrag();
-        if (toIndex === fromIndex) return;
-        const siblings = siblingsOf(tree, parentId);
-        const rows = siblings.filter((l) => !l.alwaysOn);
-        const locked = siblings.filter((l) => l.alwaysOn);
-        const next = [...rows];
-        const [moved] = next.splice(fromIndex, 1);
-        if (moved) next.splice(toIndex, 0, moved);
-        commit(withChildren(tree, parentId, [...next, ...locked]));
-      },
-      // An interrupted drag never named a destination, so it reorders nothing.
-      onCancel: clearDrag,
-    });
-  };
-
-  // A twisty column on every row keeps labels aligned across depths, but a
-  // flat list would only be paying 20px for it.
-  const nested = anyNested(layers);
-
-  function renderRow(
-    layer: LayerTreeNode,
-    parentId: string | null,
-    index: number,
-    path: string,
-    pinned: boolean,
-  ): ReactNode {
-    const kids = layer.children ?? [];
-    const open = kids.length > 0 && !collapsed.has(layer.id);
-    const bodyId = `${uid}${path}`;
-    const dragging = !pinned && dragMark?.parentId === parentId && dragMark.index === index;
-    const cls = ['lk-layer-list__row'];
-    if (dragging) cls.push('lk-layer-list__row--dragging');
-    if (pinned) cls.push('lk-layer-list__row--pinned');
-    return (
-      <Fragment key={layer.id}>
-        <div className={cls.join(' ')}>
-          {nested &&
-            (kids.length > 0 ? (
-              <Disclosure
-                open={open}
-                onToggle={() => toggleCollapsed(layer.id)}
-                label={`${layer.label} sublayers`}
-                controls={bodyId}
-              />
-            ) : (
-              <span className="lk-layer-list__twisty-gap" />
-            ))}
-          {pinned ? (
-            <span className="lk-layer-list__lock" role="img" aria-label="Always on">
-              🔒
-            </span>
-          ) : (
-            <>
-              <button
-                type="button"
-                className="lk-layer-list__handle"
-                aria-label={`Reorder ${layer.label}`}
-                onPointerDown={(e) => startDrag(e, parentId, index)}
-              >
-                <DragHandleGlyph size={13} />
-              </button>
-              <input
-                className="lk-layer-list__check"
-                type="checkbox"
-                checked={visibility[layer.id] !== false}
-                onChange={(e) => onToggle(layer.id, e.target.checked)}
-                aria-label={`Toggle ${layer.label}`}
-              />
-            </>
-          )}
-          <span className="lk-layer-list__label">{layer.label}</span>
-        </div>
-        {open && (
-          <div id={bodyId} className="lk-layer-list__children">
-            {renderLevel(kids, layer.id, path)}
-          </div>
-        )}
-      </Fragment>
-    );
-  }
-
-  function renderLevel(nodes: LayerTreeNode[], parentId: string | null, path: string): ReactNode {
-    const reorderable = nodes.filter((l) => !l.alwaysOn);
-    const pinned = nodes.filter((l) => l.alwaysOn);
-    return (
-      <>
-        {reorderable.map((layer, i) => renderRow(layer, parentId, i, `${path}-${i}`, false))}
-        {pinned.map((layer, i) => renderRow(layer, parentId, i, `${path}-p${i}`, true))}
-      </>
-    );
-  }
-
-  return (
-    <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>
-      {renderLevel(layers, null, '')}
-    </div>
-  );
-}

package/src/primitives/Sidebar.less

@@ -1,112 +0,0 @@
-.lk-sidebar {
-  display: flex;
-  flex-direction: column;
-  width: 280px;
-  flex: 1 1 auto;
-  background: var(--wzl-surface-raised);
-  border-right: 1px solid var(--wzl-border);
-  min-height: 0;
-  transition: width 150ms ease;
-
-  &--collapsed {
-    width: 32px;
-  }
-}
-
-.lk-sidebar-header {
-  display: flex;
-  align-items: center;
-  padding: var(--wzl-space-xs) var(--wzl-space-sm);
-  border-bottom: 1px solid var(--wzl-line-subtle);
-  min-height: var(--wzl-control-h);
-}
-
-.lk-sidebar-title {
-  flex: 1;
-  font-weight: var(--wzl-font-weight-bold);
-  color: var(--wzl-fg);
-  font-size: var(--wzl-font-size);
-
-  .lk-sidebar--collapsed & {
-    display: none;
-  }
-}
-
-.lk-sidebar-toggle {
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--wzl-radius-sm);
-  color: var(--wzl-fg-muted);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--wzl-surface);
-    color: var(--wzl-fg);
-  }
-}
-
-.lk-sidebar-body {
-  flex: 1;
-  overflow: auto;
-  padding: var(--wzl-space-sm);
-
-  .lk-sidebar--collapsed & {
-    display: none;
-  }
-}
-
-.lk-sidebar-section {
-  border-bottom: var(--wzl-border-w) solid var(--wzl-line-subtle);
-
-  // The last section runs to the bottom of its pane. Stopped at its content,
-  // its rule and the bare pane under it read as a second, empty zone.
-  &:last-child {
-    flex-grow: 1;
-    border-bottom: 0;
-  }
-}
-
-.lk-sidebar-section__bar {
-  display: flex;
-  align-items: center;
-}
-
-.lk-sidebar-section__undock {
-  padding: 0 var(--wzl-space-xs);
-  border: 0;
-  background: transparent;
-  color: var(--wzl-fg-subtle);
-  cursor: pointer;
-
-  &:hover {
-    color: var(--wzl-fg);
-  }
-}
-
-.lk-sidebar-section__head {
-  flex: 1;
-  width: 100%;
-  padding: var(--wzl-space-xs);
-  border: 0;
-  background: transparent;
-  color: var(--wzl-fg-muted);
-  font-family: var(--wzl-font-display);
-  font-size: var(--wzl-font-size-sm);
-  letter-spacing: 0.08em;
-  text-align: left;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  &:hover {
-    color: var(--wzl-fg);
-  }
-}
-
-// The section body is the only thing that insets a panel — the panels
-// themselves carry no padding, so this is the whole gutter.
-.lk-sidebar-section__body {
-  padding: 0 var(--wzl-space-xs) var(--wzl-space-xs);
-}

package/src/primitives/Sidebar.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@weasel-js/forge';
-import { useState } from 'react';
-import { Sidebar } from './Sidebar';
-
-const meta: Meta<typeof Sidebar> = {
-  title: 'labkit/Primitives/Sidebar',
-  component: Sidebar,
-};
-export default meta;
-
-type Story = StoryObj<typeof Sidebar>;
-
-export const Default: Story = {
-  render: () => (
-    <div style={{ display: 'flex', height: 400 }}>
-      <div style={{ flex: 1 }}>main content area</div>
-      <Sidebar title="Controls">
-        <p>One slider here</p>
-        <p>Another slider</p>
-      </Sidebar>
-    </div>
-  ),
-};
-
-export const Collapsible: Story = {
-  render: function Render() {
-    const [collapsed, setCollapsed] = useState(false);
-    return (
-      <div style={{ display: 'flex', height: 400 }}>
-        <div style={{ flex: 1, padding: 16 }}>main content area</div>
-        <Sidebar title="Controls" collapsed={collapsed} onToggle={() => setCollapsed((c) => !c)}>
-          <p>One slider here</p>
-          <p>Another slider</p>
-        </Sidebar>
-      </div>
-    );
-  },
-};

package/src/primitives/Sidebar.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, test } from 'vitest';
-import { Sidebar } from './Sidebar';
-
-describe('Sidebar', () => {
-  test('renders children when expanded (default)', () => {
-    render(
-      <Sidebar>
-        <p>content</p>
-      </Sidebar>,
-    );
-    expect(screen.getByText('content')).toBeInTheDocument();
-  });
-
-  test('renders title when provided', () => {
-    render(
-      <Sidebar title="Controls">
-        <p>x</p>
-      </Sidebar>,
-    );
-    expect(screen.getByText('Controls')).toBeInTheDocument();
-  });
-
-  test('marks the sidebar collapsed and nests body inside the collapsed root', () => {
-    const { container } = render(
-      <Sidebar collapsed>
-        <p>content</p>
-      </Sidebar>,
-    );
-    const root = container.querySelector('.lk-sidebar');
-    const body = container.querySelector('.lk-sidebar-body');
-    expect(root).not.toBeNull();
-    expect(body).not.toBeNull();
-    expect(root?.classList.contains('lk-sidebar--collapsed')).toBe(true);
-    // Body is still rendered (children stay in DOM), but lives inside the collapsed
-    // root so the CSS rule `.lk-sidebar--collapsed .lk-sidebar-body { display:none }` applies.
-    expect(body?.parentElement).toBe(root);
-    expect(body?.textContent).toBe('content');
-  });
-
-  test('toggle button calls onToggle when clicked', () => {
-    let toggled = false;
-    render(
-      <Sidebar
-        title="C"
-        onToggle={() => {
-          toggled = true;
-        }}
-      >
-        <p>x</p>
-      </Sidebar>,
-    );
-    screen.getByRole('button', { name: /collapse|expand/i }).click();
-    expect(toggled).toBe(true);
-  });
-
-  test('shows expand label when collapsed', () => {
-    render(
-      <Sidebar title="C" collapsed onToggle={() => {}}>
-        <p>x</p>
-      </Sidebar>,
-    );
-    expect(screen.getByRole('button', { name: /expand/i })).toBeInTheDocument();
-  });
-
-  test('shows collapse label when expanded', () => {
-    render(
-      <Sidebar title="C" onToggle={() => {}}>
-        <p>x</p>
-      </Sidebar>,
-    );
-    expect(screen.getByRole('button', { name: /collapse/i })).toBeInTheDocument();
-  });
-});

package/src/primitives/Sidebar.tsx

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-
-/** Props for `<Sidebar>`. */
-export interface SidebarProps {
-  children: ReactNode;
-  title?: string;
-  collapsed?: boolean;
-  onToggle?: () => void;
-}
-
-/** A collapsible side panel with an optional title. Collapse state is the
- *  caller's to hold. */
-export function Sidebar({ children, title, collapsed = false, onToggle }: SidebarProps) {
-  const className = `lk-sidebar${collapsed ? ' lk-sidebar--collapsed' : ''}`;
-  return (
-    <aside className={className}>
-      {(title || onToggle) && (
-        <div className="lk-sidebar-header">
-          {title && <span className="lk-sidebar-title">{title}</span>}
-          {onToggle && (
-            <button
-              type="button"
-              className="lk-sidebar-toggle"
-              onClick={onToggle}
-              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {collapsed ? '›' : '‹'}
-            </button>
-          )}
-        </div>
-      )}
-      <div className="lk-sidebar-body">{children}</div>
-    </aside>
-  );
-}

package/src/ui/layers/index.ts

@@ -1,5 +0,0 @@
-// LayerStack lives in `@weasel-js/ui` now; labkit re-exports it so existing
-// `@weasel-js/labkit/ui/layers` imports keep resolving. Named, not `export *`
-// — a star re-export of an external package emits no binding in the bundle.
-export type { LayerStackItem, LayerStackProps } from '@weasel-js/ui';
-export { LayerStack } from '@weasel-js/ui';