@celestia-island/hikari 0.55.195 → 0.55.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.195",
+  "version": "0.55.197",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkTabs.scss

@@ -166,6 +166,13 @@
 
 /* === Panel (pill / tablist mode) === */
 
+/* The panel area is ONE HkTransitionContainer (`.hk-tabs-panels`,
+   aliasing `.hk-tc`) keyed on the active tab: HkCrossfade dissolves the
+   outgoing panel in a shared grid cell while the container's inline
+   height transition morphs to the incoming panel's natural size. Both
+   generations carry data-active through the dissolve, so the :not rule
+   below only ever hides a genuinely inactive render, never a
+   dissolving one. */
 .hk-tabs-panel {
   /* No outline suppression: the panel div carries no tabindex and can
      never take focus, so there is nothing to suppress. */

package/src/components/HkTabs.test.ts

@@ -1,10 +1,12 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkTabs from "./HkTabs";
+import { CROSSFADE_WATCHDOG_MS } from "./HkCrossfade";
+import { DEFAULT_ANIMATION_DURATION_MS } from "../composables/useAnimationLoop";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
@@ -515,3 +517,109 @@ describe("HkTabs segmented variant", () => {
     expect(itemRule![1]).not.toMatch(/\bflex:/);
   });
 });
+
+describe("HkTabs panel morph (HkTransitionContainer consumption)", () => {
+  /** Pill mode with panels ON (renderPanels defaults true) and a slot
+   *  per tab — the surface the morph container plugs into. */
+  function mountWithPanels(
+    extra: Record<string, unknown> = {},
+    slots?: Record<string, () => unknown>,
+  ): { container: HTMLElement; active: { value: string } } {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const active = ref("a");
+    const panelSlots = slots ?? {
+      a: () => h("p", { class: "body" }, "panel-alpha"),
+      b: () => h("p", { class: "body" }, "panel-beta"),
+      c: () => h("p", { class: "body" }, "panel-gamma"),
+    };
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            tabs: [
+              { key: "a", label: "Alpha" },
+              { key: "b", label: "Beta" },
+              { key: "c", label: "Gamma" },
+            ],
+            ...extra,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          }, panelSlots);
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return { container, active };
+  }
+
+  function freezeRaf(): void {
+    vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+  }
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the active panel inside the height-morph container and swaps it on tab change", async () => {
+    vi.useFakeTimers();
+    const { container, active } = mountWithPanels();
+    // ONE morph host (`.hk-tabs-panels` aliasing `.hk-tc`) below the
+    // strip, carrying the family height-morph transition contract.
+    const host = container.querySelector<HTMLElement>(".hk-tabs-panels.hk-tc");
+    expect(host).not.toBeNull();
+    expect(host?.style.transitionProperty).toBe("height");
+    expect(host?.style.transitionDuration).toBe(`${DEFAULT_ANIMATION_DURATION_MS}ms`);
+    // It owns exactly ONE panel — the active tab's.
+    const panels = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(panels).toHaveLength(1);
+    expect(panels[0].hasAttribute("data-active")).toBe(true);
+    expect(panels[0].getAttribute("role")).toBe("tabpanel");
+    expect(container.textContent).toContain("panel-alpha");
+
+    active.value = "b";
+    await nextTick();
+    // Past the watchdog budget: the dissolve settled on Beta's panel —
+    // content, crossfade key and single item all moved with the tab.
+    await vi.advanceTimersByTimeAsync(CROSSFADE_WATCHDOG_MS + 100);
+    const settled = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(settled).toHaveLength(1);
+    expect(settled[0].textContent).toContain("panel-beta");
+    const item = container.querySelector<HTMLElement>(".hk-crossfade-item");
+    expect(item?.dataset.crossfadeKey).toBe("b");
+  });
+
+  it("keeps both panel generations data-active mid-dissolve (no display:none pop)", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, active } = mountWithPanels();
+    active.value = "b";
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(100); // inside the dissolve window
+    // Both generations on stage and BOTH marked active: the leaving
+    // panel keeps its last-rendered data-active, so the stylesheet's
+    // `:not([data-active])` hide never fires mid-dissolve — the swap
+    // is HkCrossfade's stacked-grid dissolve, not an instant toggle.
+    const mid = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(mid).toHaveLength(2);
+    expect(mid[0].hasAttribute("data-active")).toBe(true);
+    expect(mid[1].hasAttribute("data-active")).toBe(true);
+    expect(mid[0].textContent).toContain("panel-alpha");
+    expect(mid[1].textContent).toContain("panel-beta");
+  });
+
+  it("drops the panel area entirely while the active option is merged away", () => {
+    const { container } = mountWithPanels(
+      { mergeKeys: ["a"] },
+      { a: () => h("p", "panel-alpha"), merged: () => h("span", "m") },
+    );
+    // Pill-mode merged contract: merged options' panels are not
+    // rendered while merged — no host, no panel.
+    expect(container.querySelector(".hk-tabs-panels")).toBeNull();
+    expect(container.querySelector(".hk-tabs-panel")).toBeNull();
+  });
+});

package/src/components/HkTabs.tsx

@@ -4,6 +4,7 @@ import "./HkTabs.scss";
 import HkScrollContainer from "./HkScrollContainer";
 import HkHoverRevealAction from "./HkHoverRevealAction";
 import HkIconButton from "./HkIconButton";
+import HkTransitionContainer from "./HkTransitionContainer";
 import { iconByName } from "../composables/iconRegistry";
 import { useI18n } from "../i18n/context";
 import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
@@ -88,6 +89,12 @@ interface ScrollerExpose {
  *   the row is then divided into one equal `1fr` grid track per unit,
  *   so merging Light+Dark into the altitude strip swaps TWO one-unit
  *   slots for ONE two-unit cell and nothing else on the strip moves;
+ * - morphing tab panels (pill mode, `renderPanels`): the panel area is
+ *   ONE HkTransitionContainer keyed on the active tab — switching tabs
+ *   dissolves the outgoing panel through HkCrossfade while the
+ *   container height-morphs to the incoming panel's natural size
+ *   (panels never had switch CSS before — inactive ones were simply
+ *   display:none'd, so nothing visual is layered away);
  * - full arrow-key navigation (arrows/Home/End, wrapping, disabled tabs
  *   skipped, selection follows focus) and roving tabindex.
  */
@@ -435,6 +442,13 @@ export default defineComponent({
 
     return () => {
       const mergedHead = mergedRun.value[0];
+      /** The ONE panel on stage: the active tab's, when panels render
+       *  (pill mode only) and the tab is not collapsed into the merged
+       *  cell — merged options' panels are not rendered while merged
+       *  (unchanged contract; the whole container drops out instead). */
+      const panelTab = props.renderPanels && !isSegmented.value
+        ? props.tabs.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
+        : undefined;
       const listChildren = [
         <div
           key="$indicator"
@@ -553,16 +567,20 @@ export default defineComponent({
             </HkScrollContainer>
           ) : list}
 
-          {props.renderPanels && !isSegmented.value && props.tabs.filter((tab) => !isMergedTab(tab)).map((tab) => (
-            <div
-              key={tab.key}
-              role="tabpanel"
-              class="hk-tabs-panel"
-              data-active={(tab.key === props.modelValue) || undefined}
-            >
-              {tab.key === props.modelValue && slots[tab.key]?.()}
-            </div>
-          ))}
+          {/* Panel area (pill mode, renderPanels): ONE morph container
+              keyed on the active tab (2026-10-22 animation direction) —
+              HkCrossfade dissolves the outgoing panel in the shared grid
+              cell while the container's inline-height transition rides the
+              incoming panel's natural size. The strip's own hk-tabs-swap
+              transitions are untouched; a merged-active strip renders no
+              panel at all, exactly as before. */}
+          {panelTab && (
+            <HkTransitionContainer swapKey={panelTab.key} class="hk-tabs-panels">
+              <div role="tabpanel" class="hk-tabs-panel" data-active>
+                {slots[panelTab.key]?.()}
+              </div>
+            </HkTransitionContainer>
+          )}
         </div>
       );
 

package/src/components/HkTransitionContainer.scss

@@ -0,0 +1,13 @@
+// HkTransitionContainer — the state-keyed morph container. The host
+// carries the inline size (transitioned by the component); the stage
+// is the measured content. Overflow hides DURING the morph only (the
+// host is `overflow: clip` while a pinned size is active — applied via
+// the inline width/height, the clip rides along) so shortened content
+// never spills past the animating box.
+.hk-tc {
+  overflow: clip;
+}
+
+.hk-tc-stage {
+  width: 100%;
+}

package/src/components/HkTransitionContainer.test.tsx

@@ -0,0 +1,127 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, ref, type App } from "vue";
+
+import HkTransitionContainer from "./HkTransitionContainer";
+import {
+  DEFAULT_ANIMATION_DURATION_MS,
+  animationLoopArmedCount,
+  onAnimationFrame,
+} from "../composables/useAnimationLoop";
+
+/** Shared-container discipline (HkCrossfade.test precedent): every
+ *  case appends its own container; afterEach tears them all down. */
+const containers: HTMLElement[] = [];
+
+interface Harness {
+  app: App;
+  container: HTMLElement;
+  key: { value: string };
+  swaps: Array<{ key: string | number; previous: string | number; durationMs: number }>;
+}
+
+function mountContainer(initial = "a"): Harness {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const key = ref(initial);
+  const swaps: Harness["swaps"] = [];
+  const Wrapper = defineComponent({
+    setup() {
+      return () => (
+        <HkTransitionContainer
+          swapKey={key.value}
+          onSwap={(e: { key: string | number; previous: string | number; durationMs: number }) => {
+            swaps.push(e);
+          }}
+        >
+          <p>{`panel-${key.value}`}</p>
+        </HkTransitionContainer>
+      );
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  return { app, container, key, swaps };
+}
+
+afterEach(() => {
+  for (const c of containers.splice(0)) c.remove();
+});
+
+describe("HkTransitionContainer", () => {
+  it("renders the slot inside the morph host", () => {
+    const t = mountContainer("a");
+    const host = t.container.querySelector<HTMLElement>(".hk-tc");
+    const stage = t.container.querySelector<HTMLElement>(".hk-tc-stage");
+    expect(host).not.toBeNull();
+    expect(stage).not.toBeNull();
+    expect(t.container.textContent).toContain("panel-a");
+    t.app.unmount();
+  });
+
+  it("defaults to the 300ms family duration on the host transition", () => {
+    const t = mountContainer("a");
+    const host = t.container.querySelector<HTMLElement>(".hk-tc");
+    expect(host?.style.transitionDuration).toBe(`${DEFAULT_ANIMATION_DURATION_MS}ms`);
+    expect(DEFAULT_ANIMATION_DURATION_MS).toBe(300);
+    t.app.unmount();
+  });
+
+  it("axis=width transitions only the width property", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const app = createApp({
+      render: () => (
+        <HkTransitionContainer swapKey="a" axis="width">
+          <p>x</p>
+        </HkTransitionContainer>
+      ),
+    });
+    app.mount(container);
+    const host = container.querySelector<HTMLElement>(".hk-tc");
+    expect(host?.style.transitionProperty).toBe("width");
+    app.unmount();
+  });
+
+  it("survives a swapKey change without ResizeObserver (degraded path, no NaN)", async () => {
+    const t = mountContainer("login");
+    t.key.value = "org";
+    await new Promise((r) => setTimeout(r, DEFAULT_ANIMATION_DURATION_MS + 120));
+    // jsdom has no ResizeObserver and zero offsets: no morph, no crash,
+    // and any pinned inline size is well-formed (never NaNpx).
+    const host = t.container.querySelector<HTMLElement>(".hk-tc");
+    expect(host?.style.width).not.toContain("NaN");
+    expect(host?.style.height).not.toContain("NaN");
+    t.app.unmount();
+  });
+});
+
+describe("useAnimationLoop (shared rAF context)", () => {
+  it("registers and unregisters; the loop idles at zero", () => {
+    const cb = vi.fn();
+    const off = onAnimationFrame(cb);
+    expect(animationLoopArmedCount()).toBe(1);
+    off();
+    expect(animationLoopArmedCount()).toBe(0);
+  });
+
+  it("dedupes the same callback registration", () => {
+    const cb = vi.fn();
+    const off1 = onAnimationFrame(cb);
+    const off2 = onAnimationFrame(cb);
+    expect(animationLoopArmedCount()).toBe(1);
+    off1();
+    expect(animationLoopArmedCount()).toBe(0);
+    off2();
+    expect(animationLoopArmedCount()).toBe(0);
+  });
+
+  it("unregister is idempotent", () => {
+    const cb = vi.fn();
+    const off = onAnimationFrame(cb);
+    off();
+    off();
+    expect(animationLoopArmedCount()).toBe(0);
+  });
+});

package/src/components/HkTransitionContainer.tsx

@@ -0,0 +1,154 @@
+import { defineComponent, nextTick, onBeforeUnmount, ref, watch, type PropType } from "vue";
+
+import { DEFAULT_ANIMATION_DURATION_MS } from "../composables/useAnimationLoop";
+import HkCrossfade from "./HkCrossfade";
+
+import "./HkTransitionContainer.scss";
+
+/**
+ * HkTransitionContainer — the state-keyed morph container.
+ *
+ * HkCrossfade's height-safe dissolve, PLUS the size choreography the
+ * user direction (2026-10-22) asks of every swap surface: when the
+ * bound state key changes, the OLD content fades out, the container's
+ * width/height smoothly animate to the incoming content's natural
+ * size, and the NEW content fades in — one 300ms default, CSS-driven
+ * (transition on inline size), with the animation-loop registration
+ * kept for the choreography CSS cannot express.
+ *
+ * Binding: `swapKey` is the identity of the content on stage — the same
+ * contract HkCrossfade owns (same value ⇒ no swap). Tabs, segmented
+ * controls, editor mode switches, chat-node state labels all reduce to
+ * "a key changed; morph to the new panel".
+ *
+ * Scroll handoff (loose coupling, per the user's spec): the container
+ * never touches any scroller itself. Each swap emits a `swap` event
+ * carrying `{ key, previous, durationMs }`; the HOST forwards that to
+ * its scroll container's PUBLIC interface — the same scrollTo API used
+ * for back-to-top and jump-to-line — so the scrollbar adapts to the
+ * size change and the caret/anchor coordinate glides instead of
+ * teleporting. The scroll container needs zero knowledge of this
+ * component.
+ *
+ * Sizing: a ResizeObserver on the inner stage feeds the container's
+ * inline width/height; the CSS transition on those properties does the
+ * actual morph (off-thread, cancellable, respects the global animation
+ * switch via the duration override to 0s). When the observer is
+ * unavailable (older webview, SSR, jsdom) the container degrades to
+ * plain auto sizing — a dissolve without the morph, never a broken
+ * layout.
+ */
+export default defineComponent({
+  name: "HkTransitionContainer",
+  props: {
+    /** Identity of the content on stage; changing it starts the morph. */
+    swapKey: { type: [String, Number] as PropType<string | number>, required: true },
+    /** Which axes morph. `height` is the default (most swap surfaces);
+     * `width` for horizontal morphs (segmented panels); `both` for
+     * free-floating cards. */
+    axis: {
+      type: String as PropType<"height" | "width" | "both">,
+      default: "height",
+    },
+    /** Morph + dissolve duration, ms. Family default 300. */
+    duration: { type: Number, default: DEFAULT_ANIMATION_DURATION_MS },
+    tag: { type: String, default: "div" },
+  },
+  emits: {
+    /** Fired when a swap settles: the host forwards this to its scroll
+     * container's public scrollTo interface. */
+    swap: (payload: { key: string | number; previous: string | number; durationMs: number }) => true,
+  },
+  setup(props, { slots, emit }) {
+    const hostRef = ref<HTMLElement | null>(null);
+    const stageRef = ref<HTMLElement | null>(null);
+    // Pinned inline size: `{ w, h }` while morphing, `null` = auto.
+    const pinned = ref<{ w: number; h: number } | null>(null);
+
+    let observer: ResizeObserver | null = null;
+    let pendingKey: string | number | null = null;
+    let settleTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function readStage(): { w: number; h: number } {
+      const el = stageRef.value;
+      if (!el) return { w: 0, h: 0 };
+      return { w: el.offsetWidth, h: el.offsetHeight };
+    }
+
+    function applyPinned(): void {
+      const el = hostRef.value;
+      if (!el) return;
+      const p = pinned.value;
+      el.style.width = p && props.axis !== "height" ? `${p.w}px` : "";
+      el.style.height = p && props.axis !== "width" ? `${p.h}px` : "";
+    }
+
+    function observe(): void {
+      if (typeof ResizeObserver === "undefined" || !stageRef.value) return;
+      observer?.disconnect();
+      observer = new ResizeObserver((entries) => {
+        const rect = entries[0]?.contentRect;
+        if (!rect || pendingKey === null) return;
+        // Stage settled at the incoming content's natural size: pin to
+        // it (from the outgoing size) → next frame the CSS transition
+        // morphs the container; after the duration, release to auto.
+        pinned.value = { w: Math.ceil(rect.width), h: Math.ceil(rect.height) };
+        applyPinned();
+        if (settleTimer !== null) clearTimeout(settleTimer);
+        settleTimer = setTimeout(() => {
+          pinned.value = null;
+          applyPinned();
+          const key = pendingKey;
+          pendingKey = null;
+          if (key !== null) {
+            emit("swap", { key, previous: previousKey, durationMs: props.duration });
+          }
+        }, props.duration + 40);
+      });
+      observer.observe(stageRef.value);
+    }
+
+    let previousKey: string | number = props.swapKey;
+
+    watch(() => props.swapKey, (next) => {
+      // Pin the OUTGOING size first so the container never collapses
+      // through zero while the content swaps underneath.
+      pendingKey = next;
+      pinned.value = readStage();
+      applyPinned();
+      void nextTick(() => observe());
+    });
+
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
+      if (settleTimer !== null) clearTimeout(settleTimer);
+    });
+
+    return () => {
+      const Tag = props.tag as "div" | "section" | "main" | "aside";
+      const d = `${props.duration}ms`;
+      return (
+        <Tag
+          ref={hostRef}
+          class="hk-tc"
+          style={{
+            transitionProperty:
+              props.axis === "both" ? "width, height" : props.axis === "width" ? "width" : "height",
+            transitionDuration: d,
+          }}
+        >
+          {/* The stage is HkCrossfade: it owns the opacity dissolve
+            (both generations stacked in one grid cell — no exit blank,
+            no collapse flash) and the swap-stall watchdog; THIS
+            component owns the measured size morph around it. */}
+          <div ref={stageRef} class="hk-tc-stage">
+            <HkCrossfade swapKey={props.swapKey}>
+              {slots.default?.()}
+            </HkCrossfade>
+          </div>
+        </Tag>
+      );
+    };
+  },
+});

package/src/composables/useAnimationLoop.ts

@@ -0,0 +1,95 @@
+/**
+ * useAnimationLoop — the family's ONE shared requestAnimationFrame loop.
+ *
+ * Every JS-driven animation in the library registers a callback here
+ * instead of opening its own rAF chain: the context owns a single loop
+ * that runs ONLY while at least one callback is registered, and each
+ * frame dispatches `(now, deltaMs)` to every callback that was armed at
+ * frame start (a callback that registers/unregisters mid-frame takes
+ * effect next frame — the iteration walks a snapshot). CSS transitions
+ * remain the preferred vehicle (the browser composites them
+ * off-thread); this loop is for the choreography CSS cannot express —
+ * measured size morphs, staged state sequences, scroll handshakes
+ * (user direction 2026-10-22).
+ *
+ * The family-wide default duration for BOTH CSS and loop-driven
+ * animation is 300ms (`DEFAULT_ANIMATION_DURATION_MS`), matching the
+ * design system's `--duration-normal` token — one number, everywhere.
+ */
+
+/** The family-wide animation default: 300ms (== `--duration-normal`). */
+export const DEFAULT_ANIMATION_DURATION_MS = 300;
+
+/** First-frame delta stand-in: one 60Hz frame. */
+const DEFAULT_FRAME_DELTA_MS = 1000 / 60;
+
+/** A per-frame callback: absolute rAF timestamp + ms since last frame. */
+export type AnimationFrameCallback = (nowMs: number, deltaMs: number) => void;
+
+interface LoopState {
+  callbacks: Set<AnimationFrameCallback>;
+  handle: number | null;
+  last: number | null;
+}
+
+// Module-level singleton: one loop per document, however many consumers.
+const state: LoopState = { callbacks: new Set(), handle: null, last: null };
+
+function engine(nowMs: number): void {
+  // Snapshot BEFORE mutating state: mid-frame (un)registrations land
+  // next frame, and a callback never runs twice inside one frame.
+  const armed = Array.from(state.callbacks);
+  const prev = state.last;
+  if (armed.length > 0) {
+    state.handle = requestAnimationFrame(engine);
+    state.last = nowMs;
+  } else {
+    state.handle = null;
+    state.last = null;
+  }
+  const delta = prev === null ? DEFAULT_FRAME_DELTA_MS : Math.max(0, nowMs - prev);
+  for (const cb of armed) cb(nowMs, delta);
+}
+
+/**
+ * Register a per-frame callback. Returns the unregister function; call
+ * it when the animation settles (or the component unmounts). Registering
+ * the SAME function twice is idempotent (Set semantics). The loop is
+ * lazily started by the first registration and stops itself the moment
+ * the last callback unregisters — idle pages pay zero rAF churn.
+ */
+export function onAnimationFrame(cb: AnimationFrameCallback): () => void {
+  state.callbacks.add(cb);
+  if (state.handle === null) {
+    state.last = null;
+    state.handle = requestAnimationFrame(engine);
+  }
+  return () => {
+    state.callbacks.delete(cb);
+    if (state.callbacks.size === 0 && state.handle !== null) {
+      cancelAnimationFrame(state.handle);
+      state.handle = null;
+      state.last = null;
+    }
+  };
+}
+
+/** Test/introspection hook: how many callbacks are armed right now. */
+export function animationLoopArmedCount(): number {
+  return state.callbacks.size;
+}
+
+/**
+ * Component-facing wrapper: one registration bound to one callback
+ * (register on creation, `dispose()` when the owner unmounts). The
+ * callback receives `(nowMs, deltaMs)` every frame while armed.
+ */
+export function useAnimationLoop(cb: AnimationFrameCallback): { dispose: () => void } {
+  let off: (() => void) | null = onAnimationFrame(cb);
+  return {
+    dispose(): void {
+      off?.();
+      off = null;
+    },
+  };
+}

package/src/index.ts

@@ -613,6 +613,7 @@ export { default as HkColorPicker } from "./components/HkColorPicker";
 export { default as HkCopyBadge } from "./components/HkCopyBadge";
 export { default as HkConfirmDialog } from "./components/HkConfirmDialog";
 export { default as HkCrossfade } from "./components/HkCrossfade";
+export { default as HkTransitionContainer } from "./components/HkTransitionContainer";
 export { default as HkDivider } from "./components/HkDivider";
 export { default as HkDiffViewer } from "./components/HkDiffViewer";
 export { parseUnifiedDiff, computeGaps } from "./components/diffParse";