@wippy-fe/webcomponent-core 0.0.25 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/webcomponent-core",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Framework-agnostic base class for Wippy web components — shadow DOM, CSS loading, schema-driven prop parsing, and lifecycle management.",
   "type": "module",
   "main": "src/index.ts",
@@ -11,7 +11,8 @@
   ],
   "peerDependencies": {
     "@iconify/vue": "^5.0.0",
-    "@wippy-fe/proxy": "0.0.25"
+    "@wippy-fe/proxy": "0.0.27",
+    "@wippy-fe/shared": "0.0.27"
   },
   "license": "UNLICENSED"
 }

package/src/base-element.host.test.ts

@@ -0,0 +1,174 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Covers `WippyElement.host` getter — reads `__wippyHost` attached by
+ * the managed-layout shell's content resolvers. And the cleanup path
+ * in `disconnectedCallback` that drops stale wires on detach.
+ */
+import { describe, expect, it } from 'vitest'
+import { WippyElement } from './base-element.ts'
+
+// `ElementInternals.states` shim lives in `vitest.setup.ts` (gen-2-chat
+// repo root) so any test that transitively imports `WippyElement` gets
+// the patch. This file just exercises the resulting behavior.
+
+class TestEl extends WippyElement {
+  static get wippyConfig() {
+    return { propsSchema: { properties: {} }, hostCssKeys: [] }
+  }
+
+  protected onMount(): void {}
+  protected onUnmount(): void {}
+}
+
+const TAG = `wippy-host-test-${Math.random().toString(36).slice(2)}`
+customElements.define(TAG, TestEl)
+
+describe('wippyElement.host getter', () => {
+  it('returns null on a fresh element with no wires', () => {
+    const el = document.createElement(TAG) as TestEl
+    expect(el.host).toBeNull()
+  })
+
+  it('returns the wrapper attached by the resolver as __wippyHost', () => {
+    const el = document.createElement(TAG) as TestEl
+    const fakeWrapper = { layout: { broadcast: () => {} } }
+    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = fakeWrapper
+    expect(el.host).toBe(fakeWrapper)
+  })
+
+  it('connectedCallback can read this.host on first tick', () => {
+    let observedHost: unknown = 'sentinel'
+    class Probe extends WippyElement {
+      static get wippyConfig() {
+        return { propsSchema: { properties: {} }, hostCssKeys: [] }
+      }
+
+      protected onMount(): void {
+        observedHost = this.host
+      }
+
+      protected onUnmount(): void {}
+    }
+    const probeTag = `wippy-probe-${Math.random().toString(36).slice(2)}`
+    customElements.define(probeTag, Probe)
+    const el = document.createElement(probeTag)
+    const fakeWrapper = { layout: {} }
+    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = fakeWrapper
+    document.body.appendChild(el)
+    expect(observedHost).toBe(fakeWrapper)
+    el.remove()
+  })
+})
+
+describe('wippyElement.disconnectedCallback wire cleanup', () => {
+  it('drops __wippyHost and __wippyHostBus on disconnect', () => {
+    const el = document.createElement(TAG) as TestEl
+    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = { layout: {} }
+    ;(el as unknown as { __wippyHostBus: unknown }).__wippyHostBus = {
+      broadcast: () => {},
+      send: () => {},
+      subscribe: () => () => {},
+    }
+    document.body.appendChild(el)
+    el.remove()
+    expect((el as unknown as { __wippyHost?: unknown }).__wippyHost).toBeUndefined()
+    expect((el as unknown as { __wippyHostBus?: unknown }).__wippyHostBus).toBeUndefined()
+  })
+})
+
+describe('wippyElement reconnect — no shadow-child accumulation', () => {
+  // R3 regression: previously `connectedCallback` re-ran the full mount
+  // path (CSS injection + container append) on every reconnect. The
+  // `disconnectedCallback` did NOT clear the persistent shadow root, so
+  // each detach+reattach cycle leaked another `<style>` and another
+  // container `<div>`. On a move-style DOM op (e.g. `appendChild` of an
+  // already-connected element, list reorder) the browser fires
+  // disconnect → connect synchronously, so this leak fires on every
+  // reorder.
+  //
+  // Fix: gate CSS / container / icon setup on a `_initialized` flag and
+  // reuse the stored container on reconnect.
+
+  class CssEl extends WippyElement {
+    static get wippyConfig() {
+      return {
+        propsSchema: { properties: {} },
+        hostCssKeys: [],
+        inlineCss: ':host { display: block; }',
+        containerClasses: ['ct'],
+      }
+    }
+
+    public mountCount = 0
+    public lastIsRemount: boolean | undefined = undefined
+    public lastContainer: HTMLElement | null = null
+
+    protected onMount(
+      _shadow: ShadowRoot,
+      container: HTMLElement,
+      _props: Record<string, unknown>,
+      _errors: string[],
+      _content?: string | null,
+      isRemount?: boolean,
+    ): void {
+      this.mountCount += 1
+      this.lastIsRemount = isRemount
+      this.lastContainer = container
+    }
+
+    protected onUnmount(): void {}
+  }
+  const cssTag = `wippy-reconnect-${Math.random().toString(36).slice(2)}`
+  customElements.define(cssTag, CssEl)
+
+  it('does not duplicate <style> or container <div> across detach/reattach cycles', () => {
+    const el = document.createElement(cssTag) as CssEl
+    document.body.appendChild(el)
+
+    const shadow = el.shadowRoot!
+    const initialChildCount = shadow.childElementCount
+    const initialStyles = shadow.querySelectorAll('style').length
+    const initialContainers = shadow.querySelectorAll('div.ct').length
+    expect(initialContainers).toBe(1)
+    expect(initialStyles).toBeGreaterThan(0)
+    expect(el.mountCount).toBe(1)
+    expect(el.lastIsRemount).toBe(false)
+
+    // Detach + reattach (one cycle) — pre-fix this would add another
+    // <style> and another container <div>.
+    el.remove()
+    document.body.appendChild(el)
+
+    expect(shadow.childElementCount).toBe(initialChildCount)
+    expect(shadow.querySelectorAll('style').length).toBe(initialStyles)
+    expect(shadow.querySelectorAll('div.ct').length).toBe(initialContainers)
+    expect(el.mountCount).toBe(2)
+    expect(el.lastIsRemount).toBe(true)
+
+    // Second detach + reattach cycle — counts still stable.
+    el.remove()
+    document.body.appendChild(el)
+
+    expect(shadow.childElementCount).toBe(initialChildCount)
+    expect(shadow.querySelectorAll('style').length).toBe(initialStyles)
+    expect(shadow.querySelectorAll('div.ct').length).toBe(initialContainers)
+    expect(el.mountCount).toBe(3)
+    expect(el.lastIsRemount).toBe(true)
+
+    el.remove()
+  })
+
+  it('reuses the same container instance on reconnect', () => {
+    const el = document.createElement(cssTag) as CssEl
+    document.body.appendChild(el)
+    const firstContainer = el.lastContainer
+    expect(firstContainer).not.toBeNull()
+
+    el.remove()
+    document.body.appendChild(el)
+
+    expect(el.lastContainer).toBe(firstContainer)
+    el.remove()
+  })
+})

package/src/base-element.ts

@@ -1,8 +1,9 @@
-import { addIcons, define } from '@wippy-fe/proxy'
+import type { WippyElementConfig } from './types.ts'
 import { addCollection } from '@iconify/vue'
-import { loadHostCss, injectInlineCss } from './css-loader.ts'
+import { addIcons, define } from '@wippy-fe/proxy'
+import { injectInlineCss, loadHostCss } from './css-loader.ts'
+import { getWippyHost } from './host-scope.ts'
 import { parseProps } from './prop-parser.ts'
-import type { WippyElementConfig } from './types.ts'
 
 /**
  * Abstract base class for Wippy web components.
@@ -10,7 +11,7 @@ import type { WippyElementConfig } from './types.ts'
  * Generic over `Props` — the parsed prop object type. This types `onMount`,
  * `onPropsChanged`, and `validateProps`. Defaults to `Record<string, unknown>`.
  *
- * Lifecycle order:
+ * Lifecycle order (first connect):
  *   1. shadow DOM attached
  *   2. `onInit(shadow)` — hook for early shadow DOM customization
  *   3. inline CSS injected
@@ -23,12 +24,25 @@ import type { WippyElementConfig } from './types.ts'
  *  10. `onReady()` — post-mount hook
  *  11. `load` event emitted
  *
+ * On reconnect (move-style DOM op: detach → reattach), the shadow root
+ * persists across the cycle, so steps 1, 3, 4, 5 (CSS injection +
+ * container creation) are skipped to avoid duplicating `<style>` and
+ * container `<div>` siblings inside the persistent shadow. The stored
+ * container is reused and `onMount` is re-invoked with `isRemount = true`
+ * so framework adapters can decide between fresh-mount and remount paths.
+ *
  * On error: `onError(error)` → internals state → error → `error` event
- * On disconnect: `onUnmount()` → `unload` event → internals cleared
+ * On disconnect: `onUnmount()` → `unload` event → internals cleared.
+ * Note: `disconnectedCallback` does NOT clear the shadow root or the
+ * stored container — they're reused on reconnect.
  */
 export abstract class WippyElement<Props = Record<string, unknown>> extends HTMLElement {
   private _internals!: ElementInternals
   private _contentObserver: MutationObserver | null = null
+  /** True after the first successful connectedCallback completes. */
+  private _initialized: boolean = false
+  /** Container div created on first connect; reused on subsequent connects. */
+  private _container: HTMLElement | null = null
 
   /**
    * Override to provide the component's configuration.
@@ -58,6 +72,24 @@ export abstract class WippyElement<Props = Record<string, unknown>> extends HTML
     this._internals = this.attachInternals()
   }
 
+  /**
+   * Panel-scoped `host` wrapper attached by the managed-layout shell's
+   * content resolvers (`ComponentResolver` / `WebComponentPackageLoader`).
+   *
+   * Inside a managed-layout panel, this is a wrapper around the universal
+   * `host` API where context-aware calls (`layout.broadcast / send / on`)
+   * are routed through the panel-bound bus — so `sourcePanelId` is
+   * attributed correctly without postMessage indirection. Layout
+   * mutations and other host methods pass through unchanged.
+   *
+   * `null` outside a managed-layout context (compat shell, chat sidebar,
+   * standalone playground). Subclass code that needs a host in those
+   * cases can fall back to `import { host } from '@wippy-fe/proxy'`.
+   */
+  get host(): ReturnType<typeof getWippyHost> {
+    return getWippyHost(this)
+  }
+
   /**
    * Emit a CustomEvent that bubbles and crosses shadow DOM boundaries.
    */
@@ -75,33 +107,46 @@ export abstract class WippyElement<Props = Record<string, unknown>> extends HTML
     this._internals.states.add('loading')
     try {
       const config = (this.constructor as typeof WippyElement).wippyConfig
+      const isRemount = this._initialized
 
       // 1. Shadow DOM (guard against reconnect — attachShadow throws if called twice)
       const shadow = this.shadowRoot ?? this.attachShadow({ mode: config.shadowMode ?? 'open' })
 
-      // 2. Early hook — customize shadow before CSS/container
-      this.onInit(shadow)
+      let container: HTMLElement
+      if (!isRemount) {
+        // 2. Early hook — customize shadow before CSS/container
+        this.onInit(shadow)
 
-      // 3. Inline CSS
-      if (config.inlineCss) {
-        injectInlineCss(shadow, config.inlineCss)
-      }
+        // 3. Inline CSS
+        if (config.inlineCss) {
+          injectInlineCss(shadow, config.inlineCss)
+        }
 
-      // 4. Host CSS (async, non-blocking)
-      if (config.hostCssKeys === undefined || config.hostCssKeys.length > 0) {
-        loadHostCss(shadow, config.hostCssKeys)
-      }
+        // 4. Host CSS (async, non-blocking)
+        if (config.hostCssKeys === undefined || config.hostCssKeys.length > 0) {
+          loadHostCss(shadow, config.hostCssKeys)
+        }
 
-      // 5. Container
-      const container = document.createElement('div')
-      const classes = config.containerClasses ?? []
-      if (classes.length > 0) {
-        container.classList.add(...classes)
-      }
-      shadow.appendChild(container)
+        // 5. Container
+        container = document.createElement('div')
+        const classes = config.containerClasses ?? []
+        if (classes.length > 0) {
+          container.classList.add(...classes)
+        }
+        shadow.appendChild(container)
+        this._container = container
 
-      // 6. Icons
-      addIcons(addCollection)
+        // 6. Icons
+        addIcons(addCollection)
+      }
+      else {
+        // Reconnect path — reuse the existing shadow children + container.
+        // Skip CSS/icon/container setup so we don't accumulate duplicate
+        // `<style>` and container `<div>` siblings on every detach/reattach.
+        // The framework adapter decides whether to remount on the existing
+        // container or recreate its app instance.
+        container = this._container!
+      }
 
       // 7. Parse initial props + custom validation
       const { props, errors } = parseProps(this, config.propsSchema)
@@ -125,19 +170,25 @@ export abstract class WippyElement<Props = Record<string, unknown>> extends HTML
         })
       }
 
-      // 8. Framework mount
-      this.onMount(shadow, container, typedProps, errors, initialContent)
+      // 8. Framework mount (first time) or remount (reconnect)
+      this.onMount(shadow, container, typedProps, errors, initialContent, isRemount)
 
       // 9. Ready
       this._internals.states.delete('loading')
       this._internals.states.add('ready')
 
+      // First-connect bookkeeping after a clean mount.
+      if (!isRemount) {
+        this._initialized = true
+      }
+
       // 10. Post-mount hook
       this.onReady()
 
       // 11. Emit load
       this.emitEvent('load')
-    } catch (error) {
+    }
+    catch (error) {
       this.onError(error)
       this._internals.states.delete('loading')
       this._internals.states.add('error')
@@ -156,10 +207,17 @@ export abstract class WippyElement<Props = Record<string, unknown>> extends HTML
     this.onUnmount()
     this.emitEvent('unload')
     this._internals.states.clear()
+    // Drop panel-context wires so a detached element held by a
+    // consumer (or re-inserted into a different panel) doesn't carry
+    // stale wires that would silently misattribute. The resolver
+    // re-installs them on the next mount.
+    delete (this as unknown as { __wippyHost?: unknown }).__wippyHost
+    delete (this as unknown as { __wippyHostBus?: unknown }).__wippyHostBus
   }
 
   attributeChangedCallback(_name: string, oldVal: string | null, newVal: string | null): void {
-    if (oldVal === newVal) return
+    if (oldVal === newVal)
+      return
     const config = (this.constructor as typeof WippyElement).wippyConfig
     const { props, errors } = parseProps(this, config.propsSchema)
     if (config.validateProps) {
@@ -173,13 +231,23 @@ export abstract class WippyElement<Props = Record<string, unknown>> extends HTML
   /** Called right after shadow DOM is attached, before CSS or container. */
   protected onInit(_shadow: ShadowRoot): void {}
 
-  /** Called once after shadow DOM, CSS, and container are ready. Mount your framework here. */
+  /**
+   * Called after shadow DOM, CSS, and container are ready. Mount your
+   * framework here.
+   *
+   * Invoked on first connect AND on every subsequent reconnect (move-style
+   * DOM op: detach → reattach). On reconnect the same `container` instance
+   * is reused. Adapters that hold a framework app handle should either
+   * detect `isRemount === true` and re-mount on the existing container, or
+   * leave the previous app intact across the detach/reattach cycle.
+   */
   protected abstract onMount(
     shadow: ShadowRoot,
     container: HTMLElement,
     initialProps: Props,
     initialErrors: string[],
     initialContent?: string | null,
+    isRemount?: boolean,
   ): void
 
   /** Called after internals state is set to ready, before the `load` event. */

package/src/host-bus.ts

@@ -0,0 +1,44 @@
+/**
+ * Layout bus types shared between `@wippy-fe/webcomponent-core` and
+ * `@wippy-fe/webcomponent-vue`. Mirror of the host-side
+ * `LayoutBusBound` / `BroadcastEnvelope` shapes; structurally
+ * compatible so a host-mounted web component can read its
+ * `__wippyHostBus` property without importing host-private types.
+ *
+ * The host (gen-2-chat managed-layout shell) sets:
+ *   - `el.dataset.wippyPanelId` (string)
+ *   - `(el as { __wippyHostBus?: LayoutBusBound }).__wippyHostBus`
+ * BEFORE the element is appended to the DOM. Web components see them
+ * on first `connectedCallback` tick.
+ *
+ * Outside a managed-layout host, both are absent — read code MUST
+ * tolerate `undefined`.
+ *
+ * The interface bodies live in `@wippy-fe/shared` so the host can
+ * import them without dragging in this package's `@wippy-fe/proxy`
+ * runtime dependency. Consumers continue to import from
+ * `@wippy-fe/webcomponent-core` (this re-export) for backward compat.
+ */
+
+import type { LayoutBusBound } from '@wippy-fe/shared'
+
+export type { BroadcastEnvelope, LayoutBusBound } from '@wippy-fe/shared'
+
+/**
+ * Read the host bus attached to an element by `ComponentResolver` in
+ * the managed-layout host. Returns `null` outside a managed-layout
+ * host (or before the element is connected). Stable across element
+ * remounts of the same panel — the resolver re-attaches a fresh bus
+ * each time.
+ */
+export function getWippyHostBus(el: HTMLElement): LayoutBusBound | null {
+  return (el as { __wippyHostBus?: LayoutBusBound }).__wippyHostBus ?? null
+}
+
+/**
+ * Read the panelId attribute set by `ComponentResolver`. `null`
+ * outside a managed-layout host.
+ */
+export function getWippyPanelId(el: HTMLElement): string | null {
+  return el.dataset.wippyPanelId ?? null
+}

package/src/host-scope.test.ts

@@ -0,0 +1,19 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from 'vitest'
+import { getWippyHost } from './host-scope.ts'
+
+describe('getWippyHost', () => {
+  it('returns the wrapper attached as __wippyHost', () => {
+    const el = document.createElement('div')
+    const fake = { layout: { broadcast: () => {} } }
+    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = fake
+    expect(getWippyHost(el)).toBe(fake)
+  })
+
+  it('returns null when no wrapper attached', () => {
+    const el = document.createElement('div')
+    expect(getWippyHost(el)).toBeNull()
+  })
+})

package/src/host-scope.ts

@@ -0,0 +1,28 @@
+/**
+ * Element-attached host wrapper reader for web components mounted as
+ * `kind: 'component'` panels in the gen-2-chat managed-layout shell.
+ *
+ * The host stamps a panel-scoped wrapper as `__wippyHost` on each
+ * element BEFORE it is appended to the DOM (see the host's
+ * `panel-context-wires.ts` and `host-scope.ts`). Consumer web
+ * components read it back via `getWippyHost(this)` in
+ * `connectedCallback` and onwards.
+ *
+ * The wrapper is **constructed by the host** — this package only
+ * exposes the reader. Outside a managed-layout host (raw mounts,
+ * compat shells, tests without the connector) the property is absent
+ * and `getWippyHost` returns `null`.
+ */
+
+/**
+ * Read the panel-scoped host wrapper attached to an element by the
+ * managed-layout shell's content resolvers. Returns `null` outside a
+ * managed-layout host (or before the element is connected).
+ *
+ * Subclass authors of `WippyElement` / `WippyVueElement` access this
+ * via `this.host` / `useHost()` and rarely need to call this directly.
+ * The helper is exposed for raw `HTMLElement` consumers.
+ */
+export function getWippyHost<H = unknown>(el: HTMLElement): H | null {
+  return ((el as unknown) as { __wippyHost?: H }).__wippyHost ?? null
+}

package/src/index.ts

@@ -1,10 +1,13 @@
-export { WippyElement, define } from './base-element.ts'
-export { loadHostCss, injectInlineCss } from './css-loader.ts'
-export { parseProps, attrToCamel } from './prop-parser.ts'
+export { define, WippyElement } from './base-element.ts'
+export { injectInlineCss, loadHostCss } from './css-loader.ts'
+export { getWippyHostBus, getWippyPanelId } from './host-bus.ts'
+export type { BroadcastEnvelope, LayoutBusBound } from './host-bus.ts'
+export { getWippyHost } from './host-scope.ts'
+export { attrToCamel, parseProps } from './prop-parser.ts'
+export type { ParseResult } from './prop-parser.ts'
 export type {
+  HostCssKey,
   WippyElementConfig,
-  WippyPropsSchema,
   WippyPropDefinition,
-  HostCssKey,
+  WippyPropsSchema,
 } from './types.ts'
-export type { ParseResult } from './prop-parser.ts'

package/src/prop-parser.ts

@@ -1,4 +1,4 @@
-import type { WippyPropsSchema, WippyPropDefinition } from './types.ts'
+import type { WippyPropDefinition, WippyPropsSchema } from './types.ts'
 
 export interface ParseResult {
   props: Record<string, unknown>
@@ -16,20 +16,22 @@ export function attrToCamel(attr: string): string {
 /**
  * Parses a single attribute value according to its schema definition.
  */
-function parseValue(attr: string, raw: string, def: WippyPropDefinition): { value: unknown; error?: string } {
+function parseValue(attr: string, raw: string, def: WippyPropDefinition): { value: unknown, error?: string } {
   switch (def.type) {
     case 'string':
       return { value: raw }
 
     case 'number': {
-      const n = parseFloat(raw)
-      if (isNaN(n)) return { value: undefined, error: `Invalid ${attr}: expected a number` }
+      const n = Number.parseFloat(raw)
+      if (Number.isNaN(n))
+        return { value: undefined, error: `Invalid ${attr}: expected a number` }
       return { value: n }
     }
 
     case 'integer': {
-      const n = parseInt(raw, 10)
-      if (isNaN(n)) return { value: undefined, error: `Invalid ${attr}: expected an integer` }
+      const n = Number.parseInt(raw, 10)
+      if (Number.isNaN(n))
+        return { value: undefined, error: `Invalid ${attr}: expected an integer` }
       return { value: n }
     }
 
@@ -45,7 +47,8 @@ function parseValue(attr: string, raw: string, def: WippyPropDefinition): { valu
           return { value: undefined, error: `Invalid ${attr}: expected a JSON array` }
         }
         return { value: parsed }
-      } catch {
+      }
+      catch {
         return { value: undefined, error: `Invalid ${attr}: must be valid JSON` }
       }
     }
@@ -78,7 +81,8 @@ export function parseProps(element: HTMLElement, schema: WippyPropsSchema): Pars
     const result = parseValue(attr, raw, def)
     if (result.error) {
       errors.push(result.error)
-    } else {
+    }
+    else {
       props[camel] = result.value
     }
   }