@weasel-js/labkit 1.5.1 → 1.6.0

package/src/layers/LayerList.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@weasel-js/forge';
-import { useState } from 'react';
-import { LayerList, type LayerTreeNode } from './LayerList';
-
-const meta: Meta<typeof LayerList> = {
-  title: 'labkit/layers/LayerList',
-  component: LayerList,
-};
-export default meta;
-type Story = StoryObj<typeof LayerList>;
-
-const FLAT: LayerTreeNode[] = [
-  { id: 'plants', label: 'Plants' },
-  { id: 'grid', label: 'Grid' },
-  { id: 'legend', label: 'Legend', alwaysOn: true },
-];
-
-const NESTED: LayerTreeNode[] = [
-  {
-    id: 'ingest',
-    label: 'Ingest',
-    children: [
-      { id: 'ingest.fetch', label: 'Fetch' },
-      { id: 'ingest.parse', label: 'Parse' },
-    ],
-  },
-  {
-    id: 'solve',
-    label: 'Solve',
-    defaultCollapsed: true,
-    children: [
-      { id: 'solve.seed', label: 'Seed' },
-      {
-        id: 'solve.relax',
-        label: 'Relax',
-        children: [
-          { id: 'solve.relax.sweep', label: 'Sweep' },
-          { id: 'solve.relax.check', label: 'Check' },
-        ],
-      },
-    ],
-  },
-  { id: 'report', label: 'Report', alwaysOn: true },
-];
-
-function Demo({ seed }: { seed: LayerTreeNode[] }) {
-  const [layers, setLayers] = useState(seed);
-  const [visibility, setVisibility] = useState<Record<string, boolean>>({});
-  return (
-    <div style={{ width: 220 }}>
-      <LayerList
-        layers={layers}
-        visibility={visibility}
-        onReorder={setLayers}
-        onToggle={(id, visible) => setVisibility((v) => ({ ...v, [id]: visible }))}
-      />
-    </div>
-  );
-}
-
-/** No node has children, so no row spends width on a twisty column. */
-export const Flat: Story = { render: () => <Demo seed={FLAT} /> };
-
-/** Dragging a row reorders it among its own siblings — a drag never moves a
- *  layer to a different parent. */
-export const Tree: Story = { render: () => <Demo seed={NESTED} /> };

package/src/layers/LayerList.test.tsx

@@ -1,232 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import type { LayerDescriptor } from '../instrument/types';
-import { LayerList, type LayerListProps, type LayerTreeNode } from './LayerList';
-
-describe('<LayerList>', () => {
-  it('renders one row per layer', () => {
-    const layers: LayerDescriptor[] = [
-      { id: 'a', label: 'A' },
-      { id: 'b', label: 'B' },
-    ];
-    const { container } = render(
-      <LayerList
-        layers={layers}
-        visibility={{ a: true, b: true }}
-        onReorder={vi.fn()}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(container.querySelectorAll('.lk-layer-list__row')).toHaveLength(2);
-  });
-
-  it('renders empty state when no layers', () => {
-    render(<LayerList layers={[]} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} />);
-    expect(screen.getByText('No layers')).toBeInTheDocument();
-  });
-
-  it('alwaysOn rows have no checkbox and show lock icon', () => {
-    const layers: LayerDescriptor[] = [{ id: 'a', label: 'A', alwaysOn: true }];
-    render(<LayerList layers={layers} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} />);
-    expect(screen.queryByLabelText('Toggle A')).toBeNull();
-    expect(screen.getByLabelText('Always on')).toBeInTheDocument();
-  });
-
-  it('onToggle fires on checkbox click', () => {
-    const onToggle = vi.fn();
-    const layers: LayerDescriptor[] = [{ id: 'a', label: 'A' }];
-    render(
-      <LayerList
-        layers={layers}
-        visibility={{ a: true }}
-        onReorder={vi.fn()}
-        onToggle={onToggle}
-      />,
-    );
-    fireEvent.click(screen.getByLabelText('Toggle A'));
-    expect(onToggle).toHaveBeenCalledWith('a', false);
-  });
-});
-
-const twoLayers: LayerDescriptor[] = [
-  { id: 'a', label: 'A' },
-  { id: 'b', label: 'B' },
-];
-
-function dispatchOn(target: EventTarget, type: string, init: PointerEventInit) {
-  act(() => {
-    target.dispatchEvent(new PointerEvent(type, { pointerId: 1, bubbles: true, ...init }));
-  });
-}
-
-/** jsdom measures every row at zero height, so `startDrag` falls back to a
- *  pitch of 1: one pixel of travel is one row. */
-function renderDraggable(onReorder = vi.fn()) {
-  const result = render(
-    <LayerList
-      layers={twoLayers}
-      visibility={{ a: true, b: true }}
-      onReorder={onReorder}
-      onToggle={vi.fn()}
-    />,
-  );
-  return { ...result, onReorder, handle: screen.getByLabelText('Reorder A') };
-}
-
-/** Index of the row the drag currently marks, or -1 when nothing is dragging. */
-function draggingRow(container: HTMLElement): number {
-  const rows = Array.from(container.querySelectorAll('.lk-layer-list__row'));
-  return rows.findIndex((r) => r.classList.contains('lk-layer-list__row--dragging'));
-}
-
-describe('<LayerList> reordering', () => {
-  it('reorders from a release that lands off the handle', () => {
-    const { onReorder, handle } = renderDraggable();
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    dispatchOn(document, 'pointerup', { clientY: 1 });
-    expect(onReorder).toHaveBeenCalledTimes(1);
-    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
-  });
-
-  // The other half of the rule — a detached origin does cancel — is owned by
-  // pointerSession.test.ts, which exercises it without React in the way.
-  it('keeps dragging when capture is lost and the handle is still in the document', () => {
-    const { onReorder, handle, container } = renderDraggable();
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    // Chrome releases capture a beat before it delivers pointerup, so ending
-    // here throws away a release that has already been dispatched.
-    dispatchOn(handle, 'lostpointercapture', {});
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    expect(draggingRow(container)).toBe(1);
-    dispatchOn(document, 'pointerup', { clientY: 1 });
-    expect(onReorder).toHaveBeenCalledTimes(1);
-    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
-  });
-
-  it('reads a move with nothing held as the release that never arrived', () => {
-    const { onReorder, handle } = renderDraggable();
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    dispatchOn(document, 'pointermove', { buttons: 0, clientY: 40 });
-    expect(onReorder).toHaveBeenCalledTimes(1);
-    expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
-  });
-
-  it('drops its listeners when the list unmounts mid-drag', () => {
-    const { onReorder, handle, unmount } = renderDraggable();
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    unmount();
-    dispatchOn(document, 'pointerup', { clientY: 1 });
-    expect(onReorder).not.toHaveBeenCalled();
-  });
-
-  it('does not capture a second pointer into the same drag', () => {
-    const { onReorder, handle } = renderDraggable();
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { pointerId: 2, buttons: 1, clientY: 40 });
-    dispatchOn(document, 'pointerup', { pointerId: 1, clientY: 0 });
-    expect(onReorder).not.toHaveBeenCalled();
-  });
-});
-
-const tree: LayerTreeNode[] = [
-  {
-    id: 'a',
-    label: 'A',
-    children: [
-      { id: 'a1', label: 'A1' },
-      { id: 'a2', label: 'A2' },
-    ],
-  },
-  { id: 'b', label: 'B' },
-];
-
-function renderTree(props: Partial<LayerListProps> = {}) {
-  return render(
-    <LayerList layers={tree} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} {...props} />,
-  );
-}
-
-describe('<LayerList> nesting', () => {
-  it('renders a row for each descendant of an expanded node', () => {
-    const { container } = renderTree();
-    expect(container.querySelectorAll('.lk-layer-list__row')).toHaveLength(4);
-    expect(screen.getByText('A1')).toBeInTheDocument();
-  });
-
-  it('hides the children of a collapsed node', () => {
-    const { container } = renderTree();
-    fireEvent.click(screen.getByLabelText('A sublayers'));
-    expect(container.querySelectorAll('.lk-layer-list__row')).toHaveLength(2);
-    expect(screen.queryByText('A1')).toBeNull();
-  });
-
-  it('starts collapsed when the node says so', () => {
-    render(
-      <LayerList
-        layers={[{ ...tree[0], defaultCollapsed: true }, tree[1]]}
-        visibility={{}}
-        onReorder={vi.fn()}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(screen.queryByText('A1')).toBeNull();
-  });
-
-  it('takes collapse from collapsedIds and reports the next set', () => {
-    const onCollapsedChange = vi.fn();
-    renderTree({ collapsedIds: ['a'], onCollapsedChange });
-    expect(screen.queryByText('A1')).toBeNull();
-    fireEvent.click(screen.getByLabelText('A sublayers'));
-    expect(onCollapsedChange).toHaveBeenCalledWith([]);
-    // Controlled: the click alone does not open it.
-    expect(screen.queryByText('A1')).toBeNull();
-  });
-
-  it('ties the twisty to the subtree it reveals', () => {
-    const { container } = renderTree();
-    const controls = screen.getByLabelText('A sublayers').getAttribute('aria-controls');
-    expect(controls).toBeTruthy();
-    expect(container.querySelector(`[id="${controls}"]`)).toHaveClass('lk-layer-list__children');
-  });
-
-  it('spends no twisty column on a flat list', () => {
-    const { container } = render(
-      <LayerList layers={twoLayers} visibility={{}} onReorder={vi.fn()} onToggle={vi.fn()} />,
-    );
-    expect(container.querySelector('.lk-layer-list__twisty-gap')).toBeNull();
-    expect(screen.queryByLabelText(/sublayers$/)).toBeNull();
-  });
-
-  it('holds the twisty column open on childless siblings', () => {
-    const { container } = renderTree();
-    expect(container.querySelectorAll('.lk-layer-list__twisty-gap')).toHaveLength(3);
-  });
-
-  it('reorders within a subtree and leaves the rest of the tree alone', () => {
-    const onReorder = vi.fn();
-    renderTree({ onReorder });
-    const handle = screen.getByLabelText('Reorder A1');
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    dispatchOn(document, 'pointerup', { clientY: 1 });
-    expect(onReorder).toHaveBeenCalledTimes(1);
-    const next = onReorder.mock.calls[0][0] as LayerTreeNode[];
-    expect(next.map((l) => l.id)).toEqual(['a', 'b']);
-    expect(next[0].children?.map((l) => l.id)).toEqual(['a2', 'a1']);
-  });
-
-  it('reorders the top level without disturbing a subtree', () => {
-    const onReorder = vi.fn();
-    renderTree({ onReorder });
-    const handle = screen.getByLabelText('Reorder A');
-    fireEvent.pointerDown(handle, { pointerId: 1, buttons: 1, clientY: 0 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
-    dispatchOn(document, 'pointerup', { clientY: 1 });
-    const next = onReorder.mock.calls[0][0] as LayerTreeNode[];
-    expect(next.map((l) => l.id)).toEqual(['b', 'a']);
-    expect(next[1].children?.map((l) => l.id)).toEqual(['a1', 'a2']);
-  });
-});

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);
-}