@wyxos/vibe 5.14.0 → 5.16.0

package/README.md

@@ -684,6 +684,28 @@ active reel. A nested masonry-origin reel therefore closes back to its nested
 feed without also closing the parent sheet or reel. Single-instance Escape
 behavior is unchanged.
 
+## Masonry scroll space and pagination
+
+```ts
+masonry: {
+  bottomSpacePx: 200,
+  loadMoreThresholdPx: 100,
+},
+```
+
+`bottomSpacePx` adds empty scrollable space after the cards (default `0`). It
+extends the real scroll height without changing card layout or the virtualization
+window. A custom footer remains an overlay and does not reserve this space itself.
+
+`loadMoreThresholdPx` triggers automatic masonry pagination when the remaining
+scroll distance is at most this number of CSS pixels (default `240`). The distance
+is measured from the actual bottom, including bottom space and existing padding.
+For 1,000px of content plus 200px of extra space, a 100px threshold triggers when
+the viewport bottom reaches 1,100px. Zero loads only upon reaching the bottom.
+Both values must be finite and non-negative; fractions are allowed. They apply
+per instance to masonry only. Reel pagination retains its existing 240px threshold.
+`infiniteScroll` and load-more locks retain their usual behavior.
+
 ## Custom feed footer
 
 Set `feedFooter.component` to replace the built-in `GalleryFooter`. Consumers

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

@@ -1,3 +1,4 @@
+import type { MediaFailure } from '../core/mediaFailure';
 import type { MasonryFeedProps } from '../core/feed';
 import type { VibeItemId } from '../types';
 declare function loadIfNearBottom(): void;
@@ -11,6 +12,7 @@ declare const __VLS_export: import("vue").DefineComponent<MasonryFeedProps, {
     loadMore: () => any;
     retryEnd: () => any;
     activate: (postId: VibeItemId, input: "keyboard" | "pointer") => any;
+    mediaError: (postId: VibeItemId, failure: MediaFailure) => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
     fullyVisible: (postId: VibeItemId, mediaIndex: number) => any;
     visible: (postId: VibeItemId, mediaIndex: number) => any;
@@ -20,6 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<MasonryFeedProps, {
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
     onActivate?: ((postId: VibeItemId, input: "keyboard" | "pointer") => any) | undefined;
+    onMediaError?: ((postId: VibeItemId, failure: MediaFailure) => any) | undefined;
     onMediaChange?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onFullyVisible?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onVisible?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;

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

@@ -1,3 +1,4 @@
+import type { MediaFailure } from '../core/mediaFailure';
 import { type CSSProperties } from 'vue';
 import { type MediaPreviewState } from '../core/mediaPreview';
 import type { VibeCardRegion, VibeItem, VibeLayout, VibeMediaSource, VibeMediaCardOptions, VibeReelAudioState } from '../types';
@@ -30,6 +31,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     error: (mediaIndex: number) => any;
     ended: (mediaIndex: number) => any;
     activate: (input: "keyboard" | "pointer") => any;
+    mediaError: (failure: MediaFailure) => any;
     mediaChange: (mediaIndex: number) => any;
     reelAudioChange: (state: VibeReelAudioState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -37,6 +39,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onError?: ((mediaIndex: number) => any) | undefined;
     onEnded?: ((mediaIndex: number) => any) | undefined;
     onActivate?: ((input: "keyboard" | "pointer") => any) | undefined;
+    onMediaError?: ((failure: MediaFailure) => any) | undefined;
     onMediaChange?: ((mediaIndex: number) => any) | undefined;
     onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,3 +1,4 @@
+import type { MediaFailure } from '../core/mediaFailure';
 import { type ReelFeedProps } from '../core/feed';
 import type { VibeItemId, VibeReelAudioState } from '../types';
 declare function loadIfNearBottom(): void;
@@ -20,6 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelFeedProps, {
     error: (postId: VibeItemId, mediaIndex: number) => any;
     loadMore: () => any;
     retryEnd: () => any;
+    mediaError: (postId: VibeItemId, failure: MediaFailure) => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
     reelAudioChange: (state: VibeReelAudioState) => any;
     activeChange: (postId: VibeItemId) => any;
@@ -29,6 +31,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelFeedProps, {
     onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
+    onMediaError?: ((postId: VibeItemId, failure: MediaFailure) => any) | undefined;
     onMediaChange?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onActiveChange?: ((postId: VibeItemId) => any) | undefined;

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

@@ -1,3 +1,4 @@
+import type { MediaFailure } from '../core/mediaFailure';
 import type { ReelLayoutProps } from '../core/feed';
 import type { VibeItemId, VibeReelAudioState } from '../types';
 declare function changeActiveMedia(direction: -1 | 1): boolean;
@@ -18,6 +19,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelLayoutProps, {
     error: (postId: VibeItemId, mediaIndex: number) => any;
     loadMore: () => any;
     retryEnd: () => any;
+    mediaError: (postId: VibeItemId, failure: MediaFailure) => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
     reelAudioChange: (state: VibeReelAudioState) => any;
     activeChange: (postId: VibeItemId) => any;
@@ -28,6 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelLayoutProps, {
     onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
+    onMediaError?: ((postId: VibeItemId, failure: MediaFailure) => any) | undefined;
     onMediaChange?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onActiveChange?: ((postId: VibeItemId) => any) | undefined;

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

@@ -1,6 +1,6 @@
 import type { VibeMasonryOptions } from '../core/masonryOptions';
 import { type VibeRuntimeState } from '../core/runtime';
-import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItemId, VibeMediaCardOptions, VibeMediaLifecycleContext, VibeReelInfoSheetOptions, VibeReelAudioState, VibeReelItemTarget, VibeReelNavigationResult } from '../types';
+import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItemId, VibeMediaCardOptions, VibeMediaErrorContext, VibeMediaLifecycleContext, VibeReelInfoSheetOptions, VibeReelAudioState, VibeReelItemTarget, VibeReelNavigationResult } from '../types';
 import type { VibeItemRemovalOptions } from '../core/itemRemovalOptions';
 type __VLS_Props = {
     canRetryEnd: boolean;
@@ -37,6 +37,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     loadMore: () => any;
     retryEnd: () => any;
+    mediaError: (context: VibeMediaErrorContext) => any;
     reelAudioChange: (state: VibeReelAudioState) => any;
     retryForward: () => any;
     activeReelChange: (postId: VibeItemId) => any;
@@ -50,6 +51,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
+    onMediaError?: ((context: VibeMediaErrorContext) => any) | undefined;
     onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onRetryForward?: (() => any) | undefined;
     onActiveReelChange?: ((postId: VibeItemId) => any) | undefined;

package/lib/components/useMediaLifecycle.d.ts

@@ -1,13 +1,16 @@
+import type { MediaFailure } from '../core/mediaFailure';
 import type { MediaPreviewState } from '../core/mediaPreview';
 import type { VibeRuntimeState } from '../core/runtime';
-import type { VibeItemId, VibeMediaLifecycleContext } from '../types';
+import type { VibeItemId, VibeLayout, VibeMediaErrorContext, VibeMediaLifecycleContext } from '../types';
 interface MediaLifecycleEvents {
+    error: (context: VibeMediaErrorContext) => void;
     fullyVisible: (context: VibeMediaLifecycleContext) => void;
     ready: (context: VibeMediaLifecycleContext) => void;
     reelChange: (context: VibeMediaLifecycleContext) => void;
     visible: (context: VibeMediaLifecycleContext) => void;
 }
 export declare function useMediaLifecycle(state: VibeRuntimeState, events: MediaLifecycleEvents): {
+    markMediaError: (postId: VibeItemId, failure: MediaFailure, layout: VibeLayout) => void;
     markMasonryFullyVisible: (postId: VibeItemId, mediaIndex: number) => void;
     markMasonryVisible: (postId: VibeItemId, mediaIndex: number) => void;
     markPreviewError: (postId: VibeItemId, mediaIndex: number) => void;

package/lib/components/useMediaReadiness.d.ts

@@ -2,13 +2,13 @@ import type { MediaPreviewState } from '../core/mediaPreview';
 interface MediaReadinessOptions {
     identity: () => string;
     mediaIndex: () => number;
-    onError: (mediaIndex: number) => void;
+    onError: (mediaIndex: number, confirmedFailure: boolean) => void;
     onReady: (mediaIndex: number) => void;
     previewState: () => MediaPreviewState;
 }
 export declare function useMediaReadiness(options: MediaReadinessOptions): {
     effectivePreviewState: import("vue").ComputedRef<MediaPreviewState>;
-    failSourceAttempt: (event?: Event) => void;
+    failSourceAttempt: (event?: Event, confirmedFailure?: boolean) => void;
     imageElement: import("vue").ShallowRef<HTMLImageElement | null, HTMLImageElement | null>;
     markSourceReady: (event?: Event) => void;
     noteSourceActivity: (event: Event) => void;

package/lib/core/feed.d.ts

@@ -66,4 +66,4 @@ export interface VibeSurfaceExpose {
     transitionActiveReelPost: (postId: VibeItemId) => Promise<boolean>;
 }
 export declare const LOAD_MORE_THRESHOLD = 240;
-export declare function isNearFeedBottom(element: HTMLElement): boolean;
+export declare function isNearFeedBottom(element: HTMLElement, thresholdPx?: number): boolean;

package/lib/core/masonryOptions.d.ts

@@ -4,6 +4,10 @@ export interface VibeMasonryOverscanOptions {
     viewportMultiplier?: number;
 }
 export interface VibeMasonryOptions {
+    /** Extra scrollable space after the cards, in CSS pixels. Defaults to zero. */
+    bottomSpacePx?: number;
+    /** Remaining scroll distance that triggers pagination. Defaults to 240. */
+    loadMoreThresholdPx?: number;
     minColumnWidth?: number;
     overscan?: VibeMasonryOverscanOptions;
 }

package/lib/core/mediaFailure.d.ts

@@ -0,0 +1,6 @@
+import type { VibeMediaLifecycleContext, VibeMediaSource } from '../types';
+export interface VibeMediaErrorContext extends VibeMediaLifecycleContext {
+    source: VibeMediaSource;
+    src: string;
+}
+export type MediaFailure = Pick<VibeMediaErrorContext, 'mediaIndex' | 'source' | 'src'>;