sh3-core 0.1.0

package/dist/layout/LayoutRenderer.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+  /*
+   * LayoutRenderer — recursive walker for a LayoutNode tree.
+   *
+   * Dispatches on the node kind:
+   *   split → <ResizableSplitter> with one recursive <Self> per pane
+   *   tabs  → <TabbedPanel> with one <SlotContainer> per tab, a
+   *           SlotDropZone overlay, and a drag controller wired to
+   *           the drag engine
+   *   slot  → <SlotContainer> wrapped in a SlotDropZone
+   *
+   * Props: only `path` — a list of child indices from the root. The
+   * node itself is resolved as a $derived from `layoutStore.root` by
+   * walking the path. This is how we sidestep Svelte 5's
+   * `ownership_invalid_mutation` warning for a recursive component:
+   *   - Passing `node` as a prop would make every mutation (e.g.
+   *     `node.activeTab = i`) a write to a child-received prop, which
+   *     the ownership tracker flags regardless of whether the
+   *     underlying $state lives in a component or in a module.
+   *   - Passing only `path` and deriving `node` locally means
+   *     mutations go through a $derived of module state — no prop is
+   *     involved, no ownership warning fires.
+   *
+   * `path` is a plain array, not reactive state, so there is no
+   * ownership concern on it. Each recursive call builds a new child
+   * path via `[...path, i]`.
+   */
+
+  import type { TabsNode, LayoutNode } from './types';
+  import ResizableSplitter from '../primitives/ResizableSplitter.svelte';
+  import TabbedPanel, { type TabDragController } from '../primitives/TabbedPanel.svelte';
+  import SlotContainer from './SlotContainer.svelte';
+  import SlotDropZone from './SlotDropZone.svelte';
+  import Self from './LayoutRenderer.svelte';
+  import { layoutStore } from './store.svelte';
+  import { nodeAtPath } from './ops';
+  import { isSlotClosable, isSlotDirty } from './slotHostPool.svelte';
+  import { closeTab } from './inspection';
+  import {
+    dragState,
+    beginTabDrag,
+    setDropTarget,
+    clearDropTarget,
+    suppressNextClick,
+  } from './drag.svelte';
+
+  let { path = [] }: { path?: number[] } = $props();
+
+  /**
+   * Resolve the current node by walking `layoutStore.root` along the
+   * path. $derived tracks the reads so Svelte re-runs this when the
+   * layout mutates. If the path becomes invalid mid-mutation (a
+   * cleanup pass can collapse nodes out from under a recursive
+   * renderer), we render null.
+   */
+  const node = $derived(nodeAtPath(layoutStore.root, path));
+
+  /**
+   * Build a TabDragController bound to the current tabs node.
+   * Rebuilt whenever `node` changes identity (mutation can replace
+   * the node at this path with a new one during cleanup).
+   */
+  function makeController(tabsNode: TabsNode): TabDragController {
+    return {
+      get isDragging() {
+        return dragState.phase === 'dragging';
+      },
+      onPointerDown(index, event, element) {
+        const entry = tabsNode.tabs[index];
+        if (!entry) return;
+        beginTabDrag(entry.slotId, entry, event, element);
+      },
+      onStripHover(stripRect, pointerX, pointerY, tabRects) {
+        if (pointerY < stripRect.top || pointerY > stripRect.bottom) {
+          clearDropTarget((t) => t.kind === 'strip' && t.tabsNode === tabsNode);
+          return null;
+        }
+        let insertIndex = tabRects.length;
+        for (let i = 0; i < tabRects.length; i++) {
+          const r = tabRects[i];
+          const mid = r.left + r.width / 2;
+          if (pointerX < mid) {
+            insertIndex = i;
+            break;
+          }
+        }
+        // Normalize for same-strip reorder so the engine's commit
+        // doesn't double-count the removal shift: if the source tab
+        // lives in this strip at index < insertIndex, subtract one.
+        const source = dragState.source;
+        if (source) {
+          const srcIdx = tabsNode.tabs.findIndex((t) => t.slotId === source.slotId);
+          if (srcIdx >= 0 && srcIdx < insertIndex) insertIndex -= 1;
+        }
+        setDropTarget({ kind: 'strip', tabsNode, insertIndex });
+        return insertIndex;
+      },
+      onStripLeave() {
+        clearDropTarget((t) => t.kind === 'strip' && t.tabsNode === tabsNode);
+      },
+    };
+  }
+
+  // Narrowing helpers — Svelte templates can't narrow a $derived
+  // across block boundaries, so we re-cast inside each branch below.
+  // These getters are just there to make the template readable.
+  function asSplit(n: LayoutNode) {
+    return n.type === 'split' ? n : null;
+  }
+  function asTabs(n: LayoutNode) {
+    return n.type === 'tabs' ? n : null;
+  }
+  function asSlot(n: LayoutNode) {
+    return n.type === 'slot' ? n : null;
+  }
+
+  /** Build per-tab closable flags from reactive pool state. */
+  function tabClosable(tabs: import('./types').TabEntry[]): (boolean | undefined)[] {
+    return tabs.map((t) => isSlotClosable(t.slotId) || undefined);
+  }
+
+  /** Build per-tab dirty flags for TabbedPanel from live pool state. */
+  function tabDirty(tabs: import('./types').TabEntry[]): (boolean | undefined)[] {
+    return tabs.map((t) => isSlotDirty(t.slotId) || undefined);
+  }
+
+  /** Handle close button click from TabbedPanel. */
+  function handleTabClose(tabs: import('./types').TabEntry[], index: number) {
+    const entry = tabs[index];
+    if (entry) closeTab(entry.slotId);
+  }
+
+  /** Svelte action: mount a custom empty renderer into the element. */
+  function mountEmptyRenderer(node: HTMLElement, renderer: (el: HTMLElement) => void) {
+    renderer(node);
+  }
+
+  /**
+   * Drop handler for empty persistent tab groups. The whole area acts as
+   * a single "insert as first tab" target — no quadrant splits.
+   */
+  function onEmptyTabsDrop(_e: PointerEvent, tabsNode: import('./types').TabsNode) {
+    if (dragState.phase !== 'dragging') return;
+    setDropTarget({ kind: 'strip', tabsNode, insertIndex: 0 });
+  }
+
+  function onEmptyTabsLeave() {
+    clearDropTarget((t) => t.kind === 'strip' && t.insertIndex === 0);
+  }
+</script>
+
+{#if node}
+  {#if node.type === 'split'}
+    {@const split = asSplit(node)!}
+    <ResizableSplitter
+      direction={split.direction}
+      sizes={split.sizes}
+      pinned={split.pinned}
+      collapsed={split.collapsed}
+      count={split.children.length}
+      pane={splitPane}
+      onResize={(i, v) => (split.sizes[i] = v)}
+      onCollapseToggle={(i, v) => {
+        if (!split.collapsed) split.collapsed = split.children.map(() => false);
+        split.collapsed[i] = v;
+      }}
+    />
+    {#snippet splitPane(i: number)}
+      <Self path={[...path, i]} />
+    {/snippet}
+  {:else if node.type === 'tabs'}
+    {@const tabs = asTabs(node)}
+    {#if tabs && tabs.tabs.length > 0}
+      {@const controller = makeController(tabs)}
+      <TabbedPanel
+        labels={tabs.tabs.map((t) => t.label)}
+        icons={tabs.tabs.map((t) => t.icon)}
+        activeTab={tabs.activeTab}
+        onActiveChange={(i) => (tabs.activeTab = i)}
+        body={tabBody}
+        dragController={controller}
+        clickGuard={suppressNextClick}
+        closable={tabClosable(tabs.tabs)}
+        dirty={tabDirty(tabs.tabs)}
+        onClose={(i) => handleTabClose(tabs.tabs, i)}
+      />
+      {#snippet tabBody(i: number)}
+        {@const entry = tabs.tabs[i]}
+        <div class="tab-slot-wrapper">
+          <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
+          <SlotDropZone path={path} />
+        </div>
+      {/snippet}
+    {:else if tabs?.persistent}
+      <div class="empty-tabs-placeholder">
+        {#if tabs.emptyRenderer}
+          <div class="empty-tabs-custom" use:mountEmptyRenderer={tabs.emptyRenderer}></div>
+        {:else}
+          <div class="empty-tabs-default">
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="empty-tabs-drop"
+              onpointermove={(e) => onEmptyTabsDrop(e, tabs)}
+              onpointerleave={onEmptyTabsLeave}
+            ></div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {:else}
+    {@const slot = asSlot(node)!}
+    <div class="leaf-slot-wrapper">
+      <SlotContainer node={slot} />
+      <SlotDropZone path={path} />
+    </div>
+  {/if}
+{/if}
+
+<style>
+  .tab-slot-wrapper,
+  .leaf-slot-wrapper {
+    position: absolute;
+    inset: 0;
+    min-width: 0;
+    min-height: 0;
+  }
+  .empty-tabs-placeholder {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    position: relative;
+  }
+  .empty-tabs-default {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--shell-fg-muted);
+    font-size: 12px;
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--shell-bg) 0 10px,
+        var(--shell-bg-elevated) 10px 20px
+      );
+    border: 1px dashed var(--shell-border-strong);
+  }
+  .empty-tabs-custom {
+    position: absolute;
+    inset: 0;
+  }
+  .empty-tabs-drop {
+    position: absolute;
+    inset: 0;
+    pointer-events: auto;
+  }
+</style>

package/dist/layout/LayoutRenderer.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    path?: number[];
+};
+declare const LayoutRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type LayoutRenderer = ReturnType<typeof LayoutRenderer>;
+export default LayoutRenderer;

package/dist/layout/SlotContainer.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  /*
+   * SlotContainer — the leaf of the layout tree and the hand-off point
+   * between the framework and shard-contributed views.
+   *
+   * Phase 6 change: the mounted view no longer lives inside this
+   * component's own DOM. Instead, the slot host is owned by the
+   * `slotHostPool` module and SlotContainer merely attaches (and later
+   * releases) the pooled host to its own wrapper. This is what makes
+   * drag-to-reorganize survive: when a tab moves, the old SlotContainer
+   * tears down and a new one mounts, but the pooled host (and the view
+   * mounted into it) is re-parented to the new wrapper without being
+   * destroyed. See slotHostPool.ts for the refcount / deferred-destroy
+   * details.
+   *
+   * Responsibilities:
+   *   1. Acquire the pooled host for `node.slotId` on mount and append
+   *      it to the wrapper.
+   *   2. Release the pooled host on unmount. The pool decides whether
+   *      that's a genuine destroy or the first half of a re-parent.
+   *   3. If no factory is registered for the viewId (empty slot or the
+   *      shard providing it hasn't activated yet), render a placeholder
+   *      in the wrapper alongside the empty host. A local ResizeObserver
+   *      feeds the placeholder's dimensions readout.
+   *
+   * The view's own onResize delivery is NOT SlotContainer's job — the
+   * pool owns a ResizeObserver on each host that outlives this component
+   * across re-parents. See slotHostPool.ts.
+   *
+   * Note on the placeholder: the pool creates a host even when there is
+   * no factory, so the placeholder is layered *on top* of the empty
+   * host. That keeps the acquire/release path uniform — phase 7's
+   * "factory registered after layout render" case will just replace the
+   * host's contents without rewriting SlotContainer.
+   */
+
+  import type { SlotNode } from './types';
+  import { getView } from '../shards/registry';
+  import { acquireSlotHost, releaseSlotHost } from './slotHostPool.svelte';
+
+  let { node, label = '' }: { node: SlotNode; label?: string } = $props();
+
+  let wrapper: HTMLDivElement | undefined = $state();
+  let width = $state(0);
+  let height = $state(0);
+  // Whether a factory is registered — drives the placeholder. The pool
+  // owns the actual mount call; we mirror the registry lookup here just
+  // to decide whether to show the "no factory" hint.
+  const hasFactory = $derived(node.viewId ? !!getView(node.viewId) : false);
+
+  $effect(() => {
+    if (!wrapper) return;
+
+    const host = acquireSlotHost(node.slotId, node.viewId, label || node.viewId || node.slotId);
+    wrapper.appendChild(host);
+
+    // Local observer exists only to drive the placeholder's dims text;
+    // the view's own onResize is delivered by the pool.
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const box = entry.contentRect;
+        width = Math.round(box.width);
+        height = Math.round(box.height);
+      }
+    });
+    ro.observe(wrapper);
+
+    return () => {
+      ro.disconnect();
+      releaseSlotHost(node.slotId);
+    };
+  });
+</script>
+
+<div
+  class="slot"
+  data-slot-id={node.slotId}
+  data-view-id={node.viewId ?? ''}
+  bind:this={wrapper}
+>
+  {#if !hasFactory}
+    <div class="slot-placeholder">
+      <div class="slot-id">{node.slotId}</div>
+      <div class="slot-meta">
+        {#if node.viewId}
+          no factory for <code>{node.viewId}</code>
+        {:else}
+          <em>empty slot</em>
+        {/if}
+      </div>
+      <div class="slot-dims">{width} × {height}</div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .slot {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .slot-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--shell-pad-sm);
+    color: var(--shell-fg-muted);
+    font-size: 12px;
+    text-align: center;
+    padding: var(--shell-pad-md);
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--shell-bg) 0 10px,
+        var(--shell-bg-elevated) 10px 20px
+      );
+    border: 1px dashed var(--shell-border-strong);
+    pointer-events: none;
+  }
+  .slot-id {
+    color: var(--shell-fg);
+    font-family: var(--shell-font-mono);
+    font-size: 13px;
+  }
+  .slot-meta code {
+    font-family: var(--shell-font-mono);
+    color: var(--shell-accent);
+  }
+  .slot-dims {
+    font-family: var(--shell-font-mono);
+    color: var(--shell-fg-subtle);
+    font-size: 11px;
+  }
+</style>

package/dist/layout/SlotContainer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SlotNode } from './types';
+type $$ComponentProps = {
+    node: SlotNode;
+    label?: string;
+};
+declare const SlotContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type SlotContainer = ReturnType<typeof SlotContainer>;
+export default SlotContainer;

package/dist/layout/SlotDropZone.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  /*
+   * SlotDropZone — an overlay covering a slot's body that, during a
+   * drag, reports 4-quadrant split-drop targets to the drag engine
+   * and draws a colored quadrant highlight matching the hovered side.
+   *
+   * Sits in the tab-body pane (for tab leaves) or directly over a
+   * standalone slot container. Does not intercept pointer events when
+   * no drag is active; during a drag, it captures pointermove to
+   * compute the hovered quadrant.
+   *
+   * Quadrant math:
+   *   The body is divided into 4 triangles meeting at the center, so
+   *   each triangle maps the nearest edge to a split side. Top → top
+   *   split (vertical, new tab above). Same for bottom / left / right.
+   *   The inner "center" region is deliberately absent in phase 6 —
+   *   we don't support "merge into same tabs group" via body drop,
+   *   only via strip drop. This keeps the UX unambiguous: body = split,
+   *   strip = merge.
+   */
+
+  import { dragState, setDropTarget, clearDropTarget, type DropTarget } from './drag.svelte';
+  import type { LayoutPath, SplitSide } from './ops';
+
+  let {
+    path,
+  }: {
+    /** Path of the node this zone covers, used when reporting the drop. */
+    path: LayoutPath;
+  } = $props();
+
+  let zoneEl: HTMLDivElement | undefined = $state();
+  let hoveredSide: SplitSide | null = $state(null);
+
+  // Don't capture pointer events unless a drag is in progress — otherwise
+  // the zone would shadow the slot's own interactions.
+  const active = $derived(dragState.phase === 'dragging');
+
+  function quadrantFor(x: number, y: number, rect: DOMRect): SplitSide {
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    const dx = x - cx;
+    const dy = y - cy;
+    // Triangles: compare which signed half-plane the point falls in,
+    // determined by the cell aspect ratio so the diagonals meet at the
+    // center regardless of shape.
+    const nx = dx / rect.width;
+    const ny = dy / rect.height;
+    if (Math.abs(nx) > Math.abs(ny)) {
+      return nx < 0 ? 'left' : 'right';
+    }
+    return ny < 0 ? 'top' : 'bottom';
+  }
+
+  function onMove(e: PointerEvent) {
+    if (!zoneEl) return;
+    const rect = zoneEl.getBoundingClientRect();
+    // If pointer is outside the zone (pointercapture from elsewhere),
+    // clear.
+    if (
+      e.clientX < rect.left ||
+      e.clientX > rect.right ||
+      e.clientY < rect.top ||
+      e.clientY > rect.bottom
+    ) {
+      if (hoveredSide !== null) {
+        hoveredSide = null;
+        clearDropTarget((t) => t.kind === 'split' && t.path.join('/') === path.join('/'));
+      }
+      return;
+    }
+    const side = quadrantFor(e.clientX, e.clientY, rect);
+    if (side !== hoveredSide) {
+      hoveredSide = side;
+      const target: DropTarget = { kind: 'split', path: [...path], side };
+      setDropTarget(target);
+    }
+  }
+
+  function onLeave() {
+    if (hoveredSide !== null) {
+      hoveredSide = null;
+      clearDropTarget((t) => t.kind === 'split' && t.path.join('/') === path.join('/'));
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="slot-drop-zone"
+  class:active
+  bind:this={zoneEl}
+  onpointermove={onMove}
+  onpointerleave={onLeave}
+>
+  {#if hoveredSide}
+    <div class="quad-highlight quad-{hoveredSide}"></div>
+  {/if}
+</div>
+
+<style>
+  .slot-drop-zone {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .slot-drop-zone.active {
+    pointer-events: auto;
+  }
+  .quad-highlight {
+    position: absolute;
+    background: var(--shell-accent);
+    opacity: 0.18;
+    border: 1px dashed var(--shell-accent);
+    pointer-events: none;
+    transition: inset 80ms ease;
+  }
+  .quad-highlight.quad-left   { top: 0; bottom: 0; left: 0; right: 50%; }
+  .quad-highlight.quad-right  { top: 0; bottom: 0; left: 50%; right: 0; }
+  .quad-highlight.quad-top    { left: 0; right: 0; top: 0; bottom: 50%; }
+  .quad-highlight.quad-bottom { left: 0; right: 0; top: 50%; bottom: 0; }
+</style>

package/dist/layout/SlotDropZone.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutPath } from './ops';
+type $$ComponentProps = {
+    /** Path of the node this zone covers, used when reporting the drop. */
+    path: LayoutPath;
+};
+declare const SlotDropZone: import("svelte").Component<$$ComponentProps, {}, "">;
+type SlotDropZone = ReturnType<typeof SlotDropZone>;
+export default SlotDropZone;

package/dist/layout/drag.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { TabEntry, TabsNode } from './types';
+import { type LayoutPath, type SplitSide } from './ops';
+export type DropTarget = {
+    kind: 'strip';
+    tabsNode: TabsNode;
+    /** Insertion index within tabsNode.tabs (0..length). */
+    insertIndex: number;
+} | {
+    kind: 'split';
+    path: LayoutPath;
+    side: SplitSide;
+};
+interface DragSource {
+    slotId: string;
+    entry: TabEntry;
+    /** The tab's viewport rect at drag start — used to offset the ghost. */
+    startRect: DOMRect;
+    /** Pointer offset inside the tab at drag start. */
+    offsetX: number;
+    offsetY: number;
+}
+interface DragState {
+    phase: 'idle' | 'pending' | 'dragging';
+    source: DragSource | null;
+    pointerX: number;
+    pointerY: number;
+    target: DropTarget | null;
+}
+export declare const dragState: DragState;
+export declare function suppressNextClick(): boolean;
+/**
+ * Begin a potential tab drag. Call from pointerdown on a tab element.
+ * This does not yet enter the dragging phase — movement past the
+ * threshold is required.
+ */
+export declare function beginTabDrag(slotId: string, entry: TabEntry, event: PointerEvent, tabElement: HTMLElement): void;
+/**
+ * Called by drop zone components when the pointer is over them. The
+ * last call wins, so innermost / most-specific zones should call this
+ * on pointermove over their geometry. `clearDropTarget` is called when
+ * the pointer leaves.
+ */
+export declare function setDropTarget(target: DropTarget): void;
+export declare function clearDropTarget(match?: (target: DropTarget) => boolean): void;
+export {};