@parallelworks/ui 0.52.0 → 0.54.0

package/dist/file-explorer/TreeView.js

@@ -3,8 +3,9 @@ import { ChevronRightIcon, FolderIcon, FolderOpenIcon } from "../icons.js";
 import { isDev } from "../dev.js";
 import { positionKeys } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { Skeleton } from "../components/Skeleton.js";
-import { getParentPath } from "./lib/utils.js";
+import { carriesFiles, getParentPath } from "./lib/utils.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { edgeRow, findRowIndex, firstChildRow, flattenTreeRows, nextFileLimit, parentRow, stepRow } from "./treeRows.js";
@@ -23,7 +24,7 @@ function rowHeight(row) {
 }
 /** The sidebar tree, flattened and windowed. The flat array is the single source
 *  of truth for rendering, arrow keys and ARIA. */
-function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, paging }) {
+function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath, loadingPaths, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onPreviewFile, pathHref, onFollowLink, paging }) {
 	const [scrollEl, setScrollEl] = useState(null);
 	const treeLabel = useStrings().fileExplorer.chrome.folders;
 	const [fileLimits, setFileLimits] = useState(() => /* @__PURE__ */ new Map());
@@ -151,6 +152,8 @@ function TreeView({ rootNodes, parentToChildrenMap, expandedPaths, selectedPath,
 			}) : /* @__PURE__ */ jsx(TreeRowItem, {
 				row,
 				isSelected: row.node.path === selectedPath,
+				href: pathHref?.(row.node.path),
+				onFollowLink,
 				onToggleExpand,
 				onSelect,
 				onDropToFolder,
@@ -269,6 +272,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 		dragHandlers: {
 			onDragEnter: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current += 1;
 				setDragActive(true);
@@ -280,6 +284,7 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 			onDragOver: (e) => e.preventDefault(),
 			onDragLeave: (e) => {
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
 				e.stopPropagation();
 				hoverCount.current -= 1;
 				if (hoverCount.current > 0) return;
@@ -287,8 +292,9 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 				clear();
 			},
 			onDrop: (e) => {
-				e.stopPropagation();
 				e.preventDefault();
+				if (!carriesFiles(e.dataTransfer)) return;
+				e.stopPropagation();
 				hoverCount.current = 0;
 				setDragActive(false);
 				clear();
@@ -300,8 +306,9 @@ function useSpringLoadedDrop({ node, dropPath, isDirectory, isExpanded, onToggle
 /** Keys a row handles itself: Enter, Space, and Right or Left on a folder that
 *  can open or close. The keys that move between rows delegate upward, where
 *  the flat array is. There is no typeahead. */
-function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleExpand, onDelegate }) {
+function dispatchRowKey(e, { node, isDirectory, isExpanded, isLink, onSelect, onToggleExpand, onDelegate }) {
 	if (e.key === "Enter") {
+		if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) return;
 		e.preventDefault();
 		onSelect(e);
 		return;
@@ -319,7 +326,7 @@ function dispatchRowKey(e, { node, isDirectory, isExpanded, onSelect, onToggleEx
 	}
 	onDelegate(e, node);
 }
-var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
+var TreeRowItem = memo(function TreeRowItem({ row, isSelected, href, onFollowLink, onToggleExpand, onSelect, onDropToFolder, onContextMenu, onKeyDown }) {
 	const { node, depth, isExpanded } = row;
 	const isDirectory = node.type === "directory";
 	const { dragActive, dragHandlers } = useSpringLoadedDrop({
@@ -335,40 +342,57 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 		onSelect(node.path, node);
 		if (isDirectory) onToggleExpand(node.path);
 	};
+	const handleLinkClick = (e) => {
+		if (!isPlainClick(e)) return;
+		onFollowLink?.(node);
+		if (isDirectory) onToggleExpand(node.path);
+	};
 	const handleKeyDown = (e) => dispatchRowKey(e, {
 		node,
 		isDirectory,
 		isExpanded,
+		isLink: !!href,
 		onSelect: handleSelect,
 		onToggleExpand,
 		onDelegate: onKeyDown
 	});
 	const customIcon = getNodeIcon(node);
 	const label = isDirectory && node.storageId && node.displayName ? node.displayName : node.name;
+	const tabIndex = isSelected ? 0 : -1;
+	const itemProps = {
+		className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+		style: indentStyle(depth, isDirectory),
+		onContextMenu: (e) => onContextMenu(e, node),
+		"aria-level": depth + 1,
+		"aria-posinset": row.posInSet,
+		"aria-setsize": row.setSize,
+		"aria-selected": isSelected,
+		...isDirectory && { "aria-expanded": isExpanded },
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowIcons, {
+			isDirectory,
+			isExpanded,
+			customIcon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm truncate",
+			children: label
+		})] })
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
 		...dragHandlers,
-		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
-			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-accent)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
-			style: indentStyle(depth, isDirectory),
-			onClick: handleSelect,
-			onKeyDown: handleKeyDown,
-			onContextMenu: (e) => onContextMenu(e, node),
+		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), href ? /* @__PURE__ */ jsx(AppLink, {
+			...itemProps,
 			role: "treeitem",
-			"aria-level": depth + 1,
-			"aria-posinset": row.posInSet,
-			"aria-setsize": row.setSize,
-			"aria-selected": isSelected,
-			...isDirectory && { "aria-expanded": isExpanded },
-			tabIndex: isSelected ? 0 : -1,
-			children: [/* @__PURE__ */ jsx(RowIcons, {
-				isDirectory,
-				isExpanded,
-				customIcon
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-sm truncate",
-				children: label
-			})]
+			tabIndex,
+			href,
+			onClick: handleLinkClick,
+			onKeyDown: handleKeyDown
+		}) : /* @__PURE__ */ jsx("div", {
+			...itemProps,
+			role: "treeitem",
+			tabIndex,
+			onClick: handleSelect,
+			onKeyDown: handleKeyDown
 		})]
 	});
 });

package/dist/file-explorer/helpers.js

@@ -9,7 +9,7 @@ import { Skeleton } from "../components/Skeleton.js";
 import { formatBytes } from "../format.js";
 import { useElapsed } from "../components/relativeTime.js";
 import { ListSkeleton } from "../list/ListTable.js";
-import { getFileExtension } from "./lib/utils.js";
+import { carriesFiles, getFileExtension } from "./lib/utils.js";
 import { CorsError } from "./lib/errors.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
@@ -467,13 +467,13 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
 		onDragOver: (e) => {
 			e.preventDefault();
-			if (onDropFiles) setIsDragging(true);
+			if (onDropFiles && carriesFiles(e.dataTransfer)) setIsDragging(true);
 		},
 		onDragLeave: () => setIsDragging(false),
 		onDrop: (e) => {
 			e.preventDefault();
 			setIsDragging(false);
-			if (!onDropFiles) return;
+			if (!onDropFiles || !carriesFiles(e.dataTransfer)) return;
 			onDropFiles(e.dataTransfer.items.length ? e.dataTransfer.items : e.dataTransfer.files);
 		},
 		children

package/dist/file-explorer/lib/paging.d.ts

@@ -47,6 +47,7 @@ export declare function recordListingError(listings: TListings, path: string, er
 /** Keeps the cursor and pages, so a retry resumes paging instead of starting over. */
 export declare function clearListingError(listings: TListings, path: string): TListings;
 export declare function clearListingsUnder(listings: TListings, path: string): TListings;
+export declare function retainListings(listings: TListings, paths: ReadonlySet<string>): TListings;
 /** Tree paths whose children should keep arrival order, since sorting them would
  *  reshuffle rows under the user mid-scroll. */
 export declare function incompletePaths(listings: TListings): Set<string>;

package/dist/file-explorer/lib/paging.js

@@ -83,6 +83,10 @@ function clearListingsUnder(listings, path) {
 	for (const key of listings.keys()) if (key === path || key.startsWith(prefix)) next.delete(key);
 	return next;
 }
+function retainListings(listings, paths) {
+	if ([...listings.keys()].every((path) => paths.has(path))) return listings;
+	return new Map([...listings].filter(([path]) => paths.has(path)));
+}
 /** Tree paths whose children should keep arrival order, since sorting them would
 *  reshuffle rows under the user mid-scroll. */
 function incompletePaths(listings) {
@@ -121,4 +125,4 @@ function nextHydrationStep({ targetResolved, ancestors, isListableDir, listings,
 	};
 }
 //#endregion
-export { LIST_PAGE_SIZE, advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing };
+export { LIST_PAGE_SIZE, advanceListing, beginLoadingMore, canAutoLoadMore, clearListingError, clearListingsUnder, hasMore, incompletePaths, isListed, isLoadingMore, loadMoreError, nextHydrationStep, recordListingError, replaceListing, retainListings };

package/dist/file-explorer/lib/utils.d.ts

@@ -32,6 +32,9 @@ export declare function attachmentDisposition(filename: string): string;
 export declare function getDirectoryPrefixFromNode(node: TreeNode): string;
 export declare function pruneNodesInsideSelectedDirectories(nodes: TreeNode[]): TreeNode[];
 export declare function collectObjectKeysToDelete(nodes: TreeNode[], listKeysUnderPrefix: (prefix: string) => Promise<string[]>): Promise<string[]>;
+/** True when a drag carries files or folders, not a link or text, such as a
+ *  row's own link dragged across the explorer. */
+export declare function carriesFiles(dataTransfer: DataTransfer): boolean;
 export declare function getUriScheme(uri: string): string;
 export declare function removeLeadingSlash(path: string): string;
 export declare function removeLeadingAndTrailingSlashes(path: string): string;

package/dist/file-explorer/lib/utils.js

@@ -229,6 +229,11 @@ async function collectObjectKeysToDelete(nodes, listKeysUnderPrefix) {
 	}
 	return Array.from(keys);
 }
+/** True when a drag carries files or folders, not a link or text, such as a
+*  row's own link dragged across the explorer. */
+function carriesFiles(dataTransfer) {
+	return Array.from(dataTransfer.types).includes("Files");
+}
 function getUriScheme(uri) {
 	return uri.match(/^([a-z0-9+.-]+):\/\//i)?.[1] ?? "";
 }
@@ -290,4 +295,4 @@ function getUploadSessionETA(totalLoadedBytes, totalSizeBytes, lastProgressTime,
 	};
 }
 //#endregion
-export { attachmentDisposition, calculateUploadNodesTotalSize, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };
+export { attachmentDisposition, calculateUploadNodesTotalSize, carriesFiles, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };

package/dist/form/Wizard/utils.js

@@ -1,3 +1,4 @@
+import { isDev } from "../../dev.js";
 //#region src/form/Wizard/utils.ts
 function isWizardMeta(value) {
 	return typeof value === "object" && value !== null && "wizard" in value;
@@ -16,7 +17,7 @@ function parseWizardConfig(options) {
 		stepOrder.push(key);
 	}
 	if (stepOrder.length === 0) {
-		if (process.env.NODE_ENV !== "production") console.warn("Wizard mode enabled but no steps found");
+		if (isDev()) console.warn("Wizard mode enabled but no steps found");
 		return null;
 	}
 	return {

package/dist/list/ActionToolbar.js

@@ -2,6 +2,7 @@ import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
 import { MoreIcon } from "../icons.js";
 import { MenuPopup, MenuSeparator } from "../components/Menu.js";
+import { isDev } from "../dev.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
@@ -321,7 +322,7 @@ var warnedPrimary = /* @__PURE__ */ new Set();
 /** Warns in development when more than one action is primary: the fill marks
 *  the one next step, so two of them mark none. */
 function warnIfManyPrimary(items) {
-	if (process.env.NODE_ENV === "production") return;
+	if (!isDev()) return;
 	const labels = items.flatMap((item) => "label" in item && item.primary ? [item.label] : []);
 	const names = labels.map((label) => `"${label}"`).join(", ");
 	if (labels.length < 2 || warnedPrimary.has(names)) return;
@@ -332,7 +333,7 @@ var warnedIcons = /* @__PURE__ */ new Set();
 /** Warns in development when two actions share an icon: folded to their icons
 *  in a narrow toolbar, they would look the same. */
 function warnIfIconsRepeat(items) {
-	if (process.env.NODE_ENV === "production") return;
+	if (!isDev()) return;
 	const byIcon = /* @__PURE__ */ new Map();
 	for (const item of items) {
 		if ("element" in item || !isValidElement(item.icon) || typeof item.icon.type === "string") continue;

package/dist/list/ListPage.js

@@ -89,7 +89,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
 	const hasOverflowItems = items.some((item) => !isMenuDivider(item) && (isMenuSubmenu(item) || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group", selected ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", stretch && "relative [&_:is(a,button,input,label):not([data-row-link])]:relative [&_:is(a,button,input,label):not([data-row-link])]:z-[1]", className),
+		className: cx("group", selected ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", stretch && "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]", className),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, items),
 		children: [

package/dist/list/ListTable.d.ts

@@ -28,6 +28,11 @@ export declare const listTableFixedProps: {
 /** True inside a `ListRow` whose name link should take the whole row's
  *  clicks: it navigates, and no selection claims plain clicks. */
 export declare const StretchRowLinkContext: import("react").Context<boolean>;
+export declare const STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
+/** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
+ *  raised above the link so they keep their own clicks. A checkbox is a
+ *  `role="checkbox"` span, not an input, so the role names it. */
+export declare const STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 export declare function NameCell({ icon, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
     name: string;

package/dist/list/ListTable.js

@@ -37,6 +37,10 @@ var listTableFixedProps = {
 *  clicks: it navigates, and no selection claims plain clicks. */
 var StretchRowLinkContext = createContext(false);
 var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
+/** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
+*  raised above the link so they keep their own clicks. A checkbox is a
+*  `role="checkbox"` span, not an input, so the role names it. */
+var STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 	const stretch = useContext(StretchRowLinkContext);
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
@@ -58,7 +62,7 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 		children: [href ? /* @__PURE__ */ jsx(AppLink, {
 			href,
 			"data-row-link": stretch || void 0,
-			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && STRETCHED_LINK),
+			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)"),
 			children: inner
 		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2.5 min-w-0",
@@ -203,4 +207,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };

package/dist/styles/theme.css

@@ -1,8 +1,9 @@
 /* The theme contract: `theme-*` utilities over the `--theme-*` tokens, which
  * src/theme generates from a scheme of three choices (base, accent, contrast).
  * Hosts set the tokens at runtime with applyTheme; the defaults below are the
- * default theme's light scheme, for standalone use, with display-p3 values for
- * wide-gamut screens.
+ * default theme's light and dark schemes, for standalone use and for any token
+ * a host leaves unset, with display-p3 values for wide-gamut screens. Each pairs
+ * its modes with light-dark(), so it follows the CSS color-scheme a host sets.
  *
  * Sidebar tokens (--theme-sidebar-*) are part of the contract but have no
  * defaults here: hosts supply per-site fallbacks at the use sites, and a global
@@ -10,75 +11,94 @@
 
 /* generated:start (src/theme/derive.test.ts checks this; UPDATE_THEME_CSS=1 rewrites it) */
 :root {
-  --theme-app-bg: #f3f4f6;
-  --theme-panel-bg: #fcfeff;
-  --theme-panel-hover: #f2f5f9;
-  --theme-muted-panel-bg: #e7eaee;
-  --theme-hover: #e3e5e9;
-  --theme-input-bg: #fafcfe;
-  --theme-input-disabled-bg: #ebeef1;
-  --theme-app: #0a101b;
-  --theme-muted-text-color: #4e5664;
-  --theme-placeholder: #7e8796;
-  --theme-link: #06354f;
-  --theme-border: #cacdd0;
-  --theme-border-strong: #a3a6a9;
-  --theme-accent: #06354f;
-  --theme-accent-text: #ffffff;
-  --theme-accent-hover: #002841;
-  --theme-accent-subtle: #d3ebfc;
-  --theme-focus: #06354f;
-  --theme-focus-ring: rgba(6, 53, 79, 0.25);
-  --theme-success: #00973d;
-  --theme-success-text: #006226;
+  --theme-app-bg: light-dark(#f3f4f6, #111418);
+  --theme-panel-bg: light-dark(#fcfeff, #151c25);
+  --theme-panel-hover: light-dark(#f2f5f9, #1e262e);
+  --theme-muted-panel-bg: light-dark(#e7eaee, #1c242c);
+  --theme-hover: light-dark(#e3e5e9, #1f2730);
+  --theme-input-bg: light-dark(#fafcfe, #182028);
+  --theme-input-disabled-bg: light-dark(#ebeef1, #131a22);
+  --theme-app: light-dark(#0a101b, #e2eaf3);
+  --theme-muted-text-color: light-dark(#4e5664, #c1c9d2);
+  --theme-placeholder: light-dark(#7e8796, #9da5ad);
+  --theme-link: light-dark(#06354f, #8dcfff);
+  --theme-border: light-dark(#cacdd0, #30363d);
+  --theme-border-strong: light-dark(#a3a6a9, #4f565d);
+  --theme-accent: light-dark(#06354f, #5b9ccf);
+  --theme-accent-text: light-dark(#ffffff, #000000);
+  --theme-accent-hover: light-dark(#002841, #6aace0);
+  --theme-accent-subtle: light-dark(#d3ebfc, #0f2638);
+  --theme-focus: light-dark(#06354f, #5b9ccf);
+  --theme-focus-ring: light-dark(rgba(6, 53, 79, 0.25), rgba(91, 156, 207, 0.35));
+  --theme-success: light-dark(#00973d, #00bf54);
+  --theme-success-text: light-dark(#006226, #65e387);
   --theme-success-solid: #00873c;
-  --theme-success-muted: rgba(0, 151, 61, 0.1);
-  --theme-error: #ea4841;
-  --theme-error-text: #a11a1b;
+  --theme-success-muted: light-dark(rgba(0, 151, 61, 0.1), rgba(0, 191, 84, 0.15));
+  --theme-error: light-dark(#ea4841, #ff6056);
+  --theme-error-text: light-dark(#a11a1b, #ffb8af);
   --theme-error-solid: #db3934;
-  --theme-error-muted: rgba(234, 72, 65, 0.1);
-  --theme-warning: #bd7100;
-  --theme-warning-text: #7b4a00;
+  --theme-error-muted: light-dark(rgba(234, 72, 65, 0.1), rgba(255, 96, 86, 0.15));
+  --theme-warning: light-dark(#bd7100, #dd8900);
+  --theme-warning-text: light-dark(#7b4a00, #ffbe6a);
   --theme-warning-solid: #a76900;
-  --theme-warning-muted: rgba(189, 113, 0, 0.1);
-  --theme-info: #0681f8;
-  --theme-info-text: #0050af;
-  --theme-info-solid: #0073e8;
-  --theme-info-muted: rgba(6, 129, 248, 0.1);
-  --theme-favorite: #e7457a;
-  --theme-favorite-text: #9e174b;
+  --theme-warning-muted: light-dark(rgba(189, 113, 0, 0.1), rgba(221, 137, 0, 0.15));
+  --theme-info: light-dark(#0681f8, #499fff);
+  --theme-info-text: light-dark(#0050af, #a6cfff);
+  --theme-info-solid: light-dark(#0073e8, #0073e9);
+  --theme-info-muted: light-dark(rgba(6, 129, 248, 0.1), rgba(73, 159, 255, 0.15));
+  --theme-favorite: light-dark(#e7457a, #fe5c8e);
+  --theme-favorite-text: light-dark(#9e174b, #ffb7c7);
   --theme-favorite-solid: #d7366e;
-  --theme-favorite-muted: rgba(231, 69, 122, 0.1);
-  --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.07);
-  --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
-  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
-  --theme-shadow-xl: 0 25px 80px -20px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
-  --theme-code-bg: #e7eaee;
-  --theme-code-text: #1c2330;
-  --theme-code-comment: #555d6c;
-  --theme-code-keyword: #36617d;
-  --theme-code-string: #196a24;
-  --theme-code-number: #944500;
-  --theme-code-function: #6c4b9e;
-  --theme-code-type: #006565;
-  --theme-code-property: #5a51a5;
-  --theme-ansi-black: #1c2330;
-  --theme-ansi-red: #a3322d;
-  --theme-ansi-green: #006a12;
-  --theme-ansi-yellow: #755800;
-  --theme-ansi-blue: #0b5aae;
-  --theme-ansi-magenta: #8d3a88;
-  --theme-ansi-cyan: #00666c;
-  --theme-ansi-white: #555d6c;
+  --theme-favorite-muted: light-dark(rgba(231, 69, 122, 0.1), rgba(254, 92, 142, 0.15));
+  --theme-shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow:
+    0 4px 6px -1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35)),
+    0 2px 4px -2px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow-lg:
+    0 10px 15px -3px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35)),
+    0 4px 6px -4px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.35));
+  --theme-shadow-xl:
+    0 25px 80px -20px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)),
+    0 10px 30px -10px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+  --theme-code-bg: light-dark(#e7eaee, #1c242c);
+  --theme-code-text: light-dark(#1c2330, #e1e9f2);
+  --theme-code-comment: light-dark(#555d6c, #c0c8d1);
+  --theme-code-keyword: light-dark(#36617d, #8cceff);
+  --theme-code-string: light-dark(#196a24, #8bd98d);
+  --theme-code-number: light-dark(#944500, #ffb882);
+  --theme-code-function: light-dark(#6c4b9e, #d3bcff);
+  --theme-code-type: light-dark(#006565, #31dbdb);
+  --theme-code-property: light-dark(#5a51a5, #31dbdb);
+  --theme-ansi-black: light-dark(#1c2330, #c0c8d1);
+  --theme-ansi-red: light-dark(#a3322d, #ffb5ab);
+  --theme-ansi-green: light-dark(#006a12, #7fdb83);
+  --theme-ansi-yellow: light-dark(#755800, #edc23e);
+  --theme-ansi-blue: light-dark(#0b5aae, #9ecbff);
+  --theme-ansi-magenta: light-dark(#8d3a88, #ffaafe);
+  --theme-ansi-cyan: light-dark(#00666c, #00dbe5);
+  --theme-ansi-white: light-dark(#555d6c, #e1e9f2);
 }
 
 @media (color-gamut: p3) {
   :root {
-    --theme-success: color(display-p3 0.1559 0.5942 0.2459);
+    --theme-success: light-dark(color(display-p3 0.1559 0.5942 0.2459), #00bf54);
     --theme-success-solid: color(display-p3 0.0738 0.5422 0.1959);
-    --theme-success-muted: color(display-p3 0.1559 0.5942 0.2459 / 0.1);
-    --theme-warning-solid: color(display-p3 0.6474 0.4089 0);
-    --theme-ansi-cyan: color(display-p3 0 0.4024 0.4329);
+    --theme-success-muted: light-dark(
+      color(display-p3 0.1559 0.5942 0.2459 / 0.1),
+      rgba(0, 191, 84, 0.15)
+    );
+    --theme-warning: light-dark(#bd7100, color(display-p3 0.8343 0.5429 0));
+    --theme-warning-solid: light-dark(
+      color(display-p3 0.6474 0.4089 0),
+      color(display-p3 0.6478 0.4092 0)
+    );
+    --theme-warning-muted: light-dark(
+      rgba(189, 113, 0, 0.1),
+      color(display-p3 0.8343 0.5429 0 / 0.15)
+    );
+    --theme-code-number: light-dark(#944500, color(display-p3 1 0.7209 0.5024));
+    --theme-ansi-red: light-dark(#a3322d, color(display-p3 1 0.7032 0.6565));
+    --theme-ansi-cyan: light-dark(color(display-p3 0 0.4024 0.4329), #00dbe5);
   }
 }
 /* generated:end */