@12-apps/ui 6.78.4 → 6.79.0

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -1,3 +1,5 @@
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import Box from '@mui/material/Box/index.js';
 import Paper from '@mui/material/Paper/index.js';
 import { alpha, useTheme } from '@mui/material/styles/index.js';
@@ -27,7 +29,6 @@ const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<Toolb
 
 const RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {
   value: '',
-  placeholder: 'Start typing...',
   disabled: false,
   readOnly: false,
   toolbar: {} };
@@ -89,7 +90,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
     const {
       value,
       onChange,
-      placeholder,
+      placeholder: placeholderProp,
+      labels: labelOverrides,
       disabled,
       readOnly,
       toolbar,
@@ -105,6 +107,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
     } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;
 
     const theme = useTheme();
+    const labels = resolveLabels(EN_US_UI_LABELS.richTextEditor, labelOverrides);
+    const placeholder = placeholderProp ?? labels.placeholder;
     const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
     const editor = useRichTextEditor({
       value,
@@ -113,7 +117,8 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
       onBlur,
       disabled,
       readOnly,
-      maxLength });
+      maxLength,
+      listItemText: labels.listItem });
 
     return (
       <Paper
@@ -132,6 +137,7 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
           characterCount={editor.characterCount}
           editorRef={editor.editorRef}
           onFormat={editor.applyFormat}
+          labels={labels}
         />
 
         <Box
@@ -141,7 +147,7 @@ export const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(
           onFocus={editor.handleFocus}
           onBlur={editor.handleBlur}
           role="textbox"
-          aria-label={ariaLabel || 'Rich text editor'}
+          aria-label={ariaLabel || labels.ariaLabel}
           aria-describedby={ariaDescribedBy}
           aria-multiline="true"
           tabIndex={disabled ? -1 : 0}

package/src/components/form/RichTextEditor/RichTextEditor.types.ts

@@ -1,3 +1,4 @@
+import type { RichTextEditorLabels } from '../../../copy/labels';
 import type { ReactNode } from 'react';
 
 export interface RichTextEditorProps {
@@ -5,8 +6,13 @@ export interface RichTextEditorProps {
   value?: string;
   /** Callback when the content changes */
   onChange?: (value: string) => void;
-  /** Placeholder text when empty */
+  /** Placeholder text when empty. Defaults to `labels.placeholder`. */
   placeholder?: string;
+  /**
+   * The toolbar's tooltips, prompts, default placeholder and accessible name;
+   * the English pack answers for any key left out.
+   */
+  labels?: Partial<RichTextEditorLabels>;
   /** Whether the editor is disabled */
   disabled?: boolean;
   /** Whether the editor is read-only */

package/src/components/form/RichTextEditor/RichTextEditorToolbar.tsx

@@ -1,3 +1,4 @@
+import type { RichTextEditorLabels } from '../../../copy/labels';
 import Code from '@mui/icons-material/Code';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
@@ -27,15 +28,15 @@ type ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &
 
 // The button groups, in render order. A separator is drawn between two groups
 // only when both actually have something switched on.
-const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tooltip: string; command: string; commandValue?: string }>> = [
+const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; label: keyof RichTextEditorLabels; command: string; commandValue?: string }>> = [
   [
-    { key: 'bold', icon: <FormatBold />, tooltip: 'Bold', command: 'bold' },
-    { key: 'italic', icon: <FormatItalic />, tooltip: 'Italic', command: 'italic' },
-    { key: 'underline', icon: <FormatUnderlined />, tooltip: 'Underline', command: 'underline' },
+    { key: 'bold', icon: <FormatBold />, label: 'bold', command: 'bold' },
+    { key: 'italic', icon: <FormatItalic />, label: 'italic', command: 'italic' },
+    { key: 'underline', icon: <FormatUnderlined />, label: 'underline', command: 'underline' },
     {
       key: 'strikethrough',
       icon: <FormatStrikethrough />,
-      tooltip: 'Strikethrough',
+      label: 'strikethrough',
       command: 'strikethrough',
     },
   ],
@@ -43,30 +44,30 @@ const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tool
     {
       key: 'orderedList',
       icon: <FormatListNumbered />,
-      tooltip: 'Numbered List',
+      label: 'numberedList',
       command: 'insertOrderedList',
     },
     {
       key: 'unorderedList',
       icon: <FormatListBulleted />,
-      tooltip: 'Bulleted List',
+      label: 'bulletedList',
       command: 'insertUnorderedList',
     },
   ],
   [
-    { key: 'link', icon: <Link />, tooltip: 'Insert Link', command: 'createLink' },
-    { key: 'image', icon: <Image />, tooltip: 'Insert Image', command: 'insertImage' },
+    { key: 'link', icon: <Link />, label: 'insertLink', command: 'createLink' },
+    { key: 'image', icon: <Image />, label: 'insertImage', command: 'insertImage' },
     {
       key: 'codeBlock',
       icon: <Code />,
-      tooltip: 'Code Block',
+      label: 'codeBlock',
       command: 'formatBlock',
       commandValue: 'pre',
     },
     {
       key: 'quote',
       icon: <FormatQuote />,
-      tooltip: 'Quote',
+      label: 'quote',
       command: 'formatBlock',
       commandValue: 'blockquote',
     },
@@ -74,9 +75,9 @@ const GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tool
 ];
 
 // Link and image need a target before they can run.
-const PROMPTS: Record<string, { message: string; initial?: string }> = {
-  createLink: { message: 'Enter URL:', initial: 'https://' },
-  insertImage: { message: 'Enter image URL:' },
+const PROMPTS: Record<string, { message: 'linkPrompt' | 'imagePrompt'; initial?: string }> = {
+  createLink: { message: 'linkPrompt', initial: 'https://' },
+  insertImage: { message: 'imagePrompt' },
 };
 
 const Separator: FC = () => <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />;
@@ -89,6 +90,7 @@ export interface RichTextEditorToolbarProps {
   characterCount: number;
   editorRef: React.RefObject<HTMLDivElement | null>;
   onFormat: (command: string, value?: string) => void;
+  labels: RichTextEditorLabels;
 }
 
 const ToolbarGroups: FC<{
@@ -96,7 +98,8 @@ const ToolbarGroups: FC<{
   disabled: boolean;
   readOnly: boolean;
   onRun: (command: string, commandValue?: string) => void;
-}> = ({ config, disabled, readOnly, onRun }) => {
+  labels: RichTextEditorLabels;
+}> = ({ config, disabled, readOnly, onRun, labels }) => {
   const groupIsActive = (group: (typeof GROUPS)[number]) => group.some((item) => config[item.key]);
 
   return (
@@ -107,12 +110,12 @@ const ToolbarGroups: FC<{
           {group
             .filter((item) => config[item.key])
             .map((item) => (
-              <Tooltip key={item.key} title={item.tooltip}>
+              <Tooltip key={item.key} title={labels[item.label]}>
                 <IconButton
                   size="small"
                   onClick={() => onRun(item.command, item.commandValue)}
                   disabled={disabled || readOnly}
-                  aria-label={item.tooltip}
+                  aria-label={labels[item.label]}
                   data-testid={`toolbar-${item.key}`}
                 >
                   {item.icon}
@@ -133,6 +136,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
   characterCount,
   editorRef,
   onFormat,
+  labels,
 }) => {
   const run = (command: string, commandValue?: string) => {
     const prompt = PROMPTS[command];
@@ -141,7 +145,7 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
       return;
     }
 
-    const answer = window.prompt(prompt.message, prompt.initial);
+    const answer = window.prompt(labels[prompt.message], prompt.initial);
     if (answer) onFormat(command, answer);
   };
 
@@ -156,7 +160,13 @@ export const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({
         backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),
       }}
     >
-      <ToolbarGroups config={config} disabled={disabled} readOnly={readOnly} onRun={run} />
+      <ToolbarGroups
+        config={config}
+        disabled={disabled}
+        readOnly={readOnly}
+        onRun={run}
+        labels={labels}
+      />
 
       {config.customItems && config.customItems.length > 0 && (
         <>

package/src/components/form/Switch/Switch.native.tsx

@@ -40,6 +40,7 @@ import {
 } from './Switch.metrics';
 import type { SwitchProps } from './Switch.types.native';
 import { webKeyDown } from '../../../platform/aria';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { childTestId, resolveTestId } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import type { UiTheme } from '../../../tokens/theme';
@@ -156,7 +157,7 @@ function SwitchIcon({
 }
 
 interface ControlProps {
-  props: ResolvedSwitchProps;
+  props: ResolvedSwitchProps<SwitchProps>;
   theme: UiTheme;
   checked: boolean;
   inactive: boolean;
@@ -233,7 +234,7 @@ function SwitchControl({ props, theme, checked, inactive, onToggle, rest, testID
           <ActivityIndicator
             size={geometry.thumbSize * SWITCH_SPINNER.sizeRatio}
             color={palette.main}
-            accessibilityLabel="loading"
+            accessibilityLabel={props.loadingLabel ?? EN_US_UI_LABELS.common.loading}
           />
         ) : null}
       </Animated.View>
@@ -290,7 +291,7 @@ function labelRowStyle(theme: UiTheme, position: string): ViewStyle {
 export const Switch = React.forwardRef<View, SwitchProps>((rawProps, ref) => {
   const props = resolveSwitchProps(rawProps);
   const {
-    label, description, labelPosition, error, helperText, loading, disabled,
+    label, description, labelPosition, error, helperText, loading, loadingLabel: _loadingLabel, disabled,
     checked, defaultChecked, onChange, onClick, onPress, style, ...others
   } = props;
 

package/src/components/form/Switch/Switch.types.native.ts

@@ -30,5 +30,7 @@ export type SwitchProps = SwitchBaseProps &
     /** Both spellings fire, as `Button`'s do. */
     onClick?: (event: GestureResponderEvent) => void;
     onPress?: (event: GestureResponderEvent) => void;
+    /** The busy spinner's accessible name; defaults to the labels pack's `loading`. */
+    loadingLabel?: string;
     style?: StyleProp<ViewStyle>;
   };

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
+import { EN_US_RICH_EDITOR_TOOLBAR_COPY } from '../../../en-US.form';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
@@ -385,7 +386,7 @@ export const TextareaRichEditor: React.FC<{
         onMouseUp={updateActiveFormats}
         role="textbox"
         aria-multiline="true"
-        aria-label={placeholder || 'Rich text editor'}
+        aria-label={placeholder || (copy.editorLabel ?? EN_US_RICH_EDITOR_TOOLBAR_COPY.editorLabel)}
       />
 
       {characterLimit && (

package/src/components/form/UploadButton/UploadButton.hooks.ts

@@ -2,6 +2,7 @@ import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import type React from 'react';
 
 import type { UploadButtonProps, UploadButtonState } from './UploadButton.types';
+import { EN_US_UPLOAD_BUTTON_COPY } from '../../../en-US.form';
 
 /** The props {@link useUploadButton} reads — the component's own props. */
 type UploadButtonHookProps = UploadButtonProps;
@@ -27,15 +28,16 @@ type SetState = React.Dispatch<React.SetStateAction<UploadButtonState>>;
 function useFileValidator(
   maxSizeMB: number | undefined,
   validate: ((file: globalThis.File) => string | null) | undefined,
+  fileTooLarge: (maxSizeMB: number) => string,
 ): (file: globalThis.File) => string | null {
   return useCallback(
     (file: globalThis.File): string | null => {
       if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {
-        return `File size must be less than ${maxSizeMB}MB`;
+        return fileTooLarge(maxSizeMB);
       }
       return validate ? validate(file) : null;
     },
-    [maxSizeMB, validate],
+    [maxSizeMB, validate, fileTooLarge],
   );
 }
 
@@ -50,6 +52,7 @@ function useUploadRunner(
   onUpload: ((file: globalThis.File) => Promise<void>) | undefined,
   externalUploading: boolean,
   setState: SetState,
+  uploadFailed: string,
 ): (file: globalThis.File) => Promise<void> {
   return useCallback(
     async (file: globalThis.File) => {
@@ -80,11 +83,11 @@ function useUploadRunner(
           ...prev,
           isUploading: false,
           uploadProgress: 0,
-          error: error instanceof Error ? error.message : 'Upload failed',
+          error: error instanceof Error ? error.message : uploadFailed,
         }));
       }
     },
-    [onUpload, externalUploading, setState],
+    [onUpload, externalUploading, setState, uploadFailed],
   );
 }
 
@@ -106,6 +109,7 @@ interface UploadSelectionOptions {
   onUpload?: (file: globalThis.File) => Promise<void>;
   externalUploading: boolean;
   validateFile: (file: globalThis.File) => string | null;
+  uploadFailed: string;
 }
 
 /**
@@ -121,9 +125,10 @@ function useUploadSelection({
   onUpload,
   externalUploading,
   validateFile,
+  uploadFailed,
 }: UploadSelectionOptions): UploadSelection {
   const [state, setState] = useState<UploadButtonState>(INITIAL_STATE);
-  const runUpload = useUploadRunner(onUpload, externalUploading, setState);
+  const runUpload = useUploadRunner(onUpload, externalUploading, setState, uploadFailed);
 
   const selectOne = useCallback(
     (file: globalThis.File) => {
@@ -243,11 +248,15 @@ export function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {
     helperText,
     errorText,
     disabled = false,
+    copy,
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
   const inputId = `upload-button-${useId()}`;
-  const validateFile = useFileValidator(maxSizeMB, validate);
+  // The two errors the control raises itself: the host's pack, else English.
+  const fileTooLarge = copy.fileTooLarge ?? EN_US_UPLOAD_BUTTON_COPY.fileTooLarge;
+  const uploadFailed = copy.uploadFailed ?? EN_US_UPLOAD_BUTTON_COPY.uploadFailed;
+  const validateFile = useFileValidator(maxSizeMB, validate, fileTooLarge);
   const { state, setDragOver, handleFiles } = useUploadSelection({
     onSelect,
     multiple,
@@ -255,6 +264,7 @@ export function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {
     onUpload,
     externalUploading,
     validateFile,
+    uploadFailed,
   });
   const drag = useDragHandlers(disabled, setDragOver, handleFiles);
   const derived = useDerivedUploadState({

package/src/components/layout/ContentToolbar/ContentToolbar.types.ts

@@ -103,6 +103,13 @@ export interface ViewSelectorProps {
   zoom: number[];
   /** Called when the zoom slider changes. */
   onZoomChange: (value: number[]) => void;
+  /**
+   * The grid option's name, in the menu and on the trigger while it is active.
+   * @default "Grid View" — a host passes `UI_LABELS[locale].contentToolbar.gridView`.
+   */
+  gridViewLabel?: string;
+  /** The list option's name. @default "List View" */
+  listViewLabel?: string;
 }
 
 /* ── SortByDropdown ──────────────────────────────────────────────────────── */
@@ -228,6 +235,13 @@ export interface FilterTriggerProps {
   activeCount?: number;
   /** Button label. @default "Filtros" */
   label?: string;
+  /**
+   * The button's accessible name while the panel is closed.
+   * @default "Open filters" — a host passes `UI_LABELS[locale].contentToolbar.openFilters`.
+   */
+  openFiltersLabel?: string;
+  /** The button's accessible name while the panel is open. @default "Close filters" */
+  closeFiltersLabel?: string;
   'data-testid'?: string;
 }
 

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -6,10 +6,17 @@ import Button from '@mui/material/Button/index.js';
 import React from 'react';
 
 import type { FilterTriggerProps } from './ContentToolbar.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
+/** The toggle's accessible name for its state: the caller's, else the English one. */
+const toggleName = (open: boolean, openLabel?: string, closeLabel?: string): string =>
+  open
+    ? (closeLabel ?? EN_US_UI_LABELS.contentToolbar.closeFilters)
+    : (openLabel ?? EN_US_UI_LABELS.contentToolbar.openFilters);
+
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
  * controls) with a funnel icon and, when filters are active, a count badge — so
@@ -22,6 +29,8 @@ export function FilterTrigger({
   hasActiveFilters = false,
   activeCount = 0,
   label = 'Filtros',
+  openFiltersLabel,
+  closeFiltersLabel,
   'data-testid': testId = 'toggle-filters-btn',
 }: FilterTriggerProps): React.JSX.Element {
   const active = activeCount > 0 || hasActiveFilters;
@@ -32,7 +41,7 @@ export function FilterTrigger({
       color="inherit"
       data-testid={testId}
       aria-expanded={open}
-      aria-label={open ? 'Close filters' : 'Open filters'}
+      aria-label={toggleName(open, openFiltersLabel, closeFiltersLabel)}
       onClick={() => onOpenChange(!open)}
       startIcon={<FilterIcon sx={{ fontSize: sxRem(16) }} />}
       sx={{

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -18,13 +18,20 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { sxRem } from '../../../tokens/relative';
 
-const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
-  { value: 'grid', label: 'Grid View', icon: GridIcon },
-  { value: 'list', label: 'List View', icon: ListIcon },
+interface ViewOption {
+  value: ViewMode;
+  label: string;
+  icon: typeof SvgIcon;
+}
+
+const viewOptions = (gridViewLabel: string, listViewLabel: string): ViewOption[] => [
+  { value: 'grid', label: gridViewLabel, icon: GridIcon },
+  { value: 'list', label: listViewLabel, icon: ListIcon },
 ];
 
 /**
@@ -37,10 +44,13 @@ export function ViewSelector({
   zoom,
   onZoomChange,
   cardSizeLabel,
+  gridViewLabel = EN_US_UI_LABELS.contentToolbar.gridView,
+  listViewLabel = EN_US_UI_LABELS.contentToolbar.listView,
 }: ViewSelectorProps): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const open = Boolean(anchorEl);
-  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;
+  const options = viewOptions(gridViewLabel, listViewLabel);
+  const activeOption = options.find((option) => option.value === viewMode) ?? options[0]!;
   const ActiveIcon = activeOption.icon;
 
   return (
@@ -82,7 +92,7 @@ export function ViewSelector({
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
         slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
       >
-        {VIEW_OPTIONS.map((option) => {
+        {options.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
           return (

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -31,6 +31,7 @@ import type {
   DashboardMoreFiltersProps,
   DashboardProps,
 } from './Dashboard.types';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { sxRem } from '../../../tokens/relative';
 
 /**
@@ -160,6 +161,7 @@ Dashboard.displayName = 'Dashboard';
 const DashboardBreadcrumb = ({
   items,
   renderLink,
+  ariaLabel = EN_US_UI_LABELS.dashboard.breadcrumb,
   className,
 }: DashboardBreadcrumbProps): React.JSX.Element => {
   const { testIdPrefix } = useDashboardContext();
@@ -167,7 +169,7 @@ const DashboardBreadcrumb = ({
     <MuiBreadcrumbs
       separator={<NavigateNextIcon fontSize="small" />}
       className={className}
-      aria-label="breadcrumb"
+      aria-label={ariaLabel}
       data-testid={`${testIdPrefix}-breadcrumb`}
       sx={{ fontSize: sxRem(14), color: 'text.secondary' }}
     >

package/src/components/layout/Dashboard/Dashboard.types.ts

@@ -33,6 +33,11 @@ export interface DashboardBreadcrumbProps {
   items: DashboardBreadcrumbItem[];
   /** Render function for links, e.g. a Next.js `<Link>`. Defaults to `<a>`. */
   renderLink?: (item: DashboardBreadcrumbItem, children: ReactNode) => ReactNode;
+  /**
+   * The trail's landmark name. @default "breadcrumb" — a host passes
+   * `UI_LABELS[locale].dashboard.breadcrumb`.
+   */
+  ariaLabel?: string;
   className?: string;
 }
 

package/src/components/navigation/CommandPalette/CommandPalette.helpers.ts

@@ -1,3 +1,4 @@
+import { EN_US_COMMAND_PALETTE_COPY } from '../../../en-US.navigation';
 import type Fuse from 'fuse.js';
 import type React from 'react';
 
@@ -33,11 +34,14 @@ export const filterCommands = ({
   return [...recent, ...commands.filter((command) => !recentCommandIds.includes(command.id))];
 };
 
-export const groupByCategory = (commands: PaletteCommand[]): Record<string, PaletteCommand[]> => {
+export const groupByCategory = (
+  commands: PaletteCommand[],
+  generalLabel: string = EN_US_COMMAND_PALETTE_COPY.general,
+): Record<string, PaletteCommand[]> => {
   const groups: Record<string, PaletteCommand[]> = {};
 
   for (const command of commands) {
-    const category = command.category || 'General';
+    const category = command.category || generalLabel;
     groups[category] = groups[category] ?? [];
     groups[category].push(command);
   }

package/src/components/navigation/CommandPalette/CommandPalette.hooks.ts

@@ -17,11 +17,13 @@ const useCommandSearch = ({
   searchQuery,
   showRecent,
   recentCommandIds,
+  generalLabel,
 }: {
   commands: PaletteCommand[];
   searchQuery: string;
   showRecent?: boolean;
   recentCommandIds: string[];
+  generalLabel?: string;
 }) => {
   const fuse = useMemo(
     () =>
@@ -38,7 +40,10 @@ const useCommandSearch = ({
     [searchQuery, commands, fuse, showRecent, recentCommandIds],
   );
 
-  const groupedCommands = useMemo(() => groupByCategory(filteredCommands), [filteredCommands]);
+  const groupedCommands = useMemo(
+    () => groupByCategory(filteredCommands, generalLabel),
+    [filteredCommands, generalLabel],
+  );
 
   return { filteredCommands, groupedCommands };
 };
@@ -152,8 +157,10 @@ export const useCommandPalette = ({
   recentCommands,
   onCommandExecute,
   onClose,
+  generalLabel,
 }: {
   open: boolean;
+  generalLabel?: string;
   commands: PaletteCommand[];
   showRecent?: boolean;
   recentCommands: string[];
@@ -171,6 +178,7 @@ export const useCommandPalette = ({
     searchQuery,
     showRecent,
     recentCommandIds,
+    generalLabel,
   });
 
   const executeCommand = useExecuteCommand({ setRecentCommandIds, onCommandExecute, onClose });