@tulip-systems/core 0.4.0 → 0.5.0

package/dist/modules/router/lib/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../../src/modules/router/lib/helpers.ts"],"sourcesContent":["import { StandardRPCJsonSerializer } from \"@orpc/client/standard\";\n\nexport const serializer = new StandardRPCJsonSerializer();\n"],"mappings":";;;AAEA,MAAa,aAAa,IAAI,2BAA2B"}

package/dist/modules/router/lib/query-client.d.mts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+//#region src/modules/router/lib/query-client.d.ts
+
+/**
+ * Create a new query client
+ */
+declare function createQueryClient(): QueryClient;
+//#endregion
+export { createQueryClient };
+//# sourceMappingURL=query-client.d.mts.map

package/dist/modules/router/lib/query-client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-client.d.mts","names":[],"sources":["../../../../src/modules/router/lib/query-client.ts"],"sourcesContent":[],"mappings":";;;;;;AAMA;iBAAgB,iBAAA,CAAA,GAAiB"}

package/dist/modules/router/lib/query-client.mjs

@@ -0,0 +1,51 @@
+import { serializer } from "./helpers.mjs";
+import { MutationCache, QueryClient, isServer } from "@tanstack/react-query";
+
+//#region src/modules/router/lib/query-client.ts
+/**
+* Create a new query client
+*/
+function createQueryClient() {
+	let queryClient;
+	queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				queryKeyHashFn(queryKey) {
+					const [json, meta] = serializer.serialize(queryKey);
+					return JSON.stringify({
+						json,
+						meta
+					});
+				},
+				staleTime: 60 * 1e3
+			},
+			dehydrate: { serializeData(data) {
+				const [json, meta] = serializer.serialize(data);
+				return {
+					json,
+					meta
+				};
+			} },
+			hydrate: { deserializeData(data) {
+				return serializer.deserialize(data.json, data.meta);
+			} }
+		},
+		mutationCache: new MutationCache({ onSuccess: () => {
+			queryClient.invalidateQueries();
+		} })
+	});
+	return queryClient;
+}
+/**
+*  Create a stable getter for the query client that will return the same client during the same request.
+*/
+let browserQueryClient;
+function getQueryClient() {
+	if (isServer) return createQueryClient();
+	if (!browserQueryClient) browserQueryClient = createQueryClient();
+	return browserQueryClient;
+}
+
+//#endregion
+export { createQueryClient, getQueryClient };
+//# sourceMappingURL=query-client.mjs.map

package/dist/modules/router/lib/query-client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-client.mjs","names":["queryClient: QueryClient","browserQueryClient: QueryClient"],"sources":["../../../../src/modules/router/lib/query-client.ts"],"sourcesContent":["import { isServer, MutationCache, QueryClient } from \"@tanstack/react-query\";\nimport { serializer } from \"./helpers\";\n\n/**\n * Create a new query client\n */\nexport function createQueryClient() {\n  // eslint-disable-next-line prefer-const\n  let queryClient: QueryClient;\n\n  const mutationCache = new MutationCache({\n    onSuccess: () => {\n      // Invalidate all queries in the react-query cache:\n      queryClient.invalidateQueries();\n    },\n  });\n\n  queryClient = new QueryClient({\n    defaultOptions: {\n      queries: {\n        queryKeyHashFn(queryKey) {\n          const [json, meta] = serializer.serialize(queryKey);\n          return JSON.stringify({ json, meta });\n        },\n        staleTime: 60 * 1000, // > 0 to prevent immediate refetching on mount\n      },\n      dehydrate: {\n        serializeData(data) {\n          const [json, meta] = serializer.serialize(data);\n          return { json, meta };\n        },\n      },\n      hydrate: {\n        deserializeData(data) {\n          return serializer.deserialize(data.json, data.meta);\n        },\n      },\n    },\n    mutationCache,\n  });\n\n  return queryClient;\n}\n\n/**\n *  Create a stable getter for the query client that will return the same client during the same request.\n */\nlet browserQueryClient: QueryClient;\n\nexport function getQueryClient() {\n  if (isServer) {\n    // Server: always make a new query client\n    return createQueryClient();\n  }\n\n  // Browser: make a new query client if we don't already have one\n  // This is very important, so we don't re-make a new client if React\n  // suspends during the initial render. This may not be needed if we\n  // have a suspense boundary BELOW the creation of the query client\n  if (!browserQueryClient) browserQueryClient = createQueryClient();\n\n  return browserQueryClient;\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,oBAAoB;CAElC,IAAIA;AASJ,eAAc,IAAI,YAAY;EAC5B,gBAAgB;GACd,SAAS;IACP,eAAe,UAAU;KACvB,MAAM,CAAC,MAAM,QAAQ,WAAW,UAAU,SAAS;AACnD,YAAO,KAAK,UAAU;MAAE;MAAM;MAAM,CAAC;;IAEvC,WAAW,KAAK;IACjB;GACD,WAAW,EACT,cAAc,MAAM;IAClB,MAAM,CAAC,MAAM,QAAQ,WAAW,UAAU,KAAK;AAC/C,WAAO;KAAE;KAAM;KAAM;MAExB;GACD,SAAS,EACP,gBAAgB,MAAM;AACpB,WAAO,WAAW,YAAY,KAAK,MAAM,KAAK,KAAK;MAEtD;GACF;EACD,eA5BoB,IAAI,cAAc,EACtC,iBAAiB;AAEf,eAAY,mBAAmB;KAElC,CAAC;EAwBD,CAAC;AAEF,QAAO;;;;;AAMT,IAAIC;AAEJ,SAAgB,iBAAiB;AAC/B,KAAI,SAEF,QAAO,mBAAmB;AAO5B,KAAI,CAAC,mBAAoB,sBAAqB,mBAAmB;AAEjE,QAAO"}

package/dist/modules/router/lib/query-client.server.d.mts

@@ -0,0 +1,18 @@
+import { createQueryClient } from "./query-client.mjs";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
+import "server-cli-only";
+
+//#region src/modules/router/lib/query-client.server.d.ts
+/**
+ *  Create a stable getter for the query client that will return the same client during the same request.
+ */
+declare const getQueryClient: typeof createQueryClient;
+/**
+ * Hydrate the client with the data from the server
+ */
+declare function HydrateClient(props: {
+  children: React.ReactNode;
+}): react_jsx_runtime43.JSX.Element;
+//#endregion
+export { HydrateClient, getQueryClient };
+//# sourceMappingURL=query-client.server.d.mts.map

package/dist/modules/router/lib/query-client.server.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-client.server.d.mts","names":[],"sources":["../../../../src/modules/router/lib/query-client.server.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AASa,cAAA,cAAc,EAAA,OAAA,iBAA2B;AAKtD;;;iBAAgB,aAAA;YAAiC,KAAA,CAAM;IAAW,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/router/lib/query-client.server.mjs

@@ -0,0 +1,24 @@
+import { createQueryClient } from "./query-client.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cache } from "react";
+import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import "server-cli-only";
+
+//#region src/modules/router/lib/query-client.server.tsx
+/**
+*  Create a stable getter for the query client that will return the same client during the same request.
+*/
+const getQueryClient = cache(createQueryClient);
+/**
+* Hydrate the client with the data from the server
+*/
+function HydrateClient(props) {
+	return /* @__PURE__ */ jsx(HydrationBoundary, {
+		state: dehydrate(getQueryClient()),
+		children: props.children
+	});
+}
+
+//#endregion
+export { HydrateClient, getQueryClient };
+//# sourceMappingURL=query-client.server.mjs.map

package/dist/modules/router/lib/query-client.server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-client.server.mjs","names":[],"sources":["../../../../src/modules/router/lib/query-client.server.tsx"],"sourcesContent":["import \"server-cli-only\";\n\nimport { dehydrate, HydrationBoundary } from \"@tanstack/react-query\";\nimport { cache } from \"react\";\nimport { createQueryClient } from \"./query-client\";\n\n/**\n *  Create a stable getter for the query client that will return the same client during the same request.\n */\nexport const getQueryClient = cache(createQueryClient);\n\n/**\n * Hydrate the client with the data from the server\n */\nexport function HydrateClient(props: { children: React.ReactNode }) {\n  const queryClient = getQueryClient();\n\n  return <HydrationBoundary state={dehydrate(queryClient)}>{props.children}</HydrationBoundary>;\n}\n"],"mappings":";;;;;;;;;;AASA,MAAa,iBAAiB,MAAM,kBAAkB;;;;AAKtD,SAAgB,cAAc,OAAsC;AAGlE,QAAO,oBAAC;EAAkB,OAAO,UAFb,gBAAgB,CAEmB;YAAG,MAAM;GAA6B"}

package/dist/modules/router/lib/validators.d.mts

@@ -0,0 +1,14 @@
+import { z as z$1 } from "zod";
+
+//#region src/modules/router/lib/validators.d.ts
+
+/**
+ * Bulk action schema
+ */
+declare const bulkActionSchema: z$1.ZodObject<{
+  ids: z$1.ZodArray<z$1.ZodString>;
+}, z$1.core.$strip>;
+type BulkActionSchema = z$1.infer<typeof bulkActionSchema>;
+//#endregion
+export { BulkActionSchema, bulkActionSchema };
+//# sourceMappingURL=validators.d.mts.map

package/dist/modules/router/lib/validators.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.mts","names":[],"sources":["../../../../src/modules/router/lib/validators.ts"],"sourcesContent":[],"mappings":";;;;;;AAKA;cAAa,kBAAgB,GAAA,CAAA;;;AAAA,KAIjB,gBAAA,GAAmB,GAAA,CAAE,KAJJ,CAAA,OAIiB,gBAJjB,CAAA"}

package/dist/modules/router/lib/validators.mjs

@@ -0,0 +1,11 @@
+import { z as z$1 } from "zod";
+
+//#region src/modules/router/lib/validators.ts
+/**
+* Bulk action schema
+*/
+const bulkActionSchema = z$1.object({ ids: z$1.array(z$1.string()) });
+
+//#endregion
+export { bulkActionSchema };
+//# sourceMappingURL=validators.mjs.map

package/dist/modules/router/lib/validators.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.mjs","names":["z"],"sources":["../../../../src/modules/router/lib/validators.ts"],"sourcesContent":["import { z } from \"zod\";\n\n/**\n * Bulk action schema\n */\nexport const bulkActionSchema = z.object({\n  ids: z.array(z.string()),\n});\n\nexport type BulkActionSchema = z.infer<typeof bulkActionSchema>;\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmBA,IAAE,OAAO,EACvC,KAAKA,IAAE,MAAMA,IAAE,QAAQ,CAAC,EACzB,CAAC"}

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

@@ -0,0 +1,19 @@
+import * as react0 from "react";
+import { DropzoneOptions } from "react-dropzone";
+
+//#region src/modules/storage/components/dropzone-context.client.d.ts
+type DropzoneContextType = {
+  src?: File[];
+  accept?: DropzoneOptions["accept"];
+  maxSize?: DropzoneOptions["maxSize"];
+  minSize?: DropzoneOptions["minSize"];
+  maxFiles?: DropzoneOptions["maxFiles"];
+};
+declare const DropzoneContext: react0.Context<DropzoneContextType | undefined>;
+/**
+ * Dropzone context hook
+ */
+declare function useDropzoneContext(): DropzoneContextType;
+//#endregion
+export { DropzoneContext, useDropzoneContext };
+//# sourceMappingURL=dropzone-context.client.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone-context.client.d.mts","names":[],"sources":["../../../../src/modules/storage/components/dropzone-context.client.tsx"],"sourcesContent":[],"mappings":";;;;KAKK,mBAAA;QACG;WACG;EAFN,OAAA,CAAA,EAGO,eAHY,CAAA,SAAA,CAAA;EAChB,OAAA,CAAA,EAGI,eAHJ,CAAA,SAAA,CAAA;EACG,QAAA,CAAA,EAGE,eAHF,CAAA,UAAA,CAAA;CACC;AACA,cAIC,eAJD,EAIgB,MAAA,CAAA,OAJhB,CAIgB,mBAJhB,GAAA,SAAA,CAAA;;;AAIZ;AAKgB,iBAAA,kBAAA,CAAA,CAAkB,EAAA,mBAAA"}

package/dist/modules/storage/components/dropzone-context.client.mjs

@@ -0,0 +1,18 @@
+"use client";
+
+import { createContext, use } from "react";
+
+//#region src/modules/storage/components/dropzone-context.client.tsx
+const DropzoneContext = createContext(void 0);
+/**
+* Dropzone context hook
+*/
+function useDropzoneContext() {
+	const context = use(DropzoneContext);
+	if (!context) throw new Error("useDropzoneContext must be used within a Dropzone");
+	return context;
+}
+
+//#endregion
+export { DropzoneContext, useDropzoneContext };
+//# sourceMappingURL=dropzone-context.client.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone-context.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/dropzone-context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, use } from \"react\";\nimport { DropzoneOptions } from \"react-dropzone\";\n\ntype DropzoneContextType = {\n  src?: File[];\n  accept?: DropzoneOptions[\"accept\"];\n  maxSize?: DropzoneOptions[\"maxSize\"];\n  minSize?: DropzoneOptions[\"minSize\"];\n  maxFiles?: DropzoneOptions[\"maxFiles\"];\n};\n\nexport const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined);\n\n/**\n * Dropzone context hook\n */\nexport function useDropzoneContext() {\n  const context = use(DropzoneContext);\n  if (!context) throw new Error(\"useDropzoneContext must be used within a Dropzone\");\n  return context;\n}\n"],"mappings":";;;;;AAaA,MAAa,kBAAkB,cAA+C,OAAU;;;;AAKxF,SAAgB,qBAAqB;CACnC,MAAM,UAAU,IAAI,gBAAgB;AACpC,KAAI,CAAC,QAAS,OAAM,IAAI,MAAM,oDAAoD;AAClF,QAAO"}

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

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime47 from "react/jsx-runtime";
+import * as react1 from "react";
+import { ReactNode } from "react";
+import { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
+
+//#region src/modules/storage/components/dropzone.client.d.ts
+/**
+ * Dropzone
+ */
+type DropzoneProps = Omit<DropzoneOptions, "onDrop"> & {
+  src?: File[];
+  className?: string;
+  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;
+  children?: ReactNode;
+};
+declare function Dropzone({
+  accept,
+  maxFiles,
+  maxSize,
+  minSize,
+  onDrop,
+  onError,
+  disabled,
+  src,
+  className,
+  children,
+  ...props
+}: DropzoneProps): react_jsx_runtime47.JSX.Element;
+/**
+ * DropzoneContent
+ */
+type DropzoneContentProps = {
+  children?: ReactNode;
+  className?: string;
+};
+declare function DropzoneContent({
+  children,
+  className
+}: DropzoneContentProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react1.ReactPortal | react1.ReactElement<unknown, string | react1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime47.JSX.Element | null;
+/**
+ * DropzoneEmptyState
+ */
+type DropzoneEmptyStateProps = {
+  children?: ReactNode;
+  className?: string;
+};
+declare function DropzoneEmptyState({
+  children,
+  className
+}: DropzoneEmptyStateProps): string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react1.ReactPortal | react1.ReactElement<unknown, string | react1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime47.JSX.Element | 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

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

package/dist/modules/storage/components/dropzone.client.mjs

@@ -0,0 +1,111 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { renderBytes } from "../lib/helpers.mjs";
+import { DropzoneContext, useDropzoneContext } from "./dropzone-context.client.mjs";
+import { UploadIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDropzone } from "react-dropzone";
+
+//#region src/modules/storage/components/dropzone.client.tsx
+function Dropzone({ accept, maxFiles = 1, maxSize, minSize, onDrop, onError, disabled, src, className, children, ...props }) {
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		accept,
+		maxFiles,
+		maxSize,
+		minSize,
+		onError,
+		disabled,
+		onDrop: (acceptedFiles, fileRejections, event) => {
+			if (fileRejections.length > 0) {
+				const message = fileRejections.at(0)?.errors.at(0)?.message;
+				onError?.(new Error(message));
+				return;
+			}
+			onDrop?.(acceptedFiles, fileRejections, event);
+		},
+		...props
+	});
+	return /* @__PURE__ */ jsx(DropzoneContext, {
+		value: {
+			src,
+			accept,
+			maxSize,
+			minSize,
+			maxFiles
+		},
+		children: /* @__PURE__ */ jsxs(Button, {
+			className: cn("relative h-auto w-full flex-col overflow-hidden p-8", isDragActive && "ring-ring outline-none ring-1", className),
+			disabled,
+			type: "button",
+			variant: "outline",
+			...getRootProps(),
+			children: [/* @__PURE__ */ jsx("input", {
+				...getInputProps(),
+				disabled
+			}), children]
+		})
+	}, JSON.stringify(src));
+}
+const maxLabelItems = 3;
+function DropzoneContent({ children, className }) {
+	const { src } = useDropzoneContext();
+	if (!src) return null;
+	if (children) return children;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md",
+				children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "my-2 w-full truncate text-sm font-medium",
+				children: src.length > maxLabelItems ? `${new Intl.ListFormat("en").format(src.slice(0, maxLabelItems).map((file) => file.name))} and ${src.length - maxLabelItems} more` : new Intl.ListFormat("en").format(src.map((file) => file.name))
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground w-full text-wrap text-xs",
+				children: "Drag and drop or click to replace"
+			})
+		]
+	});
+}
+function DropzoneEmptyState({ children, className }) {
+	const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();
+	if (src) return null;
+	if (children) return children;
+	let caption = "";
+	if (accept) {
+		caption += "Accepts ";
+		caption += new Intl.ListFormat("en").format(Object.keys(accept));
+	}
+	if (minSize && maxSize) caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
+	else if (minSize) caption += ` at least ${renderBytes(minSize)}`;
+	else if (maxSize) caption += ` less than ${renderBytes(maxSize)}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md",
+				children: /* @__PURE__ */ jsx(UploadIcon, { size: 16 })
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "my-2 w-full truncate text-wrap text-sm font-medium",
+				children: ["Upload ", maxFiles === 1 ? "a file" : "files"]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground w-full truncate text-wrap text-xs",
+				children: "Drag and drop or click to upload"
+			}),
+			caption && /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground text-wrap text-xs",
+				children: [caption, "."]
+			})
+		]
+	});
+}
+
+//#endregion
+export { Dropzone, DropzoneContent, DropzoneEmptyState };
+//# sourceMappingURL=dropzone.client.mjs.map

package/dist/modules/storage/components/dropzone.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.client.mjs","names":[],"sources":["../../../../src/modules/storage/components/dropzone.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { renderBytes } from \"@/modules/storage/lib/helpers\";\nimport { UploadIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport type { DropEvent, DropzoneOptions, FileRejection } from \"react-dropzone\";\nimport { useDropzone } from \"react-dropzone\";\nimport { DropzoneContext, useDropzoneContext } from \"./dropzone-context.client\";\n\n/**\n * Dropzone\n */\nexport type DropzoneProps = Omit<DropzoneOptions, \"onDrop\"> & {\n  src?: File[];\n  className?: string;\n  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void;\n  children?: ReactNode;\n};\n\nexport function Dropzone({\n  accept,\n  maxFiles = 1,\n  maxSize,\n  minSize,\n  onDrop,\n  onError,\n  disabled,\n  src,\n  className,\n  children,\n  ...props\n}: DropzoneProps) {\n  const { getRootProps, getInputProps, isDragActive } = useDropzone({\n    accept,\n    maxFiles,\n    maxSize,\n    minSize,\n    onError,\n    disabled,\n    onDrop: (acceptedFiles, fileRejections, event) => {\n      if (fileRejections.length > 0) {\n        const message = fileRejections.at(0)?.errors.at(0)?.message;\n        onError?.(new Error(message));\n        return;\n      }\n      onDrop?.(acceptedFiles, fileRejections, event);\n    },\n    ...props,\n  });\n\n  return (\n    <DropzoneContext key={JSON.stringify(src)} value={{ src, accept, maxSize, minSize, maxFiles }}>\n      <Button\n        className={cn(\n          \"relative h-auto w-full flex-col overflow-hidden p-8\",\n          isDragActive && \"ring-ring outline-none ring-1\",\n          className,\n        )}\n        disabled={disabled}\n        type=\"button\"\n        variant=\"outline\"\n        {...getRootProps()}\n      >\n        <input {...getInputProps()} disabled={disabled} />\n        {children}\n      </Button>\n    </DropzoneContext>\n  );\n}\n\n/**\n * DropzoneContent\n */\nexport type DropzoneContentProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nconst maxLabelItems = 3;\n\nexport function DropzoneContent({ children, className }: DropzoneContentProps) {\n  const { src } = useDropzoneContext();\n  if (!src) return null;\n\n  if (children) return children;\n\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md\">\n        <UploadIcon size={16} />\n      </div>\n\n      <p className=\"my-2 w-full truncate text-sm font-medium\">\n        {src.length > maxLabelItems\n          ? `${new Intl.ListFormat(\"en\").format(\n              src.slice(0, maxLabelItems).map((file) => file.name),\n            )} and ${src.length - maxLabelItems} more`\n          : new Intl.ListFormat(\"en\").format(src.map((file) => file.name))}\n      </p>\n\n      <p className=\"text-muted-foreground w-full text-wrap text-xs\">\n        Drag and drop or click to replace\n      </p>\n    </div>\n  );\n}\n\n/**\n * DropzoneEmptyState\n */\nexport type DropzoneEmptyStateProps = {\n  children?: ReactNode;\n  className?: string;\n};\n\nexport function DropzoneEmptyState({ children, className }: DropzoneEmptyStateProps) {\n  const { src, accept, maxSize, minSize, maxFiles } = useDropzoneContext();\n  if (src) {\n    return null;\n  }\n  if (children) {\n    return children;\n  }\n  let caption = \"\";\n  if (accept) {\n    caption += \"Accepts \";\n    caption += new Intl.ListFormat(\"en\").format(Object.keys(accept));\n  }\n  if (minSize && maxSize) {\n    caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;\n  } else if (minSize) {\n    caption += ` at least ${renderBytes(minSize)}`;\n  } else if (maxSize) {\n    caption += ` less than ${renderBytes(maxSize)}`;\n  }\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center\", className)}>\n      <div className=\"bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-md\">\n        <UploadIcon size={16} />\n      </div>\n      <p className=\"my-2 w-full truncate text-wrap text-sm font-medium\">\n        Upload {maxFiles === 1 ? \"a file\" : \"files\"}\n      </p>\n      <p className=\"text-muted-foreground w-full truncate text-wrap text-xs\">\n        Drag and drop or click to upload\n      </p>\n      {caption && <p className=\"text-muted-foreground text-wrap text-xs\">{caption}.</p>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,SAAS,EACvB,QACA,WAAW,GACX,SACA,SACA,QACA,SACA,UACA,KACA,WACA,UACA,GAAG,SACa;CAChB,MAAM,EAAE,cAAc,eAAe,iBAAiB,YAAY;EAChE;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,eAAe,gBAAgB,UAAU;AAChD,OAAI,eAAe,SAAS,GAAG;IAC7B,MAAM,UAAU,eAAe,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE;AACpD,cAAU,IAAI,MAAM,QAAQ,CAAC;AAC7B;;AAEF,YAAS,eAAe,gBAAgB,MAAM;;EAEhD,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC;EAA0C,OAAO;GAAE;GAAK;GAAQ;GAAS;GAAS;GAAU;YAC3F,qBAAC;GACC,WAAW,GACT,uDACA,gBAAgB,iCAChB,UACD;GACS;GACV,MAAK;GACL,SAAQ;GACR,GAAI,cAAc;cAElB,oBAAC;IAAM,GAAI,eAAe;IAAY;KAAY,EACjD;IACM;IAdW,KAAK,UAAU,IAAI,CAevB;;AAYtB,MAAM,gBAAgB;AAEtB,SAAgB,gBAAgB,EAAE,UAAU,aAAmC;CAC7E,MAAM,EAAE,QAAQ,oBAAoB;AACpC,KAAI,CAAC,IAAK,QAAO;AAEjB,KAAI,SAAU,QAAO;AAErB,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GAEN,oBAAC;IAAE,WAAU;cACV,IAAI,SAAS,gBACV,GAAG,IAAI,KAAK,WAAW,KAAK,CAAC,OAC3B,IAAI,MAAM,GAAG,cAAc,CAAC,KAAK,SAAS,KAAK,KAAK,CACrD,CAAC,OAAO,IAAI,SAAS,cAAc,SACpC,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,IAAI,KAAK,SAAS,KAAK,KAAK,CAAC;KAChE;GAEJ,oBAAC;IAAE,WAAU;cAAiD;KAE1D;;GACA;;AAYV,SAAgB,mBAAmB,EAAE,UAAU,aAAsC;CACnF,MAAM,EAAE,KAAK,QAAQ,SAAS,SAAS,aAAa,oBAAoB;AACxE,KAAI,IACF,QAAO;AAET,KAAI,SACF,QAAO;CAET,IAAI,UAAU;AACd,KAAI,QAAQ;AACV,aAAW;AACX,aAAW,IAAI,KAAK,WAAW,KAAK,CAAC,OAAO,OAAO,KAAK,OAAO,CAAC;;AAElE,KAAI,WAAW,QACb,YAAW,YAAY,YAAY,QAAQ,CAAC,OAAO,YAAY,QAAQ;UAC9D,QACT,YAAW,aAAa,YAAY,QAAQ;UACnC,QACT,YAAW,cAAc,YAAY,QAAQ;AAE/C,QACE,qBAAC;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GACxE,oBAAC;IAAI,WAAU;cACb,oBAAC,cAAW,MAAM,KAAM;KACpB;GACN,qBAAC;IAAE,WAAU;eAAqD,WACxD,aAAa,IAAI,WAAW;KAClC;GACJ,oBAAC;IAAE,WAAU;cAA0D;KAEnE;GACH,WAAW,qBAAC;IAAE,WAAU;eAA2C,SAAQ;KAAK;;GAC7E"}

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

@@ -0,0 +1,26 @@
+import { FileNode } from "../lib/validators.mjs";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/storage/components/image-grid.client.d.ts
+/**
+ * Image Grid
+ */
+type ImageGridProps = ComponentProps<"div"> & {
+  nodes: FileNode[];
+  disabled?: boolean;
+  moveAction: (params: {
+    fromIndex: number;
+    toIndex: number;
+  }) => Promise<void>;
+};
+declare function ImageGrid({
+  nodes,
+  moveAction,
+  disabled,
+  ...props
+}: ImageGridProps): react_jsx_runtime50.JSX.Element;
+declare function ImageGridSkeleton(props: ComponentProps<"div">): react_jsx_runtime50.JSX.Element;
+//#endregion
+export { ImageGrid, ImageGridSkeleton };
+//# sourceMappingURL=image-grid.client.d.mts.map

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

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

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

@@ -0,0 +1,169 @@
+"use client";
+
+import { Icons } from "../../../components/common/icons.mjs";
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Skeleton } from "../../../components/ui/skeleton.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { Dialog, DialogContent, DialogTrigger } from "../../../components/ui/dialog.client.mjs";
+import { useAction } from "../../../lib/hooks/use-action.mjs";
+import { arrayMove } from "../../../lib/utils/array-move.mjs";
+import { Card } from "../../../components/ui/card.mjs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../../components/ui/carousel.mjs";
+import { getFileUrl, imageLoader } from "../lib/helpers.mjs";
+import { useUploadZone } from "./upload-zone-context.client.mjs";
+import { GripIcon, UploadIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Image$1 from "next/image";
+import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+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();
+	const images = nodes.flatMap((node) => ({
+		...node,
+		url: getFileUrl(node.id)
+	}));
+	const [current, setCurrent] = React.useState(0);
+	const { setNodeRef } = useDroppable({ id: "image-grid" });
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const moveMuration = useAction({
+		mutationFn: async ({ active, over }) => {
+			if (!moveAction) return Promise.resolve();
+			const activeId = active.id;
+			const overId = over?.id;
+			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, {
+				fromIndex,
+				toIndex
+			}));
+			await moveAction({
+				fromIndex,
+				toIndex
+			});
+		},
+		onSuccess: async () => {
+			setCurrent(0);
+			await invalidateQuery();
+		},
+		onError: (error) => {
+			console.error("Error moving image:", error);
+		}
+	});
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			onDragEnd: moveMuration.mutate,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: setNodeRef,
+				className: "grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5",
+				children: /* @__PURE__ */ jsxs(SortableContext, {
+					items: images.map((image) => image.id),
+					strategy: rectSortingStrategy,
+					children: [images.map((node, index) => /* @__PURE__ */ jsx(ImageGridItem, {
+						node,
+						index,
+						setCurrent
+					}, node.id)), !disabled && /* @__PURE__ */ jsxs("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",
+						children: [/* @__PURE__ */ jsx(UploadIcon, { className: "h-8 w-8" }), /* @__PURE__ */ jsx(Input, {
+							type: "file",
+							accept: "image/jpeg, image/png, image/webp, image/gif",
+							className: "absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0",
+							multiple: true,
+							onChange: (e) => {
+								if (!e.target.files) return;
+								return Array.from(e.target.files).map(onUpload);
+							}
+						})]
+					})]
+				})
+			})
+		}), /* @__PURE__ */ jsx(Carousel, {
+			className: "w-full",
+			opts: { startIndex: current },
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "border-none bg-transparent p-0 shadow-none md:max-w-[80vw] xl:max-w-[60vw]",
+				children: [
+					/* @__PURE__ */ jsx(CarouselContent, {
+						className: "md:max-h-[80vh]",
+						children: images.map(({ id, url }) => /* @__PURE__ */ jsx(CarouselItem, {
+							className: "overflow-hidden rounded-xl",
+							children: /* @__PURE__ */ jsx(Image$1, {
+								src: url,
+								alt: "Image Preview",
+								width: 1920,
+								height: 1080,
+								className: "h-full w-full rounded-xl object-contain",
+								loader: imageLoader
+							})
+						}, id))
+					}),
+					/* @__PURE__ */ jsx(CarouselPrevious, {}),
+					/* @__PURE__ */ jsx(CarouselNext, {})
+				]
+			})
+		})]
+	});
+}
+function ImageGridItem({ node, index, setCurrent }) {
+	const { deleteMutation } = useUploadZone();
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: node.id });
+	return /* @__PURE__ */ jsx(Card, {
+		id: node.id,
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		className: cn("group relative aspect-square w-full", node.isPending && "opacity-30"),
+		children: !node.isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(DialogTrigger, {
+				onClick: () => setCurrent(index),
+				children: /* @__PURE__ */ jsx(Image$1, {
+					src: node.url,
+					alt: "Image Preview",
+					width: 100,
+					height: 100,
+					className: "bg-muted absolute inset-0 h-full w-full cursor-pointer rounded-lg object-contain",
+					loader: imageLoader
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				...attributes,
+				...listeners,
+				type: "button",
+				variant: "secondary",
+				size: "icon",
+				className: "absolute right-2 top-2 hidden p-1 group-hover:flex",
+				children: /* @__PURE__ */ jsx(GripIcon, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "destructive",
+				size: "icon",
+				onClick: () => deleteMutation({ ids: [node.id] }),
+				className: "absolute left-2 top-2 hidden p-1 group-hover:flex",
+				children: /* @__PURE__ */ jsx(Icons.trash, { className: "size-4" })
+			})
+		] }) : /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0 h-full w-full rounded-lg" })
+	});
+}
+function ImageGridSkeleton(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-5", props.className),
+		children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }, index))
+	});
+}
+
+//#endregion
+export { ImageGrid, ImageGridSkeleton };
+//# sourceMappingURL=image-grid.client.mjs.map

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

@@ -0,0 +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 { deleteMutation } = 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={() => deleteMutation({ ids: [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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"}