@parallelworks/ui 0.79.0 → 0.81.0

package/dist/components/PageHeader.js

@@ -52,6 +52,7 @@ function PageHeader(props) {
 	const store = use(StoreContext);
 	if (!store) return props.hidden ? null : /* @__PURE__ */ jsx(HeaderLayout, {
 		breadcrumbs: props.breadcrumbs ?? [],
+		heading: props.heading ?? true,
 		titleActions: props.titleActions,
 		actions: props.actions,
 		toolbar: props.toolbar
@@ -61,7 +62,7 @@ function PageHeader(props) {
 		...props
 	});
 }
-function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hidden = false }) {
+function DeclaredHeader({ store, breadcrumbs, heading = true, titleActions, actions, toolbar, hidden = false }) {
 	const [order] = useState(() => ++renderOrder);
 	const [nodes] = useState(createRegionNodes);
 	const client = useSyncExternalStore(subscribeNever, () => true, () => false);
@@ -73,6 +74,7 @@ function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hi
 	useLayoutEffect(() => {
 		store.set(order, {
 			breadcrumbs,
+			heading,
 			hidden,
 			nodes,
 			fills
@@ -105,6 +107,7 @@ function PageHeaderBar({ compact = false, persistent = false, className }) {
 	if (header.hidden || empty && !persistent) return null;
 	return /* @__PURE__ */ jsx(HeaderLayout, {
 		breadcrumbs: header.breadcrumbs,
+		heading: header.heading,
 		titleActions: header.titleActions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.titleActions }),
 		actions: header.actions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.actions }),
 		toolbar: header.toolbar.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.toolbar }),
@@ -137,7 +140,7 @@ function Mount({ node }) {
 		className: "contents"
 	});
 }
-function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
+function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
 	const { list: t } = useStrings();
 	const [ownFit] = useState(() => new HeaderActionsFit());
@@ -161,7 +164,7 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: shared
 					navToggle?.(),
 					hasTrail && /* @__PURE__ */ jsx(Breadcrumbs, {
 						crumbs: breadcrumbs,
-						heading: true
+						heading
 					}),
 					present(titleActions) && /* @__PURE__ */ jsx("div", {
 						className: "flex shrink-0 items-center gap-0.5",

package/dist/components/Provider.d.ts

@@ -102,6 +102,9 @@ export interface UIStrings {
         opensInNewTab: string;
         /** Names a code editor that has no label of its own. */
         codeEditor: string;
+        /** Names a block of code that has no title of its own, by its language,
+         *  such as "yaml code"; `language` is empty when it has none. */
+        codeOf: (language: string) => string;
         /** Shown when someone types in a read-only code editor. */
         readOnlyText: string;
         /** Names the handle that resizes a panel. */

package/dist/components/Provider.js

@@ -148,6 +148,7 @@ var DEFAULTS = {
 			no: "No",
 			opensInNewTab: "(opens in a new tab)",
 			codeEditor: "Code editor",
+			codeOf: (language) => language ? `${language} code` : "Code",
 			readOnlyText: "This text is read-only.",
 			resizePanel: "Resize panel",
 			panelWidth: (px) => `${px} pixels wide`,

package/dist/components/Select.js

@@ -59,7 +59,7 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 				content: tip,
 				children: /* @__PURE__ */ jsxs(Select.Trigger, {
 					...triggerProps,
-					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full", explained && explainedDisabledClassName, className),
+					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full shrink-0", explained && explainedDisabledClassName, className),
 					children: [/* @__PURE__ */ jsx(Select.Value, {
 						placeholder,
 						className: cx("truncate data-placeholder:text-(--theme-placeholder)", content && !rootProps.multiple && "grid"),

package/dist/components/ToggleGroup.d.ts

@@ -25,6 +25,8 @@ export interface ToggleGroupProps<T extends string> {
     all?: boolean | {
         count?: number | undefined;
     } | undefined;
+    /** The All option's words, for one that names what it covers, such as "All types". */
+    allLabel?: ReactNode;
     size?: 'sm' | 'md' | undefined;
     disabled?: boolean | undefined;
     /** Names an element that says more about the group, such as a live summary
@@ -42,4 +44,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -40,7 +40,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		children: [
 			all && /* @__PURE__ */ jsx(Chip, {
 				value: ALL,
-				label: strings.common.all,
+				label: allLabel ?? strings.common.all,
 				count: allCount,
 				size
 			}),

package/dist/components/codeHighlight.d.ts

@@ -0,0 +1,9 @@
+export interface CodeToken {
+    content: string;
+    color?: string;
+    fontStyle?: 'italic';
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+ *  null now and `onReady` once the language has loaded. A language the
+ *  highlighter doesn't know reads as plain text. */
+export declare function highlightCode(source: string, language: string, incomplete: boolean, onReady: (lines: CodeToken[][]) => void): CodeToken[][] | null;

package/dist/components/codeHighlight.js

@@ -0,0 +1,29 @@
+import { CODE_THEMES } from "./codeTheme.js";
+import { code } from "@streamdown/code";
+//#region src/components/codeHighlight.ts
+var ITALIC = 1;
+function toLines(tokens) {
+	return tokens.map((line) => line.map((token) => {
+		const color = token.htmlStyle?.["color"] ?? token.color;
+		const italic = token.htmlStyle?.["font-style"] === "italic" || ((token.fontStyle ?? 0) & ITALIC) === ITALIC;
+		return {
+			content: token.content,
+			...color ? { color } : {},
+			...italic ? { fontStyle: "italic" } : {}
+		};
+	}));
+}
+/** Tokens for each line of `source`, at once when they are cached, otherwise
+*  null now and `onReady` once the language has loaded. A language the
+*  highlighter doesn't know reads as plain text. */
+function highlightCode(source, language, incomplete, onReady) {
+	const result = code.highlight({
+		code: source,
+		language: language || "text",
+		themes: CODE_THEMES,
+		isIncomplete: incomplete
+	}, (later) => onReady(toLines(later.tokens)));
+	return result ? toLines(result.tokens) : null;
+}
+//#endregion
+export { highlightCode };

package/dist/components/pageHeaderStore.d.ts

@@ -7,12 +7,16 @@ export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
 export type RegionNodes = Readonly<Record<PageHeaderRegion, HTMLElement>>;
 export interface Declaration {
     breadcrumbs: readonly Breadcrumb[] | undefined;
+    /** Whether the trail's last crumb is the page's `h1`. */
+    heading: boolean;
     hidden: boolean;
     nodes: RegionNodes | null;
     fills: Readonly<Record<PageHeaderRegion, boolean>>;
 }
 export interface PageHeaderSnapshot {
     breadcrumbs: readonly Breadcrumb[];
+    /** Whether the trail's last crumb is the page's `h1`, as the page whose trail it is says. */
+    heading: boolean;
     hidden: boolean;
     titleActions: readonly HTMLElement[];
     actions: readonly HTMLElement[];

package/dist/components/pageHeaderStore.js

@@ -4,6 +4,7 @@ var NO_NODES = [];
 var NO_CRUMBS = [];
 var EMPTY = {
 	breadcrumbs: NO_CRUMBS,
+	heading: true,
 	hidden: false,
 	titleActions: NO_NODES,
 	actions: NO_NODES,
@@ -15,7 +16,7 @@ function sameCrumbs(a, b) {
 	return a.every((crumb, i) => crumb.label === b[i]?.label && crumb.href === b[i]?.href);
 }
 function sameDeclaration(a, b) {
-	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
+	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.heading === b.heading && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
 }
 function sameNodes(a, b) {
 	return a.length === b.length && a.every((node, i) => node === b[i]);
@@ -54,10 +55,12 @@ var PageHeaderStore = class {
 			const next = ordered.flatMap((d) => d.nodes && d.fills[region] ? [d.nodes[region]] : []);
 			return sameNodes(next, prev) ? prev : next;
 		};
-		const trail = ordered.findLast((d) => d.breadcrumbs !== void 0)?.breadcrumbs ?? NO_CRUMBS;
+		const owner = ordered.findLast((d) => d.breadcrumbs !== void 0);
+		const trail = owner?.breadcrumbs ?? NO_CRUMBS;
 		const prev = this.snapshot;
 		this.snapshot = {
 			breadcrumbs: sameCrumbs(trail, prev.breadcrumbs) ? prev.breadcrumbs : trail,
+			heading: owner?.heading ?? true,
 			hidden: ordered.some((d) => d.hidden),
 			titleActions: regionNodes("titleActions", prev.titleActions),
 			actions: regionNodes("actions", prev.actions),

package/dist/file-explorer/FileExplorer.js

@@ -13,9 +13,9 @@ import { useCopy } from "../components/useCopy.js";
 import { Breadcrumbs } from "../components/Breadcrumbs.js";
 import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
+import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { InfoTip } from "../components/InfoTip.js";
 import { ConfirmModal } from "../components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "../components/CopyButton.js";
 import { CreateModal } from "../components/CreateModal.js";
 import { useSplitter } from "../components/splitter.js";
 import { formatBytes, formatDateTime } from "../format.js";

package/dist/index.d.ts

@@ -5,12 +5,13 @@ export { type Breadcrumb, Breadcrumbs, type BreadcrumbsProps } from './component
 export { Button, type ButtonProps, MethodButton } from './components/Button.js';
 export { type ButtonSize, type ButtonStyle, type ButtonVariant, buttonClasses, } from './components/buttonClasses.js';
 export { Callout, type CalloutProps, type CalloutTone } from './components/Callout.js';
-export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, } from './components/Card.js';
+export { Card, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardSize, type CardTone, } from './components/Card.js';
 export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkbox.js';
+export { CodeBlock, type CodeBlockProps } from './components/CodeBlock.js';
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal, type ConfirmModalProps, type ConfirmRequest, useConfirm, } from './components/ConfirmModal.js';
-export { ContextMenuProvider, type MenuOpener, type OpenMenu, type OpenMenuOptions, useContextMenu, useMenuOpenedBy, useOpenMenu, } from './components/ContextMenu.js';
+export { ContextMenuProvider, type MenuCloseTrigger, type MenuOpener, type OpenMenu, type OpenMenuOptions, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu, } from './components/ContextMenu.js';
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { categoryClasses, categoryOf } from './components/category.js';

package/dist/index.js

@@ -2,7 +2,7 @@ import { cx } from "./cx.js";
 import { buttonClasses } from "./components/buttonClasses.js";
 import { EmptyState } from "./components/EmptyState.js";
 import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
-import { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu } from "./components/ContextMenu.js";
+import { ContextMenuProvider, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu } from "./components/ContextMenu.js";
 import { Loader } from "./components/Loader.js";
 import { toast } from "./components/Toast.js";
 import { Kbd, ariaKeyShortcuts, formatShortcut, isApplePlatform, shortcutText, useShortcutFormat } from "./components/Kbd.js";
@@ -23,6 +23,8 @@ import { Callout } from "./components/Callout.js";
 import { Card, CardHeader } from "./components/Card.js";
 import { fieldBox } from "./components/fieldBox.js";
 import { Checkbox, CheckboxGroup } from "./components/Checkbox.js";
+import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
+import { CodeBlock } from "./components/CodeBlock.js";
 import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./theme/color.js";
 import { apcaContrast, contrastRatio, isDarkColor } from "./theme/contrast.js";
 import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, resolveMode, schemeFor, serializeTheme } from "./theme/model.js";
@@ -40,7 +42,6 @@ import { Tag, TagList, normalizeTags, tagClasses } from "./components/Tag.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
 import { ConfirmModal, useConfirm } from "./components/ConfirmModal.js";
-import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
 import { Disclosure, DisclosurePanel, collapsePanelClassName } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
@@ -83,4 +84,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/styles/theme.css

@@ -61,6 +61,7 @@
   --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-backdrop: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.65));
   --theme-code-bg: light-dark(#e7eaee, #1c242c);
   --theme-code-text: light-dark(#1c2330, #e1e9f2);
   --theme-code-comment: light-dark(#555d6c, #c0c8d1);