camox 0.0.0 → 0.1.2-alpha.2

package/dist/core/lib/fieldTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldTypes.d.ts","sourceRoot":"","sources":["../../../src/core/lib/fieldTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAKL,KAAK,WAAW,EAMjB,MAAM,cAAc,CAAC;AAMtB,KAAK,cAAc,GAAG;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;;;+BAKC,WAAW;0BAChB,OAAO;oDAKmB,qBAAqB;;;;;;qCASpC,eAAe,aACI,WAAW;2BAIxC,OAAO,8BAA8B,cAAc;yCAErC,qBAAqB;;;;;;+BAS/B,WAAW;0BAChB,OAAO,KAAc,MAAM;oDACD,qBAAqB;;;;;;+BAS1C,WAAW;0BAChB,OAAO;oDACmB,qBAAqB;;;;;;+BAS1C,WAAW;0BAChB,OAAO,4CAA4C,cAAc;oDAOvC,qBAAqB;;;;;;+BAS1C,WAAW;0BAChB,OAAO;oDACmB,qBAAqB;;;;;;+BAU1C,WAAW;0BAChB,OAAO,8BAA8B,cAAc;oDAKzB,qBAAqB;;;;;;+BAU1C,WAAW;0BAChB,OAAO,8BAA8B,cAAc;oDAKzB,qBAAqB;;CAgBpE,CAAC;AAEF,KAAK,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AACxD,KAAK,SAAS,GAAG,MAAM,oBAAoB,CAAC;AAE5C,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/core/lib/lexicalReact.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare function lexicalStateToReactNodes(serialized: string): React.ReactNode;
+//# sourceMappingURL=lexicalReact.d.ts.map

package/dist/core/lib/lexicalReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lexicalReact.d.ts","sourceRoot":"","sources":["../../../src/core/lib/lexicalReact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAO5E"}

package/dist/core/lib/lexicalReact.js

@@ -0,0 +1,24 @@
+import { applyModifierRendering } from "./modifiers.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/lib/lexicalReact.tsx
+function lexicalStateToReactNodes(serialized) {
+	try {
+		return renderNode(JSON.parse(serialized).root);
+	} catch {
+		return serialized;
+	}
+}
+function renderNode(node) {
+	if (node.type === "text") return applyModifierRendering(node.text ?? "", node.format ?? 0);
+	if (node.type === "linebreak") return /* @__PURE__ */ jsx("br", {});
+	if (!node.children) return null;
+	const children = node.children.map((child, i) => /* @__PURE__ */ jsx(React.Fragment, { children: renderNode(child) }, i));
+	if (node.type === "root") {
+		if (node.children.length === 1) return renderNode(node.children[0]);
+		return children;
+	}
+	return children;
+}
+//#endregion
+export { lexicalStateToReactNodes };

package/dist/core/lib/lexicalState.d.ts

@@ -0,0 +1,10 @@
+export declare function isLexicalState(value: unknown): boolean;
+export declare function plainTextToLexicalState(text: string): string;
+export declare function lexicalStateToPlainText(serialized: string): string;
+export declare function lexicalStateToMarkdown(serialized: string): string;
+/**
+ * Parse simple markdown (bold/italic) into Lexical JSON.
+ * Works without Lexical runtime — pure string parsing.
+ */
+export declare function markdownToLexicalState(markdown: string): string;
+//# sourceMappingURL=lexicalState.d.ts.map

package/dist/core/lib/lexicalState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lexicalState.d.ts","sourceRoot":"","sources":["../../../src/core/lib/lexicalState.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAQtD;AAED,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAgC5D;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAOlE;AAmBD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAOjE;AA0BD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAuB/D"}

package/dist/core/lib/lexicalState.js

@@ -0,0 +1,38 @@
+//#region src/core/lib/lexicalState.ts
+function isLexicalState(value) {
+	if (typeof value !== "string") return false;
+	try {
+		return JSON.parse(value)?.root?.type === "root";
+	} catch {
+		return false;
+	}
+}
+function plainTextToLexicalState(text) {
+	return JSON.stringify({ root: {
+		children: [{
+			children: [{
+				detail: 0,
+				format: 0,
+				mode: "normal",
+				style: "",
+				text,
+				type: "text",
+				version: 1
+			}],
+			direction: "ltr",
+			format: "",
+			indent: 0,
+			type: "paragraph",
+			version: 1,
+			textFormat: 0,
+			textStyle: ""
+		}],
+		direction: "ltr",
+		format: "",
+		indent: 0,
+		type: "root",
+		version: 1
+	} });
+}
+//#endregion
+export { isLexicalState, plainTextToLexicalState };

package/dist/core/lib/modifierFormats.d.ts

@@ -0,0 +1,9 @@
+/** Format bitmask flags matching Lexical's internal constants */
+export declare const FORMAT_FLAGS: {
+    readonly bold: 1;
+    readonly italic: 2;
+};
+/** Markdown wrappers keyed by format name */
+export declare const MARKDOWN_WRAPPERS: Record<string, (text: string) => string>;
+export declare function lexicalTextToMarkdown(text: string, format: number): string;
+//# sourceMappingURL=modifierFormats.d.ts.map

package/dist/core/lib/modifierFormats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifierFormats.d.ts","sourceRoot":"","sources":["../../../src/core/lib/modifierFormats.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,6CAA6C;AAC7C,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAGtE,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAS1E"}

package/dist/core/lib/modifierFormats.js

@@ -0,0 +1,8 @@
+//#region src/core/lib/modifierFormats.ts
+/** Format bitmask flags matching Lexical's internal constants */
+var FORMAT_FLAGS = {
+	bold: 1,
+	italic: 2
+};
+//#endregion
+export { FORMAT_FLAGS };

package/dist/core/lib/modifiers.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export { lexicalTextToMarkdown } from './modifierFormats';
+export interface TextModifier {
+    formatFlag: number;
+    label: string;
+    icon: string;
+    render: (children: React.ReactNode) => React.ReactNode;
+    toMarkdown: (text: string) => string;
+}
+export declare const TEXT_MODIFIERS: Record<string, TextModifier>;
+export declare function applyModifierRendering(text: string, format: number): React.ReactNode;
+//# sourceMappingURL=modifiers.d.ts.map

package/dist/core/lib/modifiers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifiers.d.ts","sourceRoot":"","sources":["../../../src/core/lib/modifiers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAevD,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAQpF"}

package/dist/core/lib/modifiers.js

@@ -0,0 +1,27 @@
+import { FORMAT_FLAGS } from "./modifierFormats.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/lib/modifiers.tsx
+var TEXT_MODIFIERS = {
+	bold: {
+		formatFlag: FORMAT_FLAGS.bold,
+		label: "Bold",
+		icon: "B",
+		render: (children) => /* @__PURE__ */ jsx("strong", { children }),
+		toMarkdown: (text) => `**${text}**`
+	},
+	italic: {
+		formatFlag: FORMAT_FLAGS.italic,
+		label: "Italic",
+		icon: "I",
+		render: (children) => /* @__PURE__ */ jsx("em", { children }),
+		toMarkdown: (text) => `*${text}*`
+	}
+};
+function applyModifierRendering(text, format) {
+	let node = text;
+	for (const modifier of Object.values(TEXT_MODIFIERS)) if (format & modifier.formatFlag) node = modifier.render(node);
+	return node;
+}
+//#endregion
+export { TEXT_MODIFIERS, applyModifierRendering };

package/dist/features/content/CamoxContent.d.ts

@@ -0,0 +1,2 @@
+export declare const CamoxContent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CamoxContent.d.ts.map

package/dist/features/content/CamoxContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CamoxContent.d.ts","sourceRoot":"","sources":["../../../src/features/content/CamoxContent.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,YAAY,+CA2FxB,CAAC"}

package/dist/features/content/CamoxContent.js

@@ -0,0 +1,100 @@
+import { AssetCard } from "./components/AssetCard.js";
+import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
+import { ContentSidebar } from "./components/ContentSidebar.js";
+import { UploadDropZone } from "./components/UploadDropZone.js";
+import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
+import { api } from "camox/server/api";
+import { useQuery } from "convex/react";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelContent } from "@camox/ui/panel";
+import { useFileUpload } from "@/hooks/use-file-upload";
+import { AssetLightbox } from "@/features/preview/components/AssetLightbox";
+import { useMarqueeSelection } from "@/hooks/use-marquee-selection";
+//#region src/features/content/CamoxContent.tsx
+var CamoxContent = () => {
+	const files = useQuery(api.files.listFiles);
+	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const [lightboxFileId, setLightboxFileId] = useState(null);
+	const { uploads, uploadFiles, clearAll } = useFileUpload();
+	const containerRef = useRef(null);
+	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, useCallback((ids) => setSelectedIds(ids), []));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-row",
+		children: [
+			/* @__PURE__ */ jsx(ContentSidebar, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: /* @__PURE__ */ jsx(UploadDropZone, {
+					onDrop: uploadFiles,
+					className: "flex flex-1 flex-col",
+					children: /* @__PURE__ */ jsxs(PanelContent, {
+						ref: containerRef,
+						className: "relative p-4 select-none",
+						onClick: () => {
+							if (didDragRef.current) {
+								didDragRef.current = false;
+								return;
+							}
+							setSelectedIds(/* @__PURE__ */ new Set());
+						},
+						onPointerDown: handlers.onPointerDown,
+						onPointerMove: handlers.onPointerMove,
+						onPointerUp: handlers.onPointerUp,
+						children: [
+							files === void 0 && /* @__PURE__ */ jsx("div", {
+								className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
+								children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx(AssetCardSkeleton, {}, i))
+							}),
+							files?.length === 0 && /* @__PURE__ */ jsx("div", {
+								className: "flex h-full flex-1 items-center justify-center",
+								children: /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground",
+									children: "No assets yet"
+								})
+							}),
+							files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+								className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
+								children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
+									file,
+									selected: selectedIds.has(file._id),
+									onSelect: () => {
+										setSelectedIds((prev) => {
+											const next = new Set(prev);
+											if (next.has(file._id)) next.delete(file._id);
+											else next.add(file._id);
+											return next;
+										});
+									},
+									onOpen: () => setLightboxFileId(file._id)
+								}, file._id))
+							}),
+							selectionRect && /* @__PURE__ */ jsx("div", {
+								className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
+								style: {
+									left: selectionRect.left,
+									top: selectionRect.top,
+									width: selectionRect.width,
+									height: selectionRect.height
+								}
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(UploadProgressDrawer, {
+				uploads,
+				onClose: clearAll
+			}),
+			lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+				open: true,
+				onOpenChange: (open) => {
+					if (!open) setLightboxFileId(null);
+				},
+				fileId: lightboxFileId
+			})
+		]
+	});
+};
+//#endregion
+export { CamoxContent };

package/dist/features/content/components/AssetCard.d.ts

@@ -0,0 +1,10 @@
+import { Doc } from 'camox/server/dataModel';
+interface AssetCardProps {
+    file: Doc<"files">;
+    selected: boolean;
+    onSelect: () => void;
+    onOpen: () => void;
+}
+export declare const AssetCard: ({ file, selected, onSelect, onOpen }: AssetCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AssetCard.d.ts.map

package/dist/features/content/components/AssetCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.d.ts","sourceRoot":"","sources":["../../../../src/features/content/components/AssetCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAKlD,UAAU,cAAc;IACtB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,sCAAsC,cAAc,4CAuC7E,CAAC"}

package/dist/features/content/components/AssetCard.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+import { FileIcon } from "lucide-react";
+//#region src/features/content/components/AssetCard.tsx
+var AssetCard = ({ file, selected, onSelect, onOpen }) => {
+	const isImage = file.mimeType?.startsWith("image/");
+	const extension = file.filename?.split(".").pop()?.toUpperCase() ?? "";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-asset-id": file._id,
+		className: cn("group flex flex-col gap-1.5 rounded-lg p-2 text-left border-2 border-transparent", selected ? "bg-primary/20 border-2 border-primary" : "hover:bg-accent/75"),
+		onClick: (e) => {
+			e.stopPropagation();
+			onSelect();
+		},
+		onDoubleClick: (e) => {
+			e.stopPropagation();
+			onOpen();
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-muted flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-md",
+			children: isImage ? /* @__PURE__ */ jsx("img", {
+				src: file.url,
+				alt: file.alt || file.filename,
+				draggable: false,
+				className: "pointer-events-none h-full w-full object-cover"
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex flex-col items-center gap-1",
+				children: [/* @__PURE__ */ jsx(FileIcon, { className: "h-8 w-8" }), extension && /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: extension
+				})]
+			})
+		}), /* @__PURE__ */ jsx("p", {
+			className: "line-clamp-2 px-0.5 text-xs break-all",
+			children: file.filename
+		})]
+	});
+};
+//#endregion
+export { AssetCard };

package/dist/features/content/components/AssetCardSkeleton.d.ts

@@ -0,0 +1,2 @@
+export declare const AssetCardSkeleton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AssetCardSkeleton.d.ts.map

package/dist/features/content/components/AssetCardSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/features/content/components/AssetCardSkeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,+CAO7B,CAAC"}

package/dist/features/content/components/AssetCardSkeleton.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@camox/ui/skeleton";
+//#region src/features/content/components/AssetCardSkeleton.tsx
+var AssetCardSkeleton = () => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5 rounded-lg p-2",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-4/3 w-full rounded-md" }), /* @__PURE__ */ jsx(Skeleton, { className: "mx-0.5 h-3.5 w-3/4" })]
+	});
+};
+//#endregion
+export { AssetCardSkeleton };

package/dist/features/content/components/ContentSidebar.d.ts

@@ -0,0 +1,2 @@
+export declare const ContentSidebar: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentSidebar.d.ts.map

package/dist/features/content/components/ContentSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSidebar.d.ts","sourceRoot":"","sources":["../../../../src/features/content/components/ContentSidebar.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,+CAY1B,CAAC"}

package/dist/features/content/components/ContentSidebar.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageIcon } from "lucide-react";
+//#region src/features/content/components/ContentSidebar.tsx
+var ContentSidebar = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-[220px] flex-col border-r-2 p-2",
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "bg-accent text-accent-foreground flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium",
+			children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }), "Assets"]
+		})
+	});
+};
+//#endregion
+export { ContentSidebar };

package/dist/features/content/components/UploadDropZone.d.ts

@@ -0,0 +1,9 @@
+interface UploadDropZoneProps {
+    onDrop: (files: FileList) => void;
+    children: React.ReactNode;
+    className?: string;
+    label?: string;
+}
+export declare function UploadDropZone({ onDrop, children, className, label, }: UploadDropZoneProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UploadDropZone.d.ts.map

package/dist/features/content/components/UploadDropZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadDropZone.d.ts","sourceRoot":"","sources":["../../../../src/features/content/components/UploadDropZone.tsx"],"names":[],"mappings":"AAKA,UAAU,mBAAmB;IAC3B,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAA8B,GAC/B,EAAE,mBAAmB,2CA4DrB"}

package/dist/features/content/components/UploadDropZone.js

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+import { Upload } from "lucide-react";
+//#region src/features/content/components/UploadDropZone.tsx
+function UploadDropZone({ onDrop, children, className, label = "Drop files to upload" }) {
+	const [isDragging, setIsDragging] = useState(false);
+	const dragCounter = useRef(0);
+	const handleDragEnter = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounter.current++;
+		if (dragCounter.current === 1) setIsDragging(true);
+	}, []);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounter.current--;
+		if (dragCounter.current === 0) setIsDragging(false);
+	}, []);
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		dragCounter.current = 0;
+		setIsDragging(false);
+		if (e.dataTransfer.files.length > 0) onDrop(e.dataTransfer.files);
+	}, [onDrop]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative min-h-full", className),
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		children: [children, isDragging && /* @__PURE__ */ jsx("div", {
+			className: "bg-background absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 p-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "border-primary flex h-full w-full flex-col items-center justify-center gap-2 rounded-lg border-3 border-dashed",
+				children: [/* @__PURE__ */ jsx(Upload, { className: "text-primary-foreground h-8 w-8" }), /* @__PURE__ */ jsx("p", {
+					className: "text-primary-foreground text-sm font-medium",
+					children: label
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { UploadDropZone };

package/dist/features/content/components/UploadProgressDrawer.d.ts

@@ -0,0 +1,11 @@
+import { UploadItem } from '../../../hooks/use-file-upload';
+interface UploadProgressDrawerProps {
+    uploads: UploadItem[];
+    onClose: () => void;
+}
+export declare function UploadProgressDrawer({ uploads, onClose }: UploadProgressDrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function UploadItemRow({ item }: {
+    item: UploadItem;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UploadProgressDrawer.d.ts.map

package/dist/features/content/components/UploadProgressDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadProgressDrawer.d.ts","sourceRoot":"","sources":["../../../../src/features/content/components/UploadProgressDrawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,UAAU,yBAAyB;IACjC,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,yBAAyB,kDAmCnF;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,2CA0B3D"}

package/dist/features/content/components/UploadProgressDrawer.js

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, Check, ChevronDown, ChevronUp, File, Loader2, X } from "lucide-react";
+//#region src/features/content/components/UploadProgressDrawer.tsx
+function UploadProgressDrawer({ uploads, onClose }) {
+	const [collapsed, setCollapsed] = useState(false);
+	if (uploads.length === 0) return null;
+	const completedCount = uploads.filter((u) => u.status === "complete").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-background fixed right-4 bottom-4 z-50 w-80 rounded-lg border shadow-lg",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-border flex items-center justify-between border-b px-3 py-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium",
+				children: completedCount === uploads.length ? `${completedCount} upload${completedCount !== 1 ? "s" : ""} complete` : `Uploading ${uploads.length} file${uploads.length !== 1 ? "s" : ""}`
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("button", {
+					onClick: () => setCollapsed((c) => !c),
+					className: "hover:bg-muted rounded p-1",
+					children: collapsed ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: onClose,
+					className: "hover:bg-muted rounded p-1",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			})]
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			className: "max-h-60 overflow-y-auto",
+			children: uploads.map((item) => /* @__PURE__ */ jsx(UploadItemRow, { item }, item.id))
+		})]
+	});
+}
+function UploadItemRow({ item }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 px-3 py-2",
+		children: [
+			/* @__PURE__ */ jsx(File, { className: "text-muted-foreground h-4 w-4 shrink-0" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm",
+						children: item.filename
+					}),
+					(item.status === "uploading" || item.status === "committing") && /* @__PURE__ */ jsx("div", {
+						className: "bg-muted mt-1 h-1.5 overflow-hidden rounded-full",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "bg-primary h-full transition-all duration-200",
+							style: { width: `${item.progress}%` }
+						})
+					}),
+					item.status === "error" && /* @__PURE__ */ jsx("p", {
+						className: "text-destructive mt-0.5 text-xs",
+						children: item.error
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "shrink-0",
+				children: [
+					item.status === "uploading" && /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }),
+					item.status === "committing" && /* @__PURE__ */ jsx(Loader2, { className: "text-primary h-4 w-4 animate-spin" }),
+					item.status === "complete" && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" }),
+					item.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive h-4 w-4" })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { UploadProgressDrawer };