@weasel-js/labkit 1.4.1 → 1.4.3

package/src/layers/AGENTS.md

@@ -6,22 +6,26 @@ The `src/layers/` directory implements the `<LayerList>` UI used by the `layers`
 
 | File | Role |
 |---|---|
-| `LayerList.tsx` | Layer toggle/reorder list (sidebar widget) |
-| `LayerList.less` | Row styling, drag handle, pinned-row variant |
+| `LayerList.tsx` | Layer toggle/reorder list, flat or nested (sidebar widget) |
+| `LayerList.less` | Row styling, drag handle, pinned-row variant, subtree indent |
+| `LayerList.stories.tsx` | Flat and nested renderings |
 
 ## Props
 
 ```ts
 interface LayerListProps {
-  layers: LayerDescriptor[];                    // { id, label, alwaysOn? }
+  layers: LayerTreeNode[];                      // LayerDescriptor + { children?, defaultCollapsed? }
   visibility: Record<string, boolean>;          // missing key → visible
-  onReorder: (newOrder: LayerDescriptor[]) => void;
+  onReorder: (newOrder: LayerTreeNode[]) => void;
   onToggle: (id: string, visible: boolean) => void;
+  collapsedIds?: readonly string[];             // supplying it makes collapse controlled
+  onCollapsedChange?: (ids: string[]) => void;
   className?: string;
 }
 ```
 
-`LayerDescriptor` lives in `src/instrument/types.ts`.
+`LayerDescriptor` lives in `src/instrument/types.ts`; `LayerTreeNode` extends it
+in `LayerList.tsx`, so a plain `LayerDescriptor[]` is still a valid `layers`.
 
 ## How it integrates
 
@@ -44,6 +48,24 @@ Setting `alwaysOn: true` on a `LayerDescriptor` does two things:
 
 This is intended for legend/HUD layers that should never be toggled off. Visibility for pinned rows is **not** read from the `visibility` prop; they always render.
 
+## Nesting
+
+A node with `children` renders an expandable subtree. The expand control is
+`<Disclosure>` from `@weasel-js/ui` — the same twisty every other collapsible
+surface uses.
+
+Reordering is scoped to siblings: a drag moves a row within its own parent's
+child list and never reparents it. `onReorder` still receives the whole tree,
+with only that sibling group's order changed.
+
+The twisty column appears only when some node in the tree has children — a flat
+list renders exactly the rows it always did. Within a tree, childless rows get
+`.lk-layer-list__twisty-gap` so labels stay aligned down a level.
+
+Collapse is uncontrolled by default, seeded once from each node's
+`defaultCollapsed`. Pass `collapsedIds` to own it; `onCollapsedChange` fires
+either way.
+
 ## Drag handle customization
 
 The drag handle is a button with class `lk-layer-list__handle` holding `<DragHandleGlyph>` (from `@weasel-js/ui`), the same grip `LayerStack` uses. Its padding is transparent and cancelled by an equal negative margin, so the grab target is larger than the drawn dots without widening the row. Row pitch — height plus row gap — is measured from the DOM when a drag starts, so restyling the row does not skew drag distance. It used to be a hardcoded `28`, which had already drifted from the rendered height by the time it was found.
@@ -59,7 +81,7 @@ If `layers.length === 0`, renders `.lk-layer-list__empty` with the text "No laye
 Fork this component if you need:
 - Multi-select reorder (current implementation is single-row)
 - Right-click context menu
-- Layer groups or nesting
+- Reparenting by drag (nesting renders, but a drag stays within one parent)
 - Solo/mute UI common in DAW-style apps
 
-The implementation is small (~100 lines) and self-contained — only depends on `LayerDescriptor` from instrument types.
+It is self-contained: `LayerDescriptor` from instrument types and `Disclosure`/`DragHandleGlyph` from `@weasel-js/ui`.

package/src/layers/LayerList.less

@@ -75,3 +75,19 @@
 .lk-layer-list input[type='checkbox'] {
   accent-color: var(--wzl-accent);
 }
+
+.lk-layer-list__children {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  // Indents by the twisty column, so a child's own twisty starts where its
+  // parent's label does.
+  padding-left: var(--wzl-space-md);
+}
+
+// Holds the twisty column open on rows that have nothing to expand, so labels
+// line up down the level.
+.lk-layer-list__twisty-gap {
+  flex: 0 0 auto;
+  width: var(--wzl-disclosure-target, 20px);
+}

package/src/layers/LayerList.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+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,7 +1,7 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { LayerDescriptor } from '../instrument/types';
-import { LayerList } from './LayerList';
+import { LayerList, type LayerListProps, type LayerTreeNode } from './LayerList';
 
 describe('<LayerList>', () => {
   it('renders one row per layer', () => {
@@ -73,6 +73,12 @@ function renderDraggable(onReorder = 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();
@@ -83,13 +89,19 @@ describe('<LayerList> reordering', () => {
     expect(onReorder.mock.calls[0][0].map((l: LayerDescriptor) => l.id)).toEqual(['b', 'a']);
   });
 
-  it('abandons the reorder when capture is lost mid-drag', () => {
+  // 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 });
-    dispatchOn(document, 'pointermove', { buttons: 1, clientY: 1 });
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
     dispatchOn(handle, 'lostpointercapture', {});
-    expect(onReorder).not.toHaveBeenCalled();
-    expect(container.querySelector('.lk-layer-list__row--dragging')).toBeNull();
+    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', () => {
@@ -118,3 +130,103 @@ describe('<LayerList> reordering', () => {
     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,18 +1,44 @@
 import { openPointerSession, type PointerSession } from '@weasel-js/core';
-import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react';
+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: LayerDescriptor[];
+  layers: LayerTreeNode[];
   visibility: Record<string, boolean>;
-  onReorder: (newOrder: LayerDescriptor[]) => void;
+  /** 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;
@@ -20,21 +46,87 @@ interface DragState {
   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. */
-export function LayerList({ layers, visibility, onReorder, onToggle, className }: LayerListProps) {
-  const reorderable = layers.filter((l) => !l.alwaysOn);
-  const pinned = layers.filter((l) => l.alwaysOn);
-  const [dragIndex, setDragIndex] = useState<number | null>(null);
+ *  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({ reorderable, pinned, onReorder });
-  commitRef.current = { reorderable, pinned, onReorder };
+  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'}>
@@ -46,10 +138,10 @@ export function LayerList({ layers, visibility, onReorder, onToggle, className }
   const clearDrag = () => {
     dragRef.current = null;
     sessionRef.current = null;
-    setDragIndex(null);
+    setDragMark(null);
   };
 
-  const startDrag = (e: ReactPointerEvent<HTMLElement>, index: number) => {
+  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');
@@ -57,73 +149,120 @@ export function LayerList({ layers, visibility, onReorder, onToggle, className }
     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;
-    setDragIndex(index);
+    setDragMark({ parentId, index });
     sessionRef.current = openPointerSession(e.currentTarget, e, {
       onMove: (ev) => {
         const delta = Math.round((ev.clientY - drag.startY) / drag.pitch);
-        const last = commitRef.current.reorderable.length - 1;
+        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));
-        setDragIndex(drag.toIndex);
+        setDragMark({ parentId, index: drag.toIndex });
       },
       onEnd: () => {
-        const { reorderable: rows, pinned: locked, onReorder: commit } = commitRef.current;
+        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([...next, ...locked]);
+        commit(withChildren(tree, parentId, [...next, ...locked]));
       },
       // An interrupted drag never named a destination, so it reorders nothing.
       onCancel: clearDrag,
     });
   };
 
-  return (
-    <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>
-      {reorderable.map((layer, i) => {
-        const isDragging = dragIndex === i;
-        return (
-          <div
-            key={layer.id}
-            className={
-              isDragging ? 'lk-layer-list__row lk-layer-list__row--dragging' : 'lk-layer-list__row'
-            }
-          >
-            <button
-              type="button"
-              className="lk-layer-list__handle"
-              aria-label={`Reorder ${layer.label}`}
-              onPointerDown={(e) => startDrag(e, i)}
-            >
-              <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>
-        );
-      })}
-      {pinned.map((layer) => (
-        <div key={layer.id} className="lk-layer-list__row lk-layer-list__row--pinned">
-          <span className="lk-layer-list__lock" role="img" aria-label="Always on">
-            🔒
-          </span>
+  // 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/layers/index.ts

@@ -1,3 +1,3 @@
 export type { LayerCapability, LayerDescriptor } from '../instrument/types';
-export type { LayerListProps } from './LayerList';
+export type { LayerListProps, LayerTreeNode } from './LayerList';
 export { LayerList } from './LayerList';

package/src/passthrough/weasel-ui.ts

@@ -51,6 +51,11 @@ export {
   type DataGridProps,
   Dialog,
   type DialogProps,
+  Disclosure,
+  type DisclosureDirection,
+  type DisclosureProps,
+  DisclosureRow,
+  type DisclosureRowProps,
   DragHandleGlyph,
   type DragHandleGlyphProps,
   detectPlatform,

package/src/primitives/FloatingPanel.test.tsx

@@ -332,14 +332,19 @@ describe('FloatingPanel drag lifecycle', () => {
     expect(panel.style.left).toBe('100px');
   });
 
-  it('ends the drag when capture is lost mid-gesture', () => {
+  // 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 panel is still in the document', () => {
     const { panel } = renderPanel(<FloatingPanel anchor="top-left">x</FloatingPanel>);
     fireEvent.pointerDown(panel, { pointerId: 1, buttons: 1, clientX: 100, clientY: 100 });
     fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 200, clientY: 180 });
+    expect(panel.style.left).toBe('100px');
+    // Chrome releases capture a beat before it delivers pointerup, so ending
+    // here throws away a release that has already been dispatched.
     fireEvent(panel, new PointerEvent('lostpointercapture', { pointerId: 1, bubbles: true }));
-    expect(panel.dataset.dragging).toBeUndefined();
+    expect(panel.dataset.dragging).toBe('true');
     fireEvent.pointerMove(document.body, { pointerId: 1, buttons: 1, clientX: 300, clientY: 180 });
-    expect(panel.style.left).toBe('100px');
+    expect(panel.style.left).toBe('200px');
   });
 
   it('reads a move with nothing held as the release that never arrived', () => {