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

package/dist/lib/components/panel/header/bookmarks/bookmark-file-tree/variants.js

@@ -0,0 +1,249 @@
+//#region src/lib/components/panel/header/bookmarks/bookmark-file-tree/variants.ts
+var getUniqueTreeId = (baseId, counts) => {
+	const count = counts.get(baseId) ?? 0;
+	counts.set(baseId, count + 1);
+	return count === 0 ? baseId : `${baseId}:${count + 1}`;
+};
+var getExpandableBookmarkKeys = (items) => {
+	const keys = [];
+	const collect = (item) => {
+		if (item.kind === "folder") keys.push(item.id);
+		item.children?.forEach(collect);
+	};
+	items.forEach(collect);
+	return keys;
+};
+var removeTreeItem = (items, itemId) => items.filter((item) => item.id !== itemId).map((item) => ({
+	...item,
+	children: item.children ? removeTreeItem(item.children, itemId) : item.children
+}));
+var updateTreeItem = (items, itemId, updater) => items.map((item) => {
+	if (item.id === itemId) return updater(item);
+	return {
+		...item,
+		children: item.children ? updateTreeItem(item.children, itemId, updater) : item.children
+	};
+});
+var insertFolderItem = (items, folder, parentId) => {
+	if (!parentId) return {
+		inserted: true,
+		items: [...items, folder]
+	};
+	let inserted = false;
+	const nextItems = items.map((item) => {
+		if (item.id === parentId && item.kind === "folder") {
+			inserted = true;
+			return {
+				...item,
+				children: [...item.children ?? [], folder]
+			};
+		}
+		if (!item.children?.length) return item;
+		const childResult = insertFolderItem(item.children, folder, parentId);
+		inserted = inserted || childResult.inserted;
+		return {
+			...item,
+			children: childResult.items
+		};
+	});
+	return {
+		inserted,
+		items: nextItems
+	};
+};
+var createTreeItemId = (prefix, existingIds) => {
+	const baseId = `${prefix}:${typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).slice(2)}`}`;
+	let nextId = baseId;
+	let index = 1;
+	while (existingIds.has(nextId)) {
+		index += 1;
+		nextId = `${baseId}:${index}`;
+	}
+	existingIds.add(nextId);
+	return nextId;
+};
+var dedupeTreeItems = (items, seen = /* @__PURE__ */ new Set()) => items.reduce((acc, item) => {
+	if (seen.has(item.id)) return acc;
+	seen.add(item.id);
+	acc.push({
+		...item,
+		children: item.children ? dedupeTreeItems(item.children, seen) : void 0
+	});
+	return acc;
+}, []);
+var collectTreeItemIds = (items, ids = /* @__PURE__ */ new Set()) => {
+	items.forEach((item) => {
+		ids.add(item.id);
+		if (item.children) collectTreeItemIds(item.children, ids);
+	});
+	return ids;
+};
+var getUniqueFolderGroupId = (targetId, existingIds) => {
+	const baseId = `folder:group:${targetId}`;
+	let nextId = baseId;
+	let index = 1;
+	while (existingIds.has(nextId)) {
+		index += 1;
+		nextId = `${baseId}:${index}`;
+	}
+	existingIds.add(nextId);
+	return nextId;
+};
+var getFolderTitleFromMovedItems = (movedItems) => {
+	return movedItems[0]?.title.trim() || "New Folder";
+};
+var cloneTreeItem = (item) => ({
+	...item,
+	children: item.children?.map(cloneTreeItem)
+});
+var normalizeBookmarkGroups = (items, existingIds = collectTreeItemIds(items)) => items.map((item) => {
+	const children = item.children ? normalizeBookmarkGroups(item.children, existingIds) : void 0;
+	if (item.kind !== "bookmark" || !children?.length) return {
+		...item,
+		children
+	};
+	return {
+		id: getUniqueFolderGroupId(item.id, existingIds),
+		title: getFolderTitleFromMovedItems(children),
+		kind: "folder",
+		children: [{
+			...item,
+			children: void 0
+		}, ...children]
+	};
+});
+var findTreeItem = (items, itemId) => {
+	for (const item of items) {
+		if (item.id === itemId) return item;
+		const childItem = item.children ? findTreeItem(item.children, itemId) : void 0;
+		if (childItem) return childItem;
+	}
+};
+var collectFolderTargets = (items, excludedId, path = []) => items.reduce((acc, item) => {
+	if (item.kind !== "folder" || item.id === excludedId) return acc;
+	const nextPath = [...path, item.title];
+	acc.push({
+		id: item.id,
+		title: nextPath.join(" / "),
+		depth: nextPath.length - 1
+	});
+	acc.push(...collectFolderTargets(item.children ?? [], excludedId, nextPath));
+	return acc;
+}, []);
+var removeTreeItems = (items, itemIds, removedItems = []) => items.reduce((acc, item) => {
+	if (itemIds.has(item.id)) {
+		removedItems.push(cloneTreeItem(item));
+		return acc;
+	}
+	acc.push({
+		...item,
+		children: item.children ? removeTreeItems(item.children, itemIds, removedItems) : item.children
+	});
+	return acc;
+}, []);
+var insertTreeItemsRelativeToTarget = (items, targetId, movedItems, placement) => {
+	let inserted = false;
+	const nextItems = items.reduce((acc, item) => {
+		if (item.id === targetId) {
+			inserted = true;
+			if (placement === "before") acc.push(...movedItems, item);
+			else acc.push(item, ...movedItems);
+			return acc;
+		}
+		if (item.children?.length) {
+			const childResult = insertTreeItemsRelativeToTarget(item.children, targetId, movedItems, placement);
+			inserted = inserted || childResult.inserted;
+			acc.push({
+				...item,
+				children: childResult.items
+			});
+			return acc;
+		}
+		acc.push(item);
+		return acc;
+	}, []);
+	return {
+		inserted,
+		items: nextItems
+	};
+};
+var insertTreeItemsOnTarget = (items, targetId, movedItems, existingIds) => {
+	let expandedKey;
+	let inserted = false;
+	const nextItems = items.map((item) => {
+		if (item.id === targetId) {
+			inserted = true;
+			if (item.kind === "folder") {
+				expandedKey = item.id;
+				return {
+					...item,
+					children: [...item.children ?? [], ...movedItems]
+				};
+			}
+			const folderId = getUniqueFolderGroupId(item.id, existingIds);
+			expandedKey = folderId;
+			return {
+				id: folderId,
+				title: getFolderTitleFromMovedItems(movedItems),
+				kind: "folder",
+				children: [{
+					...item,
+					children: void 0
+				}, ...movedItems]
+			};
+		}
+		if (!item.children?.length) return item;
+		const childResult = insertTreeItemsOnTarget(item.children, targetId, movedItems, existingIds);
+		if (childResult.inserted) {
+			inserted = true;
+			expandedKey = childResult.expandedKey;
+		}
+		return {
+			...item,
+			children: childResult.items
+		};
+	});
+	return {
+		expandedKey,
+		inserted,
+		items: nextItems
+	};
+};
+var moveTreeItemToFolder = (items, movedId, targetFolderId) => {
+	if (targetFolderId && movedId === targetFolderId) return { items };
+	const movedItems = [];
+	const itemsWithoutMoved = removeTreeItems(items, new Set([movedId]), movedItems);
+	if (!movedItems.length) return { items };
+	if (!targetFolderId) return { items: normalizeBookmarkGroups([...itemsWithoutMoved, ...movedItems]) };
+	if (!findTreeItem(itemsWithoutMoved, targetFolderId)) return { items };
+	const result = insertTreeItemsOnTarget(itemsWithoutMoved, targetFolderId, movedItems, collectTreeItemIds([...itemsWithoutMoved, ...movedItems]));
+	return result.inserted ? {
+		expandedKey: result.expandedKey,
+		items: normalizeBookmarkGroups(result.items)
+	} : { items };
+};
+var moveBookmarkTreeItems = (items, movedIds, targetId, dropPosition) => {
+	if (!movedIds.length || movedIds.includes(targetId)) return { items };
+	const movedIdSet = new Set(movedIds);
+	if (!findTreeItem(items, targetId)) return { items };
+	const movedItems = [];
+	const itemsWithoutMoved = removeTreeItems(items, movedIdSet, movedItems);
+	if (!movedItems.length || !findTreeItem(itemsWithoutMoved, targetId)) return { items };
+	if (dropPosition === "on") {
+		const result = insertTreeItemsOnTarget(itemsWithoutMoved, targetId, movedItems, collectTreeItemIds([...itemsWithoutMoved, ...movedItems]));
+		return result.inserted ? {
+			expandedKey: result.expandedKey,
+			items: normalizeBookmarkGroups(result.items)
+		} : { items };
+	}
+	const result = insertTreeItemsRelativeToTarget(itemsWithoutMoved, targetId, movedItems, dropPosition === "after" ? "after" : "before");
+	return result.inserted ? { items: normalizeBookmarkGroups(result.items) } : { items };
+};
+var getBookmarkTreeSignature = (items) => items.map((item) => [
+	item.id,
+	item.kind,
+	item.title,
+	item.children ? getBookmarkTreeSignature(item.children) : ""
+].join(":")).join("|");
+//#endregion
+export { collectFolderTargets, collectTreeItemIds, createTreeItemId, dedupeTreeItems, getBookmarkTreeSignature, getExpandableBookmarkKeys, getUniqueTreeId, insertFolderItem, moveBookmarkTreeItems, moveTreeItemToFolder, removeTreeItem, updateTreeItem };

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

@@ -0,0 +1,5 @@
+import { type BookmarkContextMenuItemsProps } from './types';
+declare const BookmarkContextMenuItems: ({ contextTarget, folderTargets, onBookmarkRemove, onFolderEdit, onFolderDelete, onNewFolder, onBookmarkMove }: BookmarkContextMenuItemsProps) => import("react").JSX.Element;
+declare const BrowserContextMenuItems: () => import("react").JSX.Element;
+export { BookmarkContextMenuItems, BrowserContextMenuItems };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/context-menu/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,SAAS,CAAA;AA6D5D,QAAA,MAAM,wBAAwB,GAAI,+GAQ/B,6BAA6B,gCA0E/B,CAAA;AAED,QAAA,MAAM,uBAAuB,mCAsB5B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,CAAA"}

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

@@ -0,0 +1,147 @@
+import { AppIcon } from "../../../../app-icon/index.js";
+import { panelContextMenuClass } from "../../../info-panel/styles.js";
+import { ShortcutKey } from "../../../../shortcut-key/index.js";
+import { Label } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ContextMenu } from "@vezham/react-pro-v3";
+//#region src/lib/components/panel/header/bookmarks/context-menu/index.tsx
+var renderContextMenuLabel = (icon, label) => /* @__PURE__ */ jsxs(Label, {
+	className: "flex w-full items-center gap-2",
+	children: [/* @__PURE__ */ jsx(AppIcon, {
+		icon,
+		size: 16,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ jsx("span", { children: label })]
+});
+var FolderMenuItems = ({ item, onFolderEdit, onFolderDelete, onNewFolder }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "create-folder",
+		textValue: "Create Folder",
+		onPress: () => onNewFolder(item?.id),
+		children: renderContextMenuLabel("vx:folder-add", "Create Folder")
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "rename-folder",
+		textValue: "Rename Folder",
+		isDisabled: !item,
+		onPress: () => item && onFolderEdit(item),
+		children: renderContextMenuLabel("vx:pen", "Rename Folder")
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "change-color",
+		textValue: "Change Color",
+		isDisabled: !item,
+		onPress: () => item && onFolderEdit(item),
+		children: renderContextMenuLabel("vx:palette-round", "Change Color")
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "change-icon",
+		textValue: "Change Emoji/Icon",
+		isDisabled: !item,
+		onPress: () => item && onFolderEdit(item),
+		children: renderContextMenuLabel("vx:smile-circle", "Change Emoji/Icon")
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "delete-folder",
+		textValue: "Delete Folder",
+		variant: "danger",
+		isDisabled: !item,
+		onPress: () => item && onFolderDelete(item.id),
+		children: renderContextMenuLabel("vx:trash", "Delete Folder")
+	})
+] });
+var BookmarkContextMenuItems = ({ contextTarget, folderTargets, onBookmarkRemove, onFolderEdit, onFolderDelete, onNewFolder, onBookmarkMove }) => {
+	const renderMoveTargets = (itemId) => /* @__PURE__ */ jsxs(ContextMenu.SubmenuTrigger, { children: [/* @__PURE__ */ jsxs(ContextMenu.Item, {
+		id: "move",
+		textValue: "Move",
+		children: [renderContextMenuLabel("vx:folder-with-files", "Move"), /* @__PURE__ */ jsx(ContextMenu.SubmenuIndicator, {})]
+	}), /* @__PURE__ */ jsx(ContextMenu.Popover, {
+		className: panelContextMenuClass,
+		children: /* @__PURE__ */ jsxs(ContextMenu.Menu, { children: [/* @__PURE__ */ jsx(ContextMenu.Item, {
+			id: "move-root",
+			textValue: "Bookmarks",
+			onPress: () => onBookmarkMove(itemId),
+			children: /* @__PURE__ */ jsx(Label, { children: "Bookmarks" })
+		}), folderTargets.map((target) => /* @__PURE__ */ jsx(ContextMenu.Item, {
+			id: `move-${target.id}`,
+			textValue: target.title,
+			onPress: () => onBookmarkMove(itemId, target.id),
+			children: /* @__PURE__ */ jsx(Label, {
+				className: "block truncate",
+				style: { paddingInlineStart: target.depth * 10 },
+				children: target.title
+			})
+		}, target.id))] })
+	})] });
+	if (contextTarget.type === "folder") return /* @__PURE__ */ jsx(FolderMenuItems, {
+		item: contextTarget.item,
+		onFolderEdit,
+		onFolderDelete,
+		onNewFolder
+	});
+	if (contextTarget.type === "bookmark") return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ContextMenu.Item, {
+			id: "create-folder",
+			textValue: "Create Folder",
+			onPress: () => onNewFolder(),
+			children: renderContextMenuLabel("vx:folder-add", "Create Folder")
+		}),
+		/* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+		renderMoveTargets(contextTarget.item.id),
+		/* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+		/* @__PURE__ */ jsx(ContextMenu.Item, {
+			id: "delete-bookmark",
+			textValue: "Delete",
+			variant: "danger",
+			onPress: () => onBookmarkRemove(contextTarget.item.id),
+			children: renderContextMenuLabel("vx:trash", "Delete")
+		})
+	] });
+	return /* @__PURE__ */ jsx(FolderMenuItems, {
+		onFolderEdit,
+		onFolderDelete,
+		onNewFolder
+	});
+};
+var BrowserContextMenuItems = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsxs(ContextMenu.Item, {
+		id: "back",
+		textValue: "Back",
+		children: [/* @__PURE__ */ jsx(Label, { children: "Back" }), /* @__PURE__ */ jsx(ShortcutKey, {
+			className: "ms-auto",
+			shortcut: "⌘ ["
+		})]
+	}),
+	/* @__PURE__ */ jsxs(ContextMenu.Item, {
+		isDisabled: true,
+		id: "forward",
+		textValue: "Forward",
+		children: [/* @__PURE__ */ jsx(Label, { children: "Forward" }), /* @__PURE__ */ jsx(ShortcutKey, {
+			className: "ms-auto",
+			shortcut: "⌘ ]"
+		})]
+	}),
+	/* @__PURE__ */ jsxs(ContextMenu.Item, {
+		id: "reload",
+		textValue: "Reload",
+		children: [/* @__PURE__ */ jsx(Label, { children: "Reload" }), /* @__PURE__ */ jsx(ShortcutKey, {
+			className: "ms-auto",
+			shortcut: "⌘ R"
+		})]
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "view-source",
+		textValue: "View Page Source",
+		children: /* @__PURE__ */ jsx(Label, { children: "View Page Source" })
+	}),
+	/* @__PURE__ */ jsx(ContextMenu.Item, {
+		id: "inspect",
+		textValue: "Inspect",
+		children: /* @__PURE__ */ jsx(Label, { children: "Inspect" })
+	})
+] });
+//#endregion
+export { BookmarkContextMenuItems, BrowserContextMenuItems };

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

@@ -0,0 +1,25 @@
+import { type BookmarkTreeItem } from '../types';
+export type BookmarkContextTarget = {
+    type: 'folder';
+    item: BookmarkTreeItem;
+} | {
+    type: 'bookmark';
+    item: BookmarkTreeItem;
+} | {
+    type: 'area';
+};
+export interface FolderTarget {
+    id: string;
+    title: string;
+    depth: number;
+}
+export interface BookmarkContextMenuItemsProps {
+    contextTarget: BookmarkContextTarget;
+    folderTargets: FolderTarget[];
+    onBookmarkRemove: (id: string) => void;
+    onFolderEdit: (item: BookmarkTreeItem) => void;
+    onFolderDelete: (id: string) => void;
+    onNewFolder: (parentId?: string) => void;
+    onBookmarkMove: (id: string, targetFolderId?: string) => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/context-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhD,MAAM,MAAM,qBAAqB,GAC7B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1C;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC5C;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,6BAA6B;IAC5C,aAAa,EAAE,qBAAqB,CAAA;IACpC,aAAa,EAAE,YAAY,EAAE,CAAA;IAC7B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC9C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9D"}

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

@@ -0,0 +1,2 @@
+export * from '../../../../store/useBookmarks/data';
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/data.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAA"}

package/dist/lib/components/panel/header/bookmarks/empty-state.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    title: string;
+    description: string;
+    className?: string;
+};
+export declare const BookmarkSectionEmptyState: ({ title, description, className }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/lib/components/panel/header/bookmarks/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/empty-state.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,mCAIvC,KAAK,gCASP,CAAA"}

package/dist/lib/components/panel/header/bookmarks/empty-state.js

@@ -0,0 +1,15 @@
+import { cn } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/panel/header/bookmarks/empty-state.tsx
+var BookmarkSectionEmptyState = ({ title, description, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("text-muted flex min-h-20 w-full flex-col items-center justify-center gap-1 px-4 py-4 text-center not-italic", className),
+	children: [/* @__PURE__ */ jsx("p", {
+		className: "text-xs font-medium",
+		children: title
+	}), /* @__PURE__ */ jsx("p", {
+		className: "max-w-56 text-[11px] leading-4",
+		children: description
+	})]
+});
+//#endregion
+export { BookmarkSectionEmptyState };

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

@@ -0,0 +1,2 @@
+export * from '../../../../../store/useBookmarks/data';
+//# sourceMappingURL=data.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/favorites/data.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAA"}

package/dist/lib/components/panel/header/bookmarks/favorites/grid-list.d.ts

@@ -0,0 +1,4 @@
+import { type FavoriteGridListProps } from './types';
+declare const FavoriteGridList: ({ items, onAction, onRemove, onReorder, dragAndDropHooks, classNames, ...variantProps }: FavoriteGridListProps) => import("react").JSX.Element;
+export { FavoriteGridList };
+//# sourceMappingURL=grid-list.d.ts.map

package/dist/lib/components/panel/header/bookmarks/favorites/grid-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-list.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/favorites/grid-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAGpD,QAAA,MAAM,gBAAgB,GAAI,yFAQvB,qBAAqB,gCAuFvB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/lib/components/panel/header/bookmarks/favorites/grid-list.js

@@ -0,0 +1,65 @@
+import { sampleFavorites } from "../../../../../store/useBookmarks/data.js";
+import { BookmarkSectionEmptyState } from "../empty-state.js";
+import { ShortcutContextMenu } from "../shortcut-context-menu.js";
+import { tva } from "./variant.js";
+import { useMemo } from "react";
+import { Avatar, cn } from "@vezham/react-v3";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as Button$1, GridList, GridListItem } from "react-aria-components";
+//#region src/lib/components/panel/header/bookmarks/favorites/grid-list.tsx
+var FavoriteGridList = ({ items = sampleFavorites, onAction, onRemove, onReorder, dragAndDropHooks, classNames, ...variantProps }) => {
+	const slots = tva(variantProps);
+	const visibleItems = useMemo(() => items.length > 12 ? items.slice(0, 12) : items, [items]);
+	return /* @__PURE__ */ jsx(ShortcutContextMenu, {
+		items,
+		kind: "favorite",
+		onRemove,
+		children: /* @__PURE__ */ jsx(GridList, {
+			"aria-label": "Favorites",
+			className: slots.grid({ class: classNames?.grid }),
+			dragAndDropHooks,
+			items: visibleItems,
+			onAction: (key) => {
+				const item = items.find((item) => item.id === key);
+				if (item) onAction?.(item);
+			},
+			layout: "grid",
+			renderEmptyState: () => /* @__PURE__ */ jsx(BookmarkSectionEmptyState, {
+				title: "No favorites yet.",
+				description: "Keep your most-used items here.",
+				className: slots.emptyState({ class: classNames?.emptyState })
+			}),
+			selectionMode: "multiple",
+			children: (item) => /* @__PURE__ */ jsx(GridListItem, {
+				className: ({ isDragging, isDropTarget }) => cn(slots.item({ class: classNames?.item }), isDragging && slots.itemDragging({ class: classNames?.itemDragging }), isDropTarget && slots.itemDropTarget({ class: classNames?.itemDropTarget })) ?? "",
+				"data-shortcut-id": item.id,
+				id: item.id,
+				textValue: item.name,
+				children: ({ allowsDragging }) => /* @__PURE__ */ jsxs(Fragment, { children: [allowsDragging && /* @__PURE__ */ jsx(Button$1, {
+					"aria-label": `Drag ${item.name}`,
+					className: slots.dragButton({ class: classNames?.dragButton }),
+					slot: "drag"
+				}), /* @__PURE__ */ jsx("div", {
+					"data-slot": "favorite-tile-content",
+					title: item.name,
+					className: slots.avatarContainer({ class: classNames?.avatarContainer }),
+					children: /* @__PURE__ */ jsxs(Avatar, {
+						className: slots.avatar({ class: classNames?.avatar }),
+						size: "sm",
+						children: [(item.avatar || item.backgroundImage) && /* @__PURE__ */ jsx(Avatar.Image, {
+							draggable: false,
+							className: "h-full w-full object-cover",
+							src: item.avatar || item.backgroundImage,
+							alt: ""
+						}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+							className: slots.avatarFallback({ class: classNames?.avatarFallback }),
+							children: item.name.charAt(0)
+						})]
+					})
+				})] })
+			})
+		})
+	});
+};
+//#endregion
+export { FavoriteGridList };

package/dist/lib/components/panel/header/bookmarks/favorites/index.d.ts

@@ -0,0 +1,5 @@
+import { type FavoriteGridListProps } from './types';
+type Props = Omit<FavoriteGridListProps, 'dragAndDropHooks'>;
+declare const ReorderableGridList: (props: Props) => import("react").JSX.Element;
+export { ReorderableGridList };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/favorites/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEpD,KAAK,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,CAAA;AAwB5D,QAAA,MAAM,mBAAmB,GAAI,OAAO,KAAK,gCA6DxC,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

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

@@ -0,0 +1,76 @@
+import { sampleFavorites } from "../../../../../store/useBookmarks/data.js";
+import { FavoriteGridList } from "./grid-list.js";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDragAndDrop } from "react-aria-components";
+//#region src/lib/components/panel/header/bookmarks/favorites/index.tsx
+var reorder = (items, keys, target) => {
+	if (keys.has(target.key) || target.dropPosition === "on") return items;
+	const moved = items.filter((item) => keys.has(item.id));
+	const remaining = items.filter((item) => !keys.has(item.id));
+	const index = remaining.findIndex((item) => item.id === target.key);
+	if (index < 0 || moved.length === 0) return items;
+	remaining.splice(index + (target.dropPosition === "after" ? 1 : 0), 0, ...moved);
+	return remaining.every((item, index) => item.id === items[index].id) ? items : remaining;
+};
+var ReorderableGridList = (props) => {
+	const [internalItems, setInternalItems] = useState(props.items ?? sampleFavorites);
+	const controlled = Boolean(props.items && props.onReorder);
+	const items = controlled ? props.items ?? internalItems : internalItems;
+	const [draft, setDraft] = useState(null);
+	const drag = useRef(null);
+	const displayedItems = draft?.source === items ? draft.items : items;
+	const { dragAndDropHooks } = useDragAndDrop({
+		getAllowedDropOperations: () => ["move"],
+		getItems(_keys, items) {
+			return items.map((item) => ({
+				"text/plain": item.name,
+				favorite: JSON.stringify(item)
+			}));
+		},
+		onDragStart(event) {
+			drag.current = {
+				source: items,
+				items,
+				keys: event.keys,
+				committed: false
+			};
+			setDraft(null);
+		},
+		onDropEnter(event) {
+			const current = drag.current;
+			if (!current || event.target.type !== "item") return;
+			const next = reorder(current.items, current.keys, event.target);
+			if (next === current.items) return;
+			current.items = next;
+			setDraft({
+				source: current.source,
+				items: next
+			});
+		},
+		onReorder(event) {
+			const current = drag.current;
+			const next = reorder(current?.items ?? items, event.keys, event.target);
+			setDraft({
+				source: current?.source ?? items,
+				items: next
+			});
+			if (current) current.committed = true;
+			if (!controlled) setInternalItems(next);
+			props.onReorder?.(next);
+		},
+		onDragEnd(event) {
+			if (event.dropOperation !== "move" || !event.isInternal) {
+				setDraft(null);
+				drag.current = null;
+			} else if (drag.current?.committed) drag.current = null;
+		}
+	});
+	return /* @__PURE__ */ jsx(FavoriteGridList, {
+		...props,
+		items: displayedItems,
+		dragAndDropHooks
+	});
+};
+//#endregion
+export { ReorderableGridList };

package/dist/lib/components/panel/header/bookmarks/favorites/types.d.ts

@@ -0,0 +1,12 @@
+import { type DragAndDropHooks } from 'react-aria-components';
+import type { FavoriteItem } from '../../../../../store/useBookmarks/types';
+import { type tvProps, type tvSlots } from './variant';
+export interface FavoriteGridListProps extends tvProps {
+    items?: FavoriteItem[];
+    onAction?: (item: FavoriteItem) => void;
+    onRemove?: (id: string) => void;
+    onReorder?: (items: FavoriteItem[]) => void;
+    dragAndDropHooks?: DragAndDropHooks<FavoriteItem>;
+    classNames?: Partial<Record<tvSlots, string>>;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/components/panel/header/bookmarks/favorites/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAA;AAC3E,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,WAAW,CAAA;AAEtD,MAAM,WAAW,qBAAsB,SAAQ,OAAO;IACpD,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAA;IAC3C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAA;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;CAC9C"}