sh3-core 0.1.0

package/dist/primitives/ResizableSplitter.svelte

@@ -0,0 +1,333 @@
+<script lang="ts">
+  /*
+   * ResizableSplitter — a generic N-pane split container with drag handles.
+   *
+   * Used by <LayoutRenderer> to implement `split` nodes. Also available as a
+   * standalone primitive for shards that need internal split UI.
+   *
+   * Sizing model mirrors docs/design/layout.md:
+   *   - Each pane has a size value + a mode ('fr' | 'px').
+   *   - 'fr' panes are proportional flex-grow children and absorb window
+   *     resize deltas and drag deltas against each other.
+   *   - 'px' panes are pixel-pinned (flex: 0 0 Npx) and stay fixed during
+   *     window resize; dragging a handle adjacent to a px pane resizes the
+   *     px pane in absolute pixels.
+   *
+   * `sizes` is bindable so the parent (layout tree) can observe user drags.
+   * Phase 2 does not yet persist sizes — phase 7 wires that up.
+   */
+
+  import type { Snippet } from 'svelte';
+  import type { SizeMode, SplitDirection } from '../layout/types';
+
+  const MIN_PX = 40;
+  const COLLAPSED_PX = 28;
+
+  let {
+    direction,
+    sizes,
+    pinned,
+    collapsed,
+    count,
+    pane,
+    onResize,
+    onCollapseToggle,
+  }: {
+    direction: SplitDirection;
+    /**
+     * Per-pane sizes, read-only. The splitter computes flex bases
+     * from this array but does not mutate it — writes go out through
+     * `onResize`. Treating sizes as read-only keeps the primitive
+     * decoupled from how the caller stores its layout, and sidesteps
+     * Svelte 5's `ownership_invalid_mutation` warning that fires when
+     * a child component writes into a prop it didn't own.
+     */
+    sizes: number[];
+    pinned?: SizeMode[];
+    /** Per-pane collapsed state. Omitted entries default to false. */
+    collapsed?: boolean[];
+    /** Number of panes — `sizes.length` should match. */
+    count: number;
+    /** Snippet invoked once per pane with the pane index. */
+    pane: Snippet<[number]>;
+    /**
+     * Called whenever the splitter wants to update a pane's size.
+     * The parent is expected to write the value back into whatever
+     * it stores sizes in. A single per-index callback (rather than a
+     * whole-array setter) matches the drag math, which updates at
+     * most two panes per move, and avoids allocating a new array on
+     * every pointermove frame.
+     */
+    onResize?: (index: number, value: number) => void;
+    /** Called when a collapsed pane's header is clicked to toggle. */
+    onCollapseToggle?: (index: number, collapsed: boolean) => void;
+  } = $props();
+
+  let container: HTMLDivElement;
+
+  const modeOf = (i: number): SizeMode => pinned?.[i] ?? 'fr';
+  const isCollapsed = (i: number): boolean => collapsed?.[i] ?? false;
+
+  /** CSS `flex` shorthand for pane i. */
+  function flexFor(i: number): string {
+    if (isCollapsed(i)) return `0 0 ${COLLAPSED_PX}px`;
+    if (modeOf(i) === 'px') return `0 0 ${Math.max(MIN_PX, sizes[i])}px`;
+    // Proportional: grow = sizes[i], shrink = 1, basis = 0
+    return `${Math.max(0.0001, sizes[i])} 1 0`;
+  }
+
+  type DragState = {
+    handleIndex: number;       // boundary between child handleIndex and handleIndex+1
+    startClient: number;       // pointer x/y at drag start
+    startSizes: number[];      // sizes snapshot at drag start
+    containerPx: number;       // container length along split axis
+    totalFr: number;           // sum of 'fr' sizes at drag start
+    frAvailPx: number;         // pixels available to fr children at drag start
+  };
+
+  let drag: DragState | null = $state(null);
+
+  function beginDrag(e: PointerEvent, handleIndex: number) {
+    // Disable resize handles adjacent to collapsed panes.
+    if (isCollapsed(handleIndex) || isCollapsed(handleIndex + 1)) return;
+
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+
+    const rect = container.getBoundingClientRect();
+    const containerPx = direction === 'horizontal' ? rect.width : rect.height;
+
+    // Sum fr weights and subtract pixel-pinned pane sizes to get the pixel
+    // space the fr children collectively occupy.
+    let totalFr = 0;
+    let pxUsed = 0;
+    for (let i = 0; i < sizes.length; i++) {
+      if (modeOf(i) === 'fr') totalFr += sizes[i];
+      else pxUsed += Math.max(MIN_PX, sizes[i]);
+    }
+
+    drag = {
+      handleIndex,
+      startClient: direction === 'horizontal' ? e.clientX : e.clientY,
+      startSizes: sizes.slice(),
+      containerPx,
+      totalFr,
+      frAvailPx: Math.max(1, containerPx - pxUsed),
+    };
+  }
+
+  function moveDrag(e: PointerEvent) {
+    if (!drag) return;
+    const client = direction === 'horizontal' ? e.clientX : e.clientY;
+    const deltaPx = client - drag.startClient;
+
+    const a = drag.handleIndex;
+    const b = a + 1;
+    const modeA = modeOf(a);
+    const modeB = modeOf(b);
+
+    // Send updates through onResize rather than mutating the prop
+    // directly. Writing into `sizes` would trip Svelte 5's ownership
+    // warning; the parent owns the array and re-derives it for us.
+    const frPerPx = drag.totalFr / drag.frAvailPx;
+
+    if (modeA === 'fr' && modeB === 'fr') {
+      // Convert delta px to fr; clamp both sides to MIN_PX worth of fr.
+      // Positive deltaFr grows pane a and shrinks pane b, so:
+      //   - upper bound: deltaFr ≤ startSizes[b] - minFr (stop when b hits min)
+      //   - lower bound: deltaFr ≥ -(startSizes[a] - minFr) (stop when a hits min)
+      const minFr = MIN_PX * frPerPx;
+      const deltaFr = deltaPx * frPerPx;
+      const maxDelta = drag.startSizes[b] - minFr;
+      const minDelta = -(drag.startSizes[a] - minFr);
+      const clamped = Math.min(Math.max(deltaFr, minDelta), maxDelta);
+      onResize?.(a, drag.startSizes[a] + clamped);
+      onResize?.(b, drag.startSizes[b] - clamped);
+    } else if (modeA === 'px' && modeB === 'fr') {
+      const maxDelta = drag.frAvailPx - MIN_PX; // fr side must keep MIN_PX
+      const minDelta = MIN_PX - drag.startSizes[a];
+      onResize?.(
+        a,
+        drag.startSizes[a] + Math.min(Math.max(deltaPx, minDelta), maxDelta),
+      );
+    } else if (modeA === 'fr' && modeB === 'px') {
+      const maxDelta = drag.startSizes[b] - MIN_PX;
+      const minDelta = -(drag.frAvailPx - MIN_PX);
+      onResize?.(
+        b,
+        drag.startSizes[b] - Math.min(Math.max(deltaPx, minDelta), maxDelta),
+      );
+    } else {
+      // both px
+      const maxDelta = drag.startSizes[b] - MIN_PX;
+      const minDelta = -(drag.startSizes[a] - MIN_PX);
+      const clamped = Math.min(Math.max(deltaPx, minDelta), maxDelta);
+      onResize?.(a, drag.startSizes[a] + clamped);
+      onResize?.(b, drag.startSizes[b] - clamped);
+    }
+  }
+
+  function endDrag(e: PointerEvent) {
+    if (!drag) return;
+    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+    drag = null;
+  }
+</script>
+
+<div
+  class="splitter"
+  class:horizontal={direction === 'horizontal'}
+  class:vertical={direction === 'vertical'}
+  bind:this={container}
+>
+  {#each Array(count) as _, i (i)}
+    <div
+      class="splitter-pane"
+      class:collapsed={isCollapsed(i)}
+      style="flex: {flexFor(i)};"
+    >
+      {#if isCollapsed(i)}
+        <button
+          type="button"
+          class="collapse-header"
+          class:horizontal={direction === 'horizontal'}
+          class:vertical={direction === 'vertical'}
+          onclick={() => onCollapseToggle?.(i, false)}
+          aria-label="Expand pane"
+        >
+          <span class="collapse-icon">{direction === 'horizontal' ? '▸' : '▾'}</span>
+        </button>
+      {:else}
+        {#if onCollapseToggle}
+          <button
+            type="button"
+            class="collapse-header expanded"
+            class:horizontal={direction === 'horizontal'}
+            class:vertical={direction === 'vertical'}
+            onclick={() => onCollapseToggle?.(i, true)}
+            aria-label="Collapse pane"
+          >
+            <span class="collapse-icon">{direction === 'horizontal' ? '◂' : '▴'}</span>
+          </button>
+        {/if}
+        <div class="pane-content">
+          {@render pane(i)}
+        </div>
+      {/if}
+    </div>
+    {#if i < count - 1}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="splitter-handle"
+        class:dragging={drag?.handleIndex === i}
+        class:disabled={isCollapsed(i) || isCollapsed(i + 1)}
+        onpointerdown={(e) => beginDrag(e, i)}
+        onpointermove={moveDrag}
+        onpointerup={endDrag}
+        onpointercancel={endDrag}
+        role="separator"
+        aria-orientation={direction === 'horizontal' ? 'vertical' : 'horizontal'}
+      ></div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .splitter {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+  .splitter.horizontal { flex-direction: row; }
+  .splitter.vertical   { flex-direction: column; }
+
+  .splitter-pane {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+  }
+  .horizontal > .splitter-pane { flex-direction: row; }
+  .vertical > .splitter-pane   { flex-direction: column; }
+  .splitter-pane.collapsed {
+    overflow: visible;
+  }
+  .pane-content {
+    flex: 1 1 0;
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .collapse-header {
+    appearance: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--shell-bg-elevated);
+    border: none;
+    color: var(--shell-fg-muted);
+    cursor: pointer;
+    padding: 0;
+    font-size: 10px;
+  }
+  .collapse-header:hover {
+    color: var(--shell-fg);
+    background: var(--shell-accent-muted);
+  }
+  /* Suppress misleading hover feedback during drag-reorganize. */
+  :global(body[data-dragging]) .collapse-header {
+    pointer-events: none;
+  }
+  .collapse-header.horizontal {
+    width: 100%;
+    height: 100%;
+    writing-mode: vertical-rl;
+  }
+  .collapse-header.vertical {
+    width: 100%;
+    height: 100%;
+  }
+  .collapse-header.expanded.horizontal {
+    width: 16px;
+    height: 100%;
+    border-right: 1px solid var(--shell-border);
+  }
+  .collapse-header.expanded.vertical {
+    width: 100%;
+    height: 16px;
+    border-bottom: 1px solid var(--shell-border);
+  }
+
+  .splitter-handle {
+    flex: 0 0 auto;
+    background: var(--shell-border);
+    transition: background-color 120ms ease;
+    touch-action: none;
+  }
+  .splitter-handle:hover,
+  .splitter-handle.dragging {
+    background: var(--shell-accent);
+  }
+  :global(body[data-dragging]) .splitter-handle {
+    pointer-events: none;
+  }
+  .splitter-handle.disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .horizontal > .splitter-handle {
+    width: 4px;
+    cursor: col-resize;
+  }
+  .vertical > .splitter-handle {
+    height: 4px;
+    cursor: row-resize;
+  }
+</style>

package/dist/primitives/ResizableSplitter.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { SizeMode, SplitDirection } from '../layout/types';
+type $$ComponentProps = {
+    direction: SplitDirection;
+    /**
+     * Per-pane sizes, read-only. The splitter computes flex bases
+     * from this array but does not mutate it — writes go out through
+     * `onResize`. Treating sizes as read-only keeps the primitive
+     * decoupled from how the caller stores its layout, and sidesteps
+     * Svelte 5's `ownership_invalid_mutation` warning that fires when
+     * a child component writes into a prop it didn't own.
+     */
+    sizes: number[];
+    pinned?: SizeMode[];
+    /** Per-pane collapsed state. Omitted entries default to false. */
+    collapsed?: boolean[];
+    /** Number of panes — `sizes.length` should match. */
+    count: number;
+    /** Snippet invoked once per pane with the pane index. */
+    pane: Snippet<[number]>;
+    /**
+     * Called whenever the splitter wants to update a pane's size.
+     * The parent is expected to write the value back into whatever
+     * it stores sizes in. A single per-index callback (rather than a
+     * whole-array setter) matches the drag math, which updates at
+     * most two panes per move, and avoids allocating a new array on
+     * every pointermove frame.
+     */
+    onResize?: (index: number, value: number) => void;
+    /** Called when a collapsed pane's header is clicked to toggle. */
+    onCollapseToggle?: (index: number, collapsed: boolean) => void;
+};
+declare const ResizableSplitter: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResizableSplitter = ReturnType<typeof ResizableSplitter>;
+export default ResizableSplitter;

package/dist/primitives/TabbedPanel.svelte

@@ -0,0 +1,305 @@
+<script lang="ts" module>
+  /**
+   * Controller plugged in by a layout-aware parent to turn tab drags
+   * into layout mutations. The primitive itself is layout-agnostic:
+   * it just calls `onPointerDown` when a tab is grabbed, and asks the
+   * controller to hit-test the strip during a drag via `onStripHover`.
+   */
+  export interface TabDragController {
+    onPointerDown(index: number, event: PointerEvent, element: HTMLElement): void;
+    onStripHover(
+      stripRect: DOMRect,
+      pointerX: number,
+      pointerY: number,
+      tabRects: DOMRect[],
+    ): number | null;
+    onStripLeave(): void;
+    readonly isDragging: boolean;
+  }
+
+  /**
+   * Pure helper: given an insert index and the tab button rects,
+   * compute the indicator's position in strip-local coordinates.
+   */
+  export function computeIndicatorRect(
+    insertIndex: number,
+    tabEls: (HTMLButtonElement | undefined)[],
+    stripEl: HTMLDivElement | undefined,
+  ): { left: number; top: number; height: number } | null {
+    if (!stripEl) return null;
+    const stripRect = stripEl.getBoundingClientRect();
+    const els = tabEls.filter((el): el is HTMLButtonElement => !!el);
+    if (els.length === 0) {
+      return { left: 4, top: 2, height: stripRect.height - 4 };
+    }
+    const clamped = Math.max(0, Math.min(insertIndex, els.length));
+    let leftViewport: number;
+    if (clamped === els.length) {
+      const last = els[els.length - 1].getBoundingClientRect();
+      leftViewport = last.right;
+    } else {
+      const at = els[clamped].getBoundingClientRect();
+      leftViewport = at.left;
+    }
+    return {
+      left: leftViewport - stripRect.left - 1,
+      top: 2,
+      height: stripRect.height - 4,
+    };
+  }
+</script>
+
+<script lang="ts">
+  /*
+   * TabbedPanel — a tab strip over a single active body.
+   *
+   * Scope: render a strip of tab labels, click to switch active tab,
+   * render every tab's body (hiding inactive ones via `display: none`).
+   * If a `dragController` is provided, tab pointerdown starts a drag
+   * and the strip becomes a drop zone with an insertion indicator.
+   *
+   * All body snippets are rendered concurrently so every tab's
+   * SlotContainer stays alive while the tab is inactive. The
+   * re-parenting contract relies on this — see slotHostPool.ts.
+   */
+
+  import type { Snippet } from 'svelte';
+
+  let {
+    labels,
+    icons,
+    body,
+    activeTab,
+    onActiveChange,
+    dragController,
+    clickGuard,
+    closable,
+    dirty,
+    onClose,
+  }: {
+    labels: string[];
+    icons?: (string | undefined)[];
+    /** Snippet invoked once per tab with its index. */
+    body: Snippet<[number]>;
+    activeTab: number;
+    /** Called when the user picks a different tab. The parent is
+     *  expected to write the new value back into whatever it is
+     *  storing activeTab in. We use a callback rather than a
+     *  $bindable prop because the parent's activeTab typically lives
+     *  inside a larger $state object (a LayoutNode), and `bind:` on a
+     *  sub-property trips Svelte 5's ownership warning. */
+    onActiveChange?: (index: number) => void;
+    dragController?: TabDragController;
+    /** Optional: called by the tab click handler; if it returns true,
+     *  the click is ignored. Used to swallow the synthetic click that
+     *  fires on the source tab after a drag commit. */
+    clickGuard?: () => boolean;
+    /** Per-tab closability. True if the tab can be closed. */
+    closable?: (boolean | undefined)[];
+    /** Per-tab dirty state. True if the tab has unsaved changes. */
+    dirty?: (boolean | undefined)[];
+    /** Called when the user clicks a tab's close button. */
+    onClose?: (index: number) => void;
+  } = $props();
+
+  function select(i: number) {
+    if (clickGuard?.()) return;
+    onActiveChange?.(i);
+  }
+
+  function handleClose(i: number, e: Event) {
+    e.stopPropagation(); // Don't also trigger tab selection.
+    onClose?.(i);
+  }
+
+  let stripEl: HTMLDivElement | undefined = $state();
+  const tabEls: (HTMLButtonElement | undefined)[] = $state([]);
+  let hoverInsertIndex: number | null = $state(null);
+
+  function onTabPointerDown(i: number, e: PointerEvent) {
+    if (!dragController) return;
+    const el = tabEls[i];
+    if (!el) return;
+    dragController.onPointerDown(i, e, el);
+  }
+
+  function onStripPointerMove(e: PointerEvent) {
+    if (!dragController || !dragController.isDragging || !stripEl) return;
+    const stripRect = stripEl.getBoundingClientRect();
+    const rects = tabEls
+      .filter((el): el is HTMLButtonElement => !!el)
+      .map((el) => el.getBoundingClientRect());
+    hoverInsertIndex = dragController.onStripHover(stripRect, e.clientX, e.clientY, rects);
+  }
+
+  function onStripPointerLeave() {
+    if (!dragController) return;
+    hoverInsertIndex = null;
+    dragController.onStripLeave();
+  }
+</script>
+
+<div class="tabbed-panel">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="tab-strip"
+    role="tablist"
+    tabindex="-1"
+    bind:this={stripEl}
+    onpointermove={onStripPointerMove}
+    onpointerleave={onStripPointerLeave}
+  >
+    {#each labels as label, i (i)}
+      <button
+        type="button"
+        class="tab"
+        class:active={activeTab === i}
+        role="tab"
+        aria-selected={activeTab === i}
+        bind:this={tabEls[i]}
+        onclick={() => select(i)}
+        onpointerdown={(e) => onTabPointerDown(i, e)}
+        onauxclick={(e) => { if (e.button === 1 && closable?.[i]) handleClose(i, e); }}
+      >
+        {#if dirty?.[i]}
+          <span class="tab-dirty" title="Unsaved changes"></span>
+        {/if}
+        {#if icons?.[i]}<span class="tab-icon">{icons[i]}</span>{/if}
+        <span class="tab-label">{label}</span>
+        {#if closable?.[i]}
+          <span
+            class="tab-close"
+            role="button"
+            tabindex="-1"
+            title="Close"
+            onclick={(e) => handleClose(i, e)}
+            onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClose(i, e); }}
+          >&#x2715;</span>
+        {/if}
+      </button>
+    {/each}
+    {#if hoverInsertIndex !== null && dragController?.isDragging}
+      {@const rect = computeIndicatorRect(hoverInsertIndex, tabEls, stripEl)}
+      {#if rect}
+        <div
+          class="drop-indicator"
+          style="left: {rect.left}px; height: {rect.height}px; top: {rect.top}px;"
+        ></div>
+      {/if}
+    {/if}
+  </div>
+
+  <div class="tab-body" role="tabpanel">
+    {#each labels as _label, i (i)}
+      <div class="tab-body-pane" class:active={activeTab === i}>
+        {@render body(i)}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .tabbed-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    background: var(--shell-bg);
+  }
+
+  .tab-strip {
+    position: relative;
+    flex: 0 0 auto;
+    display: flex;
+    gap: 1px;
+    background: var(--shell-bg-sunken);
+    border-bottom: 1px solid var(--shell-border);
+    padding: 0 var(--shell-pad-sm);
+    user-select: none;
+  }
+
+  .tab {
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: var(--shell-fg-muted);
+    font: inherit;
+    font-size: 12px;
+    padding: var(--shell-pad-sm) var(--shell-pad-md);
+    margin-top: 2px;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--shell-pad-sm);
+    cursor: pointer;
+    border-top: 2px solid transparent;
+    border-radius: 2px 2px 0 0;
+    /* While dragging we still need pointerdown on tabs, but we want
+       the browser's native drag image suppressed — PointerEvent path
+       doesn't start an HTML5 drag, but preventing text selection here
+       avoids spurious selection rectangles during a drag. */
+    touch-action: none;
+  }
+  .tab:hover {
+    color: var(--shell-fg);
+    background: var(--shell-bg-elevated);
+  }
+  .tab.active {
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+    border-top-color: var(--shell-accent);
+  }
+  .tab-icon { font-size: 11px; }
+  .tab-label { white-space: nowrap; }
+
+  .tab-dirty {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--shell-accent);
+    flex-shrink: 0;
+  }
+  .tab-close {
+    display: inline-flex;
+    font-size: 10px;
+    line-height: 1;
+    padding: 2px;
+    border-radius: 3px;
+    color: var(--shell-fg-muted);
+    cursor: pointer;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+  .tab-close:hover {
+    color: var(--shell-fg);
+    background: var(--shell-bg-sunken);
+  }
+
+  .drop-indicator {
+    position: absolute;
+    width: 2px;
+    background: var(--shell-accent);
+    box-shadow: 0 0 6px var(--shell-accent);
+    pointer-events: none;
+    border-radius: 1px;
+  }
+
+  .tab-body {
+    flex: 1 1 auto;
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .tab-body-pane {
+    position: absolute;
+    inset: 0;
+    min-width: 0;
+    min-height: 0;
+    display: none;
+  }
+  .tab-body-pane.active {
+    display: block;
+  }
+</style>