@powerhousedao/design-system 6.2.3-dev.70 → 6.2.3-dev.72

package/dist/connect/index.js

@@ -1,13 +1,13 @@
-import { _ as DropdownMenuItem, b as PowerhouseButton, c as SidebarHeader, d as PackageAnimation, f as Modal, g as DropdownMenuContent, h as DropdownMenu, l as SidebarPanel, o as Sidebar, s as SidebarFooter, t as useWindowSize, y as DropdownMenuTrigger } from "../src-CohvVFnR.js";
-import { n as getDimensions, t as Icon } from "../icon-CHR45tj_.js";
+import { _ as DropdownMenuItem, b as PowerhouseButton, c as SidebarHeader, d as PackageAnimation, f as Modal, g as DropdownMenuContent, h as DropdownMenu, l as SidebarPanel, o as Sidebar, s as SidebarFooter, t as useWindowSize, y as DropdownMenuTrigger } from "../src-DhSJCeu5.js";
+import { n as getDimensions, t as Icon } from "../icon-DQ2yrWYv.js";
 import { Checkbox } from "../ui/components/checkbox/checkbox.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popover/popover.js";
 import { Input } from "../ui/components/input/input.js";
 import { JsonViewer } from "../ui/components/json-viewer/json-viewer.js";
 import "../ui/index.js";
-import { a as lazyComponent, i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "../address-DfZqD6IM.js";
+import { a as lazyComponent, i as ENSAvatar, n as useEns, r as FormattedJsonViewer, t as formatEthAddress } from "../address-DVC3zalI.js";
 import { t as Label } from "../label-nH2HoKfI.js";
-import React, { Fragment, createElement, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import React, { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { twJoin, twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
@@ -18,6 +18,7 @@ import { Content as Content$1, List, Root as Root$1, Trigger as Trigger$1 } from
 import { addProp, defaultTo, entries, filter, hasAtLeast, isArray, isDefined, isIncludedIn, isTruthy, keys, map, pipe, prop, values } from "remeda";
 import { redo, undo } from "@powerhousedao/shared/document-model";
 import { RenownLogo } from "@powerhousedao/reactor-browser/renown";
+import { colorVariants, imageVariants, layerStyle, normalizeBackground } from "@powerhousedao/shared/connect";
 import { isValidName } from "@powerhousedao/shared/document-drive";
 import { capitalCase } from "change-case";
 import { getUpdateTarget, parseInstallSpec } from "@powerhousedao/shared/registry/updates";
@@ -667,7 +668,7 @@ function CatchUpInspector({ status, onRefresh, onSweepNow }) {
 }
 //#endregion
 //#region src/connect/components/combobox/combobox.tsx
-const Combobox = lazyComponent(() => import("../combobox.impl-EqgAawKJ.js").then((m) => m.Combobox));
+const Combobox = lazyComponent(() => import("../combobox.impl-CQHG0NgO.js").then((m) => m.Combobox));
 //#endregion
 //#region src/connect/components/consent-banner/consent-banner.tsx
 const CookieBanner = (props) => {
@@ -1859,7 +1860,63 @@ const PATHS = {
 	b9: "M18.0156 9.8918C18.0156 9.61566 18.2394 9.39181 18.5155 9.39181L43.0627 9.39138C44.9475 11.8519 46.3659 14.6855 47.1892 17.7635L18.5154 17.7641C18.2392 17.7641 18.0154 17.5402 18.0154 17.2641L18.0156 9.8918Z",
 	b10: "M25.0158 -2.51999e-05C31.418 0.265176 37.1737 3.03916 41.3227 7.36511L25.5156 7.36547C25.2395 7.36547 25.0156 7.14161 25.0156 6.86546L25.0158 -2.51999e-05Z"
 };
+/** A project's loading image, declared by the build as
+* `<meta name="ph-loader" content="<file>" data-animation data-size>`
+* (powerhouse.config.json `icons.loader`). */
+const LOADER_MOTION = {
+	pulse: "ph-loader-pulse 1.6s ease-in-out infinite",
+	spin: "ph-loader-spin 1.4s linear infinite",
+	none: "none"
+};
+const LOADER_KEYFRAMES = "@keyframes ph-loader-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.94)}}@keyframes ph-loader-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[data-ph-loader-img]{animation:none!important}}";
+let projectLoader;
+/** The page's project loader, or null when Connect's logo stays. Read once:
+* the meta tag is static in index.html. */
+function getProjectLoader() {
+	if (projectLoader !== void 0) return projectLoader;
+	if (typeof document === "undefined") return null;
+	const meta = document.querySelector("meta[name=\"ph-loader\"]");
+	const file = meta?.content;
+	if (!meta || !file) return projectLoader = null;
+	const animation = meta.dataset.animation;
+	const size = Number(meta.dataset.size);
+	projectLoader = {
+		src: new URL(file, document.baseURI).toString(),
+		animation: animation === "spin" || animation === "none" ? animation : "pulse",
+		size: Number.isFinite(size) && size > 0 ? size : 96
+	};
+	return projectLoader;
+}
+/** The project's loading image with its motion. */
+function ProjectLoaderImage({ loader, className = "" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("style", { children: LOADER_KEYFRAMES }), /* @__PURE__ */ jsx("img", {
+		"data-ph-loader-img": "",
+		src: loader.src,
+		alt: "",
+		"aria-label": "Loading",
+		width: loader.size,
+		className,
+		style: {
+			width: loader.size,
+			height: "auto",
+			animation: LOADER_MOTION[loader.animation]
+		}
+	})] });
+}
+/** Connect's loading animation: the project's loader when one is
+* configured, else the animated Powerhouse logo. */
 function LogoAnimation({ size = 48, className = "" }) {
+	const loader = getProjectLoader();
+	if (loader) return /* @__PURE__ */ jsx(ProjectLoaderImage, {
+		loader,
+		className
+	});
+	return /* @__PURE__ */ jsx(PowerhouseLogoAnimation, {
+		size,
+		className
+	});
+}
+function PowerhouseLogoAnimation({ size = 48, className = "" }) {
 	const refsMap = useRef({});
 	const timers = useRef([]);
 	function getEls(id) {
@@ -2054,7 +2111,7 @@ function DocumentStateViewer({ state, ignoredScopes = ["auth", "document"], defa
 }
 //#endregion
 //#region src/connect/components/document-timeline/document-timeline.tsx
-const DocumentTimeline = lazyComponent(() => import("../document-timeline.impl-CCkyXpt5.js").then((m) => m.DocumentTimeline));
+const DocumentTimeline = lazyComponent(() => import("../document-timeline.impl-zx6f7k2d.js").then((m) => m.DocumentTimeline));
 //#endregion
 //#region src/connect/components/document-toolbar/containers.tsx
 /**
@@ -3373,6 +3430,33 @@ function EditorUndoRedoButtons(props) {
 	});
 }
 //#endregion
+//#region src/connect/components/branding/connect-branding.tsx
+/**
+* Connect's branding as the components see it: the host app provides it once
+* at its root (images already resolved to data URIs) and the components read
+* it from here instead of reaching into configuration. `icons` are the drive
+* explorer's, which the generic plugin owns; `appName`, `icon` and
+* `homeBackground` are Connect's identity (`connect.branding`). Without a
+* provider every built-in icon renders.
+*/
+const ConnectBrandingContext = /*#__PURE__*/ createContext({});
+function ConnectBrandingProvider(props) {
+	return /* @__PURE__ */ jsx(ConnectBrandingContext.Provider, {
+		value: props.branding ?? {},
+		children: props.children
+	});
+}
+/** The provided branding; `{}` (built-in look) without a provider. */
+function useConnectBranding() {
+	return useContext(ConnectBrandingContext);
+}
+/** The icon for a document of `documentType`: the explorer's icon for that
+* type, else its default document icon, else undefined (the icon the package
+* ships, or the built-in one). */
+function brandedDocumentIcon(branding, documentType) {
+	return branding.icons?.documents?.[documentType] ?? branding.icons?.document ?? void 0;
+}
+//#endregion
 //#region src/connect/constants/options.tsx
 const defaultDriveOptions = [
 	"DOWNLOAD",
@@ -3653,13 +3737,15 @@ function FileItem(props) {
 		handler();
 		setIsDropdownMenuOpen(false);
 	}
+	const branding = useConnectBranding();
+	const documentIconSrc = customDocumentIconSrc ?? brandedDocumentIcon(branding, fileNode.documentType);
 	const iconNode = /* @__PURE__ */ jsxs("div", {
 		className: "relative",
-		children: [customDocumentIconSrc ? /* @__PURE__ */ jsx("img", {
+		children: [documentIconSrc ? /* @__PURE__ */ jsx("img", {
 			alt: "file icon",
-			className: "max-w-none",
+			className: "max-w-none object-contain",
 			height: 34,
-			src: customDocumentIconSrc,
+			src: documentIconSrc,
 			width: 32,
 			draggable: false
 		}) : /* @__PURE__ */ jsx(DefaultFileIcon, {}), isReadMode && syncStatus && /* @__PURE__ */ jsx("div", {
@@ -3843,6 +3929,7 @@ function DefaultFileIcon() {
 //#region src/connect/components/folder-item/folder-item.tsx
 function FolderItem(props) {
 	const { folderNode, className } = props;
+	const folderIconSrc = useConnectBranding().icons?.folder;
 	const setSelectedNode = useSetSelectedNode();
 	const preloadNode = usePreloadNode();
 	const target = useNodeTarget(folderNode);
@@ -3914,7 +4001,14 @@ function FolderItem(props) {
 					className: "p-1",
 					children: /* @__PURE__ */ jsx("div", {
 						className: "relative text-foreground",
-						children: /* @__PURE__ */ jsx(Icon, {
+						children: folderIconSrc ? /* @__PURE__ */ jsx("img", {
+							alt: "folder icon",
+							className: "object-contain",
+							src: folderIconSrc,
+							width: 24,
+							height: 24,
+							draggable: false
+						}) : /* @__PURE__ */ jsx(Icon, {
 							name: "FolderClose",
 							size: 24
 						})
@@ -3983,19 +4077,66 @@ const FormInput = /*#__PURE__*/ forwardRef(function FormInput(props, ref) {
 });
 //#endregion
 //#region src/connect/components/form/add-local-drive-form.tsx
-const AddLocalDriveForm = lazyComponent(() => import("../add-local-drive-form.impl-xsC6R634.js").then((m) => m.AddLocalDriveForm));
+const AddLocalDriveForm = lazyComponent(() => import("../add-local-drive-form.impl-B8f13Rzz.js").then((m) => m.AddLocalDriveForm));
 //#endregion
 //#region src/connect/components/form/add-remote-drive-form.tsx
-const AddRemoteDriveForm = lazyComponent(() => import("../add-remote-drive-form.impl-B2DxdWGF.js").then((m) => m.AddRemoteDriveForm));
+const AddRemoteDriveForm = lazyComponent(() => import("../add-remote-drive-form.impl-_SqOzbSt.js").then((m) => m.AddRemoteDriveForm));
+//#endregion
+//#region src/connect/components/branding/background-layers.tsx
+/**
+* A decorated pane: the configured page colour with the background's layers
+* painted over it, in order, and the children above them all. Each layer is
+* placed by the shared `layerStyle`, the same declarations the desktop
+* loading page emits as static CSS, so a background configured once looks
+* the same in both hosts. Images come resolved (data URIs or URLs); a
+* light/dark pair follows the `.dark` theme class, not the OS scheme.
+* Without a background the pane is the theme's page colour and nothing more.
+*/
+function BackgroundLayers(props) {
+	const background = normalizeBackground(props.background);
+	const color = colorVariants(background?.color);
+	const style = color ? {
+		"--ph-pane-bg": color.light,
+		"--ph-pane-bg-dark": color.dark ?? color.light
+	} : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative size-full overflow-hidden", color ? "bg-(--ph-pane-bg) dark:bg-(--ph-pane-bg-dark)" : "bg-background", props.className),
+		style,
+		children: [background?.layers.map((layer, index) => /* @__PURE__ */ jsx(BackgroundLayer, { layer }, index)), props.children]
+	});
+}
+function BackgroundLayer({ layer }) {
+	const { light, dark } = imageVariants(layer.src);
+	const style = layerStyle(layer);
+	if (!dark) return /* @__PURE__ */ jsx("img", {
+		src: light,
+		alt: "",
+		style
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("img", {
+		src: light,
+		alt: "",
+		style,
+		className: "dark:hidden"
+	}), /* @__PURE__ */ jsx("img", {
+		src: dark,
+		alt: "",
+		style,
+		className: "hidden dark:block"
+	})] });
+}
 //#endregion
 //#region src/connect/components/home-screen/home-background-image.tsx
+/** The default home-screen gradient. A custom `src` is kept for callers that
+* still pass one, sized to its box; HomeScreen itself renders custom images
+* as a hero below the drive tiles instead. */
 const HomeBackgroundImage = ({ src } = {}) => {
 	if (src) return /* @__PURE__ */ jsx("picture", {
-		className: "pointer-events-none absolute inset-8 z-0 size-[calc(100%-32px)] object-contain",
+		className: "pointer-events-none absolute inset-8 z-0",
 		children: /* @__PURE__ */ jsx("img", {
 			src,
-			alt: "background",
-			className: "object-contain"
+			alt: "",
+			className: "size-full object-contain"
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -4142,13 +4283,19 @@ const HomeScreenAddDriveItem = function HomeScreenAddDriveItem(props) {
 //#endregion
 //#region src/connect/components/home-screen/home-screen.tsx
 const HomeScreen = function HomeScreen(props) {
-	const { children, containerClassName, homeBackground } = props;
-	return /* @__PURE__ */ jsx("div", {
-		className: twMerge("relative container mx-auto flex h-full flex-col", containerClassName),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "m-8 flex flex-wrap justify-center gap-4 bg-background pt-12",
-			children: [/* @__PURE__ */ jsx(HomeBackgroundImage, { src: homeBackground ?? void 0 }), children]
-		})
+	const { children, containerClassName } = props;
+	const background = normalizeBackground(props.homeBackground);
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: twMerge("relative isolate container mx-auto flex h-full flex-col", containerClassName),
+		children: [!background && /* @__PURE__ */ jsx(HomeBackgroundImage, {}), /* @__PURE__ */ jsx("div", {
+			className: twMerge("relative z-10 m-8 flex flex-wrap justify-center gap-4 pt-12", background ? "rounded-2xl bg-background/75 px-6 pb-6 backdrop-blur-sm" : "bg-background"),
+			children
+		})]
+	});
+	if (!background) return content;
+	return /* @__PURE__ */ jsx(BackgroundLayers, {
+		background,
+		children: content
 	});
 };
 //#endregion
@@ -4549,7 +4696,8 @@ function AddDriveModal(props) {
 //#region src/connect/components/modal/create-document-modal.tsx
 const CLOSE_ANIMATION_DURATION$1 = 300;
 function CreateDocumentModal(props) {
-	const { onOpenChange, onContinue, overlayProps, contentProps, ...restProps } = props;
+	const { onOpenChange, onContinue, overlayProps, contentProps, drives, driveId, onDriveChange, onAddDrive, ...restProps } = props;
+	const needsDrive = !!drives && !driveId;
 	const [nodeName, setNodeName] = useState("");
 	const [isValid, setIsValid] = useState(false);
 	const handleCancel = () => {
@@ -4557,11 +4705,12 @@ function CreateDocumentModal(props) {
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	};
 	const handleCreate = useCallback(() => {
-		if (!isValid) return;
+		if (!isValid || needsDrive) return;
 		onContinue(nodeName);
 		setTimeout(() => setNodeName(""), CLOSE_ANIMATION_DURATION$1);
 	}, [
 		isValid,
+		needsDrive,
 		nodeName,
 		onContinue
 	]);
@@ -4588,20 +4737,51 @@ function CreateDocumentModal(props) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "my-6",
-					children: [!isValid && nodeName && /* @__PURE__ */ jsx("div", {
-						className: "mb-2 text-destructive",
-						children: "Document name must not be empty or contain control characters."
-					}), /* @__PURE__ */ jsx(FormInput, {
-						icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
-						onChange: (e) => {
-							const name = e.target.value;
-							setNodeName(name);
-							setIsValid(isValidName(name));
-						},
-						placeholder: "Document name",
-						required: true,
-						value: nodeName
-					})]
+					children: [
+						!isValid && nodeName && /* @__PURE__ */ jsx("div", {
+							className: "mb-2 text-destructive",
+							children: "Document name must not be empty or contain control characters."
+						}),
+						/* @__PURE__ */ jsx(FormInput, {
+							icon: /* @__PURE__ */ jsx(Icon, { name: "BrickGlobe" }),
+							onChange: (e) => {
+								const name = e.target.value;
+								setNodeName(name);
+								setIsValid(isValidName(name));
+							},
+							placeholder: "Document name",
+							required: true,
+							value: nodeName
+						}),
+						!!drives?.length && /* @__PURE__ */ jsxs("label", {
+							className: "mt-4 flex flex-col gap-1 text-sm text-muted-foreground",
+							children: ["Drive", /* @__PURE__ */ jsxs("select", {
+								className: "rounded-md border border-border bg-background px-3 py-2 text-foreground",
+								value: driveId ?? "",
+								onChange: (e) => onDriveChange?.(e.target.value),
+								children: [!driveId && /* @__PURE__ */ jsx("option", {
+									value: "",
+									children: "Choose a drive"
+								}), drives.map((drive) => /* @__PURE__ */ jsx("option", {
+									value: drive.id,
+									children: drive.name
+								}, drive.id))]
+							})]
+						}),
+						drives?.length === 0 && /* @__PURE__ */ jsxs("p", {
+							className: "mt-4 text-sm text-muted-foreground",
+							children: [
+								"There's no drive to create it in.",
+								" ",
+								onAddDrive && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									className: "cursor-pointer text-foreground underline",
+									onClick: onAddDrive,
+									children: "Add a drive"
+								})
+							]
+						})
+					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "mt-8 flex justify-between gap-3",
@@ -4613,7 +4793,7 @@ function CreateDocumentModal(props) {
 					}), /* @__PURE__ */ jsx(ModalButton, {
 						variant: "confirm",
 						type: "submit",
-						disabled: !isValid,
+						disabled: !isValid || needsDrive,
 						children: "Create"
 					})]
 				})
@@ -4788,7 +4968,7 @@ function ConnectDeleteItemModal(props) {
 }
 //#endregion
 //#region src/connect/components/form/drive-settings-form.tsx
-const DriveSettingsForm = lazyComponent(() => import("../drive-settings-form.impl-Bwam9-CG.js").then((m) => m.DriveSettingsForm));
+const DriveSettingsForm = lazyComponent(() => import("../drive-settings-form.impl-Dthjyouk.js").then((m) => m.DriveSettingsForm));
 //#endregion
 //#region src/connect/components/modal/drive-settings-modal.tsx
 function DriveSettingsModal(props) {
@@ -8355,7 +8535,7 @@ function ConnectUpgradeDriveModal(props) {
 }
 //#endregion
 //#region src/connect/components/revision-history/revision-history.tsx
-const RevisionHistory = lazyComponent(() => import("../revision-history.impl-CrtSnhXQ.js").then((m) => m.RevisionHistory));
+const RevisionHistory = lazyComponent(() => import("../revision-history.impl-C8YnBJ6U.js").then((m) => m.RevisionHistory));
 //#endregion
 //#region src/connect/components/search-bar/filter-item.tsx
 const FilterItem = (props) => {
@@ -8445,16 +8625,25 @@ const ConnectTooltipProvider = Provider;
 //#endregion
 //#region src/connect/components/sidebar/sidebar-item.tsx
 const SidebarItem = function SidebarItem(props) {
-	const { icon, title, description: _description, containerClassName, active, href, onClick, onPreload } = props;
-	const Element = href ? "a" : "div";
+	const { icon, title, description, containerClassName, active, href, onClick, onPreload } = props;
+	const Element = href ? "a" : onClick ? "button" : "div";
 	const current = href ? props["aria-current"] : void 0;
 	return /* @__PURE__ */ jsx(ConnectTooltip, {
-		content: title,
+		content: description ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "block font-medium",
+			children: title
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block opacity-80",
+			children: description
+		})] }) : title,
 		side: "right",
 		sideOffset: 12,
 		className: "border-none bg-primary px-3 py-2 text-sm text-primary-foreground",
 		children: /* @__PURE__ */ jsxs(Element, {
 			href,
+			type: Element === "button" ? "button" : void 0,
+			"aria-label": title,
+			"aria-description": description,
 			"aria-current": current,
 			className: twMerge("group/sidebar-item relative flex cursor-pointer flex-col items-center justify-center text-center text-sm text-foreground", containerClassName, "aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground", active && "bg-sidebar-accent text-sidebar-accent-foreground", onClick && "cursor-pointer"),
 			onClick,
@@ -8462,11 +8651,12 @@ const SidebarItem = function SidebarItem(props) {
 			onTouchStart: onPreload,
 			onFocus: href ? onPreload : void 0,
 			children: [
-				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 hidden h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info group-aria-[current=page]/sidebar-item:block", active && "block") }),
-				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 group-aria-[current=page]/sidebar-item:hidden", active && "hidden") }),
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 hidden h-10 w-1 -translate-y-1/2 rounded-r-sm bg-info group-aria-[current=page]/sidebar-item:block max-sm:hidden!", active && "block") }),
+				/* @__PURE__ */ jsx("div", { className: twMerge("absolute top-1/2 left-0 h-6 w-1 -translate-y-1/2 rounded-r-sm bg-secondary opacity-0 transition-opacity group-hover/sidebar-item:opacity-100 group-aria-[current=page]/sidebar-item:hidden max-sm:hidden", active && "hidden") }),
 				/* @__PURE__ */ jsx("div", {
-					className: "mx-auto py-4",
+					className: "mx-auto py-4 max-sm:px-3 max-sm:py-2",
 					children: icon || /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
 						className: "flex size-8 items-center justify-center rounded-lg bg-primary",
 						children: /* @__PURE__ */ jsx("span", {
 							className: "text-sm font-medium text-primary-foreground",
@@ -8640,6 +8830,7 @@ const SidebarUser = ({ address, ensName, avatarUrl, etherscanUrl, onDisconnect }
 //#endregion
 //#region src/connect/components/sidebar/sidebar-footer.tsx
 const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin, onClickSettings, settingsHref, settingsCurrent, onDisconnect, onHomeClick, showDebug, onDebugClick, etherscanUrl = "", ...props }) => {
+	const appLogoSrc = useConnectBranding().icon;
 	const settingsIcon = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Settings, {
 		className: "text-foreground",
 		size: 24,
@@ -8650,14 +8841,20 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 	})] });
 	return /* @__PURE__ */ jsxs(SidebarFooter, {
 		...props,
-		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 dark:border-none", className),
+		className: twMerge("flex flex-col items-center gap-3 border-t border-sidebar-border px-2 py-4 max-sm:flex-row max-sm:border-t-0 max-sm:border-l max-sm:py-2 dark:border-none", className),
 		children: [
 			onHomeClick && /* @__PURE__ */ jsx("button", {
 				"aria-label": "Home",
 				type: "button",
 				className: "cursor-pointer",
 				onClick: onHomeClick,
-				children: /* @__PURE__ */ jsx(Icon, {
+				children: appLogoSrc ? /* @__PURE__ */ jsx("img", {
+					alt: "",
+					className: "object-contain",
+					src: appLogoSrc,
+					width: 24,
+					height: 24
+				}) : /* @__PURE__ */ jsx(Icon, {
 					className: "text-muted-foreground",
 					name: "ConnectSmall",
 					size: 24
@@ -8675,7 +8872,7 @@ const ConnectSidebarFooter = ({ address, ensName, avatarUrl, className, onLogin,
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: onHomeClick ? "mt-3" : "",
+				className: onHomeClick ? "mt-3 max-sm:mt-0" : "",
 				children: address ? /* @__PURE__ */ jsx(SidebarUser, {
 					address,
 					ensName,
@@ -8716,12 +8913,20 @@ const ConnectSidebarHeader = ({ className, children, ...props }) => {
 const ConnectSidebar = ({ onClick, address, ensName, avatarUrl, headerContent, onClickSettings, settingsHref, settingsCurrent, maxWidth = "304px", minWidth = "58px", onLogin, onDisconnect, etherscanUrl, showDebug, onDebugClick, ...props }) => {
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		...props,
+		"data-connect-sidebar": "",
 		maxWidth,
 		minWidth,
-		children: [/* @__PURE__ */ jsxs(SidebarPanel, { children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, { children: headerContent }), /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col",
-			children: props.children
-		})] }), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
+		children: [/* @__PURE__ */ jsxs(SidebarPanel, {
+			className: "max-sm:flex max-sm:overflow-x-auto max-sm:overflow-y-hidden",
+			children: [/* @__PURE__ */ jsx(ConnectSidebarHeader, {
+				className: "max-sm:hidden",
+				children: headerContent
+			}), /* @__PURE__ */ jsx("nav", {
+				"aria-label": "Drives and pages",
+				className: "flex flex-col max-sm:flex-row",
+				children: props.children
+			})]
+		}), /* @__PURE__ */ jsx(ConnectSidebarFooter, {
 			address,
 			ensName,
 			avatarUrl,
@@ -8867,6 +9072,6 @@ const removeSuccessFiles = (files) => {
 	return files.filter((file) => file.status !== "SUCCESS");
 };
 //#endregion
-export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, Breadcrumb, Breadcrumbs, CONFLICT, CatchUpInspector, ChannelInspector, Checkbox, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, CreateDocumentWithTypeModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, Icon, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, Modal, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, PeerAgreementPanel, PowerhouseButton, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RenownLoginMethods, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, peerManifestLabel, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, useWindowSize, verifyPackageJsonFields };
+export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, BackgroundLayers, Breadcrumb, Breadcrumbs, CONFLICT, CatchUpInspector, ChannelInspector, Checkbox, Combobox, ConnectBrandingProvider, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, CreateDocumentWithTypeModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, Icon, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, Modal, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, PeerAgreementPanel, PowerhouseButton, ProcessorsInspector, ProjectLoaderImage, QueueInspector, ReadRequiredModal, RemotesInspector, RenownLoginMethods, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, brandedDocumentIcon, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, getProjectLoader, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, peerManifestLabel, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useConnectBranding, useEns, useWindowSize, verifyPackageJsonFields };
 
 //# sourceMappingURL=index.js.map