@anymux/ui-kit 0.1.0

package/dist/ExplorerLayout-CSIJd7N4.js

@@ -0,0 +1,105 @@
+import { cn$1 as cn } from "./utils-B4fdKKsy.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Button } from "@anymux/ui/components/button";
+import { PanelLeft, PanelLeftClose } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/layout/components/ExplorerLayout/ExplorerLayout.tsx
+const MOBILE_BREAKPOINT = 768;
+const ExplorerLayout = observer(({ sections, className, isSidebarCollapsed: externalCollapsed, setSidebarCollapsed: externalSetCollapsed }) => {
+	const [internalCollapsed, setInternalCollapsed] = useState(false);
+	const [isMobile, setIsMobile] = useState(false);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const isCollapsed = externalCollapsed ?? internalCollapsed;
+	const setCollapsed = externalSetCollapsed ?? setInternalCollapsed;
+	const sidebarWidth = sections.sidebar?.width ?? 280;
+	useEffect(() => {
+		const checkMobile = () => {
+			const mobile = window.innerWidth < MOBILE_BREAKPOINT;
+			setIsMobile(mobile);
+			if (mobile) setMobileOpen(false);
+		};
+		checkMobile();
+		window.addEventListener("resize", checkMobile);
+		return () => window.removeEventListener("resize", checkMobile);
+	}, []);
+	const handleOverlayClick = useCallback(() => {
+		setMobileOpen(false);
+	}, []);
+	const showSidebar = sections.sidebar && (isMobile ? mobileOpen : !isCollapsed);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col h-full w-full bg-background", className),
+		children: [
+			sections.header && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0 border-b bg-background",
+				children: sections.header
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 min-h-0 relative",
+				children: [
+					isMobile && mobileOpen && /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-0 bg-black/30 z-30",
+						onClick: handleOverlayClick
+					}),
+					sections.sidebar && (isMobile ? mobileOpen : true) && /* @__PURE__ */ jsxs("div", {
+						className: cn("bg-background flex flex-col flex-shrink-0 transition-all duration-200 ease-in-out", isMobile ? "absolute inset-y-0 left-0 z-40 border-r shadow-lg" : cn("border-r relative", isCollapsed && "overflow-hidden")),
+						style: { width: isMobile ? Math.min(sidebarWidth, 300) : isCollapsed ? 0 : sidebarWidth },
+						children: [!isCollapsed && /* @__PURE__ */ jsxs("div", {
+							className: "px-2 border-b bg-muted/10 flex-shrink-0 flex items-center h-10 gap-1",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex-1 min-w-0",
+								children: sections.sidebar.toolbar
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-6 w-6 flex-shrink-0",
+								onClick: () => {
+									if (isMobile) setMobileOpen(false);
+									else setCollapsed(true);
+								},
+								title: "Collapse sidebar",
+								children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 min-h-0 overflow-auto",
+							children: sections.sidebar.content
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 flex flex-col min-w-0",
+						children: [sections.main.toolbar && /* @__PURE__ */ jsx("div", {
+							className: "px-2 border-b bg-muted/10 flex items-center justify-between flex-shrink-0 h-10",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 flex-1 min-w-0",
+								children: [sections.sidebar && (isMobile || isCollapsed) && !(isMobile && mobileOpen) && /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "icon",
+									className: "h-6 w-6 flex-shrink-0",
+									onClick: () => {
+										if (isMobile) setMobileOpen(true);
+										else setCollapsed(false);
+									},
+									title: "Show sidebar",
+									children: /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" })
+								}), sections.main.toolbar]
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 min-h-0 overflow-hidden",
+							children: sections.main.content
+						})]
+					})
+				]
+			}),
+			sections.footer && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0 border-t bg-background",
+				children: sections.footer
+			})
+		]
+	});
+});
+ExplorerLayout.displayName = "ExplorerLayout";
+
+//#endregion
+export { ExplorerLayout as ExplorerLayout$1 };
+//# sourceMappingURL=ExplorerLayout-CSIJd7N4.js.map

package/dist/ExplorerLayout-CSIJd7N4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExplorerLayout-CSIJd7N4.js","names":["ExplorerLayout: React.FC<ExplorerLayoutProps>"],"sources":["../src/layout/components/ExplorerLayout/ExplorerLayout.tsx"],"sourcesContent":["import React, { ReactNode, useState, useEffect, useCallback } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { cn } from '../../../lib/utils';\nimport { Button } from '@anymux/ui/components/button';\nimport { ChevronLeft, ChevronRight, PanelLeftClose, PanelLeft } from 'lucide-react';\n\nexport interface ExplorerSections {\n  header?: ReactNode;\n  footer?: ReactNode;\n  sidebar?: {\n    content: ReactNode;\n    toolbar?: ReactNode;\n    width?: number; // px, default 280\n  };\n  main: {\n    content: ReactNode;\n    toolbar?: ReactNode;\n  };\n}\n\nexport interface ExplorerLayoutProps {\n  sections: ExplorerSections;\n  className?: string;\n  isSidebarCollapsed?: boolean;\n  setSidebarCollapsed?: (collapsed: boolean) => void;\n}\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const ExplorerLayout: React.FC<ExplorerLayoutProps> = observer(({\n  sections,\n  className,\n  isSidebarCollapsed: externalCollapsed,\n  setSidebarCollapsed: externalSetCollapsed\n}) => {\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const [isMobile, setIsMobile] = useState(false);\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  const isCollapsed = externalCollapsed ?? internalCollapsed;\n  const setCollapsed = externalSetCollapsed ?? setInternalCollapsed;\n\n  const sidebarWidth = sections.sidebar?.width ?? 280;\n\n  useEffect(() => {\n    const checkMobile = () => {\n      const mobile = window.innerWidth < MOBILE_BREAKPOINT;\n      setIsMobile(mobile);\n      if (mobile) {\n        setMobileOpen(false);\n      }\n    };\n    checkMobile();\n    window.addEventListener('resize', checkMobile);\n    return () => window.removeEventListener('resize', checkMobile);\n  }, []);\n\n  const handleOverlayClick = useCallback(() => {\n    setMobileOpen(false);\n  }, []);\n\n  const showSidebar = sections.sidebar && (isMobile ? mobileOpen : !isCollapsed);\n\n  return (\n    <div className={cn(\"flex flex-col h-full w-full bg-background\", className)}>\n      {/* Header Section */}\n      {sections.header && (\n        <div className=\"flex-shrink-0 border-b bg-background\">\n          {sections.header}\n        </div>\n      )}\n\n      {/* Main content - dual panel layout */}\n      <div className=\"flex flex-1 min-h-0 relative\">\n        {/* Mobile overlay */}\n        {isMobile && mobileOpen && (\n          <div\n            className=\"absolute inset-0 bg-black/30 z-30\"\n            onClick={handleOverlayClick}\n          />\n        )}\n\n        {/* Left Panel - Sidebar */}\n        {sections.sidebar && (isMobile ? mobileOpen : true) && (\n          <div\n            className={cn(\n              \"bg-background flex flex-col flex-shrink-0 transition-all duration-200 ease-in-out\",\n              isMobile\n                ? \"absolute inset-y-0 left-0 z-40 border-r shadow-lg\"\n                : cn(\n                    \"border-r relative\",\n                    isCollapsed && \"overflow-hidden\"\n                  )\n            )}\n            style={{\n              width: isMobile\n                ? Math.min(sidebarWidth, 300)\n                : (isCollapsed ? 0 : sidebarWidth)\n            }}\n          >\n            {/* Sidebar Toolbar */}\n            {!isCollapsed && (\n              <div className=\"px-2 border-b bg-muted/10 flex-shrink-0 flex items-center h-10 gap-1\">\n                <div className=\"flex-1 min-w-0\">\n                  {sections.sidebar.toolbar}\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"h-6 w-6 flex-shrink-0\"\n                  onClick={() => {\n                    if (isMobile) {\n                      setMobileOpen(false);\n                    } else {\n                      setCollapsed(true);\n                    }\n                  }}\n                  title=\"Collapse sidebar\"\n                >\n                  <PanelLeftClose className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            )}\n\n            {/* Sidebar Content */}\n            <div className=\"flex-1 min-h-0 overflow-auto\">\n              {sections.sidebar.content}\n            </div>\n          </div>\n        )}\n\n        {/* Right Panel - Main Content */}\n        <div className=\"flex-1 flex flex-col min-w-0\">\n          {/* Main Toolbar */}\n          {sections.main.toolbar && (\n            <div className=\"px-2 border-b bg-muted/10 flex items-center justify-between flex-shrink-0 h-10\">\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                {/* Mobile sidebar toggle + collapsed sidebar toggle */}\n                {sections.sidebar && (isMobile || isCollapsed) && !(isMobile && mobileOpen) && (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"h-6 w-6 flex-shrink-0\"\n                    onClick={() => {\n                      if (isMobile) {\n                        setMobileOpen(true);\n                      } else {\n                        setCollapsed(false);\n                      }\n                    }}\n                    title=\"Show sidebar\"\n                  >\n                    <PanelLeft className=\"h-4 w-4\" />\n                  </Button>\n                )}\n                {sections.main.toolbar}\n              </div>\n            </div>\n          )}\n\n          {/* Main Content */}\n          <div className=\"flex-1 min-h-0 overflow-hidden\">\n            {sections.main.content}\n          </div>\n        </div>\n      </div>\n\n      {/* Footer Section */}\n      {sections.footer && (\n        <div className=\"flex-shrink-0 border-t bg-background\">\n          {sections.footer}\n        </div>\n      )}\n    </div>\n  );\n});\n\nExplorerLayout.displayName = 'ExplorerLayout';\n"],"mappings":";;;;;;;;AA2BA,MAAM,oBAAoB;AAE1B,MAAaA,iBAAgD,SAAS,CAAC,EACrE,UACA,WACA,oBAAoB,mBACpB,qBAAqB,sBACtB,KAAK;CACJ,MAAM,CAAC,mBAAmB,qBAAqB,GAAG,SAAS,MAAM;CACjE,MAAM,CAAC,UAAU,YAAY,GAAG,SAAS,MAAM;CAC/C,MAAM,CAAC,YAAY,cAAc,GAAG,SAAS,MAAM;CAEnD,MAAM,cAAc,qBAAqB;CACzC,MAAM,eAAe,wBAAwB;CAE7C,MAAM,eAAe,SAAS,SAAS,SAAS;AAEhD,WAAU,MAAM;EACd,MAAM,cAAc,MAAM;GACxB,MAAM,SAAS,OAAO,aAAa;AACnC,eAAY,OAAO;AACnB,OAAI,OACF,eAAc,MAAM;EAEvB;AACD,eAAa;AACb,SAAO,iBAAiB,UAAU,YAAY;AAC9C,SAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;CAC/D,GAAE,CAAE,EAAC;CAEN,MAAM,qBAAqB,YAAY,MAAM;AAC3C,gBAAc,MAAM;CACrB,GAAE,CAAE,EAAC;CAEN,MAAM,cAAc,SAAS,YAAY,WAAW,cAAc;AAElE,wBACE,KAAC,OAAA;EAAI,WAAW,GAAG,6CAA6C,UAAU;;GAEvE,SAAS,0BACR,IAAC,OAAA;IAAI,WAAU;cACZ,SAAS;KACN;mBAIR,KAAC,OAAA;IAAI,WAAU;;KAEZ,YAAY,8BACX,IAAC,OAAA;MACC,WAAU;MACV,SAAS;OACT;KAIH,SAAS,YAAY,WAAW,aAAa,yBAC5C,KAAC,OAAA;MACC,WAAW,GACT,qFACA,WACI,sDACA,GACE,qBACA,eAAe,kBAChB,CACN;MACD,OAAO,EACL,OAAO,WACH,KAAK,IAAI,cAAc,IAAI,GAC1B,cAAc,IAAI,aACxB;kBAGC,+BACA,KAAC,OAAA;OAAI,WAAU;kCACb,IAAC,OAAA;QAAI,WAAU;kBACZ,SAAS,QAAQ;SACd,kBACN,IAAC,QAAA;QACC,SAAQ;QACR,MAAK;QACL,WAAU;QACV,SAAS,MAAM;AACb,aAAI,SACF,eAAc,MAAM;aAEpB,cAAa,KAAK;QAErB;QACD,OAAM;kCAEN,IAAC,gBAAA,EAAe,WAAU,UAAA,EAAY;SAC/B;QACL,kBAIR,IAAC,OAAA;OAAI,WAAU;iBACZ,SAAS,QAAQ;QACd;OACF;qBAIR,KAAC,OAAA;MAAI,WAAU;iBAEZ,SAAS,KAAK,2BACb,IAAC,OAAA;OAAI,WAAU;iCACb,KAAC,OAAA;QAAI,WAAU;mBAEZ,SAAS,YAAY,YAAY,kBAAkB,YAAY,+BAC9D,IAAC,QAAA;SACC,SAAQ;SACR,MAAK;SACL,WAAU;SACV,SAAS,MAAM;AACb,cAAI,SACF,eAAc,KAAK;cAEnB,cAAa,MAAM;SAEtB;SACD,OAAM;mCAEN,IAAC,WAAA,EAAU,WAAU,UAAA,EAAY;UAC1B,EAEV,SAAS,KAAK,OAAA;SACX;QACF,kBAIR,IAAC,OAAA;OAAI,WAAU;iBACZ,SAAS,KAAK;QACX;OACF;;KACF;GAGL,SAAS,0BACR,IAAC,OAAA;IAAI,WAAU;cACZ,SAAS;KACN;;GAEJ;AAET,EAAC;AAEF,eAAe,cAAc"}

package/dist/FileBrowserContext-B6jixa2j.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+//#region src/file-browser/context/FileBrowserContext.tsx
+const FileBrowserContext = createContext(null);
+function useFileBrowserContext() {
+	return useContext(FileBrowserContext);
+}
+
+//#endregion
+export { FileBrowserContext, useFileBrowserContext };
+//# sourceMappingURL=FileBrowserContext-B6jixa2j.js.map

package/dist/FileBrowserContext-B6jixa2j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileBrowserContext-B6jixa2j.js","names":[],"sources":["../src/file-browser/context/FileBrowserContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FileBrowserContextValue {\n  renameState: { itemId: string; currentName: string; source: 'list' | 'tree' } | null;\n  onRenameCommit: (newName: string) => void;\n  onRenameCancel: () => void;\n}\n\nexport const FileBrowserContext = createContext<FileBrowserContextValue | null>(null);\n\nexport function useFileBrowserContext() {\n  return useContext(FileBrowserContext);\n}\n"],"mappings":";;;AAQA,MAAa,qBAAqB,cAA8C,KAAK;AAErF,SAAgB,wBAAwB;AACtC,QAAO,WAAW,mBAAmB;AACtC"}