@wippy-fe/vue-host

Vue 3 reactive bindings for the Wippy host.* proxy API. Tree-shakable hooks that wrap host.layout.* in Vue refs + event subscriptions, with auto-cleanup on unmount.

Install

pnpm add @wippy-fe/vue-host

Peer deps: vue >= 3.5, @wippy-fe/proxy (also a peer so your bundler deduplicates with the rest of your Wippy integration).

useWippyLayout()

The main composable. Returns reactive layout state + bound mutation methods.

<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>
</script>

<template>
  <div>
    <p v-if="!layout.isManaged">Not inside a managed-layout host.</p>
    <p v-else>Current breakpoint: {{ layout.activeBreakpoint }}</p>
    <button @click="layout.collapsePanel('nav')">Collapse nav</button>
    <button @click="layout.expandPanel('nav')">Expand nav</button>
  </div>
</template>

Snapshot is seeded from host.layout.snapshot (sync, always available inside a managed-layout host — boot-payload carries the initial value). Subscribes to @layout-change; unsubscribes on unmount.

useWippyPanel(panelId)

Reactive ref to a single panel's live def. Returns null when the panel doesn't exist in the current snapshot.

<script setup lang="ts">
import { useWippyPanel } from '@wippy-fe/vue-host'

const editor = useWippyPanel('editor')
// editor.value?.route — current internal route of the editor panel
// editor.value?.props?.sessionId — for chat-wrapper builtin
</script>

useWippyBreakpoint()

Reactive breakpoint ref. Also updates off the @layout-breakpoint event (which fires immediately — not debounced with the 50ms @layout-change push).

import { useWippyBreakpoint } from '@wippy-fe/vue-host'

const bp = useWippyBreakpoint()
// bp.value === 'md' | 'sm' | 'default' | ...

useWippyMainRoute()

Reactive ref to the main panel's current route — the one that drives window.location.

import { useWippyMainRoute } from '@wippy-fe/vue-host'

const route = useWippyMainRoute()
// route.value === '/projects/42/timeline'

When to use this vs @wippy-fe/layout's composables

• @wippy-fe/layout — useLayoutSlot, useLayoutBreakpoint, useLayoutPanel, useLayoutFloating operate on a LayoutManager instance provided in the current Vue app. Use inside panel components mounted by LayoutManagerView — they have direct access to the local manager.
• @wippy-fe/vue-host — useWippyLayout et al. operate on the host.* proxy surface from a CHILD iframe. The child doesn't have a LayoutManager; it reads the snapshot pushed from the parent.

Rule of thumb: inside a page/artifact/component iframe rendered by a managed-layout host, use @wippy-fe/vue-host. Inside host-layer code (resolvers, built-in panels) with direct LayoutManager access, use @wippy-fe/layout.