@alivault/pico 0.5.2 → 0.6.1

package/.output/server/_ssr/{routes-B_4MdyY2.mjs → routes-C5zYkwvE.mjs}

@@ -2,7 +2,7 @@ import { i as __toESM } from "../_runtime.mjs";
 import { A as DialogRoot, C as MenuPortal, D as TabsTab, E as TabsList$1, F as DialogBackdrop, I as Separator, K as mergeProps, L as Input, M as DialogPopup, N as DialogDescription$1, O as TabsRoot, P as DialogClose, R as Button, S as MenuPositioner, T as MenuItem, X as require_react, Y as require_jsx_runtime, _ as AccordionRoot, a as CollapsiblePanel, b as MenuSubmenuRoot, c as PopoverPopup, d as PopoverTrigger$1, f as PopoverRoot, g as AccordionItem$1, h as AccordionHeader, i as ContextMenuRoot, j as DialogPortal$1, k as DialogTitle$1, l as PopoverPositioner, m as AccordionTrigger$1, n as Toggle, o as CollapsibleTrigger$1, p as AccordionPanel, r as ContextMenuTrigger$1, s as CollapsibleRoot, t as ToggleGroup, u as PopoverPortal, v as MenuSubmenuTrigger, w as MenuPopup, x as MenuRoot, y as MenuTrigger, z as useRender } from "../_libs/@base-ui/react+[...].mjs";
 import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
 import { A as ChevronsUpDown, B as ArrowDown, C as FolderPlus, D as Copy, E as Download, F as Check, I as ArrowUp, L as ArrowUpToLine, N as ChevronRight, O as Command, P as ChevronDown, S as Folder, T as EllipsisVertical, _ as ListEnd, a as Square, b as GitBranch, c as Settings2, d as PanelLeft, f as PanelLeftOpen, g as ListStart, h as OctagonX, j as ChevronsDownUp, l as Search, n as WandSparkles, o as SquarePen, p as PanelLeftClose, r as Upload, s as SquareArrowOutUpRight, t as X, u as PanelRight, w as Ellipsis, x as GitCommitHorizontal, y as ImagePlus, z as ArrowLeft } from "../_libs/lucide-react.mjs";
-import { $ as readStoredRightSidebarOpen, B as normalizeSessionSelectionKeys, C as TooltipContent, E as VIEWER_CONTEXT_STORAGE_KEY, G as readStoredAutoScrollEnabled, H as normalizeThemeMode, I as flattenTree, J as readStoredDraftDirectory, K as readStoredCenterMessages, L as getSessionTitle, M as createInitialSessionState, O as buildItemsFromSync, Q as readStoredRecentDirectories, S as Tooltip$1, T as TooltipTrigger, U as previewUrlForImage, V as normalizeStoredDirectoryList, W as promptDraftKey, X as readStoredPinnedSessionKeys, Y as readStoredHideToolBlocks, Z as readStoredPromptDraft, _ as SESSION_DONE_SOUND_ENABLED_STORAGE_KEY, a as HIDE_TOOL_BLOCKS_STORAGE_KEY, at as safeLocalStorageSetItem, c as PINNED_SESSIONS_STORAGE_KEY, ct as thinkingSummaryText, d as RIGHT_SIDEBAR_FILE_TREE_WIDTH_STORAGE_KEY, et as readStoredSessionDoneDesktopNotificationsEnabled, f as RIGHT_SIDEBAR_HISTORY_HEIGHT_STORAGE_KEY, g as SESSION_DONE_DESKTOP_NOTIFICATIONS_ENABLED_STORAGE_KEY, h as Route, i as DRAFT_DIRECTORY_STORAGE_KEY, it as safeLocalStorageGetItem, j as createContextId, k as cn, l as RECENT_DIRECTORIES_STORAGE_KEY, m as RIGHT_SIDEBAR_WIDTHS_STORAGE_KEY, n as CENTER_MESSAGES_STORAGE_KEY, nt as readStoredSidebarDirectories, o as Kbd, ot as sameContextUsage, p as RIGHT_SIDEBAR_OPEN_STORAGE_KEY, q as readStoredCollapsedDirectories, r as COLLAPSED_DIRECTORIES_STORAGE_KEY, rt as rememberStoredPromptDraft, s as KeyboardShortcutContent, st as sessionListEntryKey, t as AUTO_SCROLL_ENABLED_STORAGE_KEY, tt as readStoredSessionDoneSoundEnabled, u as RIGHT_SIDEBAR_ACTIVE_TAB_STORAGE_KEY, v as SIDEBAR_DIRECTORIES_STORAGE_KEY, x as TitleTooltip, y as Spinner, z as normalizePromptImage } from "./routes-Dmryr4Ep.mjs";
+import { $ as readStoredCenterMessages, A as TooltipTrigger, C as THEME_COLOR_MODE_STORAGE_KEY, D as Tooltip$1, E as TitleTooltip, F as cn, G as normalizePromptImage, H as flattenTree, J as normalizeThemeColorMode, K as normalizeSessionSelectionKeys, L as createContextId, M as appliedThemeClass, O as TooltipContent, P as buildItemsFromSync, Q as readStoredAutoScrollEnabled, R as createInitialSessionState, S as THEME_COLOR_MODES, T as THEME_STORAGE_KEY, U as getSessionTitle, X as previewUrlForImage, Y as normalizeThemeFamily, Z as promptDraftKey, _ as Route, _t as themeColorModeLabel, a as COLLAPSED_DIRECTORIES_STORAGE_KEY, at as readStoredRecentDirectories, b as SIDEBAR_DIRECTORIES_STORAGE_KEY, c as Kbd, ct as readStoredSessionDoneSoundEnabled, d as RECENT_DIRECTORIES_STORAGE_KEY, dt as readStoredThemeColorMode, et as readStoredCollapsedDirectories, f as RIGHT_SIDEBAR_ACTIVE_TAB_STORAGE_KEY, ft as rememberStoredPromptDraft, g as RIGHT_SIDEBAR_WIDTHS_STORAGE_KEY, gt as sessionListEntryKey, h as RIGHT_SIDEBAR_OPEN_STORAGE_KEY, ht as sameContextUsage, i as CENTER_MESSAGES_STORAGE_KEY, it as readStoredPromptDraft, j as VIEWER_CONTEXT_STORAGE_KEY, l as KeyboardShortcutContent, lt as readStoredSidebarDirectories, m as RIGHT_SIDEBAR_HISTORY_HEIGHT_STORAGE_KEY, mt as safeLocalStorageSetItem, n as APPLIED_THEME_STORAGE_KEY, nt as readStoredHideToolBlocks, o as DRAFT_DIRECTORY_STORAGE_KEY, ot as readStoredRightSidebarOpen, p as RIGHT_SIDEBAR_FILE_TREE_WIDTH_STORAGE_KEY, pt as safeLocalStorageGetItem, q as normalizeStoredDirectoryList, r as AUTO_SCROLL_ENABLED_STORAGE_KEY, rt as readStoredPinnedSessionKeys, s as HIDE_TOOL_BLOCKS_STORAGE_KEY, st as readStoredSessionDoneDesktopNotificationsEnabled, tt as readStoredDraftDirectory, u as PINNED_SESSIONS_STORAGE_KEY, ut as readStoredTheme, v as SESSION_DONE_DESKTOP_NOTIFICATIONS_ENABLED_STORAGE_KEY, vt as themeFamilyLabel, w as THEME_FAMILIES, x as Spinner, y as SESSION_DONE_SOUND_ENABLED_STORAGE_KEY, yt as thinkingSummaryText } from "./routes-Qk9CE25v.mjs";
 import { i as useQuery, n as useIsMutating, o as useQueryClient, r as useIsFetching, t as useMutation } from "../_libs/tanstack__react-query.mjs";
 import { t as useHotkeys } from "../_libs/tanstack__react-hotkeys.mjs";
 import { a as matchesKeyboardEvent, i as batch, o as formatForDisplay, r as createStore } from "../_libs/@tanstack/hotkeys+[...].mjs";
@@ -22,7 +22,7 @@ import { t as remarkGfm } from "../_libs/remark-gfm.mjs";
 import { a as getBuiltInSpriteSheet, i as getBuiltInFileIconColor, n as FileTree, r as createFileTreeIconResolver, t as useFileTree } from "../_libs/@pierre/trees+[...].mjs";
 import { a as closestCenter, d as useSensors, f as CSS$1, i as PointerSensor, n as DragOverlay, t as DndContext, u as useSensor } from "../_libs/@dnd-kit/core+[...].mjs";
 import { a as verticalListSortingStrategy, i as useSortable, n as arrayMove, r as horizontalListSortingStrategy, t as SortableContext } from "../_libs/dnd-kit__sortable.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/routes-B_4MdyY2.js
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-C5zYkwvE.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
 var MOBILE_BREAKPOINT = 768;
@@ -2774,25 +2774,33 @@ function AppShellSessionsDialogController({ ref, openStateRef, ...props }) {
 		...props
 	});
 }
-var THEME_OPTIONS = [
-	"system",
-	"light",
-	"dark"
-];
+var THEME_OPTIONS = [...THEME_FAMILIES];
+var THEME_COLOR_MODE_OPTIONS = [...THEME_COLOR_MODES];
 function desktopNotificationPermissionLabel(permission) {
 	if (permission === "unsupported") return "Desktop notifications are unavailable in this browser.";
 	if (permission === "granted") return "Desktop notifications are enabled for this origin.";
 	if (permission === "denied") return "Desktop notifications are blocked in this browser.";
 	return "Desktop notifications will ask for browser permission when enabled.";
 }
-function formatThemeMode(theme) {
-	return `${theme[0].toUpperCase()}${theme.slice(1)}`;
-}
 function formatToggleValue(enabled) {
 	return enabled ? "On" : "Off";
 }
-function nextThemeMode(currentTheme) {
-	return THEME_OPTIONS[(THEME_OPTIONS.indexOf(currentTheme) + 1) % THEME_OPTIONS.length] ?? "system";
+function nextThemeColorMode(currentMode) {
+	return THEME_COLOR_MODE_OPTIONS[(THEME_COLOR_MODE_OPTIONS.indexOf(currentMode) + 1) % THEME_COLOR_MODE_OPTIONS.length] ?? "auto";
+}
+function themeDescription(theme) {
+	switch (theme) {
+		case "default": return "Use Pico's default palette.";
+		case "flexoki": return "Use Flexoki's warm paper and inky dark palettes.";
+		default: return "Use this theme.";
+	}
+}
+function themeKeywords(theme) {
+	return [
+		theme,
+		themeFamilyLabel(theme),
+		themeDescription(theme)
+	];
 }
 function settingsCommandKeywords(command) {
 	return [
@@ -2807,9 +2815,13 @@ function settingsCommandFilter(value, search, keywords) {
 	if (!query) return 1;
 	return [value, ...keywords ?? []].join(" ").toLowerCase().includes(query) ? 1 : 0;
 }
-function AppShellSettingsDialog({ open, onOpenChange, currentTheme, onThemeChange, hideThinkingBlocks, onHideThinkingBlocksChange, hideToolBlocks, onHideToolBlocksChange, centerMessages, onCenterMessagesChange, autoScrollEnabled, onAutoScrollEnabledChange, sessionDoneSoundEnabled, onSessionDoneSoundEnabledChange, sessionDoneDesktopNotificationsEnabled, onSessionDoneDesktopNotificationsEnabledChange, desktopNotificationPermission, onLoginProviders, onLogoutProviders }) {
+function AppShellSettingsDialog({ open, onOpenChange, currentTheme, currentThemeColorMode, onThemeChange, onThemeColorModeChange, onThemePreviewChange, systemTheme, hideThinkingBlocks, onHideThinkingBlocksChange, hideToolBlocks, onHideToolBlocksChange, centerMessages, onCenterMessagesChange, autoScrollEnabled, onAutoScrollEnabledChange, sessionDoneSoundEnabled, onSessionDoneSoundEnabledChange, sessionDoneDesktopNotificationsEnabled, onSessionDoneDesktopNotificationsEnabledChange, desktopNotificationPermission, onLoginProviders, onLogoutProviders }) {
 	const [query, setQuery] = import_react.useState("");
+	const [themeQuery, setThemeQuery] = import_react.useState("");
+	const [stage, setStage] = import_react.useState("browse");
 	const [selectedCommandId, setSelectedCommandId] = import_react.useState("theme");
+	const [selectedTheme, setSelectedTheme] = import_react.useState(currentTheme);
+	const themePreviewInitialRef = import_react.useRef(currentTheme);
 	const isMobile = useIsMobile();
 	const desktopNotificationDescription = desktopNotificationPermissionLabel(desktopNotificationPermission);
 	const settingGroups = [
@@ -2818,16 +2830,33 @@ function AppShellSettingsDialog({ open, onOpenChange, currentTheme, onThemeChang
 			commands: [{
 				id: "theme",
 				title: "Theme",
-				description: "Cycle between system, light, and dark mode.",
-				valueLabel: formatThemeMode(currentTheme),
+				description: "Choose between Default and Flexoki.",
+				valueLabel: themeFamilyLabel(currentTheme),
 				keywords: [
 					"color",
 					"mode",
+					"default",
+					"flexoki"
+				],
+				onSelect: () => {
+					themePreviewInitialRef.current = currentTheme;
+					setSelectedTheme(currentTheme);
+					setStage("theme");
+				}
+			}, {
+				id: "theme-color-mode",
+				title: "Light/dark mode",
+				description: "Follow OS appearance, or force light or dark mode.",
+				valueLabel: themeColorModeLabel(currentThemeColorMode, systemTheme),
+				keywords: [
+					"auto",
 					"system",
 					"light",
-					"dark"
+					"dark",
+					"mode",
+					"color"
 				],
-				onSelect: () => onThemeChange(nextThemeMode(currentTheme))
+				onSelect: () => onThemeColorModeChange(nextThemeColorMode(currentThemeColorMode))
 			}]
 		},
 		{
@@ -2950,14 +2979,43 @@ function AppShellSettingsDialog({ open, onOpenChange, currentTheme, onThemeChang
 		}
 	];
 	import_react.useEffect(() => {
-		if (!open && query) setQuery("");
-	}, [open, query]);
+		if (open) return;
+		if (stage === "theme") onThemePreviewChange(themePreviewInitialRef.current);
+		if (query) setQuery("");
+		if (themeQuery) setThemeQuery("");
+		setStage("browse");
+	}, [
+		onThemePreviewChange,
+		open,
+		query,
+		stage,
+		themeQuery
+	]);
+	import_react.useEffect(() => {
+		if (stage === "theme") setSelectedTheme(currentTheme);
+	}, [currentTheme, stage]);
 	const handleSelect = (command) => {
 		Promise.resolve(command.onSelect()).catch((error) => {
 			console.error(error);
 		});
 	};
-	const settingsCommandBody = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Command$1, {
+	const handleThemePreview = (theme) => {
+		if (!THEME_OPTIONS.includes(theme)) return;
+		setSelectedTheme(theme);
+		onThemePreviewChange(theme);
+	};
+	const handleThemeSelect = (theme) => {
+		setSelectedTheme(theme);
+		themePreviewInitialRef.current = theme;
+		onThemeChange(theme);
+	};
+	const cancelThemePreview = () => {
+		const initialTheme = themePreviewInitialRef.current;
+		setSelectedTheme(initialTheme);
+		onThemePreviewChange(initialTheme);
+		setStage("browse");
+	};
+	const settingsBrowseBody = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Command$1, {
 		shouldFilter: true,
 		filter: settingsCommandFilter,
 		loop: true,
@@ -2999,10 +3057,83 @@ function AppShellSettingsDialog({ open, onOpenChange, currentTheme, onThemeChang
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				className: "hidden border-t border-border/70 px-3 py-2 text-xs text-muted-foreground md:block",
-				children: "Use ↑/↓ to select, Enter to cycle or toggle, and Esc to close."
+				children: "Use ↑/↓ to select, Enter to open or toggle, and Esc to close."
 			})
 		]
 	});
+	const settingsThemeBody = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		onKeyDown: (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			cancelThemePreview();
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 border-b border-border/70 px-3 py-2",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button$1, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: cancelThemePreview,
+				"aria-label": "Back to settings",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, {})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "truncate text-sm font-medium",
+					children: "Choose theme"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "truncate text-xs text-muted-foreground",
+					children: ["Current: ", themeFamilyLabel(currentTheme)]
+				})]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Command$1, {
+			shouldFilter: true,
+			loop: true,
+			value: selectedTheme,
+			onValueChange: (value) => handleThemePreview(value),
+			className: "min-h-0 flex-1 rounded-none!",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommandInput, {
+					autoFocus: !isMobile,
+					value: themeQuery,
+					onValueChange: setThemeQuery,
+					placeholder: "Search themes",
+					className: "text-base md:text-sm"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CommandList, {
+					className: "max-h-none min-h-0 flex-1 md:max-h-[min(70vh,28rem)]",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommandEmpty, { children: "No themes found." }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommandGroup, {
+						heading: "Themes",
+						children: THEME_OPTIONS.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommandItem, {
+							value: theme,
+							keywords: themeKeywords(theme),
+							onMouseEnter: () => handleThemePreview(theme),
+							onSelect: () => handleThemeSelect(theme),
+							"data-checked": theme === currentTheme ? true : void 0,
+							className: "items-start py-2",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex min-w-0 flex-1 flex-col gap-0.5",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "truncate font-medium",
+									children: themeFamilyLabel(theme)
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "line-clamp-2 text-xs text-muted-foreground",
+									children: themeDescription(theme)
+								})]
+							})
+						}, theme))
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "hidden border-t border-border/70 px-3 py-2 text-xs text-muted-foreground md:block",
+					children: "Use ↑/↓ to select, Enter to choose, and Esc to go back."
+				})
+			]
+		})]
+	});
+	const settingsCommandBody = stage === "theme" ? settingsThemeBody : settingsBrowseBody;
 	if (isMobile) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Drawer$1, {
 		open,
 		onOpenChange,
@@ -3019,7 +3150,7 @@ function AppShellSettingsDialog({ open, onOpenChange, currentTheme, onThemeChang
 		open,
 		onOpenChange,
 		title: "Settings",
-		description: "Search settings. Press Enter on a setting to cycle or toggle it.",
+		description: "Search settings. Press Enter on a setting to open or toggle it.",
 		className: "sm:max-w-2xl",
 		initialFocus: true,
 		children: settingsCommandBody
@@ -7043,7 +7174,7 @@ var AppShellTreeDialogHost = import_react.memo(function AppShellTreeDialogHost({
 		activeSessionStreaming: useSelector(sessionStore, (sessionState) => sessionState.streaming)
 	});
 });
-var AppShellSettingsDialogHost = import_react.memo(function AppShellSettingsDialogHost({ authDialogRef, currentTheme, displaySettingsStore, notificationStore, onAutoScrollEnabledChange, onCenterMessagesChange, onHideThinkingBlocksChange, onHideToolBlocksChange, onSessionDoneDesktopNotificationsEnabledChange, onSessionDoneSoundEnabledChange, onThemeChange, sessionStore, settingsDialogRef, settingsOpenRef }) {
+var AppShellSettingsDialogHost = import_react.memo(function AppShellSettingsDialogHost({ authDialogRef, currentTheme, currentThemeColorMode, displaySettingsStore, notificationStore, onAutoScrollEnabledChange, onCenterMessagesChange, onHideThinkingBlocksChange, onHideToolBlocksChange, onSessionDoneDesktopNotificationsEnabledChange, onSessionDoneSoundEnabledChange, onThemeChange, onThemeColorModeChange, onThemePreviewChange, sessionStore, settingsDialogRef, settingsOpenRef, systemTheme }) {
 	const hideThinkingBlocks = useSelector(sessionStore, (sessionState) => sessionState.hideThinkingBlock);
 	const { autoScrollEnabled, centerMessages, hideToolBlocks } = useSelector(displaySettingsStore);
 	const { desktopNotificationPermission, sessionDoneDesktopNotificationsEnabled, sessionDoneSoundEnabled } = useSelector(notificationStore, (state) => ({
@@ -7059,7 +7190,11 @@ var AppShellSettingsDialogHost = import_react.memo(function AppShellSettingsDial
 		ref: settingsDialogRef,
 		openStateRef: settingsOpenRef,
 		currentTheme,
+		currentThemeColorMode,
 		onThemeChange,
+		onThemeColorModeChange,
+		onThemePreviewChange,
+		systemTheme,
 		hideThinkingBlocks,
 		onHideThinkingBlocksChange,
 		hideToolBlocks,
@@ -7086,7 +7221,7 @@ var AppShellUiRequestDialogHost = import_react.memo(function AppShellUiRequestDi
 		onAuthBack: () => authDialogRef.current?.open("login")
 	});
 });
-var AppShellFloatingControllers = import_react.memo(function AppShellFloatingControllers({ activeSessionId, addDirectoryDialogRef, addDirectoryOpenRef, addDirectoryPath, baseSidebarDirectories, commandPaletteCommandsRef, commandPaletteOpenRef, commandPaletteRef, currentSessionQueryScope, currentTheme, authDialogRef, authOpenRef, deleteDialogRef, deleteOpenRef, deleteSessions, deleteOldDirectorySessionsDialogRef, deleteOldDirectorySessionsOpenRef, notificationStore, forkDialogRef, forkOpenRef, gitCommitDialogRef, gitCommitOpenRef, displaySettingsStore, knownDirectories, onAutoScrollEnabledChange, onCenterMessagesChange, onHideThinkingBlocksChange, onHideToolBlocksChange, onSessionDoneDesktopNotificationsEnabledChange, onSessionDoneSoundEnabledChange, onSessionDialogSelect, onThemeChange, recentDirectoriesStore, renameDialogRef, renameOpenRef, renameSessionPath, sessionCwd, sessionsDialogDirectory, sessionsDialogRef, sessionsOpenRef, sessionStore, settingsDialogRef, settingsOpenRef, sidebarStore, treeDialogRef, treeOpenRef, uiRequestDialogRef, uiRequestOpenRef, viewerContextId }) {
+var AppShellFloatingControllers = import_react.memo(function AppShellFloatingControllers({ activeSessionId, addDirectoryDialogRef, addDirectoryOpenRef, addDirectoryPath, baseSidebarDirectories, commandPaletteCommandsRef, commandPaletteOpenRef, commandPaletteRef, currentSessionQueryScope, currentTheme, currentThemeColorMode, authDialogRef, authOpenRef, deleteDialogRef, deleteOpenRef, deleteSessions, deleteOldDirectorySessionsDialogRef, deleteOldDirectorySessionsOpenRef, notificationStore, forkDialogRef, forkOpenRef, gitCommitDialogRef, gitCommitOpenRef, displaySettingsStore, knownDirectories, onAutoScrollEnabledChange, onCenterMessagesChange, onHideThinkingBlocksChange, onHideToolBlocksChange, onSessionDoneDesktopNotificationsEnabledChange, onSessionDoneSoundEnabledChange, onSessionDialogSelect, onThemeChange, onThemeColorModeChange, onThemePreviewChange, recentDirectoriesStore, renameDialogRef, renameOpenRef, renameSessionPath, sessionCwd, sessionsDialogDirectory, sessionsDialogRef, sessionsOpenRef, sessionStore, settingsDialogRef, settingsOpenRef, sidebarStore, treeDialogRef, treeOpenRef, uiRequestDialogRef, uiRequestOpenRef, viewerContextId, systemTheme }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppShellCommandPaletteHost, {
 			commandPaletteCommandsRef,
@@ -7162,6 +7297,7 @@ var AppShellFloatingControllers = import_react.memo(function AppShellFloatingCon
 		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppShellSettingsDialogHost, {
 			authDialogRef,
 			currentTheme,
+			currentThemeColorMode,
 			displaySettingsStore,
 			notificationStore,
 			onAutoScrollEnabledChange,
@@ -7171,9 +7307,12 @@ var AppShellFloatingControllers = import_react.memo(function AppShellFloatingCon
 			onSessionDoneDesktopNotificationsEnabledChange,
 			onSessionDoneSoundEnabledChange,
 			onThemeChange,
+			onThemeColorModeChange,
+			onThemePreviewChange,
 			sessionStore,
 			settingsDialogRef,
-			settingsOpenRef
+			settingsOpenRef,
+			systemTheme
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppShellUiRequestDialogHost, {
 			activeSessionId,
@@ -18934,6 +19073,38 @@ function useAppShellPromptMutations({ viewerContextId, activeSessionId, defaultN
 		submitPrompt
 	};
 }
+function usePicoTheme() {
+	const { setTheme, systemTheme } = z();
+	const [themeFamily, setThemeFamilyState] = import_react.useState(() => readStoredTheme());
+	const [colorMode, setColorModeState] = import_react.useState(() => readStoredThemeColorMode());
+	const appliedTheme = appliedThemeClass(themeFamily, colorMode, systemTheme);
+	import_react.useEffect(() => {
+		setTheme(appliedTheme);
+		safeLocalStorageSetItem(APPLIED_THEME_STORAGE_KEY, appliedTheme);
+	}, [appliedTheme, setTheme]);
+	const previewThemeFamily = (value) => {
+		setThemeFamilyState(normalizeThemeFamily(value));
+	};
+	const setThemeFamily = (value) => {
+		const nextTheme = normalizeThemeFamily(value);
+		setThemeFamilyState(nextTheme);
+		safeLocalStorageSetItem(THEME_STORAGE_KEY, nextTheme);
+	};
+	const setColorMode = (value) => {
+		const nextMode = normalizeThemeColorMode(value);
+		setColorModeState(nextMode);
+		safeLocalStorageSetItem(THEME_COLOR_MODE_STORAGE_KEY, nextMode);
+	};
+	return {
+		appliedTheme,
+		colorMode,
+		previewThemeFamily,
+		setColorMode,
+		setThemeFamily,
+		systemTheme,
+		themeFamily
+	};
+}
 function sameThinkingLevelSessionTarget(target, state) {
 	if (target.sessionKey || state.sessionKey) return target.sessionKey === state.sessionKey;
 	if (target.sessionId || state.sessionId) return target.sessionId === state.sessionId;
@@ -20596,8 +20767,7 @@ var AppShellSessionWorkspace = import_react.forwardRef(function AppShellSessionW
 		conversationItemsStore.setItems(nextItems);
 		setSessionState(nextState);
 	}, [conversationItemsStore]);
-	const { setTheme, theme } = z();
-	const currentTheme = normalizeThemeMode(theme);
+	const { colorMode: currentThemeColorMode, previewThemeFamily, setColorMode, setThemeFamily, systemTheme, themeFamily: currentTheme } = usePicoTheme();
 	const { initialLoadingSessionId, loadingSessionId } = useSelector(appUiStore, (state) => ({
 		initialLoadingSessionId: state.initialLoadingSessionId,
 		loadingSessionId: state.loadingSessionId
@@ -21512,7 +21682,13 @@ var AppShellSessionWorkspace = import_react.forwardRef(function AppShellSessionW
 		}
 	};
 	const handleThemeChange = (value) => {
-		setTheme(value);
+		setThemeFamily(value);
+	};
+	const handleThemePreviewChange = (value) => {
+		previewThemeFamily(value);
+	};
+	const handleThemeColorModeChange = (value) => {
+		setColorMode(value);
 	};
 	const composerSnapshot = {
 		activeSessionId,
@@ -22158,6 +22334,7 @@ var AppShellSessionWorkspace = import_react.forwardRef(function AppShellSessionW
 			commandPaletteRef,
 			currentSessionQueryScope,
 			currentTheme,
+			currentThemeColorMode,
 			authDialogRef,
 			authOpenRef,
 			deleteDialogRef,
@@ -22182,6 +22359,9 @@ var AppShellSessionWorkspace = import_react.forwardRef(function AppShellSessionW
 			onSessionDoneSoundEnabledChange: handleSessionDoneSoundEnabledChange,
 			onSessionDialogSelect: handleSelectSession,
 			onThemeChange: handleThemeChange,
+			onThemeColorModeChange: handleThemeColorModeChange,
+			onThemePreviewChange: handleThemePreviewChange,
+			systemTheme,
 			recentDirectoriesStore,
 			renameDialogRef,
 			renameOpenRef,

package/.output/server/_ssr/{routes-Dmryr4Ep.mjs → routes-Qk9CE25v.mjs}

@@ -5,7 +5,7 @@ import { n as clsx } from "../_libs/class-variance-authority+clsx.mjs";
 import { t as twMerge } from "../_libs/tailwind-merge.mjs";
 import { B as ArrowDown, I as ArrowUp, M as ChevronUp, O as Command, R as ArrowRight, V as ArrowBigUp, m as Option, z as ArrowLeft } from "../_libs/lucide-react.mjs";
 import { n as string, t as object } from "../_libs/zod.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/routes-Dmryr4Ep.js
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-Qk9CE25v.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
 function cn(...inputs) {
@@ -255,6 +255,20 @@ function Spinner({ className, "aria-label": ariaLabel = "Loading", ...props }) {
 	});
 }
 var THEME_STORAGE_KEY = "pico-theme";
+var THEME_COLOR_MODE_STORAGE_KEY = "pico-theme-color-mode";
+var APPLIED_THEME_STORAGE_KEY = "pico-applied-theme";
+var THEME_FAMILIES = ["default", "flexoki"];
+var THEME_COLOR_MODES = [
+	"auto",
+	"light",
+	"dark"
+];
+var APPLIED_THEME_CLASSES = [
+	"light",
+	"dark",
+	"flexoki-light",
+	"flexoki-dark"
+];
 var DRAFT_DIRECTORY_STORAGE_KEY = "pico-draft-directory";
 var SIDEBAR_DIRECTORIES_STORAGE_KEY = "pico-sidebar-directories";
 var COLLAPSED_DIRECTORIES_STORAGE_KEY = "pico-collapsed-directories";
@@ -412,8 +426,39 @@ function readStoredRecentDirectories() {
 		return [];
 	}
 }
-function normalizeThemeMode(value) {
-	return value === "light" || value === "dark" || value === "system" ? value : "system";
+function normalizeThemeFamily(value) {
+	return value === "flexoki" || value === "flexoki-light" || value === "flexoki-dark" ? "flexoki" : "default";
+}
+function normalizeThemeColorMode(value) {
+	if (value === "auto" || value === "system") return "auto";
+	if (value === "light" || value === "flexoki-light") return "light";
+	if (value === "dark" || value === "flexoki-dark") return "dark";
+	return "auto";
+}
+function resolvedThemeMode(mode, systemTheme) {
+	if (mode === "auto") return systemTheme === "dark" ? "dark" : "light";
+	return mode;
+}
+function appliedThemeClass(family, mode, systemTheme) {
+	const resolvedMode = resolvedThemeMode(mode, systemTheme);
+	if (family === "flexoki") return resolvedMode === "dark" ? "flexoki-dark" : "flexoki-light";
+	return resolvedMode;
+}
+function themeFamilyLabel(theme) {
+	return theme === "flexoki" ? "Flexoki" : "Default";
+}
+function themeColorModeLabel(mode, systemTheme) {
+	if (mode === "auto") {
+		if (!systemTheme) return "Auto";
+		return `Auto (${resolvedThemeMode(mode, systemTheme) === "light" ? "Light" : "Dark"})`;
+	}
+	return mode === "light" ? "Light" : "Dark";
+}
+function readStoredTheme() {
+	return normalizeThemeFamily((safeLocalStorageGetItem("pico-theme") ?? "default").trim());
+}
+function readStoredThemeColorMode() {
+	return normalizeThemeColorMode((safeLocalStorageGetItem("pico-theme-color-mode") ?? safeLocalStorageGetItem("pico-theme") ?? "auto").trim());
 }
 function readStoredHideToolBlocks() {
 	return safeLocalStorageGetItem(HIDE_TOOL_BLOCKS_STORAGE_KEY) === "1";
@@ -1279,11 +1324,11 @@ function getSessionTitle(summary) {
 	if (summary?.name?.trim()) return summary.name.trim();
 	return "New session";
 }
-var $$splitComponentImporter = () => import("./routes-B_4MdyY2.mjs");
+var $$splitComponentImporter = () => import("./routes-C5zYkwvE.mjs");
 var indexSearchSchema = object({ session: string().optional() });
 var Route = createFileRoute("/")({
 	validateSearch: indexSearchSchema,
 	component: lazyRouteComponent($$splitComponentImporter, "component")
 });
 //#endregion
-export { readStoredRightSidebarOpen as $, createCompactionSummaryItem as A, normalizeSessionSelectionKeys as B, TooltipContent as C, assistantBlocksFromMessage as D, VIEWER_CONTEXT_STORAGE_KEY as E, extractToolText as F, readStoredAutoScrollEnabled as G, normalizeThemeMode as H, flattenTree as I, readStoredDraftDirectory as J, readStoredCenterMessages as K, getSessionTitle as L, createInitialSessionState as M, extractMessageImages as N, buildItemsFromSync as O, extractMessageText as P, readStoredRecentDirectories as Q, mergeAssistantBlocksForStreaming as R, Tooltip$1 as S, TooltipTrigger as T, previewUrlForImage as U, normalizeStoredDirectoryList as V, promptDraftKey as W, readStoredPinnedSessionKeys as X, readStoredHideToolBlocks as Y, readStoredPromptDraft as Z, SESSION_DONE_SOUND_ENABLED_STORAGE_KEY as _, HIDE_TOOL_BLOCKS_STORAGE_KEY as a, safeLocalStorageSetItem as at, THEME_STORAGE_KEY as b, PINNED_SESSIONS_STORAGE_KEY as c, thinkingSummaryText as ct, RIGHT_SIDEBAR_FILE_TREE_WIDTH_STORAGE_KEY as d, readStoredSessionDoneDesktopNotificationsEnabled as et, RIGHT_SIDEBAR_HISTORY_HEIGHT_STORAGE_KEY as f, SESSION_DONE_DESKTOP_NOTIFICATIONS_ENABLED_STORAGE_KEY as g, Route as h, DRAFT_DIRECTORY_STORAGE_KEY as i, safeLocalStorageGetItem as it, createContextId as j, cn as k, RECENT_DIRECTORIES_STORAGE_KEY as l, toolCategoryFromTool as lt, RIGHT_SIDEBAR_WIDTHS_STORAGE_KEY as m, CENTER_MESSAGES_STORAGE_KEY as n, readStoredSidebarDirectories as nt, Kbd as o, sameContextUsage as ot, RIGHT_SIDEBAR_OPEN_STORAGE_KEY as p, readStoredCollapsedDirectories as q, COLLAPSED_DIRECTORIES_STORAGE_KEY as r, rememberStoredPromptDraft as rt, KeyboardShortcutContent as s, sessionListEntryKey as st, AUTO_SCROLL_ENABLED_STORAGE_KEY as t, readStoredSessionDoneSoundEnabled as tt, RIGHT_SIDEBAR_ACTIVE_TAB_STORAGE_KEY as u, SIDEBAR_DIRECTORIES_STORAGE_KEY as v, TooltipProvider as w, TitleTooltip as x, Spinner as y, normalizePromptImage as z };
+export { readStoredCenterMessages as $, TooltipTrigger as A, extractMessageText as B, THEME_COLOR_MODE_STORAGE_KEY as C, Tooltip$1 as D, TitleTooltip as E, cn as F, normalizePromptImage as G, flattenTree as H, createCompactionSummaryItem as I, normalizeThemeColorMode as J, normalizeSessionSelectionKeys as K, createContextId as L, appliedThemeClass as M, assistantBlocksFromMessage as N, TooltipContent as O, buildItemsFromSync as P, readStoredAutoScrollEnabled as Q, createInitialSessionState as R, THEME_COLOR_MODES as S, THEME_STORAGE_KEY as T, getSessionTitle as U, extractToolText as V, mergeAssistantBlocksForStreaming as W, previewUrlForImage as X, normalizeThemeFamily as Y, promptDraftKey as Z, Route as _, themeColorModeLabel as _t, COLLAPSED_DIRECTORIES_STORAGE_KEY as a, readStoredRecentDirectories as at, SIDEBAR_DIRECTORIES_STORAGE_KEY as b, toolCategoryFromTool as bt, Kbd as c, readStoredSessionDoneSoundEnabled as ct, RECENT_DIRECTORIES_STORAGE_KEY as d, readStoredThemeColorMode as dt, readStoredCollapsedDirectories as et, RIGHT_SIDEBAR_ACTIVE_TAB_STORAGE_KEY as f, rememberStoredPromptDraft as ft, RIGHT_SIDEBAR_WIDTHS_STORAGE_KEY as g, sessionListEntryKey as gt, RIGHT_SIDEBAR_OPEN_STORAGE_KEY as h, sameContextUsage as ht, CENTER_MESSAGES_STORAGE_KEY as i, readStoredPromptDraft as it, VIEWER_CONTEXT_STORAGE_KEY as j, TooltipProvider as k, KeyboardShortcutContent as l, readStoredSidebarDirectories as lt, RIGHT_SIDEBAR_HISTORY_HEIGHT_STORAGE_KEY as m, safeLocalStorageSetItem as mt, APPLIED_THEME_STORAGE_KEY as n, readStoredHideToolBlocks as nt, DRAFT_DIRECTORY_STORAGE_KEY as o, readStoredRightSidebarOpen as ot, RIGHT_SIDEBAR_FILE_TREE_WIDTH_STORAGE_KEY as p, safeLocalStorageGetItem as pt, normalizeStoredDirectoryList as q, AUTO_SCROLL_ENABLED_STORAGE_KEY as r, readStoredPinnedSessionKeys as rt, HIDE_TOOL_BLOCKS_STORAGE_KEY as s, readStoredSessionDoneDesktopNotificationsEnabled as st, APPLIED_THEME_CLASSES as t, readStoredDraftDirectory as tt, PINNED_SESSIONS_STORAGE_KEY as u, readStoredTheme as ut, SESSION_DONE_DESKTOP_NOTIFICATIONS_ENABLED_STORAGE_KEY as v, themeFamilyLabel as vt, THEME_FAMILIES as w, Spinner as x, SESSION_DONE_SOUND_ENABLED_STORAGE_KEY as y, thinkingSummaryText as yt, extractMessageImages as z };

package/.output/server/_ssr/ssr.mjs

@@ -3813,7 +3813,7 @@ var defaultSerovalPlugins = [
 * the dev styles URL for route-scoped CSS collection.
 */
 async function getStartManifest(matchedRoutes) {
-	const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-D9Bp2MHo.mjs");
+	const { tsrStartManifest } = await import("../_tanstack-start-manifest_v-Bp-gg9fI.mjs");
 	const startManifest = tsrStartManifest();
 	const rootRoute = startManifest.routes[rootRouteId] = startManifest.routes["__root__"] || {};
 	rootRoute.assets = rootRoute.assets || [];
@@ -4799,7 +4799,7 @@ var baseManifestPromise;
 var cachedFinalManifestPromise;
 async function loadEntries() {
 	const [routerEntry, startEntry, pluginAdapters] = await Promise.all([
-		import("./router-BKbJyS60.mjs"),
+		import("./router-Bw2oDzya.mjs"),
 		import("./start-Captdpmb.mjs"),
 		import("../__23tanstack-start-plugin-adapters-y_fshQDY.mjs")
 	]);

package/.output/server/{_tanstack-start-manifest_v-D9Bp2MHo.mjs → _tanstack-start-manifest_v-Bp-gg9fI.mjs}

@@ -1,4 +1,4 @@
-//#region node_modules/.nitro/vite/services/ssr/assets/_tanstack-start-manifest_v-D9Bp2MHo.js
+//#region node_modules/.nitro/vite/services/ssr/assets/_tanstack-start-manifest_v-Bp-gg9fI.js
 var tsrStartManifest = () => ({
 	routes: {
 		__root__: {
@@ -50,16 +50,16 @@ var tsrStartManifest = () => ({
 				"/api/ui/$id"
 			],
 			assets: void 0,
-			preloads: ["/assets/index-Bwe_XQfD.js", "/assets/rolldown-runtime-S-ySWqyJ.js"]
+			preloads: ["/assets/index-BHnoJmIv.js", "/assets/rolldown-runtime-S-ySWqyJ.js"]
 		},
 		"/": {
 			filePath: "/home/runner/work/pico/pico/src/routes/index.tsx",
 			children: void 0,
 			assets: void 0,
-			preloads: ["/assets/routes-BN7pNQ_y.js"]
+			preloads: ["/assets/routes-BfJLj6KG.js"]
 		}
 	},
-	clientEntry: "/assets/index-Bwe_XQfD.js"
+	clientEntry: "/assets/index-BHnoJmIv.js"
 });
 //#endregion
 export { tsrStartManifest };