@tulip-systems/drive 0.8.1 → 0.8.2

package/dist/client.d.mts

@@ -0,0 +1,5 @@
+import { DriveGrid, DriveGridBottombar, DriveGridEmpty, DriveGridEmptyProps, DriveGridLoading, DriveGridLoadingProps, DriveGridProps } from "./components/grid.client.mjs";
+import { DriveGridCard, DriveGridCardSkeleton, DriveGridFileCard, DriveGridFolderCard } from "./components/grid-card.client.mjs";
+import { DriveSelectionContextValue, DriveSelectionProvider, useDriveSelectionContext } from "./components/selection.client.mjs";
+import { DriveViewContextValue, DriveViewMode, DriveViewProvider, DriveViewProviderProps, useDriveViewContext } from "./components/view.client.mjs";
+export { DriveGrid, DriveGridBottombar, DriveGridCard, DriveGridCardSkeleton, DriveGridEmpty, DriveGridEmptyProps, DriveGridFileCard, DriveGridFolderCard, DriveGridLoading, DriveGridLoadingProps, DriveGridProps, DriveSelectionContextValue, DriveSelectionProvider, DriveViewContextValue, DriveViewMode, DriveViewProvider, DriveViewProviderProps, useDriveSelectionContext, useDriveViewContext };

package/dist/client.mjs

@@ -0,0 +1,6 @@
+import { DriveSelectionProvider, useDriveSelectionContext } from "./components/selection.client.mjs";
+import { DriveGridCard, DriveGridCardSkeleton, DriveGridFileCard, DriveGridFolderCard } from "./components/grid-card.client.mjs";
+import { DriveGrid, DriveGridBottombar, DriveGridEmpty, DriveGridLoading } from "./components/grid.client.mjs";
+import { DriveViewProvider, useDriveViewContext } from "./components/view.client.mjs";
+
+export { DriveGrid, DriveGridBottombar, DriveGridCard, DriveGridCardSkeleton, DriveGridEmpty, DriveGridFileCard, DriveGridFolderCard, DriveGridLoading, DriveSelectionProvider, DriveViewProvider, useDriveSelectionContext, useDriveViewContext };

package/dist/components/content.d.mts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/content.d.ts
+/**
+ * Drive Content
+ */
+declare function DriveContent({
+  className,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveContent };
+//# sourceMappingURL=content.d.mts.map

package/dist/components/content.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.mts","names":[],"sources":["../../src/components/content.tsx"],"mappings":";;;;;;;iBAMgB,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/content.mjs

@@ -0,0 +1,18 @@
+import { cn } from "@tulip-systems/core/lib";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content.tsx
+/**
+* Drive Content
+*/
+function DriveContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("space-y-6", className),
+		children: props.children
+	});
+}
+
+//#endregion
+export { DriveContent };
+//# sourceMappingURL=content.mjs.map

package/dist/components/content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.mjs","names":[],"sources":["../../src/components/content.tsx"],"sourcesContent":["import { cn } from \"@tulip-systems/core/lib\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Drive Content\n */\nexport function DriveContent({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} className={cn(\"space-y-6\", className)}>\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAgC;AAC3E,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,aAAa,UAAU;YAClD,MAAM;GACH"}

package/dist/components/context.client.d.mts

@@ -0,0 +1,14 @@
+import { Permission } from "@tulip-systems/core/auth";
+
+//#region src/components/context.client.d.ts
+/**
+ * DriveContext
+ */
+type DriveContextValue = {
+  namespace: string;
+  permission?: Permission;
+  meta?: object;
+};
+//#endregion
+export { DriveContextValue };
+//# sourceMappingURL=context.client.d.mts.map

package/dist/components/context.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.client.d.mts","names":[],"sources":["../../src/components/context.client.tsx"],"mappings":";;;;;AAOA;KAAY,iBAAA;EACV,SAAA;EACA,UAAA,GAAa,UAAA;EACb,IAAA;AAAA"}

package/dist/components/dnd.client.d.mts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+import "react/jsx-runtime";
+
+//#region src/components/dnd.client.d.ts
+/**
+ * DriveViewProvider
+ */
+type DriveDragDropProviderProps = PropsWithChildren<{
+  disabled?: boolean;
+  onMove?: (input: {
+    id: string;
+    parentId: string | null;
+  }) => void;
+}>;
+//#endregion
+export { DriveDragDropProviderProps };
+//# sourceMappingURL=dnd.client.d.mts.map

package/dist/components/dnd.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd.client.d.mts","names":[],"sources":["../../src/components/dnd.client.tsx"],"mappings":";;;;;;;KAUY,0BAAA,GAA6B,iBAAA;EACvC,QAAA;EACA,MAAA,IAAU,KAAA;IAAS,EAAA;IAAY,QAAA;EAAA;AAAA"}

package/dist/components/dnd.client.mjs

@@ -0,0 +1,30 @@
+"use client";
+
+import { DragDropProvider } from "@dnd-kit/react";
+import { jsx } from "react/jsx-runtime";
+import { PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
+
+//#region src/components/dnd.client.tsx
+function DriveDragDropProvider(props) {
+	return /* @__PURE__ */ jsx(DragDropProvider, {
+		sensors: (defaults) => [...defaults, PointerSensor.configure({ activationConstraints: [new PointerActivationConstraints.Distance({ value: 35 })] })],
+		onDragEnd: (event) => {
+			if (props.disabled) return;
+			const { operation, canceled } = event;
+			const { source, target } = operation;
+			if (!source || !target || canceled) return;
+			const id = source.id.toString();
+			const parentId = target.id.toString() === "drive" ? null : target.id.toString();
+			if (id === parentId) return;
+			props.onMove?.({
+				id,
+				parentId
+			});
+		},
+		children: props.children
+	});
+}
+
+//#endregion
+export { DriveDragDropProvider };
+//# sourceMappingURL=dnd.client.mjs.map

package/dist/components/dnd.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnd.client.mjs","names":[],"sources":["../../src/components/dnd.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { PointerActivationConstraints, PointerSensor } from \"@dnd-kit/dom\";\nimport { DragDropProvider } from \"@dnd-kit/react\";\nimport type { PropsWithChildren } from \"react\";\n\n/**\n * DriveViewProvider\n */\n\nexport type DriveDragDropProviderProps = PropsWithChildren<{\n  disabled?: boolean;\n  onMove?: (input: { id: string; parentId: string | null }) => void;\n}>;\n\nexport function DriveDragDropProvider(props: DriveDragDropProviderProps) {\n  return (\n    <DragDropProvider\n      sensors={(defaults) => [\n        ...defaults,\n        PointerSensor.configure({\n          activationConstraints: [\n            // Start dragging after moving 35 pixels to prevent accidental drags when clicking\n            new PointerActivationConstraints.Distance({ value: 35 }),\n          ],\n        }),\n      ]}\n      onDragEnd={(event) => {\n        if (props.disabled) return;\n\n        const { operation, canceled } = event;\n        const { source, target } = operation;\n\n        if (!source || !target || canceled) return;\n\n        const id = source.id.toString();\n        const parentId = target.id.toString() === \"drive\" ? null : target.id.toString();\n\n        if (id === parentId) return;\n\n        props.onMove?.({ id, parentId });\n      }}\n    >\n      {props.children}\n    </DragDropProvider>\n  );\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,sBAAsB,OAAmC;AACvE,QACE,oBAAC;EACC,UAAU,aAAa,CACrB,GAAG,UACH,cAAc,UAAU,EACtB,uBAAuB,CAErB,IAAI,6BAA6B,SAAS,EAAE,OAAO,IAAI,CAAC,CACzD,EACF,CAAC,CACH;EACD,YAAY,UAAU;AACpB,OAAI,MAAM,SAAU;GAEpB,MAAM,EAAE,WAAW,aAAa;GAChC,MAAM,EAAE,QAAQ,WAAW;AAE3B,OAAI,CAAC,UAAU,CAAC,UAAU,SAAU;GAEpC,MAAM,KAAK,OAAO,GAAG,UAAU;GAC/B,MAAM,WAAW,OAAO,GAAG,UAAU,KAAK,UAAU,OAAO,OAAO,GAAG,UAAU;AAE/E,OAAI,OAAO,SAAU;AAErB,SAAM,SAAS;IAAE;IAAI;IAAU,CAAC;;YAGjC,MAAM;GACU"}

package/dist/components/grid-card.client.d.mts

@@ -0,0 +1,43 @@
+import { DriveNode } from "../lib/dto.mjs";
+import { ComponentProps } from "react";
+import { ImageLoaderProps } from "next/image";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CommandDef } from "@tulip-systems/core/commands";
+
+//#region src/components/grid-card.client.d.ts
+/**
+ * Drive Grid Card
+ */
+type DriveGridCardProps<TData extends DriveNode> = ComponentProps<"div"> & {
+  node: TData;
+  commands?: CommandDef<TData>[];
+  imageLoader?: (props: ImageLoaderProps) => string;
+};
+declare function DriveGridCard<TData extends DriveNode>(props: DriveGridCardProps<TData>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Folder card
+ */
+declare function DriveGridFolderCard<TData extends DriveNode>({
+  node,
+  commands,
+  onDoubleClick,
+  className,
+  ...props
+}: DriveGridCardProps<TData>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * File card
+ */
+declare function DriveGridFileCard<TData extends DriveNode>({
+  node,
+  commands,
+  imageLoader,
+  className,
+  ...props
+}: DriveGridCardProps<TData>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * Card Skeleton
+ */
+declare function DriveGridCardSkeleton(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveGridCard, DriveGridCardSkeleton, DriveGridFileCard, DriveGridFolderCard };
+//# sourceMappingURL=grid-card.client.d.mts.map

package/dist/components/grid-card.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-card.client.d.mts","names":[],"sources":["../../src/components/grid-card.client.tsx"],"mappings":";;;;;;;;;;KA6BK,kBAAA,eAAiC,SAAA,IAAa,cAAA;EACjD,IAAA,EAAM,KAAA;EACN,QAAA,GAAW,UAAA,CAAW,KAAA;EACtB,WAAA,IAAe,KAAA,EAAO,gBAAA;AAAA;AAAA,iBAGR,aAAA,eAA4B,SAAA,CAAA,CAAW,KAAA,EAAO,kBAAA,CAAmB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAmBvE,mBAAA,eAAkC,SAAA,CAAA,CAAA;EAChD,IAAA;EACA,QAAA;EACA,aAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,CAAmB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAkFZ,iBAAA,eAAgC,SAAA,CAAA,CAAA;EAC9C,IAAA;EACA,QAAA;EACA,WAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,kBAAA,CAAmB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAmGZ,qBAAA,CAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/grid-card.client.mjs

@@ -0,0 +1,173 @@
+"use client";
+
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "../config/types.mjs";
+import { useDriveSelectionContext } from "./selection.client.mjs";
+import { Card, CardContent, CardHeader, CardTitle, Skeleton, findStatus } from "@tulip-systems/core/components";
+import { createElement } from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import { ContextCommandMenu, ContextCommandMenuContent, ContextCommandMenuTrigger, DropdownCommandMenu } from "@tulip-systems/core/commands/client";
+import { FolderIcon } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/grid-card.client.tsx
+function DriveGridCard(props) {
+	if (props.node.availability === "pending") return /* @__PURE__ */ jsx(DriveGridCardSkeleton, { ...props });
+	if (props.node.type === "folder") return /* @__PURE__ */ jsx(DriveGridFolderCard, { ...props });
+	if (props.node.type === "file") return /* @__PURE__ */ jsx(DriveGridFileCard, { ...props });
+	return null;
+}
+/**
+* Folder card
+*/
+function DriveGridFolderCard({ node, commands, onDoubleClick, className, ...props }) {
+	const { id } = node;
+	const router = useRouter();
+	const { selection, selectionConditions } = useDriveSelectionContext();
+	const droppable = useDroppable({ id: node.id });
+	const draggable = useDraggable({ id: node.id });
+	if (node.hidden) return null;
+	return /* @__PURE__ */ jsxs(ContextCommandMenu, { children: [/* @__PURE__ */ jsx(ContextCommandMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ createElement(Card, {
+			...props,
+			key: id,
+			ref: draggable.ref,
+			"data-selected": selection?.rowSelection?.[id],
+			"data-dragging": draggable.isDragging,
+			className: "group @container relative flex max-h-48 max-w-full cursor-pointer flex-col items-center gap-2 overflow-hidden bg-transparent p-2 hover:bg-muted/70 active:bg-muted data-[selected=true]:bg-primary/30 data-[dragging=true]:opacity-50",
+			onClick: () => {
+				const conditions = selectionConditions?.(node);
+				if (conditions !== void 0) {
+					if (!(Array.isArray(conditions) ? conditions.some((condition) => condition) : conditions)) return;
+				}
+				if (!selection?.rowSelection?.[id]) selection?.setRowSelection?.((old) => ({
+					...old,
+					[id]: true
+				}));
+				else selection?.setRowSelection?.((old) => {
+					const newSelection = { ...old };
+					delete newSelection[id];
+					return newSelection;
+				});
+			},
+			onDoubleClick: () => router.push(`?parentId=${id}`)
+		}, /* @__PURE__ */ jsx("div", {
+			ref: droppable.ref,
+			"data-over": droppable.isDropTarget && !draggable.isDragging,
+			className: "absolute inset-0 -z-10 data-[over=true]:bg-primary/35"
+		}), /* @__PURE__ */ jsxs(CardHeader, {
+			className: "flex w-full flex-row items-center justify-between gap-2.5 p-0 px-1.5",
+			children: [
+				/* @__PURE__ */ jsx(FolderIcon, { className: "my-1.5 size-4 fill-foreground" }),
+				/* @__PURE__ */ jsx(CardTitle, {
+					className: "line-clamp-2 w-full break-all text-xs leading-[1.2]",
+					title: node.name,
+					children: node.name
+				}),
+				commands && /* @__PURE__ */ jsx(DropdownCommandMenu, {
+					data: node,
+					commands
+				})
+			]
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "h-48 w-full overflow-hidden rounded-lg bg-background p-0 group-hover:bg-background",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full items-center justify-center",
+				children: /* @__PURE__ */ jsx(FolderIcon, { className: "size-12 fill-foreground" })
+			})
+		}))
+	}), commands && /* @__PURE__ */ jsx(ContextCommandMenuContent, {
+		data: node,
+		commands
+	})] });
+}
+/**
+* File card
+*/
+function DriveGridFileCard({ node, commands, imageLoader, className, ...props }) {
+	const { id } = node;
+	const { ref, isDragging } = useDraggable({ id });
+	const { selection, selectionConditions } = useDriveSelectionContext();
+	const Icon = findStatus(nodeSubtypeConfig, node.subtype)?.icon;
+	const fileUrl = node.links.view ?? node.links.download;
+	const imageUrl = node.links.thumbnail ?? node.links.preview;
+	if (node.hidden) return null;
+	return /* @__PURE__ */ jsxs(ContextCommandMenu, { children: [/* @__PURE__ */ jsx(ContextCommandMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ createElement(Card, {
+			...props,
+			key: id,
+			ref,
+			"data-selected": selection?.rowSelection?.[id],
+			"data-dragging": isDragging,
+			className: "@container flex max-h-48 max-w-full cursor-pointer flex-col items-center gap-2 overflow-hidden p-2 hover:bg-muted/70 active:bg-muted data-[selected=true]:bg-primary/30 data-[dragging=true]:opacity-50",
+			onClick: () => {
+				const conditions = selectionConditions?.(node);
+				if (conditions !== void 0) {
+					if (!(Array.isArray(conditions) ? conditions.some((condition) => condition) : conditions)) return;
+				}
+				if (!selection?.rowSelection?.[id]) selection?.setRowSelection?.((old) => ({
+					...old,
+					[id]: true
+				}));
+				else selection?.setRowSelection?.((old) => {
+					const newSelection = { ...old };
+					delete newSelection[id];
+					return newSelection;
+				});
+			},
+			onDoubleClick: () => window.open(fileUrl ?? "", "_blank", "noopener,noreferrer")
+		}, /* @__PURE__ */ jsxs(CardHeader, {
+			className: "flex w-full flex-row items-center justify-between gap-2 p-0 px-1.5",
+			children: [
+				Icon && /* @__PURE__ */ jsx(Icon, { className: nodeSubtypeVariants({
+					status: node.subtype,
+					className: "my-1.5 size-4"
+				}) }),
+				/* @__PURE__ */ jsx(CardTitle, {
+					className: "line-clamp-2 w-full break-all text-xs leading-[1.2]",
+					title: node.name,
+					children: node.name
+				}),
+				commands && /* @__PURE__ */ jsx(DropdownCommandMenu, {
+					data: node,
+					commands
+				})
+			]
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "h-48 w-full overflow-hidden rounded-lg bg-background p-0",
+			children: node.subtype === "image" ? /* @__PURE__ */ jsx(Image, {
+				src: imageUrl ?? fileUrl ?? "",
+				alt: node.name,
+				width: 200,
+				height: 200,
+				loader: imageLoader,
+				className: "h-full w-full object-cover"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full items-center justify-center",
+				children: Icon && /* @__PURE__ */ jsx(Icon, { className: nodeSubtypeVariants({
+					status: node.subtype,
+					className: "size-12"
+				}) })
+			})
+		}))
+	}), commands && /* @__PURE__ */ jsx(ContextCommandMenuContent, {
+		data: node,
+		commands
+	})] });
+}
+/**
+* Card Skeleton
+*/
+function DriveGridCardSkeleton() {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "flex max-h-52 cursor-pointer flex-col items-center gap-3 overflow-hidden bg-muted/70 p-3",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-7" }), /* @__PURE__ */ jsx(CardContent, { className: "h-52 w-full overflow-hidden rounded-lg bg-background p-0" })]
+	});
+}
+
+//#endregion
+export { DriveGridCard, DriveGridCardSkeleton, DriveGridFileCard, DriveGridFolderCard };
+//# sourceMappingURL=grid-card.client.mjs.map

package/dist/components/grid-card.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-card.client.mjs","names":[],"sources":["../../src/components/grid-card.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDraggable, useDroppable } from \"@dnd-kit/react\";\nimport type { CommandDef } from \"@tulip-systems/core/commands\";\nimport {\n  ContextCommandMenu,\n  ContextCommandMenuContent,\n  ContextCommandMenuTrigger,\n  DropdownCommandMenu,\n} from \"@tulip-systems/core/commands/client\";\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  findStatus,\n  Skeleton,\n} from \"@tulip-systems/core/components\";\nimport { FolderIcon } from \"lucide-react\";\nimport Image, { type ImageLoaderProps } from \"next/image\";\nimport { useRouter } from \"next/navigation\";\nimport type { ComponentProps } from \"react\";\nimport { nodeSubtypeConfig, nodeSubtypeVariants } from \"@/config/types\";\nimport type { DriveNode } from \"@/lib/dto\";\nimport { useDriveSelectionContext } from \"./selection.client\";\n\n/**\n * Drive Grid Card\n */\ntype DriveGridCardProps<TData extends DriveNode> = ComponentProps<\"div\"> & {\n  node: TData;\n  commands?: CommandDef<TData>[];\n  imageLoader?: (props: ImageLoaderProps) => string;\n};\n\nexport function DriveGridCard<TData extends DriveNode>(props: DriveGridCardProps<TData>) {\n  if (props.node.availability === \"pending\") {\n    return <DriveGridCardSkeleton {...props} />;\n  }\n\n  if (props.node.type === \"folder\") {\n    return <DriveGridFolderCard {...props} />;\n  }\n\n  if (props.node.type === \"file\") {\n    return <DriveGridFileCard {...props} />;\n  }\n\n  return null;\n}\n\n/**\n * Folder card\n */\nexport function DriveGridFolderCard<TData extends DriveNode>({\n  node,\n  commands,\n  onDoubleClick,\n  className,\n  ...props\n}: DriveGridCardProps<TData>) {\n  const { id } = node;\n\n  const router = useRouter();\n\n  const { selection, selectionConditions } = useDriveSelectionContext();\n\n  const droppable = useDroppable({ id: node.id });\n  const draggable = useDraggable({ id: node.id });\n\n  if (node.hidden) return null;\n\n  return (\n    <ContextCommandMenu>\n      <ContextCommandMenuTrigger asChild>\n        <Card\n          {...props}\n          key={id}\n          ref={draggable.ref}\n          data-selected={selection?.rowSelection?.[id]}\n          data-dragging={draggable.isDragging}\n          className=\"group @container relative flex max-h-48 max-w-full cursor-pointer flex-col items-center gap-2 overflow-hidden bg-transparent p-2 hover:bg-muted/70 active:bg-muted data-[selected=true]:bg-primary/30 data-[dragging=true]:opacity-50\"\n          onClick={() => {\n            const conditions = selectionConditions?.(node);\n\n            if (conditions !== undefined) {\n              const canSelect = Array.isArray(conditions)\n                ? conditions.some((condition) => condition)\n                : conditions;\n\n              if (!canSelect) return;\n            }\n\n            const isSelected = selection?.rowSelection?.[id];\n\n            if (!isSelected) {\n              selection?.setRowSelection?.((old) => ({ ...old, [id]: true }));\n            } else {\n              selection?.setRowSelection?.((old) => {\n                const newSelection = { ...old };\n                delete newSelection[id];\n                return newSelection;\n              });\n            }\n          }}\n          onDoubleClick={() => router.push(`?parentId=${id}`)}\n        >\n          <div\n            ref={droppable.ref}\n            data-over={droppable.isDropTarget && !draggable.isDragging}\n            className=\"absolute inset-0 -z-10 data-[over=true]:bg-primary/35\"\n          />\n\n          <CardHeader className=\"flex w-full flex-row items-center justify-between gap-2.5 p-0 px-1.5\">\n            <FolderIcon className=\"my-1.5 size-4 fill-foreground\" />\n\n            <CardTitle\n              className=\"line-clamp-2 w-full break-all text-xs leading-[1.2]\"\n              title={node.name}\n            >\n              {node.name}\n            </CardTitle>\n\n            {commands && <DropdownCommandMenu data={node} commands={commands} />}\n          </CardHeader>\n\n          <CardContent className=\"h-48 w-full overflow-hidden rounded-lg bg-background p-0 group-hover:bg-background\">\n            <div className=\"flex h-full w-full items-center justify-center\">\n              <FolderIcon className=\"size-12 fill-foreground\" />\n            </div>\n          </CardContent>\n        </Card>\n      </ContextCommandMenuTrigger>\n\n      {commands && <ContextCommandMenuContent data={node} commands={commands} />}\n    </ContextCommandMenu>\n  );\n}\n\n/**\n * File card\n */\nexport function DriveGridFileCard<TData extends DriveNode>({\n  node,\n  commands,\n  imageLoader,\n  className,\n  ...props\n}: DriveGridCardProps<TData>) {\n  const { id } = node;\n\n  const { ref, isDragging } = useDraggable({ id });\n  const { selection, selectionConditions } = useDriveSelectionContext();\n\n  const subtype = findStatus(nodeSubtypeConfig, node.subtype);\n  const Icon = subtype?.icon;\n  const fileUrl = node.links.view ?? node.links.download;\n  const imageUrl = node.links.thumbnail ?? node.links.preview;\n  if (node.hidden) return null;\n\n  return (\n    <ContextCommandMenu>\n      <ContextCommandMenuTrigger asChild>\n        <Card\n          {...props}\n          key={id}\n          ref={ref}\n          data-selected={selection?.rowSelection?.[id]}\n          data-dragging={isDragging}\n          className=\"@container flex max-h-48 max-w-full cursor-pointer flex-col items-center gap-2 overflow-hidden p-2 hover:bg-muted/70 active:bg-muted data-[selected=true]:bg-primary/30 data-[dragging=true]:opacity-50\"\n          onClick={() => {\n            const conditions = selectionConditions?.(node);\n\n            if (conditions !== undefined) {\n              const canSelect = Array.isArray(conditions)\n                ? conditions.some((condition) => condition)\n                : conditions;\n\n              if (!canSelect) return;\n            }\n\n            const isSelected = selection?.rowSelection?.[id];\n\n            if (!isSelected) {\n              selection?.setRowSelection?.((old) => ({ ...old, [id]: true }));\n            } else {\n              selection?.setRowSelection?.((old) => {\n                const newSelection = { ...old };\n                delete newSelection[id];\n                return newSelection;\n              });\n            }\n          }}\n          onDoubleClick={() => window.open(fileUrl ?? \"\", \"_blank\", \"noopener,noreferrer\")}\n        >\n          <CardHeader className=\"flex w-full flex-row items-center justify-between gap-2 p-0 px-1.5\">\n            {Icon && (\n              <Icon\n                className={nodeSubtypeVariants({\n                  status: node.subtype,\n                  className: \"my-1.5 size-4\",\n                })}\n              />\n            )}\n\n            <CardTitle\n              className=\"line-clamp-2 w-full break-all text-xs leading-[1.2]\"\n              title={node.name}\n            >\n              {node.name}\n            </CardTitle>\n\n            {commands && <DropdownCommandMenu data={node} commands={commands} />}\n          </CardHeader>\n\n          <CardContent className=\"h-48 w-full overflow-hidden rounded-lg bg-background p-0\">\n            {node.subtype === \"image\" ? (\n              <Image\n                src={imageUrl ?? fileUrl ?? \"\"}\n                alt={node.name}\n                width={200}\n                height={200}\n                loader={imageLoader}\n                className=\"h-full w-full object-cover\"\n              />\n            ) : (\n              <div className=\"flex h-full w-full items-center justify-center\">\n                {Icon && (\n                  <Icon\n                    className={nodeSubtypeVariants({ status: node.subtype, className: \"size-12\" })}\n                  />\n                )}\n              </div>\n            )}\n          </CardContent>\n        </Card>\n      </ContextCommandMenuTrigger>\n\n      {commands && <ContextCommandMenuContent data={node} commands={commands} />}\n    </ContextCommandMenu>\n  );\n}\n\n/**\n * Card Skeleton\n */\n\nexport function DriveGridCardSkeleton() {\n  return (\n    <Card className=\"flex max-h-52 cursor-pointer flex-col items-center gap-3 overflow-hidden bg-muted/70 p-3\">\n      <Skeleton className=\"h-7\" />\n      <CardContent className=\"h-52 w-full overflow-hidden rounded-lg bg-background p-0\" />\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAmCA,SAAgB,cAAuC,OAAkC;AACvF,KAAI,MAAM,KAAK,iBAAiB,UAC9B,QAAO,oBAAC,yBAAsB,GAAI,QAAS;AAG7C,KAAI,MAAM,KAAK,SAAS,SACtB,QAAO,oBAAC,uBAAoB,GAAI,QAAS;AAG3C,KAAI,MAAM,KAAK,SAAS,OACtB,QAAO,oBAAC,qBAAkB,GAAI,QAAS;AAGzC,QAAO;;;;;AAMT,SAAgB,oBAA6C,EAC3D,MACA,UACA,eACA,WACA,GAAG,SACyB;CAC5B,MAAM,EAAE,OAAO;CAEf,MAAM,SAAS,WAAW;CAE1B,MAAM,EAAE,WAAW,wBAAwB,0BAA0B;CAErE,MAAM,YAAY,aAAa,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/C,MAAM,YAAY,aAAa,EAAE,IAAI,KAAK,IAAI,CAAC;AAE/C,KAAI,KAAK,OAAQ,QAAO;AAExB,QACE,qBAAC,iCACC,oBAAC;EAA0B;YACzB,8BAAC;GACC,GAAI;GACJ,KAAK;GACL,KAAK,UAAU;GACf,iBAAe,WAAW,eAAe;GACzC,iBAAe,UAAU;GACzB,WAAU;GACV,eAAe;IACb,MAAM,aAAa,sBAAsB,KAAK;AAE9C,QAAI,eAAe,QAKjB;SAAI,EAJc,MAAM,QAAQ,WAAW,GACvC,WAAW,MAAM,cAAc,UAAU,GACzC,YAEY;;AAKlB,QAAI,CAFe,WAAW,eAAe,IAG3C,YAAW,mBAAmB,SAAS;KAAE,GAAG;MAAM,KAAK;KAAM,EAAE;QAE/D,YAAW,mBAAmB,QAAQ;KACpC,MAAM,eAAe,EAAE,GAAG,KAAK;AAC/B,YAAO,aAAa;AACpB,YAAO;MACP;;GAGN,qBAAqB,OAAO,KAAK,aAAa,KAAK;KAEnD,oBAAC;GACC,KAAK,UAAU;GACf,aAAW,UAAU,gBAAgB,CAAC,UAAU;GAChD,WAAU;IACV,EAEF,qBAAC;GAAW,WAAU;;IACpB,oBAAC,cAAW,WAAU,kCAAkC;IAExD,oBAAC;KACC,WAAU;KACV,OAAO,KAAK;eAEX,KAAK;MACI;IAEX,YAAY,oBAAC;KAAoB,MAAM;KAAgB;MAAY;;IACzD,EAEb,oBAAC;GAAY,WAAU;aACrB,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,WAAU,4BAA4B;KAC9C;IACM,CACT;GACmB,EAE3B,YAAY,oBAAC;EAA0B,MAAM;EAAgB;GAAY,IACvD;;;;;AAOzB,SAAgB,kBAA2C,EACzD,MACA,UACA,aACA,WACA,GAAG,SACyB;CAC5B,MAAM,EAAE,OAAO;CAEf,MAAM,EAAE,KAAK,eAAe,aAAa,EAAE,IAAI,CAAC;CAChD,MAAM,EAAE,WAAW,wBAAwB,0BAA0B;CAGrE,MAAM,OADU,WAAW,mBAAmB,KAAK,QAAQ,EACrC;CACtB,MAAM,UAAU,KAAK,MAAM,QAAQ,KAAK,MAAM;CAC9C,MAAM,WAAW,KAAK,MAAM,aAAa,KAAK,MAAM;AACpD,KAAI,KAAK,OAAQ,QAAO;AAExB,QACE,qBAAC,iCACC,oBAAC;EAA0B;YACzB,8BAAC;GACC,GAAI;GACJ,KAAK;GACA;GACL,iBAAe,WAAW,eAAe;GACzC,iBAAe;GACf,WAAU;GACV,eAAe;IACb,MAAM,aAAa,sBAAsB,KAAK;AAE9C,QAAI,eAAe,QAKjB;SAAI,EAJc,MAAM,QAAQ,WAAW,GACvC,WAAW,MAAM,cAAc,UAAU,GACzC,YAEY;;AAKlB,QAAI,CAFe,WAAW,eAAe,IAG3C,YAAW,mBAAmB,SAAS;KAAE,GAAG;MAAM,KAAK;KAAM,EAAE;QAE/D,YAAW,mBAAmB,QAAQ;KACpC,MAAM,eAAe,EAAE,GAAG,KAAK;AAC/B,YAAO,aAAa;AACpB,YAAO;MACP;;GAGN,qBAAqB,OAAO,KAAK,WAAW,IAAI,UAAU,sBAAsB;KAEhF,qBAAC;GAAW,WAAU;;IACnB,QACC,oBAAC,QACC,WAAW,oBAAoB;KAC7B,QAAQ,KAAK;KACb,WAAW;KACZ,CAAC,GACF;IAGJ,oBAAC;KACC,WAAU;KACV,OAAO,KAAK;eAEX,KAAK;MACI;IAEX,YAAY,oBAAC;KAAoB,MAAM;KAAgB;MAAY;;IACzD,EAEb,oBAAC;GAAY,WAAU;aACpB,KAAK,YAAY,UAChB,oBAAC;IACC,KAAK,YAAY,WAAW;IAC5B,KAAK,KAAK;IACV,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,WAAU;KACV,GAEF,oBAAC;IAAI,WAAU;cACZ,QACC,oBAAC,QACC,WAAW,oBAAoB;KAAE,QAAQ,KAAK;KAAS,WAAW;KAAW,CAAC,GAC9E;KAEA;IAEI,CACT;GACmB,EAE3B,YAAY,oBAAC;EAA0B,MAAM;EAAgB;GAAY,IACvD;;;;;AAQzB,SAAgB,wBAAwB;AACtC,QACE,qBAAC;EAAK,WAAU;aACd,oBAAC,YAAS,WAAU,QAAQ,EAC5B,oBAAC,eAAY,WAAU,6DAA6D;GAC/E"}

package/dist/components/grid.client.d.mts

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/grid.client.d.ts
+/**
+ * Layout primitive for drive grid content.
+ */
+type DriveGridProps = ComponentProps<"div">;
+declare function DriveGrid({
+  className,
+  ...props
+}: DriveGridProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Empty state that spans the full grid.
+ */
+type DriveGridEmptyProps = ComponentProps<"div"> & {
+  title?: ReactNode;
+  description?: ReactNode;
+};
+declare function DriveGridEmpty({
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: DriveGridEmptyProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Skeleton grid for page-level loading states.
+ */
+type DriveGridLoadingProps = ComponentProps<"div">;
+declare function DriveGridLoading({
+  className,
+  ...props
+}: DriveGridLoadingProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Infinite table bottombar
+ */
+type DriveGridBottombarProps = ComponentProps<"div"> & {
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+  isFetching: boolean;
+  isFetchingNextPage: boolean;
+};
+declare function DriveGridBottombar({
+  hasNextPage,
+  fetchNextPage,
+  isFetching,
+  isFetchingNextPage,
+  className,
+  ...props
+}: DriveGridBottombarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveGrid, DriveGridBottombar, DriveGridEmpty, DriveGridEmptyProps, DriveGridLoading, DriveGridLoadingProps, DriveGridProps };
+//# sourceMappingURL=grid.client.d.mts.map

package/dist/components/grid.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.client.d.mts","names":[],"sources":["../../src/components/grid.client.tsx"],"mappings":";;;;;;;KAWY,cAAA,GAAiB,cAAA;AAAA,iBAEb,SAAA,CAAA;EAAY,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KAerD,mBAAA,GAAsB,cAAA;EAChC,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;AAAA;AAAA,iBAGA,cAAA,CAAA;EACd,KAAA;EACA,WAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KAYV,qBAAA,GAAwB,cAAA;AAAA,iBAEpB,gBAAA,CAAA;EAAmB,SAAA;EAAA,GAAc;AAAA,GAAS,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;KAa1E,uBAAA,GAA0B,cAAA;EAC7B,WAAA;EACA,aAAA;EACA,UAAA;EACA,kBAAA;AAAA;AAAA,iBAGc,kBAAA,CAAA;EACd,WAAA;EACA,aAAA;EACA,UAAA;EACA,kBAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/grid.client.mjs

@@ -0,0 +1,54 @@
+"use client";
+
+import { DriveGridCardSkeleton } from "./grid-card.client.mjs";
+import { EmptyDescription, EmptyPage, EmptyPageTitle } from "@tulip-systems/core/components";
+import { cn } from "@tulip-systems/core/lib";
+import { useInView } from "motion/react";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/grid.client.tsx
+function DriveGrid({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("grid grid-cols-1 gap-5 md:grid-cols-[repeat(auto-fill,minmax(13rem,1fr))]", className)
+	});
+}
+function DriveGridEmpty({ title, description, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(EmptyPage, {
+		...props,
+		className: cn("col-span-full min-h-[80dvh]", className),
+		children: [/* @__PURE__ */ jsx(EmptyPageTitle, { children: title }), description && /* @__PURE__ */ jsx(EmptyDescription, { children: description })]
+	});
+}
+function DriveGridLoading({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DriveGrid, {
+		...props,
+		children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx(DriveGridCardSkeleton, {}, index))
+	});
+}
+function DriveGridBottombar({ hasNextPage, fetchNextPage, isFetching, isFetchingNextPage, className, ...props }) {
+	const scrollRef = useRef(null);
+	const isInView = useInView(scrollRef);
+	useEffect(() => {
+		if (isInView && hasNextPage && !isFetching && !isFetchingNextPage) fetchNextPage();
+	}, [
+		isInView,
+		fetchNextPage,
+		hasNextPage,
+		isFetching,
+		isFetchingNextPage
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("relative col-span-full", className),
+		children: /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: "absolute bottom-0 -z-50 min-h-[500px] bg-primary"
+		})
+	});
+}
+
+//#endregion
+export { DriveGrid, DriveGridBottombar, DriveGridEmpty, DriveGridLoading };
+//# sourceMappingURL=grid.client.mjs.map

package/dist/components/grid.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.client.mjs","names":[],"sources":["../../src/components/grid.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { EmptyDescription, EmptyPage, EmptyPageTitle } from \"@tulip-systems/core/components\";\nimport { cn } from \"@tulip-systems/core/lib\";\nimport { useInView } from \"motion/react\";\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from \"react\";\nimport { DriveGridCardSkeleton } from \"./grid-card.client\";\n\n/**\n * Layout primitive for drive grid content.\n */\nexport type DriveGridProps = ComponentProps<\"div\">;\n\nexport function DriveGrid({ className, ...props }: DriveGridProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"grid grid-cols-1 gap-5 md:grid-cols-[repeat(auto-fill,minmax(13rem,1fr))]\",\n        className,\n      )}\n    />\n  );\n}\n\n/**\n * Empty state that spans the full grid.\n */\nexport type DriveGridEmptyProps = ComponentProps<\"div\"> & {\n  title?: ReactNode;\n  description?: ReactNode;\n};\n\nexport function DriveGridEmpty({\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: DriveGridEmptyProps) {\n  return (\n    <EmptyPage {...props} className={cn(\"col-span-full min-h-[80dvh]\", className)}>\n      <EmptyPageTitle>{title}</EmptyPageTitle>\n      {description && <EmptyDescription>{description}</EmptyDescription>}\n    </EmptyPage>\n  );\n}\n\n/**\n * Skeleton grid for page-level loading states.\n */\nexport type DriveGridLoadingProps = ComponentProps<\"div\">;\n\nexport function DriveGridLoading({ className, ...props }: DriveGridLoadingProps) {\n  return (\n    <DriveGrid {...props}>\n      {Array.from({ length: 12 }).map((_, index) => (\n        <DriveGridCardSkeleton key={index} />\n      ))}\n    </DriveGrid>\n  );\n}\n\n/**\n * Infinite table bottombar\n */\ntype DriveGridBottombarProps = ComponentProps<\"div\"> & {\n  hasNextPage: boolean;\n  fetchNextPage: () => void;\n  isFetching: boolean;\n  isFetchingNextPage: boolean;\n};\n\nexport function DriveGridBottombar({\n  hasNextPage,\n  fetchNextPage,\n  isFetching,\n  isFetchingNextPage,\n  className,\n  ...props\n}: DriveGridBottombarProps) {\n  const scrollRef = useRef(null);\n  const isInView = useInView(scrollRef);\n\n  useEffect(() => {\n    if (isInView && hasNextPage && !isFetching && !isFetchingNextPage) {\n      fetchNextPage();\n    }\n  }, [isInView, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage]);\n\n  return (\n    <div {...props} className={cn(\"relative col-span-full\", className)}>\n      <div ref={scrollRef} className=\"absolute bottom-0 -z-50 min-h-[500px] bg-primary\" />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,6EACA,UACD;GACD;;AAYN,SAAgB,eAAe,EAC7B,OACA,aACA,WACA,UACA,GAAG,SACmB;AACtB,QACE,qBAAC;EAAU,GAAI;EAAO,WAAW,GAAG,+BAA+B,UAAU;aAC3E,oBAAC,4BAAgB,QAAuB,EACvC,eAAe,oBAAC,8BAAkB,cAA+B;GACxD;;AAShB,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC;EAAU,GAAI;YACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,UAClC,oBAAC,2BAA2B,MAAS,CACrC;GACQ;;AAchB,SAAgB,mBAAmB,EACjC,aACA,eACA,YACA,oBACA,WACA,GAAG,SACuB;CAC1B,MAAM,YAAY,OAAO,KAAK;CAC9B,MAAM,WAAW,UAAU,UAAU;AAErC,iBAAgB;AACd,MAAI,YAAY,eAAe,CAAC,cAAc,CAAC,mBAC7C,gBAAe;IAEhB;EAAC;EAAU;EAAe;EAAa;EAAY;EAAmB,CAAC;AAE1E,QACE,oBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,0BAA0B,UAAU;YAChE,oBAAC;GAAI,KAAK;GAAW,WAAU;IAAqD;GAChF"}

package/dist/components/navigation/breadcrumbs.client.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/navigation/breadcrumbs.client.d.ts
+/**
+ * Drive  Header Breadcrumbs
+ */
+type DriveNodeBreadcrumb = {
+  node: true;
+  label: string;
+  parentId: string | null;
+};
+type DriveHrefBreadcrumb = {
+  node?: false;
+  label: string;
+  href: string;
+};
+type DriveBreadcrumb = DriveNodeBreadcrumb | DriveHrefBreadcrumb;
+type DriveBreadCrumbsProps = {
+  breadcrumbs?: DriveBreadcrumb[];
+};
+declare function DriveBreadcrumbs({
+  breadcrumbs
+}: DriveBreadCrumbsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveBreadCrumbsProps, DriveBreadcrumb, DriveBreadcrumbs };
+//# sourceMappingURL=breadcrumbs.client.d.mts.map

package/dist/components/navigation/breadcrumbs.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.client.d.mts","names":[],"sources":["../../../src/components/navigation/breadcrumbs.client.tsx"],"mappings":";;;;;;KAsBK,mBAAA;EACH,IAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGG,mBAAA;EACH,IAAA;EACA,KAAA;EACA,IAAA;AAAA;AAAA,KAGU,eAAA,GAAkB,mBAAA,GAAsB,mBAAA;AAAA,KAExC,qBAAA;EACV,WAAA,GAAc,eAAA;AAAA;AAAA,iBAGA,gBAAA,CAAA;EAAmB;AAAA,GAAoB,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/navigation/breadcrumbs.client.mjs

@@ -0,0 +1,52 @@
+"use client";
+
+import { driveTreeSearchParams } from "../../lib/search-params.mjs";
+import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from "@tulip-systems/core/components";
+import { Fragment } from "react";
+import { useDroppable } from "@dnd-kit/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { HeaderBreadcrumbSeparator, HeaderBreadcrumbs, HeaderBreadcrumbsDesktopList, HeaderBreadcrumbsDropdownMenu, HeaderBreadcrumbsDropdownMenuItem, HeaderBreadcrumbsLink, HeaderBreadcrumbsMobileList } from "@tulip-systems/core/components/client";
+import Link from "next/link";
+import { createSerializer, useQueryStates } from "nuqs";
+import { pointerIntersection } from "@dnd-kit/collision";
+
+//#region src/components/navigation/breadcrumbs.client.tsx
+function DriveBreadcrumbs({ breadcrumbs = [] }) {
+	return /* @__PURE__ */ jsxs(HeaderBreadcrumbs, { children: [/* @__PURE__ */ jsxs(HeaderBreadcrumbsMobileList, { children: [breadcrumbs.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HeaderBreadcrumbsDropdownMenu, { children: breadcrumbs.slice(0, -1).map((breadcrumb, index) => /* @__PURE__ */ jsx(HeaderBreadcrumbsDropdownMenuItem, { breadcrumb }, index)) }), /* @__PURE__ */ jsx(HeaderBreadcrumbSeparator, {})] }), breadcrumbs.slice(-1).map((breadcrumb, index, array) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HeaderBreadcrumbsLink, { breadcrumb }), index < array.length - 1 && /* @__PURE__ */ jsx(HeaderBreadcrumbSeparator, {})] }, index))] }), /* @__PURE__ */ jsxs(HeaderBreadcrumbsDesktopList, { children: [breadcrumbs.length > 2 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HeaderBreadcrumbsDropdownMenu, { children: breadcrumbs.slice(0, -2).map((breadcrumb, index) => /* @__PURE__ */ jsx(HeaderBreadcrumbsDropdownMenuItem, { breadcrumb }, index)) }), /* @__PURE__ */ jsx(HeaderBreadcrumbSeparator, {})] }), breadcrumbs.slice(-2).map((breadcrumb, index, array) => /* @__PURE__ */ jsxs(Fragment, { children: [breadcrumb.node ? /* @__PURE__ */ jsx(DriveHeaderBreadcrumbsLink, { breadcrumb }) : /* @__PURE__ */ jsx(HeaderBreadcrumbsLink, { breadcrumb }), index < array.length - 1 && /* @__PURE__ */ jsx(HeaderBreadcrumbSeparator, {})] }, index))] })] });
+}
+/**
+* Drive Header Breadcrumbs Link with DnD support
+*/
+function DriveHeaderBreadcrumbsLink(props) {
+	const id = props.breadcrumb.parentId ?? null;
+	const [query] = useQueryStates(driveTreeSearchParams);
+	const serialize = createSerializer(driveTreeSearchParams);
+	const { ref, isDropTarget } = useDroppable({
+		id: id ?? "drive",
+		collisionDetector: pointerIntersection
+	});
+	const href = serialize({
+		...query,
+		parentId: id
+	});
+	return /* @__PURE__ */ jsx(BreadcrumbItem, {
+		ref,
+		"data-over": isDropTarget && query.parentId !== id,
+		className: "data-[over=true]:bg-primary/35",
+		children: href !== void 0 && href !== null ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Link, {
+				href: href || "?",
+				className: "truncate",
+				children: props.breadcrumb.label
+			})
+		}) : /* @__PURE__ */ jsx(BreadcrumbPage, {
+			className: "truncate",
+			children: props.breadcrumb.label
+		})
+	});
+}
+
+//#endregion
+export { DriveBreadcrumbs };
+//# sourceMappingURL=breadcrumbs.client.mjs.map

package/dist/components/navigation/breadcrumbs.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.client.mjs","names":[],"sources":["../../../src/components/navigation/breadcrumbs.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { pointerIntersection } from \"@dnd-kit/collision\";\nimport { useDroppable } from \"@dnd-kit/react\";\nimport { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from \"@tulip-systems/core/components\";\nimport {\n  HeaderBreadcrumbSeparator,\n  HeaderBreadcrumbs,\n  HeaderBreadcrumbsDesktopList,\n  HeaderBreadcrumbsDropdownMenu,\n  HeaderBreadcrumbsDropdownMenuItem,\n  HeaderBreadcrumbsLink,\n  HeaderBreadcrumbsMobileList,\n} from \"@tulip-systems/core/components/client\";\nimport Link from \"next/link\";\nimport { createSerializer, useQueryStates } from \"nuqs\";\nimport { Fragment } from \"react\";\nimport { driveTreeSearchParams } from \"@/entry\";\n\n/**\n * Drive  Header Breadcrumbs\n */\ntype DriveNodeBreadcrumb = {\n  node: true;\n  label: string;\n  parentId: string | null;\n};\n\ntype DriveHrefBreadcrumb = {\n  node?: false;\n  label: string;\n  href: string;\n};\n\nexport type DriveBreadcrumb = DriveNodeBreadcrumb | DriveHrefBreadcrumb;\n\nexport type DriveBreadCrumbsProps = {\n  breadcrumbs?: DriveBreadcrumb[];\n};\n\nexport function DriveBreadcrumbs({ breadcrumbs = [] }: DriveBreadCrumbsProps) {\n  return (\n    <HeaderBreadcrumbs>\n      <HeaderBreadcrumbsMobileList>\n        {breadcrumbs.length > 1 && (\n          <>\n            <HeaderBreadcrumbsDropdownMenu>\n              {breadcrumbs.slice(0, -1).map((breadcrumb, index) => (\n                <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />\n              ))}\n            </HeaderBreadcrumbsDropdownMenu>\n\n            <HeaderBreadcrumbSeparator />\n          </>\n        )}\n\n        {breadcrumbs.slice(-1).map((breadcrumb, index, array) => (\n          <Fragment key={index}>\n            <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />\n            {index < array.length - 1 && <HeaderBreadcrumbSeparator />}\n          </Fragment>\n        ))}\n      </HeaderBreadcrumbsMobileList>\n\n      <HeaderBreadcrumbsDesktopList>\n        {breadcrumbs.length > 2 && (\n          <>\n            <HeaderBreadcrumbsDropdownMenu>\n              {breadcrumbs.slice(0, -2).map((breadcrumb, index) => (\n                <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />\n              ))}\n            </HeaderBreadcrumbsDropdownMenu>\n\n            <HeaderBreadcrumbSeparator />\n          </>\n        )}\n\n        {breadcrumbs.slice(-2).map((breadcrumb, index, array) => (\n          <Fragment key={index}>\n            {breadcrumb.node ? (\n              <DriveHeaderBreadcrumbsLink breadcrumb={breadcrumb} />\n            ) : (\n              <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />\n            )}\n            {index < array.length - 1 && <HeaderBreadcrumbSeparator />}\n          </Fragment>\n        ))}\n      </HeaderBreadcrumbsDesktopList>\n    </HeaderBreadcrumbs>\n  );\n}\n\n/**\n * Drive Header Breadcrumbs Link with DnD support\n */\nfunction DriveHeaderBreadcrumbsLink(props: { breadcrumb: DriveNodeBreadcrumb }) {\n  const id = props.breadcrumb.parentId ?? null;\n  const [query] = useQueryStates(driveTreeSearchParams);\n  const serialize = createSerializer(driveTreeSearchParams);\n\n  const { ref, isDropTarget } = useDroppable({\n    id: id ?? \"drive\",\n    collisionDetector: pointerIntersection,\n  });\n\n  const href = serialize({ ...query, parentId: id });\n\n  return (\n    <BreadcrumbItem\n      ref={ref}\n      data-over={isDropTarget && query.parentId !== id}\n      className=\"data-[over=true]:bg-primary/35\"\n    >\n      {href !== undefined && href !== null ? (\n        <BreadcrumbLink asChild>\n          <Link href={href || \"?\"} className=\"truncate\">\n            {props.breadcrumb.label}\n          </Link>\n        </BreadcrumbLink>\n      ) : (\n        <BreadcrumbPage className=\"truncate\">{props.breadcrumb.label}</BreadcrumbPage>\n      )}\n    </BreadcrumbItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAwCA,SAAgB,iBAAiB,EAAE,cAAc,EAAE,IAA2B;AAC5E,QACE,qBAAC,gCACC,qBAAC,0CACE,YAAY,SAAS,KACpB,8CACE,oBAAC,2CACE,YAAY,MAAM,GAAG,GAAG,CAAC,KAAK,YAAY,UACzC,oBAAC,qCAA0D,cAAnB,MAAiC,CACzE,GAC4B,EAEhC,oBAAC,8BAA4B,IAC5B,EAGJ,YAAY,MAAM,GAAG,CAAC,KAAK,YAAY,OAAO,UAC7C,qBAAC,uBACC,oBAAC,yBAAkC,aAAc,EAChD,QAAQ,MAAM,SAAS,KAAK,oBAAC,8BAA4B,KAF7C,MAGJ,CACX,IAC0B,EAE9B,qBAAC,2CACE,YAAY,SAAS,KACpB,8CACE,oBAAC,2CACE,YAAY,MAAM,GAAG,GAAG,CAAC,KAAK,YAAY,UACzC,oBAAC,qCAA0D,cAAnB,MAAiC,CACzE,GAC4B,EAEhC,oBAAC,8BAA4B,IAC5B,EAGJ,YAAY,MAAM,GAAG,CAAC,KAAK,YAAY,OAAO,UAC7C,qBAAC,uBACE,WAAW,OACV,oBAAC,8BAAuC,aAAc,GAEtD,oBAAC,yBAAkC,aAAc,EAElD,QAAQ,MAAM,SAAS,KAAK,oBAAC,8BAA4B,KAN7C,MAOJ,CACX,IAC2B,IACb;;;;;AAOxB,SAAS,2BAA2B,OAA4C;CAC9E,MAAM,KAAK,MAAM,WAAW,YAAY;CACxC,MAAM,CAAC,SAAS,eAAe,sBAAsB;CACrD,MAAM,YAAY,iBAAiB,sBAAsB;CAEzD,MAAM,EAAE,KAAK,iBAAiB,aAAa;EACzC,IAAI,MAAM;EACV,mBAAmB;EACpB,CAAC;CAEF,MAAM,OAAO,UAAU;EAAE,GAAG;EAAO,UAAU;EAAI,CAAC;AAElD,QACE,oBAAC;EACM;EACL,aAAW,gBAAgB,MAAM,aAAa;EAC9C,WAAU;YAET,SAAS,UAAa,SAAS,OAC9B,oBAAC;GAAe;aACd,oBAAC;IAAK,MAAM,QAAQ;IAAK,WAAU;cAChC,MAAM,WAAW;KACb;IACQ,GAEjB,oBAAC;GAAe,WAAU;aAAY,MAAM,WAAW;IAAuB;GAEjE"}

package/dist/components/navigation/header.client.d.mts

@@ -0,0 +1,28 @@
+import { DriveBreadCrumbsProps } from "./breadcrumbs.client.mjs";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/navigation/header.client.d.ts
+/**
+ * Drive  Header
+ */
+declare function DriveHeader({
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+/**
+ * Drive Header Breadcrumbs
+ */
+declare function DriveHeaderBreadcrumbs({
+  breadcrumbs
+}: DriveBreadCrumbsProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Drive Header Tools
+ */
+declare function DriveHeaderTools({
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveHeader, DriveHeaderBreadcrumbs, DriveHeaderTools };
+//# sourceMappingURL=header.client.d.mts.map

package/dist/components/navigation/header.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.client.d.mts","names":[],"sources":["../../../src/components/navigation/header.client.tsx"],"mappings":";;;;;;;;iBAegB,WAAA,CAAA;EAAc,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAWzD,sBAAA,CAAA;EAAyB;AAAA,GAAe,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAgB7D,gBAAA,CAAA;EAAmB,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}