@tulip-systems/drive 0.7.0

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@tulip-systems/drive",
+  "version": "0.7.0",
+  "type": "module",
+  "sideEffects": false,
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "@types/pg": "^8.16.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "aws-sdk-client-mock": "^4.1.0",
+    "aws-sdk-client-mock-vitest": "^7.0.1",
+    "tailwindcss": "^4.2.0",
+    "tsdown": "^0.20.3",
+    "typescript": "5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0",
+    "@tulip-systems/typescript-config": "0.0.0"
+  },
+  "dependencies": {
+    "@dnd-kit/collision": "^0.3.2",
+    "@dnd-kit/dom": "^0.3.2",
+    "@dnd-kit/helpers": "^0.3.2",
+    "@dnd-kit/react": "^0.3.2",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@google-cloud/local-auth": "2.1.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@orpc/client": "^1.13.5",
+    "@orpc/contract": "^1.13.5",
+    "@orpc/server": "^1.13.5",
+    "@orpc/tanstack-query": "^1.13.5",
+    "@react-email/components": "^1.0.8",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "class-variance-authority": "^0.7.1",
+    "client-only": "^0.0.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "^4.1.0",
+    "deepmerge": "^4.3.1",
+    "drizzle-orm": "^0.45.1",
+    "drizzle-zod": "^0.8.3",
+    "embla-carousel-react": "^8.6.0",
+    "googleapis": "105",
+    "lucide-react": "^0.575.0",
+    "motion": "^12.34.3",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react-colorful": "^5.6.1",
+    "react-day-picker": "9.13.2",
+    "react-dropzone": "^15.0.0",
+    "react-email": "^5.2.8",
+    "react-hook-form": "^7.71.2",
+    "react-hotkeys-hook": "^5.2.4",
+    "react-resizable-panels": "^4.6.4",
+    "resend": "^6.9.2",
+    "server-cli-only": "^0.3.2",
+    "server-only": "^0.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "use-debounce": "^10.1.0",
+    "uuid": "^13.0.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6",
+    "@tulip-systems/core": "0.8.0"
+  },
+  "peerDependencies": {
+    "@better-auth/passkey": "^1.5.5",
+    "@tailwindcss/typography": "^0.5.19",
+    "better-auth": "^1.5.5",
+    "next": "16.1.6",
+    "nuqs": "2.8.8",
+    "pg": "8.18.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "recharts": "2.15.4",
+    "sharp": "^0.34.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "24.x"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./client": "./dist/client.mjs",
+    "./google": "./dist/google.mjs",
+    "./google/client": "./dist/google/client.mjs",
+    "./google/server": "./dist/google/server.mjs",
+    "./local": "./dist/local.mjs",
+    "./local/client": "./dist/local/client.mjs",
+    "./local/server": "./dist/local/server.mjs",
+    "./server": "./dist/server.mjs",
+    "./package.json": "./package.json",
+    "./styles.css": "./src/styles.css"
+  },
+  "scripts": {
+    "dev": "tsdown --config-loader tsdown.config.ts --watch",
+    "build": "tsdown --config-loader tsdown.config.ts",
+    "lint": "biome check",
+    "format": "biome format --write",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "test": "vitest"
+  }
+}

package/src/components/content.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@tulip-systems/core/lib";
+import type { ComponentProps } from "react";
+
+/**
+ * Drive Content
+ */
+export function DriveContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("space-y-6", className)}>
+      {props.children}
+    </div>
+  );
+}

package/src/components/context.client.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { Permission } from "@tulip-systems/core/auth";
+
+/**
+ * DriveContext
+ */
+export type DriveContextValue = {
+  namespace: string;
+  permission?: Permission;
+  meta?: object;
+};

package/src/components/dnd.client.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
+import { DragDropProvider } from "@dnd-kit/react";
+import type { PropsWithChildren } from "react";
+
+/**
+ * DriveViewProvider
+ */
+
+export type DriveDragDropProviderProps = PropsWithChildren<{
+  disabled?: boolean;
+  onMove?: (input: { id: string; parentId: string | null }) => void;
+}>;
+
+export function DriveDragDropProvider(props: DriveDragDropProviderProps) {
+  return (
+    <DragDropProvider
+      sensors={(defaults) => [
+        ...defaults,
+        PointerSensor.configure({
+          activationConstraints: [
+            // Start dragging after moving 35 pixels to prevent accidental drags when clicking
+            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 });
+      }}
+    >
+      {props.children}
+    </DragDropProvider>
+  );
+}

package/src/components/grid-card.client.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useDraggable, useDroppable } from "@dnd-kit/react";
+import type { CommandDef } from "@tulip-systems/core/commands";
+import {
+  ContextCommandMenu,
+  ContextCommandMenuContent,
+  ContextCommandMenuTrigger,
+  DropdownCommandMenu,
+} from "@tulip-systems/core/commands/client";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  findStatus,
+  Skeleton,
+} from "@tulip-systems/core/components";
+import { FolderIcon } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+import { nodeSubtypeConfig, nodeSubtypeVariants } from "@/config/types";
+import type { DriveNode } from "@/lib/dto";
+import { useDriveSelectionContext } from "./selection.client";
+
+/**
+ * Drive Grid Card
+ */
+type DriveGridCardProps<TData extends DriveNode> = ComponentProps<"div"> & {
+  node: TData;
+  commands?: CommandDef<TData>[];
+};
+
+export function DriveGridCard<TData extends DriveNode>(props: DriveGridCardProps<TData>) {
+  if (props.node.availability === "pending") {
+    return <DriveGridCardSkeleton {...props} />;
+  }
+
+  if (props.node.type === "folder") {
+    return <DriveGridFolderCard {...props} />;
+  }
+
+  if (props.node.type === "file") {
+    return <DriveGridFileCard {...props} />;
+  }
+
+  return null;
+}
+
+/**
+ * Folder card
+ */
+export function DriveGridFolderCard<TData extends DriveNode>({
+  node,
+  commands,
+  onDoubleClick,
+  className,
+  ...props
+}: DriveGridCardProps<TData>) {
+  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 (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <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 !== undefined) {
+              const canSelect = Array.isArray(conditions)
+                ? conditions.some((condition) => condition)
+                : conditions;
+
+              if (!canSelect) return;
+            }
+
+            const isSelected = selection?.rowSelection?.[id];
+
+            if (!isSelected) {
+              selection?.setRowSelection?.((old) => ({ ...old, [id]: true }));
+            } else {
+              selection?.setRowSelection?.((old) => {
+                const newSelection = { ...old };
+                delete newSelection[id];
+                return newSelection;
+              });
+            }
+          }}
+          onDoubleClick={() => router.push(`?parentId=${id}`)}
+        >
+          <div
+            ref={droppable.ref}
+            data-over={droppable.isDropTarget && !draggable.isDragging}
+            className="absolute inset-0 -z-10 data-[over=true]:bg-primary/35"
+          />
+
+          <CardHeader className="flex w-full flex-row items-center justify-between gap-2.5 p-0 px-1.5">
+            <FolderIcon className="my-1.5 size-4 fill-foreground" />
+
+            <CardTitle
+              className="line-clamp-2 w-full break-all text-xs leading-[1.2]"
+              title={node.name}
+            >
+              {node.name}
+            </CardTitle>
+
+            {commands && <DropdownCommandMenu data={node} commands={commands} />}
+          </CardHeader>
+
+          <CardContent className="h-48 w-full overflow-hidden rounded-lg bg-background p-0 group-hover:bg-background">
+            <div className="flex h-full w-full items-center justify-center">
+              <FolderIcon className="size-12 fill-foreground" />
+            </div>
+          </CardContent>
+        </Card>
+      </ContextCommandMenuTrigger>
+
+      {commands && <ContextCommandMenuContent data={node} commands={commands} />}
+    </ContextCommandMenu>
+  );
+}
+
+/**
+ * File card
+ */
+export function DriveGridFileCard<TData extends DriveNode>({
+  node,
+  commands,
+  className,
+  ...props
+}: DriveGridCardProps<TData>) {
+  const { id } = node;
+
+  const { ref, isDragging } = useDraggable({ id });
+  const { selection, selectionConditions } = useDriveSelectionContext();
+
+  const subtype = findStatus(nodeSubtypeConfig, node.subtype);
+  const Icon = subtype?.icon;
+  const fileUrl = node.links.view ?? node.links.download;
+  const imageUrl = node.links.thumbnail ?? node.links.preview;
+  if (node.hidden) return null;
+
+  return (
+    <ContextCommandMenu>
+      <ContextCommandMenuTrigger asChild>
+        <Card
+          {...props}
+          key={id}
+          ref={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 !== undefined) {
+              const canSelect = Array.isArray(conditions)
+                ? conditions.some((condition) => condition)
+                : conditions;
+
+              if (!canSelect) return;
+            }
+
+            const isSelected = selection?.rowSelection?.[id];
+
+            if (!isSelected) {
+              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")}
+        >
+          <CardHeader className="flex w-full flex-row items-center justify-between gap-2 p-0 px-1.5">
+            {Icon && (
+              <Icon
+                className={nodeSubtypeVariants({
+                  status: node.subtype,
+                  className: "my-1.5 size-4",
+                })}
+              />
+            )}
+
+            <CardTitle
+              className="line-clamp-2 w-full break-all text-xs leading-[1.2]"
+              title={node.name}
+            >
+              {node.name}
+            </CardTitle>
+
+            {commands && <DropdownCommandMenu data={node} commands={commands} />}
+          </CardHeader>
+
+          <CardContent className="h-48 w-full overflow-hidden rounded-lg bg-background p-0">
+            {node.subtype === "image" ? (
+              <Image
+                src={imageUrl ?? fileUrl ?? ""}
+                alt={node.name}
+                width={200}
+                height={200}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                {Icon && (
+                  <Icon
+                    className={nodeSubtypeVariants({ status: node.subtype, className: "size-12" })}
+                  />
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </ContextCommandMenuTrigger>
+
+      {commands && <ContextCommandMenuContent data={node} commands={commands} />}
+    </ContextCommandMenu>
+  );
+}
+
+/**
+ * Card Skeleton
+ */
+
+export function DriveGridCardSkeleton() {
+  return (
+    <Card className="flex max-h-52 cursor-pointer flex-col items-center gap-3 overflow-hidden bg-muted/70 p-3">
+      <Skeleton className="h-7" />
+      <CardContent className="h-52 w-full overflow-hidden rounded-lg bg-background p-0" />
+    </Card>
+  );
+}

package/src/components/grid.client.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { EmptyDescription, EmptyPage, EmptyPageTitle } from "@tulip-systems/core/components";
+import { cn } from "@tulip-systems/core/lib";
+import { useInView } from "motion/react";
+import { type ComponentProps, type ReactNode, useEffect, useRef } from "react";
+import { DriveGridCardSkeleton } from "./grid-card.client";
+
+/**
+ * Layout primitive for drive grid content.
+ */
+export type DriveGridProps = ComponentProps<"div">;
+
+export function DriveGrid({ className, ...props }: DriveGridProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "grid grid-cols-1 gap-5 md:grid-cols-[repeat(auto-fill,minmax(13rem,1fr))]",
+        className,
+      )}
+    />
+  );
+}
+
+/**
+ * Empty state that spans the full grid.
+ */
+export type DriveGridEmptyProps = ComponentProps<"div"> & {
+  title?: ReactNode;
+  description?: ReactNode;
+};
+
+export function DriveGridEmpty({
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: DriveGridEmptyProps) {
+  return (
+    <EmptyPage {...props} className={cn("col-span-full min-h-[80dvh]", className)}>
+      <EmptyPageTitle>{title}</EmptyPageTitle>
+      {description && <EmptyDescription>{description}</EmptyDescription>}
+    </EmptyPage>
+  );
+}
+
+/**
+ * Skeleton grid for page-level loading states.
+ */
+export type DriveGridLoadingProps = ComponentProps<"div">;
+
+export function DriveGridLoading({ className, ...props }: DriveGridLoadingProps) {
+  return (
+    <DriveGrid {...props}>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <DriveGridCardSkeleton key={index} />
+      ))}
+    </DriveGrid>
+  );
+}
+
+/**
+ * Infinite table bottombar
+ */
+type DriveGridBottombarProps = ComponentProps<"div"> & {
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+  isFetching: boolean;
+  isFetchingNextPage: boolean;
+};
+
+export function DriveGridBottombar({
+  hasNextPage,
+  fetchNextPage,
+  isFetching,
+  isFetchingNextPage,
+  className,
+  ...props
+}: DriveGridBottombarProps) {
+  const scrollRef = useRef(null);
+  const isInView = useInView(scrollRef);
+
+  useEffect(() => {
+    if (isInView && hasNextPage && !isFetching && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [isInView, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage]);
+
+  return (
+    <div {...props} className={cn("relative col-span-full", className)}>
+      <div ref={scrollRef} className="absolute bottom-0 -z-50 min-h-[500px] bg-primary" />
+    </div>
+  );
+}

package/src/components/navigation/breadcrumbs.client.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { pointerIntersection } from "@dnd-kit/collision";
+import { useDroppable } from "@dnd-kit/react";
+import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from "@tulip-systems/core/components";
+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 { Fragment } from "react";
+import { driveTreeSearchParams } from "@/entry";
+
+/**
+ * Drive  Header Breadcrumbs
+ */
+type DriveNodeBreadcrumb = {
+  node: true;
+  label: string;
+  parentId: string | null;
+};
+
+type DriveHrefBreadcrumb = {
+  node?: false;
+  label: string;
+  href: string;
+};
+
+export type DriveBreadcrumb = DriveNodeBreadcrumb | DriveHrefBreadcrumb;
+
+export type DriveBreadCrumbsProps = {
+  breadcrumbs?: DriveBreadcrumb[];
+};
+
+export function DriveBreadcrumbs({ breadcrumbs = [] }: DriveBreadCrumbsProps) {
+  return (
+    <HeaderBreadcrumbs>
+      <HeaderBreadcrumbsMobileList>
+        {breadcrumbs.length > 1 && (
+          <>
+            <HeaderBreadcrumbsDropdownMenu>
+              {breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
+                <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />
+              ))}
+            </HeaderBreadcrumbsDropdownMenu>
+
+            <HeaderBreadcrumbSeparator />
+          </>
+        )}
+
+        {breadcrumbs.slice(-1).map((breadcrumb, index, array) => (
+          <Fragment key={index}>
+            <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+            {index < array.length - 1 && <HeaderBreadcrumbSeparator />}
+          </Fragment>
+        ))}
+      </HeaderBreadcrumbsMobileList>
+
+      <HeaderBreadcrumbsDesktopList>
+        {breadcrumbs.length > 2 && (
+          <>
+            <HeaderBreadcrumbsDropdownMenu>
+              {breadcrumbs.slice(0, -2).map((breadcrumb, index) => (
+                <HeaderBreadcrumbsDropdownMenuItem key={index} breadcrumb={breadcrumb} />
+              ))}
+            </HeaderBreadcrumbsDropdownMenu>
+
+            <HeaderBreadcrumbSeparator />
+          </>
+        )}
+
+        {breadcrumbs.slice(-2).map((breadcrumb, index, array) => (
+          <Fragment key={index}>
+            {breadcrumb.node ? (
+              <DriveHeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+            ) : (
+              <HeaderBreadcrumbsLink breadcrumb={breadcrumb} />
+            )}
+            {index < array.length - 1 && <HeaderBreadcrumbSeparator />}
+          </Fragment>
+        ))}
+      </HeaderBreadcrumbsDesktopList>
+    </HeaderBreadcrumbs>
+  );
+}
+
+/**
+ * Drive Header Breadcrumbs Link with DnD support
+ */
+function DriveHeaderBreadcrumbsLink(props: { breadcrumb: DriveNodeBreadcrumb }) {
+  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 (
+    <BreadcrumbItem
+      ref={ref}
+      data-over={isDropTarget && query.parentId !== id}
+      className="data-[over=true]:bg-primary/35"
+    >
+      {href !== undefined && href !== null ? (
+        <BreadcrumbLink asChild>
+          <Link href={href || "?"} className="truncate">
+            {props.breadcrumb.label}
+          </Link>
+        </BreadcrumbLink>
+      ) : (
+        <BreadcrumbPage className="truncate">{props.breadcrumb.label}</BreadcrumbPage>
+      )}
+    </BreadcrumbItem>
+  );
+}