@wyxos/vibe 3.0.5 → 3.0.7

package/README.md

@@ -305,6 +305,12 @@ const vibe = ref<VibeHandle | null>(null)
 
 Available methods:
 
+- `lockPageLoading()`
+- `unlockPageLoading()`
+- `loadNext()`
+- `loadPrevious()`
+- `retry()`
+- `cancel()`
 - `remove(ids)`
 - `restore(ids)`
 - `undo()`
@@ -327,6 +333,7 @@ type VibeStatus = {
   loadState: 'failed' | 'loaded' | 'loading'
   mode: 'dynamic' | 'static'
   nextCursor: string | null
+  pageLoadingLocked: boolean
   phase: 'failed' | 'filling' | 'idle' | 'initializing' | 'loading' | 'refreshing'
   previousCursor: string | null
   removedCount: number
@@ -338,9 +345,12 @@ type VibeStatus = {
 Example:
 
 ```ts
+vibe.value?.lockPageLoading()
 vibe.value?.remove(['item-2', 'item-5'])
 vibe.value?.undo()
+vibe.value?.unlockPageLoading()
 console.log(vibe.value?.status.itemCount)
+console.log(vibe.value?.status.pageLoadingLocked)
 console.log(vibe.value?.status.removedIds)
 ```
 

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

@@ -1,12 +1,13 @@
 import type { Component } from 'vue';
 import type { VibeViewerItem } from './viewer';
 import type { VibeAssetErrorReporter, VibeAssetLoadReporter } from './viewer-core/assetErrors';
-import type { VibeFullscreenStatusSlotProps, VibeSurfaceSlotProps } from './viewer-core/surfaceSlots';
+import type { VibeEmptyStateMode, VibeEmptyStateSlotProps, VibeFullscreenStatusSlotProps, VibeSurfaceSlotProps } from './viewer-core/surfaceSlots';
 import type { VibeLoadPhase } from './viewer-core/useViewer';
 import './viewer-core/fullscreenMediaBar.css';
 interface FullscreenSurfaceProps {
     active?: boolean;
     activeIndex?: number;
+    emptyStateMode?: VibeEmptyStateMode;
     errorMessage?: string | null;
     hasNextPage?: boolean;
     items: VibeViewerItem[];
@@ -20,6 +21,7 @@ interface FullscreenSurfaceProps {
     showStatusBadges?: boolean;
 }
 type __VLS_Slots = {
+    'empty-state'?: (props: VibeEmptyStateSlotProps) => unknown;
     'fullscreen-aside'?: (props: VibeSurfaceSlotProps) => unknown;
     'fullscreen-header-actions'?: (props: VibeSurfaceSlotProps) => unknown;
     'fullscreen-overlay'?: (props: VibeSurfaceSlotProps) => unknown;
@@ -37,6 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<FullscreenSurfaceProps,
     "onBack-to-list"?: (() => any) | undefined;
 }>, {
     loading: boolean;
+    emptyStateMode: VibeEmptyStateMode;
     paginationDetail: string | null;
     showEndBadge: boolean;
     showStatusBadges: boolean;

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

@@ -1,9 +1,10 @@
 import { type Component } from 'vue';
 import type { VibeViewerItem } from './viewer';
 import { type VibeAssetErrorEvent, type VibeAssetLoadEvent } from './viewer-core/assetErrors';
-import type { VibeFullscreenStatusSlotProps, VibeGridStatusSlotProps, VibeSurfaceSlotProps } from './viewer-core/surfaceSlots';
+import type { VibeEmptyStateSlotProps, VibeFullscreenStatusSlotProps, VibeGridStatusSlotProps, VibeSurfaceSlotProps } from './viewer-core/surfaceSlots';
 import type { VibeHandle, VibeProps } from './viewer-core/useViewer';
 type __VLS_Slots = {
+    'empty-state'?: (props: VibeEmptyStateSlotProps) => unknown;
     'fullscreen-aside'?: (props: VibeSurfaceSlotProps) => unknown;
     'fullscreen-header-actions'?: (props: VibeSurfaceSlotProps) => unknown;
     'fullscreen-overlay'?: (props: VibeSurfaceSlotProps) => unknown;

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

@@ -1,13 +1,14 @@
 import type { Component } from 'vue';
 import type { VibeViewerItem } from './viewer';
 import type { VibeAssetErrorReporter, VibeAssetLoadReporter } from './viewer-core/assetErrors';
-import type { VibeGridStatusSlotProps } from './viewer-core/surfaceSlots';
+import type { VibeEmptyStateMode, VibeEmptyStateSlotProps, VibeGridStatusSlotProps } from './viewer-core/surfaceSlots';
 import type { VibeLoadPhase } from './viewer-core/useViewer';
 type __VLS_Props = {
     active?: boolean;
     activeIndex?: number;
     allowExhaustedNextPageRefresh?: boolean;
     commitPendingAppend?: (() => void | Promise<void>) | null;
+    emptyStateMode?: VibeEmptyStateMode;
     errorMessage?: string | null;
     hasNextPage?: boolean;
     hasPreviousPage?: boolean;
@@ -23,6 +24,7 @@ type __VLS_Props = {
     showStatusBadges?: boolean;
 };
 type __VLS_Slots = {
+    'empty-state'?: (props: VibeEmptyStateSlotProps) => unknown;
     'grid-footer'?: () => unknown;
     'grid-item-overlay'?: (props: {
         active: boolean;
@@ -46,6 +48,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onOpen-fullscreen"?: ((index: number) => any) | undefined;
 }>, {
     loading: boolean;
+    emptyStateMode: VibeEmptyStateMode;
     paginationDetail: string | null;
     showStatusBadges: boolean;
     activeIndex: number;

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

@@ -0,0 +1,21 @@
+import type { VibeEmptyStateSlotProps } from './viewer-core/surfaceSlots';
+type __VLS_Props = {
+    message: string;
+    mode: VibeEmptyStateSlotProps['mode'];
+    surface: VibeEmptyStateSlotProps['surface'];
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/viewer-core/removalState.d.ts

@@ -17,6 +17,7 @@ export interface VibeStatus {
     loadState: 'failed' | 'loaded' | 'loading';
     mode: VibeFeedMode;
     nextCursor: string | null;
+    pageLoadingLocked: boolean;
     phase: VibeLoadPhase;
     previousCursor: string | null;
     removedCount: number;
@@ -27,6 +28,7 @@ export interface VibeHandle {
     cancel: () => void;
     clearRemoved: () => void;
     getRemovedIds: () => string[];
+    lockPageLoading: () => void;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     remove: (ids: string | string[]) => VibeRemoveResult;
@@ -34,6 +36,7 @@ export interface VibeHandle {
     retry: () => Promise<void>;
     status: Readonly<VibeStatus>;
     undo: () => VibeRemoveResult | null;
+    unlockPageLoading: () => void;
 }
 export declare function useVibeRemovalState(): {
     clearRemoved: () => void;

package/lib/components/viewer-core/surfaceSlots.d.ts

@@ -7,6 +7,14 @@ export type VibeSurfaceSlotProps = {
     paginationDetail: string | null;
     total: number;
 };
+export type VibeEmptyStateMode = 'inline' | 'badge' | 'hidden';
+export type VibeEmptyStateSlotProps = {
+    loading: boolean;
+    message: string;
+    mode: Exclude<VibeEmptyStateMode, 'hidden'>;
+    surface: 'fullscreen' | 'grid';
+    total: number;
+};
 export type VibeSurfaceStatusKind = 'end' | 'failed' | 'filling' | 'initializing' | 'loading-more' | 'refreshing';
 export type VibeFullscreenStatusSlotProps = VibeSurfaceSlotProps & {
     kind: VibeSurfaceStatusKind;

package/lib/components/viewer-core/useAutoResolveSource.d.ts

@@ -32,7 +32,9 @@ export declare function useAutoResolveSource(options: {
     fillTargetCount: Ref<number | null, number | null>;
     hasNextPage: import("vue").ComputedRef<boolean>;
     hasPreviousPage: import("vue").ComputedRef<boolean>;
+    isPageLoadingLocked: Ref<boolean, boolean>;
     items: import("vue").ComputedRef<VibeViewerItem[]>;
+    lockPageLoading: () => void;
     loading: import("vue").ComputedRef<boolean>;
     mode: import("vue").ComputedRef<VibeFeedMode>;
     nextCursor: import("vue").ComputedRef<string | null>;
@@ -46,6 +48,7 @@ export declare function useAutoResolveSource(options: {
     setActiveIndex: (nextIndex: number) => void;
     setAutoPrefetchEnabled: (nextValue: boolean) => void;
     syncActiveIndexAfterVisibilityChange: (anchorOccurrenceKey?: string | null) => void;
+    unlockPageLoading: () => void;
     getActiveOccurrenceKey: () => string | null;
     maybeCommitPendingAppendWhenFilteredOut: () => void;
 };

package/lib/components/viewer-core/useController.d.ts

@@ -4,6 +4,7 @@ export declare const DESKTOP_BREAKPOINT_PX = 1024;
 export declare function useController(props: Readonly<VibeProps>, emit: VibeEmit): {
     cancel: () => void;
     isDesktop: import("vue").ComputedRef<boolean>;
+    lockPageLoading: () => void;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     openFullscreen: (index: number) => void;
@@ -23,6 +24,7 @@ export declare function useController(props: Readonly<VibeProps>, emit: VibeEmit
         readonly loadState: "failed" | "loaded" | "loading";
         readonly mode: import("./removalState").VibeFeedMode;
         readonly nextCursor: string | null;
+        readonly pageLoadingLocked: boolean;
         readonly phase: import("./removalState").VibeLoadPhase;
         readonly previousCursor: string | null;
         readonly removedCount: number;
@@ -30,6 +32,7 @@ export declare function useController(props: Readonly<VibeProps>, emit: VibeEmit
         readonly surfaceMode: VibeSurfaceMode;
     };
     surfaceMode: import("vue").ComputedRef<VibeSurfaceMode>;
+    unlockPageLoading: () => void;
     activeIndex: import("vue").ComputedRef<number>;
     canRefreshExhaustedNextPage: import("vue").ComputedRef<boolean>;
     canRetryInitialLoad: import("vue").ComputedRef<boolean>;
@@ -43,6 +46,7 @@ export declare function useController(props: Readonly<VibeProps>, emit: VibeEmit
     getRemovedIds: () => string[];
     hasNextPage: import("vue").ComputedRef<boolean>;
     hasPreviousPage: import("vue").ComputedRef<boolean>;
+    isPageLoadingLocked: import("vue").Ref<boolean, boolean>;
     items: import("vue").ComputedRef<import("../viewer").VibeViewerItem[]>;
     loading: import("vue").ComputedRef<boolean>;
     mode: import("vue").ComputedRef<import("./removalState").VibeFeedMode>;

package/lib/components/viewer-core/useDataSource.d.ts

@@ -1,4 +1,5 @@
 import type { VibeViewerItem } from '../viewer';
+import type { VibeEmptyStateMode } from './surfaceSlots';
 export type { VibeHandle, VibeRemoveResult } from './removalState';
 export type { VibeFeedMode, VibeLoadPhase, VibeSurfaceMode } from './removalState';
 export interface VibeResolveParams {
@@ -19,6 +20,7 @@ export interface VibeInitialState {
     activeIndex?: number;
 }
 export interface VibeProps {
+    emptyStateMode?: VibeEmptyStateMode;
     fillDelayMs?: number;
     fillDelayStepMs?: number;
     initialCursor?: string | null;
@@ -50,7 +52,9 @@ export declare function useDataSource(props: Readonly<VibeProps>, emit: VibeEmit
     getRemovedIds: () => string[];
     hasNextPage: import("vue").ComputedRef<boolean>;
     hasPreviousPage: import("vue").ComputedRef<boolean>;
+    isPageLoadingLocked: import("vue").Ref<boolean, boolean>;
     items: import("vue").ComputedRef<VibeViewerItem[]>;
+    lockPageLoading: () => void;
     loading: import("vue").ComputedRef<boolean>;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
@@ -76,4 +80,5 @@ export declare function useDataSource(props: Readonly<VibeProps>, emit: VibeEmit
     undo: () => {
         ids: string[];
     } | null;
+    unlockPageLoading: () => void;
 };

package/lib/components/viewer-core/useEdgeBoundary.d.ts

@@ -2,6 +2,7 @@ import { type Ref } from 'vue';
 export type VibeMasonryEdgeDirection = 'bottom' | 'top';
 export declare function useEdgeBoundary(options: {
     direction: VibeMasonryEdgeDirection;
+    interactionLocked?: Ref<boolean>;
     hasPage: Ref<boolean>;
     isAtBoundary: () => boolean;
     loading: Ref<boolean>;

package/lib/components/viewer-core/useFullscreenSurfaceMedia.d.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue';
+import type { VibeViewerItem } from '../viewer';
+export declare function useFullscreenSurfaceMedia(options: {
+    active: Ref<boolean | undefined>;
+    resolvedActiveIndex: Ref<number>;
+    viewer: {
+        getAssetErrorKind: (id: string) => unknown;
+        getAssetErrorLabel: (id: string) => string | null | undefined;
+        getImageSource: (item: VibeViewerItem) => string | undefined;
+        isImageReady: (id: string) => boolean;
+        isMediaReady: (id: string) => boolean;
+    };
+}): {
+    getAssetErrorKind: (item: VibeViewerItem) => unknown;
+    getAssetErrorLabel: (item: VibeViewerItem) => string;
+    getFullscreenImageSource: (index: number, item: VibeViewerItem) => string | undefined;
+    getFullscreenMediaSource: (index: number, item: VibeViewerItem) => string | undefined;
+    getItemKey: (item: VibeViewerItem) => string;
+    getMediaActionLabel: (action: "Play" | "Pause", item: VibeViewerItem) => string;
+    isAssetErrored: (index: number, item: VibeViewerItem) => boolean;
+    isAssetLoading: (index: number, item: VibeViewerItem) => boolean;
+    shouldPreloadSlideAsset: (index: number) => boolean;
+};

package/lib/components/viewer-core/useMasonryList.d.ts

@@ -24,10 +24,44 @@ export declare function useVibeMasonryList(options: {
         transitionDelay: string | undefined;
         transform: string;
     };
+    getLeavingCardStyle: (item: VibeViewerItem) => {
+        opacity: string;
+        transform: string;
+        transition: string;
+        height?: undefined;
+        width?: undefined;
+    } | {
+        height: string;
+        opacity: string;
+        transform: string;
+        transition: string;
+        width: string;
+    };
     getScrollbarThumbStyle: () => {
         height: string;
         transform: string;
     };
+    leavingItems: import("vue").ComputedRef<{
+        height: number;
+        item: {
+            [x: string]: unknown;
+            id: string;
+            type: import("../viewer").VibeViewerType;
+            title?: string | undefined;
+            url: string;
+            preview?: {
+                url: string;
+                width?: number | undefined;
+                height?: number | undefined;
+            } | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+        };
+        position: {
+            x: number;
+            y: number;
+        };
+    }[]>;
     onScroll: () => void;
     onWheel: (event: WheelEvent) => void;
     paginationLabel: import("vue").ComputedRef<string>;

package/lib/components/viewer-core/useMasonryMotion.d.ts

@@ -2,8 +2,14 @@ import { type ComputedRef, type Ref } from 'vue';
 import type { VibeViewerItem } from '../viewer';
 import type { LayoutPosition } from './masonryLayout';
 export type VibeMasonryEnterDirection = 'bottom' | 'top';
+export interface VibeMasonryLeavingItem {
+    height: number;
+    item: VibeViewerItem;
+    position: LayoutPosition;
+}
 export declare function getVibeMasonryEnterOrder(itemIds: string[], direction: VibeMasonryEnterDirection): string[];
 export declare function getVibeMasonryEnterDuration(itemCount: number): number;
+export declare function getVibeMasonryLeaveDuration(): number;
 export declare function getVibeMasonryEnterStartY(options: {
     direction: VibeMasonryEnterDirection;
     itemHeight: number;
@@ -24,6 +30,41 @@ export declare function useMasonryMotion(options: {
     getCardTransform: (index: number) => string;
     getCardTransition: (itemId: string) => string | undefined;
     getCardTransitionDelay: (itemId: string) => string | undefined;
+    getLeavingCardStyle: (item: VibeViewerItem) => {
+        opacity: string;
+        transform: string;
+        transition: string;
+        height?: undefined;
+        width?: undefined;
+    } | {
+        height: string;
+        opacity: string;
+        transform: string;
+        transition: string;
+        width: string;
+    };
+    leavingItems: ComputedRef<{
+        height: number;
+        item: {
+            [x: string]: unknown;
+            id: string;
+            type: import("../viewer").VibeViewerType;
+            title?: string | undefined;
+            url: string;
+            preview?: {
+                url: string;
+                width?: number | undefined;
+                height?: number | undefined;
+            } | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+        };
+        position: {
+            x: number;
+            y: number;
+        };
+    }[]>;
     markEnter: (items: VibeViewerItem[], direction?: VibeMasonryEnterDirection) => void;
+    markLeave: (items: VibeMasonryLeavingItem[]) => void;
     playFlipMoveAnimation: (oldPositionsById: Map<string, LayoutPosition>, skipIds?: Set<string>, durationMs?: number) => void;
 };

package/lib/components/viewer-core/useSurfaceEmptyState.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+import type { VibeEmptyStateMode, VibeEmptyStateSlotProps } from './surfaceSlots';
+export declare const DEFAULT_VIBE_EMPTY_STATE_MESSAGE = "no items available";
+export declare function useSurfaceEmptyState(options: {
+    emptyStateMode: Ref<VibeEmptyStateMode | undefined>;
+    itemCount: Ref<number>;
+    loading: Ref<boolean | undefined>;
+    renderSlot?: ((props: VibeEmptyStateSlotProps) => unknown) | undefined;
+    surface: VibeEmptyStateSlotProps['surface'];
+}): {
+    emptyStateProps: import("vue").ComputedRef<VibeEmptyStateSlotProps | null>;
+    showBadgeEmptyState: import("vue").ComputedRef<boolean>;
+    showCustomEmptyState: import("vue").ComputedRef<boolean>;
+    showInlineEmptyState: import("vue").ComputedRef<boolean>;
+};

package/lib/components/viewer-core/useViewer.d.ts

@@ -7,6 +7,7 @@ export type { VibeResolveParams, VibeResolveResult, VibeEmit, VibeFeedMode, Vibe
 export type { VibeAssetErrorKind } from './loadError';
 export type { VibeStatus } from './removalState';
 export type { VibeAssetErrorEvent, VibeAssetErrorReporter, VibeAssetErrorSurface, VibeAssetLoadEvent, VibeAssetLoadReporter, VibeAssetLoadSurface } from './assetErrors';
+export type { VibeEmptyStateMode, VibeEmptyStateSlotProps } from './surfaceSlots';
 export interface VibeViewerProps {
     activeIndex?: number;
     errorMessage?: string | null;