sh3-core 0.6.0

package/dist/platform/tauri-backend.js

@@ -0,0 +1,58 @@
+/*
+ * TauriStoreBackend — implements the sh3 Backend interface using
+ * @tauri-apps/plugin-store. Each zone gets its own .json store file
+ * (e.g. "workspace.json", "user.json") in Tauri's app data directory.
+ *
+ * tauri-plugin-store v2 keeps an in-memory cache and flushes to disk
+ * automatically. We pre-load the full store into a local Map during
+ * init(), then serve reads/lists synchronously from that cache —
+ * matching the Backend interface contract. Writes go to both the
+ * local cache and the Tauri store (fire-and-forget async).
+ */
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _TauriStoreBackend_store, _TauriStoreBackend_cache;
+import { LazyStore } from '@tauri-apps/plugin-store';
+export class TauriStoreBackend {
+    constructor(zoneName) {
+        _TauriStoreBackend_store.set(this, void 0);
+        _TauriStoreBackend_cache.set(this, new Map());
+        __classPrivateFieldSet(this, _TauriStoreBackend_store, new LazyStore(`${zoneName}.json`, { defaults: {}, autoSave: true }), "f");
+    }
+    read(shardId) {
+        return __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").get(shardId);
+    }
+    write(shardId, value) {
+        __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").set(shardId, value);
+        // Fire-and-forget — autoSave flushes to disk.
+        __classPrivateFieldGet(this, _TauriStoreBackend_store, "f").set(shardId, value).catch((e) => console.warn('SH3: store write failed', e));
+    }
+    delete(shardId) {
+        __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").delete(shardId);
+        __classPrivateFieldGet(this, _TauriStoreBackend_store, "f").delete(shardId).catch((e) => console.warn('SH3: store delete failed', e));
+    }
+    list() {
+        return [...__classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").keys()];
+    }
+    /**
+     * Load the store from disk into the local cache. Must be called once
+     * before read/list return meaningful data. Called by the platform
+     * resolver at boot.
+     */
+    async init() {
+        const entries = await __classPrivateFieldGet(this, _TauriStoreBackend_store, "f").entries();
+        for (const [key, value] of entries) {
+            __classPrivateFieldGet(this, _TauriStoreBackend_cache, "f").set(key, value);
+        }
+    }
+}
+_TauriStoreBackend_store = new WeakMap(), _TauriStoreBackend_cache = new WeakMap();

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-grad-bg-elevated, 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;