@particle-academy/react-fancy 4.8.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/dist/index.cjs +549 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +223 -1
- package/dist/index.d.ts +223 -1
- package/dist/index.js +544 -2
- package/dist/index.js.map +1 -1
- package/dist/styles.css +46 -0
- package/dist/styles.css.map +1 -1
- package/docs/AudioViewer.md +29 -0
- package/docs/ImageViewer.md +60 -0
- package/docs/MediaViewer.md +75 -0
- package/docs/PdfViewer.md +29 -0
- package/docs/VideoViewer.md +31 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -2590,6 +2590,34 @@ declare function sanitizeHref(href: string | undefined | null): string | undefin
|
|
|
2590
2590
|
*/
|
|
2591
2591
|
declare function sanitizeHtml(html: string): string;
|
|
2592
2592
|
|
|
2593
|
+
/**
|
|
2594
|
+
* Resolve what kind of media a source is, from its MIME type (preferred) or its
|
|
2595
|
+
* URL — a file extension, or the type embedded in a `data:` URI.
|
|
2596
|
+
*
|
|
2597
|
+
* Shared by `<MediaViewer>` to pick the right per-type viewer, and exported so
|
|
2598
|
+
* downstream packages (e.g. fancy-code's file viewer) can make the same
|
|
2599
|
+
* text-vs-media decision without re-deriving the table.
|
|
2600
|
+
*/
|
|
2601
|
+
type MediaKind = "image" | "video" | "audio" | "pdf" | "unknown";
|
|
2602
|
+
interface ResolveMediaTypeInput {
|
|
2603
|
+
/** MIME type — preferred when known (e.g. `"image/png"`, `"video/mp4"`). */
|
|
2604
|
+
mime?: string | null;
|
|
2605
|
+
/**
|
|
2606
|
+
* Source URL — used to sniff the kind from a file extension, or from the type
|
|
2607
|
+
* embedded in a `data:` URI, when no `mime` is given. `http(s):` / `data:` /
|
|
2608
|
+
* `blob:` are all accepted (a bare `blob:` URL carries no type, so pass
|
|
2609
|
+
* `mime` alongside it).
|
|
2610
|
+
*/
|
|
2611
|
+
src?: string | null;
|
|
2612
|
+
}
|
|
2613
|
+
/**
|
|
2614
|
+
* Resolve a {@link MediaKind} from a MIME type and/or source URL. MIME wins
|
|
2615
|
+
* when it's conclusive; otherwise the `src` is sniffed (a `data:` URI's
|
|
2616
|
+
* embedded type first, then the file extension). Returns `"unknown"` when
|
|
2617
|
+
* nothing matches — callers treat that as "not previewable media" (e.g. text).
|
|
2618
|
+
*/
|
|
2619
|
+
declare function resolveMediaType({ mime, src }: ResolveMediaTypeInput): MediaKind;
|
|
2620
|
+
|
|
2593
2621
|
declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void];
|
|
2594
2622
|
|
|
2595
2623
|
declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean, ignoreRef?: RefObject<HTMLElement | null>): void;
|
|
@@ -3090,4 +3118,198 @@ interface MagicWandProps {
|
|
|
3090
3118
|
}
|
|
3091
3119
|
declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element;
|
|
3092
3120
|
|
|
3093
|
-
|
|
3121
|
+
/** Pan offset (in container pixels) + zoom factor for an `<ImageViewer>`. */
|
|
3122
|
+
interface ImageViewerViewport {
|
|
3123
|
+
panX: number;
|
|
3124
|
+
panY: number;
|
|
3125
|
+
zoom: number;
|
|
3126
|
+
}
|
|
3127
|
+
interface ImageViewerProps {
|
|
3128
|
+
/** Image source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3129
|
+
src: string;
|
|
3130
|
+
/** Alt text for the image (also used as the download filename hint). */
|
|
3131
|
+
alt?: string;
|
|
3132
|
+
/**
|
|
3133
|
+
* How the image sits in its container at zoom 1. `"contain"` (default) fits
|
|
3134
|
+
* the whole image, `"cover"` fills and crops, `"none"` shows it at natural
|
|
3135
|
+
* size (pan to see the rest).
|
|
3136
|
+
*/
|
|
3137
|
+
fit?: "contain" | "cover" | "none";
|
|
3138
|
+
/** Allow Ctrl/⌘+wheel zoom and the zoom controls (default `true`). */
|
|
3139
|
+
zoomable?: boolean;
|
|
3140
|
+
/** Allow click-drag panning (default `true`). */
|
|
3141
|
+
pannable?: boolean;
|
|
3142
|
+
/** Show the floating zoom controls. Defaults to the value of `zoomable`. */
|
|
3143
|
+
controls?: boolean;
|
|
3144
|
+
/** Minimum zoom factor (default `0.25`). */
|
|
3145
|
+
minZoom?: number;
|
|
3146
|
+
/** Maximum zoom factor (default `8`). */
|
|
3147
|
+
maxZoom?: number;
|
|
3148
|
+
/**
|
|
3149
|
+
* Paint a checkerboard behind the image so transparency reads clearly
|
|
3150
|
+
* (default `true`). Set `false` for a flat themed surface.
|
|
3151
|
+
*/
|
|
3152
|
+
checkerboard?: boolean;
|
|
3153
|
+
/**
|
|
3154
|
+
* Controlled viewport (pan + zoom). Pair with `onViewportChange`. Omit for
|
|
3155
|
+
* uncontrolled internal state. Exposed so an agent can pan/zoom to point at
|
|
3156
|
+
* something via a bridge.
|
|
3157
|
+
*/
|
|
3158
|
+
viewport?: ImageViewerViewport;
|
|
3159
|
+
/** Initial viewport when uncontrolled. */
|
|
3160
|
+
defaultViewport?: ImageViewerViewport;
|
|
3161
|
+
/** Called whenever the viewport (pan/zoom) changes. */
|
|
3162
|
+
onViewportChange?: (viewport: ImageViewerViewport) => void;
|
|
3163
|
+
/** Fired when the image finishes loading. */
|
|
3164
|
+
onLoad?: () => void;
|
|
3165
|
+
/** Fired when the image fails to load. */
|
|
3166
|
+
onError?: () => void;
|
|
3167
|
+
/** Additional CSS classes for the viewport container. */
|
|
3168
|
+
className?: string;
|
|
3169
|
+
/** Inline styles for the viewport container (e.g. a fixed height). */
|
|
3170
|
+
style?: CSSProperties;
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
interface VideoViewerProps {
|
|
3174
|
+
/** Video source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3175
|
+
src: string;
|
|
3176
|
+
/** Poster image shown before playback. */
|
|
3177
|
+
poster?: string;
|
|
3178
|
+
/** Show native playback controls (default `true`). */
|
|
3179
|
+
controls?: boolean;
|
|
3180
|
+
/** Autoplay on mount (most browsers require `muted` too). */
|
|
3181
|
+
autoPlay?: boolean;
|
|
3182
|
+
/** Loop playback (default `false`). */
|
|
3183
|
+
loop?: boolean;
|
|
3184
|
+
/** Start muted (default `false`). */
|
|
3185
|
+
muted?: boolean;
|
|
3186
|
+
/** How the video fits its box: `"contain"` (default) or `"cover"`. */
|
|
3187
|
+
fit?: "contain" | "cover";
|
|
3188
|
+
/** Fired when the video fails to load. */
|
|
3189
|
+
onError?: () => void;
|
|
3190
|
+
/** Additional CSS classes for the container. */
|
|
3191
|
+
className?: string;
|
|
3192
|
+
/** Inline styles for the container (e.g. a fixed height). */
|
|
3193
|
+
style?: CSSProperties;
|
|
3194
|
+
}
|
|
3195
|
+
|
|
3196
|
+
interface AudioViewerProps {
|
|
3197
|
+
/** Audio source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3198
|
+
src: string;
|
|
3199
|
+
/** Optional label shown above the player (e.g. the file name). */
|
|
3200
|
+
title?: string;
|
|
3201
|
+
/** Show native playback controls (default `true`). */
|
|
3202
|
+
controls?: boolean;
|
|
3203
|
+
/** Autoplay on mount. */
|
|
3204
|
+
autoPlay?: boolean;
|
|
3205
|
+
/** Loop playback (default `false`). */
|
|
3206
|
+
loop?: boolean;
|
|
3207
|
+
/** Fired when the audio fails to load. */
|
|
3208
|
+
onError?: () => void;
|
|
3209
|
+
/** Additional CSS classes for the card. */
|
|
3210
|
+
className?: string;
|
|
3211
|
+
/** Inline styles for the card. */
|
|
3212
|
+
style?: CSSProperties;
|
|
3213
|
+
}
|
|
3214
|
+
|
|
3215
|
+
interface PdfViewerProps {
|
|
3216
|
+
/** PDF source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3217
|
+
src: string;
|
|
3218
|
+
/** Accessible title for the embedded document (default `"PDF document"`). */
|
|
3219
|
+
title?: string;
|
|
3220
|
+
/** Additional CSS classes for the container. */
|
|
3221
|
+
className?: string;
|
|
3222
|
+
/** Inline styles for the container (e.g. a fixed height). */
|
|
3223
|
+
style?: CSSProperties;
|
|
3224
|
+
}
|
|
3225
|
+
|
|
3226
|
+
interface MediaViewerProps {
|
|
3227
|
+
/** Media source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3228
|
+
src: string;
|
|
3229
|
+
/**
|
|
3230
|
+
* MIME type — preferred for picking the viewer. When omitted, the kind is
|
|
3231
|
+
* sniffed from `src` (extension or `data:` URI). Always pass `mime` with a
|
|
3232
|
+
* bare `blob:` URL, which carries no type of its own.
|
|
3233
|
+
*/
|
|
3234
|
+
mime?: string;
|
|
3235
|
+
/** Alt text / label, forwarded as image alt and audio/PDF title. */
|
|
3236
|
+
alt?: string;
|
|
3237
|
+
/** Force a specific viewer, bypassing detection. */
|
|
3238
|
+
kind?: MediaKind;
|
|
3239
|
+
/** Extra props for the underlying `<ImageViewer>`. */
|
|
3240
|
+
imageProps?: Partial<Omit<ImageViewerProps, "src" | "alt">>;
|
|
3241
|
+
/** Extra props for the underlying `<VideoViewer>`. */
|
|
3242
|
+
videoProps?: Partial<Omit<VideoViewerProps, "src">>;
|
|
3243
|
+
/** Extra props for the underlying `<AudioViewer>`. */
|
|
3244
|
+
audioProps?: Partial<Omit<AudioViewerProps, "src">>;
|
|
3245
|
+
/** Extra props for the underlying `<PdfViewer>`. */
|
|
3246
|
+
pdfProps?: Partial<Omit<PdfViewerProps, "src">>;
|
|
3247
|
+
/** Rendered for unknown / unpreviewable types (default: a download card). */
|
|
3248
|
+
fallback?: ReactNode;
|
|
3249
|
+
/** Fired when the chosen viewer reports a load error. */
|
|
3250
|
+
onError?: () => void;
|
|
3251
|
+
/** Additional CSS classes, forwarded to the chosen viewer. */
|
|
3252
|
+
className?: string;
|
|
3253
|
+
/** Inline styles, forwarded to the chosen viewer. */
|
|
3254
|
+
style?: CSSProperties;
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3257
|
+
/**
|
|
3258
|
+
* Renders the right viewer for a media file, picked from its `mime` (preferred)
|
|
3259
|
+
* or `src` — image, video, audio, or PDF — and a download fallback for anything
|
|
3260
|
+
* else. SVG renders through `<ImageViewer>`. The single entry point for showing
|
|
3261
|
+
* a file from a tree/workspace when you don't know its type ahead of time.
|
|
3262
|
+
*
|
|
3263
|
+
* ```tsx
|
|
3264
|
+
* <MediaViewer src={url} mime="image/png" alt="logo.png" style={{ height: 320 }} />
|
|
3265
|
+
* ```
|
|
3266
|
+
*/
|
|
3267
|
+
declare const MediaViewer: react.ForwardRefExoticComponent<MediaViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3268
|
+
|
|
3269
|
+
/**
|
|
3270
|
+
* A standalone image viewer: fits the image to its container, with optional
|
|
3271
|
+
* Ctrl/⌘+wheel zoom, click-drag panning, and a transparency checkerboard. Works
|
|
3272
|
+
* anywhere on its own and is also what `<MediaViewer>` renders for images.
|
|
3273
|
+
*
|
|
3274
|
+
* The pan/zoom viewport is controllable (`viewport` + `onViewportChange`) so an
|
|
3275
|
+
* agent bridge can drive it; it's uncontrolled by default.
|
|
3276
|
+
*
|
|
3277
|
+
* ```tsx
|
|
3278
|
+
* <ImageViewer src="/logo.png" alt="logo.png" style={{ height: 320 }} />
|
|
3279
|
+
* ```
|
|
3280
|
+
*/
|
|
3281
|
+
declare const ImageViewer: react.ForwardRefExoticComponent<ImageViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3282
|
+
|
|
3283
|
+
/**
|
|
3284
|
+
* A standalone video viewer — native controls, optional poster, fit-to-box, and
|
|
3285
|
+
* dark-aware framing. Renders for video sources inside `<MediaViewer>`.
|
|
3286
|
+
*
|
|
3287
|
+
* ```tsx
|
|
3288
|
+
* <VideoViewer src="/clip.mp4" poster="/clip.jpg" style={{ height: 360 }} />
|
|
3289
|
+
* ```
|
|
3290
|
+
*/
|
|
3291
|
+
declare const VideoViewer: react.ForwardRefExoticComponent<VideoViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3292
|
+
|
|
3293
|
+
/**
|
|
3294
|
+
* A standalone audio viewer — a themed card wrapping the native audio player,
|
|
3295
|
+
* with an optional title. Renders for audio sources inside `<MediaViewer>`.
|
|
3296
|
+
*
|
|
3297
|
+
* ```tsx
|
|
3298
|
+
* <AudioViewer src="/track.mp3" title="track.mp3" />
|
|
3299
|
+
* ```
|
|
3300
|
+
*/
|
|
3301
|
+
declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3302
|
+
|
|
3303
|
+
/**
|
|
3304
|
+
* A standalone PDF viewer — embeds the document via the browser's native PDF
|
|
3305
|
+
* plugin (`<object>`), falling back to an `<iframe>`, then to a download link.
|
|
3306
|
+
* Fills its container, so give it a height (a `min-h` floor is built in).
|
|
3307
|
+
* Renders for PDF sources inside `<MediaViewer>`.
|
|
3308
|
+
*
|
|
3309
|
+
* ```tsx
|
|
3310
|
+
* <PdfViewer src="/report.pdf" title="report.pdf" style={{ height: 600 }} />
|
|
3311
|
+
* ```
|
|
3312
|
+
*/
|
|
3313
|
+
declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3314
|
+
|
|
3315
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
package/dist/index.d.ts
CHANGED
|
@@ -2590,6 +2590,34 @@ declare function sanitizeHref(href: string | undefined | null): string | undefin
|
|
|
2590
2590
|
*/
|
|
2591
2591
|
declare function sanitizeHtml(html: string): string;
|
|
2592
2592
|
|
|
2593
|
+
/**
|
|
2594
|
+
* Resolve what kind of media a source is, from its MIME type (preferred) or its
|
|
2595
|
+
* URL — a file extension, or the type embedded in a `data:` URI.
|
|
2596
|
+
*
|
|
2597
|
+
* Shared by `<MediaViewer>` to pick the right per-type viewer, and exported so
|
|
2598
|
+
* downstream packages (e.g. fancy-code's file viewer) can make the same
|
|
2599
|
+
* text-vs-media decision without re-deriving the table.
|
|
2600
|
+
*/
|
|
2601
|
+
type MediaKind = "image" | "video" | "audio" | "pdf" | "unknown";
|
|
2602
|
+
interface ResolveMediaTypeInput {
|
|
2603
|
+
/** MIME type — preferred when known (e.g. `"image/png"`, `"video/mp4"`). */
|
|
2604
|
+
mime?: string | null;
|
|
2605
|
+
/**
|
|
2606
|
+
* Source URL — used to sniff the kind from a file extension, or from the type
|
|
2607
|
+
* embedded in a `data:` URI, when no `mime` is given. `http(s):` / `data:` /
|
|
2608
|
+
* `blob:` are all accepted (a bare `blob:` URL carries no type, so pass
|
|
2609
|
+
* `mime` alongside it).
|
|
2610
|
+
*/
|
|
2611
|
+
src?: string | null;
|
|
2612
|
+
}
|
|
2613
|
+
/**
|
|
2614
|
+
* Resolve a {@link MediaKind} from a MIME type and/or source URL. MIME wins
|
|
2615
|
+
* when it's conclusive; otherwise the `src` is sniffed (a `data:` URI's
|
|
2616
|
+
* embedded type first, then the file extension). Returns `"unknown"` when
|
|
2617
|
+
* nothing matches — callers treat that as "not previewable media" (e.g. text).
|
|
2618
|
+
*/
|
|
2619
|
+
declare function resolveMediaType({ mime, src }: ResolveMediaTypeInput): MediaKind;
|
|
2620
|
+
|
|
2593
2621
|
declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void];
|
|
2594
2622
|
|
|
2595
2623
|
declare function useOutsideClick(ref: RefObject<HTMLElement | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean, ignoreRef?: RefObject<HTMLElement | null>): void;
|
|
@@ -3090,4 +3118,198 @@ interface MagicWandProps {
|
|
|
3090
3118
|
}
|
|
3091
3119
|
declare function MagicWand({ value, onValueChange, actions, appearance, autoHide, rows, placeholder, onAction, }: MagicWandProps): react.JSX.Element;
|
|
3092
3120
|
|
|
3093
|
-
|
|
3121
|
+
/** Pan offset (in container pixels) + zoom factor for an `<ImageViewer>`. */
|
|
3122
|
+
interface ImageViewerViewport {
|
|
3123
|
+
panX: number;
|
|
3124
|
+
panY: number;
|
|
3125
|
+
zoom: number;
|
|
3126
|
+
}
|
|
3127
|
+
interface ImageViewerProps {
|
|
3128
|
+
/** Image source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3129
|
+
src: string;
|
|
3130
|
+
/** Alt text for the image (also used as the download filename hint). */
|
|
3131
|
+
alt?: string;
|
|
3132
|
+
/**
|
|
3133
|
+
* How the image sits in its container at zoom 1. `"contain"` (default) fits
|
|
3134
|
+
* the whole image, `"cover"` fills and crops, `"none"` shows it at natural
|
|
3135
|
+
* size (pan to see the rest).
|
|
3136
|
+
*/
|
|
3137
|
+
fit?: "contain" | "cover" | "none";
|
|
3138
|
+
/** Allow Ctrl/⌘+wheel zoom and the zoom controls (default `true`). */
|
|
3139
|
+
zoomable?: boolean;
|
|
3140
|
+
/** Allow click-drag panning (default `true`). */
|
|
3141
|
+
pannable?: boolean;
|
|
3142
|
+
/** Show the floating zoom controls. Defaults to the value of `zoomable`. */
|
|
3143
|
+
controls?: boolean;
|
|
3144
|
+
/** Minimum zoom factor (default `0.25`). */
|
|
3145
|
+
minZoom?: number;
|
|
3146
|
+
/** Maximum zoom factor (default `8`). */
|
|
3147
|
+
maxZoom?: number;
|
|
3148
|
+
/**
|
|
3149
|
+
* Paint a checkerboard behind the image so transparency reads clearly
|
|
3150
|
+
* (default `true`). Set `false` for a flat themed surface.
|
|
3151
|
+
*/
|
|
3152
|
+
checkerboard?: boolean;
|
|
3153
|
+
/**
|
|
3154
|
+
* Controlled viewport (pan + zoom). Pair with `onViewportChange`. Omit for
|
|
3155
|
+
* uncontrolled internal state. Exposed so an agent can pan/zoom to point at
|
|
3156
|
+
* something via a bridge.
|
|
3157
|
+
*/
|
|
3158
|
+
viewport?: ImageViewerViewport;
|
|
3159
|
+
/** Initial viewport when uncontrolled. */
|
|
3160
|
+
defaultViewport?: ImageViewerViewport;
|
|
3161
|
+
/** Called whenever the viewport (pan/zoom) changes. */
|
|
3162
|
+
onViewportChange?: (viewport: ImageViewerViewport) => void;
|
|
3163
|
+
/** Fired when the image finishes loading. */
|
|
3164
|
+
onLoad?: () => void;
|
|
3165
|
+
/** Fired when the image fails to load. */
|
|
3166
|
+
onError?: () => void;
|
|
3167
|
+
/** Additional CSS classes for the viewport container. */
|
|
3168
|
+
className?: string;
|
|
3169
|
+
/** Inline styles for the viewport container (e.g. a fixed height). */
|
|
3170
|
+
style?: CSSProperties;
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
interface VideoViewerProps {
|
|
3174
|
+
/** Video source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3175
|
+
src: string;
|
|
3176
|
+
/** Poster image shown before playback. */
|
|
3177
|
+
poster?: string;
|
|
3178
|
+
/** Show native playback controls (default `true`). */
|
|
3179
|
+
controls?: boolean;
|
|
3180
|
+
/** Autoplay on mount (most browsers require `muted` too). */
|
|
3181
|
+
autoPlay?: boolean;
|
|
3182
|
+
/** Loop playback (default `false`). */
|
|
3183
|
+
loop?: boolean;
|
|
3184
|
+
/** Start muted (default `false`). */
|
|
3185
|
+
muted?: boolean;
|
|
3186
|
+
/** How the video fits its box: `"contain"` (default) or `"cover"`. */
|
|
3187
|
+
fit?: "contain" | "cover";
|
|
3188
|
+
/** Fired when the video fails to load. */
|
|
3189
|
+
onError?: () => void;
|
|
3190
|
+
/** Additional CSS classes for the container. */
|
|
3191
|
+
className?: string;
|
|
3192
|
+
/** Inline styles for the container (e.g. a fixed height). */
|
|
3193
|
+
style?: CSSProperties;
|
|
3194
|
+
}
|
|
3195
|
+
|
|
3196
|
+
interface AudioViewerProps {
|
|
3197
|
+
/** Audio source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3198
|
+
src: string;
|
|
3199
|
+
/** Optional label shown above the player (e.g. the file name). */
|
|
3200
|
+
title?: string;
|
|
3201
|
+
/** Show native playback controls (default `true`). */
|
|
3202
|
+
controls?: boolean;
|
|
3203
|
+
/** Autoplay on mount. */
|
|
3204
|
+
autoPlay?: boolean;
|
|
3205
|
+
/** Loop playback (default `false`). */
|
|
3206
|
+
loop?: boolean;
|
|
3207
|
+
/** Fired when the audio fails to load. */
|
|
3208
|
+
onError?: () => void;
|
|
3209
|
+
/** Additional CSS classes for the card. */
|
|
3210
|
+
className?: string;
|
|
3211
|
+
/** Inline styles for the card. */
|
|
3212
|
+
style?: CSSProperties;
|
|
3213
|
+
}
|
|
3214
|
+
|
|
3215
|
+
interface PdfViewerProps {
|
|
3216
|
+
/** PDF source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3217
|
+
src: string;
|
|
3218
|
+
/** Accessible title for the embedded document (default `"PDF document"`). */
|
|
3219
|
+
title?: string;
|
|
3220
|
+
/** Additional CSS classes for the container. */
|
|
3221
|
+
className?: string;
|
|
3222
|
+
/** Inline styles for the container (e.g. a fixed height). */
|
|
3223
|
+
style?: CSSProperties;
|
|
3224
|
+
}
|
|
3225
|
+
|
|
3226
|
+
interface MediaViewerProps {
|
|
3227
|
+
/** Media source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
3228
|
+
src: string;
|
|
3229
|
+
/**
|
|
3230
|
+
* MIME type — preferred for picking the viewer. When omitted, the kind is
|
|
3231
|
+
* sniffed from `src` (extension or `data:` URI). Always pass `mime` with a
|
|
3232
|
+
* bare `blob:` URL, which carries no type of its own.
|
|
3233
|
+
*/
|
|
3234
|
+
mime?: string;
|
|
3235
|
+
/** Alt text / label, forwarded as image alt and audio/PDF title. */
|
|
3236
|
+
alt?: string;
|
|
3237
|
+
/** Force a specific viewer, bypassing detection. */
|
|
3238
|
+
kind?: MediaKind;
|
|
3239
|
+
/** Extra props for the underlying `<ImageViewer>`. */
|
|
3240
|
+
imageProps?: Partial<Omit<ImageViewerProps, "src" | "alt">>;
|
|
3241
|
+
/** Extra props for the underlying `<VideoViewer>`. */
|
|
3242
|
+
videoProps?: Partial<Omit<VideoViewerProps, "src">>;
|
|
3243
|
+
/** Extra props for the underlying `<AudioViewer>`. */
|
|
3244
|
+
audioProps?: Partial<Omit<AudioViewerProps, "src">>;
|
|
3245
|
+
/** Extra props for the underlying `<PdfViewer>`. */
|
|
3246
|
+
pdfProps?: Partial<Omit<PdfViewerProps, "src">>;
|
|
3247
|
+
/** Rendered for unknown / unpreviewable types (default: a download card). */
|
|
3248
|
+
fallback?: ReactNode;
|
|
3249
|
+
/** Fired when the chosen viewer reports a load error. */
|
|
3250
|
+
onError?: () => void;
|
|
3251
|
+
/** Additional CSS classes, forwarded to the chosen viewer. */
|
|
3252
|
+
className?: string;
|
|
3253
|
+
/** Inline styles, forwarded to the chosen viewer. */
|
|
3254
|
+
style?: CSSProperties;
|
|
3255
|
+
}
|
|
3256
|
+
|
|
3257
|
+
/**
|
|
3258
|
+
* Renders the right viewer for a media file, picked from its `mime` (preferred)
|
|
3259
|
+
* or `src` — image, video, audio, or PDF — and a download fallback for anything
|
|
3260
|
+
* else. SVG renders through `<ImageViewer>`. The single entry point for showing
|
|
3261
|
+
* a file from a tree/workspace when you don't know its type ahead of time.
|
|
3262
|
+
*
|
|
3263
|
+
* ```tsx
|
|
3264
|
+
* <MediaViewer src={url} mime="image/png" alt="logo.png" style={{ height: 320 }} />
|
|
3265
|
+
* ```
|
|
3266
|
+
*/
|
|
3267
|
+
declare const MediaViewer: react.ForwardRefExoticComponent<MediaViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3268
|
+
|
|
3269
|
+
/**
|
|
3270
|
+
* A standalone image viewer: fits the image to its container, with optional
|
|
3271
|
+
* Ctrl/⌘+wheel zoom, click-drag panning, and a transparency checkerboard. Works
|
|
3272
|
+
* anywhere on its own and is also what `<MediaViewer>` renders for images.
|
|
3273
|
+
*
|
|
3274
|
+
* The pan/zoom viewport is controllable (`viewport` + `onViewportChange`) so an
|
|
3275
|
+
* agent bridge can drive it; it's uncontrolled by default.
|
|
3276
|
+
*
|
|
3277
|
+
* ```tsx
|
|
3278
|
+
* <ImageViewer src="/logo.png" alt="logo.png" style={{ height: 320 }} />
|
|
3279
|
+
* ```
|
|
3280
|
+
*/
|
|
3281
|
+
declare const ImageViewer: react.ForwardRefExoticComponent<ImageViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3282
|
+
|
|
3283
|
+
/**
|
|
3284
|
+
* A standalone video viewer — native controls, optional poster, fit-to-box, and
|
|
3285
|
+
* dark-aware framing. Renders for video sources inside `<MediaViewer>`.
|
|
3286
|
+
*
|
|
3287
|
+
* ```tsx
|
|
3288
|
+
* <VideoViewer src="/clip.mp4" poster="/clip.jpg" style={{ height: 360 }} />
|
|
3289
|
+
* ```
|
|
3290
|
+
*/
|
|
3291
|
+
declare const VideoViewer: react.ForwardRefExoticComponent<VideoViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3292
|
+
|
|
3293
|
+
/**
|
|
3294
|
+
* A standalone audio viewer — a themed card wrapping the native audio player,
|
|
3295
|
+
* with an optional title. Renders for audio sources inside `<MediaViewer>`.
|
|
3296
|
+
*
|
|
3297
|
+
* ```tsx
|
|
3298
|
+
* <AudioViewer src="/track.mp3" title="track.mp3" />
|
|
3299
|
+
* ```
|
|
3300
|
+
*/
|
|
3301
|
+
declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3302
|
+
|
|
3303
|
+
/**
|
|
3304
|
+
* A standalone PDF viewer — embeds the document via the browser's native PDF
|
|
3305
|
+
* plugin (`<object>`), falling back to an `<iframe>`, then to a download link.
|
|
3306
|
+
* Fills its container, so give it a height (a `min-h` floor is built in).
|
|
3307
|
+
* Renders for PDF sources inside `<MediaViewer>`.
|
|
3308
|
+
*
|
|
3309
|
+
* ```tsx
|
|
3310
|
+
* <PdfViewer src="/report.pdf" title="report.pdf" style={{ height: 600 }} />
|
|
3311
|
+
* ```
|
|
3312
|
+
*/
|
|
3313
|
+
declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3314
|
+
|
|
3315
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|