@workbench-kit/react 0.0.2-prototype.0.2.26 → 0.0.2-prototype.0.2.28

package/src/widget-tree/WidgetTreeLab.tsx

@@ -31,10 +31,7 @@ import { WorkbenchLabeledPane } from '../layout/panel';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import type { JsonEditorProblem } from '../jdw/JsonCodeEditorPane.js';
 import { WidgetAssetPalette } from './WidgetAssetPalette.js';
-import {
-  WidgetTreeCanvasPreview,
-  type WidgetTreeCanvasAssetDropOperation,
-} from './WidgetTreeCanvasPreview.js';
+import { WidgetTreeCanvasPreview } from './WidgetTreeCanvasPreview.js';
 import { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
 import { WidgetSourceEditor } from './WidgetSourceEditor.js';
 import { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
@@ -375,24 +372,6 @@ export function WidgetTreeLab({
     }
   };
 
-  const handlePlaceAssetPreviewPath = (operation: WidgetTreeCanvasAssetDropOperation) => {
-    if (!document.root) return;
-
-    const parent = getWidgetAtPath(document.root, operation.parentPath);
-    if (!parent || !canAddChildren(parent)) return;
-
-    const changed = applyPatch({
-      type: 'insert-child',
-      parentPath: operation.parentPath,
-      index: operation.insertIndex,
-      child: materializeWidgetPlacementAsset(operation.asset, parent),
-    });
-    if (changed) {
-      setSelection((current) => selectWidgetPath(current, operation.nextPath));
-      focusPropertyDetailTab();
-    }
-  };
-
   const handleRemovePath = (pathToRemove: WidgetPath) => {
     if (pathToRemove.length === 0) return;
     const parentPath = pathToRemove.slice(0, -1);
@@ -518,7 +497,7 @@ export function WidgetTreeLab({
         root={document.root}
         selectedPath={selectedPath}
         onPatch={handleCanvasPatch}
-        onPlaceAssetPath={readOnly ? undefined : handlePlaceAssetPreviewPath}
+        onPlaceAssetPath={readOnly ? undefined : handlePlaceAssetPath}
         onSelectPath={handlePreviewSelectPath}
       />
     </WorkbenchLabeledPane>

package/src/widget-tree/WidgetTreeSidePanel.tsx

@@ -1,10 +1,5 @@
 import type { ReactNode } from 'react';
 
-/** @deprecated Side panel no longer switches tabs; all panes stay visible. */
-export type WidgetTreeSidePanelTab = 'outline' | 'assets' | 'properties';
-/** @deprecated Side panel no longer switches detail tabs. */
-export type WidgetTreeSidePanelDetailTab = Exclude<WidgetTreeSidePanelTab, 'outline'>;
-
 export interface WidgetTreeSidePanelProps {
   readonly outline: ReactNode;
   readonly properties: ReactNode;

package/src/widget-tree/index.ts

@@ -18,11 +18,7 @@ export type {
 export { WidgetInspectorPanel } from './WidgetInspectorPanel.js';
 export type { WidgetInspectorPanelProps } from './WidgetInspectorPanel.js';
 export { WidgetTreeSidePanel } from './WidgetTreeSidePanel.js';
-export type {
-  WidgetTreeSidePanelProps,
-  WidgetTreeSidePanelDetailTab,
-  WidgetTreeSidePanelTab,
-} from './WidgetTreeSidePanel.js';
+export type { WidgetTreeSidePanelProps } from './WidgetTreeSidePanel.js';
 export { WidgetAssetPalette } from './WidgetAssetPalette.js';
 export type { WidgetAssetPaletteProps } from './WidgetAssetPalette.js';
 export {

package/src/workbench/auth/WorkbenchLoginView.tsx

@@ -1,5 +1,4 @@
 import { useId, useState, type FormEvent, type ReactNode } from 'react';
-import { TilepaperAppIcon } from '../../brand/TilepaperAppIcon';
 import { Button } from '../../primitives/button';
 import { TextInput } from '../../primitives/text-input';
 import { cx } from '../../utils/cx';
@@ -165,7 +164,7 @@ export interface WorkbenchPasswordResetViewProps {
 export function WorkbenchLoginBrandMark() {
   return (
     <div className="workbench-login-brand-mark" aria-hidden>
-      <TilepaperAppIcon />
+      <span className="workbench-login-brand-mark__glyph">W</span>
     </div>
   );
 }

package/src/workbench/auth/auth-flows.css

@@ -135,8 +135,22 @@
 }
 
 .workbench-login-brand-mark {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
   width: 100%;
   aspect-ratio: 1;
+  border: 1px solid var(--color-border);
+  border-radius: clamp(28px, 8vw, 72px);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.workbench-login-brand-mark__glyph {
+  font-size: clamp(72px, 14vw, 160px);
+  font-weight: 650;
+  letter-spacing: -0.08em;
+  line-height: 1;
 }
 
 .workbench-login-view__footer-brand {

package/src/workbench/chrome/workbench-layout-regions.css

@@ -40,3 +40,16 @@
   --panel-bg-75: var(--color-primary-side-bar-bg-75);
   background: var(--panel-bg);
 }
+
+/* Primary-sidebar residency owns its intentionally hidden native scrollbars. */
+.workbench-primary-sidebar .ui-sidebar-view__body,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content {
+  scrollbar-gutter: auto;
+  scrollbar-width: none;
+}
+
+.workbench-primary-sidebar .ui-sidebar-view__body::-webkit-scrollbar,
+.workbench-primary-sidebar .ui-workbench-sidebar-section__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}

package/src/workbench/chrome/workbench-shell-titlebar.css

@@ -60,18 +60,10 @@
   object-position: center;
 }
 
-.workbench-shell-titlebar__app-icon > .tilepaper-app-icon,
 .workbench-shell-titlebar__app-icon > svg {
   shape-rendering: geometricPrecision;
 }
 
-.tilepaper-app-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
 .workbench-shell-titlebar__title {
   min-width: 0;
   overflow: hidden;

package/src/workbench/commands/CommandList.tsx

@@ -1,3 +1,4 @@
+import '../views/command-list.css';
 import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
 import { Button } from '../../primitives/button';
 import { EmptyState } from '../../primitives/empty-state';

package/src/workbench/commands/ShortcutCommandBridge.tsx

@@ -213,6 +213,22 @@ export function matchesWorkbenchShortcut({
     );
 }
 
+export function matchesWorkbenchCommandPaletteShortcut(event: WorkbenchShortcutEventLike) {
+  return matchesWorkbenchShortcut({ event, shortcut: 'Ctrl/Cmd+Shift+P' });
+}
+
+export function matchesWorkbenchQuickAccessShortcut(event: WorkbenchShortcutEventLike) {
+  return matchesWorkbenchShortcut({ event, shortcut: 'Ctrl/Cmd+P' });
+}
+
+export function getWorkbenchCommandPaletteShortcutLabel() {
+  return 'Ctrl+Shift+P';
+}
+
+export function getWorkbenchQuickAccessShortcutLabel() {
+  return 'Ctrl+P';
+}
+
 export function getWorkbenchShortcutCommandBindings<TContext>({
   commandIds,
   context,

package/src/workbench/management/WorkbenchNotice.tsx

@@ -9,7 +9,6 @@ import {
   type ReactNode,
 } from 'react';
 import { IconButton, WorkbenchBanner, WorkbenchBannerMessage } from '../../primitives/index';
-import { cx } from '../../utils/cx';
 
 export type WorkbenchNoticeTone = 'error' | 'info' | 'success' | 'warning';
 export type WorkbenchNoticePosition = 'bottom-center' | 'bottom-right';
@@ -150,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 ?? {})}
@@ -187,13 +186,6 @@ export function useWorkbenchNotice(): WorkbenchNoticeController {
   return controller;
 }
 
-function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
-  return cx(
-    '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:
@@ -204,5 +196,21 @@ function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
           : undefined,
     maxWidth: 'min(520px, calc(100vw - 32px))',
     minWidth: 'min(420px, calc(100vw - 32px))',
+    pointerEvents: 'auto',
+  };
+}
+
+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,
   };
 }

package/src/workbench/settings/StructuredDataSchemaPanel.tsx

@@ -98,6 +98,24 @@ interface WorkbenchStructuredDataSchemaSectionView {
   value: unknown;
 }
 
+interface SchemaSectionRenderOptions {
+  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
+  fieldErrors?: Record<string, ReactNode> | undefined;
+  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
+  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
+  localErrorKeys?: ReadonlySet<string> | undefined;
+  onDataValueChange: (path: string[], value: unknown) => void;
+  onValidateField?: (
+    dataPath: string,
+    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
+    value: unknown,
+  ) => void;
+  readOnly: boolean;
+}
+
+type SchemaSectionRenderProps = WorkbenchStructuredDataSchemaSectionView &
+  SchemaSectionRenderOptions;
+
 const defaultSchemaPanelClassNames: Required<WorkbenchStructuredDataSchemaPanelClassNames> = {
   checkbox: 'ui-workbench-structured-data-schema-panel__checkbox',
   empty: 'ui-workbench-structured-data-schema-panel__empty',
@@ -245,20 +263,7 @@ function renderSchemaFormSection({
   schema,
   section,
   value,
-}: WorkbenchStructuredDataSchemaSectionView & {
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
-  readOnly: boolean;
-}) {
+}: SchemaSectionRenderProps) {
   const fields = section.fields ?? [];
   if (fields.length) {
     return (
@@ -379,20 +384,8 @@ function renderSchemaTableSection({
   section,
   value,
   ...sectionView
-}: WorkbenchStructuredDataSchemaSectionView & {
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
+}: SchemaSectionRenderProps & {
   preferredTableColumns?: readonly string[] | undefined;
-  readOnly: boolean;
 }) {
   const rows = getWorkbenchStructuredDataSchemaTableRows(value);
   const columns = getWorkbenchStructuredDataSchemaDocumentTableColumns({
@@ -569,22 +562,10 @@ function renderSchemaPanelSection({
   preferredTableColumns,
   readOnly,
   sectionView,
-}: {
+}: SchemaSectionRenderOptions & {
   anchorId?: string | undefined;
-  classNames?: WorkbenchStructuredDataSchemaPanelClassNames | undefined;
-  fieldErrors?: Record<string, ReactNode> | undefined;
-  getFieldErrorId?: ((dataPath: string) => string | undefined) | undefined;
   headerActions?: ReactNode | undefined;
-  labels?: WorkbenchStructuredDataSchemaPanelLabels | undefined;
-  localErrorKeys?: ReadonlySet<string> | undefined;
-  onDataValueChange: (path: string[], value: unknown) => void;
-  onValidateField?: (
-    dataPath: string,
-    definition: WorkbenchStructuredDataSchemaFieldDefinition | undefined,
-    value: unknown,
-  ) => void;
   preferredTableColumns?: readonly string[] | undefined;
-  readOnly: boolean;
   sectionView: WorkbenchStructuredDataSchemaSectionView;
 }) {
   const { section, value } = sectionView;

package/src/workbench/settings/sectionedPanelScrollSpy.ts

@@ -30,12 +30,6 @@ export const WORKBENCH_SECTIONED_PANEL_INTERSECTION_THRESHOLDS = [0, 0.25, 0.5,
 
 export type WorkbenchSectionedPanelScrollSpyAxis = 'vertical' | 'horizontal';
 
-export interface WorkbenchSectionedPanelIntersectionEntry {
-  intersectionRatio: number;
-  isIntersecting: boolean;
-  target: { id: string };
-}
-
 export interface WorkbenchSectionedPanelScrollPosition {
   anchorId: string;
   /** Section start along the active scroll axis (top or left). */
@@ -108,70 +102,6 @@ export function isWorkbenchSectionedPanelAtScrollEnd({
   return scrollPosition + clientSize >= scrollSize - bottomThreshold;
 }
 
-/** @deprecated Use `isWorkbenchSectionedPanelAtScrollStart`. */
-export function isWorkbenchSectionedPanelAtScrollTop({
-  scrollTop,
-  topThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
-}: {
-  scrollTop: number;
-  topThreshold?: number | undefined;
-}): boolean {
-  return isWorkbenchSectionedPanelAtScrollStart({
-    scrollPosition: scrollTop,
-    startThreshold: topThreshold,
-  });
-}
-
-/** @deprecated Use `isWorkbenchSectionedPanelAtScrollEnd`. */
-export function isWorkbenchSectionedPanelAtScrollBottom({
-  bottomThreshold = WORKBENCH_SECTIONED_PANEL_SCROLL_THRESHOLD,
-  clientHeight,
-  scrollHeight,
-  scrollTop,
-}: {
-  bottomThreshold?: number | undefined;
-  clientHeight: number;
-  scrollHeight: number;
-  scrollTop: number;
-}): boolean {
-  return isWorkbenchSectionedPanelAtScrollEnd({
-    bottomThreshold,
-    clientSize: clientHeight,
-    scrollPosition: scrollTop,
-    scrollSize: scrollHeight,
-  });
-}
-
-export function resolveWorkbenchSectionedPanelActiveAnchorFromIntersection({
-  anchorOrder,
-  entries,
-  fallbackAnchorId,
-}: {
-  anchorOrder: readonly string[];
-  entries: readonly WorkbenchSectionedPanelIntersectionEntry[];
-  fallbackAnchorId?: string | undefined;
-}): string | undefined {
-  const intersectingAnchorIds = new Set(
-    entries
-      .filter((entry) => entry.isIntersecting && entry.target.id)
-      .map((entry) => entry.target.id),
-  );
-
-  if (intersectingAnchorIds.size === 0) {
-    return fallbackAnchorId;
-  }
-
-  let nextActive = fallbackAnchorId;
-
-  for (const anchorId of anchorOrder) {
-    if (intersectingAnchorIds.has(anchorId)) {
-      nextActive = anchorId;
-    }
-  }
-
-  return nextActive ?? fallbackAnchorId;
-}
-
 export function resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
   activeLineBias = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_ACTIVE_LINE_BIAS,
   anchorOrder,
@@ -250,17 +180,6 @@ export function resolveWorkbenchSectionedPanelScrollTarget({
   return Math.max(0, sectionStart - offset);
 }
 
-/** @deprecated Use `resolveWorkbenchSectionedPanelScrollTarget`. */
-export function resolveWorkbenchSectionedPanelScrollTop({
-  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
-  sectionTop,
-}: {
-  offset?: number | undefined;
-  sectionTop: number;
-}): number {
-  return resolveWorkbenchSectionedPanelScrollTarget({ offset, sectionStart: sectionTop });
-}
-
 export function createWorkbenchSectionedPanelIntersectionRootMargin(
   offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
   axis: WorkbenchSectionedPanelScrollSpyAxis = 'vertical',

package/src/workbench/shell/ActivityBar.tsx

@@ -8,7 +8,6 @@ import {
   useWorkbenchSidebarViewPlacementDropZone,
 } from './useWorkbenchSidebarViewPlacementDropZone';
 import { useWorkbenchSidebarActionBarDnd } from './useWorkbenchSidebarActionBarDnd';
-import { WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE } from './sidebarViewPlacementDnd';
 
 export interface ActivityBarItem {
   active?: boolean;
@@ -34,9 +33,6 @@ export interface ActivityBarProps extends Omit<ComponentPropsWithoutRef<'nav'>,
   placementDraggable?: boolean;
 }
 
-/** @deprecated Use WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE */
-export const ACTIVITY_BAR_DRAG_DATA_TYPE = WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE;
-
 export function ActivityBar({
   'aria-label': ariaLabel = 'Activity bar',
   acceptSidebarViewPlacementDrop,

package/src/workbench/shell/shell.ts

@@ -1,4 +1,4 @@
-export { ActivityBar, ACTIVITY_BAR_DRAG_DATA_TYPE } from './ActivityBar';
+export { ActivityBar } from './ActivityBar';
 export {
   hasWorkbenchSidebarViewPlacementDrag,
   readWorkbenchSidebarViewPlacementDrag,

package/src/workbench/shell/workbenchSidebarLayoutContext.ts

@@ -38,9 +38,3 @@ export function toWorkbenchSidebarLayoutContextValue<TViewId extends string>(
 ): WorkbenchSidebarLayoutContextStore {
   return value as unknown as WorkbenchSidebarLayoutContextStore;
 }
-
-export function fromWorkbenchSidebarLayoutContextValue<TViewId extends string>(
-  value: WorkbenchSidebarLayoutContextStore,
-): WorkbenchSidebarLayoutContextValue<TViewId> {
-  return value as unknown as WorkbenchSidebarLayoutContextValue<TViewId>;
-}

package/src/workbench/views/command-list-density.css

@@ -0,0 +1,36 @@
+/* Compact density overrides for Workbench command lists. Keep before command-list.css. */
+
+.ui-workbench-command-list {
+  padding: 0;
+}
+
+.ui-workbench-command-item,
+.ui-workbench-command-item.ui-button {
+  --ui-button-height: auto;
+  --ui-button-padding: 7px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.ui-workbench-command-group-shell__nav {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__nav-link {
+  border-radius: 0;
+}
+
+.ui-workbench-command-group-shell__content {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section-header {
+  min-height: 28px;
+  padding: 4px 10px;
+}

package/src/workbench/views/command-list.css

@@ -1,3 +1,5 @@
+@import './command-list-density.css';
+
 .ui-workbench-command-list {
   max-height: min(430px, calc(100vh - 190px));
   overflow: auto;

package/src/workbench/workspace/WorkspaceExplorer.tsx

@@ -30,7 +30,7 @@ import {
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceTreeNode } from './types';
 
-export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-workspace-paths';
+export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-workbench-kit-workspace-paths';
 export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
 
 export type WorkspaceExplorerSelectionChangeReason =

package/src/workbench/workspace/createVirtualWorkspaceExplorerPort.ts

@@ -6,10 +6,7 @@ import {
 } from '@workbench-kit/workspace';
 
 import type { VirtualWorkspaceApi } from './useVirtualWorkspace';
-import type {
-  WorkspaceExplorerControllerPort,
-  WorkspaceExplorerMutationResult,
-} from './workspaceExplorerController';
+import type { WorkspaceExplorerControllerPort } from './workspaceExplorerController';
 
 export function createVirtualWorkspaceExplorerPort({
   onNotify,
@@ -129,13 +126,3 @@ export function applyVirtualWorkspaceRenameSelection(
     paths: selection.paths.map(renameDescendantPath),
   };
 }
-
-export function toWorkspaceExplorerMutationResult(
-  value: WorkspaceExplorerMutationResult | void | undefined,
-): WorkspaceExplorerMutationResult | undefined {
-  if (!value) {
-    return undefined;
-  }
-
-  return value;
-}

package/src/workbench-menu-surfaces.css

@@ -1,57 +1,3 @@
-/* Optional compact menu density for context menus and command lists. */
-
-.ui-context-menu__item,
-.ui-context-menu__item.ui-button {
-  --ui-button-min-height: 28px;
-  --ui-button-height: auto;
-  --ui-button-padding: 4px 10px;
-  --ui-button-border-radius: 0;
-  border-radius: 0;
-  min-height: 28px;
-  height: auto;
-  padding: 4px 10px;
-}
-
-.ui-context-menu__separator {
-  margin: 0;
-}
-
-.ui-context-menu__shortcut {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-subtle);
-}
-
-.ui-workbench-command-list {
-  padding: 0;
-}
-
-.ui-workbench-command-item,
-.ui-workbench-command-item.ui-button {
-  --ui-button-height: auto;
-  --ui-button-padding: 7px 10px;
-  --ui-button-border-radius: 0;
-  border-radius: 0;
-  height: auto;
-  padding: 7px 10px;
-}
-
-.ui-workbench-command-group-shell__nav {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__nav-link {
-  border-radius: 0;
-}
-
-.ui-workbench-command-group-shell__content {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__section {
-  padding: 0;
-}
-
-.ui-workbench-command-group-shell__section-header {
-  min-height: 28px;
-  padding: 4px 10px;
-}
+/* Compatibility entry for consumers that opt into both compact menu surfaces. */
+@import './overlay/context-menu-density.css';
+@import './workbench/views/command-list-density.css';