@tulip-systems/core 0.5.9 → 0.5.11

package/dist/modules/storage/components/dropzone.client.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime33 from "react/jsx-runtime";
-import * as react0 from "react";
+import * as react_jsx_runtime363 from "react/jsx-runtime";
+import * as react106 from "react";
 import { ReactNode } from "react";
 import { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
 
@@ -25,7 +25,7 @@ declare function Dropzone({
   className,
   children,
   ...props
-}: DropzoneProps): react_jsx_runtime33.JSX.Element;
+}: DropzoneProps): react_jsx_runtime363.JSX.Element;
 /**
  * DropzoneContent
  */
@@ -36,7 +36,7 @@ type DropzoneContentProps = {
 declare function DropzoneContent({
   children,
   className
-}: DropzoneContentProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime33.JSX.Element | null;
+}: DropzoneContentProps): string | number | bigint | true | react_jsx_runtime363.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react106.ReactPortal | react106.ReactElement<unknown, string | react106.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 /**
  * DropzoneEmptyState
  */
@@ -47,7 +47,7 @@ type DropzoneEmptyStateProps = {
 declare function DropzoneEmptyState({
   children,
   className
-}: DropzoneEmptyStateProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react0.ReactPortal | react0.ReactElement<unknown, string | react0.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime33.JSX.Element | null;
+}: DropzoneEmptyStateProps): string | number | bigint | true | react_jsx_runtime363.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react106.ReactPortal | react106.ReactElement<unknown, string | react106.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 //#endregion
 export { Dropzone, DropzoneContent, DropzoneContentProps, DropzoneEmptyState, DropzoneEmptyStateProps, DropzoneProps };
 //# sourceMappingURL=dropzone.client.d.mts.map

package/dist/modules/storage/components/dropzone.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;KAcY,aAAA,GAAgB,KAAK;EAArB,GAAA,CAAA,EACJ,IADI,EAAA;EAAqB,SAAA,CAAA,EAAA,MAAA;EAAL,MAAA,CAAA,EAAA,CAAA,aAAA,EAGD,IAHC,EAAA,EAAA,cAAA,EAGuB,aAHvB,EAAA,EAAA,KAAA,EAG+C,SAH/C,EAAA,GAAA,IAAA;EACpB,QAAA,CAAA,EAGK,SAHL;CAEmB;AAAwB,iBAInC,QAAA,CAJmC;EAAA,MAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,MAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAgBhD,aAhBgD,CAAA,EAgBnC,mBAAA,CAAA,GAAA,CAAA,OAhBmC;;;;AAInC,KAsDJ,oBAAA,GAtDY;EACtB,QAAA,CAAA,EAsDW,SAtDX;EACA,SAAA,CAAA,EAAA,MAAA;CACA;AACA,iBAyDc,eAAA,CAzDd;EAAA,QAAA;EAAA;AAAA,CAAA,EAyDuD,oBAzDvD,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,IAAA,GAyD2E,QAzD3E,CAyD2E,SAzD3E,CAAA,GAyD2E,OAzD3E,CAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GAyD2E,MAAA,CAAA,WAAA,GAAA,MAAA,CAAA,YAzD3E,CAAA,OAAA,EAAA,MAAA,GAyD2E,MAAA,CAAA,qBAzD3E,CAAA,GAAA,CAAA,CAAA,GAyD2E,QAzD3E,CAyD2E,SAzD3E,CAAA,GAAA,IAAA,GAAA,SAAA,CAAA,GAyD2E,mBAAA,CAAA,GAAA,CAAA,OAAA,GAzD3E,IAAA;;;;AAIA,KAmFU,uBAAA,GAnFV;EACA,QAAA,CAAA,EAmFW,SAnFX;EACA,SAAA,CAAA,EAAA,MAAA;CAEC;AAAa,iBAoFA,kBAAA,CApFA;EAAA,QAAA;EAAA;AAAA,CAAA,EAoF4C,uBApF5C,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,IAAA,GAoFmE,QApFnE,CAoFmE,SApFnE,CAAA,GAoFmE,OApFnE,CAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GAoFmE,MAAA,CAAA,WAAA,GAAA,MAAA,CAAA,YApFnE,CAAA,OAAA,EAAA,MAAA,GAoFmE,MAAA,CAAA,qBApFnE,CAAA,GAAA,CAAA,CAAA,GAoFmE,QApFnE,CAoFmE,SApFnE,CAAA,GAAA,IAAA,GAAA,SAAA,CAAA,GAoFmE,mBAAA,CAAA,GAAA,CAAA,OAAA,GApFnE,IAAA"}
+{"version":3,"file":"dropzone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;KAcY,aAAA,GAAgB,KAAK;EAArB,GAAA,CAAA,EACJ,IADI,EAAA;EAAqB,SAAA,CAAA,EAAA,MAAA;EAAL,MAAA,CAAA,EAAA,CAAA,aAAA,EAGD,IAHC,EAAA,EAAA,cAAA,EAGuB,aAHvB,EAAA,EAAA,KAAA,EAG+C,SAH/C,EAAA,GAAA,IAAA;EACpB,QAAA,CAAA,EAGK,SAHL;CAEmB;AAAwB,iBAInC,QAAA,CAJmC;EAAA,MAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,MAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAgBhD,aAhBgD,CAAA,EAgBnC,oBAAA,CAAA,GAAA,CAAA,OAhBmC;;;;AAInC,KAsDJ,oBAAA,GAtDY;EACtB,QAAA,CAAA,EAsDW,SAtDX;EACA,SAAA,CAAA,EAAA,MAAA;CACA;AACA,iBAyDc,eAAA,CAzDd;EAAA,QAAA;EAAA;AAAA,CAAA,EAyDuD,oBAzDvD,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,IAAA,GAyD2E,oBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAzD3E,CAyD2E,SAzD3E,CAAA,GAyD2E,OAzD3E,CAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GAyD2E,QAAA,CAAA,WAAA,GAAA,QAAA,CAAA,YAzD3E,CAAA,OAAA,EAAA,MAAA,GAyD2E,QAAA,CAAA,qBAzD3E,CAAA,GAAA,CAAA,CAAA,GAyD2E,QAzD3E,CAyD2E,SAzD3E,CAAA,GAAA,IAAA,GAAA,SAAA,CAAA,GAAA,IAAA;;;;AAIA,KAmFU,uBAAA,GAnFV;EACA,QAAA,CAAA,EAmFW,SAnFX;EACA,SAAA,CAAA,EAAA,MAAA;CAEC;AAAa,iBAoFA,kBAAA,CApFA;EAAA,QAAA;EAAA;AAAA,CAAA,EAoF4C,uBApF5C,CAAA,EAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,IAAA,GAoFmE,oBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QApFnE,CAoFmE,SApFnE,CAAA,GAoFmE,OApFnE,CAAA,MAAA,GAAA,MAAA,GAAA,MAAA,GAAA,OAAA,GAoFmE,QAAA,CAAA,WAAA,GAAA,QAAA,CAAA,YApFnE,CAAA,OAAA,EAAA,MAAA,GAoFmE,QAAA,CAAA,qBApFnE,CAAA,GAAA,CAAA,CAAA,GAoFmE,QApFnE,CAoFmE,SApFnE,CAAA,GAAA,IAAA,GAAA,SAAA,CAAA,GAAA,IAAA"}

package/dist/modules/storage/components/image-grid.client.d.mts

@@ -1,5 +1,5 @@
 import { FileNode } from "../lib/validators.mjs";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime366 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 
 //#region src/modules/storage/components/image-grid.client.d.ts
@@ -13,14 +13,21 @@ type ImageGridProps = ComponentProps<"div"> & {
     fromIndex: number;
     toIndex: number;
   }) => Promise<void>;
+  optimistic?: {
+    move?: (params: {
+      fromIndex: number;
+      toIndex: number;
+    }) => Promise<void> | void;
+  };
 };
 declare function ImageGrid({
   nodes,
   moveAction,
+  optimistic,
   disabled,
   ...props
-}: ImageGridProps): react_jsx_runtime36.JSX.Element;
-declare function ImageGridSkeleton(props: ComponentProps<"div">): react_jsx_runtime36.JSX.Element;
+}: ImageGridProps): react_jsx_runtime366.JSX.Element;
+declare function ImageGridSkeleton(props: ComponentProps<"div">): react_jsx_runtime366.JSX.Element;
 //#endregion
 export { ImageGrid, ImageGridSkeleton };
 //# sourceMappingURL=image-grid.client.d.mts.map

package/dist/modules/storage/components/image-grid.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"image-grid.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAuC6C,KAMxC,cAAA,GAAiB,cAAH,CAAA,KAAA,CAAA,GAAA;EAAG,KAAA,EACb,QADa,EAAA;EACb,QAAA,CAAA,EAAA,OAAA;EAEyD,UAAA,EAAA,CAAA,MAAA,EAAA;IAAO,SAAA,EAAA,MAAA;IAGzD,OAAA,EAAS,MAAA;EAAG,CAAA,EAAA,GAHsC,OAGtC,CAAA,IAAA,CAAA;CAAO;AAAY,iBAA/B,SAAA,CAA+B;EAAA,KAAA;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAAsB,cAAtB,CAAA,EAAoC,mBAAA,CAAA,GAAA,CAAA,OAApC;AAAsB,iBAkKrD,iBAAA,CAlKqD,KAAA,EAkK5B,cAlK4B,CAAA,KAAA,CAAA,CAAA,EAkKP,mBAAA,CAAA,GAAA,CAAA,OAlKO"}
+{"version":3,"file":"image-grid.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAsC6C,KAMxC,cAAA,GAAiB,cAAH,CAAA,KAAA,CAAA,GAAA;EAAG,KAAA,EACb,QADa,EAAA;EACb,QAAA,CAAA,EAAA,OAAA;EAEyD,UAAA,EAAA,CAAA,MAAA,EAAA;IAEH,SAAA,EAAA,MAAA;IAAO,OAAA,EAAA,MAAA;EAItD,CAAA,EAAA,GANkD,OAMzC,CAAA,IAAA,CAAA;EAAG,UAAA,CAAA,EAAA;IAAO,IAAA,CAAA,EAAA,CAAA,MAAA,EAAA;MAAY,SAAA,EAAA,MAAA;MAAY,OAAA,EAAA,MAAA;IAAsB,CAAA,EAAA,GAJlB,OAIkB,CAAA,IAAA,CAAA,GAAA,IAAA;EAAc,CAAA;CAAA;AAkK/E,iBAlKA,SAAA,CAkKiB;EAAA,KAAQ;EAAA,UAAqB;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAlKmB,cAkKnB,CAAA,EAlKiC,oBAAA,CAAA,GAAA,CAAA,OAkKjC;iBAA9C,iBAAA,QAAyB,wBAAqB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/storage/components/image-grid.client.mjs

@@ -3,7 +3,6 @@
 import { Icons } from "../../../components/common/icons.mjs";
 import { cn } from "../../../lib/utils/cn.mjs";
 import { Button } from "../../../components/ui/button.mjs";
-import { arrayMove } from "../../../lib/utils/array-move.mjs";
 import { getFileUrl, imageLoader } from "../lib/helpers.mjs";
 import { Skeleton } from "../../../components/ui/skeleton.mjs";
 import { Input } from "../../../components/ui/input.mjs";
@@ -21,8 +20,8 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable,
 import { CSS } from "@dnd-kit/utilities";
 
 //#region src/modules/storage/components/image-grid.client.tsx
-function ImageGrid({ nodes, moveAction, disabled, ...props }) {
-	const { onUpload, updateData, invalidateQuery } = useUploadZone();
+function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }) {
+	const uploadZone = useUploadZone();
 	const images = nodes.flatMap((node) => ({
 		...node,
 		url: getFileUrl(node.id)
@@ -38,10 +37,10 @@ function ImageGrid({ nodes, moveAction, disabled, ...props }) {
 			if (!activeId || !overId || activeId === overId) return Promise.resolve();
 			const fromIndex = images.findIndex((image) => image.id === activeId);
 			const toIndex = images.findIndex((image) => image.id === overId);
-			await updateData((prev) => arrayMove(prev, {
+			await optimistic?.move?.({
 				fromIndex,
 				toIndex
-			}));
+			});
 			await moveAction({
 				fromIndex,
 				toIndex
@@ -49,7 +48,7 @@ function ImageGrid({ nodes, moveAction, disabled, ...props }) {
 		},
 		onSuccess: async () => {
 			setCurrent(0);
-			await invalidateQuery();
+			await uploadZone.optimistic?.invalidate?.();
 		},
 		onError: (error) => {
 			console.error("Error moving image:", error);
@@ -80,7 +79,7 @@ function ImageGrid({ nodes, moveAction, disabled, ...props }) {
 							multiple: true,
 							onChange: (e) => {
 								if (!e.target.files) return;
-								return Array.from(e.target.files).map(onUpload);
+								return Array.from(e.target.files).map(uploadZone.onUpload);
 							}
 						})]
 					})]
@@ -114,7 +113,7 @@ function ImageGrid({ nodes, moveAction, disabled, ...props }) {
 	});
 }
 function ImageGridItem({ node, index, setCurrent }) {
-	const { uploadClient } = useUploadZone();
+	const uploadZone = useUploadZone();
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
 	return /* @__PURE__ */ jsx(Card, {
 		id: node.id,
@@ -149,7 +148,7 @@ function ImageGridItem({ node, index, setCurrent }) {
 				type: "button",
 				variant: "destructive",
 				size: "icon",
-				onClick: () => uploadClient.deleteFiles([node.id]),
+				onClick: () => uploadZone.onRemove([node.id]),
 				className: "absolute left-2 top-2 hidden p-1 group-hover:flex",
 				children: /* @__PURE__ */ jsx(Icons.trash, { className: "size-4" })
 			})

package/dist/modules/storage/components/image-grid.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-grid.client.mjs","names":["Image"],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icons } from \"@/components/common/icons\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog.client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useAction } from \"@/lib/entry.client\";\nimport { arrayMove } from \"@/lib/utils/array-move\";\nimport { cn } from \"@/lib/utils/cn\";\nimport {\n  closestCenter,\n  DndContext,\n  DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { GripIcon, UploadIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport React, { ComponentProps } from \"react\";\nimport { getFileUrl, imageLoader } from \"../lib/helpers\";\nimport { FileNode } from \"../lib/validators\";\nimport { useUploadZone } from \"./upload-zone-context.client\";\n\n/**\n * Image Grid\n */\ntype ImageGridProps = ComponentProps<\"div\"> & {\n  nodes: FileNode[];\n  disabled?: boolean;\n  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;\n};\n\nexport function ImageGrid({ nodes, moveAction, disabled, ...props }: ImageGridProps) {\n  const { onUpload, updateData, invalidateQuery } = useUploadZone();\n\n  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));\n\n  const [current, setCurrent] = React.useState<number>(0);\n\n  const { setNodeRef } = useDroppable({ id: \"image-grid\" });\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const moveMuration = useAction({\n    mutationFn: async ({ active, over }: DragEndEvent) => {\n      if (!moveAction) return Promise.resolve();\n\n      const activeId = active.id;\n      const overId = over?.id;\n      if (!activeId || !overId || activeId === overId) return Promise.resolve();\n\n      const fromIndex = images.findIndex((image) => image.id === activeId);\n      const toIndex = images.findIndex((image) => image.id === overId);\n\n      await updateData((prev) => arrayMove(prev, { fromIndex, toIndex }));\n      await moveAction({ fromIndex, toIndex });\n    },\n    onSuccess: async () => {\n      setCurrent(0);\n      await invalidateQuery();\n    },\n    onError: (error) => {\n      console.error(\"Error moving image:\", error);\n    },\n  });\n\n  return (\n    <Dialog {...props}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={moveMuration.mutate}\n      >\n        <div\n          ref={setNodeRef}\n          className=\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\"\n        >\n          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>\n            {images.map((node, index) => (\n              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />\n            ))}\n\n            {!disabled && (\n              <label className=\"border-muted-foreground bg-muted hover:border-primary relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed\">\n                <UploadIcon className=\"h-8 w-8\" />\n                <Input\n                  type=\"file\"\n                  accept=\"image/jpeg, image/png, image/webp, image/gif\"\n                  className=\"absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0\"\n                  multiple\n                  onChange={(e) => {\n                    if (!e.target.files) return;\n                    return Array.from(e.target.files).map(onUpload);\n                  }}\n                />\n              </label>\n            )}\n          </SortableContext>\n        </div>\n      </DndContext>\n\n      <Carousel className=\"w-full\" opts={{ startIndex: current }}>\n        <DialogContent className=\"border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]\">\n          <CarouselContent className=\"md:max-h-[80vh]\">\n            {images.map(({ id, url }) => (\n              <CarouselItem key={id} className=\"overflow-hidden rounded-xl\">\n                <Image\n                  src={url}\n                  alt=\"Image Preview\"\n                  width={1920}\n                  height={1080}\n                  className=\"h-full w-full rounded-xl object-contain\"\n                  loader={imageLoader}\n                />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          <CarouselPrevious />\n          <CarouselNext />\n        </DialogContent>\n      </Carousel>\n    </Dialog>\n  );\n}\n\n/**\n * Image Grid Item\n */\ntype ImageGridItemProps = {\n  node: FileNode & { url: string };\n  index: number;\n  setCurrent: React.Dispatch<React.SetStateAction<number>>;\n};\n\nfunction ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {\n  const { uploadClient } = useUploadZone();\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });\n\n  return (\n    <Card\n      id={node.id}\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={cn(\"group relative aspect-square w-full\", node.isPending && \"opacity-30\")}\n    >\n      {!node.isPending ? (\n        <>\n          <DialogTrigger onClick={() => setCurrent(index)}>\n            <Image\n              src={node.url}\n              alt=\"Image Preview\"\n              width={100}\n              height={100}\n              className=\"bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain\"\n              loader={imageLoader}\n            />\n          </DialogTrigger>\n\n          <Button\n            {...attributes}\n            {...listeners}\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"icon\"\n            className=\"absolute right-2 top-2 hidden p-1 group-hover:flex\"\n          >\n            <GripIcon className=\"size-4\" />\n          </Button>\n\n          <Button\n            type=\"button\"\n            variant=\"destructive\"\n            size=\"icon\"\n            onClick={() => uploadClient.deleteFiles([node.id])}\n            className=\"absolute left-2 top-2 hidden p-1 group-hover:flex\"\n          >\n            <Icons.trash className=\"size-4\" />\n          </Button>\n        </>\n      ) : (\n        <Skeleton className=\"absolute inset-0 h-full w-full rounded-lg\" />\n      )}\n    </Card>\n  );\n}\n\nexport function ImageGridSkeleton(props: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      className={cn(\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\", props.className)}\n    >\n      {Array.from({ length: 12 }).map((_, index) => (\n        <Skeleton key={index} className=\"aspect-square w-full rounded-lg\" />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"image-grid.client.mjs","names":["Image"],"sources":["../../../../src/modules/storage/components/image-grid.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icons } from \"@/components/common/icons\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog.client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { useAction } from \"@/lib/entry.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport {\n  closestCenter,\n  DndContext,\n  DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { GripIcon, UploadIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport React, { ComponentProps } from \"react\";\nimport { getFileUrl, imageLoader } from \"../lib/helpers\";\nimport { FileNode } from \"../lib/validators\";\nimport { useUploadZone } from \"./upload-zone-context.client\";\n\n/**\n * Image Grid\n */\ntype ImageGridProps = ComponentProps<\"div\"> & {\n  nodes: FileNode[];\n  disabled?: boolean;\n  moveAction: (params: { fromIndex: number; toIndex: number }) => Promise<void>;\n  optimistic?: {\n    move?: (params: { fromIndex: number; toIndex: number }) => Promise<void> | void;\n  };\n};\n\nexport function ImageGrid({ nodes, moveAction, optimistic, disabled, ...props }: ImageGridProps) {\n  const uploadZone = useUploadZone();\n\n  const images = nodes.flatMap((node) => ({ ...node, url: getFileUrl(node.id) }));\n\n  const [current, setCurrent] = React.useState<number>(0);\n\n  const { setNodeRef } = useDroppable({ id: \"image-grid\" });\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const moveMuration = useAction({\n    mutationFn: async ({ active, over }: DragEndEvent) => {\n      if (!moveAction) return Promise.resolve();\n\n      const activeId = active.id;\n      const overId = over?.id;\n      if (!activeId || !overId || activeId === overId) return Promise.resolve();\n\n      const fromIndex = images.findIndex((image) => image.id === activeId);\n      const toIndex = images.findIndex((image) => image.id === overId);\n\n      await optimistic?.move?.({ fromIndex, toIndex });\n      await moveAction({ fromIndex, toIndex });\n    },\n    onSuccess: async () => {\n      setCurrent(0);\n      await uploadZone.optimistic?.invalidate?.();\n    },\n    onError: (error) => {\n      console.error(\"Error moving image:\", error);\n    },\n  });\n\n  return (\n    <Dialog {...props}>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={moveMuration.mutate}\n      >\n        <div\n          ref={setNodeRef}\n          className=\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\"\n        >\n          <SortableContext items={images.map((image) => image.id)} strategy={rectSortingStrategy}>\n            {images.map((node, index) => (\n              <ImageGridItem key={node.id} node={node} index={index} setCurrent={setCurrent} />\n            ))}\n\n            {!disabled && (\n              <label className=\"border-muted-foreground bg-muted hover:border-primary relative flex aspect-square w-full cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed\">\n                <UploadIcon className=\"h-8 w-8\" />\n                <Input\n                  type=\"file\"\n                  accept=\"image/jpeg, image/png, image/webp, image/gif\"\n                  className=\"absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0\"\n                  multiple\n                  onChange={(e) => {\n                    if (!e.target.files) return;\n                    return Array.from(e.target.files).map(uploadZone.onUpload);\n                  }}\n                />\n              </label>\n            )}\n          </SortableContext>\n        </div>\n      </DndContext>\n\n      <Carousel className=\"w-full\" opts={{ startIndex: current }}>\n        <DialogContent className=\"border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]\">\n          <CarouselContent className=\"md:max-h-[80vh]\">\n            {images.map(({ id, url }) => (\n              <CarouselItem key={id} className=\"overflow-hidden rounded-xl\">\n                <Image\n                  src={url}\n                  alt=\"Image Preview\"\n                  width={1920}\n                  height={1080}\n                  className=\"h-full w-full rounded-xl object-contain\"\n                  loader={imageLoader}\n                />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n          <CarouselPrevious />\n          <CarouselNext />\n        </DialogContent>\n      </Carousel>\n    </Dialog>\n  );\n}\n\n/**\n * Image Grid Item\n */\ntype ImageGridItemProps = {\n  node: FileNode & { url: string };\n  index: number;\n  setCurrent: React.Dispatch<React.SetStateAction<number>>;\n};\n\nfunction ImageGridItem({ node, index, setCurrent }: ImageGridItemProps) {\n  const uploadZone = useUploadZone();\n\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });\n\n  return (\n    <Card\n      id={node.id}\n      ref={setNodeRef}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n      className={cn(\"group relative aspect-square w-full\", node.isPending && \"opacity-30\")}\n    >\n      {!node.isPending ? (\n        <>\n          <DialogTrigger onClick={() => setCurrent(index)}>\n            <Image\n              src={node.url}\n              alt=\"Image Preview\"\n              width={100}\n              height={100}\n              className=\"bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain\"\n              loader={imageLoader}\n            />\n          </DialogTrigger>\n\n          <Button\n            {...attributes}\n            {...listeners}\n            type=\"button\"\n            variant=\"secondary\"\n            size=\"icon\"\n            className=\"absolute right-2 top-2 hidden p-1 group-hover:flex\"\n          >\n            <GripIcon className=\"size-4\" />\n          </Button>\n\n          <Button\n            type=\"button\"\n            variant=\"destructive\"\n            size=\"icon\"\n            onClick={() => uploadZone.onRemove([node.id])}\n            className=\"absolute left-2 top-2 hidden p-1 group-hover:flex\"\n          >\n            <Icons.trash className=\"size-4\" />\n          </Button>\n        </>\n      ) : (\n        <Skeleton className=\"absolute inset-0 h-full w-full rounded-lg\" />\n      )}\n    </Card>\n  );\n}\n\nexport function ImageGridSkeleton(props: ComponentProps<\"div\">) {\n  return (\n    <div\n      {...props}\n      className={cn(\"grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5\", props.className)}\n    >\n      {Array.from({ length: 12 }).map((_, index) => (\n        <Skeleton key={index} className=\"aspect-square w-full rounded-lg\" />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/modules/storage/components/upload-zone-context.client.d.mts

@@ -9,9 +9,14 @@ import React from "react";
  */
 type UploadZoneContextValue = {
   uploadClient: UploadClient;
-  updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;
-  invalidateQuery: () => Promise<void> | void;
   onUpload: (file: File) => Promise<Node>;
+  onRemove: (ids: string[]) => Promise<void>;
+  optimistic?: {
+    add?: (newValue: FileNode) => Promise<void> | void;
+    remove?: (ids: string[]) => Promise<void> | void;
+    invalidate?: () => Promise<void> | void;
+    cancel?: () => Promise<void> | void;
+  };
 };
 /**
  * Upload Zone Context

package/dist/modules/storage/components/upload-zone-context.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone-context.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AASA;AACgB,KADJ,sBAAA,GACI;EACS,YAAA,EADT,YACS;EAAyB,UAAA,EAAA,CAAA,QAAA,EAAzB,QAAyB,EAAA,GAAA,CAAA,CAAA,QAAA,EAAA,QAAA,EAAA,EAAA,GAAe,QAAf,EAAA,CAAA,EAAA,GAA+B,OAA/B,CAAA,IAAA,CAAA;EAAe,eAAA,EAAA,GAAA,GACxC,OADwC,CAAA,IAAA,CAAA,GAAA,IAAA;EAAgB,QAAA,EAAA,CAAA,IAAA,EAE9D,IAF8D,EAAA,GAErD,OAFqD,CAE7C,IAF6C,CAAA;CACxD;;;;AACU,cAMtB,iBANsB,EAML,KAAA,CAAA,OANK,CAML,sBANK,CAAA;AAMnC;AAKA;;iBAAgB,aAAA,CAAA,GAAa"}
+{"version":3,"file":"upload-zone-context.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AASA;AACgB,KADJ,sBAAA,GACI;EACG,YAAA,EADH,YACG;EAAiB,QAAA,EAAA,CAAA,IAAA,EAAjB,IAAiB,EAAA,GAAR,OAAQ,CAAA,IAAA,CAAA;EAAR,QAAA,EAAA,CAAA,GAAA,EAAA,MAAA,EAAA,EAAA,GACG,OADH,CAAA,IAAA,CAAA;EACG,UAAA,CAAA,EAAA;IAEV,GAAA,CAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,GAAa,OAAb,CAAA,IAAA,CAAA,GAAA,IAAA;IAAa,MAAA,CAAA,EAAA,CAAA,GAAA,EAAA,MAAA,EAAA,EAAA,GACF,OADE,CAAA,IAAA,CAAA,GAAA,IAAA;IACF,UAAA,CAAA,EAAA,GAAA,GACT,OADS,CAAA,IAAA,CAAA,GAAA,IAAA;IACT,MAAA,CAAA,EAAA,GAAA,GACJ,OADI,CAAA,IAAA,CAAA,GAAA,IAAA;EACJ,CAAA;CAAO;AAS1B;AAKA;;cALa,mBAAiB,KAAA,CAAA,QAAA;;;;iBAKd,aAAA,CAAA,GAAa"}

package/dist/modules/storage/components/upload-zone-context.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone-context.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { UploadClient } from \"../lib/create-upload.client\";\nimport { FileNode, Node } from \"../lib/validators\";\n\n/**\n * Upload Zone Context Value\n */\nexport type UploadZoneContextValue = {\n  uploadClient: UploadClient;\n  updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;\n  invalidateQuery: () => Promise<void> | void;\n  onUpload: (file: File) => Promise<Node>;\n};\n\n/**\n * Upload Zone Context\n */\nexport const UploadZoneContext = React.createContext({} as UploadZoneContextValue);\n\n/**\n * Upload Zone Hook\n */\nexport function useUploadZone() {\n  const context = React.useContext(UploadZoneContext);\n  if (!context) {\n    throw new Error(\"useUploadZone must be used within an UploadZoneProvider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;AAmBA,MAAa,oBAAoB,MAAM,cAAc,EAAE,CAA2B;;;;AAKlF,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,0DAA0D;AAE5E,QAAO"}
+{"version":3,"file":"upload-zone-context.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/upload-zone-context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { UploadClient } from \"../lib/create-upload.client\";\nimport { FileNode, Node } from \"../lib/validators\";\n\n/**\n * Upload Zone Context Value\n */\nexport type UploadZoneContextValue = {\n  uploadClient: UploadClient;\n  onUpload: (file: File) => Promise<Node>;\n  onRemove: (ids: string[]) => Promise<void>;\n  optimistic?: {\n    add?: (newValue: FileNode) => Promise<void> | void;\n    remove?: (ids: string[]) => Promise<void> | void;\n    invalidate?: () => Promise<void> | void;\n    cancel?: () => Promise<void> | void;\n  };\n  // updateData: (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => Promise<void>;\n  // invalidateQuery: () => Promise<void> | void;\n};\n\n/**\n * Upload Zone Context\n */\nexport const UploadZoneContext = React.createContext({} as UploadZoneContextValue);\n\n/**\n * Upload Zone Hook\n */\nexport function useUploadZone() {\n  const context = React.useContext(UploadZoneContext);\n  if (!context) {\n    throw new Error(\"useUploadZone must be used within an UploadZoneProvider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;AA0BA,MAAa,oBAAoB,MAAM,cAAc,EAAE,CAA2B;;;;AAKlF,SAAgB,gBAAgB;CAC9B,MAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,0DAA0D;AAE5E,QAAO"}

package/dist/modules/storage/components/upload-zone.client.d.mts

@@ -1,30 +1,27 @@
 import { Node, UploadFileSchema } from "../lib/validators.mjs";
-import { UploadClient, UploadHooks } from "../lib/create-upload.client.mjs";
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import { UploadHooks } from "../lib/create-upload.client.mjs";
+import { UploadZoneContextValue } from "./upload-zone-context.client.mjs";
+import * as react_jsx_runtime368 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 
 //#region src/modules/storage/components/upload-zone.client.d.ts
-type UploadZoneProps = ComponentProps<"div"> & {
-  queryKey: readonly unknown[];
+type UploadZoneProps = ComponentProps<"div"> & Pick<UploadZoneContextValue, "optimistic" | "uploadClient"> & {
   variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
-  uploadClient: UploadClient;
   uploadHooks?: UploadHooks;
   onUploadCompleted?: (node: Node) => Promise<void> | void;
   onUploadFailed?: (error: unknown) => Promise<void> | void;
 };
 declare function UploadZone({
   variables,
-  queryKey,
+  optimistic,
   uploadClient,
   uploadHooks,
   onUploadCompleted,
   onUploadFailed,
   children,
   className,
-  onDragOver,
-  onDragLeave,
   ...props
-}: UploadZoneProps): react_jsx_runtime38.JSX.Element;
+}: UploadZoneProps): react_jsx_runtime368.JSX.Element;
 //#endregion
 export { UploadZone, UploadZoneProps };
 //# sourceMappingURL=upload-zone.client.d.mts.map

package/dist/modules/storage/components/upload-zone.client.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone.client.tsx"],"sourcesContent":[],"mappings":";;;;;;KAYY,eAAA,GAAkB;;aAGjB,KAAK;EAHN,YAAA,EAII,YAJW;EAAG,WAAA,CAAA,EAKd,WALc;EAGZ,iBAAA,CAAA,EAAA,CAAA,IAAA,EAIW,IAJX,EAAA,GAIoB,OAJpB,CAAA,IAAA,CAAA,GAAA,IAAA;EAAL,cAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAK0B,OAL1B,CAAA,IAAA,CAAA,GAAA,IAAA;CACG;AACA,iBAMA,UAAA,CANA;EAAA,SAAA;EAAA,QAAA;EAAA,YAAA;EAAA,WAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAkBb,eAlBa,CAAA,EAkBE,mBAAA,CAAA,GAAA,CAAA,OAlBF"}
+{"version":3,"file":"upload-zone.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/upload-zone.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWY,eAAA,GAAkB,wBAC5B,KAAK;aACQ,KAAK;gBACF;EAHN,iBAAA,CAAe,EAAA,CAAA,IAAA,EAKI,IALJ,EAAA,GAKa,OALb,CAAA,IAAA,CAAA,GAAA,IAAA;EAAG,cAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAMW,OANX,CAAA,IAAA,CAAA,GAAA,IAAA;CACvB;AAAL,iBAQc,UAAA,CARd;EAAA,SAAA;EAAA,UAAA;EAAA,YAAA;EAAA,WAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAkBC,eAlBD,CAAA,EAkBgB,oBAAA,CAAA,GAAA,CAAA,OAlBhB"}

package/dist/modules/storage/components/upload-zone.client.mjs

@@ -1,45 +1,30 @@
 "use client";
 
 import { cn } from "../../../lib/utils/cn.mjs";
-import { Input } from "../../../components/ui/input.mjs";
 import { useAction } from "../../../lib/hooks/use-action.mjs";
 import { toast } from "../../../components/ui/sonner.client.mjs";
 import { UploadZoneContext } from "./upload-zone-context.client.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { useDropzone } from "react-dropzone";
 
 //#region src/modules/storage/components/upload-zone.client.tsx
-function UploadZone({ variables, queryKey, uploadClient, uploadHooks, onUploadCompleted, onUploadFailed, children, className, onDragOver, onDragLeave, ...props }) {
-	const queryClient = useQueryClient();
-	const [isDragging, setIsDragging] = useState(false);
-	/**
-	* Optimisticly update the data
-	*/
-	const updateData = useCallback(async (newValue) => {
-		await queryClient.cancelQueries({ queryKey });
-		await queryClient.setQueryData(queryKey, newValue);
-	}, [queryClient, queryKey]);
-	/**
-	* Invalidate the query
-	*/
-	const invalidateQuery = useCallback(async () => {
-		await queryClient.invalidateQueries({ queryKey });
-	}, [queryClient, queryKey]);
+function UploadZone({ variables, optimistic, uploadClient, uploadHooks, onUploadCompleted, onUploadFailed, children, className, ...props }) {
 	/**
 	* Delete mutation
 	*/
 	const deleteMutation = useAction({
-		mutationFn: async (params) => uploadClient.deleteFiles(params.ids),
-		onMutate: async (variables$1) => {
-			await updateData((prev) => prev.filter((node) => !variables$1.ids.includes(node.id)));
-		},
-		onSuccess: async () => {
-			await invalidateQuery();
+		mutationFn: async (ids) => uploadClient.deleteFiles(ids),
+		onMutate: async (ids) => {
+			await optimistic?.cancel?.();
+			await optimistic?.remove?.(ids);
 		},
 		onError: async (error) => {
-			await onUploadFailed?.(error);
 			console.error("Delete failed upload error: ", error);
+			await onUploadFailed?.(error);
+		},
+		onSettled: () => {
+			optimistic?.invalidate?.();
 		}
 	});
 	/**
@@ -53,7 +38,8 @@ function UploadZone({ variables, queryKey, uploadClient, uploadHooks, onUploadCo
 				type: "file",
 				isPending: true
 			};
-			await updateData((prev) => [...prev ?? [], newNode]);
+			await optimistic?.cancel?.();
+			await optimistic?.add?.(newNode);
 		},
 		onSuccess: async (data) => {
 			await onUploadCompleted?.(data);
@@ -64,16 +50,17 @@ function UploadZone({ variables, queryKey, uploadClient, uploadHooks, onUploadCo
 			console.error("Upload error: ", error);
 			toast.error("Bestand uploaden mislukt", { description: error instanceof Error ? error.message : void 0 });
 			console.info("Deleting failed upload");
-			await deleteMutation.mutateAsync({ ids: [variables$1.id] });
+			await deleteMutation.mutateAsync([variables$1.id]);
 		},
 		onSettled: () => {
-			queryClient.invalidateQueries({ queryKey });
+			optimistic?.invalidate?.();
 		}
 	});
 	/**
 	* Upload file handler
 	*/
 	const onUpload = useCallback(async (file) => {
+		console.info("Uploading file", file);
 		const req = uploadClient.prepareUpload({
 			...variables,
 			file
@@ -84,38 +71,31 @@ function UploadZone({ variables, queryKey, uploadClient, uploadHooks, onUploadCo
 		variables,
 		uploadMutation
 	]);
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop: useCallback(async (acceptedFiles) => {
+			if (acceptedFiles.length === 0) return;
+			await Promise.allSettled(acceptedFiles.map(onUpload));
+		}, [onUpload]),
+		noClick: true
+	});
+	console.log("isDragActive", isDragActive);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cn("relative z-0 flex-1 space-y-6", className),
-		onDragOver: (...args) => {
-			setIsDragging(true);
-			return onDragOver?.(...args);
-		},
-		onDragLeave: (...args) => {
-			setIsDragging(false);
-			return onDragLeave?.(...args);
-		},
-		children: [isDragging && /* @__PURE__ */ jsx("div", {
-			className: "border-primary bg-primary/20 absolute -inset-5 z-10 rounded-md border opacity-70 backdrop-blur-3xl",
-			children: /* @__PURE__ */ jsx(Input, {
-				multiple: true,
-				type: "file",
-				className: "h-full w-full opacity-0",
-				onChange: async (e) => {
-					setIsDragging(false);
-					if (!e.target.files) return;
-					await Promise.allSettled(Array.from(e.target.files).map(onUpload));
-				}
+		...getRootProps(),
+		className: cn("relative z-0", className),
+		children: [
+			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
+			isDragActive && /* @__PURE__ */ jsx("div", { className: "bg-primary/20 border-primary absolute inset-0 z-10 rounded-md border opacity-70 backdrop-blur-3xl" }),
+			/* @__PURE__ */ jsx(UploadZoneContext, {
+				value: {
+					uploadClient,
+					onUpload,
+					onRemove: deleteMutation.mutateAsync,
+					optimistic
+				},
+				children
 			})
-		}), /* @__PURE__ */ jsx(UploadZoneContext, {
-			value: {
-				uploadClient,
-				onUpload,
-				updateData,
-				invalidateQuery
-			},
-			children
-		})]
+		]
 	});
 }
 

package/dist/modules/storage/components/upload-zone.client.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-zone.client.mjs","names":["variables"],"sources":["../../../../src/modules/storage/components/upload-zone.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Input } from \"@/components/ui/input\";\nimport { toast } from \"@/components/ui/sonner.client\";\nimport { cn } from \"@/lib/entry\";\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport { ComponentProps, useCallback, useState } from \"react\";\nimport { UploadClient, UploadFileRequest, UploadHooks } from \"../lib/create-upload.client\";\nimport { FileNode, Node, UploadFileSchema } from \"../lib/validators\";\nimport { UploadZoneContext } from \"./upload-zone-context.client\";\n\nexport type UploadZoneProps = ComponentProps<\"div\"> & {\n  queryKey: readonly unknown[];\n\n  variables: Pick<UploadFileSchema, \"namespace\" | \"parentId\" | \"mode\" | \"hidden\" | \"readonly\">;\n  uploadClient: UploadClient;\n  uploadHooks?: UploadHooks;\n\n  onUploadCompleted?: (node: Node) => Promise<void> | void;\n  onUploadFailed?: (error: unknown) => Promise<void> | void;\n};\n\nexport function UploadZone({\n  variables,\n  queryKey,\n  uploadClient,\n  uploadHooks,\n  onUploadCompleted,\n  onUploadFailed,\n  children,\n  className,\n  onDragOver,\n  onDragLeave,\n  ...props\n}: UploadZoneProps) {\n  const queryClient = useQueryClient();\n  const [isDragging, setIsDragging] = useState(false);\n\n  /**\n   * Optimisticly update the data\n   */\n  const updateData = useCallback(\n    async (newValue: FileNode[] | ((oldValue: FileNode[]) => FileNode[])) => {\n      await queryClient.cancelQueries({ queryKey });\n      await queryClient.setQueryData(queryKey, newValue);\n    },\n    [queryClient, queryKey],\n  );\n\n  /**\n   * Invalidate the query\n   */\n  const invalidateQuery = useCallback(async () => {\n    await queryClient.invalidateQueries({ queryKey });\n  }, [queryClient, queryKey]);\n\n  /**\n   * Delete mutation\n   */\n  const deleteMutation = useAction({\n    mutationFn: async (params: { ids: string[] }) => uploadClient.deleteFiles(params.ids),\n    onMutate: async (variables) => {\n      await updateData((prev) => prev.filter((node) => !variables.ids.includes(node.id)));\n    },\n    onSuccess: async () => {\n      await invalidateQuery();\n    },\n    onError: async (error) => {\n      await onUploadFailed?.(error);\n      console.error(\"Delete failed upload error: \", error);\n    },\n  });\n\n  /**\n   * Upload mutation\n   */\n  const uploadMutation = useAction({\n    mutationFn: async (params: UploadFileRequest) => uploadClient.upload(params, uploadHooks),\n    onMutate: async (variables) => {\n      // Generate a new node\n      const newNode = {\n        ...variables,\n        type: \"file\",\n        isPending: true,\n      } as FileNode;\n\n      await updateData((prev) => [...(prev ?? []), newNode]);\n    },\n    onSuccess: async (data) => {\n      await onUploadCompleted?.(data);\n      toast.success(`Succesvol geupload: ${data.name}`);\n    },\n    onError: async (error, variables) => {\n      await onUploadFailed?.(error);\n\n      console.error(\"Upload error: \", error);\n      toast.error(\"Bestand uploaden mislukt\", {\n        description: error instanceof Error ? error.message : undefined,\n      });\n\n      console.info(\"Deleting failed upload\");\n      await deleteMutation.mutateAsync({ ids: [variables.id] });\n    },\n    onSettled: () => {\n      queryClient.invalidateQueries({ queryKey });\n    },\n  });\n\n  /**\n   * Upload file handler\n   */\n  const onUpload = useCallback(\n    async (file: File) => {\n      const req = uploadClient.prepareUpload({ ...variables, file });\n      return await uploadMutation.mutateAsync(req);\n    },\n    [uploadClient, variables, uploadMutation],\n  );\n\n  return (\n    <div\n      {...props}\n      className={cn(\"relative z-0 flex-1 space-y-6\", className)}\n      onDragOver={(...args) => {\n        setIsDragging(true);\n        return onDragOver?.(...args);\n      }}\n      onDragLeave={(...args) => {\n        setIsDragging(false);\n        return onDragLeave?.(...args);\n      }}\n    >\n      {isDragging && (\n        <div className=\"border-primary bg-primary/20 absolute -inset-5 z-10 rounded-md border opacity-70 backdrop-blur-3xl\">\n          <Input\n            multiple\n            type=\"file\"\n            className=\"h-full w-full opacity-0\"\n            onChange={async (e) => {\n              setIsDragging(false);\n\n              if (!e.target.files) return;\n\n              await Promise.allSettled(Array.from(e.target.files).map(onUpload));\n            }}\n          />\n        </div>\n      )}\n      <UploadZoneContext\n        value={{\n          uploadClient,\n          onUpload,\n          updateData,\n          invalidateQuery,\n        }}\n      >\n        {children}\n      </UploadZoneContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,SAAgB,WAAW,EACzB,WACA,UACA,cACA,aACA,mBACA,gBACA,UACA,WACA,YACA,aACA,GAAG,SACe;CAClB,MAAM,cAAc,gBAAgB;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;;;;CAKnD,MAAM,aAAa,YACjB,OAAO,aAAkE;AACvE,QAAM,YAAY,cAAc,EAAE,UAAU,CAAC;AAC7C,QAAM,YAAY,aAAa,UAAU,SAAS;IAEpD,CAAC,aAAa,SAAS,CACxB;;;;CAKD,MAAM,kBAAkB,YAAY,YAAY;AAC9C,QAAM,YAAY,kBAAkB,EAAE,UAAU,CAAC;IAChD,CAAC,aAAa,SAAS,CAAC;;;;CAK3B,MAAM,iBAAiB,UAAU;EAC/B,YAAY,OAAO,WAA8B,aAAa,YAAY,OAAO,IAAI;EACrF,UAAU,OAAO,gBAAc;AAC7B,SAAM,YAAY,SAAS,KAAK,QAAQ,SAAS,CAACA,YAAU,IAAI,SAAS,KAAK,GAAG,CAAC,CAAC;;EAErF,WAAW,YAAY;AACrB,SAAM,iBAAiB;;EAEzB,SAAS,OAAO,UAAU;AACxB,SAAM,iBAAiB,MAAM;AAC7B,WAAQ,MAAM,gCAAgC,MAAM;;EAEvD,CAAC;;;;CAKF,MAAM,iBAAiB,UAAU;EAC/B,YAAY,OAAO,WAA8B,aAAa,OAAO,QAAQ,YAAY;EACzF,UAAU,OAAO,gBAAc;GAE7B,MAAM,UAAU;IACd,GAAGA;IACH,MAAM;IACN,WAAW;IACZ;AAED,SAAM,YAAY,SAAS,CAAC,GAAI,QAAQ,EAAE,EAAG,QAAQ,CAAC;;EAExD,WAAW,OAAO,SAAS;AACzB,SAAM,oBAAoB,KAAK;AAC/B,SAAM,QAAQ,uBAAuB,KAAK,OAAO;;EAEnD,SAAS,OAAO,OAAO,gBAAc;AACnC,SAAM,iBAAiB,MAAM;AAE7B,WAAQ,MAAM,kBAAkB,MAAM;AACtC,SAAM,MAAM,4BAA4B,EACtC,aAAa,iBAAiB,QAAQ,MAAM,UAAU,QACvD,CAAC;AAEF,WAAQ,KAAK,yBAAyB;AACtC,SAAM,eAAe,YAAY,EAAE,KAAK,CAACA,YAAU,GAAG,EAAE,CAAC;;EAE3D,iBAAiB;AACf,eAAY,kBAAkB,EAAE,UAAU,CAAC;;EAE9C,CAAC;;;;CAKF,MAAM,WAAW,YACf,OAAO,SAAe;EACpB,MAAM,MAAM,aAAa,cAAc;GAAE,GAAG;GAAW;GAAM,CAAC;AAC9D,SAAO,MAAM,eAAe,YAAY,IAAI;IAE9C;EAAC;EAAc;EAAW;EAAe,CAC1C;AAED,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GAAG,iCAAiC,UAAU;EACzD,aAAa,GAAG,SAAS;AACvB,iBAAc,KAAK;AACnB,UAAO,aAAa,GAAG,KAAK;;EAE9B,cAAc,GAAG,SAAS;AACxB,iBAAc,MAAM;AACpB,UAAO,cAAc,GAAG,KAAK;;aAG9B,cACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC;IACA,MAAK;IACL,WAAU;IACV,UAAU,OAAO,MAAM;AACrB,mBAAc,MAAM;AAEpB,SAAI,CAAC,EAAE,OAAO,MAAO;AAErB,WAAM,QAAQ,WAAW,MAAM,KAAK,EAAE,OAAO,MAAM,CAAC,IAAI,SAAS,CAAC;;KAEpE;IACE,EAER,oBAAC;GACC,OAAO;IACL;IACA;IACA;IACA;IACD;GAEA;IACiB;GAChB"}
+{"version":3,"file":"upload-zone.client.mjs","names":["variables"],"sources":["../../../../src/modules/storage/components/upload-zone.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { toast } from \"@/components/ui/sonner.client\";\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { ComponentProps, useCallback } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { UploadFileRequest, UploadHooks } from \"../lib/create-upload.client\";\nimport { FileNode, Node, UploadFileSchema } from \"../lib/validators\";\nimport { UploadZoneContext, UploadZoneContextValue } from \"./upload-zone-context.client\";\n\nexport type UploadZoneProps = ComponentProps<\"div\"> &\n  Pick<UploadZoneContextValue, \"optimistic\" | \"uploadClient\"> & {\n    variables: Pick<UploadFileSchema, \"namespace\" | \"parentId\" | \"mode\" | \"hidden\" | \"readonly\">;\n    uploadHooks?: UploadHooks;\n\n    onUploadCompleted?: (node: Node) => Promise<void> | void;\n    onUploadFailed?: (error: unknown) => Promise<void> | void;\n  };\n\nexport function UploadZone({\n  variables,\n  optimistic,\n  uploadClient,\n  uploadHooks,\n  onUploadCompleted,\n  onUploadFailed,\n  children,\n  className,\n  ...props\n}: UploadZoneProps) {\n  /**\n   * Delete mutation\n   */\n  const deleteMutation = useAction({\n    mutationFn: async (ids: string[]) => uploadClient.deleteFiles(ids),\n    onMutate: async (ids) => {\n      await optimistic?.cancel?.();\n      await optimistic?.remove?.(ids);\n    },\n    onError: async (error) => {\n      console.error(\"Delete failed upload error: \", error);\n      await onUploadFailed?.(error);\n    },\n    onSettled: () => {\n      optimistic?.invalidate?.();\n    },\n  });\n\n  /**\n   * Upload mutation\n   */\n  const uploadMutation = useAction({\n    mutationFn: async (params: UploadFileRequest) => uploadClient.upload(params, uploadHooks),\n    onMutate: async (variables) => {\n      // Generate a new node\n      const newNode = {\n        ...variables,\n        type: \"file\",\n        isPending: true,\n      } as FileNode;\n\n      await optimistic?.cancel?.();\n      await optimistic?.add?.(newNode);\n    },\n    onSuccess: async (data) => {\n      await onUploadCompleted?.(data);\n      toast.success(`Succesvol geupload: ${data.name}`);\n    },\n    onError: async (error, variables) => {\n      await onUploadFailed?.(error);\n\n      console.error(\"Upload error: \", error);\n      toast.error(\"Bestand uploaden mislukt\", {\n        description: error instanceof Error ? error.message : undefined,\n      });\n\n      console.info(\"Deleting failed upload\");\n      await deleteMutation.mutateAsync([variables.id]);\n    },\n    onSettled: () => {\n      optimistic?.invalidate?.();\n    },\n  });\n\n  /**\n   * Upload file handler\n   */\n  const onUpload = useCallback(\n    async (file: File) => {\n      console.info(\"Uploading file\", file);\n      const req = uploadClient.prepareUpload({ ...variables, file });\n      return await uploadMutation.mutateAsync(req);\n    },\n    [uploadClient, variables, uploadMutation],\n  );\n\n  /**\n   * Drop handler\n   */\n  const onDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      if (acceptedFiles.length === 0) return;\n      await Promise.allSettled(acceptedFiles.map(onUpload));\n    },\n    [onUpload],\n  );\n\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, noClick: true });\n\n  console.log(\"isDragActive\", isDragActive);\n\n  return (\n    <div {...props} {...getRootProps()} className={cn(\"relative z-0\", className)}>\n      <input {...getInputProps()} />\n\n      {/* Show drag overlay when drag is active */}\n      {isDragActive && (\n        <div className=\"bg-primary/20 border-primary absolute inset-0 z-10 rounded-md border opacity-70 backdrop-blur-3xl\" />\n      )}\n\n      <UploadZoneContext\n        value={{\n          uploadClient,\n          onUpload,\n          onRemove: deleteMutation.mutateAsync,\n          optimistic,\n        }}\n      >\n        {children}\n      </UploadZoneContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAgB,WAAW,EACzB,WACA,YACA,cACA,aACA,mBACA,gBACA,UACA,WACA,GAAG,SACe;;;;CAIlB,MAAM,iBAAiB,UAAU;EAC/B,YAAY,OAAO,QAAkB,aAAa,YAAY,IAAI;EAClE,UAAU,OAAO,QAAQ;AACvB,SAAM,YAAY,UAAU;AAC5B,SAAM,YAAY,SAAS,IAAI;;EAEjC,SAAS,OAAO,UAAU;AACxB,WAAQ,MAAM,gCAAgC,MAAM;AACpD,SAAM,iBAAiB,MAAM;;EAE/B,iBAAiB;AACf,eAAY,cAAc;;EAE7B,CAAC;;;;CAKF,MAAM,iBAAiB,UAAU;EAC/B,YAAY,OAAO,WAA8B,aAAa,OAAO,QAAQ,YAAY;EACzF,UAAU,OAAO,gBAAc;GAE7B,MAAM,UAAU;IACd,GAAGA;IACH,MAAM;IACN,WAAW;IACZ;AAED,SAAM,YAAY,UAAU;AAC5B,SAAM,YAAY,MAAM,QAAQ;;EAElC,WAAW,OAAO,SAAS;AACzB,SAAM,oBAAoB,KAAK;AAC/B,SAAM,QAAQ,uBAAuB,KAAK,OAAO;;EAEnD,SAAS,OAAO,OAAO,gBAAc;AACnC,SAAM,iBAAiB,MAAM;AAE7B,WAAQ,MAAM,kBAAkB,MAAM;AACtC,SAAM,MAAM,4BAA4B,EACtC,aAAa,iBAAiB,QAAQ,MAAM,UAAU,QACvD,CAAC;AAEF,WAAQ,KAAK,yBAAyB;AACtC,SAAM,eAAe,YAAY,CAACA,YAAU,GAAG,CAAC;;EAElD,iBAAiB;AACf,eAAY,cAAc;;EAE7B,CAAC;;;;CAKF,MAAM,WAAW,YACf,OAAO,SAAe;AACpB,UAAQ,KAAK,kBAAkB,KAAK;EACpC,MAAM,MAAM,aAAa,cAAc;GAAE,GAAG;GAAW;GAAM,CAAC;AAC9D,SAAO,MAAM,eAAe,YAAY,IAAI;IAE9C;EAAC;EAAc;EAAW;EAAe,CAC1C;CAaD,MAAM,EAAE,cAAc,eAAe,iBAAiB,YAAY;EAAE,QARrD,YACb,OAAO,kBAA0B;AAC/B,OAAI,cAAc,WAAW,EAAG;AAChC,SAAM,QAAQ,WAAW,cAAc,IAAI,SAAS,CAAC;KAEvD,CAAC,SAAS,CACX;EAE2E,SAAS;EAAM,CAAC;AAE5F,SAAQ,IAAI,gBAAgB,aAAa;AAEzC,QACE,qBAAC;EAAI,GAAI;EAAO,GAAI,cAAc;EAAE,WAAW,GAAG,gBAAgB,UAAU;;GAC1E,oBAAC,WAAM,GAAI,eAAe,GAAI;GAG7B,gBACC,oBAAC,SAAI,WAAU,sGAAsG;GAGvH,oBAAC;IACC,OAAO;KACL;KACA;KACA,UAAU,eAAe;KACzB;KACD;IAEA;KACiB;;GAChB"}

package/dist/modules/storage/lib/router.server.d.mts

@@ -6151,12 +6151,12 @@ declare function createDriveBaseProcedures(): {
       node: drizzle_orm0.One<"nodes", true>;
     }>;
   }>>, z$1.ZodObject<{
-    sort: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodString>>;
     search: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodString>>;
     order: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodEnum<{
       asc: "asc";
       desc: "desc";
     }>>>;
+    sort: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodString>>;
     filters: z$1.ZodPipe<z$1.ZodObject<{
       types: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodArray<z$1.ZodEnum<{
         file: "file";
@@ -15214,16 +15214,13 @@ declare function createDriveBaseProcedures(): {
       node: drizzle_orm0.One<"nodes", true>;
     }>;
   }>>, z$1.ZodObject<{
-    readonly: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
-    size: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodInt>>;
-    isPending: z$1.ZodOptional<z$1.ZodBoolean>;
-    createdAt: z$1.ZodOptional<z$1.ZodDate>;
-    updatedAt: z$1.ZodOptional<z$1.ZodDate>;
     name: z$1.ZodString;
     mode: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodEnum<{
       private: "private";
       public: "public";
     }>>>;
+    size: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodInt>>;
+    hidden: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
     namespace: z$1.ZodString;
     subtype: z$1.ZodOptional<z$1.ZodEnum<{
       image: "image";
@@ -15235,8 +15232,11 @@ declare function createDriveBaseProcedures(): {
       other: "other";
     }>>;
     contentType: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodString>>;
-    hidden: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
+    readonly: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
+    createdAt: z$1.ZodOptional<z$1.ZodDate>;
+    updatedAt: z$1.ZodOptional<z$1.ZodDate>;
     createdBy: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodUUID>>;
+    isPending: z$1.ZodOptional<z$1.ZodBoolean>;
     isDeleted: z$1.ZodOptional<z$1.ZodBoolean>;
     orphanedAt: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodDate>>;
     parentId: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodUUID>>;
@@ -21351,18 +21351,18 @@ declare function createDriveBaseProcedures(): {
     }>;
   }>>, z$1.ZodObject<{
     id: z$1.ZodOptional<z$1.ZodUUID>;
-    readonly: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
-    isPending: z$1.ZodOptional<z$1.ZodBoolean>;
-    createdAt: z$1.ZodOptional<z$1.ZodDate>;
-    updatedAt: z$1.ZodOptional<z$1.ZodDate>;
     name: z$1.ZodString;
     mode: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodEnum<{
       private: "private";
       public: "public";
     }>>>;
-    namespace: z$1.ZodString;
     hidden: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
+    namespace: z$1.ZodString;
+    readonly: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodBoolean>>;
+    createdAt: z$1.ZodOptional<z$1.ZodDate>;
+    updatedAt: z$1.ZodOptional<z$1.ZodDate>;
     createdBy: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodUUID>>;
+    isPending: z$1.ZodOptional<z$1.ZodBoolean>;
     isDeleted: z$1.ZodOptional<z$1.ZodBoolean>;
     orphanedAt: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodDate>>;
     parentId: z$1.ZodOptional<z$1.ZodNullable<z$1.ZodUUID>>;