@tulip-systems/drive 0.8.1 → 0.8.3

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,13 @@
+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 };

package/dist/components/content.mjs

@@ -0,0 +1,17 @@
+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 };

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

@@ -0,0 +1,13 @@
+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 };

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

@@ -0,0 +1,16 @@
+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 };

package/dist/components/dnd.client.mjs

@@ -0,0 +1,29 @@
+"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 };

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

@@ -0,0 +1,46 @@
+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;
+  unoptimized?: boolean;
+};
+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,
+  imageLoader,
+  unoptimized,
+  className,
+  ...props
+}: DriveGridCardProps<TData>): react_jsx_runtime0.JSX.Element | null;
+/**
+ * File card
+ */
+declare function DriveGridFileCard<TData extends DriveNode>({
+  node,
+  commands,
+  imageLoader,
+  unoptimized,
+  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 };

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, imageLoader, unoptimized, className, ...props }) {
+	const { id } = node;
+	const router = useRouter();
+	const selectionContext = 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": selectionContext?.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 = selectionContext?.selectionConditions?.(node);
+				if (conditions !== void 0) {
+					if (!(Array.isArray(conditions) ? conditions.some((condition) => condition) : conditions)) return;
+				}
+				if (!selectionContext?.selection?.rowSelection?.[id]) selectionContext?.selection?.setRowSelection?.((old) => ({
+					...old,
+					[id]: true
+				}));
+				else selectionContext?.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, unoptimized = false, className, ...props }) {
+	const { id } = node;
+	const { ref, isDragging } = useDraggable({ id });
+	const selectionContext = 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": selectionContext?.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 = selectionContext?.selectionConditions?.(node);
+				if (conditions !== void 0) {
+					if (!(Array.isArray(conditions) ? conditions.some((condition) => condition) : conditions)) return;
+				}
+				if (!selectionContext?.selection?.rowSelection?.[id]) selectionContext?.selection?.setRowSelection?.((old) => ({
+					...old,
+					[id]: true
+				}));
+				else selectionContext?.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",
+				unoptimized
+			}) : /* @__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 };

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

@@ -0,0 +1,53 @@
+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 };

package/dist/components/grid.client.mjs

@@ -0,0 +1,53 @@
+"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 };

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

@@ -0,0 +1,25 @@
+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 };

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

@@ -0,0 +1,51 @@
+"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 };

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

@@ -0,0 +1,27 @@
+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 };

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

@@ -0,0 +1,40 @@
+"use client";
+
+import { DriveBreadcrumbs } from "./breadcrumbs.client.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Header, HeaderTopbarBackButton, HeaderTopbarMobileNavSwitcher, Topbar, TopbarTools } from "@tulip-systems/core/components/client";
+
+//#region src/components/navigation/header.client.tsx
+/**
+* Drive  Header
+*/
+function DriveHeader({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Header, {
+		...props,
+		children: /* @__PURE__ */ jsx(Topbar, { children })
+	});
+}
+/**
+* Drive Header Breadcrumbs
+*/
+function DriveHeaderBreadcrumbs({ breadcrumbs }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full items-center gap-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "h-full",
+			children: [/* @__PURE__ */ jsx(HeaderTopbarBackButton, {}), /* @__PURE__ */ jsx(HeaderTopbarMobileNavSwitcher, {})]
+		}), /* @__PURE__ */ jsx(DriveBreadcrumbs, { breadcrumbs })]
+	});
+}
+/**
+* Drive Header Tools
+*/
+function DriveHeaderTools({ children, ...props }) {
+	return /* @__PURE__ */ jsx(TopbarTools, {
+		...props,
+		children
+	});
+}
+
+//#endregion
+export { DriveHeader, DriveHeaderBreadcrumbs, DriveHeaderTools };

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

@@ -0,0 +1,23 @@
+import "./breadcrumbs.client.mjs";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/navigation/toolbar.client.d.ts
+/**
+ * Drive Page Topbar
+ */
+declare function DriveToolbar({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+/**
+ * Drive Header Tools
+ */
+declare function DriveToolbarTools({
+  children,
+  className,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveToolbar, DriveToolbarTools };

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { DriveBreadcrumbs } from "./breadcrumbs.client.mjs";
+import { cn } from "@tulip-systems/core/lib";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/navigation/toolbar.client.tsx
+/**
+* Drive Page Topbar
+*/
+function DriveToolbar({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex items-center justify-between overflow-x-auto pt-3", className),
+		children
+	});
+}
+/**
+* Drive Toolbar Breadcrumbs
+*/
+const DriveToolbarBreadcrumbs = DriveBreadcrumbs;
+/**
+* Drive Header Tools
+*/
+function DriveToolbarTools({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("flex h-full items-center justify-end gap-4", className),
+		children
+	});
+}
+
+//#endregion
+export { DriveToolbar, DriveToolbarBreadcrumbs, DriveToolbarTools };

package/dist/components/navigation/view-switcher.client.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/navigation/view-switcher.client.d.ts
+/**
+ * Drive view switcher
+ */
+declare function DriveViewSwitcher(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DriveViewSwitcher };