@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.6

package/dist/lib/components/panel/header/bookmarks/index.js

@@ -0,0 +1,247 @@
+import { useInfoPanel } from "../../info-panel/provider.js";
+import { ShortcutTooltipLabel } from "../../../shortcut-key/index.js";
+import { useBookmarks } from "../../../../store/useBookmarks/index.js";
+import { getAppPath, getOpenUrl } from "../../../../utils/url.js";
+import { createDefaultFolderForm } from "./folder-modal/variants.js";
+import { FolderModal } from "./folder-modal/index.js";
+import { collectTreeItemIds, createTreeItemId, dedupeTreeItems, getBookmarkTreeSignature, getExpandableBookmarkKeys, insertFolderItem, moveTreeItemToFolder, removeTreeItem, updateTreeItem } from "./bookmark-file-tree/variants.js";
+import { BookmarkFileTree } from "./bookmark-file-tree/index.js";
+import { getBookmarkShortcuts } from "./membership.js";
+import { QuickAccess } from "./quick-access/index.js";
+import { bookmarksToTreeItems, treeItemsToBookmarks } from "./tree-data.js";
+import { useProps } from "./types.js";
+import { useNavigate } from "@tanstack/react-router";
+import { forwardRef, useMemo, useState } from "react";
+import { ScrollShadow, Tooltip, Typography } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Bookmark } from "@vezham/icons-react";
+//#region src/lib/components/panel/header/bookmarks/index.tsx
+var useBookmarkItemNavigation = (onFavoriteClick, onBookmarkClick) => {
+	const navigate = useNavigate();
+	const openItem = (url) => {
+		if (!url || url === "#") return;
+		const appPath = getAppPath(url, window.location.origin);
+		if (appPath) {
+			navigate({ to: appPath });
+			return;
+		}
+		window.open(getOpenUrl(url), "_blank", "noopener,noreferrer");
+	};
+	return {
+		openBookmark: (url, item) => onBookmarkClick ? onBookmarkClick(url, item) : openItem(url),
+		openFavorite: (url, item) => onFavoriteClick ? onFavoriteClick(url, item) : openItem(url)
+	};
+};
+var getSavedFolderItems = ({ items, form, mode, parentId }) => {
+	const folderName = form.name.trim();
+	if (!folderName) return null;
+	if (mode === "edit" && form.id) return updateTreeItem(items, form.id, (item) => ({
+		...item,
+		title: folderName,
+		color: form.color,
+		visualType: form.visualType,
+		emoji: form.emoji,
+		icon: form.icon
+	}));
+	const result = insertFolderItem(items, {
+		id: createTreeItemId("folder:custom", collectTreeItemIds(items)),
+		title: folderName,
+		kind: "folder",
+		color: form.color,
+		visualType: form.visualType,
+		emoji: form.emoji,
+		icon: form.icon,
+		children: []
+	}, parentId);
+	return result.inserted ? result.items : void 0;
+};
+var BookmarksContent = forwardRef((props, ref) => {
+	const { Component, getScrollShadowProps, getContentContainerProps, getSectionProps, getSectionHeaderProps, getSectionIconProps, getSectionTitleProps, getFavorite2ItemsProps, getFavoriteBackgroundImageProps, getFavoriteBackgroundGradientProps, getFavoriteOverlayProps, getFavoriteAvatarContainerProps, getFavoriteAvatarProps, getFavoriteAvatarIconProps, getFavoriteAvatarFallbackProps, getFavoriteContentProps, getFavoriteNameProps, getFileTreeProps, getBookmarkTreeEmptyStateProps, externalFavorites, externalBookmarks, externalPins, onFavoriteClick, onBookmarkClick, renderFavoriteItem, onFavoritesChange, onPinsChange, onFavoritesReorder, onBookmarksReorder, onFolderReorder } = useProps({
+		...props,
+		ref
+	});
+	const { openBookmark, openFavorite } = useBookmarkItemNavigation(onFavoriteClick, onBookmarkClick);
+	const bookmarksQuery = useBookmarks.list({});
+	const bookmarkActions = useBookmarks.actions({});
+	const [showAllPinsMode, setShowAllPinsMode] = useState(false);
+	const [isScrollFavoritesOpen, setIsScrollFavoritesOpen] = useState(true);
+	const [folderModalOpen, setFolderModalOpen] = useState(false);
+	const [folderModalMode, setFolderModalMode] = useState("create");
+	const [folderParentId, setFolderParentId] = useState();
+	const [folderForm, setFolderForm] = useState(() => createDefaultFolderForm());
+	const sourceFavorites = externalFavorites ?? bookmarksQuery.data.favorites;
+	const membership = getBookmarkShortcuts({
+		favorites: useMemo(() => sourceFavorites.slice(0, 12), [sourceFavorites]),
+		pins: externalPins ?? bookmarksQuery.data.pins,
+		onFavoritesChange: onFavoritesChange ?? bookmarkActions.setFavorites,
+		onPinsChange: onPinsChange ?? bookmarkActions.setPins
+	});
+	const favorites = membership.favorites;
+	const bookmarks = externalBookmarks ?? bookmarksQuery.data.bookmarks;
+	const activeBookmarkTreeItems = useMemo(() => bookmarksToTreeItems(bookmarks), [bookmarks]);
+	const bookmarkTreeExpandedKeys = useMemo(() => getExpandableBookmarkKeys(activeBookmarkTreeItems), [activeBookmarkTreeItems]);
+	const bookmarkTreeKey = useMemo(() => getBookmarkTreeSignature(activeBookmarkTreeItems), [activeBookmarkTreeItems]);
+	const pins = membership.pins;
+	const visiblePins = pins.slice(0, 6);
+	const hasMorePins = pins.length > 6;
+	const getFavoriteAvatarIconPropsForIcon = getFavoriteAvatarIconProps;
+	const handleViewAllPins = () => {
+		setShowAllPinsMode(true);
+	};
+	const handleBackToNormalView = () => {
+		setShowAllPinsMode(false);
+	};
+	const toggleScrollFavorites = () => {
+		setIsScrollFavoritesOpen(!isScrollFavoritesOpen);
+	};
+	const handleBookmarkTreeClick = (item) => {
+		openBookmark(item.url ?? "#", item);
+	};
+	const handleBookmarkTreeChange = (items) => {
+		const nextBookmarks = treeItemsToBookmarks(dedupeTreeItems(items));
+		if (!externalBookmarks) bookmarkActions.setBookmarks(nextBookmarks);
+		onBookmarksReorder?.(nextBookmarks);
+		onFolderReorder?.(nextBookmarks);
+	};
+	const handleBookmarkRemove = (id) => {
+		handleBookmarkTreeChange(removeTreeItem(activeBookmarkTreeItems, id));
+	};
+	const openCreateFolderModal = (parentId) => {
+		setFolderModalMode("create");
+		setFolderParentId(parentId);
+		setFolderForm(createDefaultFolderForm());
+		setFolderModalOpen(true);
+	};
+	const openEditFolderModal = (item) => {
+		setFolderModalMode("edit");
+		setFolderParentId(void 0);
+		setFolderForm({
+			id: item.id,
+			name: item.title,
+			color: item.color ?? "#007aff",
+			visualType: item.visualType ?? "icon",
+			emoji: item.emoji ?? "😀",
+			icon: item.icon ?? "vx:list-filled"
+		});
+		setFolderModalOpen(true);
+	};
+	const handleFolderSave = () => {
+		const nextItems = getSavedFolderItems({
+			items: activeBookmarkTreeItems,
+			form: folderForm,
+			mode: folderModalMode,
+			parentId: folderParentId
+		});
+		if (nextItems === null) return;
+		if (nextItems) handleBookmarkTreeChange(nextItems);
+		setFolderModalOpen(false);
+	};
+	const handleBookmarkMove = (id, targetFolderId) => {
+		handleBookmarkTreeChange(moveTreeItemToFolder(activeBookmarkTreeItems, id, targetFolderId).items);
+	};
+	return /* @__PURE__ */ jsxs(Component, {
+		className: "h-full min-h-0",
+		children: [/* @__PURE__ */ jsx(ScrollShadow, {
+			...getScrollShadowProps(),
+			children: /* @__PURE__ */ jsxs("div", {
+				...getContentContainerProps(),
+				children: [/* @__PURE__ */ jsx(QuickAccess, {
+					mode: showAllPinsMode ? "all" : "sections",
+					favorites,
+					onUnpin: membership.unpin,
+					onFavoriteRemove: membership.removeFavorite,
+					onFavoritesReorder: (items) => {
+						membership.reorderFavorites(items);
+						onFavoritesReorder?.(items);
+					},
+					pins,
+					visiblePins,
+					hasMorePins,
+					isScrollFavoritesOpen,
+					renderFavoriteItem,
+					getSectionProps,
+					getSectionHeaderProps,
+					getSectionTitleProps,
+					getSectionIconProps,
+					getFavorite2ItemsProps,
+					getFavoriteBackgroundImageProps,
+					getFavoriteBackgroundGradientProps,
+					getFavoriteOverlayProps,
+					getFavoriteAvatarContainerProps,
+					getFavoriteAvatarProps,
+					getFavoriteAvatarIconProps: getFavoriteAvatarIconPropsForIcon,
+					getFavoriteAvatarFallbackProps,
+					getFavoriteContentProps,
+					getFavoriteNameProps,
+					onFavoriteClick: openFavorite,
+					onViewAllPins: handleViewAllPins,
+					onBackToNormalView: handleBackToNormalView,
+					onToggleScrollFavorites: toggleScrollFavorites
+				}), !showAllPinsMode && /* @__PURE__ */ jsxs("section", {
+					...getSectionProps(),
+					children: [/* @__PURE__ */ jsxs("div", {
+						...getSectionHeaderProps(),
+						children: [/* @__PURE__ */ jsx(Bookmark, {
+							...getSectionIconProps("text-primary"),
+							weight: "filled",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Bookmarks") })]
+					}), /* @__PURE__ */ jsx(BookmarkFileTree, {
+						items: activeBookmarkTreeItems,
+						defaultExpandedKeys: bookmarkTreeExpandedKeys,
+						getFileTreeProps,
+						getBookmarkTreeEmptyStateProps,
+						onBookmarkClick: handleBookmarkTreeClick,
+						onBookmarkRemove: handleBookmarkRemove,
+						onFolderEdit: openEditFolderModal,
+						onFolderDelete: handleBookmarkRemove,
+						onNewFolder: openCreateFolderModal,
+						onBookmarkMove: handleBookmarkMove,
+						onTreeChange: handleBookmarkTreeChange
+					}, bookmarkTreeKey)]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(FolderModal, {
+			open: folderModalOpen,
+			mode: folderModalMode,
+			form: folderForm,
+			onFormChange: setFolderForm,
+			onOpenChange: setFolderModalOpen,
+			onSave: handleFolderSave
+		})]
+	});
+});
+BookmarksContent.displayName = "BookmarksContent";
+var BookmarksTrigger = () => {
+	const { activeInfoPanel, isOpen, toggleInfoPanel } = useInfoPanel();
+	const isActive = isOpen && activeInfoPanel === "bookmarks";
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		delay: 0,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx("span", {
+			"aria-label": "Bookmarks",
+			children: /* @__PURE__ */ jsx(Bookmark, {
+				className: isActive ? "text-muted" : "",
+				weight: isActive ? "filled" : "outline",
+				size: 20,
+				onClick: () => toggleInfoPanel("bookmarks"),
+				"aria-hidden": "true"
+			})
+		}) }), /* @__PURE__ */ jsx(Tooltip.Content, {
+			placement: "right",
+			children: /* @__PURE__ */ jsx(ShortcutTooltipLabel, {
+				label: "Bookmarks",
+				shortcut: "Mod ⇧ B"
+			})
+		})]
+	});
+};
+var BookmarksPanelContent = () => {
+	return /* @__PURE__ */ jsx(BookmarksContent, {});
+};
+var bookmarksPanel = {
+	title: "Bookmarks",
+	scrollable: false,
+	content: /* @__PURE__ */ jsx(BookmarksPanelContent, {})
+};
+//#endregion
+export { BookmarksTrigger, bookmarksPanel };

package/dist/lib/components/panel/header/bookmarks/membership.d.ts

@@ -0,0 +1,14 @@
+import type { FavoriteItem } from './types';
+export declare const getBookmarkShortcuts: ({ favorites, pins, onFavoritesChange, onPinsChange }: {
+    favorites: FavoriteItem[];
+    pins: FavoriteItem[];
+    onFavoritesChange: (items: FavoriteItem[]) => void;
+    onPinsChange: (items: FavoriteItem[]) => void;
+}) => {
+    favorites: FavoriteItem[];
+    pins: FavoriteItem[];
+    unpin: (id: string) => void;
+    removeFavorite: (id: string) => void;
+    reorderFavorites: (items: readonly FavoriteItem[]) => void;
+};
+//# sourceMappingURL=membership.d.ts.map

package/dist/lib/components/panel/header/bookmarks/membership.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"membership.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/membership.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,eAAO,MAAM,oBAAoB,GAAI,sDAKlC;IACD,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,iBAAiB,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAClD,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;CAC9C;;;gBAQe,MAAM;yBACG,MAAM;8BAED,SAAS,YAAY,EAAE;CAGpD,CAAA"}

package/dist/lib/components/panel/header/bookmarks/membership.js

@@ -0,0 +1,13 @@
+//#region src/lib/components/panel/header/bookmarks/membership.ts
+var getBookmarkShortcuts = ({ favorites, pins, onFavoritesChange, onPinsChange }) => {
+	const currentFavorites = favorites.length > 12 ? favorites.slice(0, 12) : favorites;
+	return {
+		favorites: currentFavorites,
+		pins,
+		unpin: (id) => onPinsChange(pins.filter((item) => item.id !== id)),
+		removeFavorite: (id) => onFavoritesChange(currentFavorites.filter((item) => item.id !== id)),
+		reorderFavorites: (items) => onFavoritesChange(items.slice(0, 12))
+	};
+};
+//#endregion
+export { getBookmarkShortcuts };

package/dist/lib/components/panel/header/bookmarks/quick-access/index.d.ts

@@ -0,0 +1,4 @@
+import { type QuickAccessProps } from './types';
+declare const QuickAccess: ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReorder, pins, visiblePins, hasMorePins, isScrollFavoritesOpen, renderFavoriteItem, getSectionProps, getSectionHeaderProps, getSectionTitleProps, getSectionIconProps, getFavorite2ItemsProps, getFavoriteBackgroundImageProps, getFavoriteBackgroundGradientProps, getFavoriteOverlayProps, getFavoriteAvatarContainerProps, getFavoriteAvatarProps, getFavoriteAvatarIconProps, getFavoriteAvatarFallbackProps, getFavoriteContentProps, getFavoriteNameProps, onFavoriteClick, onViewAllPins, onBackToNormalView, onToggleScrollFavorites }: QuickAccessProps) => import("react").JSX.Element;
+export { QuickAccess };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/panel/header/bookmarks/quick-access/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/quick-access/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,QAAA,MAAM,WAAW,GAAI,ykBA6BlB,gBAAgB,gCAgPlB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/lib/components/panel/header/bookmarks/quick-access/index.js

@@ -0,0 +1,224 @@
+import { BookmarkSectionEmptyState } from "../empty-state.js";
+import { ShortcutContextMenu } from "../shortcut-context-menu.js";
+import { ReorderableGridList } from "../favorites/index.js";
+import { Avatar, Button, ScrollShadow, Typography } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AltArrowDown, AltArrowUp, ArrowLeft, Eye, Heart, MinusCircle, Pin } from "@vezham/icons-react";
+//#region src/lib/components/panel/header/bookmarks/quick-access/index.tsx
+var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReorder, pins, visiblePins, hasMorePins, isScrollFavoritesOpen, renderFavoriteItem, getSectionProps, getSectionHeaderProps, getSectionTitleProps, getSectionIconProps, getFavorite2ItemsProps, getFavoriteBackgroundImageProps, getFavoriteBackgroundGradientProps, getFavoriteOverlayProps, getFavoriteAvatarContainerProps, getFavoriteAvatarProps, getFavoriteAvatarIconProps, getFavoriteAvatarFallbackProps, getFavoriteContentProps, getFavoriteNameProps, onFavoriteClick, onViewAllPins, onBackToNormalView, onToggleScrollFavorites }) => {
+	const renderAllPinsFullView = () => {
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 flex items-center justify-between",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							isIconOnly: true,
+							"aria-label": "Back to bookmarks",
+							size: "sm",
+							variant: "ghost",
+							className: "text-default-600 shrink-0",
+							onPress: onBackToNormalView,
+							children: /* @__PURE__ */ jsx(ArrowLeft, {
+								size: 16,
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsx(Typography.Heading, {
+							className: "text-xl font-semibold",
+							children: "All Pins"
+						})]
+					})
+				}),
+				pins.length === 0 && /* @__PURE__ */ jsx(BookmarkSectionEmptyState, {
+					title: "No pins yet.",
+					description: "Keep useful items within easy reach."
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "space-y-1",
+					children: pins.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "group hover:bg-default has-[:focus-visible]:bg-default relative flex w-full min-w-0 items-center rounded-md",
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onFavoriteClick(item.url, item),
+							className: "focus-visible:ring-focus flex w-full min-w-0 cursor-[var(--cursor-interactive)] items-center gap-3 rounded-md px-2 py-2 text-left outline-none group-hover:pe-10 group-has-[:focus-visible]:pe-10 focus-visible:ring-2 focus-visible:ring-inset [@media(hover:none)]:pe-10",
+							children: [/* @__PURE__ */ jsxs(Avatar, {
+								className: "h-5 w-5 shrink-0",
+								children: [item.avatar ? /* @__PURE__ */ jsx(Avatar.Image, {
+									src: item.avatar,
+									alt: item.name
+								}) : item.backgroundImage ? /* @__PURE__ */ jsx(Avatar.Image, {
+									src: item.backgroundImage,
+									alt: item.name
+								}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
+									className: "bg-default-500 text-white",
+									children: /* @__PURE__ */ jsx(Pin, {
+										className: "text-warning",
+										size: "1em",
+										weight: "filled",
+										"aria-hidden": "true"
+									})
+								})]
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex min-w-0 flex-1 flex-col gap-0.5",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-foreground block truncate text-sm leading-5 font-medium",
+									children: item.name
+								}), item.url && /* @__PURE__ */ jsx("span", {
+									className: "text-muted block truncate text-xs leading-4",
+									children: item.url
+								})]
+							})]
+						}), /* @__PURE__ */ jsx(Button, {
+							isIconOnly: true,
+							size: "sm",
+							variant: "ghost",
+							className: "text-muted hover:text-danger data-[hovered=true]:text-danger pointer-events-none absolute end-1 size-7 min-w-0 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-has-[:focus-visible]:pointer-events-auto group-has-[:focus-visible]:opacity-100 hover:bg-transparent data-[hovered=true]:bg-transparent [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
+							"aria-label": `Unpin ${item.name} from Quick Access`,
+							onPress: () => onUnpin(item.id),
+							children: /* @__PURE__ */ jsx(MinusCircle, {
+								size: 16,
+								"aria-hidden": "true"
+							})
+						})]
+					}, item.id))
+				})
+			]
+		});
+	};
+	const renderPinsForScroll = () => {
+		if (renderFavoriteItem) return visiblePins.map((item) => /* @__PURE__ */ jsx("div", {
+			"data-shortcut-id": item.id,
+			children: renderFavoriteItem({
+				item,
+				onItemClick: (url) => onFavoriteClick(url, item)
+			})
+		}, item.id));
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-nowrap gap-3 pb-2",
+			children: [visiblePins.map((item) => /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"data-shortcut-id": item.id,
+				...getFavorite2ItemsProps(),
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Open ${item.name}`,
+						className: "absolute inset-0 z-10 cursor-pointer rounded-[inherit]",
+						onClick: () => onFavoriteClick(item.url, item)
+					}),
+					item.backgroundImage ? /* @__PURE__ */ jsx("img", {
+						...getFavoriteBackgroundImageProps(item.backgroundImage, item.name),
+						alt: item.name
+					}) : /* @__PURE__ */ jsx("div", { ...getFavoriteBackgroundGradientProps() }),
+					/* @__PURE__ */ jsx("div", { ...getFavoriteOverlayProps() }),
+					/* @__PURE__ */ jsx("div", {
+						...getFavoriteAvatarContainerProps(),
+						children: /* @__PURE__ */ jsxs(Avatar, {
+							...getFavoriteAvatarProps(),
+							children: [item.avatar && /* @__PURE__ */ jsx(Avatar.Image, {
+								src: item.avatar,
+								alt: item.name
+							}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+								...getFavoriteAvatarFallbackProps(item.name),
+								children: /* @__PURE__ */ jsx(Pin, {
+									...getFavoriteAvatarIconProps(),
+									weight: "filled",
+									"aria-hidden": "true"
+								})
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						...getFavoriteContentProps(),
+						children: /* @__PURE__ */ jsx(Typography.Paragraph, { ...getFavoriteNameProps(item.name) })
+					})
+				]
+			}, item.id)), hasMorePins && /* @__PURE__ */ jsx("button", {
+				onClick: onViewAllPins,
+				className: "group bg-default-100 hover:bg-default-200 relative flex aspect-square w-[120px] shrink-0 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl transition-[transform,background-color] hover:scale-[1.02] active:scale-[0.98]",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-2 p-4",
+					children: [/* @__PURE__ */ jsx(Eye, {
+						size: 32,
+						className: "text-primary",
+						weight: "filled",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ jsx(Typography.Paragraph, {
+							className: "text-default-700 text-sm font-semibold",
+							children: "View All"
+						}), /* @__PURE__ */ jsxs(Typography.Paragraph, {
+							className: "text-default-500 text-xs",
+							children: [pins.length - 6, " more"]
+						})]
+					})]
+				})
+			})]
+		});
+	};
+	if (mode === "all") return renderAllPinsFullView();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("section", {
+		...getSectionProps(),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...getSectionHeaderProps(),
+			children: [/* @__PURE__ */ jsx(Heart, {
+				...getSectionIconProps("text-primary"),
+				weight: "filled",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Favorites") })]
+		}), /* @__PURE__ */ jsx(ReorderableGridList, {
+			items: favorites,
+			onRemove: onFavoriteRemove,
+			onReorder: onFavoritesReorder,
+			onAction: (item) => onFavoriteClick(item.url, item)
+		})]
+	}), /* @__PURE__ */ jsxs("section", {
+		...getSectionProps(),
+		children: [/* @__PURE__ */ jsxs("div", {
+			...getSectionHeaderProps(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Pin, {
+					...getSectionIconProps("text-primary"),
+					weight: "filled",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Quick Access") })]
+			}), pins.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": isScrollFavoritesOpen ? "Collapse quick access" : "Expand quick access",
+					isIconOnly: true,
+					size: "sm",
+					variant: "ghost",
+					onPress: onToggleScrollFavorites,
+					className: "text-default-400",
+					children: isScrollFavoritesOpen ? /* @__PURE__ */ jsx(AltArrowUp, {
+						size: 18,
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(AltArrowDown, {
+						size: 18,
+						"aria-hidden": "true"
+					})
+				})
+			})]
+		}), (isScrollFavoritesOpen || pins.length === 0) && /* @__PURE__ */ jsx(ShortcutContextMenu, {
+			items: pins,
+			kind: "pin",
+			onRemove: onUnpin,
+			children: /* @__PURE__ */ jsx(ScrollShadow, {
+				orientation: "horizontal",
+				className: "max-w-full overflow-x-auto pb-2",
+				hideScrollBar: false,
+				children: pins.length === 0 ? /* @__PURE__ */ jsx(BookmarkSectionEmptyState, {
+					title: "No pins yet.",
+					description: "Keep useful items within easy reach."
+				}) : renderPinsForScroll()
+			})
+		})]
+	})] });
+};
+//#endregion
+export { QuickAccess };

package/dist/lib/components/panel/header/bookmarks/quick-access/types.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type HTMLAttributes, type ImgHTMLAttributes, type ReactNode } from 'react';
+import { Star as StarIcon } from '@vezham/icons-react';
+import { Avatar, Typography } from '@vezham/react-v3';
+import { type FavoriteItem } from '../types';
+export interface QuickAccessProps {
+    mode: 'sections' | 'all';
+    favorites: FavoriteItem[];
+    onUnpin: (id: string) => void;
+    onFavoriteRemove: (id: string) => void;
+    onFavoritesReorder: (items: FavoriteItem[]) => void;
+    pins: FavoriteItem[];
+    visiblePins: FavoriteItem[];
+    hasMorePins: boolean;
+    isScrollFavoritesOpen: boolean;
+    renderFavoriteItem?: (props: {
+        item: FavoriteItem;
+        onItemClick?: (url: string) => void;
+    }) => ReactNode;
+    getSectionProps: () => HTMLAttributes<HTMLElement>;
+    getSectionHeaderProps: () => HTMLAttributes<HTMLDivElement>;
+    getSectionIconProps: (className?: string) => ComponentProps<typeof StarIcon>;
+    getSectionTitleProps: (title: string) => ComponentProps<typeof Typography.Heading>;
+    getFavorite2ItemsProps: () => HTMLAttributes<HTMLDivElement>;
+    getFavoriteBackgroundImageProps: (src: string, alt: string) => ImgHTMLAttributes<HTMLImageElement>;
+    getFavoriteBackgroundGradientProps: () => HTMLAttributes<HTMLDivElement>;
+    getFavoriteOverlayProps: () => HTMLAttributes<HTMLDivElement>;
+    getFavoriteAvatarContainerProps: () => HTMLAttributes<HTMLDivElement>;
+    getFavoriteAvatarProps: () => ComponentProps<typeof Avatar>;
+    getFavoriteAvatarIconProps: () => ComponentProps<typeof StarIcon>;
+    getFavoriteAvatarFallbackProps: (name: string) => ComponentProps<typeof Avatar.Fallback>;
+    getFavoriteContentProps: () => HTMLAttributes<HTMLDivElement>;
+    getFavoriteNameProps: (name: string) => ComponentProps<typeof Typography.Paragraph>;
+    onFavoriteClick: (url: string, item: FavoriteItem) => void;
+    onViewAllPins: () => void;
+    onBackToNormalView: () => void;
+    onToggleScrollFavorites: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/components/panel/header/bookmarks/quick-access/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/quick-access/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAErD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,UAAU,GAAG,KAAK,CAAA;IACxB,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IACnD,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,WAAW,EAAE,YAAY,EAAE,CAAA;IAC3B,WAAW,EAAE,OAAO,CAAA;IACpB,qBAAqB,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC3B,IAAI,EAAE,YAAY,CAAA;QAClB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,KAAK,SAAS,CAAA;IACf,eAAe,EAAE,MAAM,cAAc,CAAC,WAAW,CAAC,CAAA;IAClD,qBAAqB,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IAC3D,mBAAmB,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;IAC5E,oBAAoB,EAAE,CACpB,KAAK,EAAE,MAAM,KACV,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;IAC9C,sBAAsB,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IAC5D,+BAA+B,EAAE,CAC/B,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,KACR,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IACxC,kCAAkC,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IACxE,uBAAuB,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IAC7D,+BAA+B,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IACrE,sBAAsB,EAAE,MAAM,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;IAC3D,0BAA0B,EAAE,MAAM,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;IACjE,8BAA8B,EAAE,CAC9B,IAAI,EAAE,MAAM,KACT,cAAc,CAAC,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC3C,uBAAuB,EAAE,MAAM,cAAc,CAAC,cAAc,CAAC,CAAA;IAC7D,oBAAoB,EAAE,CACpB,IAAI,EAAE,MAAM,KACT,cAAc,CAAC,OAAO,UAAU,CAAC,SAAS,CAAC,CAAA;IAChD,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAC1D,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC"}

package/dist/lib/components/panel/header/bookmarks/shortcut-context-menu.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { FavoriteItem } from './types';
+type Props = {
+    children: ReactNode;
+    items: readonly FavoriteItem[];
+    kind: 'favorite' | 'pin';
+    onRemove?: (id: string) => void;
+};
+export declare const ShortcutContextMenu: ({ children, items, kind, onRemove }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=shortcut-context-menu.d.ts.map

package/dist/lib/components/panel/header/bookmarks/shortcut-context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut-context-menu.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/shortcut-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAMhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B,IAAI,EAAE,UAAU,GAAG,KAAK,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,qCAKjC,KAAK,gCAyCP,CAAA"}

package/dist/lib/components/panel/header/bookmarks/shortcut-context-menu.js

@@ -0,0 +1,39 @@
+import { panelContextMenuClass } from "../../info-panel/styles.js";
+import { useState } from "react";
+import { Label } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@vezham/react-pro-v3";
+//#region src/lib/components/panel/header/bookmarks/shortcut-context-menu.tsx
+var ShortcutContextMenu = ({ children, items, kind, onRemove }) => {
+	const [targetId, setTargetId] = useState(null);
+	const rememberTarget = (target) => {
+		setTargetId((target instanceof Element ? target.closest("[data-shortcut-id]") : null)?.dataset.shortcutId ?? null);
+	};
+	const target = items.find((item) => item.id === targetId);
+	const label = kind === "favorite" ? "Remove Favorite" : "Unpin";
+	return /* @__PURE__ */ jsxs(ContextMenu, { children: [/* @__PURE__ */ jsx(ContextMenu.Trigger, {
+		className: "block! w-full min-w-0",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-full min-w-0",
+			onContextMenuCapture: (event) => rememberTarget(event.target),
+			onKeyDownCapture: (event) => {
+				if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") rememberTarget(event.target);
+			},
+			children
+		})
+	}), /* @__PURE__ */ jsx(ContextMenu.Popover, {
+		className: panelContextMenuClass,
+		children: /* @__PURE__ */ jsx(ContextMenu.Menu, {
+			"aria-label": target ? `${target.name} actions` : "Item actions",
+			children: /* @__PURE__ */ jsx(ContextMenu.Item, {
+				id: "remove-shortcut",
+				textValue: label,
+				isDisabled: !target || !onRemove,
+				onPress: () => target && onRemove?.(target.id),
+				children: /* @__PURE__ */ jsx(Label, { children: label })
+			})
+		})
+	})] });
+};
+//#endregion
+export { ShortcutContextMenu };

package/dist/lib/components/panel/header/bookmarks/tree-data.d.ts

@@ -0,0 +1,4 @@
+import type { BookmarkItem, BookmarkTreeItem } from './types';
+export declare const bookmarksToTreeItems: (bookmarks: BookmarkItem[]) => BookmarkTreeItem[];
+export declare const treeItemsToBookmarks: (items: BookmarkTreeItem[]) => BookmarkItem[];
+//# sourceMappingURL=tree-data.d.ts.map

package/dist/lib/components/panel/header/bookmarks/tree-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-data.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/tree-data.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAwB7D,eAAO,MAAM,oBAAoB,GAAI,WAAW,YAAY,EAAE,uBA+E7D,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,OAAO,gBAAgB,EAAE,mBA+B7D,CAAA"}