@nocobase/app-template-default 1.0.0-beta.58 → 1.0.0-beta.60

package/client/components/ui/alert-dialog.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { cn } from 'cn';
+
+import { Button } from '#components/ui/button';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot='alert-dialog-overlay'
+      className={cn(
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot='alert-dialog-content'
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] gap-5 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none max-w-[calc(100%-2rem)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          size === 'sm' ? 'sm:max-w-sm' : 'sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-dialog-header'
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-dialog-footer'
+      className={cn(
+        '-mx-6 -mb-6 flex flex-col-reverse gap-3 rounded-b-xl border-t bg-muted/30 px-6 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-dialog-media'
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot='alert-dialog-title'
+      className={cn(
+        'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot='alert-dialog-description'
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot='alert-dialog-action'
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot='alert-dialog-cancel'
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/client/components/ui/card.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { cn } from 'cn';
+
+function Card({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+  return (
+    <div
+      data-slot='card'
+      data-size={size}
+      className={cn(
+        'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-header'
+      className={cn(
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-title'
+      className={cn(
+        'font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-description'
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-action'
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-content'
+      className={cn('px-(--card-spacing)', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='card-footer'
+      className={cn(
+        'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/client/components/ui/dialog.tsx

@@ -53,7 +53,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot='dialog-content'
         className={cn(
-          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] gap-5 overflow-y-auto rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
           className,
         )}
         {...props}
@@ -102,7 +102,7 @@ function DialogFooter({
     <div
       data-slot='dialog-footer'
       className={cn(
-        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        '-mx-6 -mb-6 flex flex-col-reverse gap-3 rounded-b-xl border-t bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}

package/client/components/ui/radio-group.tsx

@@ -0,0 +1,35 @@
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { cn } from 'cn';
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot='radio-group'
+      className={cn('grid w-full gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot='radio-group-item'
+      className={cn(
+        'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary',
+        className,
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot='radio-group-indicator'
+        className='flex size-4 items-center justify-center'
+      >
+        <span className='absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground' />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/client/components/ui/spinner.tsx

@@ -1,20 +1,2 @@
-import { useTranslation } from '@nocobase/i18n/client';
-import { cn } from 'cn';
-import { Loader2Icon } from 'lucide-react';
-
-function Spinner(inputProps: React.ComponentProps<'svg'>) {
-  const { t } = useTranslation();
-  const { className, ...props } = inputProps;
-
-  return (
-    <Loader2Icon
-      data-slot='spinner'
-      role='status'
-      aria-label={t('status.loading', { defaultValue: 'Loading' })}
-      className={cn('size-4 animate-spin', className)}
-      {...props}
-    />
-  );
-}
-
-export { Spinner };
+// Preserve the shadcn Spinner API while sharing the application's brand indicator.
+export { BrandSpinner as Spinner } from '#components/brand-spinner';

package/client/components/ui/toast.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { BrandSpinner } from '#components/brand-spinner';
+
 import { useTranslation } from '@nocobase/i18n/client';
 import * as React from 'react';
 import { Toast as ToastPrimitive } from '@base-ui/react/toast';
@@ -12,7 +14,6 @@ import {
   InfoIcon,
   TriangleAlertIcon,
   OctagonXIcon,
-  Loader2Icon,
 } from 'lucide-react';
 
 const toast = ToastPrimitive.createToastManager();
@@ -159,7 +160,7 @@ function ToastIcon({ type }: { type: string | undefined }) {
   }
 
   if (type === 'loading') {
-    icon = <Loader2Icon className='animate-spin' aria-hidden='true' />;
+    icon = <BrandSpinner aria-hidden='true' />;
   }
 
   if (!icon) {

package/client/extensions/nocobase-file-component-ui/components/file-upload-field.tsx

@@ -1,6 +1,6 @@
 import { messageKey } from '../lib/message-key.js';
 import { useTranslation } from '@nocobase/i18n/client';
-import { LoaderCircle, RotateCcw, Trash2, UploadCloud, X } from 'lucide-react';
+import { RotateCcw, Trash2, UploadCloud, X } from 'lucide-react';
 import {
   useEffect,
   useRef,
@@ -12,6 +12,7 @@ import {
 
 import type { FileRecord, FileUploadFieldProps } from '../types';
 import { Button } from '#components/ui/button';
+import { Spinner } from '#components/ui/spinner';
 import { FileThumbnail } from './file-thumbnail';
 
 type UploadItem = {
@@ -289,8 +290,7 @@ export function FileUploadField(
           <div key={item.key} className='w-36 rounded-md border p-2'>
             <div className='flex h-20 items-center justify-center overflow-hidden rounded-sm bg-muted/30'>
               {item.status === 'uploading' ? (
-                <LoaderCircle
-                  className='animate-spin'
+                <Spinner
                   aria-label={t('files.uploading', {
                     defaultValue: 'Uploading',
                   })}

package/client/extensions/nocobase-inbox/inbox-item.tsx

@@ -179,11 +179,12 @@ function ItemCard({
         <span className='mt-0.5 flex shrink-0'>
           <InboxTypeIcon entry={entry} renderer={renderer} />
         </span>
-        <button
+        <Button
+          variant='ghost'
           type='button'
           aria-current={selected ? 'true' : undefined}
           // Stretched over the whole card, so a click anywhere on it selects the item.
-          className="block min-w-0 flex-1 cursor-pointer space-y-1 text-left after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:outline-none"
+          className="block h-auto min-w-0 flex-1 cursor-pointer space-y-1 rounded-none border-0 bg-transparent p-0 text-left font-normal whitespace-normal hover:bg-transparent active:translate-y-0 after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:outline-none"
           onClick={() => onSelect(entry)}
           onKeyDown={onKeyDown}
         >
@@ -234,7 +235,7 @@ function ItemCard({
               {sentence}
             </span>
           ) : null}
-        </button>
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger
             render={

package/client/layouts/app-layout.tsx

@@ -1,17 +1,14 @@
 import { useSyncServerLocale } from '@nocobase/app-plugin-i18n/client';
-import { useMemo, type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
 import { Outlet, useLocation } from 'react-router';
 
+import { BrandWatermark } from '#components/brand-watermark';
 import { Breadcrumbs } from '#components/breadcrumbs';
-import { EMPTY_ARRAY } from '#lib/constants';
 
 import { RouteTreeProvider } from '../routing/route-context.js';
 
-import {
-  PageBreadcrumbProvider,
-  useClientApplication,
-} from '@nocobase/app-client';
+import { PageBreadcrumbProvider } from '@nocobase/app-client';
 import { useTranslation } from '@nocobase/i18n/client';
 import { LayoutHeader } from './components/layout-header.js';
 import {
@@ -26,19 +23,13 @@ import { AppSidebarFooter } from './components/sidebar-footer.js';
 import {
   useRouteNavigation,
   selectedNavigationId,
-  navigationPages,
 } from '../routing/route-navigation.js';
 
 export interface AppLayoutProps {
   readonly routes: readonly AppClientRegisteredRoute[];
-  /** Pages plugins declare with `defineDevRoutes()`: rendered in this shell at `/dev/...`, never in its navigation. */
-  readonly devRoutes?: readonly AppClientRegisteredRoute[];
 }
 
-export function AppLayout({
-  routes,
-  devRoutes = EMPTY_ARRAY,
-}: AppLayoutProps): ReactElement {
+export function AppLayout({ routes }: AppLayoutProps): ReactElement {
   // The browser decides what it renders; this tells the server the same language so its messages match.
   useSyncServerLocale();
 
@@ -49,21 +40,13 @@ export function AppLayout({
     useLocation().pathname,
     denied,
   );
-  const settingsNavigation = useRouteNavigation(
-    useClientApplication().runtime.settingsRouteTree,
-  );
-  // Pages read their trail from this tree, so it keeps its identity between renders.
-  const routeTree = useMemo(
-    () => (devRoutes.length ? [...routes, ...devRoutes] : routes),
-    [routes, devRoutes],
-  );
   const navigationLabel = t('navigation.label', {
     defaultValue: 'Application navigation',
   });
 
   return (
     // The shell owns the business route tree used by its pages and navigation.
-    <RouteTreeProvider routes={routeTree}>
+    <RouteTreeProvider routes={routes}>
       <PageBreadcrumbProvider>
         <AppSidebarProvider>
           <AppSidebar label={navigationLabel} footer={<AppSidebarFooter />}>
@@ -84,13 +67,10 @@ export function AppLayout({
                 {/* The current page's trail: the route tree's, or the one the page declares (`usePageBreadcrumb`). */}
                 <Breadcrumbs denied={denied} />
               </div>
-              <HeaderActions
-                showSettings={
-                  navigationPages(settingsNavigation.items).length > 0
-                }
-              />
+              <HeaderActions />
             </LayoutHeader>
-            <main className='relative min-w-0 flex-1 overflow-hidden'>
+            <main className='app-brand-surface relative isolate min-w-0 flex-1 overflow-hidden'>
+              <BrandWatermark className='-z-10' />
               {/* main only positions; the page scrolls in here, so a child page layer laid over main is neither
             moved by the page's scrolling nor stretched by its height. */}
               <div className='h-full overflow-y-auto'>

package/client/layouts/components/app-sidebar.tsx

@@ -48,11 +48,11 @@ export function AppSidebarProvider({
       open={!collapsed}
       onOpenChange={(open) => setCollapsed(!open)}
       className='h-svh bg-background'
-      // shadcn's 16rem and 3rem, in spacing units: a density preset that changes the unit scales the sidebar together
-      // with the items inside it (the provider's documented way to set the widths).
+      // Give expanded navigation more breathing room while retaining density-aware sizing
+      // and the existing compact icon rail (the provider's documented width override).
       style={
         {
-          '--sidebar-width': 'calc(var(--spacing) * 64)',
+          '--sidebar-width': 'calc(var(--spacing) * 75)',
           '--sidebar-width-icon': 'calc(var(--spacing) * 12)',
         } as CSSProperties
       }
@@ -123,7 +123,7 @@ export function AppSidebar({
     <>
       {header}
       {/* The primitive hides the icon mode's overflow; a long menu still scrolls there. */}
-      <SidebarContent className='group-data-[collapsible=icon]:overflow-y-auto'>
+      <SidebarContent className='app-navigation group-data-[collapsible=icon]:overflow-y-auto [&_[data-slot=sidebar-menu-button]]:h-10 [&_[data-slot=sidebar-menu-button]]:px-3'>
         {children}
       </SidebarContent>
       {footer}

package/client/layouts/components/header-actions.tsx

@@ -1,47 +1,14 @@
-import { useTranslation } from '@nocobase/i18n/client';
-import { Settings } from 'lucide-react';
 import type { ReactElement } from 'react';
-import { Link } from 'react-router';
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from '#components/ui/tooltip';
+import { TooltipProvider } from '#components/ui/tooltip';
 
 import { ThemeSettings } from '../../theme/index.js';
 import { UserMenu } from './user-menu.js';
-import { InboxHeaderButton } from '#components/inbox-header-button';
-
-const ACTION_LINK_CLASS =
-  'inline-flex size-10 items-center justify-center rounded-xl border border-border/70 bg-background/60 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50';
-
-/** Keep header entries visible on their destination pages so navigation stays consistent across surfaces. */
-export function HeaderActions({
-  showSettings,
-}: {
-  readonly showSettings: boolean;
-}): ReactElement {
-  const { t } = useTranslation();
 
+/** The header's right-hand actions, shared by every authenticated page. */
+export function HeaderActions(): ReactElement {
   return (
     <TooltipProvider>
       <div className='flex shrink-0 items-center gap-2'>
-        {/* The inbox's entry, from the UI Library; keep its unread shortcut on every authenticated surface. */}
-        <InboxHeaderButton />
-        {showSettings ? (
-          <Tooltip>
-            <TooltipTrigger
-              render={<Link to='/settings' className={ACTION_LINK_CLASS} />}
-              aria-label={t('settings.title', { defaultValue: 'Settings' })}
-            >
-              <Settings className='size-5' />
-            </TooltipTrigger>
-            <TooltipContent side='bottom'>
-              {t('settings.title', { defaultValue: 'Settings' })}
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
         <ThemeSettings />
         <UserMenu />
       </div>

package/client/layouts/index.ts

@@ -1,2 +1 @@
 export { AppLayout, type AppLayoutProps } from './app-layout.js';
-export { SettingsLayout, type SettingsLayoutProps } from './settings-layout.js';

package/client/lib/toaster.ts

@@ -39,7 +39,7 @@ export function createToaster(manager: typeof toast = toast): Toaster {
  * Base UI announces a high-priority toast at once, but hides the toast itself from assistive technology until the
  * toast viewport is focused, and repeats its title and description in a visually hidden alert. That suits an error
  * written as plain text. Every other error keeps the default priority: one with an action, or whose title or
- * description is an element rather than text, may hold a control — Hub's technical details toggle is one — which a
+ * description is an element rather than text, may hold a control — a technical details toggle, for one — which a
  * high priority would hide and duplicate.
  */
 function isUrgent({ type, title, description, action }: ToastOptions): boolean {