@adea-ai/ui 0.60.3 → 0.61.0

package/dist/components/ui/toggle.js

@@ -1,41 +0,0 @@
-import { cn } from "../../lib/utils.js";
-import { createComponent, mergeProps } from "solid-js/web";
-import { splitProps } from "solid-js";
-import { cva } from "class-variance-authority";
-import { ToggleButton } from "@kobalte/core/toggle-button";
-//#region src/components/ui/toggle.tsx
-var toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
-	variants: {
-		variant: {
-			default: "bg-transparent",
-			outline: "border border-input bg-transparent hover:bg-muted"
-		},
-		size: {
-			default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-			lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function Toggle(props) {
-	const [local, rest] = splitProps(props, [
-		"class",
-		"variant",
-		"size"
-	]);
-	return createComponent(ToggleButton, mergeProps({
-		"data-slot": "toggle",
-		get ["class"]() {
-			return cn(toggleVariants({
-				variant: local.variant,
-				size: local.size
-			}), local.class);
-		}
-	}, rest));
-}
-//#endregion
-export { Toggle, toggleVariants };

package/dist/components/ui/tooltip.d.ts

@@ -1,15 +0,0 @@
-import { Tooltip as TooltipPrimitive } from '@kobalte/core/tooltip';
-import { type ComponentProps, type ParentProps } from 'solid-js';
-declare const TOOLTIP_DELAY = 200;
-declare function TooltipProvider(props: ParentProps<{
-    delay?: number;
-}>): import("solid-js").JSX.Element;
-declare function Tooltip(props: ComponentProps<typeof TooltipPrimitive>): import("solid-js").JSX.Element;
-declare function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>): import("solid-js").JSX.Element;
-type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> & {
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    sideOffset?: number;
-    align?: 'start' | 'center' | 'end';
-};
-declare function TooltipContent(props: TooltipContentProps): import("solid-js").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TOOLTIP_DELAY };

package/dist/components/ui/tooltip.js

@@ -1,55 +0,0 @@
-import { cn } from "../../lib/utils.js";
-import { createComponent, mergeProps } from "solid-js/web";
-import { createContext, splitProps, useContext } from "solid-js";
-import { Tooltip as Tooltip$1 } from "@kobalte/core/tooltip";
-//#region src/components/ui/tooltip.tsx
-var TOOLTIP_DELAY = 200;
-var TooltipDelayContext = createContext(200);
-function TooltipProvider(props) {
-	return createComponent(TooltipDelayContext.Provider, {
-		get value() {
-			return props.delay ?? 200;
-		},
-		get children() {
-			return props.children;
-		}
-	});
-}
-function Tooltip(props) {
-	const delay = useContext(TooltipDelayContext);
-	return createComponent(Tooltip$1, mergeProps({
-		openDelay: delay,
-		"data-slot": "tooltip"
-	}, props));
-}
-function TooltipTrigger(props) {
-	return createComponent(Tooltip$1.Trigger, mergeProps({ "data-slot": "tooltip-trigger" }, props));
-}
-function TooltipContent(props) {
-	const [local, rest] = splitProps(props, [
-		"class",
-		"side",
-		"sideOffset",
-		"align",
-		"children"
-	]);
-	const placement = () => `${local.side ?? "top"}${local.align ? `-${local.align}` : ""}`;
-	return createComponent(Tooltip$1.Portal, { get children() {
-		return createComponent(Tooltip$1.Content, mergeProps({
-			"data-slot": "tooltip-content",
-			get placement() {
-				return placement();
-			},
-			get gutter() {
-				return local.sideOffset ?? 4;
-			},
-			get ["class"]() {
-				return cn("z-(--z-tooltip) max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0", local.class);
-			}
-		}, rest, { get children() {
-			return local.children;
-		} }));
-	} });
-}
-//#endregion
-export { TOOLTIP_DELAY, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/version-dialog.d.ts

@@ -1,25 +0,0 @@
-export type SharedDesktopUpdate = Readonly<{
-    available_version: string | null;
-    changelog: string;
-    current_version: string;
-    downloaded_bytes: number;
-    error: string | null;
-    github_url: string;
-    phase: 'idle' | 'checking' | 'current' | 'available' | 'downloading' | 'installing' | 'installed' | 'failed';
-    release_date: string | null;
-    release_notes: string | null;
-    restart_required: boolean;
-    total_bytes: number | null;
-}>;
-export type VersionDialogAdapter = Readonly<{
-    check(): Promise<SharedDesktopUpdate>;
-    getStatus(): Promise<SharedDesktopUpdate>;
-    install(expectedVersion: string): Promise<SharedDesktopUpdate>;
-    isDesktopRuntime(): boolean;
-}>;
-export declare function VersionDialog(props: {
-    adapter: VersionDialogAdapter;
-    fallbackVersion?: string;
-    onOpenChange?: (open: boolean) => void;
-    open?: boolean;
-}): import("solid-js").JSX.Element;

package/dist/components/version-dialog.js

@@ -1,330 +0,0 @@
-import { Button, buttonVariants } from "./ui/button.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog.js";
-import { formatReleaseDate, plainTextFromMarkdown } from "../lib/version-notes.js";
-import { createComponent, insert, memo, template } from "solid-js/web";
-import { Check, Download, ExternalLink, FileText, LoaderCircle, RefreshCw, Sparkles } from "lucide-solid";
-import { Show, createEffect, createMemo, createSignal, onMount } from "solid-js";
-//#region src/components/version-dialog.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-3"><span class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"></span><div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<section class="rounded-xl border border-primary/35 bg-primary/8 p-4"aria-label="Available update"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="flex items-center gap-2 text-sm font-semibold">Version <!> is ready</p><p class="text-sm text-muted-foreground">The signed installer will be verified before Adea restarts.`);
-var _tmpl$3 = /*#__PURE__*/ template(`<p class="flex items-center gap-2 text-sm text-success"role=status>Adea is up to date.`);
-var _tmpl$4 = /*#__PURE__*/ template(`<p class="rounded-lg border border-destructive/35 bg-destructive/8 px-3 py-2 text-sm text-destructive"role=alert>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<section class="flex flex-col gap-2"aria-labelledby=adea-release-notes><div><h2 id=adea-release-notes class="text-sm font-semibold">What changed in this release</h2><p class="text-xs text-muted-foreground">Release notes are shown as readable text.</p></div><div class="max-h-52 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div class="flex min-h-0 flex-col gap-5 overflow-y-auto p-6"><section class="rounded-xl border bg-background/45 p-4"aria-label="Version status"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">Installed version</p><p class="text-xl font-semibold tracking-tight">v</p><p class="text-sm text-muted-foreground"></p></div></div></section><section class="flex flex-col gap-2"aria-labelledby=agent-hq-changelog><div><h2 id=agent-hq-changelog class="text-sm font-semibold">Installed changelog</h2><p class="text-xs text-muted-foreground">A plain-text history of the installed channel.</p></div><div class="max-h-72 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
-var _tmpl$7 = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">Released `);
-function errorMessage(caught, fallback) {
-	if (caught instanceof Error && caught.message) return caught.message;
-	if (typeof caught === "string" && caught) return caught;
-	return fallback;
-}
-function phaseLabel(update, fallbackVersion) {
-	if (!update) return `Adea v${fallbackVersion}`;
-	if (update.phase === "checking") return "Checking for updates…";
-	if (update.phase === "available" && update.available_version) return `Update v${update.available_version} available`;
-	if (update.phase === "downloading" || update.phase === "installing") return "Installing update…";
-	if (update.phase === "failed") return `Version ${update.current_version} · Retry`;
-	return `Adea v${update.current_version || fallbackVersion}`;
-}
-function isUpdateBusy(update) {
-	return update?.phase === "checking" || update?.phase === "downloading" || update?.phase === "installing";
-}
-function VersionDialog(props) {
-	const [uncontrolledOpen, setUncontrolledOpen] = createSignal(false);
-	const open = () => props.open ?? uncontrolledOpen();
-	const setOpen = (nextOpen) => {
-		if (props.open === void 0) setUncontrolledOpen(nextOpen);
-		props.onOpenChange?.(nextOpen);
-	};
-	const desktopRuntime = () => props.adapter.isDesktopRuntime();
-	const [update, setUpdate] = createSignal(null);
-	const [busy, setBusy] = createSignal(false);
-	const [error, setError] = createSignal("");
-	const loadCurrentStatus = async () => {
-		if (!desktopRuntime()) return;
-		try {
-			setUpdate(await props.adapter.getStatus());
-		} catch (caught) {
-			setError(errorMessage(caught, "Version status is unavailable"));
-		}
-	};
-	onMount(() => {
-		if (desktopRuntime()) loadCurrentStatus();
-	});
-	const checkForUpdates = async () => {
-		if (!desktopRuntime()) {
-			setError("Update checks are available from the desktop app.");
-			return;
-		}
-		setBusy(true);
-		setError("");
-		try {
-			setUpdate(await props.adapter.check());
-		} catch (caught) {
-			setError(errorMessage(caught, "Could not check for updates"));
-			await loadCurrentStatus();
-		} finally {
-			setBusy(false);
-		}
-	};
-	createEffect(() => {
-		if (!open() || !desktopRuntime()) return;
-		let active = true;
-		setError("");
-		setBusy(true);
-		(async () => {
-			try {
-				const current = await props.adapter.getStatus();
-				if (!active) return;
-				setUpdate(current);
-				const checked = await props.adapter.check();
-				if (active) setUpdate(checked);
-			} catch (caught) {
-				if (active) setError(errorMessage(caught, "Could not check for updates"));
-			} finally {
-				if (active) setBusy(false);
-			}
-		})();
-		return () => {
-			active = false;
-		};
-	});
-	const install = async () => {
-		const version = update()?.available_version;
-		if (!version) return;
-		setBusy(true);
-		setError("");
-		try {
-			const next = await props.adapter.install(version);
-			setUpdate(next);
-			if (next.phase === "failed") setError(errorMessage(next.error, "Update installation failed"));
-		} catch (caught) {
-			setError(errorMessage(caught, "Update installation failed"));
-			await loadCurrentStatus();
-		} finally {
-			setBusy(false);
-		}
-	};
-	const currentChangelog = createMemo(() => plainTextFromMarkdown(update()?.changelog || "Changelog is loading…"));
-	const releaseNotes = () => {
-		const notes = update()?.release_notes;
-		return notes ? plainTextFromMarkdown(notes) : "";
-	};
-	const busyFromSnapshot = () => isUpdateBusy(update());
-	return createComponent(Dialog, {
-		get open() {
-			return open();
-		},
-		onOpenChange: setOpen,
-		get children() {
-			return [createComponent(Show, {
-				get when() {
-					return props.open === void 0;
-				},
-				get children() {
-					return createComponent(DialogTrigger, {
-						get ["class"]() {
-							return buttonVariants({
-								variant: "ghost",
-								size: "sm"
-							});
-						},
-						"aria-label": "Open version and updates dialog",
-						"aria-haspopup": "dialog",
-						onClick: () => setOpen(true),
-						get children() {
-							return [createComponent(Show, {
-								get when() {
-									return update()?.phase === "available";
-								},
-								get fallback() {
-									return createComponent(FileText, { "aria-hidden": "true" });
-								},
-								get children() {
-									return createComponent(Sparkles, { "aria-hidden": "true" });
-								}
-							}), memo(() => phaseLabel(update(), props.fallbackVersion ?? "0.1.0"))];
-						}
-					});
-				}
-			}), createComponent(DialogContent, {
-				"class": "max-w-3xl",
-				get children() {
-					return [
-						createComponent(DialogHeader, { get children() {
-							var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-							insert(_el$2, createComponent(Sparkles, {
-								"class": "size-5",
-								"aria-hidden": "true"
-							}));
-							insert(_el$3, createComponent(DialogTitle, { children: "Version & updates" }), null);
-							insert(_el$3, createComponent(DialogDescription, { children: "Keep Adea current and review what changed in each release." }), null);
-							return _el$;
-						} }),
-						(() => {
-							var _el$4 = _tmpl$6(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$9 = _el$6.firstChild.firstChild.nextSibling;
-							_el$9.firstChild;
-							var _el$1 = _el$9.nextSibling, _el$24 = _el$5.nextSibling, _el$26 = _el$24.firstChild.nextSibling;
-							insert(_el$9, () => update()?.current_version || props.fallbackVersion || "0.1.0", null);
-							insert(_el$1, createComponent(Show, {
-								get when() {
-									return update()?.phase === "current";
-								},
-								get fallback() {
-									return createComponent(Show, {
-										get when() {
-											return memo(() => update()?.phase === "available")() && update()?.available_version;
-										},
-										get fallback() {
-											return desktopRuntime() ? "Check the release channel for the latest signed build." : "Open this dialog inside the desktop app to check for updates.";
-										},
-										get children() {
-											return `A newer desktop release, v${update()?.available_version}, is ready.`;
-										}
-									});
-								},
-								children: "You are running the latest desktop release."
-							}));
-							insert(_el$6, createComponent(Button, {
-								type: "button",
-								variant: "outline",
-								size: "sm",
-								get disabled() {
-									return !desktopRuntime() || busy() || busyFromSnapshot();
-								},
-								onClick: () => void checkForUpdates(),
-								get children() {
-									return [createComponent(Show, {
-										get when() {
-											return busy() || busyFromSnapshot();
-										},
-										get fallback() {
-											return createComponent(RefreshCw, { "aria-hidden": "true" });
-										},
-										get children() {
-											return createComponent(LoaderCircle, {
-												"class": "animate-spin",
-												"aria-hidden": "true"
-											});
-										}
-									}), "Check latest version"];
-								}
-							}), null);
-							insert(_el$4, createComponent(Show, {
-								get when() {
-									return memo(() => update()?.phase === "available")() && update()?.available_version;
-								},
-								get children() {
-									var _el$10 = _tmpl$2(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling;
-									_el$16.nextSibling;
-									_el$13.nextSibling;
-									insert(_el$13, createComponent(Sparkles, {
-										"class": "size-4 text-primary",
-										"aria-hidden": "true"
-									}), _el$14);
-									insert(_el$13, () => update()?.available_version, _el$16);
-									insert(_el$12, createComponent(Show, {
-										get when() {
-											return formatReleaseDate(update()?.release_date ?? null);
-										},
-										children: (released) => (() => {
-											var _el$27 = _tmpl$7();
-											_el$27.firstChild;
-											insert(_el$27, released, null);
-											return _el$27;
-										})()
-									}), null);
-									insert(_el$11, createComponent(Button, {
-										type: "button",
-										size: "sm",
-										get disabled() {
-											return busy() || busyFromSnapshot();
-										},
-										onClick: () => void install(),
-										get children() {
-											return [createComponent(Show, {
-												get when() {
-													return busy() || busyFromSnapshot();
-												},
-												get fallback() {
-													return createComponent(Download, { "aria-hidden": "true" });
-												},
-												get children() {
-													return createComponent(LoaderCircle, {
-														"class": "animate-spin",
-														"aria-hidden": "true"
-													});
-												}
-											}), "Install and restart"];
-										}
-									}), null);
-									return _el$10;
-								}
-							}), _el$24);
-							insert(_el$4, createComponent(Show, {
-								get when() {
-									return update()?.phase === "current";
-								},
-								get children() {
-									var _el$18 = _tmpl$3(), _el$19 = _el$18.firstChild;
-									insert(_el$18, createComponent(Check, {
-										"class": "size-4",
-										"aria-hidden": "true"
-									}), _el$19);
-									return _el$18;
-								}
-							}), _el$24);
-							insert(_el$4, createComponent(Show, {
-								get when() {
-									return error();
-								},
-								get children() {
-									var _el$20 = _tmpl$4();
-									insert(_el$20, error);
-									return _el$20;
-								}
-							}), _el$24);
-							insert(_el$4, createComponent(Show, {
-								get when() {
-									return releaseNotes();
-								},
-								get children() {
-									var _el$21 = _tmpl$5(), _el$23 = _el$21.firstChild.nextSibling;
-									insert(_el$23, releaseNotes);
-									return _el$21;
-								}
-							}), _el$24);
-							insert(_el$26, currentChangelog);
-							return _el$4;
-						})(),
-						createComponent(DialogFooter, { get children() {
-							return [createComponent(Show, {
-								get when() {
-									return update()?.github_url;
-								},
-								children: (githubUrl) => createComponent(Button, {
-									type: "button",
-									variant: "ghost",
-									size: "sm",
-									onClick: () => window.open(githubUrl(), "_blank", "noopener,noreferrer"),
-									get children() {
-										return [createComponent(ExternalLink, { "aria-hidden": "true" }), "View releases"];
-									}
-								})
-							}), createComponent(DialogClose, {
-								get ["class"]() {
-									return buttonVariants({
-										variant: "outline",
-										size: "sm"
-									});
-								},
-								children: "Close"
-							})];
-						} })
-					];
-				}
-			})];
-		}
-	});
-}
-//#endregion
-export { VersionDialog };

package/dist/components/workspace-brand.d.ts

@@ -1,5 +0,0 @@
-export interface WorkspaceBrandProps {
-    title: string;
-    eyebrow?: string;
-}
-export declare function WorkspaceBrand(props: WorkspaceBrandProps): import("solid-js").JSX.Element;

package/dist/components/workspace-brand.js

@@ -1,13 +0,0 @@
-import { insert, template } from "solid-js/web";
-//#region src/components/workspace-brand.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class=workspace-brand><div class=workspace-brand__mark aria-hidden=true><span>HQ</span></div><div><p class=workspace-eyebrow></p><h1>`);
-function WorkspaceBrand(props) {
-	return (() => {
-		var _el$ = _tmpl$(), _el$4 = _el$.firstChild.nextSibling.firstChild, _el$5 = _el$4.nextSibling;
-		insert(_el$4, () => props.eyebrow ?? "AGENT OPERATIONS");
-		insert(_el$5, () => props.title);
-		return _el$;
-	})();
-}
-//#endregion
-export { WorkspaceBrand };

package/dist/components/workspace-logo.d.ts

@@ -1,3 +0,0 @@
-import { type ComponentProps } from 'solid-js';
-/** The canonical Adea mark used by web, desktop, and dialogs. */
-export declare function WorkspaceLogo(props: ComponentProps<'svg'>): import("solid-js").JSX.Element;

package/dist/components/workspace-logo.js

@@ -1,17 +0,0 @@
-import { mergeProps, spread, template } from "solid-js/web";
-import { splitProps } from "solid-js";
-//#region src/components/workspace-logo.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<svg viewBox="0 0 64 64"role=img aria-label=Adea><rect width=64 height=64 rx=16 class=fill-[var(--workspace-logo-surface)]></rect><path d="M10 16h7v13h9V16h7v32h-7V36h-9v12h-7z"class=fill-[var(--workspace-logo-foreground)]></path><path d="M45 16c-7.18 0-13 6-13 16s5.82 16 13 16c7.18 0 13-6 13-16s-5.82-16-13-16Zm0 7c3.42 0 6 3.46 6 9s-2.58 9-6 9-6-3.46-6-9 2.58-9 6-9Z"fill-rule=evenodd class=fill-[var(--workspace-logo-foreground)]></path><path d="m45 35 11 11-4 4-11-11z"class=fill-[var(--workspace-logo-foreground)]>`);
-/** The canonical Adea mark used by web, desktop, and dialogs. */
-function WorkspaceLogo(props) {
-	const [local, rest] = splitProps(props, ["class"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps({ get ["class"]() {
-			return local.class;
-		} }, rest), true, true);
-		return _el$;
-	})();
-}
-//#endregion
-export { WorkspaceLogo };

package/src/components/account-drawer.tsx

@@ -1,114 +0,0 @@
-import { UserRound } from 'lucide-solid'
-import { createEffect, createSignal, Show, type JSX } from 'solid-js'
-import { Portal } from 'solid-js/web'
-
-import { buttonVariants } from '#components/ui/button'
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '#components/ui/drawer'
-import { ThemeToggle } from './theme-toggle'
-
-export type AccountDrawerProps = {
-  accountLabel?: string
-  authenticated?: boolean
-  busy?: boolean
-  musicControl?: JSX.Element
-  triggerTargetId?: string
-  onSignIn?: () => void
-  onSignOut?: () => void
-}
-
-export function AccountDrawer(props: AccountDrawerProps) {
-  const accountLabel = () => props.accountLabel ?? 'Sign in'
-  const [triggerTarget, setTriggerTarget] = createSignal<HTMLElement | null>(null)
-
-  createEffect(() =>
-    setTriggerTarget(props.triggerTargetId ? document.getElementById(props.triggerTargetId) : null)
-  )
-
-  const trigger = (
-    <DrawerTrigger
-      class={buttonVariants({ variant: 'outline', size: 'sm', class: 'workspace-account-trigger' })}
-      aria-label={`Open user menu for ${accountLabel()}`}
-      aria-haspopup="dialog"
-    >
-      <UserRound aria-hidden="true" />
-      <span>{accountLabel()}</span>
-    </DrawerTrigger>
-  )
-
-  return (
-    <Drawer swipeDirection="right">
-      <Show when={triggerTarget()} fallback={<div class="fixed right-4 top-4 z-40">{trigger}</div>}>
-        <Portal mount={triggerTarget()!}>{trigger}</Portal>
-      </Show>
-      <DrawerContent class="w-[min(24rem,90vw)]">
-        <DrawerHeader class="border-b px-5 pb-4 pt-5 text-left">
-          <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
-            <div class="flex min-w-0 items-center gap-3">
-              <span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground">
-                <UserRound class="size-5" aria-hidden="true" />
-              </span>
-              <div class="min-w-0">
-                <DrawerTitle class="truncate">{accountLabel()}</DrawerTitle>
-                <DrawerDescription>
-                  {props.authenticated
-                    ? 'Signed in · workspace saved'
-                    : 'Guest workspace · sign in anytime'}
-                </DrawerDescription>
-              </div>
-            </div>
-            <ThemeToggle class="shrink-0" />
-          </div>
-        </DrawerHeader>
-        <div class="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5">
-          <Show when={props.musicControl}>
-            <section
-              class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
-              aria-labelledby="account-music-title"
-            >
-              <div class="min-w-0">
-                <h2 id="account-music-title" class="text-sm font-semibold">
-                  Music
-                </h2>
-                <p class="text-sm text-muted-foreground">Control the workspace soundtrack.</p>
-              </div>
-              <div class="flex shrink-0 items-center justify-end">{props.musicControl}</div>
-            </section>
-          </Show>
-          <section
-            class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
-            aria-labelledby="account-session-title"
-          >
-            <div class="min-w-0">
-              <h2 id="account-session-title" class="text-sm font-semibold">
-                Account
-              </h2>
-              <p class="text-sm text-muted-foreground">
-                {props.authenticated
-                  ? 'Sign out on this device without removing your saved workspace.'
-                  : 'Sign in or create an account to keep this workspace across devices.'}
-              </p>
-            </div>
-            <DrawerClose
-              class={buttonVariants({
-                variant: props.authenticated ? 'outline' : 'default',
-                class: 'shrink-0',
-              })}
-              disabled={props.busy}
-              onClick={props.authenticated ? props.onSignOut : props.onSignIn}
-            >
-              {props.authenticated ? 'Sign out' : 'Sign in'}
-            </DrawerClose>
-          </section>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  )
-}