@wippy-fe/vue-host 0.0.34 → 0.0.36

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import { LayoutSnapshot, SizeValue, PanelTarget } from '@wippy-fe/proxy';
+import { Ref, ComputedRef, MaybeRefOrGetter } from 'vue';
+
+/**
+ * Vue 3 reactive bindings for `host.layout.*`. Use from any component
+ * inside a Wippy iframe (managed-layout or compat). In compat mode
+ * `snapshot.value` stays `null` and mutations are silent no-ops.
+ *
+ * Boot-time seed comes from `host.layout.snapshot` (sync cache,
+ * populated from `AppContext.layout` in the child's `__WIPPY_INITIAL_CONFIG__`).
+ * Subsequent updates arrive via the `@layout-change` proxy topic —
+ * `events.ts` is the single writer that updates the cache and then
+ * fires the event, so reads here are always fresh.
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { useWippyLayout } from '@wippy-fe/vue-host'
+ *
+ * const layout = useWippyLayout()
+ * // layout.snapshot — Ref<LayoutSnapshot | null>
+ * // layout.activeBreakpoint — ComputedRef<string>
+ * // layout.panels — ComputedRef<Record<string, unknown>>
+ * // layout.isManaged — ComputedRef<boolean>
+ *
+ * layout.resizePanel('files', '400px')
+ * layout.collapsePanel('sidebar')
+ * </script>
+ * ```
+ */
+interface UseWippyLayout {
+    /** Live layout snapshot — null outside a managed-layout host. */
+    snapshot: Ref<LayoutSnapshot | null>;
+    /** Currently-active breakpoint name. Empty string when no snapshot. */
+    activeBreakpoint: ComputedRef<string>;
+    /** Live per-panel declaration map. Includes `route`, `props`, etc. */
+    panels: ComputedRef<Record<string, unknown>>;
+    /** True when a managed-layout host is driving this iframe. */
+    isManaged: ComputedRef<boolean>;
+    resizePanel: (panelId: string, size: SizeValue) => void;
+    collapsePanel: (panelId: string) => void;
+    expandPanel: (panelId: string) => void;
+    movePanel: (panelId: string, target: PanelTarget) => void;
+    removePanel: (panelId: string) => void;
+    closeModal: (modalId: string) => void;
+    removeFloating: (floatingId: string) => void;
+}
+declare function useWippyLayout(): UseWippyLayout;
+/**
+ * Reactive ref to a single panel's live def. Returns `null` when the
+ * panel doesn't exist in the current snapshot (removed or not declared).
+ *
+ * `panelId` accepts a static string, a ref, or a getter — so a consumer
+ * passing `() => props.id` or a `Ref<string>` will see the panel def
+ * change reactively when the id input changes.
+ *
+ * Common use: read `panel.value?.route` inside an editor component to
+ * drive its internal router from the authoritative layout state.
+ */
+declare function useWippyPanel(panelId: MaybeRefOrGetter<string>): ComputedRef<Record<string, unknown> | null>;
+/**
+ * Reactive active-breakpoint ref. Updates off both `@layout-change`
+ * and `@layout-breakpoint`; the latter fires immediately on each
+ * transition (no 50ms debounce), so UI that reacts to breakpoint
+ * transitions is responsive.
+ */
+declare function useWippyBreakpoint(): Ref<string>;
+/**
+ * Reactive ref to the main panel's current route. Derived by walking
+ * the snapshot's active-breakpoint tree to find the slot with
+ * `main: true` and reading `panels[id].route`. Returns empty string
+ * when there's no main panel or no route set.
+ *
+ * Note: the active breakpoint may not have a main panel (e.g. an `sm`
+ * layout that drops the main entirely for a mobile-only view). In that
+ * case this ref returns ''. Bind to `useWippyPanel(<id>).value?.route`
+ * for a specific panel's route across breakpoints.
+ */
+declare function useWippyMainRoute(): ComputedRef<string>;
+
+export { type UseWippyLayout, useWippyBreakpoint, useWippyLayout, useWippyMainRoute, useWippyPanel };

package/dist/index.js

@@ -0,0 +1,93 @@
+// src/useWippyLayout.ts
+import { host, on } from "@wippy-fe/proxy";
+import { computed, shallowRef, toValue } from "vue";
+var sharedSnapshot = null;
+var sharedBreakpoint = null;
+function getSharedSnapshot() {
+  if (sharedSnapshot)
+    return sharedSnapshot;
+  const ref = shallowRef(host.layout.snapshot);
+  on("@layout-change", (next) => {
+    ref.value = next;
+  });
+  sharedSnapshot = ref;
+  return ref;
+}
+function getSharedBreakpoint() {
+  if (sharedBreakpoint)
+    return sharedBreakpoint;
+  const ref = shallowRef(host.layout.snapshot?.activeBreakpoint ?? "");
+  on("@layout-change", (snap) => {
+    if (snap?.activeBreakpoint)
+      ref.value = snap.activeBreakpoint;
+  });
+  on("@layout-breakpoint", ({ name }) => {
+    ref.value = name;
+  });
+  sharedBreakpoint = ref;
+  return ref;
+}
+function useWippyLayout() {
+  const snapshot = getSharedSnapshot();
+  return {
+    snapshot,
+    activeBreakpoint: computed(() => snapshot.value?.activeBreakpoint ?? ""),
+    panels: computed(() => snapshot.value?.panels ?? {}),
+    isManaged: computed(() => snapshot.value !== null),
+    resizePanel: (id, size) => host.layout.resizePanel(id, size),
+    collapsePanel: (id) => host.layout.collapsePanel(id),
+    expandPanel: (id) => host.layout.expandPanel(id),
+    movePanel: (id, t) => host.layout.movePanel(id, t),
+    removePanel: (id) => host.layout.removePanel(id),
+    closeModal: (id) => host.layout.closeModal(id),
+    removeFloating: (id) => host.layout.removeFloating(id)
+  };
+}
+function useWippyPanel(panelId) {
+  const snapshot = getSharedSnapshot();
+  return computed(() => {
+    const id = toValue(panelId);
+    const panels = snapshot.value?.panels;
+    return panels?.[id] ?? null;
+  });
+}
+function useWippyBreakpoint() {
+  return getSharedBreakpoint();
+}
+function useWippyMainRoute() {
+  const snapshot = getSharedSnapshot();
+  return computed(() => {
+    const snap = snapshot.value;
+    if (!snap)
+      return "";
+    const layouts = snap.layouts;
+    const tree = layouts[snap.activeBreakpoint ?? "default"] ?? layouts.default;
+    const mainId = findMainPanel(tree);
+    if (!mainId)
+      return "";
+    const panelDef = snap.panels[mainId];
+    return panelDef?.route ?? "";
+  });
+}
+function findMainPanel(node) {
+  if (!node || typeof node !== "object")
+    return null;
+  const n = node;
+  if (typeof n.panel === "string" && n.main === true)
+    return n.panel;
+  if (Array.isArray(n.children)) {
+    for (const child of n.children) {
+      const found = findMainPanel(child);
+      if (found !== null)
+        return found;
+    }
+  }
+  return null;
+}
+export {
+  useWippyBreakpoint,
+  useWippyLayout,
+  useWippyMainRoute,
+  useWippyPanel
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useWippyLayout.ts"],"sourcesContent":["import type { LayoutSnapshot, PanelTarget, SizeValue } from '@wippy-fe/proxy'\nimport type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'\nimport { host, on } from '@wippy-fe/proxy'\nimport { computed, shallowRef, toValue } from 'vue'\n\n/**\n * Vue 3 reactive bindings for `host.layout.*`. Use from any component\n * inside a Wippy iframe (managed-layout or compat). In compat mode\n * `snapshot.value` stays `null` and mutations are silent no-ops.\n *\n * Boot-time seed comes from `host.layout.snapshot` (sync cache,\n * populated from `AppContext.layout` in the child's `__WIPPY_INITIAL_CONFIG__`).\n * Subsequent updates arrive via the `@layout-change` proxy topic —\n * `events.ts` is the single writer that updates the cache and then\n * fires the event, so reads here are always fresh.\n *\n * ```vue\n * <script setup lang=\"ts\">\n * import { useWippyLayout } from '@wippy-fe/vue-host'\n *\n * const layout = useWippyLayout()\n * // layout.snapshot — Ref<LayoutSnapshot | null>\n * // layout.activeBreakpoint — ComputedRef<string>\n * // layout.panels — ComputedRef<Record<string, unknown>>\n * // layout.isManaged — ComputedRef<boolean>\n *\n * layout.resizePanel('files', '400px')\n * layout.collapsePanel('sidebar')\n * </script>\n * ```\n */\nexport interface UseWippyLayout {\n  /** Live layout snapshot — null outside a managed-layout host. */\n  snapshot: Ref<LayoutSnapshot | null>\n  /** Currently-active breakpoint name. Empty string when no snapshot. */\n  activeBreakpoint: ComputedRef<string>\n  /** Live per-panel declaration map. Includes `route`, `props`, etc. */\n  panels: ComputedRef<Record<string, unknown>>\n  /** True when a managed-layout host is driving this iframe. */\n  isManaged: ComputedRef<boolean>\n\n  resizePanel: (panelId: string, size: SizeValue) => void\n  collapsePanel: (panelId: string) => void\n  expandPanel: (panelId: string) => void\n  movePanel: (panelId: string, target: PanelTarget) => void\n  removePanel: (panelId: string) => void\n  closeModal: (modalId: string) => void\n  removeFloating: (floatingId: string) => void\n}\n\n/**\n * Module-scoped shared snapshot ref + subscription. Every hook in this\n * package reads from the same `ShallowRef`, so a component using\n * `useWippyLayout()` + `useWippyPanel('a')` + `useWippyBreakpoint()`\n * pays for ONE `@layout-change` subscription, not three.\n *\n * The subscription is installed lazily on first call and lives for the\n * iframe's lifetime — no per-component cleanup needed (one closure on\n * a process-wide bus is cheap; in compat-mode hosts this never fires).\n */\nlet sharedSnapshot: ShallowRef<LayoutSnapshot | null> | null = null\nlet sharedBreakpoint: ShallowRef<string> | null = null\n\nfunction getSharedSnapshot(): ShallowRef<LayoutSnapshot | null> {\n  if (sharedSnapshot)\n    return sharedSnapshot\n  const ref = shallowRef<LayoutSnapshot | null>(host.layout.snapshot)\n  on('@layout-change', (next) => {\n    ref.value = next\n  })\n  sharedSnapshot = ref\n  return ref\n}\n\nfunction getSharedBreakpoint(): ShallowRef<string> {\n  if (sharedBreakpoint)\n    return sharedBreakpoint\n  const ref = shallowRef<string>(host.layout.snapshot?.activeBreakpoint ?? '')\n  on('@layout-change', (snap) => {\n    if (snap?.activeBreakpoint)\n      ref.value = snap.activeBreakpoint\n  })\n  on('@layout-breakpoint', ({ name }) => {\n    ref.value = name\n  })\n  sharedBreakpoint = ref\n  return ref\n}\n\nexport function useWippyLayout(): UseWippyLayout {\n  const snapshot = getSharedSnapshot()\n\n  return {\n    snapshot,\n    activeBreakpoint: computed(() => snapshot.value?.activeBreakpoint ?? ''),\n    panels: computed(() => (snapshot.value?.panels ?? {}) as Record<string, unknown>),\n    isManaged: computed(() => snapshot.value !== null),\n    resizePanel: (id, size) => host.layout.resizePanel(id, size),\n    collapsePanel: id => host.layout.collapsePanel(id),\n    expandPanel: id => host.layout.expandPanel(id),\n    movePanel: (id, t) => host.layout.movePanel(id, t),\n    removePanel: id => host.layout.removePanel(id),\n    closeModal: id => host.layout.closeModal(id),\n    removeFloating: id => host.layout.removeFloating(id),\n  }\n}\n\n/**\n * Reactive ref to a single panel's live def. Returns `null` when the\n * panel doesn't exist in the current snapshot (removed or not declared).\n *\n * `panelId` accepts a static string, a ref, or a getter — so a consumer\n * passing `() => props.id` or a `Ref<string>` will see the panel def\n * change reactively when the id input changes.\n *\n * Common use: read `panel.value?.route` inside an editor component to\n * drive its internal router from the authoritative layout state.\n */\nexport function useWippyPanel(\n  panelId: MaybeRefOrGetter<string>,\n): ComputedRef<Record<string, unknown> | null> {\n  const snapshot = getSharedSnapshot()\n  return computed(() => {\n    const id = toValue(panelId)\n    const panels = snapshot.value?.panels as Record<string, unknown> | undefined\n    return (panels?.[id] as Record<string, unknown> | undefined) ?? null\n  })\n}\n\n/**\n * Reactive active-breakpoint ref. Updates off both `@layout-change`\n * and `@layout-breakpoint`; the latter fires immediately on each\n * transition (no 50ms debounce), so UI that reacts to breakpoint\n * transitions is responsive.\n */\nexport function useWippyBreakpoint(): Ref<string> {\n  return getSharedBreakpoint()\n}\n\n/**\n * Reactive ref to the main panel's current route. Derived by walking\n * the snapshot's active-breakpoint tree to find the slot with\n * `main: true` and reading `panels[id].route`. Returns empty string\n * when there's no main panel or no route set.\n *\n * Note: the active breakpoint may not have a main panel (e.g. an `sm`\n * layout that drops the main entirely for a mobile-only view). In that\n * case this ref returns ''. Bind to `useWippyPanel(<id>).value?.route`\n * for a specific panel's route across breakpoints.\n */\nexport function useWippyMainRoute(): ComputedRef<string> {\n  const snapshot = getSharedSnapshot()\n  return computed(() => {\n    const snap = snapshot.value\n    if (!snap)\n      return ''\n    const layouts = snap.layouts as Record<string, unknown>\n    const tree = layouts[snap.activeBreakpoint ?? 'default'] ?? layouts.default\n    const mainId = findMainPanel(tree)\n    if (!mainId)\n      return ''\n    const panelDef = (snap.panels as Record<string, { route?: string }>)[mainId]\n    return panelDef?.route ?? ''\n  })\n}\n\nfunction findMainPanel(node: unknown): string | null {\n  if (!node || typeof node !== 'object')\n    return null\n  const n = node as { panel?: string, main?: boolean, children?: unknown[] }\n  if (typeof n.panel === 'string' && n.main === true)\n    return n.panel\n  if (Array.isArray(n.children)) {\n    for (const child of n.children) {\n      const found = findMainPanel(child)\n      if (found !== null)\n        return found\n    }\n  }\n  return null\n}\n"],"mappings":";AAEA,SAAS,MAAM,UAAU;AACzB,SAAS,UAAU,YAAY,eAAe;AAyD9C,IAAI,iBAA2D;AAC/D,IAAI,mBAA8C;AAElD,SAAS,oBAAuD;AAC9D,MAAI;AACF,WAAO;AACT,QAAM,MAAM,WAAkC,KAAK,OAAO,QAAQ;AAClE,KAAG,kBAAkB,CAAC,SAAS;AAC7B,QAAI,QAAQ;AAAA,EACd,CAAC;AACD,mBAAiB;AACjB,SAAO;AACT;AAEA,SAAS,sBAA0C;AACjD,MAAI;AACF,WAAO;AACT,QAAM,MAAM,WAAmB,KAAK,OAAO,UAAU,oBAAoB,EAAE;AAC3E,KAAG,kBAAkB,CAAC,SAAS;AAC7B,QAAI,MAAM;AACR,UAAI,QAAQ,KAAK;AAAA,EACrB,CAAC;AACD,KAAG,sBAAsB,CAAC,EAAE,KAAK,MAAM;AACrC,QAAI,QAAQ;AAAA,EACd,CAAC;AACD,qBAAmB;AACnB,SAAO;AACT;AAEO,SAAS,iBAAiC;AAC/C,QAAM,WAAW,kBAAkB;AAEnC,SAAO;AAAA,IACL;AAAA,IACA,kBAAkB,SAAS,MAAM,SAAS,OAAO,oBAAoB,EAAE;AAAA,IACvE,QAAQ,SAAS,MAAO,SAAS,OAAO,UAAU,CAAC,CAA6B;AAAA,IAChF,WAAW,SAAS,MAAM,SAAS,UAAU,IAAI;AAAA,IACjD,aAAa,CAAC,IAAI,SAAS,KAAK,OAAO,YAAY,IAAI,IAAI;AAAA,IAC3D,eAAe,QAAM,KAAK,OAAO,cAAc,EAAE;AAAA,IACjD,aAAa,QAAM,KAAK,OAAO,YAAY,EAAE;AAAA,IAC7C,WAAW,CAAC,IAAI,MAAM,KAAK,OAAO,UAAU,IAAI,CAAC;AAAA,IACjD,aAAa,QAAM,KAAK,OAAO,YAAY,EAAE;AAAA,IAC7C,YAAY,QAAM,KAAK,OAAO,WAAW,EAAE;AAAA,IAC3C,gBAAgB,QAAM,KAAK,OAAO,eAAe,EAAE;AAAA,EACrD;AACF;AAaO,SAAS,cACd,SAC6C;AAC7C,QAAM,WAAW,kBAAkB;AACnC,SAAO,SAAS,MAAM;AACpB,UAAM,KAAK,QAAQ,OAAO;AAC1B,UAAM,SAAS,SAAS,OAAO;AAC/B,WAAQ,SAAS,EAAE,KAA6C;AAAA,EAClE,CAAC;AACH;AAQO,SAAS,qBAAkC;AAChD,SAAO,oBAAoB;AAC7B;AAaO,SAAS,oBAAyC;AACvD,QAAM,WAAW,kBAAkB;AACnC,SAAO,SAAS,MAAM;AACpB,UAAM,OAAO,SAAS;AACtB,QAAI,CAAC;AACH,aAAO;AACT,UAAM,UAAU,KAAK;AACrB,UAAM,OAAO,QAAQ,KAAK,oBAAoB,SAAS,KAAK,QAAQ;AACpE,UAAM,SAAS,cAAc,IAAI;AACjC,QAAI,CAAC;AACH,aAAO;AACT,UAAM,WAAY,KAAK,OAA8C,MAAM;AAC3E,WAAO,UAAU,SAAS;AAAA,EAC5B,CAAC;AACH;AAEA,SAAS,cAAc,MAA8B;AACnD,MAAI,CAAC,QAAQ,OAAO,SAAS;AAC3B,WAAO;AACT,QAAM,IAAI;AACV,MAAI,OAAO,EAAE,UAAU,YAAY,EAAE,SAAS;AAC5C,WAAO,EAAE;AACX,MAAI,MAAM,QAAQ,EAAE,QAAQ,GAAG;AAC7B,eAAW,SAAS,EAAE,UAAU;AAC9B,YAAM,QAAQ,cAAc,KAAK;AACjC,UAAI,UAAU;AACZ,eAAO;AAAA,IACX;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/package.json

@@ -1,18 +1,31 @@
 {
   "name": "@wippy-fe/vue-host",
-  "version": "0.0.34",
-  "description": "Vue 3 reactive bindings for the Wippy host.* proxy API. Hooks for layout state, panel live state, breakpoints, and per-panel routes — inside a Wippy iframe.",
+  "version": "0.0.36",
+  "description": "Vue 3 reactive bindings for the Wippy host.* proxy API. Hooks for layout state, panel live state, breakpoints, and per-panel routes - inside a Wippy iframe.",
   "license": "UNLICENSED",
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
-    "src/",
     "package.json",
+    "dist/",
     "README.md"
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@wippy-fe/proxy": "0.0.34"
+    "@wippy-fe/proxy": "^0.0.36"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist"
   }
 }

package/src/index.ts

@@ -1,7 +0,0 @@
-export {
-  useWippyBreakpoint,
-  useWippyLayout,
-  useWippyMainRoute,
-  useWippyPanel,
-} from './useWippyLayout'
-export type { UseWippyLayout } from './useWippyLayout'

package/src/useWippyLayout.test.ts

@@ -1,399 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import type { LayoutSnapshot } from '@wippy-fe/proxy'
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, isRef, ref } from 'vue'
-
-// Mock @wippy-fe/proxy with a controllable host + on(). The shared
-// state in useWippyLayout reads `host.layout.snapshot` ONCE at first
-// hook call (per iframe lifetime — and per Vitest module), so we
-// pre-seed the snapshot, then drive updates by firing registered
-// `@layout-change` listeners.
-
-const mockState = {
-  snapshot: null as LayoutSnapshot | null,
-  listeners: new Map<string, Set<(payload: any) => void>>(),
-  hostLayoutMethods: {
-    resizePanel: vi.fn(),
-    collapsePanel: vi.fn(),
-    expandPanel: vi.fn(),
-    movePanel: vi.fn(),
-    removePanel: vi.fn(),
-    closeModal: vi.fn(),
-    removeFloating: vi.fn(),
-  },
-}
-
-function fire(topic: string, payload: any) {
-  const set = mockState.listeners.get(topic)
-  if (set) {
-    for (const cb of set) cb(payload)
-  }
-}
-
-function listenerCount(topic: string): number {
-  return mockState.listeners.get(topic)?.size ?? 0
-}
-
-vi.mock('@wippy-fe/proxy', () => ({
-  host: {
-    layout: {
-      get snapshot() {
-        return mockState.snapshot
-      },
-      ...mockState.hostLayoutMethods,
-    },
-  },
-  on: (topic: string, cb: (payload: any) => void) => {
-    let set = mockState.listeners.get(topic)
-    if (!set) {
-      set = new Set()
-      mockState.listeners.set(topic, set)
-    }
-    set.add(cb)
-    return () => {
-      set!.delete(cb)
-    }
-  },
-}))
-
-// Import AFTER the mock — the hooks resolve `@wippy-fe/proxy` at module-load.
-const {
-  useWippyLayout,
-  useWippyPanel,
-  useWippyBreakpoint,
-  useWippyMainRoute,
-} = await import('./useWippyLayout')
-
-function makeSnapshot(over: Partial<LayoutSnapshot> = {}): LayoutSnapshot {
-  return {
-    layouts: { default: { direction: 'horizontal', children: [] } },
-    panels: {},
-    activeBreakpoint: 'default',
-    ...over,
-  }
-}
-
-beforeEach(() => {
-  // Reset all mock counters; the shared snapshot ref persists across
-  // tests by design (it's installed once on first hook call).
-  for (const fn of Object.values(mockState.hostLayoutMethods)) fn.mockReset()
-})
-
-afterEach(() => {
-  // Reset mock state for next test
-  mockState.snapshot = null
-})
-
-describe('useWippyLayout', () => {
-  it('seeds snapshot.value from host.layout.snapshot at first call', () => {
-    const initial = makeSnapshot({ activeBreakpoint: 'md' })
-    mockState.snapshot = initial
-
-    let captured: any
-    const Comp = defineComponent({
-      setup() {
-        const layout = useWippyLayout()
-        captured = layout
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    // First call seeds. Snapshot ref tracks shared state from this
-    // point — even if mockState.snapshot changes, the ref doesn't
-    // until @layout-change fires.
-    expect(captured.snapshot.value).toBeDefined()
-    w.unmount()
-  })
-
-  it('updates snapshot when @layout-change fires', () => {
-    let captured: any
-    const Comp = defineComponent({
-      setup() {
-        captured = useWippyLayout()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    const next = makeSnapshot({ activeBreakpoint: 'sm' })
-    fire('@layout-change', next)
-    expect(captured.snapshot.value).toBe(next)
-    expect(captured.activeBreakpoint.value).toBe('sm')
-    w.unmount()
-  })
-
-  it('isManaged tracks whether snapshot is null', () => {
-    let captured: any
-    const Comp = defineComponent({
-      setup() {
-        captured = useWippyLayout()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', null)
-    expect(captured.isManaged.value).toBe(false)
-    fire('@layout-change', makeSnapshot())
-    expect(captured.isManaged.value).toBe(true)
-    w.unmount()
-  })
-
-  it('mutation methods call host.layout.* through', () => {
-    let captured: any
-    const Comp = defineComponent({
-      setup() {
-        captured = useWippyLayout()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    captured.resizePanel('files', '300px')
-    captured.collapsePanel('nav')
-    captured.expandPanel('nav')
-    captured.movePanel('a', { position: 'right' })
-    captured.removePanel('x')
-    captured.closeModal('m')
-    captured.removeFloating('f')
-
-    expect(mockState.hostLayoutMethods.resizePanel).toHaveBeenCalledWith('files', '300px')
-    expect(mockState.hostLayoutMethods.collapsePanel).toHaveBeenCalledWith('nav')
-    expect(mockState.hostLayoutMethods.expandPanel).toHaveBeenCalledWith('nav')
-    expect(mockState.hostLayoutMethods.movePanel).toHaveBeenCalledWith('a', { position: 'right' })
-    expect(mockState.hostLayoutMethods.removePanel).toHaveBeenCalledWith('x')
-    expect(mockState.hostLayoutMethods.closeModal).toHaveBeenCalledWith('m')
-    expect(mockState.hostLayoutMethods.removeFloating).toHaveBeenCalledWith('f')
-    w.unmount()
-  })
-})
-
-describe('useWippyPanel', () => {
-  it('returns panel def from snapshot.panels', () => {
-    let panelRef: any
-    const Comp = defineComponent({
-      setup() {
-        panelRef = useWippyPanel('editor')
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', makeSnapshot({
-      panels: { editor: { kind: 'page', id: 'editor', route: '/foo' } },
-    }))
-    expect(panelRef.value).toMatchObject({ kind: 'page', id: 'editor', route: '/foo' })
-    w.unmount()
-  })
-
-  it('returns null when panel id is not in snapshot', () => {
-    let panelRef: any
-    const Comp = defineComponent({
-      setup() {
-        panelRef = useWippyPanel('ghost')
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', makeSnapshot({ panels: {} }))
-    expect(panelRef.value).toBeNull()
-    w.unmount()
-  })
-
-  it('reacts to a Ref<string> id input', () => {
-    const id = ref('a')
-    let panelRef: any
-    const Comp = defineComponent({
-      setup() {
-        panelRef = useWippyPanel(id)
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', makeSnapshot({
-      panels: {
-        a: { kind: 'page', id: 'a', route: '/aa' },
-        b: { kind: 'page', id: 'b', route: '/bb' },
-      },
-    }))
-    expect(panelRef.value).toMatchObject({ id: 'a' })
-    id.value = 'b'
-    expect(panelRef.value).toMatchObject({ id: 'b' })
-    w.unmount()
-  })
-
-  it('reacts to a getter id input', () => {
-    const id = ref('a')
-    let panelRef: any
-    const Comp = defineComponent({
-      setup() {
-        panelRef = useWippyPanel(() => id.value)
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', makeSnapshot({
-      panels: {
-        a: { kind: 'page', id: 'a' },
-        b: { kind: 'page', id: 'b' },
-      },
-    }))
-    expect(panelRef.value?.id).toBe('a')
-    id.value = 'b'
-    expect(panelRef.value?.id).toBe('b')
-    w.unmount()
-  })
-})
-
-describe('useWippyBreakpoint', () => {
-  it('returns a ref', () => {
-    let bp: any
-    const Comp = defineComponent({
-      setup() {
-        bp = useWippyBreakpoint()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-    expect(isRef(bp)).toBe(true)
-    w.unmount()
-  })
-
-  it('updates from @layout-breakpoint event', () => {
-    let bp: any
-    const Comp = defineComponent({
-      setup() {
-        bp = useWippyBreakpoint()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-    fire('@layout-breakpoint', { name: 'lg', width: 1200 })
-    expect(bp.value).toBe('lg')
-    w.unmount()
-  })
-
-  it('also updates from @layout-change activeBreakpoint', () => {
-    let bp: any
-    const Comp = defineComponent({
-      setup() {
-        bp = useWippyBreakpoint()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-    fire('@layout-change', makeSnapshot({ activeBreakpoint: 'sm' }))
-    expect(bp.value).toBe('sm')
-    w.unmount()
-  })
-})
-
-describe('useWippyMainRoute', () => {
-  it('walks active-breakpoint tree to find main panel', () => {
-    let route: any
-    const Comp = defineComponent({
-      setup() {
-        route = useWippyMainRoute()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-
-    fire('@layout-change', makeSnapshot({
-      activeBreakpoint: 'default',
-      layouts: {
-        default: {
-          direction: 'horizontal',
-          children: [
-            { panel: 'sidebar', size: '200px' },
-            { panel: 'editor', size: '1fr', main: true },
-          ] as any,
-        },
-      },
-      panels: {
-        sidebar: { kind: 'component', tagName: 'x' },
-        editor: { kind: 'page', id: 'e1', route: '/edit' },
-      },
-    }))
-    expect(route.value).toBe('/edit')
-    w.unmount()
-  })
-
-  it('returns empty string when no main panel in active layout', () => {
-    let route: any
-    const Comp = defineComponent({
-      setup() {
-        route = useWippyMainRoute()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-    fire('@layout-change', makeSnapshot({
-      layouts: {
-        default: { direction: 'horizontal', children: [{ panel: 'a', size: '1fr' }] },
-      },
-      panels: { a: { kind: 'page', id: 'a' } },
-    }))
-    expect(route.value).toBe('')
-    w.unmount()
-  })
-
-  it('finds main inside a nested tree', () => {
-    let route: any
-    const Comp = defineComponent({
-      setup() {
-        route = useWippyMainRoute()
-        return () => h('div')
-      },
-    })
-    const w = mount(Comp)
-    fire('@layout-change', makeSnapshot({
-      layouts: {
-        default: {
-          direction: 'horizontal',
-          children: [
-            {
-              direction: 'vertical',
-              children: [{ panel: 'editor', size: '1fr', main: true }],
-            } as any,
-          ],
-        },
-      },
-      panels: { editor: { kind: 'page', id: 'e', route: '/deep' } },
-    }))
-    expect(route.value).toBe('/deep')
-    w.unmount()
-  })
-})
-
-describe('subscription sharing', () => {
-  it('multiple hooks across multiple components share ONE @layout-change listener', () => {
-    const before = listenerCount('@layout-change')
-
-    const Comp = defineComponent({
-      setup() {
-        useWippyLayout()
-        useWippyPanel('a')
-        useWippyMainRoute()
-        return () => h('div')
-      },
-    })
-    const w1 = mount(Comp)
-    const w2 = mount(Comp)
-
-    // Module-scope shared snapshot — same listener regardless of how
-    // many hooks / components consume it.
-    expect(listenerCount('@layout-change') - before).toBeLessThanOrEqual(2)
-    // (At most: snapshot listener + breakpoint listener, both module-scoped.)
-
-    w1.unmount()
-    w2.unmount()
-  })
-})

package/src/useWippyLayout.ts

@@ -1,181 +0,0 @@
-import type { LayoutSnapshot, PanelTarget, SizeValue } from '@wippy-fe/proxy'
-import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
-import { host, on } from '@wippy-fe/proxy'
-import { computed, shallowRef, toValue } from 'vue'
-
-/**
- * Vue 3 reactive bindings for `host.layout.*`. Use from any component
- * inside a Wippy iframe (managed-layout or compat). In compat mode
- * `snapshot.value` stays `null` and mutations are silent no-ops.
- *
- * Boot-time seed comes from `host.layout.snapshot` (sync cache,
- * populated from `AppContext.layout` in the child's `__WIPPY_INITIAL_CONFIG__`).
- * Subsequent updates arrive via the `@layout-change` proxy topic —
- * `events.ts` is the single writer that updates the cache and then
- * fires the event, so reads here are always fresh.
- *
- * ```vue
- * <script setup lang="ts">
- * import { useWippyLayout } from '@wippy-fe/vue-host'
- *
- * const layout = useWippyLayout()
- * // layout.snapshot — Ref<LayoutSnapshot | null>
- * // layout.activeBreakpoint — ComputedRef<string>
- * // layout.panels — ComputedRef<Record<string, unknown>>
- * // layout.isManaged — ComputedRef<boolean>
- *
- * layout.resizePanel('files', '400px')
- * layout.collapsePanel('sidebar')
- * </script>
- * ```
- */
-export interface UseWippyLayout {
-  /** Live layout snapshot — null outside a managed-layout host. */
-  snapshot: Ref<LayoutSnapshot | null>
-  /** Currently-active breakpoint name. Empty string when no snapshot. */
-  activeBreakpoint: ComputedRef<string>
-  /** Live per-panel declaration map. Includes `route`, `props`, etc. */
-  panels: ComputedRef<Record<string, unknown>>
-  /** True when a managed-layout host is driving this iframe. */
-  isManaged: ComputedRef<boolean>
-
-  resizePanel: (panelId: string, size: SizeValue) => void
-  collapsePanel: (panelId: string) => void
-  expandPanel: (panelId: string) => void
-  movePanel: (panelId: string, target: PanelTarget) => void
-  removePanel: (panelId: string) => void
-  closeModal: (modalId: string) => void
-  removeFloating: (floatingId: string) => void
-}
-
-/**
- * Module-scoped shared snapshot ref + subscription. Every hook in this
- * package reads from the same `ShallowRef`, so a component using
- * `useWippyLayout()` + `useWippyPanel('a')` + `useWippyBreakpoint()`
- * pays for ONE `@layout-change` subscription, not three.
- *
- * The subscription is installed lazily on first call and lives for the
- * iframe's lifetime — no per-component cleanup needed (one closure on
- * a process-wide bus is cheap; in compat-mode hosts this never fires).
- */
-let sharedSnapshot: ShallowRef<LayoutSnapshot | null> | null = null
-let sharedBreakpoint: ShallowRef<string> | null = null
-
-function getSharedSnapshot(): ShallowRef<LayoutSnapshot | null> {
-  if (sharedSnapshot)
-    return sharedSnapshot
-  const ref = shallowRef<LayoutSnapshot | null>(host.layout.snapshot)
-  on('@layout-change', (next) => {
-    ref.value = next
-  })
-  sharedSnapshot = ref
-  return ref
-}
-
-function getSharedBreakpoint(): ShallowRef<string> {
-  if (sharedBreakpoint)
-    return sharedBreakpoint
-  const ref = shallowRef<string>(host.layout.snapshot?.activeBreakpoint ?? '')
-  on('@layout-change', (snap) => {
-    if (snap?.activeBreakpoint)
-      ref.value = snap.activeBreakpoint
-  })
-  on('@layout-breakpoint', ({ name }) => {
-    ref.value = name
-  })
-  sharedBreakpoint = ref
-  return ref
-}
-
-export function useWippyLayout(): UseWippyLayout {
-  const snapshot = getSharedSnapshot()
-
-  return {
-    snapshot,
-    activeBreakpoint: computed(() => snapshot.value?.activeBreakpoint ?? ''),
-    panels: computed(() => (snapshot.value?.panels ?? {}) as Record<string, unknown>),
-    isManaged: computed(() => snapshot.value !== null),
-    resizePanel: (id, size) => host.layout.resizePanel(id, size),
-    collapsePanel: id => host.layout.collapsePanel(id),
-    expandPanel: id => host.layout.expandPanel(id),
-    movePanel: (id, t) => host.layout.movePanel(id, t),
-    removePanel: id => host.layout.removePanel(id),
-    closeModal: id => host.layout.closeModal(id),
-    removeFloating: id => host.layout.removeFloating(id),
-  }
-}
-
-/**
- * Reactive ref to a single panel's live def. Returns `null` when the
- * panel doesn't exist in the current snapshot (removed or not declared).
- *
- * `panelId` accepts a static string, a ref, or a getter — so a consumer
- * passing `() => props.id` or a `Ref<string>` will see the panel def
- * change reactively when the id input changes.
- *
- * Common use: read `panel.value?.route` inside an editor component to
- * drive its internal router from the authoritative layout state.
- */
-export function useWippyPanel(
-  panelId: MaybeRefOrGetter<string>,
-): ComputedRef<Record<string, unknown> | null> {
-  const snapshot = getSharedSnapshot()
-  return computed(() => {
-    const id = toValue(panelId)
-    const panels = snapshot.value?.panels as Record<string, unknown> | undefined
-    return (panels?.[id] as Record<string, unknown> | undefined) ?? null
-  })
-}
-
-/**
- * Reactive active-breakpoint ref. Updates off both `@layout-change`
- * and `@layout-breakpoint`; the latter fires immediately on each
- * transition (no 50ms debounce), so UI that reacts to breakpoint
- * transitions is responsive.
- */
-export function useWippyBreakpoint(): Ref<string> {
-  return getSharedBreakpoint()
-}
-
-/**
- * Reactive ref to the main panel's current route. Derived by walking
- * the snapshot's active-breakpoint tree to find the slot with
- * `main: true` and reading `panels[id].route`. Returns empty string
- * when there's no main panel or no route set.
- *
- * Note: the active breakpoint may not have a main panel (e.g. an `sm`
- * layout that drops the main entirely for a mobile-only view). In that
- * case this ref returns ''. Bind to `useWippyPanel(<id>).value?.route`
- * for a specific panel's route across breakpoints.
- */
-export function useWippyMainRoute(): ComputedRef<string> {
-  const snapshot = getSharedSnapshot()
-  return computed(() => {
-    const snap = snapshot.value
-    if (!snap)
-      return ''
-    const layouts = snap.layouts as Record<string, unknown>
-    const tree = layouts[snap.activeBreakpoint ?? 'default'] ?? layouts.default
-    const mainId = findMainPanel(tree)
-    if (!mainId)
-      return ''
-    const panelDef = (snap.panels as Record<string, { route?: string }>)[mainId]
-    return panelDef?.route ?? ''
-  })
-}
-
-function findMainPanel(node: unknown): string | null {
-  if (!node || typeof node !== 'object')
-    return null
-  const n = node as { panel?: string, main?: boolean, children?: unknown[] }
-  if (typeof n.panel === 'string' && n.main === true)
-    return n.panel
-  if (Array.isArray(n.children)) {
-    for (const child of n.children) {
-      const found = findMainPanel(child)
-      if (found !== null)
-        return found
-    }
-  }
-  return null
-}