@weasel-js/labkit 0.1.0

package/dist/chunk-HXZHVU4G.js

@@ -0,0 +1,126 @@
+import { CanvasStackContext } from './chunk-PWC7AQZM.js';
+import { useState, useRef, useEffect, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/primitives/fpsAverage.ts
+function rollingAverage(samples) {
+  if (samples.length === 0) return 0;
+  const sum = samples.reduce((acc, n) => acc + n, 0);
+  return Math.round(sum / samples.length);
+}
+var SAMPLE_WINDOW = 30;
+function FpsMeter() {
+  const [fps, setFps] = useState(0);
+  const samplesRef = useRef([]);
+  const lastTimeRef = useRef(null);
+  useEffect(() => {
+    let rafId = 0;
+    const tick = (time) => {
+      const last = lastTimeRef.current;
+      if (last !== null) {
+        const delta = time - last;
+        if (delta > 0) {
+          const samples = samplesRef.current;
+          samples.push(1e3 / delta);
+          if (samples.length > SAMPLE_WINDOW) samples.shift();
+          setFps(rollingAverage(samples));
+        }
+      }
+      lastTimeRef.current = time;
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "lk-fps-meter", children: /* @__PURE__ */ jsxs("span", { className: "lk-fps-meter-value", children: [
+    "FPS ",
+    fps
+  ] }) });
+}
+function niceNumber(n) {
+  if (n <= 0) return 1;
+  const exp = Math.floor(Math.log10(n));
+  const fraction = n / 10 ** exp;
+  let nice;
+  if (fraction < 1.5) nice = 1;
+  else if (fraction < 3.5) nice = 2;
+  else if (fraction < 7.5) nice = 5;
+  else nice = 10;
+  return nice * 10 ** exp;
+}
+function ScaleIndicator({
+  zoom,
+  pixelsPerUnit = 1,
+  unit = "px",
+  targetWidth = 100
+}) {
+  const ctxValue = useContext(CanvasStackContext);
+  const effectiveZoom = zoom ?? ctxValue?.view.zoom ?? 1;
+  const effectivePxPerUnit = pixelsPerUnit * effectiveZoom;
+  const targetUnits = targetWidth / effectivePxPerUnit;
+  const niceUnits = niceNumber(targetUnits);
+  const barWidth = niceUnits * effectivePxPerUnit;
+  return /* @__PURE__ */ jsxs("div", { className: "lk-scale-indicator", role: "img", "aria-label": `Scale: ${niceUnits} ${unit}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "lk-scale-indicator-bar", style: { width: `${barWidth}px` } }),
+    /* @__PURE__ */ jsxs("span", { className: "lk-scale-indicator-label", children: [
+      niceUnits,
+      " ",
+      unit
+    ] })
+  ] });
+}
+function Sidebar({ children, title, collapsed = false, onToggle }) {
+  const className = `lk-sidebar${collapsed ? " lk-sidebar--collapsed" : ""}`;
+  return /* @__PURE__ */ jsxs("aside", { className, children: [
+    (title || onToggle) && /* @__PURE__ */ jsxs("div", { className: "lk-sidebar-header", children: [
+      title && /* @__PURE__ */ jsx("span", { className: "lk-sidebar-title", children: title }),
+      onToggle && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-sidebar-toggle",
+          onClick: onToggle,
+          "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+          children: collapsed ? "\u203A" : "\u2039"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lk-sidebar-body", children })
+  ] });
+}
+function StatusBar({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "lk-status-bar", children });
+}
+function Section({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "lk-status-bar-section", children });
+}
+StatusBar.Section = Section;
+function Toolbar({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "lk-toolbar", children });
+}
+function Title({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-title", children });
+}
+function Button({ children, onClick, disabled, title }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "lk-toolbar-button",
+      onClick,
+      disabled,
+      title,
+      children
+    }
+  );
+}
+function Spacer() {
+  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-spacer", "aria-hidden": "true" });
+}
+Toolbar.Title = Title;
+Toolbar.Button = Button;
+Toolbar.Spacer = Spacer;
+
+export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar };
+//# sourceMappingURL=chunk-HXZHVU4G.js.map
+//# sourceMappingURL=chunk-HXZHVU4G.js.map

package/dist/chunk-HXZHVU4G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/fpsAverage.ts","../src/primitives/FpsMeter.tsx","../src/primitives/ScaleIndicator.tsx","../src/primitives/Sidebar.tsx","../src/primitives/StatusBar.tsx","../src/primitives/Toolbar.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-HXZHVU4G.js","sourcesContent":["export function rollingAverage(samples: readonly number[]): number {\n  if (samples.length === 0) return 0;\n  const sum = samples.reduce((acc, n) => acc + n, 0);\n  return Math.round(sum / samples.length);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { rollingAverage } from './fpsAverage';\n\nconst SAMPLE_WINDOW = 30;\n\nexport function FpsMeter() {\n  const [fps, setFps] = useState(0);\n  const samplesRef = useRef<number[]>([]);\n  const lastTimeRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    let rafId = 0;\n    const tick = (time: number) => {\n      const last = lastTimeRef.current;\n      if (last !== null) {\n        const delta = time - last;\n        if (delta > 0) {\n          const samples = samplesRef.current;\n          samples.push(1000 / delta);\n          if (samples.length > SAMPLE_WINDOW) samples.shift();\n          setFps(rollingAverage(samples));\n        }\n      }\n      lastTimeRef.current = time;\n      rafId = requestAnimationFrame(tick);\n    };\n    rafId = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(rafId);\n  }, []);\n\n  return (\n    <div className=\"lk-fps-meter\">\n      <span className=\"lk-fps-meter-value\">FPS {fps}</span>\n    </div>\n  );\n}\n","import { useContext } from 'react';\nimport { CanvasStackContext } from '../canvas/CanvasStackContext';\n\nexport interface ScaleIndicatorProps {\n  /** Current view zoom factor. If omitted, reads from CanvasStackContext. Defaults to 1. */\n  zoom?: number;\n  /** World pixels per unit at zoom=1. Default: 1. */\n  pixelsPerUnit?: number;\n  /** Unit label. Default: 'px'. */\n  unit?: string;\n  /** Target bar width in display pixels. Default: 100. */\n  targetWidth?: number;\n}\n\n// Rounds n to a \"nice\" number — 1, 2, 5, 10, 20, 50, ...\nfunction niceNumber(n: number): number {\n  if (n <= 0) return 1;\n  const exp = Math.floor(Math.log10(n));\n  const fraction = n / 10 ** exp;\n  let nice: number;\n  if (fraction < 1.5) nice = 1;\n  else if (fraction < 3.5) nice = 2;\n  else if (fraction < 7.5) nice = 5;\n  else nice = 10;\n  return nice * 10 ** exp;\n}\n\nexport function ScaleIndicator({\n  zoom,\n  pixelsPerUnit = 1,\n  unit = 'px',\n  targetWidth = 100,\n}: ScaleIndicatorProps) {\n  const ctxValue = useContext(CanvasStackContext);\n  const effectiveZoom = zoom ?? ctxValue?.view.zoom ?? 1;\n  const effectivePxPerUnit = pixelsPerUnit * effectiveZoom;\n  const targetUnits = targetWidth / effectivePxPerUnit;\n  const niceUnits = niceNumber(targetUnits);\n  const barWidth = niceUnits * effectivePxPerUnit;\n  return (\n    <div className=\"lk-scale-indicator\" role=\"img\" aria-label={`Scale: ${niceUnits} ${unit}`}>\n      <div className=\"lk-scale-indicator-bar\" style={{ width: `${barWidth}px` }} />\n      <span className=\"lk-scale-indicator-label\">\n        {niceUnits} {unit}\n      </span>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface SidebarProps {\n  children: ReactNode;\n  title?: string;\n  collapsed?: boolean;\n  onToggle?: () => void;\n}\n\nexport function Sidebar({ children, title, collapsed = false, onToggle }: SidebarProps) {\n  const className = `lk-sidebar${collapsed ? ' lk-sidebar--collapsed' : ''}`;\n  return (\n    <aside className={className}>\n      {(title || onToggle) && (\n        <div className=\"lk-sidebar-header\">\n          {title && <span className=\"lk-sidebar-title\">{title}</span>}\n          {onToggle && (\n            <button\n              type=\"button\"\n              className=\"lk-sidebar-toggle\"\n              onClick={onToggle}\n              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            >\n              {collapsed ? '›' : '‹'}\n            </button>\n          )}\n        </div>\n      )}\n      <div className=\"lk-sidebar-body\">{children}</div>\n    </aside>\n  );\n}\n","import type { ReactNode } from 'react';\n\nexport interface StatusBarProps {\n  children: ReactNode;\n}\n\nexport function StatusBar({ children }: StatusBarProps) {\n  return <div className=\"lk-status-bar\">{children}</div>;\n}\n\ninterface SectionProps {\n  children: ReactNode;\n}\nfunction Section({ children }: SectionProps) {\n  return <span className=\"lk-status-bar-section\">{children}</span>;\n}\n\nStatusBar.Section = Section;\n","import type { MouseEventHandler, ReactNode } from 'react';\n\nexport interface ToolbarProps {\n  children: ReactNode;\n}\n\nexport function Toolbar({ children }: ToolbarProps) {\n  return <div className=\"lk-toolbar\">{children}</div>;\n}\n\ninterface TitleProps {\n  children: ReactNode;\n}\nfunction Title({ children }: TitleProps) {\n  return <span className=\"lk-toolbar-title\">{children}</span>;\n}\n\ninterface ButtonProps {\n  children: ReactNode;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  disabled?: boolean;\n  title?: string;\n}\nfunction Button({ children, onClick, disabled, title }: ButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className=\"lk-toolbar-button\"\n      onClick={onClick}\n      disabled={disabled}\n      title={title}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction Spacer() {\n  return <span className=\"lk-toolbar-spacer\" aria-hidden=\"true\" />;\n}\n\nToolbar.Title = Title;\nToolbar.Button = Button;\nToolbar.Spacer = Spacer;\n"]}

package/dist/chunk-PWC7AQZM.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+// src/canvas/CanvasStackContext.ts
+var CanvasStackContext = createContext(null);
+
+export { CanvasStackContext };
+//# sourceMappingURL=chunk-PWC7AQZM.js.map
+//# sourceMappingURL=chunk-PWC7AQZM.js.map

package/dist/chunk-PWC7AQZM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/CanvasStackContext.ts"],"names":[],"mappings":";;;AAOO,IAAM,kBAAA,GAAqB,cAA8C,IAAI","file":"chunk-PWC7AQZM.js","sourcesContent":["import { createContext } from 'react';\nimport type { ViewTransform } from '../instrument/types';\n\nexport interface CanvasStackContextValue {\n  view: ViewTransform;\n}\n\nexport const CanvasStackContext = createContext<CanvasStackContextValue | null>(null);\n"]}

package/dist/chunk-SD3HDXR7.js

@@ -0,0 +1,161 @@
+import { _r, Ae } from './chunk-6FO7G5BB.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function LayerStack({
+  title,
+  items,
+  paletteKinds,
+  onAdd,
+  onRemove,
+  onReorder,
+  onPrimaryChange,
+  renderBody,
+  hideHead
+}) {
+  const [expandedIds, setExpandedIds] = useState(
+    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id))
+  );
+  useEffect(() => {
+    setExpandedIds((prev) => {
+      let next = 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 = _r({
+    items: dragItems,
+    selectedIds: [],
+    onReorder: (ids, targetIndex) => {
+      Ae("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)));
+      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) => {
+    setExpandedIds((s) => {
+      const n = new Set(s);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      return n;
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "lk-layer-stack", children: [
+    !hideHead && /* @__PURE__ */ jsxs("div", { className: "lk-layer-stack__head", children: [
+      /* @__PURE__ */ jsx("h2", { className: "lk-layer-stack__title", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "lk-layer-stack__palette", children: paletteKinds.map((k) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-layer-stack__add",
+          onClick: () => {
+            Ae("layer-stack", "onAdd", { kind: k });
+            onAdd(k);
+          },
+          "aria-label": `Add ${k}`,
+          children: k
+        },
+        k
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "lk-layer-stack__list",
+        ref: drag.containerProps.ref,
+        onPointerMove: drag.containerProps.onPointerMove,
+        onPointerUp: drag.containerProps.onPointerUp,
+        onPointerCancel: drag.containerProps.onPointerCancel,
+        children: [
+          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 } : void 0;
+            const { onPointerDown } = drag.rowProps(String(item.id), i);
+            return /* @__PURE__ */ jsxs("div", { className: "lk-layer-card-wrap", children: [
+              showHintBefore && /* @__PURE__ */ jsx("div", { className: "lk-layer-stack__drop-hint" }),
+              /* @__PURE__ */ jsxs("div", { className: cardCls, "data-testid": `lk-layer-card-${item.id}`, style: cardStyle, children: [
+                /* @__PURE__ */ jsxs("div", { className: "lk-layer-card__head", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lk-layer-card__handle",
+                      "aria-label": `Drag to reorder layer ${item.id}`,
+                      onPointerDown,
+                      onClick: () => toggleExpanded(item.id),
+                      children: item.badge ?? /* @__PURE__ */ jsx(DragHandleGlyph, {})
+                    }
+                  ),
+                  item.primaryValue !== void 0 && item.primaryOptions ? /* @__PURE__ */ jsx(
+                    "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(),
+                      children: item.primaryOptions.map((o) => /* @__PURE__ */ jsx("option", { value: o, children: o }, o))
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: "lk-layer-card__kind", children: item.kind }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "lk-layer-card__remove",
+                      "aria-label": "Remove layer",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onRemove(item.id);
+                      },
+                      children: "\u2715"
+                    }
+                  )
+                ] }),
+                expanded && /* @__PURE__ */ jsx("div", { className: "lk-layer-card__body", children: renderBody(item) })
+              ] }),
+              showHintAfter && /* @__PURE__ */ jsx("div", { className: "lk-layer-stack__drop-hint" })
+            ] }, item.id);
+          }),
+          items.length === 0 && /* @__PURE__ */ jsx("div", { className: "lk-layer-stack__empty", children: "No layers \u2014 add one above." })
+        ]
+      }
+    )
+  ] });
+}
+function DragHandleGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "16", viewBox: "0 0 8 16", fill: "currentColor", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "3", r: "1.1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "3", r: "1.1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "8", r: "1.1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "8", r: "1.1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "13", r: "1.1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "13", r: "1.1" })
+  ] });
+}
+
+export { LayerStack };
+//# sourceMappingURL=chunk-SD3HDXR7.js.map
+//# sourceMappingURL=chunk-SD3HDXR7.js.map

package/dist/chunk-SD3HDXR7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/layers/LayerStack.tsx"],"names":[],"mappings":"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","file":"chunk-SD3HDXR7.js","sourcesContent":["import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog, useReorderDragList } from '../../passthrough/weasel-ui';\n\nexport interface LayerStackItem {\n  /** Stable id used for keys, onRemove, onReorder. Numeric to match\n   *  common id-from-nextId conventions; string ids also work. */\n  id: number | string;\n  /** Short kind label rendered in the header when no primary select\n   *  is hoisted (e.g. \"shadow\", \"stroke\"). */\n  kind: string;\n  /** When present, hoist this select into the card header so the user\n   *  can switch mode/shape without expanding. */\n  primaryValue?: string;\n  primaryOptions?: string[];\n  /** Accent CSS color used as the left border / index-badge fill. */\n  accent?: string;\n  /** Optional badge text rendered before the primary control\n   *  (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n   *  glyph renders in its place. */\n  badge?: string;\n  /** Initial expanded state. Defaults to true for newly-added items. */\n  defaultExpanded?: boolean;\n}\n\nexport interface LayerStackProps {\n  title: string;\n  items: LayerStackItem[];\n  /** Kinds the user can add via the header palette. */\n  paletteKinds: string[];\n  onAdd: (kind: string) => void;\n  onRemove: (id: number | string) => void;\n  onReorder: (orderedIds: Array<number | string>) => void;\n  onPrimaryChange: (id: number | string, nextValue: string) => void;\n  /** Render the body controls for each item. */\n  renderBody: (item: LayerStackItem) => ReactNode;\n  /** Hide the title + palette row (used when an outer wrap renders its\n   *  own head — see speech-balloons Tails panel). */\n  hideHead?: boolean;\n}\n\nexport function LayerStack({\n  title,\n  items,\n  paletteKinds,\n  onAdd,\n  onRemove,\n  onReorder,\n  onPrimaryChange,\n  renderBody,\n  hideHead,\n}: LayerStackProps) {\n  const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n  );\n\n  useEffect(() => {\n    setExpandedIds((prev) => {\n      let next: Set<number | string> | null = null;\n      for (const item of items) {\n        if (item.defaultExpanded === false) continue;\n        if (prev.has(item.id)) continue;\n        if (next === null) next = new Set(prev);\n        next.add(item.id);\n      }\n      return next ?? prev;\n    });\n  }, [items]);\n\n  const dragItems = items.map((it) => ({ id: String(it.id), label: it.kind }));\n  const drag = useReorderDragList({\n    items: dragItems,\n    selectedIds: [],\n    onReorder: (ids, targetIndex) => {\n      dlog('layer-stack', 'onReorder', { ids, targetIndex });\n      const orig = items.map((i) => i.id);\n      const moving = new Set(ids);\n      const remaining = orig.filter((id) => !moving.has(String(id)));\n      const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n      // weasel reports targetIndex against the original list (which includes\n      // the dragged row). Each moved item that originally sat before\n      // targetIndex needs to shift the insertion point left by one.\n      const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n      const adjusted = targetIndex - shift;\n      const out = [...remaining];\n      out.splice(adjusted, 0, ...movedIds);\n      onReorder(out);\n    },\n  });\n\n  const toggleExpanded = (id: number | string) => {\n    setExpandedIds((s) => {\n      const n = new Set(s);\n      if (n.has(id)) n.delete(id);\n      else n.add(id);\n      return n;\n    });\n  };\n\n  return (\n    <div className=\"lk-layer-stack\">\n      {!hideHead && (\n        <div className=\"lk-layer-stack__head\">\n          <h2 className=\"lk-layer-stack__title\">{title}</h2>\n          <div className=\"lk-layer-stack__palette\">\n            {paletteKinds.map((k) => (\n              <button\n                key={k}\n                type=\"button\"\n                className=\"lk-layer-stack__add\"\n                onClick={() => {\n                  dlog('layer-stack', 'onAdd', { kind: k });\n                  onAdd(k);\n                }}\n                aria-label={`Add ${k}`}\n              >\n                {k}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div\n        className=\"lk-layer-stack__list\"\n        ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n        onPointerMove={drag.containerProps.onPointerMove}\n        onPointerUp={drag.containerProps.onPointerUp}\n        onPointerCancel={drag.containerProps.onPointerCancel}\n      >\n        {items.map((item, i) => {\n          const expanded = expandedIds.has(item.id);\n          const draggedId = drag.state.draggedIds?.[0];\n          const isDragging = draggedId === String(item.id);\n          const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n          const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n          const cardCls = [\n            'lk-layer-card',\n            expanded ? 'is-expanded' : 'is-collapsed',\n            isDragging ? 'is-dragging' : '',\n            item.accent ? 'has-accent' : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n          const cardStyle = item.accent\n            ? ({ '--lk-layer-card-accent': item.accent } as CSSProperties)\n            : undefined;\n          const { onPointerDown } = drag.rowProps(String(item.id), i);\n          return (\n            <div key={item.id} className=\"lk-layer-card-wrap\">\n              {showHintBefore && <div className=\"lk-layer-stack__drop-hint\" />}\n              <div className={cardCls} data-testid={`lk-layer-card-${item.id}`} style={cardStyle}>\n                <div className=\"lk-layer-card__head\">\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__handle\"\n                    aria-label={`Drag to reorder layer ${item.id}`}\n                    onPointerDown={onPointerDown}\n                    onClick={() => toggleExpanded(item.id)}\n                  >\n                    {item.badge ?? <DragHandleGlyph />}\n                  </button>\n                  {item.primaryValue !== undefined && item.primaryOptions ? (\n                    <select\n                      className=\"lk-layer-card__primary\"\n                      value={item.primaryValue}\n                      aria-label={`Primary select for layer ${item.id}`}\n                      onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      {item.primaryOptions.map((o) => (\n                        <option key={o} value={o}>\n                          {o}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <span className=\"lk-layer-card__kind\">{item.kind}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    className=\"lk-layer-card__remove\"\n                    aria-label=\"Remove layer\"\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemove(item.id);\n                    }}\n                  >\n                    ✕\n                  </button>\n                </div>\n                {expanded && <div className=\"lk-layer-card__body\">{renderBody(item)}</div>}\n              </div>\n              {showHintAfter && <div className=\"lk-layer-stack__drop-hint\" />}\n            </div>\n          );\n        })}\n        {items.length === 0 && (\n          <div className=\"lk-layer-stack__empty\">No layers — add one above.</div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction DragHandleGlyph() {\n  return (\n    <svg width=\"12\" height=\"16\" viewBox=\"0 0 8 16\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n    </svg>\n  );\n}\n"]}