sh3-core 0.6.0

package/dist/host-entry.d.ts

@@ -0,0 +1,13 @@
+export { registerShard, registerApp, bootstrap, __setBackend, setLocalOwner } from './host';
+export type { BootstrapConfig } from './host';
+export { __setTenantId, __setDocumentBackend } from './host';
+export type { Backend } from './state/types';
+export type { DocumentBackend } from './documents/types';
+export { HttpDocumentBackend } from './documents/http-backend';
+export { __setEnvServerUrl } from './env/index';
+export { installPackage, uninstallPackage, listInstalledPackages, loadInstalledPackages, } from './registry/index';
+export type { InstalledPackage, InstallResult, PackageMeta } from './registry/types';
+export { initFromBoot, login, logout, register, setLocalOwner as setLocalOwnerAuth } from './auth/index';
+export type { AuthUser, AuthSession, BootConfig, GlobalSettings } from './auth/types';
+export { createShell } from './createShell';
+export type { ShellConfig } from './createShell';

package/dist/host-entry.js

@@ -0,0 +1,17 @@
+/*
+ * Host-process entry for the `sh3-core` package.
+ *
+ * This file is what `import ... from 'sh3-core/host'` resolves to. Only code that
+ * boots an SH3 shell (a main.ts that mounts Shell and registers shards/apps)
+ * should touch this path. Shards and apps must not import from here.
+ */
+export { registerShard, registerApp, bootstrap, __setBackend, setLocalOwner } from './host';
+export { __setTenantId, __setDocumentBackend } from './host';
+export { HttpDocumentBackend } from './documents/http-backend';
+export { __setEnvServerUrl } from './env/index';
+// Install API (host-only).
+export { installPackage, uninstallPackage, listInstalledPackages, loadInstalledPackages, } from './registry/index';
+// Auth (host-only — session lifecycle, boot initialization).
+export { initFromBoot, login, logout, register, setLocalOwner as setLocalOwnerAuth } from './auth/index';
+// Shell boot factory.
+export { createShell } from './createShell';

package/dist/host.d.ts

@@ -0,0 +1,15 @@
+import { registerShard as registerShardInternal } from './shards/activate.svelte';
+import { registerApp } from './apps/registry.svelte';
+import { __setBackend } from './state/zones.svelte';
+import { setLocalOwner } from './auth/index';
+export { __setBackend };
+export { setLocalOwner };
+export { __setTenantId, __setDocumentBackend } from './documents/config';
+export declare function registerShard(shard: Parameters<typeof registerShardInternal>[0]): void;
+export { registerApp };
+export interface BootstrapConfig {
+    /** Framework shard IDs to skip registration for */
+    excludeShards?: string[];
+}
+export declare function bootstrap(config?: BootstrapConfig): Promise<void>;
+export { installPackage, listInstalledPackages } from './registry/installer';

package/dist/host.js

@@ -0,0 +1,86 @@
+/*
+ * Host surface — functions `main.ts` (and only main.ts) calls.
+ *
+ * Registration APIs (`registerShard`, `registerApp`) are data-only and
+ * safe to call at any time; a future runtime loader uses them identically
+ * to hot-install registration at runtime.
+ *
+ * `bootstrap()` runs the post-registration boot sequence: it registers
+ * framework-owned shards and apps (filtering any the host excludes via
+ * BootstrapConfig), walks the registered-shards map and activates every
+ * self-starting shard, then reads the last-app user-zone entry and
+ * either launches that app or leaves the shell on home.
+ *
+ * This file is intentionally NOT re-exported through `api.ts`. The
+ * import-hygiene rule is: shards and apps import from `api.ts`, the host
+ * imports from `host.ts`.
+ */
+import { registerShard as registerShardInternal, activateShard, registeredShards, } from './shards/activate.svelte';
+import { registerApp, registeredApps } from './apps/registry.svelte';
+import { launchApp, readLastApp } from './apps/lifecycle';
+import { sh3coreShard } from './sh3core-shard/sh3coreShard.svelte';
+import { shellShard } from './shell-shard/shellShard.svelte';
+import { storeShard } from './app/store/storeShard.svelte';
+import { __setBackend, backends } from './state/zones.svelte';
+import { loadInstalledPackages } from './registry/installer';
+import { setLocalOwner } from './auth/index';
+import { storeApp } from './app/store/storeApp';
+import { adminShard } from './app/admin/adminShard.svelte';
+import { adminApp } from './app/admin/adminApp';
+import { terminalApp } from './apps/terminal/terminal-app';
+import { runShellRenameMigration, } from './migrations/shell-rename';
+export { __setBackend };
+export { setLocalOwner };
+export { __setTenantId, __setDocumentBackend } from './documents/config';
+export function registerShard(shard) {
+    registerShardInternal(shard);
+}
+export { registerApp };
+/**
+ * Adapter from the workspace-zone backend to the minimal KV shape the
+ * `__shell__` → `__sh3core__` migration needs. Kept local to host.ts so
+ * the migration module stays backend-agnostic.
+ */
+function createWorkspaceZoneAdapter() {
+    const backend = backends.workspace;
+    return {
+        keys: () => backend.list(),
+        read: (key) => backend.read(key),
+        write: (key, value) => backend.write(key, value),
+        delete: (key) => backend.delete(key),
+    };
+}
+export async function bootstrap(config) {
+    // Run before anything touches the workspace zone so renamed keys are
+    // already in place when shards activate.
+    if (typeof globalThis.localStorage !== 'undefined') {
+        runShellRenameMigration(createWorkspaceZoneAdapter(), globalThis.localStorage);
+    }
+    const exShards = new Set(config === null || config === void 0 ? void 0 : config.excludeShards);
+    // 1. Framework-owned shards
+    const frameworkShards = [sh3coreShard, shellShard, storeShard, adminShard];
+    for (const shard of frameworkShards) {
+        if (!exShards.has(shard.manifest.id)) {
+            registerShardInternal(shard);
+        }
+    }
+    // 2. Framework-shipped apps
+    const frameworkApps = [storeApp, adminApp, terminalApp];
+    for (const app of frameworkApps) {
+        registerApp(app);
+    }
+    // 3. Load any packages installed in a previous session from IndexedDB
+    await loadInstalledPackages();
+    // 4. Activate every self-starting shard
+    for (const [id, shard] of registeredShards) {
+        if (shard.autostart) {
+            await activateShard(id);
+        }
+    }
+    // 5. Read the last-active app from the user zone
+    const lastId = readLastApp();
+    if (lastId && registeredApps.has(lastId)) {
+        await launchApp(lastId);
+    }
+}
+export { installPackage, listInstalledPackages } from './registry/installer';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './api';
+export { default as Shell } from './Shell.svelte';
+export type { ArtifactManifest } from './artifact';
+export * from './shell-shard/protocol';

package/dist/index.js

@@ -0,0 +1,14 @@
+/*
+ * Main public entry for the `sh3-core` package.
+ *
+ * This file is what `import ... from 'sh3-core'` resolves to. It re-exports the
+ * phase 8 public surface (api.ts) plus the Shell host component. Shard and
+ * app authors import from here.
+ *
+ * Host-process functions (registerShard, registerApp, bootstrap) are
+ * deliberately NOT exported here — they live at `sh3-core/host` because shards
+ * and apps must not register each other. See host-entry.ts.
+ */
+export * from './api';
+export { default as Shell } from './Shell.svelte';
+export * from './shell-shard/protocol';

package/dist/layout/DragPreview.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  /*
+   * DragPreview — the ghost tab rendered on overlay layer 2 during a
+   * drag-reorganize gesture.
+   *
+   * The composition root mounts this component once into the drag-
+   * preview layer root. It reads `dragState` and renders itself only
+   * while `phase === 'dragging'`. Position tracks `dragState.pointerX`
+   * / `pointerY` minus the drag source's initial grab offset, so the
+   * ghost appears "held" at the same point on the tab where the user
+   * started dragging.
+   *
+   * Pointer events are disabled on the ghost itself — it must not
+   * intercept elementsFromPoint checks used by drop zones.
+   */
+
+  import { dragState } from './drag.svelte';
+
+  const visible = $derived(dragState.phase === 'dragging' && !!dragState.source);
+  const left = $derived(
+    dragState.source ? dragState.pointerX - dragState.source.offsetX : 0,
+  );
+  const top = $derived(
+    dragState.source ? dragState.pointerY - dragState.source.offsetY : 0,
+  );
+  const width = $derived(dragState.source?.startRect.width ?? 0);
+  const height = $derived(dragState.source?.startRect.height ?? 0);
+  const label = $derived(dragState.source?.entry.label ?? '');
+  const icon = $derived(dragState.source?.entry.icon);
+</script>
+
+{#if visible}
+  <div
+    class="drag-preview"
+    style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"
+  >
+    {#if icon}<span class="drag-preview-icon">{icon}</span>{/if}
+    <span class="drag-preview-label">{label}</span>
+  </div>
+{/if}
+
+<style>
+  .drag-preview {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--shell-pad-sm);
+    padding: var(--shell-pad-sm) var(--shell-pad-md);
+    background: var(--shell-grad-bg-elevated, var(--shell-bg-elevated));
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-accent);
+    border-radius: var(--shell-radius-sm);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    font-size: 12px;
+    font-family: var(--shell-font-ui);
+    pointer-events: none;
+    opacity: 0.9;
+    /* The layer root inherits its z-index from --shell-z-layer-2 via
+       Shell.svelte; we don't set z-index here. */
+  }
+  .drag-preview-icon { font-size: 11px; }
+  .drag-preview-label { white-space: nowrap; }
+</style>

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

@@ -0,0 +1,3 @@
+declare const DragPreview: import("svelte").Component<Record<string, never>, {}, "">;
+type DragPreview = ReturnType<typeof DragPreview>;
+export default DragPreview;

package/dist/layout/LayoutRenderer.svelte

@@ -0,0 +1,262 @@
+<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]}
+        {#if entry}
+          <div class="tab-slot-wrapper">
+            <SlotContainer node={{ type: 'slot', slotId: entry.slotId, viewId: entry.viewId }} label={entry.label} />
+            <SlotDropZone path={path} />
+          </div>
+        {/if}
+      {/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;