@wyxos/vibe 5.3.1 → 5.4.1

package/README.md

@@ -119,6 +119,24 @@ active again. Set `mediaCard.videoMuted` to explicitly override the initial
 state in either layout. Users can still change mute and volume through the
 timed-media controls.
 
+Masonry virtualization keeps the existing 800px/1.5-viewport overscan by
+default. Consumers can opt into a capped window while retaining every loaded
+item and the same removal, restoration, reel, and pagination behavior:
+
+```ts
+masonry: {
+  overscan: {
+    minimumPx: 600,
+    viewportMultiplier: 0.5,
+    maximumPx: 1_000,
+  },
+},
+```
+
+Low-priority images in that overscan window use native lazy loading, and
+low-priority masonry videos defer metadata until they reach the real viewport.
+Reel preload behavior remains unchanged.
+
 When a feed item has entries in `item.items`, Vibe treats the parent media as
 position one and the nested entries as the remaining positions. Masonry cards
 show looping previous/next controls on hover or keyboard focus. Reel layout

package/lib/components/VibeSurface.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VibeMasonryOptions } from '../core/masonryOptions';
 import { type VibeRuntimeState } from '../core/runtime';
 import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItemId, VibeMediaCardOptions, VibeMediaLifecycleContext, VibeReelInfoSheetOptions, VibeReelItemTarget, VibeReelNavigationResult } from '../types';
 type __VLS_Props = {
@@ -7,6 +8,7 @@ type __VLS_Props = {
     feedFooter?: VibeFeedFooter;
     feedFooterActions: VibeFeedFooterActions;
     mediaCard?: VibeMediaCardOptions;
+    masonry?: VibeMasonryOptions;
     reelInfoSheet?: VibeReelInfoSheetOptions;
     state: VibeRuntimeState;
 };

package/lib/components/useMediaLoading.d.ts

@@ -0,0 +1,14 @@
+import { type ShallowRef } from 'vue';
+import type { VibeLayout } from '../types';
+interface MediaLoadingOptions {
+    fetchPriority: () => 'high' | 'low';
+    layout: () => VibeLayout;
+    mediaSource: () => string;
+    videoElement: ShallowRef<HTMLVideoElement | null>;
+}
+export declare function useMediaLoading(options: MediaLoadingOptions): {
+    imageLoading: import("vue").ComputedRef<"lazy" | "eager">;
+    mediaIsTimed: import("vue").ComputedRef<boolean>;
+    videoPreload: import("vue").ComputedRef<"metadata" | "auto" | "none">;
+};
+export {};

package/lib/core/feed.d.ts

@@ -1,4 +1,5 @@
 import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItem, VibeItemId, VibeMediaSource, VibeMediaCardOptions, VibeReelAutoAdvanceState, VibeReelForwardState, VibeReelInfoSheetOptions, VibeReelItemTarget, VibeReelNavigationResult, VibeReelOrigin, VibeState } from '../types';
+import type { VibeMasonryOptions } from './masonryOptions';
 import type { MediaPreviewState } from './mediaPreview';
 export interface FeedRendererProps {
     canRetryEnd: boolean;
@@ -23,6 +24,7 @@ export interface MasonryFeedProps extends FeedRendererProps {
     entryDelays: ReadonlyMap<VibeItemId, number>;
     leavingPostIds?: ReadonlySet<VibeItemId>;
     removalDelays?: ReadonlyMap<VibeItemId, number>;
+    masonry?: VibeMasonryOptions;
     suspended?: boolean;
 }
 export interface FeedRendererExpose {

package/lib/core/masonryOptions.d.ts

@@ -0,0 +1,12 @@
+export interface VibeMasonryOverscanOptions {
+    maximumPx?: number;
+    minimumPx?: number;
+    viewportMultiplier?: number;
+}
+export interface VibeMasonryOptions {
+    overscan?: VibeMasonryOverscanOptions;
+}
+export declare const DEFAULT_MASONRY_OVERSCAN_MINIMUM_PX = 800;
+export declare const DEFAULT_MASONRY_OVERSCAN_VIEWPORT_MULTIPLIER = 1.5;
+export declare function resolveMasonryOverscan(options: VibeMasonryOptions | undefined, viewportHeight: number): number;
+export declare function validateMasonryOptions(options?: VibeMasonryOptions): void;

package/lib/core/runtime.d.ts

@@ -1,3 +1,4 @@
+import { type ComputedRef } from 'vue';
 import type { VibeAutoScrollState, VibeAutofillState, VibeCursor, VibeFillState, VibeItem, VibeItemId, VibeLayout, VibeReelAutoAdvanceState, VibeReelForwardState, VibeReelInfoSheetState, VibeState } from '../types';
 export interface VibeRuntimeState {
     activeReelPostId: VibeItemId | null;
@@ -25,4 +26,5 @@ export interface VibeRuntimeState {
     reelOrigin: 'masonry' | null;
     total: number | null;
 }
-export declare function snapshotState(state: VibeRuntimeState): VibeState;
+export declare function createItemSnapshot(state: VibeRuntimeState): ComputedRef<readonly VibeItem[]>;
+export declare function snapshotState(state: VibeRuntimeState, items?: readonly VibeItem[]): VibeState;