@wyxos/vibe 2.2.4 → 3.0.0

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

@@ -0,0 +1,100 @@
+import type { VibeViewerItem } from '../viewer';
+export type { VibeHandle, VibeRemoveResult } from './removalState';
+export type { VibeFeedMode, VibeLoadPhase } from './removalState';
+export interface VibeResolveParams {
+    cursor: string | null;
+    pageSize: number;
+    signal?: AbortSignal;
+}
+export interface VibeResolveResult {
+    items: VibeViewerItem[];
+    nextPage: string | null;
+    previousPage?: string | null;
+}
+export interface VibeInitialState {
+    items: VibeViewerItem[];
+    cursor: string | null;
+    nextCursor?: string | null;
+    previousCursor?: string | null;
+    activeIndex?: number;
+}
+interface VibeSharedProps {
+    hasPreviousPage?: boolean;
+    paginationDetail?: string | null;
+    requestNextPage?: (() => void | Promise<void>) | null;
+    requestPreviousPage?: (() => void | Promise<void>) | null;
+}
+export interface VibeControlledProps extends VibeSharedProps {
+    items: VibeViewerItem[];
+    activeIndex?: number;
+    fillDelayMs?: never;
+    fillDelayStepMs?: never;
+    initialState?: never;
+    loading?: boolean;
+    hasNextPage?: boolean;
+    mode?: never;
+    resolve?: never;
+    initialCursor?: never;
+    pageSize?: never;
+}
+export interface VibeAutoProps {
+    resolve: (params: VibeResolveParams) => Promise<VibeResolveResult>;
+    fillDelayMs?: number;
+    fillDelayStepMs?: number;
+    initialCursor?: string | null;
+    initialState?: VibeInitialState;
+    mode?: import('./removalState').VibeFeedMode;
+    pageSize?: number;
+    items?: never;
+    activeIndex?: never;
+    hasPreviousPage?: never;
+    loading?: never;
+    hasNextPage?: never;
+    paginationDetail?: never;
+    requestNextPage?: never;
+    requestPreviousPage?: never;
+}
+export type VibeProps = VibeControlledProps | VibeAutoProps;
+export type VibeEmit = (event: 'update:activeIndex', value: number) => void;
+export declare function useDataSource(props: Readonly<VibeProps>, emit: VibeEmit): {
+    activeIndex: import("vue").ComputedRef<number>;
+    canRetryInitialLoad: import("vue").ComputedRef<boolean>;
+    cancel: () => void;
+    clearRemoved: () => void;
+    commitPendingAppend: () => Promise<void>;
+    currentCursor: import("vue").ComputedRef<string | null>;
+    errorMessage: import("vue").ComputedRef<string | null>;
+    fillCollectedCount: import("vue").ComputedRef<number | null>;
+    fillDelayRemainingMs: import("vue").ComputedRef<number | null>;
+    fillTargetCount: import("vue").ComputedRef<number | null>;
+    getRemovedIds: () => string[];
+    hasNextPage: import("vue").ComputedRef<boolean>;
+    hasPreviousPage: import("vue").ComputedRef<boolean>;
+    isAutoMode: import("vue").ComputedRef<boolean>;
+    items: import("vue").ComputedRef<VibeViewerItem[]>;
+    loading: import("vue").ComputedRef<boolean>;
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
+    mode: import("vue").ComputedRef<import("./removalState").VibeFeedMode | null>;
+    nextCursor: import("vue").ComputedRef<string | null>;
+    paginationDetail: import("vue").ComputedRef<string | null>;
+    pendingAppendItems: import("vue").ComputedRef<VibeViewerItem[]>;
+    phase: import("vue").ComputedRef<import("./removalState").VibeLoadPhase>;
+    prefetchNextPage: () => Promise<void>;
+    prefetchPreviousPage: () => Promise<void>;
+    previousCursor: import("vue").ComputedRef<string | null>;
+    removedCount: import("vue").ComputedRef<number>;
+    remove: (ids: string | string[]) => {
+        ids: string[];
+    };
+    restore: (ids: string | string[]) => {
+        ids: string[];
+    };
+    retry: () => Promise<void>;
+    retryInitialLoad: () => Promise<void>;
+    setActiveIndex: (nextIndex: number) => void;
+    setAutoPrefetchEnabled: (nextValue: boolean) => void;
+    undo: () => {
+        ids: string[];
+    } | null;
+};

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

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+export type VibeMasonryEdgeDirection = 'bottom' | 'top';
+export declare function useEdgeBoundary(options: {
+    direction: VibeMasonryEdgeDirection;
+    hasPage: Ref<boolean>;
+    isAtBoundary: () => boolean;
+    loading: Ref<boolean>;
+    requestPage: Ref<(() => void | Promise<void>) | null | undefined>;
+    getAnimationLockMs: (addedItemCount: number) => number;
+}): {
+    maybeRequestPage: () => void;
+    onItemsMutated: (addedItemCount: number) => void;
+    onLoadingChange: (isLoading: boolean) => void;
+    onWheel: (event: WheelEvent) => void;
+    syncBoundary: () => void;
+};

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

@@ -0,0 +1 @@
+export { useViewer as useFullscreen } from './useViewer';

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

@@ -0,0 +1,43 @@
+import { type Ref } from 'vue';
+import type { VibeViewerItem } from '../viewer';
+export declare function useVibeMasonryList(options: {
+    active: Ref<boolean>;
+    items: Ref<VibeViewerItem[]>;
+    activeIndex: Ref<number>;
+    loading: Ref<boolean>;
+    hasNextPage: Ref<boolean>;
+    hasPreviousPage: Ref<boolean>;
+    paginationDetail: Ref<string | null>;
+    pendingAppendItems: Ref<VibeViewerItem[]>;
+    commitPendingAppend: Ref<(() => void | Promise<void>) | null | undefined>;
+    requestNextPage: Ref<(() => void | Promise<void>) | null | undefined>;
+    requestPreviousPage: Ref<(() => void | Promise<void>) | null | undefined>;
+    restoreToken: Ref<number>;
+    setActiveIndex: (index: number) => void;
+}): {
+    columnWidth: import("vue").ComputedRef<number>;
+    containerHeight: import("vue").ComputedRef<number>;
+    footerStatusMessage: import("vue").ComputedRef<"Loading the first page" | "Loading more items" | "End of list" | null>;
+    getCardStyle: (index: number) => {
+        height: string;
+        width: string;
+        transition: string | undefined;
+        transitionDelay: string | undefined;
+        transform: string;
+    };
+    getScrollbarThumbStyle: () => {
+        height: string;
+        transform: string;
+    };
+    onScroll: () => void;
+    onWheel: (event: WheelEvent) => void;
+    paginationLabel: import("vue").ComputedRef<string>;
+    renderedItems: import("vue").ComputedRef<{
+        item: VibeViewerItem;
+        index: number;
+    }[]>;
+    resolvedActiveIndex: import("vue").ComputedRef<number>;
+    scrollToIndex: (index: number, alignment: "center" | "nearest") => void;
+    showScrollbar: import("vue").ComputedRef<boolean>;
+    scrollViewportRef: Ref<HTMLElement | null, HTMLElement | null>;
+};

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

@@ -0,0 +1,29 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { VibeViewerItem } from '../viewer';
+import type { LayoutPosition } from './masonryLayout';
+export type VibeMasonryEnterDirection = 'bottom' | 'top';
+export declare function getVibeMasonryEnterOrder(itemIds: string[], direction: VibeMasonryEnterDirection): string[];
+export declare function getVibeMasonryEnterDuration(itemCount: number): number;
+export declare function getVibeMasonryEnterStartY(options: {
+    direction: VibeMasonryEnterDirection;
+    itemHeight: number;
+    columnWidth: number;
+    scrollTop: number;
+    viewportHeight: number;
+}): number;
+export declare function useMasonryMotion(options: {
+    items: Ref<VibeViewerItem[]>;
+    visibleIndices: ComputedRef<number[]>;
+    positions: Ref<LayoutPosition[]>;
+    heights: Ref<number[]>;
+    indexById: Ref<Map<string, number>>;
+    columnWidth: ComputedRef<number>;
+    scrollTop: Ref<number>;
+    viewportHeight: Ref<number>;
+}): {
+    getCardTransform: (index: number) => string;
+    getCardTransition: (itemId: string) => string | undefined;
+    getCardTransitionDelay: (itemId: string) => string | undefined;
+    markEnter: (items: VibeViewerItem[], direction?: VibeMasonryEnterDirection) => void;
+    playFlipMoveAnimation: (oldPositionsById: Map<string, LayoutPosition>, skipIds?: Set<string>, durationMs?: number) => void;
+};

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

@@ -0,0 +1,39 @@
+import { type Ref } from 'vue';
+import type { VibeViewerItem } from '../viewer';
+import type { VibeAssetErrorReporter, VibeAssetLoadReporter } from './assetErrors';
+import { type MediaUiState } from './assetState';
+import { type VibeAssetErrorKind } from './loadError';
+export declare function useMedia(options: {
+    activeItem: Ref<VibeViewerItem | null>;
+    activeMediaItem: Ref<VibeViewerItem | null>;
+    isEnabled: Ref<boolean>;
+    itemCount: Ref<number>;
+    onAssetError?: VibeAssetErrorReporter;
+    onAssetLoad?: VibeAssetLoadReporter;
+}): {
+    activeAssetErrorKind: import("vue").ComputedRef<VibeAssetErrorKind | null>;
+    activeMediaDuration: import("vue").ComputedRef<number>;
+    activeMediaProgress: import("vue").ComputedRef<number>;
+    activeMediaState: import("vue").ComputedRef<MediaUiState>;
+    getAssetErrorKind: (id: string) => VibeAssetErrorKind | null;
+    getAssetErrorLabel: (id: string) => "404" | "Load error" | null;
+    getAssetRenderKey: (id: string) => string;
+    getImageSource: (item: VibeViewerItem) => string;
+    isImageReady: (id: string) => boolean;
+    isMediaReady: (id: string) => boolean;
+    canRetryAsset: (id: string) => boolean;
+    mediaStates: Ref<Record<string, MediaUiState>, Record<string, MediaUiState>>;
+    onAudioCoverClick: (event: MouseEvent, id: string, suppressMediaToggleUntil: number) => void;
+    onImageError: (id: string, url: string) => Promise<void>;
+    onImageLoad: (id: string, url: string) => void;
+    onMediaError: (id: string, url: string) => Promise<void>;
+    onMediaEvent: (id: string, event: Event) => void;
+    onMediaSeekInput: (event: Event) => void;
+    onVideoClick: (event: MouseEvent, id: string, suppressMediaToggleUntil: number) => void;
+    registerAudioElement: (id: string, element: unknown) => void;
+    registerImageElement: (id: string, element: unknown) => void;
+    registerVideoElement: (id: string, element: unknown) => void;
+    resetMediaState: () => void;
+    retryAsset: (id: string) => Promise<void>;
+    syncMediaPlayback: () => Promise<void>;
+};

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

@@ -0,0 +1,61 @@
+import { type Ref } from 'vue';
+import type { VibeAssetErrorReporter, VibeAssetLoadReporter } from './assetErrors';
+import { formatPlaybackTime } from './format';
+import { type VibeProps } from './useDataSource';
+export type { VibeResolveParams, VibeResolveResult, VibeAutoProps, VibeControlledProps, VibeEmit, VibeFeedMode, VibeHandle, VibeInitialState, VibeLoadPhase, VibeProps, } from './useDataSource';
+export type { VibeAssetErrorKind } from './loadError';
+export type { VibeStatus } from './removalState';
+export type { VibeAssetErrorEvent, VibeAssetErrorReporter, VibeAssetErrorSurface, VibeAssetLoadEvent, VibeAssetLoadReporter, VibeAssetLoadSurface } from './assetErrors';
+export declare function useViewer(props: Readonly<VibeProps>, emit: (event: 'update:activeIndex', value: number) => void, options?: {
+    enabled?: Ref<boolean>;
+    onAssetError?: VibeAssetErrorReporter;
+    onAssetLoad?: VibeAssetLoadReporter;
+}): {
+    activeItem: import("vue").ComputedRef<import("../viewer").VibeViewerItem>;
+    activeAssetErrorKind: import("vue").ComputedRef<import("./loadError").VibeAssetErrorKind | null>;
+    activeMediaDuration: import("vue").ComputedRef<number>;
+    activeMediaItem: import("vue").ComputedRef<import("../viewer").VibeViewerItem | null>;
+    activeMediaProgress: import("vue").ComputedRef<number>;
+    activeMediaState: import("vue").ComputedRef<import("./assetState").MediaUiState>;
+    canRetryAsset: (id: string) => boolean;
+    canRetryInitialLoad: import("vue").ComputedRef<boolean>;
+    errorMessage: import("vue").ComputedRef<string | null>;
+    getAssetErrorKind: (id: string) => import("./loadError").VibeAssetErrorKind | null;
+    getAssetErrorLabel: (id: string) => "404" | "Load error" | null;
+    getAssetRenderKey: (id: string) => string;
+    formatPlaybackTime: typeof formatPlaybackTime;
+    getImageSource: (item: import("../viewer").VibeViewerItem) => string;
+    getSlideStyle: (index: number) => import("vue").CSSProperties;
+    hasNextPage: import("vue").ComputedRef<boolean>;
+    isAtEnd: import("vue").ComputedRef<boolean>;
+    isAudio: (item: import("../viewer").VibeViewerItem) => boolean;
+    isVisual: (item: import("../viewer").VibeViewerItem) => boolean;
+    items: import("vue").ComputedRef<import("../viewer").VibeViewerItem[]>;
+    loading: import("vue").ComputedRef<boolean>;
+    mediaStates: Ref<Record<string, import("./assetState").MediaUiState>, Record<string, import("./assetState").MediaUiState>>;
+    isImageReady: (id: string) => boolean;
+    isMediaReady: (id: string) => boolean;
+    onAudioCoverClick: (event: MouseEvent, id: string) => void;
+    onImageError: (id: string, url: string) => Promise<void>;
+    onImageLoad: (id: string, url: string) => void;
+    onMediaEvent: (id: string, event: Event) => void;
+    onMediaError: (id: string, url: string) => Promise<void>;
+    onMediaSeekInput: (event: Event) => void;
+    onPointerCancel: (event: PointerEvent) => void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onVideoClick: (event: MouseEvent, id: string) => void;
+    onWheel: (event: WheelEvent) => void;
+    registerAudioElement: (id: string, element: unknown) => void;
+    registerImageElement: (id: string, element: unknown) => void;
+    registerVideoElement: (id: string, element: unknown) => void;
+    renderedItems: import("vue").ComputedRef<import("./virtualization").VibeRenderedItem[]>;
+    renderedRange: import("vue").ComputedRef<import("./virtualization").VibeRenderedRange>;
+    resolvedActiveIndex: import("vue").ComputedRef<number>;
+    retryInitialLoad: () => Promise<void>;
+    retryAsset: (id: string) => Promise<void>;
+    stageRef: Ref<HTMLElement | null, HTMLElement | null>;
+    statusMessage: import("vue").ComputedRef<"Loading the first page" | "Loading more items" | "End of feed" | null>;
+    paginationDetail: import("vue").ComputedRef<string | null>;
+};

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

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'vue';
+import type { VibeViewerItem } from '../viewer';
+export interface VibeRenderedRange {
+    start: number;
+    end: number;
+}
+export interface VibeRenderedItem {
+    item: VibeViewerItem;
+    index: number;
+}
+export declare const VIBE_WINDOW_OVERSCAN = 2;
+export declare function getRenderedRange(activeIndex: number, totalItems: number, overscan?: number): VibeRenderedRange;
+export declare function getRenderedItems(items: VibeViewerItem[], activeIndex: number, overscan?: number): VibeRenderedItem[];
+export declare function getVirtualSlideStyle(index: number, activeIndex: number, viewportHeight: number, dragOffset: number, isDragging: boolean): CSSProperties;

package/lib/components/viewer.d.ts

@@ -0,0 +1,16 @@
+export type VibeViewerType = 'image' | 'video' | 'audio' | 'other';
+export interface VibeViewerAsset {
+    url: string;
+    width?: number;
+    height?: number;
+}
+export interface VibeViewerItem {
+    id: string;
+    type: VibeViewerType;
+    title?: string;
+    url: string;
+    preview?: VibeViewerAsset;
+    width?: number;
+    height?: number;
+    [key: string]: unknown;
+}