@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.40

package/src/workbench/management/ExtensionManagementPanel.tsx

@@ -7,6 +7,8 @@ import {
   extensionCategoryIconTone,
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
+import { resolveExtensionInstallOptions } from './extension-install-approval.js';
+import { filterBrowseEntries, filterInstalledEntries } from './extension-management-filters.js';
 import { ManagementFilterChips } from './ManagementFilterChips.js';
 import { ManagementCard, ManagementCardList } from './ManagementCard.js';
 import { ManagementGroup, ManagementGroups } from './ManagementGroup.js';
@@ -22,6 +24,7 @@ import type {
   ExtensionManagementEntry,
   ExtensionManagementFeatureSummary,
   ExtensionManagementPanelProps,
+  ExtensionManagementTransition,
 } from './types.js';
 
 const BROWSE_CATEGORIES = ['all', 'feature', 'editor', 'theme', 'language'] as const;
@@ -40,8 +43,11 @@ export function ExtensionManagementPanel({
   catalogLoading = false,
   className,
   installedEntries,
+  isInstallTrusted,
   onInstall,
+  onRememberInstallTrust,
   onToggleEnabled,
+  onUninstall,
 }: ExtensionManagementPanelProps) {
   const [activeTab, setActiveTab] = useState<'installed' | 'browse'>(
     EXTENSION_MANAGEMENT_DEFAULT_TAB,
@@ -89,6 +95,7 @@ export function ExtensionManagementPanel({
                 summary={`${filteredInstalled.length} of ${installedEntries.length} visible`}
                 onQueryChange={setInstalledQuery}
                 onToggleEnabled={onToggleEnabled}
+                onUninstall={onUninstall}
               />
             ),
           },
@@ -103,12 +110,14 @@ export function ExtensionManagementPanel({
                 emptyLabel="No catalog extensions match the current filter."
                 entries={filteredBrowse}
                 groups={browseGroups}
+                isInstallTrusted={isInstallTrusted}
                 query={browseQuery}
                 showGroups={showBrowseGroups}
                 summary={`${filteredBrowse.length} of ${browseEntries.length} in catalog`}
                 onCategoryChange={setCategoryFilter}
                 onInstall={onInstall}
                 onQueryChange={setBrowseQuery}
+                onRememberInstallTrust={onRememberInstallTrust}
               />
             ),
           },
@@ -116,7 +125,8 @@ export function ExtensionManagementPanel({
         onSelect={(tabId) => setActiveTab(tabId as 'installed' | 'browse')}
       />
       <ManagementPanelNotice>
-        Installing or toggling extensions reloads the workbench to apply contributions.
+        Eligible unselected theme packs apply immediately. Other extension changes reload the
+        workbench.
       </ManagementPanelNotice>
     </ManagementPanelFrame>
   );
@@ -127,6 +137,7 @@ function InstalledExtensionsTab({
   entries,
   onQueryChange,
   onToggleEnabled,
+  onUninstall,
   query,
   summary,
 }: {
@@ -134,6 +145,7 @@ function InstalledExtensionsTab({
   entries: readonly ExtensionManagementEntry[];
   onQueryChange: (query: string) => void;
   onToggleEnabled?: ExtensionManagementPanelProps['onToggleEnabled'];
+  onUninstall?: ExtensionManagementPanelProps['onUninstall'];
   query: string;
   summary: string;
 }) {
@@ -154,15 +166,27 @@ function InstalledExtensionsTab({
             <li key={entry.id}>
               <ManagementCard
                 actions={
-                  <Button
-                    compact
-                    disabled={!onToggleEnabled || entry.source === 'bundled'}
-                    type="button"
-                    variant={entry.enabled ? 'default' : 'primary'}
-                    onClick={() => onToggleEnabled?.(entry, !entry.enabled)}
-                  >
-                    {entry.enabled ? 'Disable' : 'Enable'}
-                  </Button>
+                  <>
+                    <Button
+                      compact
+                      disabled={!onToggleEnabled || entry.source === 'bundled'}
+                      type="button"
+                      variant={entry.enabled ? 'default' : 'primary'}
+                      onClick={() => onToggleEnabled?.(entry, !entry.enabled)}
+                    >
+                      {entry.enabled ? 'Disable' : 'Enable'}
+                    </Button>
+                    {entry.canUninstall === true && onUninstall ? (
+                      <Button
+                        compact
+                        type="button"
+                        variant="danger"
+                        onClick={() => onUninstall(entry)}
+                      >
+                        Uninstall
+                      </Button>
+                    ) : null}
+                  </>
                 }
                 badges={
                   <>
@@ -174,6 +198,14 @@ function InstalledExtensionsTab({
                         {entry.enabled ? 'Enabled' : 'Disabled'}
                       </Badge>
                     )}
+                    {entry.transition ? (
+                      <Badge
+                        title={entry.transition.message}
+                        variant={extensionTransitionBadgeVariant(entry.transition.kind)}
+                      >
+                        {extensionTransitionLabel(entry.transition.kind)}
+                      </Badge>
+                    ) : null}
                   </>
                 }
                 description={entry.description}
@@ -192,6 +224,22 @@ function InstalledExtensionsTab({
   );
 }
 
+function extensionTransitionLabel(kind: ExtensionManagementTransition['kind']): string {
+  if (kind === 'reloadRequired') {
+    return 'Reload required';
+  }
+  return kind === 'failed' ? 'Failed' : 'Applied';
+}
+
+function extensionTransitionBadgeVariant(
+  kind: ExtensionManagementTransition['kind'],
+): 'accent' | 'danger' | 'muted' {
+  if (kind === 'failed') {
+    return 'danger';
+  }
+  return kind === 'applied' ? 'accent' : 'muted';
+}
+
 function ExtensionFeatureDetails({ entry }: { entry: ExtensionManagementEntry }) {
   const rows = getExtensionFeatureDetailRows(entry.features);
   const diagnostics = entry.diagnostics ?? [];
@@ -273,9 +321,11 @@ function BrowseExtensionsTab({
   emptyLabel,
   entries,
   groups,
+  isInstallTrusted,
   onCategoryChange,
   onInstall,
   onQueryChange,
+  onRememberInstallTrust,
   query,
   showGroups,
   summary,
@@ -286,9 +336,11 @@ function BrowseExtensionsTab({
   emptyLabel: string;
   entries: readonly ExtensionCatalogBrowseEntry[];
   groups: ReadonlyArray<{ category: string; entries: readonly ExtensionCatalogBrowseEntry[] }>;
+  isInstallTrusted?: ExtensionManagementPanelProps['isInstallTrusted'];
   onCategoryChange: (category: BrowseCategoryFilter) => void;
   onInstall?: ExtensionManagementPanelProps['onInstall'];
   onQueryChange: (query: string) => void;
+  onRememberInstallTrust?: ExtensionManagementPanelProps['onRememberInstallTrust'];
   query: string;
   showGroups: boolean;
   summary: string;
@@ -335,7 +387,9 @@ function BrowseExtensionsTab({
                   <li key={entry.id}>
                     <ExtensionCatalogCard
                       entry={entry}
+                      isInstallTrusted={isInstallTrusted}
                       onInstall={onInstall}
+                      onRememberInstallTrust={onRememberInstallTrust}
                       showCategory={false}
                     />
                   </li>
@@ -349,7 +403,13 @@ function BrowseExtensionsTab({
         <ManagementCardList>
           {flatEntries.map((entry) => (
             <li key={entry.id}>
-              <ExtensionCatalogCard entry={entry} onInstall={onInstall} showCategory />
+              <ExtensionCatalogCard
+                entry={entry}
+                isInstallTrusted={isInstallTrusted}
+                onInstall={onInstall}
+                onRememberInstallTrust={onRememberInstallTrust}
+                showCategory
+              />
             </li>
           ))}
         </ManagementCardList>
@@ -360,11 +420,15 @@ function BrowseExtensionsTab({
 
 function ExtensionCatalogCard({
   entry,
+  isInstallTrusted,
   onInstall,
+  onRememberInstallTrust,
   showCategory,
 }: {
   entry: ExtensionCatalogBrowseEntry;
+  isInstallTrusted?: ExtensionManagementPanelProps['isInstallTrusted'];
   onInstall?: ExtensionManagementPanelProps['onInstall'];
+  onRememberInstallTrust?: ExtensionManagementPanelProps['onRememberInstallTrust'];
   showCategory: boolean;
 }) {
   return (
@@ -378,7 +442,15 @@ function ExtensionCatalogCard({
           }
           type="button"
           variant={entry.installed ? 'default' : 'primary'}
-          onClick={() => onInstall?.(entry)}
+          onClick={() => {
+            if (!onInstall) return;
+            const options = resolveExtensionInstallOptions(entry, {
+              isTrusted: isInstallTrusted,
+              rememberTrust: onRememberInstallTrust,
+            });
+            if (!options) return;
+            onInstall(entry, options);
+          }}
         >
           {entry.installed ? 'Installed' : entry.installPlan?.blocked ? 'Blocked' : 'Install'}
         </Button>
@@ -462,37 +534,3 @@ function groupBrowseEntries(entries: readonly ExtensionCatalogBrowseEntry[]) {
     })
     .map(([category, categoryEntries]) => ({ category, entries: categoryEntries }));
 }
-
-function filterInstalledEntries(entries: readonly ExtensionManagementEntry[], query: string) {
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return entries;
-  }
-
-  return entries.filter((entry) =>
-    [entry.displayName, entry.id, entry.category, entry.description ?? '']
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized),
-  );
-}
-
-function filterBrowseEntries(
-  entries: readonly ExtensionCatalogBrowseEntry[],
-  query: string,
-  category?: string,
-) {
-  const normalized = query.trim().toLowerCase();
-  return entries.filter((entry) => {
-    if (category && entry.category !== category) {
-      return false;
-    }
-    if (!normalized) {
-      return true;
-    }
-    return [entry.displayName, entry.id, entry.category, entry.description]
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized);
-  });
-}

package/src/workbench/management/ExtensionManagementSidebar.tsx

@@ -17,6 +17,8 @@ import {
   extensionCategoryIconTone,
   formatExtensionCategoryLabel,
 } from './extension-category-display.js';
+import { resolveExtensionInstallOptions } from './extension-install-approval.js';
+import { filterBrowseEntries, filterInstalledEntries } from './extension-management-filters.js';
 import { ManagementFilterChips } from './ManagementFilterChips.js';
 import type {
   ExtensionCatalogBrowseEntry,
@@ -24,6 +26,7 @@ import type {
   ExtensionManagementEntry,
   ExtensionManagementFeatureSummary,
   ExtensionManagementPanelProps,
+  ExtensionManagementTransition,
 } from './types.js';
 
 const BROWSE_CATEGORIES = ['all', 'feature', 'editor', 'theme', 'language'] as const;
@@ -41,6 +44,7 @@ export interface ExtensionManagementSidebarProps extends ExtensionManagementPane
   emptyMarketplaceLabel?: string | undefined;
   missingExtensionIds?: readonly string[] | undefined;
   pendingAction?: ExtensionManagementPendingAction | undefined;
+  pendingUninstallEntryId?: string | undefined;
 }
 
 export interface ExtensionManagementPendingAction {
@@ -57,10 +61,14 @@ export function ExtensionManagementSidebar({
   emptyInstalledLabel = 'No installed extensions match the filter.',
   emptyMarketplaceLabel = 'No marketplace extensions match the filter.',
   installedEntries,
+  isInstallTrusted,
   missingExtensionIds = [],
   onInstall,
+  onRememberInstallTrust,
   onToggleEnabled,
+  onUninstall,
   pendingAction,
+  pendingUninstallEntryId,
 }: ExtensionManagementSidebarProps) {
   const [activeTab, setActiveTab] = useState<'installed' | 'marketplace'>(defaultTab);
   const [query, setQuery] = useState('');
@@ -98,7 +106,8 @@ export function ExtensionManagementSidebar({
       footer={
         <p className="workbench-extensions-sidebar__notice" role="note">
           <i aria-hidden className={cxCodicon('codicon-info')} />
-          Installing or enabling extensions reloads the workbench to apply contributions.
+          Eligible unselected theme packs apply immediately. Other extension changes reload the
+          workbench.
         </p>
       }
       footerPlacement="overlay"
@@ -153,15 +162,19 @@ export function ExtensionManagementSidebar({
           catalogLoading={catalogLoading}
           emptyLabel={emptyMarketplaceLabel}
           entries={filteredBrowse}
+          isInstallTrusted={isInstallTrusted}
           pendingAction={pendingAction}
           onInstall={onInstall}
+          onRememberInstallTrust={onRememberInstallTrust}
         />
       ) : (
         <InstalledExtensionList
           emptyLabel={emptyInstalledLabel}
           entries={filteredInstalled}
           pendingAction={pendingAction}
+          pendingUninstallEntryId={pendingUninstallEntryId}
           onToggleEnabled={onToggleEnabled}
+          onUninstall={onUninstall}
         />
       )}
     </SideBarViewFrame>
@@ -172,12 +185,16 @@ function InstalledExtensionList({
   emptyLabel,
   entries,
   onToggleEnabled,
+  onUninstall,
   pendingAction,
+  pendingUninstallEntryId,
 }: {
   emptyLabel: string;
   entries: readonly ExtensionManagementEntry[];
   onToggleEnabled?: ExtensionManagementPanelProps['onToggleEnabled'];
+  onUninstall?: ExtensionManagementPanelProps['onUninstall'];
   pendingAction?: ExtensionManagementPendingAction | undefined;
+  pendingUninstallEntryId?: string | undefined;
 }) {
   if (entries.length === 0) {
     return (
@@ -192,6 +209,8 @@ function InstalledExtensionList({
       {entries.map((entry) => {
         const isPendingToggle =
           pendingAction?.kind === 'toggle' && pendingAction.entryId === entry.id;
+        const isPendingUninstall = pendingUninstallEntryId === entry.id;
+        const isPending = isPendingToggle || isPendingUninstall;
         const errorDiagnostics = (entry.diagnostics ?? []).filter(
           (diagnostic) => diagnostic.severity === 'error',
         );
@@ -203,15 +222,28 @@ function InstalledExtensionList({
           <ExtensionSidebarListItem
             key={entry.id}
             action={
-              <Button
-                compact
-                disabled={!onToggleEnabled || entry.source === 'bundled' || isPendingToggle}
-                type="button"
-                variant={entry.enabled ? 'default' : 'primary'}
-                onClick={() => onToggleEnabled?.(entry, !entry.enabled)}
-              >
-                {isPendingToggle ? 'Reloading…' : entry.enabled ? 'Disable' : 'Enable'}
-              </Button>
+              <>
+                <Button
+                  compact
+                  disabled={!onToggleEnabled || entry.source === 'bundled' || isPending}
+                  type="button"
+                  variant={entry.enabled ? 'default' : 'primary'}
+                  onClick={() => onToggleEnabled?.(entry, !entry.enabled)}
+                >
+                  {isPendingToggle ? 'Reloading…' : entry.enabled ? 'Disable' : 'Enable'}
+                </Button>
+                {entry.canUninstall === true && onUninstall ? (
+                  <Button
+                    compact
+                    disabled={isPending}
+                    type="button"
+                    variant="danger"
+                    onClick={() => onUninstall(entry)}
+                  >
+                    {isPendingUninstall ? 'Reloading…' : 'Uninstall'}
+                  </Button>
+                ) : null}
+              </>
             }
             category={entry.category}
             description={entry.description}
@@ -242,6 +274,14 @@ function InstalledExtensionList({
                     {warningDiagnostics.length} warning{warningDiagnostics.length === 1 ? '' : 's'}
                   </Badge>
                 ) : null}
+                {entry.transition ? (
+                  <Badge
+                    title={entry.transition.message}
+                    variant={extensionTransitionBadgeVariant(entry.transition.kind)}
+                  >
+                    {extensionTransitionLabel(entry.transition.kind)}
+                  </Badge>
+                ) : null}
               </>
             }
             title={entry.displayName}
@@ -252,19 +292,39 @@ function InstalledExtensionList({
   );
 }
 
+function extensionTransitionLabel(kind: ExtensionManagementTransition['kind']): string {
+  if (kind === 'reloadRequired') {
+    return 'Reload required';
+  }
+  return kind === 'failed' ? 'Failed' : 'Applied';
+}
+
+function extensionTransitionBadgeVariant(
+  kind: ExtensionManagementTransition['kind'],
+): 'accent' | 'danger' | 'muted' {
+  if (kind === 'failed') {
+    return 'danger';
+  }
+  return kind === 'applied' ? 'accent' : 'muted';
+}
+
 function MarketplaceExtensionList({
   catalogError,
   catalogLoading,
   emptyLabel,
   entries,
+  isInstallTrusted,
   onInstall,
+  onRememberInstallTrust,
   pendingAction,
 }: {
   catalogError?: string | undefined;
   catalogLoading?: boolean | undefined;
   emptyLabel: string;
   entries: readonly ExtensionCatalogBrowseEntry[];
+  isInstallTrusted?: ExtensionManagementPanelProps['isInstallTrusted'];
   onInstall?: ExtensionManagementPanelProps['onInstall'];
+  onRememberInstallTrust?: ExtensionManagementPanelProps['onRememberInstallTrust'];
   pendingAction?: ExtensionManagementPendingAction | undefined;
 }) {
   if (catalogLoading) {
@@ -318,7 +378,15 @@ function MarketplaceExtensionList({
                 }
                 type="button"
                 variant={entry.installed ? 'default' : 'primary'}
-                onClick={() => onInstall?.(entry)}
+                onClick={() => {
+                  if (!onInstall) return;
+                  const options = resolveExtensionInstallOptions(entry, {
+                    isTrusted: isInstallTrusted,
+                    rememberTrust: onRememberInstallTrust,
+                  });
+                  if (!options) return;
+                  onInstall(entry, options);
+                }}
               >
                 {entry.installed
                   ? 'Installed'
@@ -456,37 +524,3 @@ function formatFeatureBadge(label: string, count: number) {
 
   return `${label} ${count}`;
 }
-
-function filterInstalledEntries(entries: readonly ExtensionManagementEntry[], query: string) {
-  const normalized = query.trim().toLowerCase();
-  if (!normalized) {
-    return entries;
-  }
-
-  return entries.filter((entry) =>
-    [entry.displayName, entry.id, entry.category, entry.description ?? '']
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized),
-  );
-}
-
-function filterBrowseEntries(
-  entries: readonly ExtensionCatalogBrowseEntry[],
-  query: string,
-  category?: string,
-) {
-  const normalized = query.trim().toLowerCase();
-  return entries.filter((entry) => {
-    if (category && entry.category !== category) {
-      return false;
-    }
-    if (!normalized) {
-      return true;
-    }
-    return [entry.displayName, entry.id, entry.category, entry.description]
-      .join(' ')
-      .toLowerCase()
-      .includes(normalized);
-  });
-}

package/src/workbench/management/IntegrationCommandActions.tsx

@@ -1,7 +1,14 @@
 import type { ReactNode } from 'react';
 import { Button } from '../../primitives/button';
 import { WorkbenchPropertyInline } from '../../layout/WorkbenchPropertyPanel';
-import type { IntegrationCommandAction } from './integration-command-action.js';
+
+export interface IntegrationCommandAction<TCommandId extends string = string> {
+  readonly enabled: boolean;
+  readonly execute: () => Promise<void> | void;
+  readonly id: TCommandId;
+  readonly label: string;
+  readonly visible?: boolean | undefined;
+}
 
 type IntegrationActionRowAlign = 'center' | 'start';
 type IntegrationActionRowJustify = 'between' | 'end' | 'start';

package/src/workbench/management/IntegrationSettingsSurface.tsx

@@ -7,6 +7,7 @@ import {
   WorkbenchPropertySection,
   WorkbenchPropertyStack,
 } from '../../primitives/index';
+import { cx } from '../../utils/cx';
 
 type IntegrationSettingsDensity = 'compact' | 'default';
 type IntegrationSettingsInset = 'default' | 'flush';
@@ -206,7 +207,7 @@ export function IntegrationAccountRowEditor({
 export function IntegrationBodyText({ children, size = 'default' }: IntegrationBodyTextProps) {
   return (
     <WorkbenchPropertyHint
-      className={joinClasses('block', size === 'compact' ? 'text-xs' : undefined)}
+      className={cx('block', size === 'compact' ? 'text-xs' : undefined)}
       data-size={size}
     >
       {children}
@@ -284,7 +285,3 @@ function IntegrationEditorDescription({ children }: { children?: ReactNode }) {
 function hasRenderableNode(node: ReactNode | undefined): boolean {
   return node !== undefined && node !== null && node !== false;
 }
-
-function joinClasses(...classes: Array<string | undefined>): string {
-  return classes.filter(Boolean).join(' ');
-}

package/src/workbench/management/IntegrationsShell.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { PanelHeader } from '../../layout/panel';
 import { WorkbenchEditorFrame, WorkbenchPanelScroll } from '../../layout/WorkbenchLayoutBase';
 import { WorkbenchPropertyHint } from '../../layout/WorkbenchPropertyPanel';
-import { SplitView } from '../SplitView';
+import { SplitView } from '../shell/SplitView';
 
 export interface IntegrationsShellProps {
   children: ReactNode;

package/src/workbench/management/KeybindingCaptureField.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
 import { formatKeybindingLabel } from '@workbench-kit/platform';
 import { Button } from '../../primitives/button';
 import { cx } from '../../utils/cx';
+import { normalizeKeyToken } from '../../utils/normalizeKeyToken';
 
 export interface KeybindingCaptureFieldProps {
   ariaLabel?: string | undefined;
@@ -131,12 +132,3 @@ function normalizeKeybindingKeyFromEvent(
   parts.push(normalizeKeyToken(event.key));
   return parts.join('+');
 }
-
-function normalizeKeyToken(token: string): string {
-  const key = token.trim().toLowerCase();
-  if (key === 'del') return 'delete';
-  if (key === 'esc') return 'escape';
-  if (key === 'return') return 'enter';
-  if (key === 'spacebar' || key === 'space') return 'space';
-  return key.length === 1 ? key : key;
-}

package/src/workbench/management/WorkbenchDialogFrame.tsx

@@ -1,7 +1,7 @@
 import type { FormEventHandler, ReactNode } from 'react';
 import { Modal, type ModalBodyLayout, type ModalBodyPadding } from '../../modal/Modal';
-import type { WorkbenchWindowChromeMode } from '../workbenchPlatformChrome';
-import { WorkbenchModalPortal } from '../WorkbenchModalPortal';
+import type { WorkbenchWindowChromeMode } from '../chrome/workbenchPlatformChrome';
+import { WorkbenchModalPortal } from '../chrome/WorkbenchModalPortal';
 
 export type WorkbenchDialogBodyLayout = 'column-fill' | 'default' | 'padded-fill';
 export type WorkbenchDialogFrameSize =

package/src/workbench/management/WorkbenchNotice.tsx

@@ -149,16 +149,16 @@ export function WorkbenchNoticeViewport({
 
   return (
     <div
-      aria-live="polite"
-      className={resolveNoticeViewportClassName(position)}
+      className="ui-workbench-notice-viewport"
       data-position={position}
+      style={resolveNoticeViewportStyle(position)}
       {...(dataAttributes ?? {})}
     >
       {visibleNotices.map((notice) => (
         <WorkbenchBanner
-          className="pointer-events-auto"
           data-tone={notice.tone}
           key={notice.id}
+          role={notice.tone === 'error' ? 'alert' : 'status'}
           style={resolveNoticeBannerStyle(notice.tone)}
           tone={notice.tone === 'warning' ? 'warning' : 'default'}
           {...(notice.dataAttributes ?? {})}
@@ -186,13 +186,6 @@ export function useWorkbenchNotice(): WorkbenchNoticeController {
   return controller;
 }
 
-function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
-  return joinClasses(
-    'pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col gap-2 px-4',
-    position === 'bottom-center' ? 'items-center' : 'items-end',
-  );
-}
-
 function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
   return {
     borderColor:
@@ -203,9 +196,21 @@ function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
           : undefined,
     maxWidth: 'min(520px, calc(100vw - 32px))',
     minWidth: 'min(420px, calc(100vw - 32px))',
+    pointerEvents: 'auto',
   };
 }
 
-function joinClasses(...classes: Array<string | undefined>): string {
-  return classes.filter(Boolean).join(' ');
+function resolveNoticeViewportStyle(position: WorkbenchNoticePosition): CSSProperties {
+  return {
+    alignItems: position === 'bottom-center' ? 'center' : 'flex-end',
+    bottom: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    insetInline: 0,
+    paddingInline: 16,
+    pointerEvents: 'none',
+    position: 'fixed',
+    zIndex: 50,
+  };
 }